A mobile-friendly website design is one that prioritizes the mobile browsing experience rather than treating it like an afterthought to the desktop version.
This approach has become extremely important in the last decade. According to
research by Statista, just over half of all website traffic now occurs on a mobile device and that includes roughly
45% of all online shopping. Considering that smartphones have only been around the last ten years, these numbers are only expected to go up as mobile website browsing becomes even more ingrained and the designs more intuitive.
This is why websites that fail to make a sincere, strategic effort to deliver a quality mobile experience risk falling drastically behind their competitors. In order to help you keep up, we’ve put together this guide to some of the most common tips and tricks to designing the friendliest of mobile-friendly websites.
Top 7 mobile-friendly website design tips
- Use the mobile-first approach
- Use recommended size dimensions for mobile
- Optimize for portrait mode
- Minimize the menu
- Collapse secondary content
- Limit form fields and text input
- Mobile-friendly means thumb-friendly
Tip 1: Use the mobile-first approach
With mobile website browsing having just about the surpassed desktop, designers have had to move away from considering the desktop site the “main” version. This is why the mobile-first approach—designing the mobile website before the desktop version—has been a commonly held best practice for years now.
By centering the artistic direction around the mobile-friendly experience, designers are encouraged to reign in design decisions by virtue of the limitations. Not only are there size constraints, mobile users often interact with a single hand and input beyond tapping and swiping tends to be more cumbersome than it would be on a desktop. Consider for example hover animations which rely on mouse input: if your desktop version relies too heavily on this kind of visual feedback, it will become a problem for mobile later.
As a result, mobile-first design tends to emphasize simplicity and ease of use right from the beginning. Keep in mind this approach does not doom desktop versions to minimalist sparsity. On the contrary, it is easier to expand on a simple layout than to simplify a complex one.
It is also important to test out your multimedia on mobile first as photos or videos made for a landscape orientation may not work well for portrait. Fine details such as facial expressions or background elements can be harder to read as clearly at small sizes. Additionally, there is often only space for one image at a time, and if you design an image-heavy desktop website first, scrolling through each on mobile may become redundant.
Tip 2: Use recommended size dimensions for mobile
On a handheld device, space can feel more limited than in any other design context. But taking size constraints into consideration at the start of your project is the best way to avoid conflicts later on.
Mobile screen resolutions will vary by device, but as of right now the most commonly used is 360×640 (aspect ratio 9:16) according to
research conducted by statcounter. Google Analytics can tell you which specific devices your users favor, and you should make sure your
website design is responsive enough to accommodate variations.
When it comes to
font size for mobile design, at least 16px is recommended for body copy. This can also vary depending on the typefaces used (based on their construction, some fonts will be less legible at 16px than others).
There is no standard size for headline fonts, but the goal is to establish a clear
typographical hierarchy through contrast in size, weight and style. But when in doubt, simply test the font sizes on a mobile device for yourself.
Images and other media can of course be as wide as the device will allow. Let the subject of the image dictate how large or small it should be in order to maintain clarity. Keep in mind that you do not have to fit the whole image but can zoom in on the subject and crop out extraneous background elements as in the example above.
Last but not least, button size is extremely important in mobile-friendly website design, given touch screens are much less reliable at picking up user input than a mouse and keyboard. A
study focusing on elderly users recommends touch screen buttons between 42 and 72px for optimal accessibility.
Tip 3: Optimize for portrait orientation
Although mobile websites can technically be used in landscape mode with the device turned on its side, portrait mode is overwhelmingly more common. The Blackberry popularized the two-handed mobile phone hold in the 2000s, but this has been thoroughly phased out in the rise of the smartphone, with users favoring a one-handed portrait mode.
The narrowness of portrait mode is perfect for
single column layouts. In this style, site elements are placed sequentially from top to bottom. Although a centered alignment for content tends to be common, alternating left and right justification can create visual interest and the illusion of a two-column layout. In addition, smaller elements like icons and photos can be presented in a grid, while image carousels can break up vertical scrolling with horizontal swiping.
Aside from finding creative ways of breaking up the single column layout, there are ways to use it to your advantage. Because social media apps have primed mobile users for long bouts of scrolling, website designers can spread content out with whitespace and padding. This keeps the content clean and readable while encouraging engagement through continued scrolling.
Consider the opposite: how content that is bunched up on a single screen with limited scrolling can come across as daunting to read.
Designing in sections is also useful for grouping similar information so that the user understands the general purpose of each section without having to read deeply. This is especially helpful when you consider that roughly
79% of page visitors only skim website content. Varying color backgrounds helps to differentiate these sections and creative section borders disrupts the boxy feeling these sections promote.
Tip 4: Minimize the menu
Navigation is another area that can quickly become complicated depending on the number of destinations and options a user is given. While desktop websites tend to have a full header navigation bar with multiple main menus and submenus, it has become standard to contain all of this within the simple, recognizable hamburger icon. As a result, most mobile website headers tend to be reduced to that icon and the logo.
For the style of the actual menu, a common approach is a slide-out sidebar that overlays a portion of the screen with the navigation options. This allows the menu to operate on a separate dimension from the rest of the page content while leaving room for the user to tap out of the menu and back to the previous screen.
Depending on how complex your menu is, each menu option may contain more nested options or a submenu. When the user clicks into one of these submenus, it is best to have the new list of options replace the existing menu in order to keep the list short.
Don’t forget to fix the navigation bar to the screen so that the user does not have to scroll all the way back to the top for it. A common practice for mobile-friendly is to hide the fixed navigation as the user scrolls down, giving the content its due focus, and to reveal the navigation when the user starts scrolling back up.
There are alternative means of navigation that are useful in place of or in addition to standard menus. Tabs allow the user to easily shuffle through other content sections without having to load an entirely new page.
Many UX designers these days are also exploring navigation solutions beyond tap-based input—horizontal and/or vertical swiping being the most common. When all else fails, the handy search icon is commonplace on mobile to allow the user to find specific things that they are looking for.
Tip 5: Collapse secondary content
Desktop websites often have room for in-depth body copy, product specs and other content. But as mobile-friendly sites require information to be to the point, designers must eliminate or shorten all non-essential content. This is where collapsible/expandable sections come in handy.
Collapsing content involves making explanatory information optional with an icon such as a triangle or plus sign that expands or reveals the hidden content. While hiding your content might sound like a bad thing, the gains of simplified browsing bolstered by persuasive headlines far outweigh the potential for missed information. The
micro-interaction of toggling is also yet another invitation for the user to interact with the page as opposed to passively reading.
Designers should reserve collapsing content for lower tier copy beneath the header. Repetitive content can be merged to overlap the same space rather than stacked on top of each other. In
Artyom Ost’s design pictured here, there are three customer quotes beneath the header on the desktop version, and in the mobile version the designer has collapsed them together into a carousel.
Extraneous content you should avoid altogether in mobile-friendly website design is
interstitials and popups. While these can be space-saving by overlaying content in a separate window, websites that a riddled with intrusive popups are not only frustrating to tap out of, they are also
penalized by Google.
Tip 6: Limit form fields and text input
Text input has to be one of the biggest obstacles to mobile accessibility. While a word here and there is no big deal, who hasn’t groaned when a mobile site demands an email address—forcing you to cycle through letters, capitals, punctuation and symbol menus with one hand? For that reason, you should minimize form fields as much as you possibly can.\
Auto-fill opportunities, such as divining most of an address from a postal code or providing pre-filled selections for common email suffixes, can take the pain out of some of these interactions. A user’s personal and login information can likewise be streamlined to a few clicks through integrations with other profile-based software such as Apple, Google or Facebook.
Third-party integrations with payment providers such as PayPal can also come in handy on purchasing pages for shopping websites, where fishing out credit card details can be onerous even on desktop. If this option is not available, you can also allow users to checkout quickly as guests and repeat their shipping information into their billing information.
Tip 7: Mobile-friendly means thumb-friendly
According to
research included in the Josh Clark book Designing for Touch, users interact with their thumb for at least 75% of all mobile interactions. This includes all scrolling, clicking, swiping and text entry, with the rest of the fingers busy supporting the back of the phone. Consider also that in many circumstances users browse their phone with their less dominant hand while doing other things. So it’s clear that designers must prioritize thumb-reach for all mobile interactions.
The thumb is the largest digit, which makes it imprecise. When creating buttons, designers should use the largest size for important interactions (see the previous section on sizing) because the touch screen will not register the input if parts of the thumb are falling outside of the button.
Just as important is the location of interactive elements on the page. Usually, a mobile device is held from the lower end with the thumb resting around the middle. In order to reach interactive elements at the top, the user would have to reposition their entire hand or use the fingers of their second hand. Studies show that the ideal interaction zone (which is shrinking the larger phones get) is around the lower middle area.
In recent years, many UX designers have led the charge in positioning navigation bars at the bottom of the screen rather than the top. While this grants easier thumb access, breaking design conventions users are accustomed to can also result in a poorer experience. Time will tell which position is the most ideal, but in the meantime, the best way to settle this for your own user base is to test both out.
Embrace mobile-friendly website design
From the way its global traffic continues to grow, mobile-friendly website browsing is clearly the way of the future. But when you consider all of the limitations design must face in comparison to desktop websites—the lack of space and user peripherals—it may seem like more of a burden than an opportunity. These challenges are not insurmountable but are also not to be taken lightly.
While the tips in this article will give you a baseline for practical solutions to mobile-friendly website design challenges, it takes a lot of care and practice to master them. In order to get a mobile website that is a help and not a hindrance to your users, consider connecting with a talented website designer.
Article Provided By
99 Designs
If you would like to discuss
Your Logo with
Mojoe.net or your website’s analytics, custom logo designs, social media, website, web application, need custom programming, or IT consultant, please do not hesitate to call us at 864-859-9848 or you can email us at
dwerne@mojoe.net.
Recent Comments