How do you browse the Internet?
Do you use a desktop browser, or a netbook, maybe a smartphone, what about an iPad, or possibly via your TV? The web is more accessible than it has ever been via a wider range of devices than you might imagine. This is great, but at the same time how does that impact on what your website looks like to those viewing it?
Most websites are designed to a fixed width to ensure that it looks perfect and works well in a standard desktop browser (used by traditionally by far the largest audience). If done well then it will look good on most modern monitors, which are set to a resolution at least 1024 pixels wide. However, how does it look on an iPad 2, which might be 1024 pixels wide in landscape mode, but is only 768 pixels wide in portrait mode, or more importantly with the growth of the smartphone market, a mobile browser (e.g. on the iPhone) which is maybe 320 pixels wide… do your visitors have to zoom in and out and scroll around the page for the content they want?
It’s always worth checking your analytics (or statistics) to get an idea of what devices visitors are currently using to browse your site. My guess is that you’ll see a growing trend of usage of smaller screen sizes. For those of you who have been involved with websites over the last 15 years you may feel it’s a little like the old days when your website had to be less than 640 pixels wide to work on low resolution monitors. These days though it’s not the restriction of the technology that’s causing the issue, it’s the growth of new technology with smaller, more portable screens.
As a business you need to pro-actively think about all of your audience, including those using mobile (or non-desktop) devices who are viewing your website, to ensure they are able to effectively view the message you are trying to communicate to them. One approach is to focus just on mobile users and offer a mobile version of your website (ideally with the content adjusted and focused for mobile users). Another, cheaper and easier way, is to use Responsive Web Design.
Websites encompassing Responsive Web Design (a term coined in 2010 but now trending) adapt the layout of the page to the device (or more aptly the available screen size) that it is available. This means that mobile users on phones or tablets are presented with (more-or-less) the same content as desktop users but it is laid out differently so that it can all be read without having to zoom or re-size the page in their device.
If you’re on desktop browser, then to best understand what I mean you can re-size your browser window (width) now and see how this page re-organises the content. I think you’ll agree that it still looks pretty good and is much easier to read on the narrowest width (equivalent to being on a mobile phone) than if you had to zoom in-and-out all the time.
The technique in question utilises CSS Media Queries which, as the name suggests, allows you to query the media being used (e.g. looking at the available screen size) and then adjust the CSS used based on the result. And being client side CSS it means that these adjusts to the layout happen in real-time.
This website implements the technique via querying for 3 different screen sizes: 954px or wider (the standard website width), under 954px (with the result transitioning well for tablets), and under 640px (with the result working all the way down to mobile browser widths). I also hide certain content elements as the page narrows to ensure the page looks good on the smaller screen sizes, and I think this consideration is really important when considering Responsive Web Design usage for your website.
Generally I think Media Queries are a great solution, and we’ll see them increasingly being used in 2012 (including by me ) however, they aren’t the end of the road. Technically there are a number of other options that can be considered when looking at delivering websites to mobile device users to further optimise their experience.
If you think you’d benefit from having your a responsive website then get in touch today to discuss the options.