Recently, I’ve been catching up with the band wagon and getting to grips with responsive design layouts. As a user interface designer, it brings a whole new level of control to the UI which is rather marvellous.
It’s really not hard to get to grips with and I found Web Designer Wall’s post Responsive Design in 3 Steps covered all I needed to know to get cracking.
Testing your responsive design layouts
I use Chris Pederick’s Web Developer Toolbar and it has a resize window option that I’ve used often for testing different screen sizes. So, I figured I’d add ones for mobile devices. Chris is way ahead of me, because under the Resize menu he’s added View Responsive Layouts which does all the hard work for you – genius!
Looking at one of my design services pages - User experience (UX), Prototyping & Wireframing – I can see how it renders in different device sizes and orientations on one screen – very useful. Thanks to Chris. Now I just need to make it render well across those devices!
Progressively enhanced UI
Although this website was originally designed (about 4 years ago) with traditional desktops in mind, it has not been very difficult to apply mobile-first thinking by focussing on progressive enhancement techniques – fancier devices get served fancier stuff. There is much more I could do here to serve fewer files to mobile devices, I am just applying the visual principles.
Mobile portrait (320×480)
Small header that scrolls with the content
Images in the main content area are not floated
Mobile landscape (480×320)
as above +
Images in content area are floated to allow text to run round them
Small tablet portrait (600×800)
as above +
Using fancy fonts in the header
Header becomes a fixed position so content scrolls underneath
Increased margin size
Small tablet landscape (800×600)
as above +
Show full height header
Increase the size of the main site title
Show full drop down navigation in header
Tablet portrait (768×1024)
Sidebar elements are shown in the footer
Tablet landscape (1024×768)
as above +
Sidebar elements flow down the right hand side of the main content
I was lucky enough to visit this exhibition while in New York a couple of weeks ago. I took a few stills and videos of interactive works that particularly caught my eye. Most of this is documented on the Design and the Elastic Mind website, but here are a couple of extra views…
Below is a talk given by the MOMA design curator Paola Antonelli, who gives an overview of the main themes of the exhibition and a closer look at some of the works it encompasses.
If you are thinking about commissioning work on your existing or new website, you’re going to want to write a brief to give to your developer/designer at some point so they know what you want. Here are some topics to get you thinking in the right direction and help you do just that.
What do you need a website for?
It may sound like a daft question, but it is at the top of the list for good reason. Even if you have an existing website, ask yourself the same question again. What do you need it to do for you? What are your short and long-term business goals? Do you need to raise awareness of your product? Increase sales by widening your audience? Get your brand message across to a new audience? Once you’ve really know what it needs to do, we can start to think about how we can achieve it… This question will help us define what the key design and functionality needs to be.