The Simple Difference Between Mobile And Responsive Web Design

To continue from my last blog this should be ‘Responsive Web Design Part 2 but is titled differently as I would like to talk about the two different approaches to mobile design and why responsive design could be an advantage instead of having a separate mobile site.

In advance I want to apologise for the length of this blog but I want to cover some ground before moving onto some of the details of these approaches later on.

I have previously written about how important it is to have a web site that is mobile friendly.

With more and more users accessing the web with a smartphone/mobile device/tablet it is important that your web site is made mobile friendly

We have to realise that there will not be less of these devices in the future and surfing with the mobile and tablets only will increase. This is simply not something that will not disappear but will be more and more of, so it is very important that your web site is made mobile friendly.

First we have the traditional mobile design, and then we have the new responsive design.

Mobile Design

For the first approach you first make your normal PC web site and then a separate (external) mobile site and optionally also a third site for tablets. So you will end up with having three separate sites in the end.

For responsive web sites you only create one web site and make this so it will adapt to the screen it is displayed on.

For this blog post I would like to talk about the main differences between these two approaches

Still, these days, not all have a big widescreen and when viewing a normal site you may find that some of the information is hidden on the right and you would have to scroll horizontally to see it. Think of if you had paid for an advert that was hidden in this region, would you like that it was not shown on smaller screens?

And with a netbook, that does not automatically show the mobile site you will have to scroll sideway to see the right part of the web site due to its smaller screen.

With a mobile version you get a good view of the web site as it is optimised for this smaller screen and device.

It will of course be somewhat different but the content will be the same. But if you view this with a tablet you will often only see an enlarged version of the mobile site and sometimes the normal web site would be better suited than this.

This is one of the drawbacks with a mobile version, that it does not display that well on a tablet.

Often it is easier for a web design company to sell an independent mobile web site than to redesign the whole site from the start. The advantage with doing this is that you have full control of the design of each site and how it will display on each device, especially if you want it to have a different layout on each.

Google is one that is using this approach. Their mobile search page also has location based abilities, but this is something that I will come back to in another post. But they only have a mobile version, as yet, and if you view this in a tablet you will see an enlarged mobile page with space for more functionality than what you have on your mobile screen.

This is of course one of the challenges of mobile design that it is not adapted to tablets/iPads etc.

Responsive Web Design

Next we have the ‘new’ type of design we call Responsive Design and to take example from the previous, Google also have Responsive pages. If you go to Google’s Contact Us page http://www.google.com/intl/en/contact/ you will get to a responsive page.  The way to check this is if you place the cursor on the right hand side of the browser window, as you do to resize it, and make it slowly narrower.

You will first see that the columns gradually goes narrower, which we probably have seen before, but when it reaches a threshold it will shift the display and move the right sidebar to the bottom of the page. And if you make it even narrower the display will shift again and we end up with only one fluid column. And if you move the cursor back to make it wider the display will revert back to its original view. This is what we call Responsive Web Design.

And the ‘point of shift’ e.g. the specified width of the browser window is defined by the web designer. At which point the shift should occur is often determined by the standard width of the smartphones/tablet’s display whether it is in portrait or landscape orientation. The most important issue is that these shifts adapts to most tablets and smartphones.

Most of these changes are controlled by CSS and CSS3 as nearly all smartphones and tablets these days support CSS3. For PC browsers you will find that most of the latest versions of browsers support this as well but IE. Only IE9 supports this (finally) but since we will concentrate on mobile devices this is not something I will cover here.

Another issue is with menus and sub menus that drop down when you ‘mouse-over’ a menu item. This is not something that is possible on a mobile device so you have to find a way to display this without stealing any real-estate from the screen. This is done by restyling the menu to a drop down selection box where you display all, or the relevant menu items that you need to have for your mobile version. This makes it much easier to navigate the menu on a mobile device then if you should squash everything in as a traditional menu.

This is all for this time, I will be back with more detailed description on how to make a mobile web site later.

I hope to explain all of this as I want to take you on the journey as I go through the redesign of my own site from a normal and separate mobile version to a fully responsive design.