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. Heres what you need to keep in mind when designing – or re-designing – a website this year:
The number-one factor driving modern designs is mobile. Mobile traffic now makes up a greater percentage of searches than desktop traffic, so its 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 websites overall mobile-friendliness using the Mobile Usability Report in Google Webmaster Tools, and check individual pages with the Mobile-Friendly Test.
Its All About Mobile UX
Heres what Google says are the top three things to keep in mind when building a mobile-friendly website:
Make it easy for mobile visitors to complete their objectives on your website.
Measure your websites effectiveness by the ease with which mobile visitors can complete the most-common tasks therein.
Dont create separate mobile and desktop versions of your site, with different URLs.
Googles 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 its 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.
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 from left to right: skeuomorphic, flat, semi-flat, and material design.
Additional Optimization Tips
Dont 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.
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.
OptimizeImage tags Including accurate ALT tags for images helps them get indexed in Google images, which can bring some direct traffic.