Give your Website a Boost with Mobile-First Strategy
Mobile devices are exploding the marketplace with nearly 75 percent of adults in the United States owning a smart phone, according to a Pew Study. Factor in tablets and teenage customers and a vast majority of your client base is potentially accessing your website from a mobile device!
With advancing technology, Android devices are now able to optimize websites to the same quality as a desktop computer screen and new technology even allows customers to visit websites via specialty glasses and watches.
While the future of technology is hard to predict, it is safe to say advances are going to be amazing, and likely favor the mobile device. As website developers and marketers, you need to stay on top of the game, and keep up with the pace of changing technologies. Already, potential customers and clients are replacing their laptops with tablets. In order to maximize access to your audience through the internet, businesses should focus on creating a website that runs well on mobile devices.
When mobile technology first emerged, it was common practice to create the desktop computer-based website first and then convert the website to a mobile-friendly site. While this may have worked in the past, this method systematically put mobile function on the back burner. With the undeniable mobile web presence, this method does not work anymore. People are buying more tablets and phones than they are desktop computers, which means it is time to start thinking mobile first.
The primary difference between the old method and the new is that when creating a mobile website first, the website designer will build a site using the constraints of a mobile platform and include extra functions to accommodate desktop computer viewers. When the desktop-based website appears first, the designer has to strip added functions to accommodate mobile device limitations. As with most things, it is a lot easier to add on to something than it is to take things away.
Here is what you need to know about designing your website with mobile in mind:
Design according to common mobile constraints
There are specific constraints designers must consider when creating a website designed for mobile devices. For example, smaller screens mean different optimizations and quality concerns. Additionally, one weakness common to mobile devices is a low (or at least lower) internet connection. Mobile devices are designed to be light, which also means less computing power. Add impatient users trying to access information on the go, and you have major connectivity issues to factor in.
Mobile-first strategy focuses on providing a faster-loading experience on a small screen with low internet connectivity.
Keep your design simple. Focus on key information your clients will need on the go and make sure the content you do provide, offers the maximum amount of information clearly.
In order to allow your website to run at a faster loading speed on mobile devices keep these tips in mind:
• Keep images to a minimum. Go for smaller files because they load faster.
• Use static social buttons to reduce the use of mobile resources
• Avoid large javascript libraries
• Keep CSS small and clean
• Don’t over-complicate navigation conventions
Differential mockups based on device
Apple and Google devices function differently. When designing your website remember the differences and incorporate specific needs into your website. For example, Apple designs tend to be more one-dimensional and lacking shadow and texture, while Google prefers a more layered look.
Specific considerations to keep in mind: Android devices (smart phones and tablets) have a built-in back button on the devices. This allows users to return to a previous page or function easily. Apple products do not have this feature. This means you should include a “back button” option on your website so Apple users can return to a previous page easily.
Check out this helpful cheat sheet, for a few more differences you need to accommodate for, including content display and action bar/tool bar considerations.
Add mobile features to mockups
Accessing websites from a mobile device can provide a few cool benefits that customers do not have access to from a computer. A great example is GPS technology. Consider adding a tool that allows users to navigate to your storefront from their current location using their phone’s geo-location technology. You can easily integrate Google maps into the mapping feature on your website.
Another fun trick, allow users to click on your business phone number to dial directly. It is a simple benefit, but users will enjoy the simplicity of getting a hold of you. You may also consider adding a “share” feature that allows visitors to share your app or website with their contact list.
Adapt features for the desktop version
Your desktop websites will include your mobile functions at a higher level. Remember to accommodate the design to fit a larger screen. Ideally, you should use your mobile content as the basis for your desktop website design. You can easily add additional information and tools as secondary content on the desktop site as needed.
A simple example is your help page. The mobile version may feature very simple screens of text that is short and easy to read. Take it to your desktop version and add headings and more detail to flesh out the page.
Navigation options on your desktop website will be considerably different from the mobile version of your site.
• Most desktop users can easily access drop down menus and submenus (nested categories). This feature is more difficult (and time consuming) on a mobile device. This gives you a few more options for navigation and design on your desktop site.
• Desktop websites allow for clicking, as opposed to tapping on a mobile device. This provides more options for you to lead your customers where you want them to go. Consider adding hyperlinks into content to add authority and provide information that is more detailed.
Note that responsive design works great with the mobile-first design strategy. You can easily start with CSS from a mobile perspective and adjust to bigger viewport sizes as you convert to the desktop version.
When you adapt your mobile website for the desktop, do not forget to remove mobile-specific applications. You can adjust special features, like the GPS-based mapping system to work on the desktop. For example, allow your customers to input their zip code to find your nearest location instead of relying on the GPS features of a smart phone.
Desktop sites allow for more freedom in regards to design, content and features. Encourage customers to check out your desktop version by providing features unique to that version only. Your desktop site has more room, which means you can add sidebars, margins and advertisements.
Your desktop site is a great place to add more photos and graphics. Online users really respond well to infographics and images that break up long blocks of text. A computer has more power and better internet speeds, so more images should not significantly affect the download speed of your site. Animated headers and graphics work much better on a desktop website.
Breadcrumbs are also an effective way of navigation through products mostly. They make sense for large, hierarchical websites with a lot of data.
Final Thoughts
The well-known design principle KISS says it best: Keep it simple stupid. Start with a simple mobile-based website first. Starting with a stripped down product allows you to focus on simplicity and it forces you to focus on the most important details.
When you start with the mobile site first, the desktop version will have a solid, streamlined foundation, resulting in a better-designed, purpose-driven website. Many mobile websites become half-baked versions of the desktop site, which is bad for your customers and bad for business.
What have you done to create a better mobile website? Have you tried the mobile first approach? Tell us about your experience in the comments.
