Before we get into what defines a mobile-friendly website, let’s first discuss why this is even relevant. About a year ago, Google released its algorithm known as Mobileggedon. In essence, this algorithm penalizes websites that are not “mobile-friendly” by decreasing that website’s ranking in mobile search results.
So what may have been the catalyst to releasing Mobileggedon? Since 2014, mobile devices have been the primary devices utilized to access the internet. Desktop is still important, but it is no longer considered first-line. Therefore, Google’s Mobileggedon algorithm is like a “tough love” approach in encouraging businesses to always design their websites with mobile devices in mind.
When developing a mobile-friendly website/webpage, consider the following recommendations:
1) Do NOT design a separate mobile website from your desktop version because it is redundant!
Think about it.Why would you create two different websites (mobile & desktop versions) that contain the same content?Google already penalizes websites for duplicate content.So why would you allow your website to be penalized for duplicate websites?
2) Use Responsive Web Design (RWD)
According to Wikipedia, RWD is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
From a technical standpoint, RWD employs use of flexible layouts, flexible images, and cascading style sheet media queries. This allows a web page to be able to detect the visitor’s screen size and orientation; and change the layout accordingly (think auto-adjusting to fit your mobile device’s screen).
3) Always include a viewport meta tag
The viewport is a virtual area used by the browser-rendering engine to determine how content is scaled and sized. The viewport meta tag tells your browser that the web page needs to fit the screen.
Typically, when loading full-sized web pages, mobile browsers display the entire page at reduced magnification.When a website does not make use of a viewport meta tag, users may have to double-tap or pinch the screen to adjust the web display.The below illustration shows a typical web page layout displayed on a mobile screen:
In the above example, users typically must rotate their mobile screens, pinch to magnify, etc so that the content can be seen.
Applying a viewport is critical in creating web pages that are mobile-friendly.
The following shows a sample screen layout without a viewport. The initially loaded page is zoomed out much too far to be legible, while zooming in makes content extending off the right edge of the screen difficult to access:
This reflects the browser's default assumption that content should extend 980 pixels wide. Mobile browsers must make that assumption in order to render pages that are not optimized for display on mobile screens.
Finally, here’s the above screen layout after applying the viewport:
There are many different configurations that you can specify your viewport to control. To explain the technical details any further would be beyond the scope of this article.The idea here is to understand the concept (and importance) of applying viewport meta tags to your webpage.
4) Font sizes and button size matter
Ideal font size is 14px.When creating labels or forms, consider reducing the font to at least 12px. Same concept applies for buttons. For optimal viewing, consider creating button size dimensions of at least 44px by 44px.
5)Use high-resolution images
According to Wikipedia, image resolution is the detail an image holds and can be applied to describe digital images, film images, and other types of images. Essentially, a higher resolution means more image detail.
Having extremely high-resolution images will prevent pixilated or even blurry images when viewed on a retina-quality screen.
6) Remove the default zoom
Using auto-zoom may interfere with a web page’s layout elements, especially for images and navigation content. They may appear small or too large in your layout.
The solution here is to make use of viewport meta tags.Again, to describe the technical details of this process in any more detail would be beyond the scope of this article.
7) Use YouTube videos on your site
Because YouTube already utilizes responsive web design (RWD) coding, any risk of difficulties in viewing videos on a mobile device are theoretically eliminated.
8) Don’t constrain your user’s mobile experience
Always include a “go to full website” or “view desktop version” option at the bottom of your site. This will give your website visitors the ability to choose how they want to view your website’s content.
9) Never stop testing
Even after your responsive website is complete, the testing never ends.Be sure to test your webpage on various mobile devices: Apple, Android, Windows, etc.Leave no stone unturned including buttons, layout, font, displays, etc.
Even more important is to allow someone who fits your target [demographic] user.Consider including someone who does not have an extensive technical background especially if this person comprises your primary demographic of potential users/visitors of your website.
Did I miss anything? Your comments are always welcomed.