At the last Public-i user group meeting I mentioned, as part of the discussion around future releases, that we were re-thinking our approach to the design and delivery of our clients’ Connect sites; that we would be adopting a responsive design to our user interface (UI). This blog post is by way of a brief explanation of responsive design and our motivations for adopting it.
The problem
It can’t have escaped anyone’s notice that there continues to be a shift in the way that people access the web. More and more people are using tablet devices or mobile phones as their main point of access to their online world, be it via custom-built apps or ‘the mobile web’.
Here at Public-i we’ve been considering the impact of this shift and how our products measure up to the change. Not surprisingly we knew we had to accommodate the fact that end-users would require access to our clients’ Connect sites via mobile devices and so we went off and started working on a mobile version of our UI. At the time, this seemed to be a natural and logical approach to the problem – after all, Connect is built on the Model-View-Controller (MVC) software design pattern, so simply creating parallel views for desktop and mobile viewers appeared to be the right way to go about it.
However, in retrospect, this approach has not actually solved the problem long-term; as the mobile market grows, more devices are appearing and with varying display sizes. Add to that the fact that viewers are increasingly getting online through other household equipment, like their TVs and games consoles and the ‘problem domain’ becomes a rapidly increasing set of devices that we should be continually testing out products on.
The solution
We needed to re-think the solution and, like many others before us, decided that the only sensible way to solve the problem was through a single UI that adapts itself based on the display size of the device upon which it is being rendered.
And that, in a nutshell (a very simplified nutshell) is what responsive design is all about.
On a practical level, I consider there to be three ‘layers’ that make up responsive design:-
- A flexible layout. No more fixed width sites (or columns); the width of the site and it’s content should flex in proportion to the display width. This removes the need to ever scroll horizontally. Images, too should expand and contract in size as the page’s dimensions are altered.
- Design adaptation at breakpoints. A content rich site will start to look pretty silly if it simply continues to shrink as the display width decreases. In order to overcome this, the UI and User Experience (UX) designers determine specific breakpoints in the design where the layout of the page changes. Amongst other things, this may mean: reducing the number of columns, reducing the number of menu entries, or changing header and footer layouts.
- Device capability adaptions. If the page is being displayed on a mobile device (as opposed to simply a really small desktop window), it may make sense to alter, for instance, button sizes or spacing in order to reduce potential mis-touches. (Although it could be argued that all displays could use the touch-screen-friendly spacing without detriment to the desktop user’s experience.) Other considerations in UI need to be addressed, too – for instance, users prefer to swipe left of right on a mobile touch device rather than clicking on tabs (as one would on a pointer-based desktop interface).
Back to us
So we made the decision to move to a responsive design and we’re working on it right now. There is a lot more that could be said about responsive design and I would encourage you to take a look at the resources listed at the end of this article for more information.
I don’t see this as the end of the story, though, in terms of making the users’ experience better. In particular, I want us to further enhance the mobile / touch interface, and consider what impact adapting a ‘mobile first’ approach to UI and UX design would have on our products.
Further reading
- If you haven’t already, take a look at The Boston Globe website. it’s a responsively designed site with columns, header and menu all adapting as the browser window size is altered. It’s a great example of how this technique can be implemented.
- If you’re interested in the technicalities, then Ethan Marcotte’s articles on the ‘A List Apart’ site are really good. I would recommend starting with “Responsive Web Design”, which refers to a couple of other excellent (technical) articles – “Fluid Grids” and “Fluid Images”.
- That last reference, above, is a sample chapter from Ethan’s book “Responsive Web Design”, which is an excellent reference work.
- “Mobile First“, by Luke Wroblewski provides practical advice and persuasive reasons why the Mobile First strategy should be on product developers’ radars.
- I have a Delicious stack in which I collate articles and reference material regarding responsive design.
- Wikipedia is a good starting point for information around the Model-View-Controller design pattern and Design Patterns in general.