Top 7 tips for mobile-friendly website design - 99designs (2022)

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.

Top 7 tips for mobile-friendly website design - 99designs (1)

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

  1. Use the mobile-first approach
  2. Use recommended size dimensions for mobile
  3. Optimize for portrait mode
  4. Minimize the menu
  5. Collapse secondary content
  6. Limit form fields and text input
  7. Mobile-friendly means thumb-friendly

Tip 1: Use the mobile-first approach

With mobile website browsing having just about 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 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.

Top 7 tips for mobile-friendly website design - 99designs (2)

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.

(Video) 99designs Review: Watch me get a new logo!

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.

Top 7 tips for mobile-friendly website design - 99designs (3)

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.

Top 7 tips for mobile-friendly website design - 99designs (4)

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.

(Video) I Hosted a Design Contest on 99designs... 👀 Honest 99designs Review

Top 7 tips for mobile-friendly website design - 99designs (5)

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.

Top 7 tips for mobile-friendly website design - 99designs (6)

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.

Top 7 tips for mobile-friendly website design - 99designs (7)

For the style of the actual menu, a common approach is the slide out sidebar which 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 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.

(Video) How To Make Money With 99Designs For Beginners (2022)

Top 7 tips for mobile-friendly website design - 99designs (8)

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 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.

Top 7 tips for mobile-friendly website design - 99designs (9)

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.

Top 7 tips for mobile-friendly website design - 99designs (10)

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.

Top 7 tips for mobile-friendly website design - 99designs (11)

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.

(Video) Duda & 99 designs - 7 Coversion-Killing Mistakes Designers Need to Avoid - Webinar Replay

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.

Top 7 tips for mobile-friendly website design - 99designs (12)

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.

Top 7 tips for mobile-friendly website design - 99designs (13)

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 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.

Need a mobile-friendly website designed for your business?
Our global community of professional designers can do that.

Get a design!

(Video) Ben & Jerry's Website Analysis

FAQs

How do you make a website mobile friendly which type of design will you use? ›

Responsive web design means that the page uses the same URL and the same code whether the user is on a desktop computer, tablet, or mobile phone – only the display adjusts or responds according to the screen size. Google recommends using responsive web design over other design patterns.

What is the difference between mobile friendly and mobile optimized? ›

Unlike the mobile-friendly approach to your website, a mobile-optimized website is designed for smaller screens and built using a mobile-first approach that will reformat itself for mobile users. All mobile-optimized sites are made to make the website as frictionless as possible for mobile users.

What makes a website mobile-friendly? ›

Mobile-Friendly Design

A mobile-friendly website is one that is designed to work the exact same way across devices. This means that nothing changes or is unusable on a computer or mobile device. Features like navigation drop-downs are limited, as they can be difficult to use on mobile. And no Flash animation is used.

Why is it important to have a mobile-friendly website? ›

Mobile-friendly websites boost your sales and conversions because there is an ease of accessibility that surrounds this website design. Knowing that a website is mobile-friendly allows users to interact and engage with your brand across devices, without being annoyed or inconvenienced.

How do I make content more mobile-friendly? ›

Let's get started.
  1. Understanding how people read on a mobile device.
  2. Go for the bite, snack, and meal approach.
  3. Chunk content for easy reading.
  4. Write short titles to make them more mobile friendly.
  5. Go for short, snappy paragraphs.
  6. Use small words.
  7. Replace wordy phrases with simple words.
  8. Use images.

Does mobile-friendly affect SEO? ›

Mobile friendliness does matter for SEO. In fact, it's a ranking signal in both Google and Bing's algorithms when it detects a user is searching on a mobile device. Websites that are mobile friendly, in general, will outrank non-mobile friendly sites in mobile search results.

What is mobile optimization? ›

Mobile optimization refers to the strategic approach of updating your website to deliver an ideal and engaging experience to users who are visiting the site from their mobile device. Truly optimized content offers amazing experiences across channels – including both desktop and mobile devices.

How can I create a mobile website? ›

How To Create A Website From Your Mobile Phone - YouTube

What is mobile-friendly page? ›

The Mobile-Friendly test is easy to use: simply type in the full URL of the web page that you want to test. The test typically takes less than a minute to run. Test results include a screenshot of how the page looks to Google on a mobile device, as well as a list of any mobile usability problems that it finds.

What is mobile-friendly content? ›

Mobile Friendly is People Friendly

Give them responsive video content that makes sense even if their headphones are off. Make sure your images look great, display properly, and load quickly. And make sure your text is snackable, navigable, and skimmable.

What are the seven 7 parts of a website? ›

What are the different sections of a website?
  • Website Header.
  • Navigation (Navigation Bar or Main Menu)
  • Feature Image (Hero Image Headline Image)
  • Website Content.
  • Sidebar on a web page.
  • Slider.
  • Footer.

What are the 5 elements to a good website design? ›

5 Basic Elements of Web Design
  • 1) Content.
  • 2) Usability.
  • 3) Aesthetics.
  • 4) Visibility.
  • 5) Interaction.
20 Feb 2019

What are the 7 key elements of design? ›

So these were the seven basic elements of design – form, shape, line, color, texture, typography, and space. These various elements can make your piece successful when used right.

What are the 7 stages of design? ›

Seven Stages of Design Thinking; An Essential Tool for Customer Experience Manager
  • Stage 1: Understand the Customer. ...
  • Stage 2: Definition. ...
  • Stage 3: Research. ...
  • Stage 4: Ideation. ...
  • Stage 5: Prototype. ...
  • Stage 6: Select and Implement. ...
  • Stage 7: Learn.
29 Apr 2016

What are 10 elements of a good Web page? ›

The Top 10 Most Important Elements of A Website Design
  • 1 Navigation. The website design should be easy to navigate and the menu items should easily accessible from any page. ...
  • 2 Visual Design. ...
  • 3 Content. ...
  • 4 Web Friendly. ...
  • 5 Interaction. ...
  • 6 Information Accessibility. ...
  • 7 Intuitiveness. ...
  • 8 Branding.

How can I improve my mobile design? ›

Sure, why not.
  1. Use a task-based design. Design your mobile website and its structure with the user in mind — while not forgetting about mobile SEO. ...
  2. Add a clear menu and a search option. ...
  3. No dividers needed. ...
  4. Use short forms. ...
  5. Tone it down. ...
  6. Button hit areas. ...
  7. Don't use too many font sizes. ...
  8. Optimize for speed.
4 Nov 2020

What is mobile-friendly application? ›

Mobile friendly refers to a site that displays accurately between your desktop/laptop computer and a mobile device. Such as phones and tablets. Thus, we will need a minimum of scrolling and image sizing. Regardless of the device, you are using, our mobile developers make sure that your app functions in the right way.

What percentage of websites are mobile-friendly? ›

80% of the top-ranked websites are mobile-friendly. 61% of users will never return to a website that is not mobile-friendly.

Does Google prioritize mobile-friendly websites? ›

Since the majority of users now access Google Search with a mobile device, Google primarily crawls and indexes pages with the smartphone agent going forward. While it's not required to have a mobile version of your pages to have your content included in Google's Search results, it is very strongly recommended.

What is the best mobile site option for better mobile SEO? ›

Dynamic serving is definitely better for SEO than having an “M.” version of your site. But it has issues. For example, dynamic serving sites are notorious for showing desktop versions to mobile users. You also need to constantly create different versions of your content for new devices that come out.

How can I create a mobile website? ›

How To Create A Website From Your Mobile Phone - YouTube

What makes a website friendly? ›

Some of the most basic and proven usability tips include proper use of taglines, intuitive navigation, concise content, and strategic use of visuals. Avoid confusing features or functionality. Do links and buttons appear clickable, as they should?

What is mobile-friendly content? ›

Mobile Friendly is People Friendly

Give them responsive video content that makes sense even if their headphones are off. Make sure your images look great, display properly, and load quickly. And make sure your text is snackable, navigable, and skimmable.

What is mobile-friendly in SEO? ›

Mobile friendliness is the measure of how well a website is designed and optimized to load on a mobile device such as a smartphone or tablet.

What is mobile-friendly page? ›

The Mobile-Friendly test is easy to use: simply type in the full URL of the web page that you want to test. The test typically takes less than a minute to run. Test results include a screenshot of how the page looks to Google on a mobile device, as well as a list of any mobile usability problems that it finds.

What is the difference between a website and a mobile website? ›

A mobile website is basically your usual website (that people access via desktops) but the design is adapted so that the user can easily navigate the website using touch and all elements would be of adequate size on a smaller screen.

How can I create a free mobile website? ›

How to Create a Free Website with Mobile Phone (inc. WordPress ...

Can we do HTML in mobile? ›

In Android, we usually need HTML files for displaying the content in WebView. If the developer wants to add any website page or want to create a local webpage for the app then it could be done using HTML files. In this article, we are going to will show how to add a local HTML file in Android Studio.

What are the 5 essential features of a website? ›

  • 5 Essential Features in a Great Website. ...
  • Responsive website pages. ...
  • Page quality. ...
  • A picture is worth a thousand words. ...
  • A strong and visible call to action. ...
  • Ensuring easy navigation.

What are 5 things that make a website trustworthy? ›

These 13 tips help you build a trustworthy website
  • Make sure your website's design looks great. ...
  • Avoid spam, from both you and advertisers. ...
  • Include an About page to put a face to your site. ...
  • Clearly display your contact information. ...
  • Include a contact form so that you're easily reachable. ...
  • Add a blog and keep it up to date.
21 Jan 2022

What is user-friendly in design? ›

What qualifies a design to be user-friendly? Simply put, it needs to be effortless and intuitive. User interfaces have become a commonplace element of physical and virtual products and experiences. Good experience design seamlessly fulfills user needs and lets them accomplish business with ease.

Videos

1. How To Use 99designs Website | Full Tutorial in Hindi - Must Watch !!
(Tech Branded)
2. Top 5 Web Design Mistakes
(OCG Creative)
3. Phase 3 - Website Design Tips
(Computer Applications Technology)
4. 7 Places to list your website for local SEO Small Business Website Launch Plan -
(FeedbackWrench)
5. DesignBro Review (99designs Alternative): Watch Me Get A New Podcast Art Design
(Seth Williams)
6. Logo Design: 99Designs vs Fiverr (in 2022)
(Buyer Guides for Small Business)

Top Articles

You might also like

Latest Posts

Article information

Author: Kelle Weber

Last Updated: 11/25/2022

Views: 5962

Rating: 4.2 / 5 (73 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Kelle Weber

Birthday: 2000-08-05

Address: 6796 Juan Square, Markfort, MN 58988

Phone: +8215934114615

Job: Hospitality Director

Hobby: tabletop games, Foreign language learning, Leather crafting, Horseback riding, Swimming, Knapping, Handball

Introduction: My name is Kelle Weber, I am a magnificent, enchanting, fair, joyous, light, determined, joyous person who loves writing and wants to share my knowledge and understanding with you.