In this blog post, we’re going to have a brief look at some of the up-and-coming stars of the responsive web design world, and how images, layout and navigation issues are being addressed. Here’s a roundup of some of the potential solutions.
Images
In our last post, we looked at how the proposed HTML5
So perhaps the answer lies in the image formats themselves. Google’s new WebP image format is highly compressed – 26% smaller than PNG and 25-34% smaller than JPEG – and is a definite competitor in the race for smaller images and faster speeds. Sounds good, but unfortunately, although it is supported by Chrome, Safari, Opera, Android and Internet Explorer (the latter using the Chrome Frame plugin), Firefox does not plan to support the format, which rather hinders its widespread adoption.
Progressive JPEG images improve the user experience by getting progressively sharper as they render. This means that the user gains a quick general impression of the image before it has fully loaded, instead of having to wait. So whilst they’re not a solution as such, they’re a useful addition.
Layout
Our current use of floats and inline blocks are certainly not the ideal way produce beautiful webpages. Clunky and not flexible enough, they make responsive web design awkward and time-consuming. But changes are afoot.
CSS flexbox offers one solution, and is now supported in most mobile and desktop browsers. Allowing you to reorder elements independent of the HTML, it permits changes to the flow and orientation of boxes, and the ability to distribute space and align according to the context. For a similar solution with JavaScript, try Relocate.
CSS3 multiple-column layout works in most browsers with the exception of IE9 and below, and allows content to flow from one column to the next. The number of columns can be changed according to the viewport’s size, so it’s an important move forward for responsive design.
Yet another CSS3 offering is the grid layout. Evolving from the grids a traditional print designer might use, this solution allows web designers to specify a grid structure into which all child elements are placed, in columns and rows. The property allows for great flexibility, but unfortunately is currently only supported in Internet Explorer 10.
Navigation
In an earlier post, we looked at some ideas for improving multi-level navigation and utilising a range of more flexible, innovative techniques. As if it wasn’t complicated enough, when combined with responsive design, complex navigation becomes even more riddled with difficulties, and simple drop-down menus on a small screen become unwieldy and often inaccessible. So are there any better answers to the problem of navigation in the responsive design world?
Luckily, yes. Toggle navigation is a solution whereby when a user clicks on a menu link (rather than continuously displaying an entire menu), the other links appear below it, pushing the main content down. Similarly, off-canvas navigation is hidden beneath a menu link which, when pressed, allows a navigation panel to slide out, pushing the main content to the side.
Whilst responsive web design poses many challenges, it also offers a great number of possibilities, and hopefully the above glimpse into some of the forthcoming fixes and innovations in web design will have provided a little inspiration and insight into what’s on the horizon. Keep watching this space!