Mobile Friendly Responsive Web Design
Google are once again on a prerogative quest of finding more mobile-friendly search results and have introduced a mobile algorithm aimed at responsive web design, specifically for touch screen phones.
The mobile friendly algorithm comes into fill swing 21 April 2015. The aim of the mobile algorithm is to display the most relevant and timely results, regardless whether the information lives on mobile-friendly web page or a desk-top site. Meaning, your desktop site now needs to be mobile compatible otherwise Google will filter it from the mobile search results.
Desktop sites now need to ensure there site is configured properly and viewable on modern devices, like touch screen phones. Google has provided a mobile friendly test tool to help Webmaster. https://www.google.com/webmasters/tools/mobile-friendly/
The tool is however juvenile and seems to point to touch screen configuration and has bugs. But needless to say, it is advised to get the “Awesome this page is mobile-friendly” Noddy badge from Google.
The other tool provided is the page speed and user experience tool. https://developers.google.com/speed/pagespeed/insights/
It is strongly advised to use these mobile checking tools. I assume there mobile algorithm will be using the same signals.
Signals Google Use In The Mobile Friendly Algorithm
Below are signals Google will be looking for when using the Tool, and i do suspect they will target the same signals in the mobile friendly algorithm.
- The viewport needs to be specified and configured so that the mobile browser knows how to render the page
- Elements outside the viewport that are wider than the mobile screen resulting in the user zooming will no longer be accepted. To fix the issue use the following in the head section of your document and configure your CSS.
- Avoid using px and rather use %,
- Floating and absolutely positioned elements should also be avoided on limited screens for usability reason
- Avoid using position, it will result in overlaps (if multiple div elements are positioned with the same hight)
- Avoid landing page redirects that result in bad user experience
- Optimize images, specifically loading, positioning and sizes
- Prioritize visible content
- Use legible font sizes that are recognized by most browsers
- Size tap targets appropriately for touch screen phones, specifically links
- Avoid plugins
- Compressing resources with gzip or deflate
- Reduce server response time
The above are but a few signals they will be looking for.
Mobile Friendly Responsive Web Design – Do’s And Dont’s
Google has marked the left image as mobile friendly even though it sucks!!? the page is most definitely not user friendly, or for that matter, mobile friendly.
The page was HTML 4.01 Transitional using style=”position:absolute;left:11px;top:0px;max-width:999px;height:122px, on images and div’s, resulting in the page content overlapping due to position heights been similar.
Below I have compiled a list of do’s and dont’s when it comes to mobile friendly responsive web design.
- A mobile browser usually takes around a minute to download 100kb. Scale down images to within reason and remove unnecessary template images. Always remembering that mobile devices have limited memory and mobile users pay bucks for what gets loaded onto there devices
- Make sure to separate CSS styles defined for screen and handheld media types, so that only relevant CSS styles are downloaded by the mobile device
- Using absolute measures in CSS creates layouts that do not adapt to the screen dimensions. Use em or percentage values in CSS. So in other words, Don’t use pixels and don’t use absolute units in markup language attribute values and style sheet property values. Content and layout should be separated, and styles defined in an appropriate embedded or external CSS style sheet
- Avoid pop-ups. They are at the least of times irritating, even with a mouse, let alone on a mobile device and some mobile browser don’t render pop-ups
- Make sure the encoding is explicitly set either in the HTTP Content-Type header or in the XML declaration.
- Make sure your document is served with caching information (“Expires” or “Cache-Control” header) By providing caching information makes it quicker and cheaper to load pages and helps mobile browsers reduce the number of network accesses. Caching information can be achieved either through server configuration, or within PHP scripts
- Make sure your document uses valid XHTML elements. Mobile browsers are more sensitive to ELEMENTS than desktop browsers, which could result in bad user experience, resulting in bad bounce rate
- Become mobile image wise. Images in formats other than GIF or JPEG may not work on some mobile browsers, specifically png images
- You need to add width and height attributes that match the actual dimensions of an image, otherwise the browsers will reflow the page when the images have finished loading, its called, bad user experience
- Do not rely on embedded objects or script. By using event attributes results in scripts and content in a page been mixed. Rather register the events listeners in the script, separated from the content of the page
- Don’t use b, big, i, small, sub, sup or tt elements. Styles should be defined separately from the content, in a CSS style sheet that can be re-used and cached across all pages
- Do not use image maps for navigation, most mobile browsers don’t support image maps
- Don’t use table elements for page layout and don’t use nested tables, rather use CSS
- Think ahead, Organize your page lay-out so that if necessary can be read without style sheets
W3C Mobile Friendly Checker
Lets move on to W3C. Firstly I wouldn’t take all W3C errors to head or stress to much about small errors. it is a know fact that W3C are precise and extremely dramatic when it comes to world coding standards and they do target all mobile browsers, old and new. Whereas Googles mobile friendly Tool targets more modern browsers, like touch screen phones that are more compatible when it comes to displaying scripts.
The W3C mobile checker displays more detail than the Google mobile checker, even complaining about missing alt text and coding errors which I assume is already part of Googles crawling signals.
But nonetheless. If you really wanna get down and dirty when it comes to responsive mobile web design and perfect mobile coding then use the W3C mobile checker.
That should keep you busy for a substantial amount of time. Feel free to post a comment or query.