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 inspiration 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.
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.
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.
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.
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 website navigation to the center, with a central menu 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.
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.
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.
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.
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.”
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.
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.
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.
13. Michelle Carlos
South African visual artist Michelle Carlos’ mobile website launches into an astounding splash page: her hand-painted work fills the screen, with her logo and expertise placed on top of it. This page helps set the tone for the rest of the website, cueing visitors in on the type of content they can expect to find inside.
On top of showcasing her illustrations, designs and paintings, Michelle has also used her website to create a blog. Here, she shares anything from Photoshop tips to recipes accompanied by her artwork. Her blog logo is the same as her website logo, helping this art and design portfolio maintain a unified look.
Carlos also adds a unique feature to her online shop: a place for free downloadable color sheets. She instructs users to use them only for their “own creative me-time,” and encourages them to use a hashtag to tag her on Instagram—a creative and meaningful way to build a community and strengthen her online presence.
14. Brown Owl Collective
This British web design company’s graphic design portfolio has very little text on its homepage. With just a succinct mission statement, “Brave by design, tangible in results,” and a CTA button calling visitors to explore their works, the page is filled almost entirely with images.
Using gallery hover effects, the name of each project only shows up once the image is clicked. This minimizes the number of elements on screen, while still conveying all of the relevant information from the get-go.
15. Piergiorgio Del Ben
This portfolio website launches with a bold welcome screen to greet visitors and instantly get to know the artist. Del Ben uses a high-quality image file that fits the format perfectly, showcasing the textured brush strokes and delicate details of his work. He almost creates an illusion of an art exhibition hanging in a gallery (impressively, all within a mobile screen).
With a simple, clear menu that helps visitors navigate to his artist statement, his works, news publications and contact information, this mobile website has a very focused intent: to showcase the artist and his craft. Del Ben also makes use of his social media links directly on the homepage, creating another gateway to display his pieces.
16. Studio 19
For a business committed to movement, Studio 19's mobile website perfectly captures the feeling of fluidity—the essence of the dance studio located in the UK. Users are greeted in the first fold with videos highlighting different dance techniques, everything from ballet and tap, to musical theater and hip hop. The mobile website design includes a lot of motion, both in the video reel and the animated logo, to captivate visitors and feel the energy.
With a straightforward CTA to Book a free trial, Studio 19 makes it easy for visitors to sign up. They go one step further and include a clear calendar of their upcoming class schedule to encourage sign-ups and keep the momentum going.
Best mobile web design practices
There’s more to mobile web design than just a shrunken-down version of your desktop site. In fact, many suggest that mobile-first design is actually more important than the desktop version, especially since more people are accessing the internet only from their mobile devices. According to InVision, “Designing and prototyping your websites for mobile devices first helps you ensure that your users’ experience is seamless on any device.”
If you’re building your site on Wix, you can rest assured that all the website templates come with an adaption for making your website mobile. In addition, your site will automatically be converted into a mobile-friendly view with optimized font sizes, images, and more. Considering the responsive vs adaptive design debate, this is generally the best option for beginners.
The following practices can help you make your website mobile:
Optimize mobile-first indexing
Since the implementation of Google’s mobile-first index back in 2015, a website’s search result ranking is primarily determined based on its mobile version. As a result, improving your website’s mobile version—in terms of performance, design and page loading time—has become a paramount SEO practice. You can read more on Google’s mobile-first indexing best practices.
Minimize page elements
Due to the limited amount of space on mobile screens, not all of the text and visual content on your desktop design should find their way into the mobile version. Hide page elements in order to remove anything that isn’t absolutely necessary and directly contributes to your message.
Utilize CTAs
Without the luxury of a mouse and a keyboard, mobile navigation is performed with our fingertips. This requires navigation to be extremely prominent and always within reach. Your call-to-actions and other buttons should stand out, be easy to click and strategically placed.
Use a "Back to Top" button
Allow site visitors to instantly scroll back to the top of your page with a Back to Top button, which can also be fully customized.
Link the logo back to the homepage
This important navigation practice lets site visitors get back to your homepage with a click at any point while browsing your site.
Scale down the menu
Even if your desktop website has a classic, longer navigation menu, make sure to go for a mobile menu on smaller devices. A good way to go is the hamburger menu. This is an icon made up of three horizontal lines that opens up into a menu when clicked. Another idea to consider is a Quick Action Bar, making the most important actions clearly accessible.
Take advantage of mobile features
The use of unique mobile design features can help boost your mobile site and give your visitors a smoother experience. Some ideas include: a branded welcome screen to greet visitors to a professional welcome, mobile website animations to liven up your site and a customized mobile menu for a fully cohesive design. You can also make use of beautiful gallery layouts, scrolling effects and the Branded App by Wix to streamline your mobile experience for your users.