Being Creators of Responsive Web Design (read Designers and Developers) you must be knowing that a lot more goes into it, than just the media queries. If one thinks creating such designs is all about making a snazzy layout, it’s not really so. The fact of the matter is one needs to deliver to a wide variety of audience having a growing number of devices. Here’s discussing some of the trappings one must beware of, while treading the Responsive Web Design path.
Trapping 1: Content that’s Hidden
Responsive websites have a single code, hence they certainly have a higher possibility to get consistency in content. And that’s good news! But there are several responsive websites that conceal or get rid of the content for small display screens, so as to cater to their limited sizes.
Now, you can’t blame the users for the devices they have. You see they log on to a particular site with specific targets, and taking off content would hinder their experience.Therefore, it becomes completely indispensable that as designers/developers we must do anything and everything in our reach so that visitors are able to make use of the functionality and see the content. Besides, one must also bear in mind that the content concealed with CSS is also downloaded while accessing the site. And that’s bad news for getting a good performance.
Trapping 2: Swelling up the Content
Well, let’s say taking up our aforesaid advice, you don’t curb your content for the small screen and plan to give viewers the best possible time. If you think that should be okay, think again; as now you have a whole lot of content and that takes time to load. According to the researches, you’d lose 75% of your audience right after five seconds (for a pdf file), if the content doesn’t load.
The harsher reality as per the statistical data is that just 3% of the Responsive websites (for small displays) are lighter in comparison to their desktop (big screen) counterparts. So, the user doesn’t really have a say in this. The download is huge. For instance if the data is anywhere between 3 to 4 mb, most connections including the WiFi or even a 3G won’t be able to take it.
It’s a tightrope between giving them the best experience while making a site as light as possible. So, assumptions such as a good Internet connection (for small screens) must not be made. Go for the best practices, like conditional loading to keep the size of the web page under control.
Trapping 3: Bear the context in mind
Take the mobile phone the way it is. It has its own strengths, weaknesses, which are quite different from other devices. You must use it to your best advantage. This is not to say that you should build the native platform of each User Interface inside the browser only, but you have to be concerned about how people hold their phones. Signs of a good RWD are that it must be able to touch a chord with the user and shouldn’t lose the context of the device.
You see by nature, RWD is a design not built for a mobile, so it’s our task to bring out elements that take care for the context. Which implies that we must give a good surfing ride to people and that they don’t have to bear the brunt of the huge data download. Besides, they must readily find what they are looking for.
As developers/designers this demands a high level of commitment and a lot of consideration.
Trapping 4: One Size that binds them all
A cell phone is more than just a small screen and along with it comes prototypes, newer cases and a lot many opportunities. We have to bear in mind that mobile devices can trace out the user location, it can make calls and do much more. In the times to come browsers present on all these equipments would get more and more device Application Programming Interfaces, which would certainly extend the possibilities on the Web. However, the current scenario is quite restrictive.
Trapping 5: Dimensions of the Devices
They start at 320 pixels and goes up till 1024 pixels. None of us can predict what size would be the browser screen of the visitor. And neither do we have a say in the dimensions manufacturers build. For all they care, any size that can be marketed is good.
So, let’s not get concerned over it.
The page height has been the eye of the storm due to bookmarks bar, Ask Jeeves toolbar and Google chrome. However now, mobile browsing has transformed itself altogether, that is independent of the browser. One can access links through Twitter, Facebook or some other applications.
Quite surely the hierarchy of the content holds importance, so you can’t afford to have grudges against the pixel height. You have to live with it.
Breakpoints are important, start with a small screen then broaden your approach. Another important thing is that one should let the content only decide its breakpoints.
We know it’s just the start of accommodating responsive web designs. And no doubt it’s a very tricky area and lots of inconsistencies exists but it shouldn’t deter our resolve, in fact our determination should become even more steely.