At the start of the month, a couple of us from 383 headed down to ‘Responsive Day Out’, a conference in Brighton discussing workflow strategies, techniques and experiences with responsive web design.
Having a background primarily in offline design I’m reasonably new to the world of web design, so a few of the talks went slightly over my head. From a newcomer’s perspective, here are the areas I found most helpful from the conference, and what I’ll be bearing in mind when I inevitably face these very apparent responsive design challenges.
For me, the most relevant and interesting talk was regarding ‘Responsive Navigation’, given by David Bushell, concentrating on how the menu can affect a user’s experience, depending on the device they are viewing the site on.
The way people are accessing online content is changing dramatically, an example used to show where this has been taken into consideration using responsive design but perhaps hasn’t been executed so well, was the site for thenextweb.com. Aesthetically, it’s a nice site but it doesn’t scale down well, making navigation slightly confusing. At each break point the menu changes, displaying different content, ultimately hindering the users experience. The key words of advice from David, were to keep it simple and don’t hide the content.
The best approach to responsive navigation, seems to be designing with affordance in mind. Don’t try and be too clever. Techniques such as hide and reveal, overlaying the content with the menu, going off canvas and letting the navigation slide the content off screen, were just a few suggestions to how the problem can be tackled. Other suggestions which might solve this issue but I feel are slightly less innovative, were approaches such as removing the menu completely, taking the user to an entirely new page with the menu at full focus when clicking on the logo for instance. I think visually this may be more pleasing but it’s also adding another step to the user journey each time they want to navigate to a certain area. Jumping to a large footer could also be an option but again this I think, has its drawbacks. Although it doesn’t limit the amount of space, as it’s at the end of the page, it is taking the user away from the main content and they may not expect it to.
Another talk I found relevant to me as a designer, was by Laura Kalbag with her views on ‘Design Systems’. I did find some of the content went without saying, such as keeping designs across devices consistent with colours, fonts and shape and form. That said, she did provide a lot of useful advice that I’ll definitely be using in the future.
We need to remember that mock ups are only snapshots of how designs might look at a particular size and creating a false interpretation of the deliverables will just lead to us constraining ourselves.
A constant theme throughout the day, seemed to be the importance of designers having at least a basic knowledge of the development side of designing for web. “Design in the browser if you can.” Laura Kalbag. Elliot Jay Stocks later added, “If you’re a web designer, you should know how to code.” The main reason being that we need to be slightly more flexible when demonstrating to the client what they’re going to end up with. Showing them a perfect PSD could prove dangerous as they may expect the outcome to be exactly that.
I think at this stage, being reasonably new to designing for web while the industry is in its current state of uncertainty, puts me in quite a good position. Jumping in while the changes are already being conformed to means I don’t have much in the way of previous web design practices to compare it to. Unlike the experts, I haven’t had to make the transition from designing for desktop for years to suddenly becoming device agnostic, which is what I think the main issue seems to be.
“We made everything comfortable, we need to start feeling comfortable with feeling uncomfortable.” Mark Boulton.
The closing message of the day was to ‘share’, and thanks to conferences such as this, I can now take their issues, solutions and techniques and use them to assist me when embarking on responsive web design.