How to Design Your Mobile Site
Understanding the core options to build your mobile website within your time and budget.
Mobile is important. I get it. You get it. We all get it. However, when it comes time to convince your boss you need a mobile website, you may face some push back. Mobile optimization may seem like a big investment that may not pay off. But let’s face it: mobile websites are a necessity for all companies, rather than a nice-to-have. Consumers of all demographics are increasingly relying on their smart devices to browse the web and interact with businesses ranging from the local café up the street to their stockbroker. As with most things, when looking to convert to the mobile web, oftentimes the most difficult part is knowing where to start and what your options are.
Mobile design strategies can be developed using a responsive, adaptive, or separate mobile approach.
Responsive design offers the most flexibility and future-proofing, so when designing new websites, defaulting to responsive is quickly becoming a best practice in the industry. We'll walk through responsive as well as other design strategies for mobile and weigh the pros and cons. Before delving into the specifics, however, let’s first take a step back and look at the three areas of mobile design on a macro level.
Responsive design is an approach aimed at crafting sites to provide an optimal viewing experience: easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices. Responsive sites provide users with the optimal viewing experience by utilizing fluid grids, flexible images and media queries.
This elasticity allows for your web design to fit itself to any screen size. It’s important to note that the term “mobile” is getting ambiguous. With so many types of smart devices, all with different features and use options, it’s difficult to create a mobile site that suits every aspect. Screen size alone isn't the determining factor in deciding what constitutes mobile. Some popular handheld devices, when in landscape mode, are the size of a common desktop screen. Responsive sites reflow their content and layout with multiple fluid grids based on their context or environment.
While on the topic of responsive, I would like to discuss mobile-specific stylesheets. Mobile-specific stylesheets are a subset of responsive design, and serve up screen-specific styles based on your viewport or window size. Commonly referred to as CSS, this tool is similar to cross-platform design in that a complete site re-work isn’t necessary. Minor changes in style and organization are implemented so that your non-mobile site can better fit on a mobile device. This design allows for ease in content and landing page additions while remaining minimal in cost. These sites tend to run slower as the engineering for it isn’t optimized for the wireless web. The content remains the same across non-mobile and mobile platforms, which results in consumers having to look longer for the generally very specific content they’re in search of. Homogenous content across mobile and non-mobile devices often causes increased loading time due to slower Internet connection.
What on Earth is adaptive design?
Adaptive has a lot of different meanings, we'll use it here to describe a site with multiple fixed width layouts that adapt or change based on its viewport. Adaptive design creates a fixed width design that “snaps” to a new layout at different breakpoints. Responsive design is a form of adaptive design that is more difficult to implement, yet more holistic. Adaptive web design utilizes media queries as well; it selects the correct layout from a set of predefined templates to correlate with the specific device being used.
Separate Mobile Sites
Exactly as the title suggests, separate mobile sites have alternate URLs than their mobile counterpart and are designed specifically for mobile devices. When searching for the company on a mobile device, users are redirected to the mobile site. Such sites are created when timeline or budget otherwise prevents the use of a responsive design.
Once you’ve selected the area of mobile design that best suits your needs, you then need to further examine your specific options for implementation.
For mobile sites, two common design implementations are: cross-platform design and a completely re-thought mobile website.
Learn more about building a multi-platform website.
Generally considered to be the easiest and the least expensive of the three designs, cross-platform design allows you to utilize a single site that works reasonably well on all devices. Rather than having to build separate web and mobile versions, you develop a single site to work on all platforms (think the Internet version of a “little black dress for all occasions”), which will inevitably save you both time and money.
Though this may be the most efficient way to launch your company’s mobile presence, it isn’t the most optimal design. Designs that are “one size fits all” are rarely a perfect fit, resulting in a mediocre site that works, but doesn’t provide the ideal user experience. Cross-platform is great when you are strapped by budget and timing constraints, but is perhaps not the most ideal.
Mobile sites don't function well as an afterthought.
This design requires a complete re-engineering of your website so as to provide the optimal user experience for your visitors. A version of your preexisting site is created specifically for mobile devices utilizing analytics from your current site in order to navigate visitors to the content that they are most in search of with minimal clicking and loading time.
Metrics such as page visits and click rates will indicate which content is the most valued by your audience; the most popular content should be prioritized first and foremost. General layout and design are also strongly considered. Your content and site navigation tools should be modified for the small screen for easy viewing and to relieve excessive scrolling and clicking frustrations.
Cross-platform, and mobile-specific stylesheets, while great options for those with time and budget constraints, are not the best options for mobile web design. Minor tweaks and adjustments are made to these sites in order for them to work on mobile platforms and are less of an investment.
While both present functional methods for creating mobile sites that work reasonably well on all mobile platforms, they don’t provide the flexibility, optimization and customization of a completely re-thought mobile website.