Category Archives: Web Design

How to Create a Responsive Navigation Menu with jQuery and CSS3

I am assuming that you have some basic knowledge of CSS and know what is a Responsive Layout – including menus.

In short responsive layout is when content display format adjusts to the viewport’s width and height.

Also we are talking about horizontally laid out menus only for this tutorial.

We have 2 ways to make a menu responsive

1. Stack the menu items one top of another – which is clumsy

2. Convert the menu to a drop down list -which is the way to go!

We are using the 2nd option here.

For any responsive design start out with the code below between <head> and </head> tags.

<meta name="viewport" content="width=device-width, initial-scale=1">

Using this meta tag is like telling the browser that “this website adapts to your View-Port width”.

Important: Do not use this on a non-responsive site. Using this tag on a non-responsive site will make the website zoom to the top left corner, forcing the users to zoom out and zoom in to see the content which is not a good user experience.

Next – create the basic HTML needed for the menu. Code given below.


<!doctype html>

<html>

<head>

</head>

<body>

<div id="menu">

<ul>
<li><a href="#1">One Healthy Browny Dog</a></li>

<li><a href="#2">Two Healthy Browny Dogs</a></li>

<li><a href="#3">Three Healthy Browny Dogs</a></li>

<li><a href="#4">Four Healthy Browny Dogs</a></li>

<li><a href="#5">Five Healthy Browny Dogs</a></li>

<li><a href="#6">Six Healthy Browny Dogs</a></li>

</ul>

</div>

</body>

</html>

As you can see, we have a <div> with id “menu” . This is where we are going to generate the drop-down menu once the view-port changes to width of a tablet or mobile device.

Next – generate the CSS code as follows. You can keep the code within <style> </style> codes or shift the entire block to an external file and call it using the <link rel=stylesheet> tag. For this short tutorial i am keeping the code embedded inside <head></head> tags.

CSS Code:


#menu ul{

list-style: none;

}

#menu ul li{

float: left;

padding: 7px;

border: 1px solid;
}

#menu ul{

display: block;
}

#menu select{

display: none;
}
@media screen and (max-width: 480px){

#menu ul{

display: none;
}

#menu select{

display: block;
}
}

Next – we will need a bit of jQuery magic to generate the drop-down. Call the latest version of Jquery library in header. You can use any applicable method here. I find it easy to use the following snippet inside <head></head> tags – it points to the latest Jquery library online.


<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" >
</script>

Next – insert the following block of code, again inside the head region.


<script type="text/javascript">

jQuery(document).ready(function($){
$("<select />").appendTo("#menu");

$("<option />",
{ "selected" : "selected", "value" : "", "text" : "Navigation" }
).appendTo("#menu select");

$("#menu a").each(function(){

$("<option />",
{ "value": $(this).attr('href'), "text": $(this).text() }
).appendTo("#menu select");

});

$("#menu select").change(function(){

window.location = $(this).find("option:selected").val();

});
});

</script>

This is the code block that generates the drop down menu. If you look at the CSS code at the top you will notice that we are hidding the drop-down created with this script as we dont want it displayed if the page is being viewed on a desktop.

The finished code on the page will look like below:


<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" >
</script>

<script type="text/javascript">

jQuery(document).ready(function($){
$("<select />").appendTo("#menu");

$("<option />",
{ "selected" : "selected", "value" : "", "text" : "Navigation" }
).appendTo("#menu select");

$("#menu a").each(function(){

$("<option />",
{ "value": $(this).attr('href'), "text": $(this).text() }
).appendTo("#menu select");

});

$("#menu select").change(function(){

window.location = $(this).find("option:selected").val();

});
});

</script>

<style type="text/css">

#menu ul{

list-style: none;

}

#menu ul li{

float: left;

padding: 7px;

border: 1px solid;
}

#menu ul{

display: block;
}

#menu select{

display: none;
}
@media screen and (max-width: 480px){

#menu ul{

display: none;
}

#menu select{

display: block;
}
}

</style>

 

</head>

<body>

<div id="menu">

<ul>
<li><a href="#1">One Healthy Browny Dog</a></li>

<li><a href="#2">Two Healthy Browny Dogs</a></li>

<li><a href="#3">Three Healthy Browny Dogs</a></li>

<li><a href="#4">Four Healthy Browny Dogs</a></li>

<li><a href="#5">Five Healthy Browny Dogs</a></li>

<li><a href="#6">Six Healthy Browny Dogs</a></li>

</ul>

</div>

</body>

</html>

For your convenience, you can also download the demo file with code below.

Let me know your feedback and suggestions below.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

12 Most Popular Freelance Sites for Web Designers (UPDATED)

This list showcases the top 12 most popular and active Freelancing sites for web designers. A few are exclusively for Web Designers, most are for web professionals working in web design, web development, marketing and other such tech stuff.

This is an updated and carefully compiled list of only those sites which are worthy of your time, if you are web designer looking for freelance job. Do not waste your time looking for freelancing opportunities in other sites. These sites are all you will need!

http://www.freelancer.com/

http://www.elance.com/

http://www.ifreelance.com/

http://www.vworker.com/

http://www.crowdspring.com/

http://99designs.com

http://www.odesk.com/

http://www.guru.com/

http://www.sologig.com

http://www.designquote.net/

http://www.project4hire.com/

http://www.donanza.com/ – freelance projects aggregator

http://www.peopleperhour.com – work complete in an hour

http://www.designcrowd.com/

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Top tips to design a website in WordPress successfully

While there are a plethora of options available for web design professionals, they often prefer CMS apps. In recent times, demand for CMS web design has gone up considerably and a lot of corporate companies are also opting for CMS based websites. The flexibility, versatility and affordable nature of these applications are the reasons behind this trend. Among numerous CMS software, WordPress remains a favorite one for web development professionals. It is Open Source, offers support for plenty of themes and plug-ins and with every version, the app has become even more robust. You may select WordPress for developing professional and media rich websites. However, it is important that you know the methods to design a professional website using WordPress.

Below listed are some effective tips to design websites using WordPress effectively.

Website layout: Before you make a website using this CMS app, design a draft to determine its layout. You need to know what sort of content and side bar design would be suitable for a website. It is prudent that you view and analyze a number of website s belonging to same category before starting your design. In WordPress, you can use a lot of design elements but it is important that you know which one would be suited for individual websites. In any rate, do not opt for a design layout that compromises on content because this is the primary reason viewers will see a site for.

Color and graphics: Colors remain an integral part of a website and even in a WordPress based site, you need to be selective about choosing background and text color. The color should be chosen carefully so that it blends with the subject of a website. Different colors are associated with different motifs and they generate specific feelings in viewers. Therefore, you should not opt for a color that is odd for your website theme. Text color should contrast well with background so that viewers have no difficulty in reading content.

Sidebar placement and content: Many WordPress sites contain side bars and they serve the purpose of highlighting important updates, ads and notifications for users. While sidebars are an important part of a WordPress based site, you should not overuse them. Sidebars are ideal to contain links to popular social media sites and post offers for buyers. However, if you use lot of sidebars in your site design scheme, that may be distracting for viewers.

User friendly forms:No matter what technology you use to develop a website, there is nothing that can beat the appeal of simplicity. In a WordPress based site, it is important that you use forms that are intuitive and user friendly. If a form is simple to fill in, users do not bother about is length. Vertically laid out forms tend to be the easiest to follow.

Selecting single JavaScript library: It is advisable that you use a single JavaScript library for your website. A lot of developers opt for jQuery these days. You can find lots of scripts in WordPress forums and resource sites that can be used for free.

Selecting apt plug-ins: WordPres sis known for its support for hundreds of plug-in ad with time the plug-in list only goes up. However, before you select a plug-in for your WordPress based site, be cautious. It is not advisable to use third party plug-ins that is low on safety front. Unsafe plug-ins can jeopardize the safety level of your website and make it vulnerable to hackers on prowl. Plug-ins that are supported officially by WordPress developers and get update in time should be used. You should read reviews of WordPress plug-ins before selecting them for use in a website.

Extensive testing:No matter how experienced you are in using WordPress and any CMS app, it is prudent that you test a website made in the app several times before publishing it. You should test a WordPress based site in different OS platforms. It is also necessary to test the site in various web browsers. Nowadays, a lot of people access web through tablet ad mobile devices and you should not leave out mobile browsers. If you perform any manual coding to fine tune website design, bug testing becomes a prerequisite.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Realistic tips to select suitable WordPress themes

CMS web design has kicked off in last few years in a major way. This is not without reasons, to be sure. CMS allocations are user friendly, flexible and support a plethora of plug-ins and modules. To top it all, majority of these website design applications are Open Source and hence free. Among various CMS applications, WordPress has become a favorite with thousands of web development professionals over time. Its user friendliness and flexibility is hard to match. You can create stunning looking websites with this CMS even if you are not well versed in HTML coding. However, to get the most out of this versatile app, you need to use themes carefully. WordPress has hundreds of free and commercial themes and as a designer you need to pick right ones.

Below listed are some useful tips to select suitable WordPress themes for websites.

Type of website: Selecting a WordPress theme often depends to an extent on kind of websites you create.  If it is a personal blog based site, then you can experiment with colorful and unusual looking themes. However, for a corporate site, this is surely not advisable. It is advisable that you select a theme for client websites that gels with color scheme and theme of the company. Specific colors are associated with human feelings and they can evoke various feelings in viewers. Hence, you need to select a WordPress theme that will be helpful for the site’s target viewers to relate with. Ideally, a corporate website made in WordPress should be based on a theme that blends well with its logo and banner.

Grasp on viewer mindset: It is very important that you have a good idea about what customers want from a website. It also depends on age group, gender of target users and customer demographics to an extent. A theme meant for websites targeted at elderly web users should have large fonts and big buttons.  Similarly, use themes with ample scope for media usage for media heavy websites.

E Commerce websites: Majority of WordPress themes work with prevalent e-commerce features. However, there are a number of themes that do not have compatibility in this regard.  Before using any theme in your WordPress driven site, read the description well. It would be advisable for you to see what themes are used in major WordPress based e-commerce websites.

Customization possibilities: It is correct that WordPress themes make your website look attractive in general. However, as a developer you may feel like exploring your creative limits. Therefore, it would be prudent for you to select a WordPress theme that can be customized to an extent to suit individual site requirements. For instance, you may need to alter menu styles and side bar positions in a site made in WordPress.

Coding expertise: While WordPress usage does not demand expertise in web scripting languages, advanced CMS developers use PHP and similar scripting languages to tweak their websites as per project requirements. Basic knowledge in PHP helps a developer to fine tune a WordPress site to appear exactly the way he wants. Some WordPress themes look really classy but to harness their full potential you may have to apply coding. If you do not have expertise in coding, it would be prudent to choose themes that offer simplicity of drag and drop operations.

Widgets and plug-ins: If you want to use a widget in your WordPress website, then you should pick a theme that is compatible with that widget. Widgets are used to add extra functionality to CMS based sites. They are ideal for using banners and collecting site visitor information etc. Plug-ins also serve similar purpose as widgets. Before selecting a plug-in for your site, check for its compatibility with WordPress themes.

Free or paid theme: This is one dilemma many WordPress developers face. There are plenty of free and premium them for WordPress. No matter what kind of them you choose, ensure that you test it extensively before using. This is more relevant before buying a premium theme. Some older themes may be incompatible with latest version of the CMS app. You can also check out online reviews of popular WordPress themes to understand which ones may fit your needs better.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Best Image Management Plugins for WordPress

While there are various tools and applications available for designing websites, CMS applications are the favorites of thousands of web designers worldwide. In last few years, these apps have become really popular in web development industry. Owing to their low ownership cost, flexibility and robust feature set, CMS applications like WordPress and Drupal are being used by millions of users nowadays. However, WordPress is one CMS app that is known for its user friendliness. Even if you are not well versed in HTML or XML, it is possible to set up a website in WordPress within hours. To extend usability of this CMS app, there are plenty of plug-ins and extensions. If you want to develop interactive and media rich websites using it, it is necessary to know about top image plug-ins supported by WordPress.

Benefits you get from using Image plug-ins of WordPress

WordPress can surely be used to make media rich websites but with its numerous image plug-ins you can ensure the images can be used the way you want. There is various such plug-ins for WordPress chat can be used to create stunning photo galleries in websites, optimize images before and add special effects to images. Some image plug-ins also allows you make animated slideshows.  These plug-ins add a touch of professionalism and creativity to any image you use in WordPress. In fact, you may not need to use dedicated image editors if you have the required plug-ins.

Shutter Reloaded: It is a useful WordPress plug-in that helps images stand out in web pages and draw viewer’s attention to it. Basically, it darkens the web page to make the image appear prominent.

Flipping Book: It is useful if you want to display images in your website in an unconventional way. This pug-in enables you to display image sin your website in book page style, much in the line of iTunes album flow style. You can flip images in a style similar to flipping pages in book. This looks stylish and adds to user convenience.

Easy Image Crop: As its name indicates, you can use this image plug-in for WordPress to crop mages before uploading them to your site. This simple ad nifty tool can crop images to your desired dimension and thus it spares you from using standalone image editing applications.

NextGEN Gallery: To create photo galleries in WordPress based sites easily, you can use this image plug-in. It helps you in making image albums smoothly. Apart from that, you can also use it to make stunning Flash based slide shows.

Fotobook: If you want to like your WordPress site to your Facebook profile, this plug-in is meant for you. After using this plug-in, you will be able to share images between the two sites seamlessly. In fact, you can link your WordPress site with more than one Facebook profiles at a time.

SEO Friendly Images: As its name indicates, this plug-in helps you in making images that will be used in your website SEO friendly. This plug-in updates all images used in a site with suitable Title and ALT attributes. It also helps in making your post valid for W3C/xHTML standard.

Imsanity: This plug in is useful for downsizing images to a suitable size so that they can be displayed in web browsers without a problem. You can also set size attributes for images. With this plug-in, you can also resize images that had been uploaded previously. Blog site owners will benefit more from it as they do not need to use high resolution images in general. After enabling this plug-in, you do not need to intervene to operate it.

ImageFX: ImageFX has a number of effects that can be applied to images in your WordPress website with ease. Popular filters like Grayscale, sepia, blur and emboss can be applied with this plug-in.

Image Pro: This is another useful WordPress image plug-in that you can use to make changes to images in a number of ways. It helps in resizing images as per user needs and uploading multiple mages at once from computer.

There is many more WordPress plug-ins that you can use for optimizing, editing and dealing with images. However, ensure the plug-in you use is officially supported and can be used with ease.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Adobe’s new applications that are really useful for web designers

Professionals involved in web design and development industry do not need any introduction to the brand Adobe. From freelancing web designers to large scale web development companies use Adobe web and graphic design applications extensively. Whether it is the company’s mammoth web development application Dreamweaver or its versatile image editor Photoshop, design professionals swear by their capability and feature set. While applications like Photoshop, Illustrator and Dreamweaver have been around for quite a few years, of late Adobe has taken the veil off a set of spanking new design apps that can make the task of web developers and designers easier.

Tablet and cloud applications for web design from stable of Adobe

These applications are meant for designing web graphics and components of web site from handheld devices. The rising popularity and technological advancements in tablets and smart phones have prompted Adobe to make such a move. While these apps, meant for Android based tablets and iPad are not yet capable of replacing any desktop based mainstream design app, they can surely help a design professional augment his work and streamline workflow like never before. Most of these applications run both on iOS and Android based devices and users can also exchange files between these apps and Adobe’s mainstream design apps. The icing on cake is that these apps are compatible with Adobe’s newly unveiled Creative Cloud service.

Adobe Photoshop Express: This is a mobile specific version of the powerhouse app Photoshop million of users are well versed with. As expected, the mobile version comes without many in depth version its PC version has. However, it still packs in enough punch to serve as an image editing app you can use on the move. You can use its crop feature and employ brightness settings to enhance images clicked through tablet and mobile devices. Later these images can be opened in Photoshop for further retouching and modification. You can use your finger or the stylus in case your Android device supports it to use the application.

Adobe Ideas: This is a basic but useful sketching application that runs on Android 3.1 and higher editions and iOS. Whiel it runs both on iPad and iPhone, the android devices featuring smaller screen size may not be able to run it. By using this intuitive app, you can make basic drawings and export them to PDF format. There are few other apps that let you create attractive artwork simply by using your finger on blank canvas. The app’s toolbar comes with several useful settings and extensive brush setting so that you can explore your creative limits. It even allows users to import images.

Adobe Kuler: Adobe Kuler is ideal for those web design professionals who also own Android tablets. It has an incredibly small footprint for an Adobe app, less than 11 MB to be precise. However, do not mistake it as a simple color wheel as it gives you much more than that. In line with other Adobe Touch apps, Kuler sports a sleek and user friendly interface. It lets you work with various color modes using CMYK and RGB, though web designers are more likely to work with the latter. Kuler also supports Creative Cloud integration, like other Touch Apps. Kuler users can share and access color palettes and themes created by other users. This paves way for new creative possibilities. Kuler’s USP is the capability to generate new themes based on images.

Adobe Muse: Apart from making apps for easier web graphics editing, Adobe has also brought something for users who want to dabble with web design but dislike extensive coding. Muse can fit bill for amateur users and newcomers in web design industry. It has a small footprint compared to the powerhouse website development app Dreamweaver. It does the coding in background and its level is quite decent. Veteran designers may feel like polishing the code generated by Muse to suit their needs, but for first time users with no knowledge of xml or HTML Muse fits the bill easily.

Photoshop Touch: iPad and Android device users who want something more powerful than entry level Photoshop Express but less gargantuan than Photoshop itself, should go for Photoshop Touch. Photoshop users will find the interface quite familiar. For any hiccup you face, there is an excellent tutorial included with the app. There are lots of familiar and useful tools including magic wand and Blur. The tools included in the app respond rather well to finger press and tap and you may not need to use a stylus after all.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Top CMS Apps web design professionals can use

Compared to last decade, web design has become far less complicated and designers now have plenty of options to choose from. They can use standalone website development apps like Dreamweaver or Expression web. There are plenty of frameworks and platforms like Ruby on Rails, jQuery and ColdFusion. They can also develop expertise in open source technologies like PHP. However, for majority of web designers and developers, the first choice in web design apps is the CMS based ones. Owing to their flexibility, ease of use and matchless extendibility, CMS applications have become first choice of millions of users worldwide.

Advantages of using CMS apps

With CMS apps, you can design almost any kind of website within a few hours. It would be wrong to think that only blob based personal websites can be designed with CMS apps. On the contrary, lots of corporate and high profile websites are being designed with CMS applications these days. CMS apps are also secured and tend to be SEO friendly, making them suitable for designing professional websites. Below listed are a handful of CMS applications web designers can use for making stunning and professional websites for their clients.

WordPress: The popularity and growing fan following of WordPress is undeniable and with each release, this CMS app just gets better. It can be used by those who do not have much idea about coding and web programming as well and this is a reason it has a massive user base. You can use myriads of plug-in with this CMs app which lets you add functionality to your websites. The best thing about WordPress is you will not run short on resources. There are various WordPress user forums online where you can find information and help. You do not need to pay for using this versatile CMS app either.

Joomla: Joomla is preferred by web developers who want an application that is neither too hard to use nor is basic. It is used by plenty of mid to large sized companies. Joomla comes with lots of website customization options. It may be a little short on extension and plug-ins but its integrated features are more than enough to use your design skills and creativity. There are several online forums run by Joomla developers.

ModX: Even though it is not as popular as Joomla or WordPress, ModX is ideal for web developers, making a switch to CMS web development. It is really user friendly and comes with a short learning curve.

Drupal: A popular and free CMS, Drupal also has a huge fan following. It is used mostly to build corporate and enterprise websites. It supports multiple modules that can be added to expand its functionality.  It also has a large online user community which can be used by new CMS users.

TextPattern: Developers looking for a no fuss and usable CMS app can choose TextPattern. It can be used for making both personal and corporate websites with ease. Its USP is its integrated anti spam feature. What’s more, this app allows you to import your content from other CMS software easily. It also supports a huge number of plug-ins.

RefineryCMS: This CMS is based on popular Ruby on Rails framework. It is intuitive and first time users will not have to face any hardship in learning it.  It can be used to develop various types of websites.

Concrete5: Are you looking for a web design app that does not require you to be a pro at nuances of web design? Or you are among those web designers who have to deal with lots of work and short deadlines? For either purpose, you can try the CMS app named Concrete5. It is intuitive and focuses on end user.

DotNetNuke: If you are not willing to try those CMS apps that are built with PHP and want a different app, this could be for your needs. DotNetNuke is based on Microsoft’s ASP.Net platform. Needless to say, it will run smoothly o Windows based Servers. Corporations that rely on Windows based Intranets will find this CMs well suited for their setup and needs. However, this app cannot be used for free unlike popular Open source CMS apps.

Conclusion

You can choose from various CMS apps that are available nowadays for your web design needs. The best thing is that most of these apps come for free. You can also try the paid apps for a period without paying anything and then take a decision accordingly. In any case, it is better to pick a CMS app that suits your need rather than following the trend.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Effective tips to make your websites Tablet friendly

Trends in web design industry are not only set and affected by new technology and software invention but at times, breakthrough gadgets and hardware innovations play a key role. Ever since Apple redefined tablet devices with its revolutionary touchscreen device iPad, millions of people have started browsing web using these portable sleek devices. Market is now flooded with Apple and Android OS based tablets and this has added a new dimension to mobile web browsing.

Growth in tablet web usage

Tablets strike the right chord with a lot of web users who need to spend lots of time outdoors. From college students to corporate executives leading a hectic life, tablets can come across a handy device to obtain entertainment and get necessary work done. These devices are far more lightweight and smaller than laptops yet offer more screen space than top end smart phones. This has made a chunk of web users opt for tablets to access web for various needs.

Making websites tablet friendly

Web designers cannot afford to overlook the growing user base of tablet owners as doing so will result in their sites being inaccessible to millions. It is important that you learn and master ways to design websites that are optimized for tablets. No matter which scripting language or framework you want to use, it is important to stress on user perspective while making tablet friendly websites. This is essential because people use tablets in different way compared to mainstream computers.

Taking care of screen resolution and viewing mode- Tablets come in varying sizes, starting from 5 inch to 10.1 inch. They also sport various resolutions. Amazon’s Kindle Fire has a native resolution of 600×1,024 which is lower than iPad3’s 2,048-x-1,536 pixels resolution. Android tablets also come in varying resolutions. Therefore, designers need to design their sites keeping in mind of this aspect. Fortunately, some web design apps allow you to make sites in a way that it automatically adjusts content to screen aspect ratio and dimensions. It is also necessary to make your websites capable of fitting to both portrait and landscape modes, as tablet users view web in both these modes.

Avoiding abundance of Flash content- Web designers face a dilemma about using Flash based content in websites targeted at tablet users. It is true that majority of Android tablet users face almost no problem in playing back and viewing Flash content but that is not case with other tablet users. Apple has shown reluctance to provide support for Flash in all its devices including iPad citing security factors. There is no denying iPad is still the most popular tablet. Flash usage can also make websites heavy, depending on content. Tablets with low end hardware may face problems in rendering heavy Flash content, thus marring overall web usage experience. You can use Flash alternative technologies in tablet based websites like HTML5 to ensure your site remains accessible to majority of tablet users.

Tablet hardware limitations- While there is no denying that tablets are becoming more powerful and can be used for multitasking, the technology is still at nascent stage. Besides, there are lots of tablet models that are made with entry level hardware and single core CPU. Therefore, refrain from using media elements like video and animation in tablet centric sites as far as possible. Using bandwidth intensive elements in a site may increase load time for entry level tablet users.

Larger, easily visible buttons- Tablet users do not use mouse to click links and buttons in web pages, they use their fingers! While some tablets do come with stylus input devices, majority of tablet users prefer fingers for browsing websites and navigating within sites. Hence, web developers need to use larger buttons in tablet centric sites that can be easily viewed and clicked. Tablet oriented sites should have simple and minimalistic navigation system that will enable users to find any content with a few clicks or finger swipes.

Testing for multi platform compatibility

Like computers, present generation tablets runs on various operating systems. While tablet market is still dominated by iPad, number of Android based device users are on rise.  In near future, Windows 8 based tablets are expected to flood the market. Needless to say, these tablet OSes are different, sport different architecture and browsers! Therefore, web design professionals need to test their websites meant for tablet users several times before publishing them. They should test these websites in various major tablet browser environments to identify and rule out any compatibility issues.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Effective tips to make your business website click with target audience

Until a few years back, majority of web users were skeptical and unsure about befits of online shopping. Aspects like lack of information, fear of safety compromise, uncertainty prevented a lot of them from buying things and services online. However, the scenario has undergone a massive change. Nowadays, millions of web users prefer buying online and everyday a lot more are discovering numerous benefits of buying things online. That is why businesses have become aware about consolidating their online presence. Just making good looking website is not adequate, you need to make your website viewer friendly and useful for prospective buyers to survive in steep competition.

Below listed are some useful tips that will benefit your business website. By using these methods you can expect a growth in number of site visitors which will translate to enhanced revenues.

Use colors and graphics wisely: No matter what kind of products and services you sell online, it is important that you use images, textures and colors in website with care. Your choice of color will also depend to an extent on mindset of your target buyers. For instance, a site selling products for children and teens may have bright backgrounds hues and eye catching graphics. However, a company selling products for corporate professionals should have neutral color and toned down design. You need to careful about using text color as well and text should stand out well against background color.

Simplified product navigation: No matter what framework or app has been used for making your business website; simple navigation is a vital aspect to ensure its success. No web users would like to go through a number of sub menus and clicks to find a particular product they want. It is also important to offer links to home page in every single page of your business website. It is prudent for your site to have larger buttons and links that are easily visible to enable hassle free navigation.

Search Box: Providing search box is also required in e commerce websites. Viewers may search for myriad of things and often they want instant solution rather than searching through entire catalogue. The search box in your website should be located at a spot where it can be easily located. Majority of business websites usually have search box placed at right top corner of web pages.

Adequate product description and quality images: When you want buyers to purchase from your website, it is imperative that your site has quality images and adequate descriptions for every product. It can be a little difficult at times to use images that are not large sized yet look decent. Web users often check out various websites for buying products. If your products are not accompanies by proper descriptions they may feel skeptical. If you offer products made by other manufacturers it would be a good idea to get description written afresh rather than copying verbatim from company websites.

Using clever and unobtrusive promotion: To lure new buyers into making purchasing and retain existing buyers it is important to use advertisements and show promotional offers in business websites. However, an overabundance of advertisement or promotions can also be harmful. First time buyers may not appreciate overload of banner ads and promo offers flashing by side of page. It would be sensible to provide promo offers to your existing buyers from time to time after assessing their buying habits. You can also make recommendations to them. However, the viewers should not feel at any time that they are being driven to buy anything.

Think of mobile web users: In last few years, millions of people have started using web access through tablet and mobile devices. Chances are there that they will like to make online purchase using these devices too! Therefore, it would be prudent for you make tablet and smart phone optimized version of your regular business websites to enhance prospects.

User friendly and safe Shopping cart solution: A number of web users stop short of making online purchase owing to shopping cart solutions that make them feel uneasy and intimidated. A user friendly shaping cart should have step by step guide with pictorial description of each stage. It should also have options for buying from the website without going through lengthy registration procedure.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)

Top usability tips for success in mobile web design

In last few years, accessing web has become much easier for users and this is partly owing to development of new technologies and emergence of web enabled mobile devices. In last couple of years tablets and smart phones have emerged as preferred web access devices for a majority of internet users. Present generation touch screen tablets and smart phones offer near computer like web browsing experience. With 4G LTE mobile networks spreading in many countries accessing web at blazing speed with these devices is a reality now. That is why web designers are focusing on developing websites for mobile device users.

However, designing website for mobile devices require implementation of different strategies compared to mainstream or PC based web design. Most of mobile web users rely on tactile feedbacks and navigation to browse web as opposed to PC users who use input devices like keyboard and mouse. While designing websites for tablets and phones, a web designer needs to focus on usability along with other aspects like aesthetics and technology implementation. Below listed are some helpful usability tips design professionals can implement while making mobile centric websites.

Understanding user needs: It is important that as a designer you understand user requirements while making a mobile centric website. Mobile web users can access the web for various reasons. It could be for checking email, chatting, and buying products and even for interacting with social networking site buddies. Depending on type of website, you need to design it in such way that user’s attention is drawn to contents.

Making sites mobile enabled properly: When you make websites for mobile users, try to keep things simple and minimal. Remember that fact that tablets and phones have smaller screens with varying resolutions. You need to ensure that the sites you design get rendered seamlessly across major tablet and smart phone models. Nowadays, there are web design apps that let you design sites that can be displayed on mobile platforms without any disparity.

Implementing less is more theory: Mobile users see websites on smaller screens and depending on the devices they use, resolution can be as low as 320×240 pixels. Therefore, it would be a good idea to avoid making your web pages cluttered with too many elements. Mobile centric sites should not be equipped with unnecessary animations, pop up and banner ads. They eat up precious screen real estate and creates problem in web usage for users. You also need to be careful about using proper colors and images. Refrain from using high resolution image and videos in mobile sites as these will cause delay in site loading. Despite improvement in mobile network speeds, users still have to deal with bandwidth hassles and heavy web pages can be annoying for them. Entry level mobiles with basic hardware and limited amounts of RAM will struggle to render media heavy websites as well.

Using easy navigation and visible buttons: In mobile centric websites, designers need to make navigation a hassle free affair. Major links to other pages should be visible at any page of a site. Buttons should be big enough otherwise users with large finger and thumbnails will end up hitting other buttons when they intend to click another. You can also use touch sensitive buttons that change color to facilitate straightforward navigation in these websites.

Refrain from using elements with poor compatibility: In a website that will be targeted at mobile users, it is recommended that designers avoid using elements and technologies that are not compatible across mobile OS platforms. One such instance is Adobe Flash. While major android OS based devices support Flash, there are mobile users who face hassles in using Flash based websites. For similar reasons, you need to test your website for cross browser compatibility before publishing. There are plenty of mobile browsers but you can try your sites on Opera Mini as it is supported by a huge number of mobile devices nowadays.

Using the right apps: There are various applications you can use for designing websites and nowadays it is also possible to use specific apps meant for mobile web design. In fact, designers can use tablets to design websites using tablet specific applications. It will help them in making mobile specific sites.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)