Responsive web design is becoming a high priority. It’s not right for all designs but it’s also becoming a default on the Web.
In this week’s UX Power Up, Frank makes the case for responsive design.
Transcript of video above…
Responsive Design
Frank Spillers, founder of Experience Dynamics – and it’s time for this week’s UX Power Up.
Today we’re going to examine the topic of Responsive Design. Now, responsive design is one of these things that was a buzz a couple of years ago and it’s part of the excitement of html5, but it’s my opinion that responsive design is no longer an option. We have to support responsive design right out of the gate, and the reason is because the incidence of mobile browsing has increased tremendously and so we have so many different devices that our designs need to fit to – whether it’s tablets or mobile phones or back to large desktops – and the problem is, how do you serve a consistent experience?
So, responsive design is an approach, and it’s a coding approach, but it also has an impact with the user experience. I wanted to just take this moment to share with you some of the things we’ve been exploring as we redesign the Experience Dynamics website that you’re looking at now, and some of the things we ran into as we tried to responsify it.
So, responsive design is – I’ve got an example of a desktop version on the left here. I’ve got some content, I’ve got some navigation buttons at the top, and then some tiles over here. Responsive would be me looking at it on a mobile device. This block is over here now, with the images sized accordingly, I’m also potentially going to hide video, but I’m going to be careful that I don’t just hide it and cause it over downloading, which is a huge issue with responsive design – you can’t just say ‘don’t show the video’, you need to make sure that it’s not being loaded in the background, for example.
This block is moved here, those blocks have moved there and that sidebar is down below – so the whole thing fluidly swipes easily and nicely on a mobile environment. That’s basically the gist of responsive design, and what it gets you is a user experience that is device friendly, and you don’t have to maintain different versions. It also moves you away from the m “dot”, you know – the mobile “dot” whatever the site is, which is not a very elegant approach to designing for mobile. This is a departure from Jakob Nielsen, the guru of web usability, and his advice to have separate sites.
So there’s no reason why you can’t be responsive, and especially taking advantage of CSS3 – the cascading style sheet updates, which allow for responsive design, and having some of the benefits of using your CSS and HTML responsively.
So, what would you do with this top nav bar? One of the things that we did with Experience Dynamics is, to take that top nav bar and to put it into that collapsed state here, and when the user taps on that, it would open up the nav items that look like that (a vertical list). This is an approach that twitter is using, various other websites seem to be going towards this. So instead of trying to make the nav bar kind of stack up like the content blocks, you’re actually sticking it under this collapsible, kind of responsive menu.
So, in this topic we looked at responsive design, and responsive design is being able to respond to those different browser environments. We’ll take a closer look at some user experience issues in future UX Power Up’s, but for now – think responsive and design for responsive and it’ll save yourself a lot of hassle down the road.
Thanks a lot, and we’ll see you next time.
