Real World Responsive

Icons are great, look at this one:

 

All the complexity, headaches and misconceptions of cloud computing simplified into something simple and, well, iconic. To someone who doesn’t know computing this makes them say “Oh great the cloud does this part!”. To someone who actually has to engineer it this represents the part of the system no one has bothered to work out yet. A headache.

In the last couple of years web design has got its own one of these.

This stands for responsive web design. RWD. It’s often to be found on agency web sites (ours included) and it says

We understand that websites aren’t just desktop any more. We’re thinking about all the devices. We do responsive design. You are safe with us.

People love that, they look at it and see their iPhone, iPad and iMac, for that’s what these aesthetically pleasing web site receptacles obviously are, and they are happy.

Sometimes when trying to impress a potential client we will pull out a line that always lands:

We don’t even call it responsive web design any more. It’s just web design. This is how we build sites now.

Super smooth, right? But the web is not 3 Apple products, here are the top 20 screen shapes and  sizes.

That’s what a designer has to get their head around. That’s the real world. Worse still it’s the real world at a single point in time, it’s constantly changing. Just like the cloud icon our RWD icon hides the complexity that exists in creating responsive sites.

Designing for this requires a new approach to design and a new approach to working with clients.

Process & Tools

Web design as a discipline is relatively new and it always feels like it’s in a state of constant flux. The arrival of responsive design has caused a bigger impact than anything since web standards swept through the industry in the early to mid 2000s. For the people creating websites things have changed. Tools used to dictate our process but now they are trying to keep up with our new ways of working. Let’s look at the phases of a project we now go through when designing responsive websites.

Research-led / Content first

Without going into these subjects in detail here, if you aren’t starting your process by working out what your site needs to say and who it needs to say it to then you are in trouble. Responsive sites mean that design is now never complete. Design decisions are made at every stage of the project and often by people of different disciplines. User experience methods like research and content strategy have become vital because you need clearly defined goals and strategies to refer to when making these decisions.

Wireframing / Prototyping

The importance of wireframing is growing, as is the spectrum of tools and techniques. Once static wireframes were useful as a short step before full blown visual design took place but now we’re often talking about interactive wireframing and prototyping.

The complexity involved in user interaction with a website was already increasing and responsive design brought it up another level. We need a stage where we can experiment quickly, a stage where we can demonstrate and test ideas without investing too much time.

Pencil and paper are still often the go-to tools here but really interesting things are happening with the software available. There’s an arms race on as products like Macaw, Webflow, UXPin and others constantly try and give us what we need. Some are even adding remote user testing. They won’t rest until they are you one-stop shop for all your UX work. But can one tool keep up with the speed of change? And for a designer is it worth investing the time to become an expert in one of these?

Always remember what you are trying to achieve during this stage, you need a process for getting your ideas down quickly that has a low cost of change. Software can help but, until things settle down, accept that you may never know another piece of software inside out the way you know Photoshop. Choose the simplest tool appropriate; if you can, just pick up a pencil and paper.

Design

The traditional web design workflow is broken and we need to move on. The fact that this article has a wireframing section separate to a design section maybe shows that I’m not quite free of the old ways. Let’s think of this section as post user-experience design. You know, the fun bit.

The problem is communicating a design. Responsive sites have no fixed state so a designer cannot express their intentions as simply as they used to. A 1200px Photoshop home page visual no longer contains enough information.

This approach of designing by producing high quality mockups early on is no longer suitable. How a site should respond is either documented across multiple visuals or stored in a designer’s head. The former is inefficient communication and the latter is no communication at all.

Tools like Photoshop and Sketch still have a place but websites are moving, interactive, responsive things. With interaction so tightly ingrained in the web are the static images we produce in our design tools fit for purpose? Designing in the browser means that interaction and responsiveness can be designed at the same time as the visual elements around it.

Some are looking at a more modular option. Rather than designing an entire page at once, create individual elements and consider them across different screen sizes. Then look at elements in combination with each other and how they come together to form your pages. The brilliant Pattern Lab calls this an atomic design system and gives it the language of atoms, molecules and organisms.

When formalised these pattern libraries can be turned into style guides. These are a way to document how to apply your design so that the website in question can be expanded. Even if your project scope doesn’t allow you to create something as nice as this it’s still a good way of tackling responsive design.

So, lots to take in and decide upon. Was all that time learning keyboard shortcuts in Photoshop wasted? Do we now have to create style guides for everything? Is designing in the browser the answer or does it detract from the creativity of web design?

A balance needs to be struck. The place we are going to where designers are working close to the browser and thinking about their designs as systems is more appropriate for today’s challenges than the place we have come from.

Adding Clients to the Mix

The old ways were built for clients and sign off. Scope, signed off. Wireframes, signed off. Visuals, signed off. We developed a smooth way of working that complemented both our design process and the requirement for client approval. Now we are internally skipping between the phases to the point they aren’t phases any more. So, what do we show the client and when?

If we hide away our iterative process we run the risk of moving towards the sort of big reveal moment that we thought we’d lost when we stopped behaving like ad agencies. If we share every pencil sketch then we run the risk of being confusing. Is that wireframe the finished thing? What about these individual elements? As a client shall I just nod my head until I see something I recognise as a website?

Client bashing isn’t healthy (it can be funny, but definitely not healthy). This is our project and we need to own it. We were the ones who put the nice icon in front of them and said it would be easy, remember? However managing a client’s expectations whilst trying to design responsively is a challenge because every client is different and what you are showing them can be unfamiliar. The goal is to make sure that what’s put in front of the client will provoke a meaningful response.

We need to find new ways of working with clients otherwise process will start getting in the way of the great design we are trying to achieve. We could soften sign offs in the same way that the transition between design and development has softened. Less formal but more regular agreements that things are on track. This seems like the way forward, putting the effort into explaining subtleties to clients. To do it well we have to stop hiding it all behind an icon and start communicating.

Conclusion

Creating this article has left us feeling slightly neurotic. So much to think about. The communication possible on the web can be great but sometimes the volume and diversity of advice can leave us paralysed for fear of doing the wrong thing. Add to that the unease caused by the rate of change and it’s probably time to calm down and summarise a few good ideas to move forward with.

Be informed

Whatever happens, start with audiences, goals and content. You have more decisions to make than ever and you need these constraints to filter your options. Do some user experience work and create yourself a platform to design from.

Be flexible

Have a process but don’t make it rigid. Don’t be afraid to change when the situation needs you to adapt. Pick the tools that allow you to do this and try not to let your tools dictate your process. Be ready to change whenever it feels like you aren’t solving the problem any more.

Be collaborative

Work in teams: designers and developers side by side. Designers need to know how code works, developers need to know the project goals. Valuable information is lost when designs are “handed off” for development and this can be the difference between good and great.

This takes practice and effort must be put into communication.

Be open

Educate clients and let them in on the complexities involved. Lead the way and set expectations. Let them add value to the project by providing industry knowledge and meaningful feedback.

Be brave

Things are changing and no one has a perfect solution. The people seen as experts in this field are the people who tried to tackle the problem first. So embrace the fact that no one is certain and experiment.

Start trying new techniques, new processes and new ways of communicating. Where something isn’t working try and improve it. Ultimately, modern web design is an exercise in not standing still.