Although the practice of responsive web design is considered passé by some, I’m writing about it today because a couple experiences showed me that it should not be taken for granted. This is an approach to creating websites that takes into account the variety of devices that may display a site. A half-dozen years ago, when mobile devices of various sizes became popular, responsive design was a hot topic. It has now matured to the point where standard web development tools deliver responsive interfaces by default.
We were recently working with a client and a creative agency todevelop a new WordPress website with a modest budget. The client expressed a specific desire to have a responsive website, likely because it was more of a leading edge feature when they last undertook a site redesign. 6 years is a long time on the internet! We do a lot of work with creative agencies, often by doing website implementations for those who don’t have in-house web expertise. The agency was familiar enough with responsive designs to create mockups for the various devices, but some learning was required to understand how the web framework’s default behaviour differed from the creative mockups. If the site has a modest budget, it makes sense to rely on default behaviour. The desktop layout is designed to breakdown effectively on smaller screens (or vice versa, depending on the primary use of the site), and the responsive layout just works. There is no need to go through the effort of designing all the different layouts if the underlying mechanism is understood.
On the other hand, we are currently working with another client on a content-rich site. In this case, we are using our own designer, who is well-versed in responsive design. In this project, we have taken the assumption that the site will be used differently by mobile and desktop users. On the go, we expect the typical user to seek specific information, which we are making readily available, while a desktop user is more likely to spend longer on the site: browsing, searching, and digging deeper into its content.
To optimize for these expected differences in use, we do not want to rely on the default breakdown of the layout from desktop to mobile – instead we want the different layouts to best serve in-depth and quick reference use, respectively. To give one example, consider the navigation. Popular interface frameworks automatically convert top level menus to a hamburger (three horizontal lines icon) button for smaller layouts.
This is a convenient technique, as menus can become a barrier to reaching page content on smaller layouts. If the mobile user can get most of what they need on the home page, they can ignore the menu most of the time. The downside is that the hamburger button loads a menu that can be cumbersome on a large site. In our project, we did not want to overload the home page, but also wanted to save mobile users from the signifiant menu bursting from a standard hamburger menu call.
We settled on a solution that preserves a tidy top level navigation even on a phone, which allows users quick access to popular pages beyond the home.
If the user does need to drill down while on the go, we provide a hamburger from the second level, which is a bit more compact than the full site menu.
For this project, there was a clear justification for the effort to customize the responsive layout.
As in the first example, we recommend using the default responsive design for simple, low budget sites because a quick and cheap implementation is possible, provided the framework’s default responsive behaviour is understood. In the second the second example, we show the default responsive behaviour doesn’t always give an optimal user experience. The takeaway lesson is not to take responsive design for granted.