…or build one.
First off, I don’t mean to sound patronising. I’m not teaching people to suck eggs here, well I hope not but I do think it’s important to share wisdom, pass on that bit of advice you were once given. It’s giving back.
Responsive web design is still new to many, it’s still relatively new to all of us but for some, there seems to be a gap in knowledge and understanding.
I’ve seen it a lot and to be honest, at first, I found it bizarre that people didn’t get it but the more I’ve gone on, listening to people and working with them, there seems to be perhaps not enough out there explaining how it works and how to get the right results. Maybe there is, it doesn’t detract from a section of the web industry (for want of a better term) not really getting it and that includes a few front-end developers.
The first common mistake I’ve come across is layout and designing for desktop first. Whilst it’s not bad, it’s a lot easier to go forward than back which is why designing for mobile for me makes more sense.
But it goes deeper than just designing for a mobile, you have to consider so much more.
One thing I like to do is break down a website in the form of post it notes and stick them on the wall. How you break it down is up to you. So for example, one post it note might be header, one might be menu, breadcrumb and so on. What is important though is you understand where the content sits in order of importance. From that, it will help you define what happens going forward as the site moves to tablet and then desktop.
As a front-end developer, whenever I look at a design, I envisage boxes and how things will can be rearranged via CSS. In my head, I can see that once you reach a standard tablet size, the site could go two column but then I might see that later on, I might want to do something different. This means that I might have to wrap some markup in an extra div to achieve what I want. I’m always thinking ahead and often will draw out layouts as it grows.
This is something that I believe designers and backend devs need to improve on, the building blocks of any website.
Now I’m not saying, go out there and become a front-ender, I’m suggesting maybe learn a bit of markup so you can experiment with your designs. Learn how to layout and understand what happens at breakpoints. It gives you a much clearer idea on why sometimes, we say, you simply cannot have that layout with that there so low down on mobile.
Failing that, speak to your developers. It could be a quick 5 min chat that ends up saving hours of reworking.
When I worked at McCann, myself and Chris, the head of UX developed a nice system for us with post-it notes and sticky tape. The tape was used to highlight containing divs around the content (post-its). It was so crude yet was so useful to us demonstrating how things flowed.
The other way to demonstrate is prototyping. I’ve done a few simple layouts, very little detail, that showed what happened. It’s quick and is a true reflection on what happens.
Responsive web design is not as simple as providing 3 designs. It’s easy to do and it looks great but there is so much more to consider. Just understanding layout across different breakpoints will help a lot and it will make your front-ender very happy.