21 of the Best Examples of Cellular Website Design

Posted on Posted in Blog

Now as part of your, businesses are focusing on creating delightful mobile internet site experiences.

Google has been heavily favoring mobile-friendly websites since 2015 when it up-to-date its ranking formula, then started indexing mobile sites within March 2018, and has conducted mobile-first indexing since 2019. This is crucial, as there has been more search questions on mobile devices compared to on desktop for several years now.

Going forward, Google will only continue to raise the bar to get what it considers to be mobile-friendly (including page load time) in its protocol updates. So , in case you haven’t been focusing on improving your mobile encounter, you should start now or see your search ranking drop off. Click here to download a free, 5-part kit to help you grow your mobile audience.

To help inspire any mobile web site design changes you’ll be making, here’s a list of 21 companies who actually nailed their cellular web experience.

1 . Shutterfly

Why functions: Shutterfly’s mobile website is definitely navigable, highly visual, and intuitive for new visitors and skilled customers.

Shutterfly is an online service that allows users to create photo books, customized cards, stationery, along with other similar products. Since more and more people are taking photos and then accessing them using their smartphones, Shutterfly recognized the need to develop a great mobile experience for their customers.

Shutterfly accomplishes 2 key goals on the mobile website. Initial, it’s easy for customers to find out information about their offerings. Second, this information is complemented by beautiful imagery.

When you arrive for the mobile site, you will see Shutterfly’s latest advertising front and center as well as a finger-sized best navigation menu, none of which overpower the consumer experience.

mobile website design: shutterfly homepage

Scroll lower and you’ll see large buttons that make it easy for users to rapidly select which type associated with product they’re thinking about. Once users click on through to one of those choices, they’re greeted with large photos showcasing what Shutterfly is definitely capable of for easy browsing.

mobile-website-design-emobile website design: shutterfly product listingsxamples-shutterfly-2

2 . Google Maps

Precisely why it works: The mobile internet site for Google Maps provides the same functionality, pictures, and performance as the mobile app counterpart.

Everyone has a common map or instructions application. Mine will be Google Maps, which I use whether I’m walking, driving, biking, or taking public transportation. Can be special about its mobile website is that it’s virtually indistinguishable from their downloadable mobile app.

mobile website design: google map search result

These screenshots below are taken of the mobile website, in case you’re familiar at all with the app, you are going to notice they appear the identical. Not only is the appearance similar, but the mobile site has the speed plus functionality of the application.

mobile website design: google map place description page

3. Typeform

Why functions: Type form simplifies their particular mobile website to enhance load times and deliver a simpler consumer experience.

Typeform is a Barcelona-based technology company with one simple mission: to “make forms awesome. ” Their desktop site is beautifully designed, greeting visitors along with succinct copy, related animations, and other complicated design components.

But for mobile customers, Typeform recognized this complex design can significantly affect down load time, among other difficulties. That’s why they actually removed many of them, decluttering the site and simplifying the overall mobile experience. The mobile site is a easier version of the desktop website, and it’s nevertheless beautifully designed.

mobile website design: typeform homepage

Take note of the large buttons on their menu page — perfect for tapping together with your finger on a mobile screen.

mobile website design: typeform product description page

4. Etsy

Precisely why it works: This mobile site pushes its most important features — web site search, item classes, and trending products — on the home page while avoiding clutter.

Etsy is an ecommerce website where people can buy and sell vintage or hand crafted items. Most customers who visit Etsy’s website are there to do one of two things: Either she or he is searching for a specific item, or they’re searching items in classes that interest them.

The mobile website caters to both types of visitors through the very beginning. When you first visit their mobile internet site, you’re greeted with an option to search for specific items, shops, or even categories.

mobile website design: etsy homepage

Immediately below are thumbnail images of trending items that display some of the most popular things you can buy on Etsy. Mobile users may view these trending items in a collage format, and the images are large enough to easily tap with a finger.

mobile website design: etsy popular items homepage

five. Adrian Zumbrunnen

Why functions: Adrian Zumbrunnen takes a distinctive approach to the personal web site, creating an experience which is entirely tailored for mobile users.

This is the personal internet site of Adrian Zumbrunnen, a UX designer, writer, and speaker. When you visit his website, you’ll notice right away there’s something very unique about it: It’s a conversational website.

It almost looks like the text message conversation you’d normally have on your phone, including the ellipsis to exhibit he’s “typing. ” Users are given two response options at the end of every exchange, therefore it is akin to a “choose-your-own-adventure” experience.

As the mobile and desktop computer experiences are similar, the particular desktop website feels like it was made primarily for mobile — which could be the direction sites will go in the future.

mobile website design: personal website homepage

And if you’d prefer not to engage in the particular conversation-like exchange, you can just scroll down meant for details.

mobile website design: personal website contact page

6. Elf on the Shelf

Why it works: The particular Elf on the Shelf mobile site makes its wide selection of items visible from the get-go and uses psychological, highly visual item displays to earn visitors over.

Elf on the Rack is, relatively talking, a fairly new Christmas tradition based on the children’s book. For anyone who is unfamiliar, the basic premise is this: The book tells the story of Santa’s scout elves, who are sent simply by Santa to watch over children in their houses all over the world and report back to Santa.

Parents can purchase a good elf figurine, which they’ll subtly place somewhere in their house exactly where their kids can see this. Every night leading up to Christmas, parents move the particular elf to a different area around their house in order to “prove” that the scout elves are real and always looking over them.

Once you arrive on Elf on the Shelf’s site, you’ll see there are actually many products you can purchase. But instead of forcing users to scroll through each product individually, the web designers package each product right into a large, enticing floor tile describing the goal of every buyer’s journey, with all the featured item shown on the front.

You’re not buying your own elf or pup, you’re adopting it. It’s a really empowering experience upon such a small display screen.

mobile website design: elf on the shelf homepage

7. BuzzFeed

Why it works: BuzzFeed caters to its mobile users with a website that will directs them to their particular topics of interest.

BuzzFeed is known for its viral content and popular quizzes. It also happens to be one of my favorite sources of entertainment during my commute to and from function.

And where do you think I’m checking BuzzFeed during my commute? You guessed it: my phone. BuzzFeed knows that a lot of their particular visitors are visiting their site on mobile, so they already have taken great care to create a smooth experience for their on-the-go visitors.

When you arrive at BuzzFeed’s mobile site, the first thing you’ll see is usually some of their most popular pieces of content displayed within a simple, collage-like file format using large images that are easy to touch.

mobile website design: buzzfeed homepage

For users interested in specific categories, you will find a menu at the top of the particular screen that lists out all the posting categories. Each category has its own directory page with clickable filters along the best.

mobile website design: buzzfeed film and media page

8. Evernote

Why functions: Having a clear conversion route and clean style carried over through desktop, Evernote’s cellular site makes obvious what it does and exactly how you can join.

Evernote is an program that allows you to store notes, images, and web articles then access them throughout all your devices. Mainly because users tend to down load the app or even access the website upon multiple devices which includes desktop computers, mobile phones, and tablets, they have essential that Evernote gets the mobile encounter right.

In case you look at Evernote’s website on your desktop computer, likely to notice how thoroughly clean the design is. The worth statements are brief and to the point, and the graphics add to the brand’s positioning but can not clutter the web page.

mobile website design: evernote desktop homepage

When you look at Evernote’s mobile website, you can observe they’ve kept their particular color palette and general brand style entirely intact. The company’s cellular website is clean, simple, and doesn’t detract at all from the associated with the app. Evernote’s conversion path will be obvious from the focused call-to-action: “Sign on with free. ”

mobile website design: evernote mobile homepage

9. Pixelgrade

Why it works: Pixelgrade’s WordPress themes are mobile-friendly, minimal, and sleek. Specifically, the Stack theme is perfect for Wp portfolio websites.

Pixelgrade’s Pile concept allows you to properly showcase your services plus previous work and doesn’t sacrifice mobile design. The theme is optimized meant for mobile devices while providing on your content’s designed message and visual at the same time.

mobile website design: pixelgrade homepage

10. Huffington Post

Why it works: The well-known publication condenses the content to better fit mobile screen proportions and serve readers on the move.

The Huffington Post is really a news outlet that will reports everything from politics and current activities to entertainment plus technology. What makes their own mobile website exclusive is that they actually change their headlines somewhat for mobile customers so their articles is more easily scannable.

If you compare the desktop versus mobile websites, you will still notice that the mobile website has less words on the website. The headlines are usually shorter and much more digestible — perfect for somebody skimming or reading through on a small screen.

mobile website design: huffington post mobile homepage

There’s also a clickable menus in the top left-hand corner of the display listing out all the post categories.

mobile website design: huffington post mobile menu

11. Express

Why it works: Express cleverly utilizes images to produce a more realistic product viewing experience — users simply swipe to view products from different angles prior to committing to a buy.

Express is a clothing store that caters to young men plus women. Because their particular audience often concerns their website to browse clothing, it’s important for their web site to include big, clear images of their clothes — especially on mobile devices, when users will need to tap products on the screen with their fingers to click through for purchase info.

Express takes its mobile experience a step further than most on the internet retail sites. If you slide your little finger from left to right across an image showing a piece of clothes, the image will change so you can see the clothing in the different view. In other words, users don’t have to download another page to find out multiple pictures of the same article of clothes.

Look at the picture on the top right in the following two images to see how it changes when you swipe to one side:

mobile website design: express homepage

mobile website design: express homepage with alternate featured image

12. Countrywide Insurance

Why it works: This cellular site serves 2 different types of clientele plus divides its cellular website accordingly. Regardless of whether you’re an individual or perhaps a customer, it’s apparent where you should go.

Nationwide Insurance offers insurance and financial services. You might think a financial corporation would have a complicated website, but on mobile, Nationwide Insurance fingernails the simple user experience.

When you show up on Nationwide’s cellular site, you’ll see 2 tabs at the top enabling you to identify as one of 2 types of users right away to customize your own experience: Personal or Business. Or, on the other hand, you can “Find a good Agent” or “Find a financial advisor” for more information information about their services.

Although restricting the experience to these 2 options excludes Nationwide’s more in-depth features, it makes for a easier experience for visitors using small screens. This is a great way to lead potential customers within the right direction when they’re not however account-holders and are visiting the website for the first time.

mobile website design: nationwide homepage

thirteen. Squaredot

Why it works: This cellular site nails the color palette, font choices, and interactive components on the homepage. That it is simple, engaging, and playful.

Squaredot is an agency located in Dublin, Ireland in order to marketers build out there their inbound advertising strategies. Their cellular website is colorful, simple, and makes for easy navigating.

What sticks out in my experience most is the visually pleasing color combos as well as the large clickable menu that grows to reveal each one of the organization’s services.

mobile website design: squaredot homepage

Farther down the page, there are entirely swipeable regions. One pictured below provides client success stories plus adds another dimension to the mobile web site.

mobile website design: squaredot customer stories page

14. Zappos

Why it works: The particular Zappos mobile site is very easily searchable, which is critical given its huge supply. The latest offerings are usually clear on first page load.

Zappos is an online vendor for shoes and clothing known for its stellar customer service. Their particular top priority on cellular is to help users search easily for the items they’re looking for on their website, therefore they’ve put a big search bar in both the top and bottom of their mobile website to make it quite simple for them.

This is exactly what the top of their cellular site looks like:

mobile website design: zappos homepage

15. ABC

Why it works: This mobile site’s dark concept is a contrast to numerous other popular mobile sites, bringing a theater-like feel towards the experience. The highly navigable pages help viewers find their content of choice or perhaps browse.

DASAR is a television broadcasting company known for popular shows like The Bachelorette , The Rookie , and General Hospital . Users visiting ABC’s desktop website are greeted with these options and more. View the network’s television schedule, read the most recent Emmy winners, watch some of your favorite television shows, or even take a look at entertainment news relating to those shows.

But because virtually every household today is really a multi-screen household, ABC knows its encounter on a mobile gadget should be both simple and ready for viewing.

When you visit the FONEM website on a mobile device, you’ll see the dark background for a theatre-like experience with ceramic tiles for each program you might like to stream. Users can scan through these types of options and click into any display they want based on style, alphabetical order, can be popular, and comparable categories you’d also find on your Video’s streaming platform.

mobile website design: abc homepage

16. Trim Labs

Why it works: Lean Labs utilizes fly-in animated graphics and distinct content material sections to tell a story as users scroll down.

Trim Labs is a advertising agency that generates engaging, responsive, and high-conversion web options. (They were furthermore featured on the strike TV series Shark Container. ) The folks right now there do a great job associated with providing a smooth experience for mobile users, especially with regard to their design techniques.

Notice how Low fat Labs’ mobile website uses scale, contrast, and typeface to distinguish certain elements of their page. It even incorporates fly-in animations for its images to enhance the scrolling experience.

mobile website design: lean labs homepage

17. SAP

Why functions: Despite its plethora of offerings, SAP dominates it in upon its mobile website and simplifies the CTAs and menus.

SAP is definitely an enterprise software company that manages company operations and client relations. The business improves its mobile encounter by condensing info and combining a selection of their calls-to-action into sliders, whereas their desktop website has these types of CTAs laid out flat.

mobile website design: sap homepage

This helps keep points simple so cellular users aren’t overcome with a lot of details at once, and it also ensures none of the CTAs are too small to learn.

18. KISSmetrics

Why it works: KISSmetrics uses colour to separate content areas from each other and also to create prominent CTAs that stick out, actually on smaller cellular screens.

KISSmetrics provides analytics software for businesses. On the homepage, there’s a lot of info explaining what the software program does along with a report.

But their cellular site is shown a little differently: On the mobile device, the info on their site is certainly shown in a list with alternative darkish and light modules. This makes it easy to get users to gloss over the page with out getting lost within text.

mobile website design: kissmetrics homepage

They’ve furthermore made the text and fields on their forms large and easy to see:

mobile website design: kissmetrics contact form

19. idig Marketing

Why it works: idig prioritizes availability on its site, presenting a sticky accessibility menu where users can adjust various display choices.

idig Marketing and advertising is a development plus communications provider. Their particular mobile website will be laid out similarly to their desktop website, yet I especially loved the readily available availability options menu within the right side from the screen.

mobile website design: idig marketing homepage

Tapping this particular blue icon reveals a menu where users can adapt settings like enhanced visuals.

mobile website design: accessibility menu

20. IndiaMART

The reason why it works: This company’s mobile website is both conveniently browsable plus searchable, depending on exactly what visitors are looking to carry out on the site. It displays trending items prominently as well.

IndiaMART is the largest online B2B marketplace within India, and its easy category-based mobile store makes it one of the best cellular websites we’ve ever seen in the e-commerce industry.

The company’s mobile homepage places the search club right at the top so that you can always retreat to a custom search in the event that browsing no longer suffices to find the item you’re looking for.

But , IndiaMART makes it easy to peruse its digital areas by sorting every item by product type, and then sub-types within every item type — a smart design move to encourage users to learn your site further. Under “Apparel & Garments, ” for example , you might have easily clickable ceramic tiles to check out more specific types of clothing, such as menswear, women’s dresses, and also suits, sarees, plus similar garb indigenous to India.

mobile website design: indiamart homepage

Beneath IndiaMART’s browsing tiles, the company has its own trending section specifically for merchandise people are paying most focus on — similar to the trending list of information on a social media platform. Each trending class has a mobile-friendly call-to-action button allowing customers to get price quotations for the product these people interested in.

mobile website design: indiamart product listing

21. Pipsnacks

Precisely why it works: Finally, the mobile website for Pipsnacks doesn’t sacrifice its visuals for smaller screens. Even on the smartphone, you’re immersed in the snack food company’s lighthearted branding.

To close out there our list, Pipsnacks brings the radiant colors and textures of their desktop site to the mobile display screen. Products are listed as large, clickable images that enable you to get to their respective item pages, and the cellular site is enhanced with minimal but effective animations that add to the experiences without hurting load period.

mobile website design: pipcorn homepage

Mobile Websites to Inspire Yours

These days, having a highly effective mobile website isn’t only a nice perk — it’s a necessity, a minimum of if you want to rank in search results and get found. If you neglect your mobile site, that may just put off half your audience.

Fortunately, today’s web site builders and platforms let anyone create a site that’s both desktop-ready and mobile-friendly. But , it’s the little details you add-on top that will make yours truly exceptional.

Want more information in order to optimize your business with a creative mobile web site design? Download the totally free kit on cellular marketing below.

Editor’s notice: This post was originally published in Oct 2018 and has been updated for comprehensiveness.

guide to mobile marketing

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *