Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Responsive Web Design

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called Design School for Developers.
Video in Web Design
Design School for Developers: It's a Wrap!

Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.

In short, responsive web design is the art of designing websites for a multitude of screen sizes and devices, so that there is an optimal experience for every user at every possible size.

Responsive web design is at its best when it's device agnostic; where you’re not aiming to design for particular resolutions or sizes, such as for iPhone or iPad sizes only. Instead you should be aiming to design with the content and design in mind and how this content flows and adapts to the various environments it might be seen or used in.


Designing for a Responsive Web

It used to be the case that to access the internet you’d have to try through a (usually very large) computer, with the familiar sounds of the modem sounding while you connected. Now though, you can access the internet through computers, laptops, mobile phones, smartphones, tablets, televisions, games consoles - the list feels almost endless.

Responsive Web Design, written by Ethan Marcotte and published by A Book Apart, is a brilliant introduction to the principles of Responsive Web Design.

Responsive Web Design, written by Ethan Marcotte and published by A Book Apart, is a brilliant introduction to the principles of Responsive Web Design.

Now, on one hand this is great news. More than ever before, we can be connected to the internet at any time or place that we might want to. Whilst this is taken for granted, for many it’s also necessary. And with necessity and access we’re also often presented with impatience and the need for things to work, and work quickly.

Due to responsive websites becoming much more mainstream, even the general public (so everybody outside of the web and creative industries) have almost come to expect it when they’re browsing the web. So, all in all, responsive web design is definitely a big thing.

The Challenges a Responsive Web Brings

Working with responsive design isn’t without its challenges. First of all, there are such a multitude of devices and screen sizes that we have to cater for. From extra-large to large screens, from small to mid (and everything in between) there’s a lot to think about. And, as I’m sure you already know being a developer, working with responsive design from the technical side of things can also turn nightmare-ish and be extremely difficult to handle.

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.

Like with any project, the main things you need to think about with responsive web design are the content of the website, how this content fits into the design and how the content flows from page to page. You need to look at how the different design elements you have work together and ensure that everything feels cohesive and consistent.

The difference with responsive web design is that you also need to think about how all of this works from one size to another, whether that is width or height based. You need to think carefully about how all of this translates to a smaller or larger screen and how all of your design elements, your content flow and everything else works. You need to keep the experience consistent, no matter the size of the website.


Working with Clients and Managing Expectations

We, as designers and developers in such a fast-paced industry, are pretty lucky. We get to work on some amazing projects and we’re usually always getting to work at the forefront of new and emerging technologies. Working with responsive web design is just one of those exciting things we get to do, but with that, comes a price.

The Greenbelt Festival is a great example of responsive web design. Screenshots provided courtesy of mediaqueri.es.

The Greenbelt Festival is a great example of responsive web design. Screenshots provided courtesy of mediaqueri.es.

Think back to the article about trends and think of the conclusion you may have drawn yourself about whether they’re good or bad. Think also about buzzwords; those words that you see flashed around on business or news websites about these new, exciting, emerging technologies. Now, some of the clients you get may be a little educated about the web and understand it. They may even work in the web themselves and need a little extra help. Some of your clients, however, may not be as well educated about the web and may see those buzzwords as an essential, no matter what. I’m going to briefly talk about those kind of clients in this section.

Establishing What a Client Wants

At the beginning of any design project you should be trying to establish exactly what it is that your client wants to get out of the project and what they expect the outcomes to be. Managing your client's expectations can be a difficult thing to do, but it’s important that you keep at it to ensure that your clients understand your process fully.

A beautiful example of responsive web design in action can be seen on the Modern Green Home website. Screenshot courtesy of mediaqueri.es.

A beautiful example of responsive web design in action can be seen on the Modern Green Home website. Screenshots provided courtesy of mediaqueri.es.

When it comes to responsive web design, and particularly if they’ve come to you with one of these buzzwords, you need to try and help to educate your clients. Quite often, these buzzwords have been heard in passing, or have been represented wrongly, and it’s up to you to make sure that your client has a proper understanding of the subject.

For example, sometimes you might even get potential clients coming to you saying that they wanted a website that worked on “iPhone and iPad”. In this instance, I would say “Well, that’s perfectly fine - but what would be great is that we can instead focus on creating you a perfectly responsive website that will work on any device and not just be restricted to those two.” That’s a great ice-breaker on the subject and it’s something that leaves it very open for you to explain further into the planning stages.

If your client understands responsive design properly, then I imagine they will be happier with the project.

The Stuff & Nonsense website is a great example of responsive web design, also introducing different illustrations at different screen sizes. Screenshots provided courtesy of mediaqueri.es.

The Stuff & Nonsense website is a great example of responsive web design, also introducing different illustrations at different screen sizes. Screenshots provided courtesy of mediaqueri.es.

If you take the time to properly educate the client, it can only work in your favour. For example, in my own work, I always try to ensure that my clients feel like I’m working with them, rather than simply for them. This helps to ease the process of working with your clients when designing for the responsive web.


Tips and Techniques for RWD

It’s all well and good me talking about why it’s important to educate clients and telling you stuff you might already know about responsive web design. Now for the nitty-gritty, where I get to tell you the best ways to design responsive websites.

The Great Discontent are well known for their interviews - and their website is a great example of magazine design on the web, as well as being a brilliant example of responsive web design. Screenshots provided courtesy of mediaqueri.es.

The Great Discontent are well known for their interviews, and their website is a great example of magazine design on the web, as well as being a brilliant example of responsive web design. Screenshots provided courtesy of mediaqueri.es.

And the answer? Well, unfortunately there isn’t really a correct one! I’m sorry if that isn’t what you were looking for, but as you will likely understand with your development and coding, everybody’s processes are different and nobody seems to work in the same way. This, in its own way, is great as it means we can always find new ways of working.

However, don’t worry, I’m going to give you some top tips for designing responsive websites that you should be able to put into action pretty easily. Feel free to pick and choose from all of these, as well as combining them where you think it might be appropiate. Also experiment! Try loads of different ways to design responsive websites and see what suits you best.

Mockups

Creating a mockup for a static-width site in Photoshop (or any other graphics software) used to be the way that most people designed websites, and for some, it still is. That’s absolutely fine! If you’re comfortable with using a graphics app to design how your website looks, then that’s fine.

The UX London 2013 website is a beautiful example of design that scales from small to large gracefully. Screenshots provided courtesy of mediaqueri.es.

The UX London 2013 website is a beautiful example of design that scales from small to large gracefully. Screenshots provided courtesy of mediaqueri.es.

But don’t go trying to design a mockup for every single resolution or width; you’d go crazy and be there for a very long time. Instead, think back to the wireframing article. Think about how we looked at the content flow for those wireframes and how we decided everything should slot together. Try and translate this to your designs and think about how those elements will flow and move when the screen size changes.

Some of these changes will be major, and for those then it may be suitable to create a small mockup to show this, but for any other changes, such as text adapting, then I’d stick to looking at these sorts of things in the browser once you start coding prototypes. If you prefer to design a mockup for every major stage of your design then by all means, go ahead, just be aware of the time this will add on to your project.

Designing in the Browser

Now, for a bit of controversy. You may have heard about the whole designing in the browser debate that’s been circling for the past few months, if not even longer than that.

The WWF website is a gorgeous example of web design that works brilliantly responsively as well. Screenshots provided courtesy of mediaqueri.es.

The WWF website is a gorgeous example of web design that works brilliantly responsively as well. Screenshots provided courtesy of mediaqueri.es.

Designing in the browser is when you go from a wireframe stage (if you’ve done that) straight into the browser to start the design stage, rather than working with any graphics software. If you use a lot of online tools to help you with creating different elements of your design structure (such as to create grids or refine your typography) then this can work really well.

However, many designers can feel like they struggle with designing in the browser, particularly if they are more a designer than a coder. The reason for this is because they feel it restricts their creativity a little more, making it harder for them to feel like they can come up with creative, unique and visually exciting ideas.

The Next Web manages to display content in a way that is easy to digest and follow, even down to small screens. Screenshots provided courtesy of mediaqueri.es.

The Next Web manages to display content in a way that is easy to digest and follow, even down to small screens. Screenshots provided courtesy of mediaqueri.es.

But as a developer, you’ll most likely be extremely comfortable using code and so it might be a good idea to play around with trying to design in the browser and see what results you come up with.

“Deciding” in the Browser

This is probably my personal favourite. Deciding in the browser means that you get to do a bit of work in graphics software and a bit in the browser. Personally, I think you can’t get a better result of how a design will work until it’s in the browser itself. Typography will always render differently in graphics apps than in the browser, and it’s much easier to create prototypes and iterate quickly through design stages when you are in the browser (though all that might be about to change with the introduction of applications such as Macaw).

The Microsoft website cleverly makes use of moving content and cropping images depending on the size of the viewport. Screenshots provided courtesy of mediaqueri.es.

The Microsoft website cleverly makes use of moving content and cropping images depending on the size of the viewport. Screenshots provided courtesy of mediaqueri.es.

Working with both a mixture of mockups and browser-based work means that you can give a lot of flexibility to your design and the decisions you have to make. The key to this term “deciding in the browser” though, is with the first word. Although many major creative decisions can be made in the graphics software, the browser is where your final choice can be made.

When I work in this way, I find that I often end up with a mixture of mockups, designed pattern libraries (in graphics software and in HTML & CSS) and full HTML & CSS prototypes. A mixture is great and it shows the evolution of the website from the beginning through to what is, hopefully, starting to become a full website.

Content-First, Mobile-First or Desktop-Down?

First up, if you haven’t already learned from my articles in the “Before You Start” section - always, always, always start working on your designs content-first. All this means is to make sure that you’re working with real content and the content that is intended to be used on the website you’re designing.

Philip House is a great example of how you can shift and move layouts when working with responsive web designs. Screenshots provided courtesy of mediaqueri.es.

Philip House is a great example of how you can shift and move layouts when working with responsive web designs. Screenshots provided courtesy of mediaqueri.es.

Secondly, whether you work mobile-first (starting with smaller layouts) or desktop-down (starting with full-width desktop layouts) is completely up to you. There are many debates about it online, but really this is your own decision to make. If you feel more creative going from a larger size down to a smaller, even if you build it in the opposite way, then that’s fine. As is doing the opposite, and going from small to big!


Tools to Help You Design Responsively

Let's wrap things up with some useful resources. There are so many tools out there that can help you when you’re designing responsive websites, take a look:

Grids

Typography

Style Guides & Pattern Libraries

Case Studies

Miscellaneous

Advertisement