Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

6 Sites That Nailed It On Mobile

It is quite an art to make a web site look good on your much smaller phone screen, but it is absolutely essential for any site or business. A website’s degree of responsiveness – in other words, ability to recognize their environment (such as tablet vs. phone) and adapt to the screen in which they are being viewed – can make or break a company. Just look at the evidence:

  • A recent Google survey of mobile users found that 72 percent of mobile users say it’s important to them that websites are mobile-friendly.
  • Almost three-quarters of respondents said they are more likely to revisit a mobile-friendly site.
  • Users are five times more likely to abandon the task they are trying to complete if the site isn’t optimized for mobile use, with 79 percent saying they will go back to search and try to find another site to meet their needs.

Basically, a responsive site is going to keep your customers or users coming back to you, and not moving on to another site. How do you break down making your site mobile-friendly in bite size steps? Abide by the following principles:

  • Consistency: Provide visitors with the same tools and features for browsing and filtering across all devices.
  • Use space intuitively: Focus the visitor’s attention on the most influential and important elements, but don’t overwhelm them with a crazy interface. Make your site clean and give a clear CTA (call to action – for example, “buy!”).
  • Put the viewer in control: Provide device specific user interactions and give the viewer the ability to choose what kind of user experience they want.

When a site is responsive it is a beautiful thing. Here are a few gorgeous sites that have nailed it on mobile.

1. Nixon

photo 2 (2)

E-Consultancy did a case study on this company because their mobile design was so perfect. This is a great example of responsive design because of:

  • Consistency:  The same filters are available across all devices
  • Simplicity: It has a simple three bar tool icon in the header that guides the viewer. It also then allows the products to stand out.
  • Intuitive design: Only the primary colors of the watches are shown so the viewer isn’t overwhelmed. It also does a great job of focusing its space on the most important, CTA content.

It’s – pun intended – the gold standard.

2. Zady

photo 1

The conscious consumerism startup Zady looks stunning on mobile. It is simple, beautiful and straight-forward.

3. Huffington Post

photo 4

One friend noted that they keep going back to HuffPo because the mobile site has done a good job of paring down information.

4. Grey Goose

photo 3 (1)

This liquor retailer keeps the same feel on all of its platforms through the magic of flexible images and parallax scrolling.

5. Everlane

photo 2 (1)

Another e-commerce site that doesn’t overwhelm the customer. The scroll through of different “looks” on each product is seamless.

6. IFC

photo 1 (1)

A clear, structured site that gets the necessary information across.

 

Your email address will not be published.

5 comments

  1. James Humphrey Replied

    Check out m.tennismaps.com as an example of a mobile friendly Web-site. It is adaptive based on viewport size and keeps the controls out of the way of the content.

  2. Stephen Replied

    I second that. Aim for good mobile site design, but don’t overlook the obvious: in a showcase of sites, don’t forget to let the user click thru!

  3. nathan Replied

    This site could learn a few things about a good experience for the mobile user.

  4. weblover Replied

    Hi Skillcrush – I really love what you guys do. But maybe on this one you need to follow your own advice first. Have tried to view this post using my mobile and your site is not at all mobile friendly / responsive. Would also have expected the list to actually link to the sites you have featured so I could view those on my mobile but just get a bigger version of the thumbnail.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.