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.

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.

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.

Think back to <arel="external" href="https://design.tutsplus.com/articles/all-about-trends-in-web-design--webdesign-15149">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.

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 onany 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.

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.

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.

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 <arel="external" href="https://design.tutsplus.com/articles/tips-for-designing-in-the-browser--webdesign-10340">designing in the browser debate that’s been circling for the past few months, if not even longer than that.

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.

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<arel="external" href="https://macaw.co/">Macaw).

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.

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!