It’s Time to Get Mobile
Mobile web traffic has been increasing steadily year after year. What does this mean for businesses? It’s more important now than ever to make your site mobile friendly.
Design Approaches Explained
People in the web design business love technical jargon and buzzwords. Here’s a quick rundown of some terms you’ll run into when talking about mobile UX:
- Fixed-Width: The layout of the site doesn’t change with screen size; it is always displayed at a consistent width. This worked fine in the early days of the web when everyone was visiting from computers, but is completely unacceptable on the modern web, forcing users on mobile devices to zoom and pan through a desktop UI on a small screen. This is a “one size fits all” approach. Imagine trying to sell the same pair of pants to someone who 5’7” 150lbs and someone who is 6’5” 350lbs – you wouldn’t get many customers.
- Fluid-Width: The site responds to screen size, but only in the simplest way: all widths are defined as a percentage of screen size, so the content adjusts to fill the space available. This is an improvement over fixed-width sites, but it still only works in a world where all visitors are coming from desktop. The mobile experience is still poor because the number of columns doesn’t change, so content can get squeezed into very small regions on phones or stretched way too wide on large screens. Continuing the clothing analogy, fluid-width is a pair of pants with an elastic waistband: it works well within a range of sizes, but still won’t be a perfect fit for both a 150lb person and 350lb person.
- Adaptive: The layout adapts to the screen size by displaying one of several fixed-width layouts. This is the minimum acceptable solution for accommodating mobile devices, but it isn’t ideal because the design isn’t taking full advantage of available screen real estate on every device. Instead, designers must determine a few general sizes that can handle a range of widths for each type of device: Mobile, Tablet, and Desktop. These are known as breakpoints. Our pants now come in Small, Medium, and Large; people can usually find a decent fit.
- Responsive: While adaptive designs only change at breakpoints, responsive designs make big shifts at breakpoints, and smaller adjustments at every size in between. By creating a few ideal layouts and including flexibility to adjust between breakpoints, responsive design combines the strengths of fluid-width and adaptive approaches to create a site that fully takes advantage of every device’s available screen real estate. The pants have sizes and elastic waistbands, so everyone is comfortable.
Separate Mobile Sites: A Thing of the Past
To check if your site has a good mobile user experience, simply visit your site on a mobile device. If you are shown a scaled-down version of the desktop site (fixed- or fluid-width), it is not mobile friendly. If you are redirected to a separate site, such as m.mywebsite.com, your site is mobile-friendly, but you are behind the times.
In the past, businesses needed to create a separate mobile site in order to deliver a good mobile experience. This had drawbacks for everyone involved:
- Developers needed to build and maintain two sites
- Content managers had to manage duplicative content and make sure messaging stayed consistent across the 2 sites
- Marketers had to struggle with the SEO implications of competing against themselves with duplicate content.
- Users had a bad cross-platform experience: bookmarks that were saved on desktop were incompatible with mobile, sharing links on social media often drove others to a variant of the site that did not match their device, and finally, the mobile site often only offered a limited subset of the content on the full desktop site.
The Modern Answer: Responsive Design & Server Side Components (RESS)
RESS is the modern solution to web development in the multi-device world. This approach solves the development, content management, SEO, and UX issues that plagued the old model of separate mobile sites. While it takes more planning up front, it saves time and effort over the lifecycle of the website. A typical responsive design makes all the changes on the client side, meaning everyone downloads the same site, which is then optimized for the screen size within the browser. In most cases this is fine, but sometimes you need to optimize for mobile, especially with photography and video. This is where Server Side Components come in. Before delivering the site to the visitor, the system can determine what type of device they’re on and only deliver exactly what they need. This can improve the visual design and also decrease load time. Load time has always been a key factor in user experience, and it is only becoming more important as mobile traffic overtakes desktop browsing.
What Should I Do Now?
It is possible to retrofit responsive behaviors into an old website; however, this is often more trouble than it’s worth. An effective responsive design relies on a well-planned structure, so building on top of an old site can take more time to deliver a less effective end result. Chances are, if your site was built in a way that makes implementing a responsive UI difficult, it’s time to consider a fresh start.
Need help getting started? Do you have any other questions? Give our team a call.