Now is a very exciting time to be a web designer. Why? Because things are changing with the way in which we go about building websites. The change is called ‘Responsive Web Design’ and I’m fully embracing it!

Why the change?

The shift towards responsive web design has been brought about by the rapid growth in the mobile and tablet industry, and the fact that millions of people are now accessing the web on mobile devices. We can no longer assume that everyone is going to be viewing our websites on a desktop computer. In fact, by 2014 mobile internet usage could very well overtake desktop internet usage. This momentum in the growth of tablets and mobile phones accessing the internet means a change in the way in which us web designers design, build and generally approach our web design projects. Change is always hard to embrace, especially when you’re used to doing things a certain way. But it’s something I love about being in this industry, the fact that you can never get comfortable for too long and you’re quite often kept on your toes!

What exactly is Responsive Design?

In a nutshell responsive web designs are designs that adjust to the dimensions of the device you’re viewing them on, and perhaps more importantly, they deliver an optimised viewing experience specific to that device. responsive design devices I think the last part of the sentence above (in bold) really strikes a chord. The whole point of responsive design in my opinion is to deliver a better experience to users viewing your website on a device with a smaller screen.

Some history…

Responsive Design was first brought to the fore-front of the web design community by Ethan Marcotte and his aptly named book “Responsive Web Design”. The first time I read it I was a little daunted – I won’t lie. But after reading so much on the subject, and also the fact that the design community is so helpful and has released a number of different frameworks that we can use for kick-starting the development of our web projects, it’s relatively easy to get started building responsive websites. responsive design book

Here’s an example

Here’s a quick example of a responsive template I put together using the responsive framework Skeleton. Try resizing your browser window to simulate the viewport widths of a tablet and mobile phone (I.E. making your browser window smaller and smaller) and you’ll see how the layout responds. Basically it has a few ‘breakpoints’. These are points at which the design changes for viewing on the various devices mentioned above. three layouts

Media Queries

These ‘breakpoints’ are achieved via media queries. Media Queries are the back-bone of responsive design. They’ve actually been around for years, but have only really found their calling with the popularity of responsive web design. We can use media queries to tell the browser to use a modified set of CSS rules based on the browsers viewport (it’s dimensions). Here’s an example of how a media query might look: @media only screen and (min-width: 768px) and (max-width: 959px) { /* CSS declarations go here */ } The above media query is targeting the viewport of a tablet (possibly an iPad). As you can see the max-width is 959 pixels (one pixel less than the maximum width of our design for desktop – 960 pixels) and the min-width is 768 pixels, as anything below that is venturing into the mobile phone viewport size and there’s a seperate media query set up to handle the layout at those dimensions. Any CSS that we put within this media query above would be reflected in the browser when the viewport of the device you were viewing the website on was less than 960 pixels wide. Hence you can see that placing adjustments to the layout and structure of your site within these media queries can make it easy to optimise the layout of a website for different device sizes.

Flexible Images

When our responsively designed website is viewed on an iPhone versus a desktop computer, we need to adjust the image sizes accordingly We can do that easily by applying a max-width of 100% to them. If the image happens to be wider than it’s container, then max-width snaps the image back in line and forces it to be the same width as it’s container. img { max-width: 100%; } If you need support in IE6 and below then you’d need to include some conditional CSS only for IE6 and below: img { width: 100%; } It’s also worth noting that you can serve up totally different images using your media queries. Just bear in mind that these get loaded when the webpage loads along with other images, so there can be a performance factor involved. There are a number of techniques you can apply to work around this though. The most popular right now seems to be ‘adaptive images’. adaptive images Also now with higher density displays (the Retina display in the iPhone 4 and new iPad) considerations need to be made for showing higher res images for these devices only. I’ll try and write more on this in a separate blog post. As you can see, with responsive design comes a number of other things us designers need to consider and factor in to our work.

Fluid Grids & The Future

A truly fluid grid is a grid that doesn’t have fixed widths. E.g. the widths aren’t specified in pixels, but instead are specified in percentages, which allow the layout to increase in size if you viewed it on a very wide desktop monitor. Although Skeleton doesn’t have a truly ‘fluid’ grid, it is flexible and adjustments are made to the pixel based widths of the grid within the media queries to change the layout and make it responsive. It doesn’t however cater for responsive design where our design adapts to really wide resolution desktop monitors – i.e. the design expanding outwards to fill all of the available space. I think in the future us designers will have to take more consideration to how our designs look on really large monitors, as well as small handheld devices. Instead of setting a page container of 960-1,000 pixels, we’ll have to move up past the 1,200 pixelmark and maybe even use 100% of the width of the browser window (although I’m keeping my fingers crossed that doesn’t happen!) If you’d like more info on fluid grids, then check this great article out.

Awesome Responsive Navigation Technique

Amongst all of this, for devices with smaller screens, one of the main elements you need to adjust is your navigation. Sometimes its not enough to just stack your main nav items on top of each other. You need to keep in mind the ‘press-ability’ and space. You may have noticed that on the mobile version of my example, the navigation gets replaced by a ‘select’ dropdown form field. This is an increasingly popular technique as it’s so easy to use on a mobile device, as opposed to trying to press small text links with your fingers. It’s also a great space saver. responsive design navigation The ‘select’ form field is set up to be injected into the code using jQuery. Below you can see that I’m using ‘appendTo’ to place the form field inside the ‘responsive-nav’ div: responsive design jquery 1 From there we need to create the option in the form menu that says ‘Go to…’ by default. This helps from a usability point of view, as having the item automatically show the text ‘Home’ may be confusing for the user. Here’s the code to do that: responsive design jquery 2 Then we just need to populate that dropdown form field we’ve created with our navigation items. Doing it this way means that we only have one menu to maintain. E.g. if we add another main navigation item, it will automatically get shown in our dropdown. responsive design jquery 3 Here’s the full jQuery: responsive design jquery full Finally, we just need to look in our stylesheet for the @media only screen and (max-width: 767px) media query, and hide the main ‘.navigation’ unordered list that we want displaying only for our desktop version, and style our form field to make it more easily press-able on mobile – like so: responsive design css

The Future…

Responsive design is definitely here to stay and its pretty exciting to be getting involved in it relatively early on. I haven’t yet had an opportunity to mess around with layouts that grow much past the 960 pixel / 1000 pixel mark, but it’s on my to-do list! Below are some links to other resources which might help if you’re a designer looking to get started with responsive designs, or you just want to find out a bit more on the subject. I’d also love to hear your experiences getting to grips with ‘responsive’ in the comments below.

Resources

Subscribe to our newsletter!

Get the latest tips and advice through the Authentic Style newsletter

Please enable JavaScript in your browser to complete this form.

by subscribing you’ll receive periodic emails from us with helpful website tips.

Let’s create something
great together.

All great things start with a chat. Use the adjacent form or our project planner to get things started.

Project Planner

We’re currently accepting projects
Please enable JavaScript in your browser to complete this form.

Authentic Insights