Are you a creative thinker with a flair for eye-catching layout? That’s a great start for a website designer, but there’s a lot more to it than that.
The best websites work really well on any screen size. They work correctly on a smartphone without a lot of scrolling or resizing, and on a desktop they bring a product to life with high quality images and branding.
There are also plenty of gotchas; design ideas that seem perfect, but which are not build-able in practice. To design a responsive website, you need to work closely with the developer; in fact, it will help if you can think like a developer.
Planning for responsive websites
Begin the design process by chatting with the development team lead. The team will have to turn your design into a working website so it’s essential to agree how you will collaborate. Plan how and when you will walk through your design with them; this is a key stage that will tease out build-ability issues
Understand what level of design is going to work best. Some teams need a full set of detailed breakpoint templates and a detailed style guide. Others may be used to a more agile workflow with close collaboration.
Cross-site working makes collaboration especially difficult, so try to build on what has worked in the past – perhaps a daily VC with screen sharing.
Agree how you will feed back comments. This is critical; you can burn a lot of time sending emails or raising tickets. Equally, some developers will hate having a designer looking over their shoulder or taking over the keyboard.
Prototyping for responsive websites
Long before you start to lay down designs, think how you will prototype. You will get significant benefits from observing end-users interacting with a functional prototype. If this is not possible, you will need to work harder (than usual) at understanding how they will use the website, their level of skill and their typical devices.
Designing responsive websites
You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size. Being responsive means the end user shouldn’t have to do a lot of scrolling or resizing the page. With this in mind, choose a set of breakpoint templates representing the range.
Breakpoint templates will allow you make the best use of screen space on a desktop browser, but with an immersive viewing experience on a smartphone. It’s useful here to think in terms of percentages of the display size, rather than in absolute numbers of pixels.
Design for all scenarios, end users will interact with the website in ways that feel right to them, not necessarily following your optimum workflow.
Some of the content will be outside your control. The site may need to present an image or product branding provided later by the client. Ensure that this content is presented well by testing with both best and worst case.
Thinking like a developer
Working closely with developers will tease out issues early in the design process and help you to understand what’s possible. The more you collaborate, the better the website, and over time you really will begin to think like a developer.
