Designing Mobile-Friendly Websites in 2015

http://en.wikipedia.org/wiki/File:Responsive_Web_Design.png

An example of responsive web design, from Wikipedia.

It’s a big year for website redesigns. Besides the mundane visual refresh that every website needs now and then, there are serious practical concerns like mobile accessibility and changing search algorithms. Here’s what you need to keep in mind when designing – or re-designing – a website this year:

Mobile

The number-one factor driving modern designs is mobile. Mobile traffic now makes up a greater percentage of searches than desktop traffic, so it’s important that mobile visitors are able to access your website, and that it work well for them. Moreover, as of April 21 of this year, Google has altered its algorithm to favor “mobile-friendly” websites for mobile searchers. Even some major websites lost 20-75% of their mobile traffic. For example, the 11th most popular site in the US, Reddit.com, lost about a quarter of its mobile search visibility. You can discover problems with your current website’s overall mobile-friendliness using the Mobile Usability Report in Google Webmaster Tools, and check individual pages with the Mobile-Friendly Test.

It’s All About Mobile UX

Here’s what Google says are the top three things to keep in mind when building a mobile-friendly website:

  1. Make it easy for mobile visitors to complete their objectives on your website.
  2. Measure your website’s effectiveness by the ease with which mobile visitors can complete the most-common tasks therein.
  3. Use responsive web design so your site automatically adjusts to the device viewing it.
    1. Don’t create separate mobile and desktop versions of your site, with different URLs.

Google’s guide to building mobile-friendly websites can be found here.

Functional Design Elements

Besides implementing responsive web design, what can we do to achieve the user-friendliness standards recommended by Google?

  • Make pages load quickly! Ideally, your pages will load in one second – or less – on mobile devices. Google considers page speed in overall ranking factors, and it’s likely to become more important as time goes on.
  • Favor scrolling over clicking. Despite the popularity of widescreen laptops and desktop monitors, the tall, portrait-oriented screens of smartphones have begun to influence web page design. Longer, flowing pages continue to proliferate, because this design encourages interaction, is more intuitive, and faster to use on smartphones than repeatedly loading new pages on the same site. It’s all about user experience, and this element caters heavily to mobile users.
    • Use anchor tags to make it easy for users to navigate a single long page.

Aesthetic Design Elements

Beyond functional design, there are several emerging stylistic trends to keep in mind.

  • Large backgrounds and images – Large, attractive images and even video are used to provide an immersive webpage experience. As mentioned above, these need to be coupled with responsive web design techniques to ensure speedy loading times.
  • Large and creative typography. Resources like Google Fonts are making is easier for web designers to be playful with the look of their words. Perhaps counterintuitively, this often results in designers combining fewer, but more attractively displayed words with the large images noted above.
  • Semi-flat design, or “material design.” Tech leaders Google, Microsoft, and Apple have largely abandoned “skeuomorphic” design for a “flat” design motif, which has in turn largely transformed into “semi-flat,” i.e. flat design with shadows. Google calls this “material design.” Semi-flat design uses subtle gradients, layering, and at times animation, creating a rich user experience.
Examples of skeuomorphic, flat, semi-flat, and material design.

Examples from left to right: skeuomorphic, flat, semi-flat, and material design.

Additional Optimization Tips

  • Don’t use Flash or popups. Popups are even more frustrating for mobile users than for desktop users, and many mobile devices cannot display Flash objects. Use HTML5 for multimedia, instead.
  • Don’t block CSS, images, or JavaScript. Preventing the Google spider from “crawling these assets… can result in suboptimal rankings,” according to Google.
  • Use Schema tags on pages to improve the appearance of your pages in search.
  • Title Tags and the page Meta Description. These are part of traditional SEO and are still important. You have about 55 characters to work with in title tags, and 115 or so in Meta descriptions. Try to employ your main page keyword in both, and make sure your description appeals to visitors.
  • Utilize your Keywords. But don’t stuff your pages with them. Try to include your primary and secondary keywords in your pages in a natural manner.
  • Optimize Image tags – Including accurate ALT tags for images helps them get indexed in Google images, which can bring some direct traffic.
  • Check for other mobile-website mistakes. Here is Google’s list of common mobile website mistakes.

Subscribe to our newsletter!

Fields marked with an * are required

Categories

About NSI Partners

A digital marketing company with almost two decades of experience, NSI Partners helps clients achieve robust results in search marketing, social media, and other digital marketing spaces.

Leave a Comment

More from our blog

See all posts