I jumped on the whole Responsive Design bandwagon thinking it was the right answer to format and layout. After multiple projects, I can say it is and it isn’t.
"Not everything is a nail so not all installations should be completed with a hammer." unknown
I’ve just completed a review of my web projects for the past 12 months. They include blog designs, some pro bono projects, a marketing site, and several mobile web applications. This was all as background research to writing a chapter on Responsive Web Design for an upcoming guide I have been asked to contribute.
Web Applications and Web Content are different
Obviously applications and content are different but making a determination as to which you have is not always black or white. Here are a few questions to ask:
- does your web project have "navigation" vs "controls" ?
- does content change dynamically ?
- is it bad if content scrolls out of view ?
- does important information fall "below the fold" (aka requires scrolling to view) ?
Web content benefits from responsive design – both for mobile devices and desktop browsers. Web applications do too, but need to address both horizontal and vertical layout. It is why web applications on mobile devices have UI elements such as fixed headers, stationary tool bars, slide shelves, and scrolling regions rather than scrolling pages. (Imagine for a moment if your word processor menu scrolled away.)
A customer designing a monitoring station with alerts, a map, and updating information does not want any of that to scroll away, just because they are looking at only one portion of the information. Lower priority information is collapsed rather than completely out of view. High priority information is always visible. And controls don’t move around – global controls stay in one place and context centric controls stay with the associated content (e.g. map controls and filters stay with the map and if the map is moved or collapsed, the controls follow).
It’s not always an obvious choice – content or application. Facebook’s web team initially said it was content while its mobile team said it was an application. Eventually the web team agreed. Two examples prove this. First, the status bar at the top use to scroll away, not is is fixed at the top for both web and mobile app users. A second example is how comments are handled for photos. The old method would allow the image to scroll away if there were lots of comments, not the image stays and the list of comments scrolls along the side of the image, maintaining context.
There are some relatively easy solutions. The first is to prioritize content. High priority content gets fixed locations and it never gets lost off screen. Status bars, notification badges, and contextual icons make good use of limited space at the top of the screen. Similarly, the sides and bottom can also receive fixed bars and controls. Regions of the screen can be frozen for content that should never be out of view. Sliding tool shelves & filter bars and window shades can bring UI elements and information into view and then collapse out of the way to preserve screen real estate.
There is a growing desire to build web applications. There are several benefits – they work on various operating systems without change; they can be faster to develop and faster to update – all users se changes without installing new software; there is the expectation they will work from desktop to mobile; and there is a growing population of developers with web skills.
In conclusion, there is no silver bullet for all web design. Web content sites have a different set of design criteria from web applications. Responsive design is only part of the solution and is equally applicable to both camps. My suggestions:
- Identify your project first. It is not easy to shift from a content paradigm to an application.
- Implement a responsive layout – for both content sites and web applications – to support both desktop and mobile devices.
One topic not addressed here is the concept of widget layout frameworks. I’m just not ready to add that to this mix and for most projects, it is unnecessary complexity.