According to eMarketer, there are approximately 115.8 million smartphone users. By 2016, there will be 192 million users! Without a doubt, a smartphone is no longer the stuff of science fiction movies and books; these are everyday devices that most of us use on a daily basis.
One pet peeve of this highly advanced device is the fact the mobile versions of websites are considerably less advanced, and frankly, difficult to browse at all. Whether the mobile site is so simplified that it barely offers any information or it requires you to keep zooming in, it’s safe to say that it’s a pain.
The solution to this problem: responsive websites. Responsive web design ensures a single site is optimized for all devices, from desktop to tablet to mobile. Designers use CSS3 media queries to style and present the content in the best way for the particular device you are viewing the site on. The website then fluidly responds to the screen width of the device to give you the best presentation and layout of content.
How does it do it? Universal styles for the site come first in the stylesheet and then as the stylesheet progresses down, specific styles for each view are bucketed within media queries. The queries typically comprise a min and max screen width to tell the browser how to render the site for that particular range.
Advantages:
One site!
No more updating the desktop site and the mobile site when there are content or style changes
Google recommends this as a best practice.
- Serves all devices the same set of URLS – easier for users to share and link to regardless of what device they are on
- Google can crawl and index the site better
- Better on SEO
No more pinch and zoom
- All content on the site is optimized for the device you are on – meaning that you will be able to read the text that is on the site
- Content fits nicely within the screen of your phone or tablet since the CSS media queries present it that way
Same user experience, regardless of what device you’re using
In the world of segregation (desktop site and mobile site), there was usually a good amount of content that was left out from the mobile site since it was believed that users only wanted the bare bones information.
- You needed to go to “View Full Site” button to see everything, and you had to pinch and zoom your way around the site – not quite the easiest way of doing things.
- With responsive, you are viewing the full site, it has just been styled in a better way to make easier to see everything.
No more sniffers!!
- Don’t need to rely on scripts to “sniff” out what device the user is on to serve up the correct site (desktop or mobile)
- With new devices being added constantly, the script might be older and not include that device, so the correct site wouldn’t be served up
- New devices for responsive means that whatever that device’s screen width is, they will see a site optimized for them!
Disadvantages:
Your site will look AWFUL in Internet Explorer
- Internet Explorer 8 and below don’t understand CSS3 media queries, so if you don’t have your base universal styles outside of media queries, your site won’t look too pretty.
- Fortunately, there are scripts like Modernizr that provide patches for IE to better render and understand media queries.
More thought and planning needs to go into building a responsive site
- Need to plan and account for your different breakpoints: desktop, tablet, mobile, and design the best view for each for the site
- Need to rely heavily on CSS3 rather than images (for gradients, rounded edges, shadows, etc) – again IE doesn’t play nice with these so unless you use patch scripts, IE won’t render these design aspects
- Need to consider the order you lay out each aspect of content. Even though the site may look different depending on the device you use (example, maybe three content blocks are side by side for desktop, but then are stacked one under each other on mobile) there is still an order to the presentation. If those blocks are 1, 2, and 3, you wouldn’t be able to change their order to 2, 1, 3 on mobile
No View Full Site link
- This isn’t necessarily a huge disadvantage, but some users are used to that option.
Load time
- Mobile users will be downloading unnecessary HTML/CSS code (not a huge deal) and most of the time, images are simply scaled down, NOT resized — which could increase load time.
Like most things, the good comes with the bad. However, with responsive websites, the good definitely outweighs the bad. As long as you’re willing to put the time into your website, your site looks great on any device, and without question, a responsive site is much more user friendly.
