Responsive Web Design for new comers
You may or may not have heard of “Responsive Web Design” depending on how close you are to the web community. Essentially what it means is the ability of your website to “respond” to different environments. Traditionally, fixed-width websites were very popular in the years leading up to 2010. Even as mobile devices started hitting the market, it was fashionable to create a mobile version of the website usually prefixed by “m” (e.g. m.bbc.co.uk). These mobile sites were often cut down versions of the main sites and people would often click the “Take me to the desktop site” link. This was called “Adaptive” web design.
Given the current traffic to a normal website and the variety of screen sizes that will view that site it is now pretty much impossible to design an adaptive website without spending a lot of time and effort, especially for busy small/medium business owners.
Top browser screen sizes Source: http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm
This particular problem spawned Responsive Web Design (RWD). RWD is essentially treating the canvas of the website as a series of fluid containers through which the content can reside. Using percentages instead of fixed pixel width allowing things to grow and shrink and reposition itself based on a container.
Consider the following example of a website viewed on a large monitor:
The above example shows a header with a logo (green) and a horizontal menu (blue) with 5 menu items, a full size image (orange) and 4 feature boxes (yellow). The final box (grey) is a paragraph of text. The first thing you notice is that even on a large monitor all of the content fills the screen to the edges. RWD is not just about making content available to smaller screens but also maximising the width of larger screens. The other thing you might notice is text in the grey bar has been compressed into the centre of the screen to create an easier to read paragraph so the user’s eyes to do not have to traverse across a 24 inch screen when moving to the next line!
The same website as viewed on a tablet:
What’s happened now is that the logo (green) has shrunk and the menu has collapsed into a “hamburger” mobile menu that when tapped, expands vertically to show all the navigation items. The main image (orange) has shrunk proportionally to fit the screen and the feature boxes (yellow) have collapsed into two rows as there is not enough space. Incidentally the text box (grey) seems to have grown! This is because we do not wish to shrink our text too small otherwise the readers will have trouble reading it, therefore the text areas almost seem bigger on smaller devices.
Finally on a mobile phone:
Now the website has completely collapsed into a vertical stream of content so the reader can swipe up and down with one finger/thumb and not have to worry about zooming or scrolling horizontally which often takes longer and might even mean missing some content.
In a nutshell that is the concept of RWD and if you haven’t already got a responsive website for your business then you might want to consider it soon as Google now favours responsive sites when it decides which rank your site should be in comparison with others. If you don’t know if your site is responsive you can use Google’s own tool to check: https://www.google.com/webmasters/tools/mobile-friendly/ ...simply enter your homepage URL (and maybe just to be sure try a few other pages) and it will tell you if you pass or fail “mobile-friendly”. Hopefully you get a green tick and you are on your way to climb up the rankings
