As a small business owner, you know the importance of the Internet to your company — in attracting customers, advertising your services or merchandise, and competing more effectively with the big guys.
And you likely know, or have noticed, that people access the Internet in various ways, from desktops and laptops to, increasingly, smartphones and tablets. We're focusing on mobile here, because your business likely already has a website — but if that website isn't responsive, you're losing out on a growing segment of your ideal and actual clientele.
Today, mobile now accounts for 25 percent of all Web usage, up from 14 percent in 2013, and 4 out of 5 consumers use a smartphone for shopping. In 2013, tablet shipments increased by 52 percent — a faster one-year growth rate than PCs ever recorded. And this year, Americans are spending more time each day looking at a smartphone screen than a television screen (151 minutes to 147 minutes) or a traditional computer (103 minutes).
This is where the growth in the Internet now is taking place — and where it will continue to take place. People are going mobile, fast.
But you want your business to be not just available on tablets and smartphones, but be optimized for them. By understanding how the smaller screen differs from the computer screen, and how you need to adapt your company's web look accordingly, you can create a great experience for your visitors.
Here are some tips:
#1: Keep Bandwidth in Mind
People are hard-pressed to find a cell phone plan that gives them truly unlimited data. We're used to having unbridled access to our favorite sites on our computers. However, the mobile market has grown so rapidly that networks haven’t been able to keep up, frantically building more cell towers — and faster ones — in an attempt to meet demand. In the meantime, network companies control demand by limiting how much data each user can consume per month to handle the traffic.
“But,” you're likely asking, “how does this affect my site?”
Every page request, every image the site has to load, and every like of a friend’s Facebook post about Justin Bieber, takes up bandwidth. If users aren’t connected to the Internet through Wi-Fi, they’re using their precious data.
Here are some ways you or your developer can both lower bandwidth and serve your web pages faster:
- Optimize the content: Images should not be enormous. Optimize them for the web (72x72px).
- Consolidate your style sheets and scripts: Greatly reduce file size and the number of server requests by minimizing the style sheets and scripts, and placing all of the style sheets in one file, and all the scripts in another.
- Serve clients only what's necessary: Cover the basics of your company, not the whole shebang.
If used correctly, server-side detection allows you to determine from the server what browser users have — whether mobile or not — and serve them files best suited for that browser. Desktop users don’t really worry about getting unused code because those browsers are powerful and aren’t — usually — tied to a limiting network.
If your site is set up to detect a mobile user, it could serve images in sizes best matched to a small screen, and give the client only the code and content actually needed for the site. This will save your clients data usage, load pages faster, and put less load on the browser — all of which means your website gets to the customer quickly. And download speed counts: bounce rates jump to 100 percent on pages that take longer than 4 seconds to download.
#2: Think Outside the Mouse
For decades, people have been interacting with their computers through a keyboard and a mouse or trackpad.
Now, on smartphones and tablets, users can simply touch the screen and — almost — directly interact with their content. Native mobile applications have paved the way for how users expect to be able to interact. Intuitive gestures have greatly improved the user experience.
#3: Preview Your Site on, Yes, a MOBILE Device
A mouse isn’t the only thing that differentiates a mobile device and a personal computer. Screen real estate, resolution, and even orientation are different.
I have yet to meet someone who actually designs on a tablet, or a phone, when doing mock-ups. Designs are made on 15”-plus landscape monitors, so they always look great. But no one has a 15” tablet or smartphone — so be sure your site looks and works as you want it to on the screen size your client will be viewing.
You want the design to have the right proportions, and also to get a feel for the size of the content.
#4: Get to the Point
When designing with a small screen in mind, you have much less room to display content to the user. Unlike your desktop homepage, you can’t just throw everything up at once. It’s important that you and your designer and developers understand this, and that you have a conversation about what content you want to prioritize in the mobile experience.
In some cases, having an enormous amount of content can lead to a decision to only show a truncated form of your site outside of desktop, with key content most prominently displayed. While these choices might be frustrating, they're also useful. Often, conversations on refining and minimizing what you absolutely need to show on small devices lead to smarter decisions about the presentation of your business across all devices. They help you to rethink some of the unnecessary, and distracting, flourishes that crowd even your desktop site.
Your business will benefit from your making more of less.
And it will benefit from being where customers today are browsing and buying — on mobile devices. In a 2013 study of 1,400 companies, 62 percent with websites designed for mobile reported increased sales. A number of those growing businesses are likely small businesses that made the move to mobile. Why not join them?
If you have questions about mobile design, call us at 214-937-9521 or go here to contact us today.
Posted by Harrison Okins
Harrison Okins is a California-based web designer/developer who spends his time creating beautiful and functional things. He also thoroughly enjoys laser tag and typography.