No designer can ignore the call of the mobile. Mobile is the wave of the future and there is a tremendous surge in website designs that cater exclusively to the mobile. But separate mobile websites cannot stand firm against the onslaught of dozens of new mobile devices. Designers need to create designs that display attractively on PCs, laptops, smartphones, tablets, phabelts, web-enabled TVs, netbooks and several other niche devices.
Responsive web design is the only sane alternative when you need to design for such a bewildering array of screen sizes.
While all are not convinced that responsive web design is the future, the responsive way of design has gained a vast support among web designers all over the world. But many of us end up using responsive designing simply to solve the problem of different screen layouts – this clears the way for mediocre designs that offer a low-quality experience to the users. I’ve made a lot of mistakes while working my way through my first few responsive web design projects. Here are three of the mistakes that I have made and seen many other responsive web designers make.
Strike 1: Building a Website that Takes too Long to Load
One of the few disadvantages of building a responsive website is that you will be forced to compress lots of resources on a single page. You need to have all these resources as they provide the information about how your website will render on different devices. Most responsive websites need to load all the resources before the user can view the page. Needless to say, this process takes a lot of time.
For most people accessing your website using laptops or PCs, this won’t present much of a problem. But if your website takes more than 5-7 seconds to load on smartphones, you will lose most of your mobile traffic. Smartphone users do not like to wait for even a single second – a small wait can have disastrous consequences. So, how to get around this problem? Follow best practices, cut the flab and use advanced techniques like conditional loading.
Strike 2: Removing Content for Smaller Screens
The idea of offering lesser content to smartphone users has been around for a long time, and it has many staunch supporters. But by deliberately providing a low-quality experience to mobile users, you are putting the profitability of your website on stake. The conventional wisdom falls flat in the face of the fact that users actively switch between devices to accomplish tasks. This means that if users cannot find a particular portion of your website on their smartphones, you lose a sales opportunity.
A better alternative is present all the information in a compact and easily navigable format. This will take a lot of effort while designing, but it is all worth it. And keep in mind the fact that even if you hide certain information using CSS, it still gets downloaded – so you don’t lose anything by offering a complete web experience to the mobile users.
Strike 3: Disregarding Cross-contextual Conventions
Responsive web design is not just about designing for PCs and smartphones – there are dozens of other devices that you need to consider while creating the design. How people interact with tablets, Internet TVs and smartphones has to be taken into account. This is not to say that you try to recreate a native UI experience for all the devices – it would, perhaps, be simpler to create separates websites. However, you can create a responsive navigation that takes into account the device context and create designs that the user can easily make sense of.
Summing Up
Responsive web design is still in its infancy, but there are several guidelines and best practices that you can adhere to while creating a design that is supposed to work well across devices. For designers who wish to provide top-notch web experience to customers using different devices, it is imperative to put a lot of thought and effort into the design.