DO and DO NOT tips for Responsive Website Designing

Here in this article we will discuss about DO and DO NOT tips for responsive website designing

The importance of platform friendly website cannot be overstated nowadays especially when you have to open the same website on a desktop as well as mobiles or smart-phones. So to overcome the problem of platform dependency, business owners or web designers have come up with an idea of responsive web design where website will act according to the need. Responsive web design provides complete experience to users on different platforms – from desktop computers to smart-phones to tablets simultaneously. Creating a website with responsive web design makes sense because a single website for different platforms can save you a lot of money.

But while doing this responsive website design, there are some things that you might need to notice first:

Don’t Design it for Desktop – Create Multi Screen Design

This is the decision that you have to take on the planning level that what are you going to do? Now basically if you need to design a website for desktop use alone, just go for it. But if you need a website i.e. platform independent, then don’t just start with a normal desktop design because it might lead you to a lot of trouble because after you make a desktop design, it because difficult to makes changes again and it increases the chances of errors as well as mistakes. One of the common mistakes people make nowadays is design a website for desktops first because they think it will be easy to turn it into a responsive design for other devices.

It might seem troublemaker or time consuming or difficult to create websites for mobile devices first. This is because it can force you to get confused or to make sacrifices between choices on what content to include and to think in a way you are not used to. However the content and design on the whole will be a lot better. As a rule of thumb you can start with smaller devices first. Once you have the right design for mobile, it can be easily adapted for bigger screens.

 

Problems with Navigation Menus – Horizontal to Vertical List Menu

When designing your website for mobile, the problems with navigation design can become the ache of your existence and have to be avoided. Responsive web designs are not fix width designs because they are platform independent. And thus their menus need to be customized as they require them and so your smart-phone navigation may differ from your tablet navigation and still differ from the desktop navigation.

 

Many designers find themselves overwhelmed by task of trying to create a navigation menu that works across all screens. In many cases designers struggle to convert horizontal list menus to vertical list menus, especially to fit smaller mobile screens. However, since the navigation menu is not designed according to the screen, it can create a poor user experience.

 

Don’t Hide the Content

Responsive website designs usually have less space for pictures and content but it doesn’t mean you should neglect the content. You will need to re-arrange it in a way that it can be read easily. This task can be easily done with the help of navigation links which can be created using anchors that can lead users to the content they have been looking for on the page. Those who hide content using CSS need to realize that downloading of the content can still be done. Hence you have nothing to lose by giving users a complete viewing experience. Don’t be judgemental; don’t punish the users for their platform choice.

 

Don’t Create Separate Mobile URLs For Website

You don’t need a separate URL for your mobile version because that can be a complete disaster. And that further neglects the whole purpose of a responsive design in the first place. Users end up wasting their precious time while redirecting from a desktop version to a mobile version or vice-versa. Plus it can seriously decline your search engine rankings too. But, no doubt, there are some benefits to having different URLs. It ensures that you can construct mobile sites with lighter pages that perform better on smart devices. The site will be more catered for viewing on specific platforms as well. Unfortunately, the negatives of having separate mobile URLs are quite more than the positives.

 

Save Yourself from Creating a Poor Mobile User Experience

Whenever you simply think about compressing the complete content that is meant for desktop and convert it into a mobile version; just don’t do that. Because that will affect the viewing experience for your users, who will be put off. It is important that you create a suitable and customized user interface to work within the constraints and limitations of space of mobiles. You can use strategies or planning such as using dropdown menus in place of navigation bars that are used in desktop versions as this will save you space. If you design for mobile first, this usually isn’t an issue.

 

Don’t Disregard Cross-contextual Conventions

When you are working on responsive design, you can’t just think of desktops and mobile devices because there are many other devices that also need to be included in the list. People may be surfing and visiting your website from Internet-enabled smart TV’s or set top boxes that contain a browser. Even tablets come in a wide array of forms and features nowadays. But that doesn’t mean you have to create a native user interface for all devices – you would be better off creating different websites. What you can do is create responsive navigation that keeps the context of the device in mind and creates a design that’s easily understandable to users.

 

Don’t Ignore Page Load Times

With the advancement in the high speed internet usage, web developers have gotten used to include relatively large resources on their web pages. This is the point where they need to focus more because this scenario can work with only desktop platform as the configuration is quite high to handle the problem. However, when dealing with mobile, our users may often be on slow and limited 2G and 3G connections. Also there are some international users who often have to pay based on the amount of bandwidth they use.

The point is, due to high configuration, the page may load very fast on desktops but it could potentially take a long time on mobile devices or use excessive and pricey, bandwidth. And especially on mobiles or smart-phones, if the page takes too much time to get loaded, the users will often leave the page and thus you will lose your mobile traffic.

 

Not developing for Touch screen devices

Most handheld devices today use a touch screen. Even many laptops are now coming touch-enabled. Hence it’s important that when you are creating a responsive design that you don’t overlook the importance of handling touch. There are two aspects to this: the first is that clickable items, such as buttons, take into account the size of a user’s finger (don’t make the user have to zoom to click); the second is that you properly handle touch events (doing so can also overcome the 300ms delay for click events that still exists on some devices).

 

Conclusion

These are few simple mistakes that often happen because of oversight. If you manage to steer clear of them you will ensure that your responsive design works well across all types of devices and makes its mark.

 

View more article on

Dynamic website designing

Responsive website designing price