How does your website rank on the mobile user experience scale? Is it mobile-friendly or mobile-indifferent? According to a Google study, nearly 75% of users prefer a mobile-friendly site and 96% of consumers say they are annoyed with sites that were clearly not designed for mobile devices.
We’ve all experienced the frustration of visiting a site on a phone or tablet only to find hard to read text, poor layouts and an overall bad mobile user experience. The UX factor diminishes dramatically on sites that don’t adapt to a wide range of devices.
Better Mobile UX
The Web designers at OneSpring are experts in Mobile UX and responsive website engineering. One tool we use to increase the mobile UX factor is the OneSpring Mobile Responsiveness Checker: http://onespring.net/responsive.html
This handy tool makes it easy to see any website through the lens of multiple devices at a single glance. Here are the device sizes covered by the OneSpring Responsiveness Checker:
The devices and screen sizes covered are:
240 x 320 (small phone)320 x 480 (iPhone)
480 x 640 (small tablet)
768 x 1024 (iPad - Portrait)
1024 x 768 (iPad - Landscape)
TIP: You can also pass in a URL like this:
http://onespring.net/responsive.html?http://onespring.net/
Responsive Web Design
Mobile responsiveness is all about making good use of available screen real estate on any device and responsive Web design is a cornerstone for the Web team at OneSpring. By adapting layouts without changing content, we can focus on improving the mobile UX factor while decreasing development time and cost.
Media Queries and Cascading Style Sheets
At the core of responsive Web design is CSS3 media queries. Media queries became a World Wide Web Consortium (W3C) standard in June of 2012; however, it’s perplexing how few sites actually engage this technology. All modern browsers are capable of handling device screen size detection and the cost of not implementing responsiveness is dramatic, as the Google study has revealed.
Media queries can test for such things as device aspect ratio, device width, device height and even color. The code involved is essentially CSS code enclosed in special media query brackets and can live in an external style sheet or in the Web page itself.
Build Once, Deploy Once
In the not-so-distant past, website owners who cared about the mobile user experience were tasked with building a completely separate version of their website. You may have seen a Web address with the “m.” or “mobile.” prefix. This is unnecessary and costly in the world of responsive Web design. OneSpring’s build once, deploy once methodology uses the same content and delivers the best mobile user experience possible.
To learn more on how we can transform your current website into a mobile UX success story, contact the OneSpring team today.
For more info on responsive Web design visit these links:
http://www.w3.org/TR/css3-mediaqueries/#background
https://en.m.wikipedia.org/wiki/Media_queries
https://en.m.wikipedia.org/wiki/Responsive_Web_Design
http://www.google.com/think/research-studies/what-users-want-most-from-mobile-sites-today.html
