Mobile Website Design: 16 Examples and Best Practices

Mobile Website Design: 16 Examples and Best Practices

This post was last updated on December 22, 2021.

Crafting a great mobile experience is an important part of creating a website. With 57% of global internet traffic coming from mobile devices, providing the best possible web experience for smartphone users is an absolute must.

A well-designed mobile website can do more than just improve user experience. As part of Google’s mobile-first indexing, it can positively impact your site’s SEO and ranking performance on search results.

To help you create the best mobile version of your site, we’ve highlighted 16 mobile website design examples, all built on Wix, and explained some of the best mobile features and practices to keep in mind.

Top mobile website designs

01. S&W Beauty

Part of an extensive project by renowned designers Stefan Sagmeister and Jessica Walsh, this website is a celebration of beauty and the power it holds over us. The website lures visitors into a world of mesmerizing aesthetics, complete with information about the Beauty exhibition and book.

The beauty website employs a cohesive visual language throughout. Its dazzlingly ornate homepage design is filled with intricate patterns and details, which are balanced by the minimalistic black and white website color scheme. The project’s distinct design is apparent in every detail, down to the customized mobile menu, which features a bejeweled version of the hamburger icon.

Thanks to its responsive web design, it looks great on desktop as well as mobile.

S&W Beauty mobile website design

02. Jonathan Van Ness

American hairdresser, activist, author and TV personality most iconically known for his role on Netflix’s Queer Eye, Jonathan Van Ness is a force to be reckoned with. Van Ness, who also goes by his initials JVN, has a powerful online presence, with over 5 million Instagram followers and a smartly designed website.

Van Ness’s mobile website is an extension of his personal brand, and perfectly embodies his joie de vivre in terms of visual aspects and functionality. The mobile homepage is clear and uses a carousel banner to highlight all the important information on the site: tickets to performances, his New York Times best-selling book, podcast details and his newest project—a children’s book.

His site uses traditional web conventions for both clarity and usability by placing his hamburger menu on the right-hand side, so visitors instantly know where to click for more information. Each page has its own distinct message, visual language and clear CTA. What’s most impressive about this mobile website is that no matter where you click, Van Ness is always front and center. Whether it's photographs of him, bright color palettes or the tone of the copy, the overall experience of this website is infused with JVN.

Jonathan Van Ness mobile website design

03. In Print Art Book Fair

When it comes to mobile website design, real estate is limited. Since users are viewing your site on a much smaller scale, you’ve got to be strategic with what you showcase in the first fold. In Print Art Book Fair’s mobile website instantly captivates visitors with a video that highlights the artistic event. The video not only sets the tone by showcasing the vibe of the fair, but it quickly lets visitors know what the event is all about.

By incorporating this video, users get a sample of the Jerusalem-based art book fair and don’t need to spend extra time scrolling or researching to understand what it's all about. Once users get a feel, there is a clear CTA—Submit Your Application—that is simple and direct. The date of the event and the deadline for submissions is clear and predominant, and also laid out in multiple languages, localizing the mobile website content and making it more accessible to all visitors.

In Print Art Book Fair also meticulously uses their spacing to highlight their social bar, FAQ and a Contact Us section, making for an easy and efficient user experience.

In Print Art Book Fair mobile website design

04. Puffin Packaging

Eco-friendly packaging company, Puffin Packaging, has a clear mission to share: temperature insulated packaging should be efficient, affordable and most importantly, sustainable. Both their desktop and mobile website design are on-point with their tone, messaging and visual identity. It is clear what they offer and what they want you to understand from their service.

Their main CTA in the first fold leads users to click How it works, which explains what they do and how they do it before visitors can move forward. Their second CTA is a Contact us button, an intentional and actionable step for users. Strategically, Puffin Packaging doesn’t put their contact information in the bottom fold. Instead, they’ve changed their site hierarchy to be more driven and direct.

Their content-rich site is informative, with their eco-friendly brand values clearly explained and relevant imagery to support their message. They use a variety of examples and accurately showcase their products and their brand persona at every click.

Puffin Packaging mobile website

05. Sharon Radisch

NYC and Paris-based photographer, art director and artist, Sharon Radisch, breaks all the mobile website design conventions—but in a strategic and stylized way. Radisch moved her header and navigation menu to the middle of the screen in order to guide visitors’ eyes directly to the images. Her slight adjustment to the hierarchy is smart and does not disrupt the user experience—it actually enhances it.

Radisch uses an elegantly understated composition highlighting the best of her collection, which allows the visuals to speak for themselves. She cleverly creates a muted aesthetic by incorporating black and white motifs paired with neutral tones. Using minimal text, she’s found a smart and fun way to showcase her work and give it the respect it deserves.

Sharon Radisch mobile website

06. Yang’s Place

This Chinese restaurant website is fully branded with a prominent logo design on the top fold, which also leads back to the homepage when clicked. Linking your logo to the homepage is an important website navigation practice. This feature becomes even more vital on mobile devices, as it can drastically improve user experience.

This family-owned and operated restaurant boasts highly photogenic dishes of hand-made dumplings, paired with delicate hand-drawn vector art. By emphasizing their attention to detail, Yang’s Place conveys a boutique-like quality. Their placement of the Menu and Order Online buttons lead visitors directly to the heart of Yang’s Place—their food. We’re salivating just looking at their dishes.

Yang's Place mobile website

07. Alon Peres

Tel Aviv based design student and photographer Alon Peres’s portfolio website is a perfect representation of his work and creative mantra: discovering new design cultures. As he explains in his About page, “My first interaction with design was when reading the newspaper at my parent’s house, as I always found something to look at and examined each page down to the smallest detail”.

Peres’s black and white color palette pays homage to the newspaper aesthetic, and he clearly pays attention to the small details. He uses “scrollytelling” to make navigation effortless by providing several ways to browse the site. You can use the hamburger menu at the top, click on one of the geometric call-to-action buttons throughout the website, or click on his projects which conveniently pop up using parallax scrolling. There’s also an option to hit the Back to Top button on each page.

Peres successfully maintains his brand identity throughout the user experience, both on desktop and mobile.

Alon Peres mobile website design example

08. Balloon Movie

Adorned with multiple award badges, this mobile website design keeps fans up-to-date with this short movie. Site visitors can stay informed of its upcoming screenings with the integrated Wix Events app and read up on the latest news on the site’s blog. There are also links to relevant social media channels, including the movie’s IMDB page.

In addition, the website features the film’s trailer, which is embedded into the page using Video Box. As users scroll down the page, a short snippet of the trailer plays automatically, inviting them to press the Play button.

Balloon Movie mobile website design

09. Sophie Brittain

Graphic designer Sophie Brittain welcomes visitors to her site with a top fold that’s just as playful as it is minimal. With a white background and very little imagery, she allows a concise introductory sentence to take up the majority of the space.

Sophie’s unique use of microcopy is also evident in the website’s footer, as she opts for clever wording choices in place of icons for her social media links. She labels her Instagram account as “Me, taking pictures,” and her email shows up under “You, writing a fan letter.”

Sophie Brittain mobile website

10. Atelier / Blanc

Wedding planner and stylist Romain Deligny’s mobile web design is full of earthy tones, exquisite font pairings and immaculate photography. While the desktop version of this site’s navigation menu is a classic horizontal list at the top of the page, this feature is summed up into the much smaller hamburger menu on mobile. When clicked, it opens up into a fullscreen menu that’s easier to both read and click on small devices.

A carousel banner in the top fold of the mobile website showcases ethereal snapshots of weddings and creates a luxe feel—setting the tone for Deligny’s style and brand.

Atelier/Blanc mobile design

11. Hollie Fuller

British illustrator and maker Hollie Fuller puts the Wix Pro Gallery to good use on her illustration portfolio, showcasing her various projects in a neat and mobile-optimized layout. Each of the illustrations on the homepage leads to an inner project page, where additional pieces and a brief textual description of her work can be found.

On her About page, Hollie adds a picture of herself alongside listings of past media features and clients she’s worked with. Introducing the real-life person behind the work is a good practice for building a personal brand and enhancing your credibility and relatability.

Hollie Fuller mobile design

12. Noni Ceramica

Operating from Brazil, this family-owned eCommerce website shows off its ceramic dishes using subtle header scrolling effects, adding a sense of depth to the homepage. A prominent CTA button leads visitors to their online store, where shoppers can scroll through product photography shots of the dishes in both a neutral studio environment and put to use with delicious-looking foods.

The brand’s logo design is geometric and typographic, in line with current logo trends. The logo is proudly displayed on the top fold of this mobile website’s homepage. In the inner pages, it appears at the bottom of the page, linking back to the homepage for ease of navigation.

Noni Ceramica mobile website

13. Michelle Carlos

South African visual artist Michelle Carlos’ mobile website launches into an astound