Mobile Friendly and Responsive Web Design
Google is 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 of whether the information lives on a mobile-friendly web page or a desktop 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 their site is configured properly and viewable on modern devices, like touch screen phones. Google has provided a mobile-friendly test tool to help Webmaster
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
It is strongly advised to use both checking tools.
Signals Google Use In The Mobile Friendly AlgorithmBelow 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 viewpoint needs to be specified and configured so that the mobile browser knows how to render the page
- Elements outside the viewpoint that are wider than the mobile screen resulting in the user zooming will no longer be accepted
- 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 a 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 using to many plugins
- Compressing resources with gzip or deflate
- Reduce server response time
Mobile Friendly Responsive Web Design – Do’s And Dont’sBelow 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 hand-held 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
- 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 a 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 layout so that if necessary can be read without style sheets