Advertisement
Design Theory

Responsive Web Design

by

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

Related Posts
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Computer Skills
    App Training
    Evernote for Beginners: The Basics of the Most Popular Notebook AppEvernote logo
    Evernote's an amazingly powerful notebook app. But it can also be rather overwhelming at first. Here's everything you need to get started with Evernote and get your info saved into notes, organized with notebooks and tags. You'll even learn how to clip anything you find online into your notebook, and search like a pro.Read More…
  • Business
    Marketing
    Design Your Website to Attract More LeadsAttract leads
    So you’ve taken the plunge and have gone into business for yourself. Way to go! Now the real fun begins. Your primary objective in the early days and beyond is to grow your client-base. The only way to do that is to develop and nurture a steady stream of leads. That is, people who could potentially become paying clients.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…
  • Web Design
    Design Theory
    All About Trends in Web DesignDsfd trends retina
    As long as the web has been around there have been certain design trends which have popped up from time to time. Some of these trends have stuck around and, over time, some have disappeared. Think back to the time of Geocities, to the time of ‘Web 2.0’ designs and closer to home, with the “flat design” trend that’s popular now. Now, in 2013, the web industry is changing as rapidly as ever. New techniques, or ways of working, pop up every month, if not every week.Read More…