180fusion Presents: Mobile Basics
In the world of Digital Marketing, Google is famous for algorithm updates and the consequences that befall businesses with an online presence. In February, Google announced upcoming changes to their mobile search algorithm to benefit sites designed for mobile friendliness. For those unprepared, the countdown clock ticks closer to the April 21 update. But there are many resources online to help break down a road map to a solution.
ON YOUR SITE:
When people perform a search in Google, they seek relevant and useful information in answer to their query. The search engine results page serves only as the front line in fulfilling search needs. A site’s “after-click” experience is not only important for overall user experience (UX), but it will play a factor in your site’s ranking due to Google’s continuous ranking algorithm updates.
The popularity of search has positioned Google to serve as a gate keeper to consumer discovery of websites. Their algorithm serves to ensure the information on the other side of that click is meaningful and relevant to the person performing the search.
With the increasing use of mobile devices on a global level, mobile usability and mobile responsiveness are critically relevant for search engines to provide optimal search results. As an owner of an online web property, your Search Engine Marketing must now include a website that will provide people with content that is optimized to display across mobile devices to be successful.
Click image for larger view
Viewport Not Configured
It is inevitable that users will find your site through a variety of devices and screen sizes—through desktops, laptops, smart phones and tablets. Use of the meta viewport tag will specify how browsers should adjust page dimension and scale content for optimal viewing across devices.
A viewport with a defined viewing area means the content of your website is limited to a fixed pixel size as a means to adjust non-responsive pages for various mobile screen sizes. It is important to set the viewport to properly scale and match the width of devices with site wide responsive design.
Content Not Sized to Viewport
Vertical scrolling is perhaps the most popular design for exploring content and images on a web page. When absolute values in CSS declarations are not properly established or images are not properly sized or optimized with scalability, users can miss content or experience frustration by accessing this content through horizontal scrolling. Best practice ensures scaling images and responsive design where web pages use proper relative width and positional CSS element values.
Small Font Size
Font size and scalability allows the content of your site to be easily read on small screens. Avoid the need for your client to “pinch and zoom” to properly read content. Set your font sizes to scale properly within the viewport you set.
Touch Elements Too Close
Buttons and navigational links, or touch elements on your website, should be well-spaced. When these elements are placed too close together, mobile users cannot easily tap the desired element and can find a frustrating UX by tapping the wrong neighboring element. It is important to correctly size and space touch elements to improve UX.
TIPS FROM THE PROS:
Visual Design & Motion
Rich website content, such as animations and navigation, are unable to be properly viewed and can’t boost UX if overall design and motion are not driven by mobile friendly technology. Most Flash-based content does not render on today’s mobile browsers. Modern technologies have come a long way since Flash usage was developed. Best practice maintains the importance of considering the look and feel of total site design, ensuring your brand can be displayed effectively across desktop and mobile devices.
A web browser processes special types of web content through the use of plugins. More and more, mobile devices taking over the market do not support plugins as they have been a critical player in the leading cause of browser crashes and security flaws. Much of today’s content can now be created using native web technologies to avoid the pitfalls found where plugins were previously required.