Responsive web design and small screen optimisation
The way people are using and accessing websites is changing. This is due to users having more diverse browsing experiences on a multitude of devices, including desktop browsers, smartphones, tablets and more. This creates challenges for web producers regarding how we should design for different screen sizes, resolutions and types of interaction (e.g. touch). More than that, it calls into question what it really means to design for the web today.
With new devices available, the one-size-fits-all approach to web design that we’ve stuck with for so long is no longer relevant. It’s now essential that the designs that we create are responsive to the different ways that users access our content. This document is intended to outline a process called ‘responsive web design and enhancement’ that can be used to optimise your website’s content and adapt to different screen sizes and devices. Download the document here:
Responsive web design and small screen optimisation
Not be be confused with the well known Trophy Fish Illustrator, Patrick is Ultraviolet's self confessed 'most beautiful blonde'. He is like K-dog, another snow lover. He was a figure of respect and authority amongst the Bournemouth Uni Snowriders - mainly through the power he weilded over their web presence as their web designer/developer. Now a post-graduate (achieving a bloody first) he uses his super-natural mastery of web standards, trends and compliance to amaze and bemuse the rest of the team. Follow him on Twitter
Nice paper Pat.
How come you decided not to remove any content from the mobile version of the site? Could the site not be responsive to its environment and needs as well its screen size. This could have taken into account the type of information people want to access on a mobile, stripping out other content to reduce load times and bandwidth on as users may be relient on 3G networks and on the move.
I have recently been using WURFL – http://wurfl.sourceforge.net/ in order to determine what device the user is accessing the site from and then reducing the content. Maybe not fully removing content like taking full paragraphs out but instead if it is a mobile device then reducing the length and just supplying them with the basic information.
I could be seen to be making too many assumptions as to what content the user requires, which I can never really know.
Would be interested to hear your views on being ‘truly’ responsive to a mobiles capabilities.
Glynn
Thanks for reading and putting some thought towards this Glynn.
You raised some interesting points, the most important of which is to do with assuming the bandwidth and context within which the user is browsing from their mobile device. Why just because the user is on a mobile device do we have to assume that they are on a slow 28kb net connection, I could be at work on a 100mb cable connection and thus shouldn’t be restricted certain content just because of the device I am surfing on. Unfortunately until we have API’s in the browsers that expose a users connection speed we have to make these decisions our self; and most of time (especially here at UVd) I don’t believe we should be restricting content.
Though, as always it depends on the project, the project in our example above is very text heavy and doesn’t have a lot of secondary multi-media and images that could clog up the bandwidth. Therefore, we have no need to reduce the content delivered to mobile devices as the footprint is already low. There is also a major caveat that people forget that even though you have declared display:none; inside your media query, the browser still requests it’s background images. The only way around would be to have separate stylesheets per media break (which in turn causes more server requests).
Having said that, we are making a few small tweaks on the site such as reducing the logo size and removing the large png crest background within the smaller 480px below media block.
Jeremy Keith has written some interesting articles recently regarding the mobile web and assuming context one of which can be found here. It seems to be a big debate within our industry at the moment which I have tried to avoid.
With regards to WURFL, we too have started to use it and find it an amazing database and resource for understanding more about devices capabilities. What we really need is a Modernizr esk libary/api that uses WURFL to quickly feature detect devices within the browser. Something I know Bryan Rieger from Yiibu was trying.
Which ever way we look at it, it’s a very interesting time to be in the industry, and as always i’ll be happy to discuss further over a pint.
Thanks for the reply Pat, It is a very good point you raise. We are living in an ever expanding mobile world, as I for one often browse on my phone or a small screen whilst relaxing in the living room.
We will carry this debate on over our next pint as its an area which really has me hooked at the moment.
Thanks for the post Pat. Always great to gain more web development information.
UVd | Blog | Google to Start Penalising Websites That are not Mobile Friendly? 9. December 2011 at 01:06
[...] at their site on your mobile devise as they have gone for a separate mobile site as opposed to a responsive solution and you can tell by the user experience and performance: it’s a nice example of an effective [...]