Responsive web design is a design approach that strives to provide the best browsing experience regardless of device or screen size. As regular readers of this blog will know it’s been making huge gains in popularity.
The topic of web browsing context is something we have thought about a lot. We really want to get to the bottom of where, how and why users use the websites we build. We believe that optimised content delivery to all devices (desktop, laptop, smart phone, tablet) is not an option, but a requirement.
Dealing with difference
Much of the content we deliver lends itself to long web pages. Long pages need a mechanism for linking to content inside an individual page. Fortunately the web has just such a mechanism: the hash link. If you see a URL that ends with a hash identifier, this will link to an individual section of the page. For example http://example.com/page-1#item-3 will take you directly to “Item 3” which may well be two full page scrolls away from the top of the page.
Responsive web design dictates that a site needs to be totally fluid over a great range of sizes. This works really well until you come across this type of long page content. Images and other resources load asynchronously and sometimes after the page has started displaying. This means that occasionally you can visit `http://example.com/page-1#item-3` and “Item 3” will be displayed at the top of the page briefly, but then some images load making the page longer. Suddenly “Item 3” has scrolled past the bottom of your browser window and out of sight.
Responsive design statement
With the appointment of our new head of design and our continuing commitment to design excellence, we feel that now is a good time to issue a responsive design statement to show how we approach responsive design from a implementation and design viewpoint. The mobile and browser landscapes are continually changing. We intend to adapt and evolve our processes and responsive design statement as time goes by:
“Responsive web design is a design approach aimed at providing an optimum user experience across a broad range of devices and screen sizes.
In the strictest sense of the term, designing responsively requires the design to fluidly adapt to the entire range of possible screen sizes. With the large range of screen resolutions and pixel densities in the tablet and mobile ecosystem the only way to effectively support them all is with a fluid approach. The tablet experience is very important to us and our clients because a significant number of students now use a tablet for reading and research.
We take a pragmatic approach to designing responsively. We choose to target mobile and tablet sizes fluidly, but when it comes to desktop experience we often choose to use a fixed width as it benefits performance of long page content and helps deep-linking of content.”
Supported mobile browsers
We support the following mobile browsers as standard:
- Latest mobile Safari (e.g. iPhone 4/4S/5, iPad)
- Latest Chrome for Android (e.g. Nexus 7 and Nexus 4 running Android 4.2 – Jelly Bean)