5 examples of responsive website design

Posted by Rachel Lee on Tue, Jun 30, 2015 @ 08:30 AM

responsive-website-design-concept

It goes without saying that mobile devices have become increasingly popular as a means of staying connected. The landscape of internet browsing has changed dramatically in the last five years that modern tablets have been available in Australia, with half of the adult Australian population accessing the internet via a tablet in the six months to May 2014

Coupled with the fact that an increasing number of people are using mobile devices for internet access, businesses can expect more website traffic from mobile visitors. The implication is that it pays to ensure your web content looks as great on a mobile phone and tablet as it does on a desktop computer.

Since you will lose marketing real estate on a smaller device, you’ll want to ensure that your content, thoughtfully arranged on a 15” desktop, is not displayed in unreadable proportions on a screen that ranges between 4” (mobile) and 9” (tablet). To avoid having your visitors squinting and waiting longer than usual for images to load, it is important that your website is designed to be responsive.

This means that it displays differently depending on the device you use, showing the full website on a desktop, but also catering to smaller devices with larger fonts, compressed images suited to the resolution of that specific screen (to save on download times and internet quota), and a collapsed navigation menu that makes mobile browsing a breeze.

The following five websites exemplify how much you can improve your website’s user experience and SEO (Search Engine Optimisation) with responsive website design.

1. The New Yorker

The New Yorker's full desktop version lists its stories in different rows and columns. Whilst there are quite a number of them, it is a fairly straightforward website to navigate as the stories are organised by categories, such as “Latest News” and “Spotlight”.

New-Yorker

(The New Yorker in its full and mobile version)

Having multiple columns works for the desktop version, since people tend to browse a page from side to side as they scroll up and down the page. But it’s likely to get messy if the same number of columns were replicated for the mobile version. Instead, the web version of the site lists stories in a single column, making it much easier to browse through. The New Yorker’s 11 pages that line the top navigation of the desktop version are also condensed into a single collapsible menu in the mobile version.

2. Ebay Australia

Ebay’s homepage is filled with a massive array of products. So, massive, in fact, that it can be borderline overwhelming on its desktop version.

Ebay-Aus

(Ebay Australia in its full and mobile version)

By contrast, its mobile version is relatively minimal. The full functionality is still there, but the amount of content is much more digestable for the mobile internet user. The mobile version also preserves some of the rotator features of the full site, so there is some consistency between both.

3. The Courier Mail

The Courier Mail’s full website is laden with text. No surprises there - it's a news source after all.

Courier-Mail

(The Courier Mail in its full and mobile version)

Meanwhile, its mobile version has a higher image-to-text space ratio, which helps the eyes focus on one thing more easily; it would be a navigation nightmare otherwise. A notable point is that the Courier Mail’s mobile site has a search icon that’s comparably larger than its desktop version, so that mobile visitors can more quickly find what they are searching for instead of having to scan the entire page closely. Notice, also, how the advertisements sandwiching the main content section in the desktop version are near-absent in the mobile version.

4. MTV

MTV is a great example of a site that has a fairly minimal amount of content (compared to the previous three sites), and its mobile version more or less replicates the content on the desktop version exactly. It’s very clearly laid out, so you won’t have to worry about your phone not displaying any story from the full version.

MTV

(MTV in its full and mobile version)

5. Ekka

The Ekka website is an example of a site that utilises a strong visually-driven design, particularly in terms of photos. While largely visual, images have been optimised to load quickly and adapt to all screen and device types. This reduces data usage (a must when browsing on mobile) and ensures faster browsing.

Ekka

(The Ekka website in its full and mobile version)

Notice, also, that the multiple page tabs collapse into three in the mobile version. It's important to put some thought into what your mobile web visitors are most likely to want to look at as, more often than not, you'll have to be choosy as to what gets displayed on the mobile page and what gets tucked away behind a collapsible navigation menu.
 

These examples show that responsive web design is not just about making your content look good, but also about good functionality and ease-of-use - regardless of the device you're using.

digital-marketing-report-blog-cta-2

* Responsive Design Concept Image via Shutterstock

Topics: Desktop & Mobile Website Design

Recent Posts