Have you ever experienced the inconvenience of trying to view a website on your mobile phone only to encounter missing content or bad formatting? Or how about the frustration of clicking on a link in your boss’ email only to find that you are unable to view the page because of the site’s display resolution? The trouble with some websites is their designs fail to take into account the differences between viewing them on a desktop and viewing them on a mobile device.
With the prevalence of mobile devices that allow users to easily access the Internet, it is imperative that your approach to web design address the necessity of being able to push content through these varying device sizes. It isn’t too difficult to understand that a design meant to be accessed on a 50” TV browser will not show up the same way on a 5-inch cell phone. Imagine trying to cram the same information that is viewable on a TV on a screen more than 20x smaller!
Traditionally, the approach has always been to just create multiple sites—one designed for a desktop experience (or the big screen) and another for a mobile site. But even with this approach, it is difficult to accommodate all the possible sizes of mobile devices that are available. Users who visit your website can easily use their large 10-inch tablets or their tiny 3-4 inch smart phones and still expect the same content to be available on both devices. One way of dealing with the obstacle of having to create multiple sites with the same content is designing your site based on a Responsive Web Design (RWD).
(Source: http://www.onbile.com/info/responsive-web-design-advantages/)
The real estate adage of “Location, Location, Location” holds true in RWD. As a Web Designer or Content Manager, it is important to consider which parts of your site you want your consumer’s peripheral vision to capture, and whether or not some parts of the page can be sacrificed if the consumer happens to be viewing the site on a smaller screen.
In a Responsive Web Design, there are three layouts that you can consider:
1. Basic Fluid Layout
This layout adjusts the content by consistently ‘wrapping’ the area depending on the increase or decrease of screen size that is available. The presentation is consistent throughout the experience without any difference in the displayed content. An example is available here.
2. Adaptive Layout
This layout predefines each area of your site with breakpoints that adjust to the screen size of the device, be it a desktop, tablet, or cell phone. These predefined sizes are triggered depending on the screen size available; they are turned on or off to fit the screen properly. Here is an example.
3. Responsive Layout
This is a combination of the aforementioned layouts, which is more dynamic and responsive to changes in screen size. Here is a good example from the BBC. This is the most widely used layout in RWD sites because it easily adapts to the consumer’s screen size.
Note: When you are viewing the examples, play around with the size of your browser and see how the content and features adjust accordingly.
There are many advantages to creating a Responsive Web Design (a sample can be found at http://chinwag.com/blogs/angus-phillipson/7-business-advantages-responsive-web-design). Whether you agree with this approach or not, it cannot be denied that some creative thinking must be made to adequately address the issue of multiple platforms and varying devices. This is an opportunity to improve your SEO by using a single site and not breaking up your site’s traffic into multiple groups (tablet, desktop, mobile, TV, etc.). And although at the moment RWD may not seem like the perfect fit for your site’s needs, it can’t hurt to know about its benefits. After all, many companies choose to use RWD for their websites for a reason.
I’m a Project Manager with Navantis but I also freelance as a web designer and content developer with over 10 years of experience. I’m an avid gamer with a love for creativity and innovation. I enjoy blogging about new technology, business process design, Project Management, Corporate Social Responsibilities, and other various things related to IT.
(647) 258-9031
info@navantis.com
