In part 1 of our posts on responsive web design, Dan looks into what responsive design actually is, and why it has arisen.
Part 1 – What the heck is Responsive Web Design?
This two part post is going to take a look at ‘responsive’ Web Design, what it is, where it’s come from, what it means, and how it affects your business.
Today’s post will introduce you to the fundamentals of what responsive design is, why it has arisen, and what it’s trying to achieve, as well as looking at some great examples.
The second part of these posts will be looking into more detail at how responsive design affects your business (do you really need a responsive site?!) and also, how it should be affecting the way you approach your website development.
Note – These posts are primarily aimed at introducing businesses to the basic concepts of responsive web design, why it may be important for their business to embrace it, and the marketing & financial implications of such design. For those of you looking to actually learn how to build responsive websites, I would recommend picking up a copy of ‘Responsive Web Design’ by Ethan Marcotte. It’s a great, straightforward book that will introduce you to all the development basics you need.
So, without further ado….
What is This ‘Responsive’ Design You Speak Of?
To understand responsive design, we must first look at how our habits for browsing the internet (and the devices we use for these habits) have changed over the last decade or so:
Now when I’m talking about ‘traditional’ methods of browsing the internet, I’m referring to the ‘good old days’ that older users may remember. The days of 56k modems, when the internet was only accessible from a home computer on a low resolution monitor and browsing on-the-go meant finding your nearest library or internet café.
Over the last decade though, things have certainly changed.
Technological advancements have led to a whole new range of ways in which we can browse the internet – old desktop browsing has been replaced by newer HD screens, tablets, smartphones, and laptops.
However, whilst all these shiny new devices that let you check your emails or surf the web anytime, anywhere sound great from a consumer point of view, this advancement in technology has also led to an increase in the diversity of the users browser experience, depending what they are viewing the website on:
1. Viewport Diversity Different devices have varying screen sizes and resolutions. An HD desktop monitor may have a screen resolution of over 1900x1080 pixels, whereas an i-Pad only has a resolution of 1024x768. When we start to take smartphones into account, we get even smaller resolutions (and what’s more, these all tend to differ slightly across different models and brands!).
2. User Interface Diversity Different browsing devices now use varying user interfaces. For example, a common occurrence on websites for several years now has been the ability to have dropdown menus that open when you “hover” the mouse over them. However, on a tablet or smartphone which uses touchscreen technology, there is no “hover” option, so the drop down won’t work.
3. Device Specs Diversity A desktop computer obviously has much more processing power and memory than you will find on an i-Phone, or even a tablet. These differences in processing speeds can affect browsing speeds, especially when loading large pages or media rich content.
4. Connectivity Diversity Although most home internet connections in the UK, Europe and US now use relatively fast broadband connections, tablets, laptops, and smartphones may well rely on slightly slower connections such as WiFi. This means that pages with lots of content or code in them may end up loading very slowly on portable devices.
Diversity and Your Business
Your website is a marketing tool, and a powerful one at that! Through practices such as SEO (Search Engine Optimisation) and CRO (Conversation Rate Optimisation) we can tailor our websites to offer potential customers the best user experience and increase the percentage of successful conversions.
However, with all these diversities affecting the way in which users views and engage with our websites, how can we be sure that our ‘carefully tailored website’ is really going to perform its job marketing wise?
Responsive Design to The Rescue!
In a nutshell, ‘responsive design’ entails designing, developing, and optimising websites in a way that allows them to adapt to the diversities we explored above.
It encompasses several factors such as coding ‘fluid layouts’ which change depending on the resolution of each screen, using ‘media queries’ to identify what size of screen a user is viewing the site on, and making the relevant changes to the pages appearance, and designing websites from a ‘content first’ perspective.
Responsive design means that your site visitors will enjoy an experience tailored to them, no matter what device they are using to view your site.
Show Me!
Enough chat I hear you say? lets actually see some of this responsive design!
What I will do to end todays post is to show you a couple of examples of good responsive design, where websites are adapting to different sized screens.
Note – I’ve included some screenshots of the examples I’m about to show you, however you may want to get a better look at how these sites work in a ‘live’ environment. Although you can get a rough idea of how a website is adapting by simply resizing your browser window, I’ve recently been using the Responsinator Tool, which is a fantastic tool that allows you to view your website across many device platforms. Simply enter the web address into the box in the top left and press go, and the Responsinator will show you how the site displays on a variety of devices. (I’ve included links for both the examples below)
Dconstruct 2011
The website for the Deconstruct Conference uses a great, clean layout on the desktop view, utilising lots of images for links to the different speakers. However if we look at the tablet and mobile views, we can see that these images first break down into two columns rather than three on the tablet site, and then on the mobile site are placed under the text content. We can also see that on the mobile view, the navigation at the top is displayed as buttons rather than just text, making them bigger and easier to use for touchscreen users.
Smashing Magazine
Smashing Magazine is a publisher and online resource for everything web development related. So it’s no surprise that they have wonderfully executed responsive design throughout their website. Depending on what size screen the site is being viewed on, the navigation layout changes, some sections (such as the advertisements) are no longer shown on smaller screen sizes, and the various content columns automatically resize to best suit the viewing device.
Next Week:
So there you go. Hopefully this post has introduced you to responsive design, and helped show you the importance of its function.
In my next post, we are going to look deeper into how responsive design affects your business; How does it change how a site is built? How much is it going to cost? What can I do from my end to help? And probably most importantly, do I actually need a responsive site?