Now more than ever, businesses are focusing on creating delightful mobile website experiences. After all, 80% of Internet users are using smartphones to search online.
What’s more, marketers are gearing up for a big change Google plans to make to their algorithm starting on April 21, 2015. Google wrote in their official blog that they will be “expanding our use of mobile-friendliness as a ranking signal,” and their update should have a significant effect on marketers.
When Google makes this change, it will have a bigger impact than Panda or Penguin. To put that in context, their Panda update impacted only about 12% of queries, and Penguin affected about 4% of mobile and desktop queries.
DOWNLOAD OUR FREE GUIDE HERE TO LEARN HOW TO DESIGN YOUR OWN MOBILE-FRIENDLY WEBSITE.
In other words, if you haven’t been focusing on improving your mobile experience, you’d better prioritize it now, or your search ranking might suffer. According to a Search Engine Land article about the update, there will be “no degrees of mobile friendliness” — your site will either be judged as mobile-friendly … or not.
To help inspire any mobile website design changes you’ll be making to prepare for the impending algorithm update, here’s a list of 15 companies who really nailed their mobile web experience.
This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to design and development for mobile devices and published here over all the years.
This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you’re looking for information on Mozilla’s Firefox OS project, see the Firefox OS page. Or you might be interested in details about Firefox for Android.
We’ve organized it into two sections, designing for mobile devices and cross-browser compatibility. Also see Jason Grlicky’s guide to mobile-friendliness for web developers.
Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.
TranVo is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:
fluid CSS layouts, to make the page adapt smoothly as the browser window size changes
the use of media queries to conditionally include CSS rules appropriate for the device screen width and height
The viewport meta tag instructs the browser to display your site at the appropriate scale for the user’s device.
To use a touch screen you’ll need to work with DOM Touch events. You won’t be able to use the CSS :hover pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on designing for touch screens.
You can use the -moz-touch-enabled media query to load different CSS on a touch-enabled device.
Optimizing images
To help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. You do this in CSS by querying for screen height, width, and pixel ratio.
You can also make use of CSS properties to implement visual effects like gradients and shadows without images.
Mobile APIs
Finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation.
