This blog post explores 13 mobile friendly websites that work well. We are going to provide a nice introduction to each website, provide a brief overview of the desktop layout and then talk about the mobile layout.
Discussing the two different types of layouts allows comparisons to be made as well as easily identify and pros and cons between the two layouts (desktop and mobile).
The primary focus is on the mobile layout, of course.
Some sites we are exploring include EverNote, EasyJet, and CodePen.
Let’s get to it!
Unsplash is a website that focuses on stock photography. It has over 100,000 contributing photographers and over 9 billion photo impressions per month on their library of over 800,000 photos.
The primary use of Unsplash is for people to upload their photos and for users to download photos with ease.
The desktop layout has a well thought out menu. It has three rows and there are items that you can always see (the links related to all things photos) and a drop down menu with misc links such as about, blog, history, hiring and social media etc. Next, to the drop down menu are the standard call to action buttons.
The links that relate to all things photos are laid out on a horizontal scrolling nav.
Along with the navigation links, a search bar is placed to the side of these links making it easy to search for what you need rather than having to look through the links.
This keeps the focus on the links that relate to photos as the main focus.
The desktop layout has a standard three column layout for the photo gallery, but what is nice is the mosaic grid system for their photos.
The advantage of this type of layout means different sized images fall in nicely next to each other keeping the layout tidy, rather than the need to have all the same sized images.
The mobile layout has an intuitive menu that flows well from the desktop layout or vice versa. It has three rows, two of which do not scroll. The third row is what seems to work really well. This is where the links that focus on the images are located.
Instead of having the traditional vertical drop down menu or off canvas (sliding menu from right to left or left to right), it has a horizontal scrolling menu.
Now as far as mobile layouts go horizontal navigation is usually a big no, you do not want content hidden off the screen where users have to scroll horizontally not vertically.
But it works really well on Unsplash. Why is this? Well, there are a good few links and having vertical navigation means all the mobile screen space taken up.
Whereas having horizontal navigation means a minimal amount of screen space taken up (keeping the images visible whilst navigating). To make it clear to the user that you can, in fact, scroll horizontally, the far right links is half faded out.
It also starts scrolling with the movement of your fingers which is what is expected.
The three column mosaic grid system for the images that is used for the images goes down to a single column layout for mobile. Different sized images are displayed just like on the desktop.
As you scroll down the webpage the call to action buttons and horizontal scrolling menu hides maximising the vertical space on mobile as you scroll.
The image proportions are kept, the sizes of the images are not skimped out on. If they were reduced on mobile they could possibly be resized to be all the same size.
This means the primary focus is kept on the photos and not the menu, you also have the most optimal amount of screen space to view the photos on mobile thanks to the horizontal scrolling navigation.
The one thing that might not be obvious on first use of the website on mobile are the icons. You are presented with the home (obvious) and search (obvious) along with a stacked icon and a plus icon which may not be as obvious as to where they take you. You have to click on these to see where they take you.
Now for the individual photos themselves. On mobile you get to see the whole image that is clickable (takes you to the single page for the photo) along with a like button, add to collection button and a download button. All easily identifiable.
The primary focus of CodePen is for developers to show off their work.
CodePens desktop navigation is vertically placed to the left side of the webpage with a full width horizontal search bar at the top of the webpage – known as the top bar.
The main advantage of having vertical navigation means no horizontal scrolling for a larger amount of links and the ability for any drop down menus to not overlap onto the main content of the page.
Any drop down menus on vertical navigation simple move subsequent links down or overlaps them allowing you to see the main page content at all times.
The desktop layout is the standard three column layout as you’d expect. There are multiple sections to CodePens homepage, however.
There are picked pens, picked projects, picked posts and picked collections. These different sections are clearly identified with the use of subheadings.
The vertical menu that you see on desktop folds and collapses up into the topbar. You are then presented with a menu icon that opens up the same vertical menu to the left of the webpage.
The vertical menu stays the same, it’s just hidden on mobile. The search bar stays in the same place as on desktop.
The one thing to point out here though is that the mobile menu is not sticky. It does not stay visible as you scroll down the webpage, nor does it reveal as you start scrolling back up to the top of the page. You have to actually go to the top of the page to use the menu again.
But this works as if you are scrolling you will more than likely click through to a piece of work to view leaving the homepage. Plus the homepage is not too lengthy.
Now for the work listing items.
On mobile, you are presented with a preview of what the developer’s work is along with a title and author.
After this are three small dots that reveal a menu that contains links that let you add the work to your collections or pins and to follow the author.
As you click the menu a bottom bar is revealed below the metadata that lets you like, comment and watch the piece of work.
Next up is the “single” page where you can view the individual piece of work.
This page has a split view. The code view (lets you see the HTML, CSS and JS) and the visual view (the result).
This is the most optimal layout as it nicely splits the code from the result.
Grav CMS is an open source flat file content management system which means do database is required. It is easy to use (content editors, admins) and easy to develop on (for the developers). It simply has a shallow learning curve.
Grav’s website focuses on selling their product (even though it’s free). It provides content that will make you want to use their system over others. Well, that’s the idea simply put.
Grav CMS’s website has two horizontal menus. One that hides as you scroll and one that sticks to the top of the webpage as you scroll.
The menu that hides takes you to different pages of Grav’s website and the sticky menu scrolls you to different sections of the homepage.
There are also no drop down menus (sub menus). This makes navigation swift and simple.
The desktop grid system has a combination of a three column, two column and single column layouts for different sections.
This depends on the content of each section, this means an appropriate layout is used based on the content.
Two menus are still used on the mobile layout. The menu that takes you to different pages of Grav’s website folds up into a collapsible menu that opens up with the touch of a menu icon.
The menu that scrolls you to different sections of the homepage stays the same, however. It remains a horizontal menu like on desktop but with smaller text.
This can make it hard to click each individual link as they are quite small, but as you scroll down the page these links highlight letting you know which section you are on.
This makes it very obvious as to which section you are currently in and whereabouts you are on the webpage (the bottom, middle or top).
On top of making it obvious as to what section you are currently on, each section has a different background colour. This nicely separates each section from one another.
The layout of Grav’s website kind of surprisingly stays the same as on desktop, but it works. A mixture of three columns, two columns and single column are used.
If there is quite a bit of content to be displayed a single column layout is used along with a horizontal slider. This keeps the webpage from being too long vertically.
There are two negative points. First the slider content. Some of this content has a whopping 26 slides. This to us seems a little extensive and is not needed. You are not going to slide through 26 slides (unless you are conducting thorough research, which we like to do).
Secondly the footer. The footer looks very nice on desktop, but on mobile, you are presented with a tiny email address form along with a full width subscribe button, yuk. Also, there is a mixture of left aligned and centre aligned text.
It’s like the footer for mobile was an afterthought which is a real shame as the rest of the layout works really well and looks good. Better get their developer told!
There’s one thing we’d like to point out, the hero section. This has a nice floating particle effect (as if you’re floating in space) – check it out!
Just in case you don’t know EasyJet is a commercial airline company. That’s all that is needed to be said.
The primary focus of EasyJet’s website is to get people to use their aircraft and to book holidays.
For this, to work the interface needs to be simple, not complex. A booking system that works on both mobile and desktop needs to be well thought out. In the case of EasyJet’s website, it has.
We are going to focus on the navigation and booking system to keep things simple as the website is quite large. But be sure to check the rest out yourself!
The booking system on desktop is situated in a card with flights, hotels, cars and holidays. You can click on the from and to destination and as you click on these an off-canvas menu opens up with a list of destinations for you to choose from.
Choosing a date also opens up an off-canvas menu with a list of dates to choose from. Once you’ve filled in the required information you click show flights. This opens up a new tab with flights you can pick from.
This part of the booking system has the same layout on both desktop and mobile (not the flight page).
The desktop navigation is located in the top bar (at the top of the webpage) and is a large mega menu. As you mouse over the links you are presented with a large dropdown menu with many links that fill the screen.
Because the menu fils the full width of the screen it keeps things spacious. This makes it easy to see where you need to go. The links are also separated into three columns with relevant headings with the relevant links below.
The booking system has a two column layout when choosing flights for desktop along with a sidebar menu that is always visible showing you what you’ve booked and various other information.
The mobile menu is placed in an off-canvas menu that opens up with the touch of an icon. As we know EasyJet’s menu is large, it needs an intuitive layout on mobile.
There are a fair few sub menus. So instead of having a collapsing vertical sub menu (which would take up a lot of space) when you click on a link within the off-canvas menu, the sub menu is revealed as a sub slide out menu that opens up from the right (just like when you first open up the off-canvas menu). This is known as a drill-down menu.
So instead of sub menu items pushing other links down, another menu simply opens up on top of the menu you are currently viewing.
The booking system has a single column layout when choosing flights. Remember the sidebar menu we mentioned previously? Well, this folds up and you reveal this by clicking the basket icon in the top bar.
This works nicely and needs to be hidden until it needs to be revealed, this is because it takes up a lot of horizontal space on mobile.
Etsy is an ecommerce website that lets people sell their products and supports independent creators.
Etsy’s website is focused on selling so it needs to be effective at displaying products, product information and conversions.
Shopping websites can tend to get messy in terms of layout, this is because there is so much going on ranging from listing all products, categories, tags, featured products, sale and adverts for products and don’t forget the sidebar.
Etsy does a really good job of making the layout simple and effective.
For Etsy, we are going to view a category page as this has the standard shop layout with a sidebar. The homepage does not have the sidebar.
Let’s look at the Jewellery and Accessories shop page. Firstly you are greeted with categories under Jewellery and Accessories ranging from accessories, bags and purses, body jewellery, bracelets and earrings. Below this category section, you have the products that fall under the parent category jewellery and accessories.
This makes navigating the different products easier – because it is well categorised.
Now to the sidebar. Here you can refine the products that you want to see even further, you can filter out delivery time, colour, location, item type, price and various other options that make the experience intuitive.
The desktop navigation features a large search bar that has call-to-action links placed and basket to the right of it with the shop links placed on below (the second row).
The shop links that you see are general categories such as clothing and shoes, toys and entertainment.
The desktop layout has a standard three column layout for the sub categories and product listing with the sidebar visible at all times, making the layout a 4 column layout.
Once you reach the bottom of the product listing you are presented with numbered pagination and prev and next arrows.
This means you can skip right to the very last page so you can see what’s on that.
The mobile navigation is placed in an off-canvas menu that slides in from the bottom of the screen. When clicking links within the off-canvas menu, it utilises the drill-down menu like on EasyJet’s website.
There are three levels to this menu, if this wasn’t a drill down menu there would be three levels of vertical sub menus to navigation though taking up lots of vertical space.
Because there are three levels there’s a nice back button to go back a level if you don’t find what you’re looking for.
The search bar is visible and is placed next to the hamburger icon that opens up the off-canvas menu.
The one thing to point out is that there’s no sticky navigation, meaning you have to scroll to the top of the web page to get to the menu. The web page is quite long on Etsy’s shop page and there is no scroll to top button.
It can be tedious scrolling back to the top of the webpage just to get to the navigation again.
The mobile layout is slightly simpler than the desktop layout, it has no sidebar. Usually, on shopping sites the sidebar is collapsible. This is nice to have, but at the same time, it can make the website look cluttered on mobile.
Etsy’s mobile layout on the shop page is a two column layout with the sub categories listed at the top before the product listing.
These sub categories provide enough links to filter out what you need to look at on small screens and works really well.
Once you reach the bottom of the shop listing items you are presented with a simplified pagination – you just have the prev and next arrows and cannot skip to the last page.
One thing we’d like to point out is the footer. There are a fair few links that are always visible in a single column in the footer which makes it quite long.
The links here could benefit from being placed in a multi column layout or an accordion menu.
Webflow is a web based drag and drop website builder and content management system. This means you do not need to code to make a website with Webflow.
We are going to take a look at Webflow’s conference landing page rather than the main site, this is because we found a nice effect that works well on the mobile platform.
There are six primary sections to Webflow’s conference landing page each with their own quirks. We will talk about the interesting sections.
The hero section. On desktop, there are six individual images that have a cool floating effect that animates as you scroll
The benefits section. This section has four individual boxes with information in them and as you scroll the boxes collapse on top of each other instead of remaining static on the webpage, this is known as a parallax effect.
The featured speakers section. As you hover over the featured speaker images a smooth CSS clip path is used to distort the edges of the image whilst rotating at the same time.
The venue section. This section has a similar feature to the hero section, it has five individual images that have a floating effect as you scroll up and down the web page.
The partner section. This section has a long horizontal image that scrolls left to right or vice versa depending on where your mouse is on the screen.
Desktop and mobile layout
The navigation is quite simple on both desktop and mobile, the exception being the horizontal desktop menu folds up into a vertical drop down menu on mobile that opens up when the hamburger menu icon is pressed.
All of the mentioned quirks work the same on mobile as they do on desktop, the only difference is the column count. On mobile, a single column layout is used.
It is quite cool that Webflow has kept the quirks (CSS transition, transforms and animations) on mobile as most people tend to deactivate these features on mobile platforms.
Even though we have mentioned website builders, you really should not use them.
Chris is a senior front-end web developer and has made a small simple but cool website.
The layout for desktop and mobile is exactly the same for both. However, there are two primary features worth talking about – the toggle switch and the text hover effect.
The toggle switch
When the page is first loaded, it has a dark layout (dark mode) with a black background, grey and white text.
However, when you toggle the switch the background changes to a light layout (light mode) white again with grey and black text.
One thing to also note is the change of colour for Chris’s logo, in dark mode, it is white and grey in light mode it is black and grey.
The hover effect
The hover effect is enabled on both desktop and mobile layouts and is used on the text on the website.
As you hover over the text, the text is highlighted in different colours and slowly fades away after a short time. It actually feels like you are colouring in the text with your mouse or finger as you interact with the website.
Gustar is an app that is being launched soon that suggests meals from local restaurants catered to your own individual taste.
Because Gustar is being launched soon a landing page has been made to show off their new upcoming service and to get it known.
Because this is a single page website (landing page) the layout is fairly simple for both desktop and mobile with minimal changes (column count). So we will just be talking about the mobile layout.
Looking at the primary benefits section (information about the app), there’s a mockup of the app placed on a mobile phone. This fades in nicely from left to right as you load the webpage along with the text that tells you more about the app.
One thing we’d like to point out is the wooden border effect around the primary benefit section, as the page loads it changes from a dark brown colour to the wood effect.
One thing we need to point out is the lack of navigation on the landing page. There aren’t even any links that highlight to let you know which section you are on.
But is navigation needed? This website is very short and simple and to the point, it’s effective at conveying the primary points. It could do with navigation, but even if there were any it would be a few links at the most.
Maybes there isn’t any navigation to keep the website as simple as possible.
On the topic of landing pages, here is a new company My Orchard that’s starting up who we’ve developed a landing page for.
We are looking at Vogue’s lab Huawei landing page. This website is in a different language so the best thing to do is to translate it using Google.
This landing page is to advertise the newly opened Huawei store in Madrid.
Firstly the navigation is very simple, the layout stays the same on mobile and desktop. It contains the Vogue logo on the left with store and template call to actions on the right.
After this you are greeted with a large hero section, this section is similar for both layouts – a large background image with the Huawei logo at the bottom.
The difference between the desktop and mobile layout is an illustrative mockup of the Huawei mobile phone that slides over the background image as the page loads. This goes on mobile.
We think it could have remained on the mobile layout (reducing the size of the illustrative mockup).
The rest of the webpage content remains on both layouts except for the column count which is expected. So from now, we will just talk about the mobile layout.
After the hero section, each section is labelled with a number from 01 to 06 clearly separating each section.
This site design is quite illustrative making each section seem to blend into each other, so the numbers do help.
There are a fair few sections so we’ll focus on the one that stood out to us, sections 01 and 02. This is what is your style section. It is very effective at communicating the information the site wants you to see and read, this is because it is clear and concise as well as engaging.
You get asked a question and you get to pick an answer, upon clicking an answer you are scrolled to section 02 which features a toggle switch that changes the colours of the website (light mode to dark mode).
This, in turn, gives you a choice that best suits your preference as to how you want to see the site.
This is a simple yet powerful feature that works really well on mobile.
At the bottom of section two is a slider with a fair few images to look at, these could have been placed inside a standard grid system, but the idea here is to take up as little space as possible.
If using sliders on your site a one here and there is okay, but you should not overuse them as they hide content and the user has to carry out extra steps just to see the content.
40075 World is a website that enables an immersive journey to discover musical artists from all over the world.
The experience the website provides you is the same on desktop and mobile so we’ll just focus on the mobile version.
As you first load the website on your mobile you are greeted with a landing page that asks you to rotate your phone (to landscape) if holding your phone as you normally would.
Websites for mobile are usually optimised for a portrait layout, but not this site. This is because the website is highly engaging.
The primary focus of this site is for you to explore and discover artists and hear their music as you tap different sections of the website.
Once you are on an artists page you are presented with an animated illustration that you can interact with (clicking on different areas of the illustration). If you tap on a specific location music will start to play.
The particular element of this website we like the most is the transition from one page to another. When you click next you traverse out into the landscape of the illustration until it fades out.
Once faded out the new illustration loads in and you are brought forward into the landscape.
This is such a slick way to transition different pages rather than having the standard instant page load.
If you are lazy and do not want to manually go through each artist’s page in order (as presented on the website), you can tap the hamburger menu and select any artist you’d like.
This is because on the artists pages you only have the option to click next, but this is part of the journey from the beginning to the end, so you’d only want to use the “quick” navigation if you’ve been on the site before as it will more than likely break the journey.
If you would like to see more of these types of cool website, check out our post on website ideas worth sharing.
Evernote is a note taking application where you can write notes, organise and share and collaborate.
The obvious statement here is that loads of people take notes on mobile devices, so you’d expect Evernote’s website to work well on mobile. Well, it does.
The desktop navigation has a horizontal top bar with links that have vertical sub drop down menus. As you scroll down the page this top bar fades up increasing the vertical space you have as you are scrolling through the website. Next, to the primary navigation links you have the call to action links to the right (as you’d expect).
Regarding the rest of the homepage, the column count ranges from one to four columns, depending on the content in each section.
One thing we would like to point out here is the footer, this has a whopping six columns all with links in them. How will this look on mobile?
The mobile navigation loses the horizontal top bar that is used on desktop and uses a vertical menu with vertical scrolling. Vertical scrolling is used because there are no drop down menus like on the desktop.
There may be more scrolling, but this means there are no sub menus (where the links are hidden until clicked on).
This has the primary benefit of all links being immediately available to you, this can be a user experience upgrade as fewer clicks are needed to get to where you need to be.
But the disadvantage of having vertical scrolling inside a mobile menu is that someone may not notice you can scroll further to reveal more links.
If you are unsure of what type of menu you need on your site or need a redesign, check out our web design services.
Now, as you start scrolling down the webpage the menu fades up (just like on the desktop version), one thing we didn’t mention though is that when you scroll back up to the top of the webpage the navigation reveals itself.
This means you don’t have to scroll all the way to the top of the webpage just to get to the menu like on some sites.
The rest of the homepage content is placed inside a single column count, even for the small icons in the popular feature section.
There is quite a bit of space either side of these where you could get two columns in. but at the same time, this makes what you are seeing super clear and focused as each feature is seen one at a time. The same principle applies to the rest of the content.
Now for the footer section. We mentioned before that this has a six column layout on desktop with links in each. On mobile, all of this goes down into a single column creating more vertical scrolling. But again, none of the links are hidden – just like on the mobile menu.
The mobile layout for Evernote’s website I very simple with nothing added. Just the way it should be, as the primary focus is on their note taking app, not the website.
The website is designed to sell their app and once users have the app they no longer need to use the site.
Play date is an upcoming handheld video game console that is being developed by Panic.
This website is a landing page for their upcoming product and does not have any navigation just like on Gustar’s landing page website.
The same layout is used on desktop and mobile so we will focus on the mobile layout. Remember this blog covers websites that work well on mobile.
The first section you see as the website loads is a large hero section showing off their handheld console. It is represented by a 3D model that slowly rotates showing you different angles of the console.
As you scroll down the webpage all the information is in a single column and is clear and concise. Each section of the text separated by full width images and graphics.
The primary information on the webpage is black and is placed on a yellow background, but when you come to the “call to action section” the section where the conversions take place switches to white text and a purple background.
This makes this section stand out nicely from the informative section.
The elements we like most about Play Dates landing page are the 3D representations of their product that are subtly animated that work well on mobile. Simply put, they haven’t skimped out on their animations for mobile screens.
Centre Stage is a photography website designed to showcase the Centre Stage’s work.
Centre Stage’s website was designed and developed by us, so check it out!
The primary focus of this website is to showcase Centre Stage’s photos so the design of this site is minimal and keeps the user’s focus on the imagery.
We are going to look at the home page and work section as these include elements that are worth talking about when it comes to layouts that work well on mobile.
The Home Page
The desktop hero section on the home page contains four columns with images that expand on hover. This reveals more of the image as well as the link to click through.
This works great on desktop, but as the screen gets smaller, less horizontal space is available. On mobile, the four expandable columns go down into a single column slider where the full image and links are fully visible without the need to interact with the image.
After the hero section is the video section. This works similar to the hero section as when you hover over the video image the column expands allowing you to interact with it, the difference here is that the video section has two columns and not four on desktop.
On mobile, the video section goes down to a single column layout with a slider. Here more videos are available for the user to slide through – it has three in total. This goes to show layouts can drastically change between desktop and mobile in order for the layout to work properly on mobile.
The Work Section
The work section on Centre Stages websites has a three column layout on desktop and has the text about a particular workpiece hidden until the user hover over the workpiece (the image). As the user hovers over each individual image an orange overlay is faded in along with white text placed inside it. The image is still visible as the overlay is translucent.
On mobile, this layout goes down to a single column layout and the text that is hidden on desktop is moved down below the image and is visible at all times.
This is because once the user presses the image they are taken through to the single page, this means there is no time for the user to see the hidden text once they’ve clicked on an image.
The sites that work well on mobile platforms all have one thing in common – they are all well thought out. Some sites have horizontal navigation on mobile which simply just wouldn’t work on others.
One thing that sticks out is the use of columns, some sites use single column on mobile and some use three. It comes down to the content of the website and how the design works. It isn’t just the case of always using single column on mobile and multiple columns on desktop – it won’t always work.
Some sites keep all the elements on the web page visible on both layouts (desktop and mobile) where other sites hide certain elements for mobile.
If you want a website that works really really well on mobile, check out our web design services.