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

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) Logo Design: 99Designs vs Fiverr (in 2022)

FAQs

How do I make my website content mobile friendly? ›

How to make your website mobile-friendly:
  1. Choose a mobile-responsive theme or template.
  2. Strip back your content.
  3. Make images and CSS as light as possible.
  4. Avoid Flash.
  5. Change button size and placement.
  6. Space out your links.
  7. Use a large and readable font.
  8. Eliminate pop-ups.
Mar 23, 2022

What type of design should a website have to be mobile friendly? ›

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 makes good mobile website? ›

8 Design Tips from the Best Mobile Websites
  • Use Large Buttons. ...
  • Make the Text Large Enough to Read. ...
  • Simplify Menus. ...
  • Provide a Simple and Intuitive Search Feature. ...
  • Make it Easy to Get in Touch. ...
  • Create Simple Forms. ...
  • Create Eye-Catching Calls-to-Action. ...
  • Avoid Pop-Ups.
Feb 16, 2022

What is a mobile friendly website called? ›

Mobile-friendly sites aren't necessarily designed specifically for a mobile device. Rather, they're versions of sites that work across different devices. Think of a mobile-friendly site as mobile-optimized, whereas a responsive site is mobile-first.

How do I make my HTML mobile friendly? ›

This brings us to the first technique to make a website mobile-friendly.
  1. Implement a Responsive Layout.
  2. Optimize Website Speed.
  3. Subtle Pop-Up Implementation.
  4. Incorporate Viewport Meta tag.
  5. Declutter your Web Design.
  6. Always Test Website on Real Mobile Devices.
  7. Update Content Carefully.
Jul 21, 2022

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 size should I design my mobile website? ›

For mobile screen sizes, 360 and 375 widths are considered to be the perfect match. Thus, the content is well readable and convenient for users.

What is mobile website design? ›

Mobile web design is the process of optimizing web experience for mobile users. This process includes creating: Mobile-first design. Traditionally, websites have been optimized for desktop users, but as browsing habits have evolved, designers tend to follow a mobile-first approach in design.

How can I create a mobile website? ›

How To Create A Website From Your Mobile Phone - YouTube

Why does my website look bad on mobile? ›

Un-optimized Images

If the structure and text of your site looks fine on your smartphone, but your logo or images are blurry, there's a good chance that they haven't been optimized for mobile screens. Take the retina display on the iPhone 8 or iPhone X for example.

What is different about designing for the mobile web? ›

Yes, there is a real difference between designing for mobile apps and designing for website. We need to be aware of that and use the right process. For mobile, we focus on interaction design; for the websites, we focus on information architecture. To be fair, designing for both platforms have a lot in common.

What makes a website attractive? ›

A visually appealing website starts with solid design, and a conscious color scheme. The colors that you use resonate with different feelings, and can trigger different responses. When defining your brand, carry that over onto your website to create a holistic experience of you and your company.

What makes a successful website design? ›

An effective website design should fulfil its intended function by conveying its particular message whilst simultaneously engaging the visitor. Several factors such as consistency, colours, typography, imagery, simplicity, and functionality contribute to good website design.

What does a good website need? ›

7 Qualities of a Great Website
  • Well Designed and Functional. Your site reflects your company, your products, your services and ultimately your brand. ...
  • Easy to Use. ...
  • Optimized for Mobile. ...
  • Fresh, Quality Content. ...
  • Readily accessible contact and location. ...
  • Clear calls to action. ...
  • Optimized for Search and the Social Web.

How do I know if my website is mobile-friendly? ›

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.

How do you know if a website is mobile-friendly? ›

Here are 3 very quick methods to check the mobile-friendliness of a website.
  1. Use a Mobile-Friendly Test. ...
  2. Use your browser to check if a site is mobile-friendly. ...
  3. Use your mobile phone to check if a site if mobile-friendly. ...
  4. Use Chrome DevTools. ...
  5. Use Google PageSpeed Insights. ...
  6. Check Mobile Usability in Google Search Console.
Aug 19, 2022

What are the 6 basic tips for reading a webpage? ›

You can also use the following tips on almost any webpage to help you find what you're looking for.
  • Locate the main content. This is usually the most relevant part of the page. ...
  • Make sure you're on the right webpage. ...
  • Don't read every word. ...
  • Use headings to help you skim the page. ...
  • Ignore ads. ...
  • Use the Back button.

Why does my website look bad on mobile? ›

Un-optimized Images

If the structure and text of your site looks fine on your smartphone, but your logo or images are blurry, there's a good chance that they haven't been optimized for mobile screens. Take the retina display on the iPhone 8 or iPhone X for example.

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.

How do I make my WordPress website mobile friendly? ›

Here are three main ways you can make your WordPress website mobile-friendly: Run a mobile-specific theme when a device is detected. Turn your website into a web app on mobile, which is served when a device is detected. Use a responsive design that is optimized to behave well on all platforms regardless of device.

How do I optimize my website for mobile CSS? ›

8 Ways to Optimize Your Website for Mobile Devices
  1. Test Your Site Using Google's Mobile-Friendly Tool. ...
  2. Use Custom CSS to Make Your Website Responsive. ...
  3. Choose Responsive Themes and Plugins. ...
  4. Test Your Website's Core Web Vitals. ...
  5. Improve Your Site's Loading Times. ...
  6. Redesign Your Pop-ups for Mobile Devices.
Jun 28, 2022

Videos

1. Ben & Jerry's Website Analysis
(Katie Lathrop)
2. DesignBro Review (99designs Alternative): Watch Me Get A New Podcast Art Design
(Seth Williams)
3. How To Use 99designs Website | Full Tutorial in Hindi - Must Watch !!
(Tech Branded)
4. 7 Places to list your website for local SEO Small Business Website Launch Plan -
(FeedbackWrench)
5. UI in Web Design for Phones | UX Everything
(UX Everything)
6. Why Graphic Design on Fiverr, Upwork, 99Designs is NOT WORTH IT
(4 The Creatives)
Top Articles
Latest Posts
Article information

Author: Trent Wehner

Last Updated: 05/04/2023

Views: 6668

Rating: 4.6 / 5 (56 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Trent Wehner

Birthday: 1993-03-14

Address: 872 Kevin Squares, New Codyville, AK 01785-0416

Phone: +18698800304764

Job: Senior Farming Developer

Hobby: Paintball, Calligraphy, Hunting, Flying disc, Lapidary, Rafting, Inline skating

Introduction: My name is Trent Wehner, I am a talented, brainy, zealous, light, funny, gleaming, attractive person who loves writing and wants to share my knowledge and understanding with you.