Mobile Website Design: 15 Examples and Best Practices
/Crafting a great mobile experience is an important part of making a website. With mobile internet usage constantly on the rise, and our mobile devices accounting for 52% of global internet traffic, providing the best possible web experience for smartphone users is an absolute must.
A good mobile version can do more than just improve your website’s user experience. It can also have a positive impact on your site’s performance on search results, as part of Google’s mobile-first indexing (more on that below).
To help you in creating the best mobile version of your site, we’ve highlighted 15 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 all things beautiful and the power beauty holds over us. The website lures visitors into a world of mesmerizing aesthetics, complete with information about the Beauty exhibition and book, one of the best art and design books to buy as a gift.
The Beauty website employs a cohesive visual language throughout. Its dazzlingly ornate homepage design is filled with intricate patterns and details, which are balanced out by the minimalistic website color scheme of just black and white. The project’s distinct design is apparent in every detail, down to the customized mobile menu which features a bejewelled version of the hamburger icon.
02. Charcoal
Charcoal is an art publication dedicated to people of color. With its autumn-inspired color palette, this mobile website design is made up of a full-width strip layout, each strip containing either a photograph or text on a colored background.
To make navigation effortless, there are several ways to browse the site. You can use the hamburger menu at the top, click on one of the call-to-action buttons throughout the website, or hit the ‘Back to Top’ button which conveniently pops up as visitors start scrolling down the page.
03. Piboco
This multilingual website launches into an animated welcome screen to greet visitors while the page loads in the background. As the website for a children’s reading app, this animated introduction is more than fitting, perfectly in line with the animation in the app itself.
Similar website animations of googly-eyed geometric shapes can be seen on the ‘Collection’ page, reiterating the values of enjoyable and interactive storytime that lie behind Piboco’s brand identity.
Each book in Piboco’s collection is presented using a photo slideshow, which allows a sneak peek into the illustrated pages inside. Alongside the imagery is a brief textual description of the book to explain its main theme and storyline.
04. AutoFleet
AutoFleet’s mobile web design is rich in content, from animated vector art explaining their business solution, to a slideshow of the product’s capabilities. Throughout this very diverse content, the website retains a consistent use of brand colors, with their signature light blue and green as the primary colors, and two shades of pink as secondary ones.
The call-to-action button at the top fold of the website stands out in a captivating gradient design. Once clicked, it leads to a lightbox popup where visitors can express their interest in the product by filling out a quick online form.
05. SomiSomi
The restaurant website of this Korean dessert 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, as it can drastically improve user experience.
Boasting their highly photogenic ice cream served in a goldfish-shaped cone, Somi Somi has made sure to embed their Instagram feed on their website. Directly above the feed is their brand hashtag, so that sharing photos of their product becomes even easier.
06. 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 different 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.
07. 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 LinkedIn account as “Me, being a pro,” and her phone number shows up under “You, calling me maybe.”
08. Ed5M
This mobile website design starts off with a striking image alluding to the theme of math education. As visitors scroll down the page, the same image stays in place while the background gradually darkens, making the text clear and legible against the image. As we keep scrolling, more surprises await, such as a lightbulb that magically turns on as we reach a certain point on the page.
It’s interesting to note some of the ways in which this landing page’s mobile version differs from its desktop equivalent. For example, there’s a reduced amount of visuals on mobile, decluttering the page so that only the most important information is shared. One such difference is a pattern of several coins, which on mobile is cleared up in favor of a single coin visual.
09. 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.
Even the Instagram feed at the site’s footer has been scaled down, from a horizontal gallery of several images, to a single image slideshow that can be navigated using arrows.
10. 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.
11. 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 both in 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.
This nonprofit website introduces its ocean-saving work in bite-sized chunks, with buttons that reveal more in-depth information once clicked. Such use of collapsible elements is an important mobile web design practice, especially in pages that are rich in text. This technique allows the page to provide only the most relevant information first, and then open up to additional content once readers’ curiosity has already been piqued.
Another useful mobile design tip is to minimize the number of elements on the page. Hiding elements in mobile helps the website retain an uncluttered look. The Ocean Data Alliance website has made sure to display only the most crucial content on mobile, omitting details like the names of the cities shown in each of their maps. This decision helps point readers’ decreasing attention spans in the direction of the most essential information.
13. Michelle Carlos
South African 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.
14. Sunny
The sunflowers on this slow-movement brand’s mobile site are bursting with color and light. Sunny’s homepage design is perfectly in line with current web design trends, featuring a large photo paired with their brand logo.
The logo is situated at the website’s header alongside a hamburger menu. Once visitors begin to scroll down the page, the header starts to fade out until it disappears from view, allowing greater content legibility. Upon scrolling back up, however, the header readily reappears for quick and easy navigation. This ‘Fade out’ feature is one out of four different header scroll settings available on mobile.
This British web design company’s graphic design portfolio has very little text on page. With just a succinct mission statement 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.
Best mobile web design practices
There’s more to mobile web design than just a shrunken-down version of your desktop site. A good mobile website requires some adjustment to be made, resulting in an clean, to-the-point design, which will improve your user experience.
If you’re building your site on Wix, you can rest assured that all the website templates come with a fully optimized, built-in mobile version. In addition, your site will automatically be converted into a mobile-friendly view with optimized font sizes, images, and more.
The following practices can help you take your mobile website optimization even further:
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 tip.
Minimize page elements: Due to the limited amount of real estate on mobile screens, not all of the texts and visuals 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 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.
This article and cited credit goes to:
https://www.wix.com/blog/2020/02/mobile-website/