Responsive design has been around for several years. Over this time, it has not only moved from being something only a talented designer could achieve to tables stakes. Furthermore, while pretty much every website has now is mobile friendly, some have done it better than others. Bloomberg, for example, is a great example of an information dense website that expertly implemented responsive design. Today, we are going to discuss some interesting patterns they use to achieve the results.
1. Start the design from a small screen and progressively increase fidelity
On mobile phones, the Bloomberg homepage is minimal and simple. A navigation bar containing their logo with a drop-down menu, and a search icon, as well as a couple of headlines with related news articles. That’s it. No news tickers or stock updates nor login/demo request links. This indicates a clear vision that people go to their mobile homepage to find out about the important news items for the day, and that’s what they design for.
As the screen size increases to a tablet sized screen, a few more elements are added the page. However, it is still clear that the focus is still on important the important news – navigation hubs allow users to go into more specific niches.
At the full desktop size, you now get the full experience. At this size, it would make sense for the option to watch the TV channel or log into the Bloomberg Terminal. You may also be curious about other things which they serve up in discovery sections.
Granted, most websites are not as complex as Bloomberg’s, but the key lesson here is to focus on the use cases for each device and start from mobile before scaling up.
2. Using Mondrian blocks as a basis for their responsive content
At its core, Bloomberg’s design grid is akin to Piet Mondrian’s famous works, using blocks of different sizes to house their elements. This gives the flexibility required to manipulate the elements as they did for the different screens. For example, moving the related news out of the bounding box of each article’s lead image.
This also allows further customization for their occasional huge feature pieces.
3. Responsive headers keeps the branding on point for mobile
Bloomberg’s website changes its header when it goes to the mobile format, with the distinct Bloomberg blue for the background, and their wordmark in white. This carries over to individual articles too, which is a smart move on their part. The header branding lets it stand out when traffic comes from social media – as there isn’t much other space for it to create a unique brand flavor.