Responsive website design is all the rage. All the cool kids are doing it. This shift to accommodate all screen sizes is a good thing. It makes surfing the web on your smartphone or tablet much more accessible.
Savvy marketers want to do more than shrink a site to work decently on a smaller screen. They want to create a remarkable mobile experience.
Doing so means you need to understand context. Why are visitors viewing your website on their mobile device? What would improve their experience? How can you take advantage of things someone would only do via their smartphone?
We've compiled a handful of specific changes you can make to optimize for smaller screens. Most of these changes require a little CSS or HTML magic so if you aren't familiar, don't panic. It's helpful enough to know what's possible so you can hand the work to your friendly neighborhood website wizard. Some of these suggestions might be obvious to the more web savvy, but all of them can create a better experience for mobile visitors.
Dynamically change font sizes for optimal scanning
At first thought, this would seem like an obvious one, but surprisingly a lot of responsive designs don't dig in far enough to create an optimal reading experience for visitors. Remember, they are likely on the go and reading between other tasks. That means they are glancing back and forth between your content and whatever else they are doing (hopefully not driving!).
A good rule of thumb is whatever font size works out to 5 to 6 words per line. More words lead to small text that's hard to read with links that are hard to click with a finger. Text that's too large will require more scrolling, and that's not ideal either.
Use CSS media queries to adjust the default size for different screen sizes. Make sure that padding and margins aren't too wide on mobile to help it feel like it fits the screen. Scrolling through your content on mobile should feel much like flipping through the pages of a book. It takes a little trial and error to get it just right, but your readers will thank you for taking the extra time to find that happy medium between squinting and scrolling.
Refine content stacking order, so content comes first
Responsive designs are built on a grid that re-stacks components depending upon size screen. Most of the time, the stacking is from left to right. This functionality is fantastic in most cases. There are times, however, where the default stacking order doesn't make as much sense when it comes to mobile.
Take the case of the left sidebar. On a desktop, this could be anything from navigation, an author bio, or even helpful information about the main content. Since it sits to the left of the primary column of content, it's easily accessible and doesn't get in the way of reading the good stuff in the middle. The problem in a mobile view? In a left to right stacking order, that sidebar comes first.
Fortunately, this one is an easy fix. A little CSS magic and proper design planning can make sure that at a mobile screen size the primary content comes first and the sidebars come after. It only takes a few steps to get this done.
- Step 1: Build the template with the sidebar on the right even though you want it on the left.
- Step 2: Apply the class ‘sidebar’ to the sidebar <div> and ‘main-content’ to the body content <div>.
- Step 3: Use those two class hooks and media queries to reverse the float for desktop screen sizes and reset the float for smaller screens.
Keep your menus slim, trim, and out of the way
With plenty of space, desktop menus are often very helpful with flyout sub-menus that keep content organized over large sites with lots of pages. On mobile devices, of course, the experience is different. A menu should help visitors navigate the content of your website and not take up the entire screen. Replicating the whole desktop menu on smaller screens can push content out of view and make navigating sites confusing or frustrating.
There are a couple of ways to make the mobile experience smoother. One is to create a lean version of the main menu that includes only main areas of interest on your website. A complete set of links in the footer can help visitors navigate deeper at any time without getting in the way of principal content. The second and more popular way is to create a hamburger menu that expands and contracts as needed. Typically a hamburger menu is indicated by three horizontal lines. Tapping the lines expands or contracts the menu.
Optimize for touch-based, on-the-go interaction
Mobile users are on the go. Make sure that links can be easily tapped when a user is walking. We've all struggled to hit the right link in mobile pages where there isn't enough room for a finger tap between links. It's frustrating and drives visitors to seek help or services elsewhere.
Also remember that hover effects don't exist on mobile. Don't depend on them for usability. Visual cues like underlines or button changes don't occur on mobile. A tap equals a click in the world of small screens. Work to create designs that make clickable elements both easy to spot and intuitive to tap.
It's always helpful to ask why visitors might be viewing your website on a mobile device. What is there intent? Consider context. Are they trying to find your business? Are they trying to call you to seek out services or ask product related questions?
If you include a map or a phone number, make it a clickable button. Some simple HTML behind your button can instantly begin a call from your website using a telephone link via the 'href=tel' syntax. Instead of a normal link after the href, the tel prefix will automatically activate the user's phone app and give them the option of calling your number.
Likewise, a user seeking a map on your website may be lost or trying to find your location. There isn't a standard link for mapping like there is for making a call, but you can give users a choice. Create separate links to Google Maps for Android users and Apple Maps for those with an iPhone.
When optimizing your website for a great mobile experience, it’s all about why the mobile phone is in the equation in the first place. A little extra HTML and media queries in CSS make it easy to add elements in the mobile view that make small-screen browsing more manageable but don't interfere with the desktop experience at the same time.
Keep things compact and minimal for data networks
If there's one thing that drives mobile users crazy, it's websites that take forever to load. Not only is it a waste of time, smartphone users know long loading times mean larger files and those meaty files eat into monthly usage limits.
When designing the mobile views of your site stick to one hard and fast rule:
Keep things compact and minimal; otherwise known as fast and inexpensive.
In fact, the faster the load time, the better. Hide large background images on mobile with CSS media queries. Use a smaller image or a background color instead. Preventing your site from loading images that are content can be tricky, but background images or looping video should be swapped for something lighter for smaller screens.
Designing for mobile doesn't mean you have to sacrifice your design aesthetic or give up something vital to defining who you are. The key is finding a balance between quick and nimble load times and an equally rich user experience.
Keep context in mind when designing for mobile
People surfing the web on their smartphones are often doing so for very different reasons than those at home on a desktop or laptop.
If your website doesn't have a responsive layout in 2018, you should talk to your web team to bring your site into the modern age. Even if you've had responsive layouts running for several years, it never hurts to take a look and see if your site is optimized for those on the go.
In addition to a great mobile experience, you want to create a great brand experience everywhere customers interact with you. How do you do that? Set some basic guidelines on how the brand is used and presented. Download our FREE guide, Developing a Brand Guide, Basic Brand Elements that Every Healthcare Company Needs for a ton of tips on how to build a Brand Guide of your own!
