Iain's IT Solutions Ltd.
Responsive and mobile websites
26-Jan-2014I've recently been learning about and building mobile and responsive websites. So far I've built two sites with mobile versions:
and one responsive site.
www.angelamcneillinteriors.co.uk
There are pros and cons with each.
Mobile websites.
This is where there are 2 designs and as each web page is loaded, either the mobile or full site is shown, depending on the type of device you're using. The way I do this, there's just 1 copy of each page, so just 1 url to each page and some programming logic to decide which version to show.
There's 2 sets of html and css to maintain.
A big advantage is the person viewing the site can switch between mobile and desktop versions.
Both mobile and desktop use the same content, so in the examples above, they're a 2 column layout, so I've simply put the left column below the right in the mobile version. As each page is designed separately, I can do this for some or all pages - the contact page for example may be designed differently on the mobile version - or we may choose to not show images from a column on the mobile version.
My sites are specifically designed with mobile in mind from the beginning, so both desktop and mobile can be optimally designed around the content and to work with my content management system.
If there's going to be a mobile version, the design of the desktop site doesn't take any longer than normal. There is of course some time spent designing the mobile version, but this is a simplified version of the desktop version - so it doesn't take too long.
Responsive design
Responsive design is slightly different. There is just one version of each page, so again one url for each page but there's only one version of the HTML. There's logic in the CSS which says - if the screen size is above or below a certain width, apply different styling.
With mobile, you get 2 layouts of each page. With responsive, it can be much more granular - for example, shifting content if the screen size is desktop, iPad size, iPad mini size and iPhone size.
To see if a site is responsive, resize your web browser - making it narrow and wide and see if the content moves around (my own site here is neither mobile nor responsive! haven't got to that yet..).
I struggle a bit getting the desktop version of a responsive design to look nice. I'm always having to think where elements will go when the screen size is changed.
For web applications however - with lots of business logic, where functionality and quick adding of new pages is important and where the design can be simplified and compromised slightly, a responsive design is great - because while I'm adding pages, I don't want to have to spend time thinking about design and layout, I want to be focusing on the business logic and function of the page.
It takes a fair amount of time to design the responsive layout in the first place, making sure elements move and appear/disappear nicely.
Conclusion
I believe Google are in favour of responsive design, but I think this is instead of a redirect to a different domain (www.mobile.iainsitsolutions.co.uk for example) - but this isn't my method. As far as I'm aware, from an SEO point of view, my sites which have a desktop and mobile version are crawled by Google in exactly the same way as if they were desktop only.
For a web application, where design is secondary to functionality, I think responsive is best. For a website where design important, I think mobile is best - especially as you can switch between mobile and full.