was successfully added to your cart.

Cart

Category

Bend Oregon Web Design

Web Design

18 of the Best Examples of Mobile Website Design

By | Bend Oregon Web Design, Uncategorized
mobile website examples
Now more than ever, businesses are focusing on creating delightful mobile website experiences.

After all, Google has been heavily favoring mobile-friendly websites since they updated their algorithm in April 2015 and again in March 2016. And that’s crucial, seeing as there have been more Google search queries on smartphones than on desktop computers and tablets for over a year now.

Going forward, Google will only continue to raise the bar for what it considers to be mobile-friendly (including page load time) and reflect that in its algorithm updates. So if you haven’t been focusing on improving your mobile experience, you’d better prioritize it now, or your search ranking could really suffer.

Download our free guide here to learn how to design your own mobile-friendly website. 

To help inspire any mobile website design changes you’ll be making, here’s a list of 18 companies who really nailed their mobile web experience.

18 of the Best Mobile Website Design Examples

1) Shutterfly

Shutterfly is an online service that allows users to create photo books, personalized cards and stationary, and more. Because more and more people are taking photos and then accessing them using their smartphones, Shutterfly recognized the need to create a great mobile experience for their customers — and they delivered.

Shutterfly accomplishes two key goals on their mobile website:

  • It’s easy for users to find out information about their offerings.
  • They’re selling that information by way of beautiful imagery.

When you arrive on their mobile site, you’ll see the menu items have been enhanced into large buttons at the bottom half of the screen. This makes it easy for users to quickly select which option they’re interested in learning more about.

shutterfly-mobile-site-1.png

Once users click through to one of those options, they’re greeted with large photos showcasing what Shutterfly is capable of for easy browsing.

shutterfly-mobile-site-2.png

2) Google Maps

Everyone has their favorite map or directions application. Mine is Google Maps, which I use whether I’m walking, driving, biking, or taking public transportation. What’s special about their mobile website is that it’s virtually indistinguishable from their downloadable mobile app.

The screenshots below are taken of their mobile website, but if you’re familiar at all with the app, you’ll notice they look exactly the same. Not only is the appearance identical, but the mobile website has the speed and functionality of the app.

google-maps-mobile-site-1.png

google-maps-mobile-site-2.png

3) Typeform

Typeform is a Barcelona-based tech company with one, simple mission: to “make forms awesome.” Their desktop website is really beautifully designed, greeting visitors with succinct copy, high-definition videos, relevant animations, and other, more complex design components.

But for mobile users, they recognized that complex design components like video and animations could significantly affect page load time, among other difficulties. That’s why they actually removed many of them — which decluttered the site and simplified the overall mobile experience. The mobile website is a simpler version of their desktop website, and it’s still beautifully designed.

typeform-mobile-site-1.png

Take note of the large buttons in their menus — perfect for tapping with your finger on a mobile screen.

typeform-mobile-site-2.png

4) Etsy

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

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

etsy-mobile-site-1.png

Immediately below the search bar are thumbnail images of trending items that showcase some of the most popular things you can buy on Etsy. Mobile users can view these trending items in a collage format, and the images are big enough for them to easily tap with their finger.

etsy-mobile-site-2.png

5) Adrian Zumbrunnen

This is the personal website 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 a text message conversation you’d normally have on your phone — including the ellipsis to show he’s “typing.” Users are given two response options at the end of every exchange, so it’s kind of like a “choose-your-own-adventure” experience.

While the mobile and desktop experience are very similar, the desktop website feels like it was made primarily for mobile — which could be the direction sites will go in the future.

adrian-zumbrunnen.gif

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

zumbrunnen-mobile-site.jpg

6) Elf on the Shelf

Elf on the Shelf is, relatively speaking, a fairly new Christmas tradition based on a children’s book. If you’re unfamiliar, the basic premise is this: The book tells the story of Santa’s scout elves, who are sent by Santa to watch over children in their homes all over the world and report back to Santa.

Along with the book, parents can purchase an elf figurine, which they’ll subtly place somewhere in their house where their kids can see it. Every night leading up to Christmas, parents move the elf to a different location around their house to “prove” to their kids that the scout elves are real and always looking over them.

When you first arrive on Elf on the Shelf’s website, you’ll see that there are actually numerous types of Elf on the Shelf products you can purchase. But instead of forcing users to scroll through a long, text-based list, the web designers made it easy for users to simply swipe from left to right to look through all the different options — ideal for visitors browsing products on the website.

elf-on-shelf-mobile-site.png

7) BuzzFeed

BuzzFeed is a news company known for it’s viral content and popular quizzes. It also happens to be one of my favorite sources of entertainment during my commute to and from work.

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

When you arrive at BuzzFeed’s mobile website, the first thing you’ll see is some of their most popular pieces of content displayed in a simple, collage-like format using large images that are easy to tap with your finger.

buzzfeed-mobile-site-1.png

For users interested in specific categories, there’s a clickable menu in the top left-hand corner of the screen that lists out all the post categories.

buzzfeed-mobile-site-2.png

8) Evernote

Evernote is an application that allows you to store notes, images, and web articles and then access them across all your devices. Because users tend to download the app or access the website on multiple devices including desktop computer, smartphone, and tablets, it’s essential that Evernote get the mobile experience right.

If you look at Evernote’s homepage on your desktop computer, you’ll notice how clean the design is. The value statements are short and to-the-point, and the images add to the positioning but don’t clutter the page. When you look at their mobile website, they’ve kept this design and style entirely intact. Their mobile website is clean, simple, and doesn’t detract at all from the value of the app.

evernote-mobile-site-1.png

Plus, there are those large call-to-action buttons again, which are great for mobile users.

evernote-mobile-site-2.png

9) Huffington Post

The Huffington Post is a well-known news outlet that reports from everything from politics and current events to entertainment and technology. What makes their mobile website unique is that they actually alter their headlines slightly for mobile users so their content is more easily scannable.

If you compare the desktop versus mobile websites, you’ll notice that the mobile website has fewer words on the homepage. The headlines are shorter and much more digestible — perfect for someone skimming or reading on a small screen.

huffington-post-mobile-site-1.png

As with BuzzFeed, you’ll find a clickable menu in the top left-hand corner of the screen listing out all the post categories.

huffington-post-mobile-site-2.png

10) Express

Express is a clothing store that caters to young men and women. Because their audience often comes to their website to browse clothing, it’s important for their website to include big, clear images of their clothing — especially on mobile devices, when users will need to tap items on the screen with their fingers to click through for purchase information.

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

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

express-mobile-site-1.png

express-mobile-site-2.png

11) Nationwide Insurance

Nationwide Insurance provides insurance and financial services. You might think a financial company would have a really complicated website, but on mobile, Nationwide Insurance nails down the simple user experience.

When you arrive on their mobile site, you can get an auto insurance quote right away by entering your zip code — or, alternatively, you can “Find an Agent” to learn more information about their services. Other than logging in or signing up for an account, that’s all the homepage offers.

Although this gives users limited options, it makes for a much easier experience for visitors using small screens. This is a great technique to lead potential customers in the right direction.

nationwide-mobile-site.png

12) Squaredot

Squaredot is a HubSpot partner agency that helps marketers build out their inbound marketing strategies. Their mobile website is colorful, simple, and makes for easy navigating. But what sticks out to me most is how they’ve adapted their blog for mobile users. Check out the screenshot below, which shows one article in a list of many. Each article takes up the entire width of the screen, making for large, eye-catching images and text that’s big enough to skim

squaredot-mobile-site-1.png

We like how they’ve optimized their online forms for mobile, too. Check out how large the text and the form fields are in the subscription CTA below, making it easier for folks to fill it out on their mobile devices instead of pinching and zooming.

squaredot-mobile-site-2.png

13) Zappos

Zappos is an online vendor for shoes and clothing known for their stellar customer service. Their top priority on mobile is to help users search easily for the items they’re looking for on their website, so they’ve put a large search bar at both the top and bottom of their mobile website to make it super easy for them.

This is what the top of their mobile site looks like:

zappos-mobile-site-1.png

And here’s the bottom of the page (equipped with a delightful signoff):

zappos-mobile-site-2-1.png

14) ABC

ABC is a television broadcasting company known for popular shows like “The Bachelorette,” “Battle Bots,” and “General Hospital.” Users visiting ABC’s desktop website are greeted with a ton of options: view their television schedule, check out the Oscar winners, watch some of your favorite television shows, or even look at entertainment news relating to those shows.

But ABC knows that the experience on a mobile device should be simplified. When you visit the ABC website on a mobile device, you aren’t offered nearly as many choices from the get-go. Instead, you’re given one option: to scroll through large, clickable images representing all their television shows. Users can scan through these options and click into any show they want.

abc-mobile-site.jpg

15) Lean Labs

Lean Labs is a HubSpot partner agency that creates engaging, responsive, and high conversion web solutions. (They were also featured on ABC’s hit TV series Shark Tank.) The folks over there do a great job of providing a smooth experience for their mobile users, especially with regard to their design techniques and the emphasis they place on their core values, which are apparent to visitors within seconds of landing on their mobile site.

Notice how their mobile website uses scale and color to distinguish certain elements of their page:

lean-labs-mobile-site-1.png

And, like I said before, their core values — growth strategies, responsive web design, and inbound marketing — are clearly visible to mobile users scrolling through the homepage, with relevant icons to match.

lean-labs-mobile-site-2.png

16) SAP

SAP is an enterprise software company that manages business operations and customer relations. They enhance the mobile experience by condensing information.

More specifically, they combine some of their calls-to-action into sliders, whereas their desktop website has these CTAs laid out horizontally. This helps keep things simple so mobile users aren’t overwhelmed with a lot of information at once, and it also ensures none of the CTAs are too small to read.

SAP-mobile-site.jpg

17) KISSmetrics

KISSmetrics provides analytics software for businesses. On their homepage, there’s a lot of information explaining what the software does along with a testimonial.

But their mobile site is displayed a little differently: On a mobile device, the information on their site is shown in a list with alternative dark and light modules. This makes it easy for users to skim the page without getting lost in text.

kissmetrics-mobile-site-2.png

They’ve also made the text and fields on their forms large and easy to read:

kissmetrics

18) idig Marketing

idig Marketing is a development and communications provider. Their mobile website is laid out similarly to their desktop website, but I especially liked how they incorporated the interactive heart icons into their blog posts so users can “Like” their posts.

This mimics the “Like” heart icon in Instagram and Twitter, which is easily recognizable for mobile users familiar with those platforms.

idig-marketing-mobile-site-2.jpg

These were some of our favorites. Which other mobile websites have caught your fancy?

Written by Rachel Sprung | @

web design

30 mobile website design tips

By | Bend Oregon Web Design, Uncategorized

Mobile website design experts Anna Dahlström, Dean Evans and Sam Hampton-Smith share their best advice for those involved in pages for mobile devices.

In the last few years mobile design has exploded, but knowing what to do and where to start can be tricky. Mobile website design is not just a question of choosing between a mobile website or an app – there are a range of options in between and aspects to take into account, including responsive web design, mobile-friendly web fonts and much more.

To help you out, we have gathered together 30 top tips on what to consider when defining your mobile strategy and designing for mobile. Note that we are focusing on on mobile website design and, to a lesser extent, app design, but not responsive websites – although we’ll touch on RWD at points. Here goes.

01. Think ahead – define your objective now and for the future

Mobile website design tips: 1
Devices change, but objectives should stay consistent (image source: http://www.flickr.com/photos/adactio/6153481666)

We’re in a time when technological advances happen quickly in mobile website design, and new players are constantly being introduced. Consider how the first iPad came in the summer of 2010 and the Apple Watch in 2015; it’s safe to assume that even just two years from now things will very different to today.

As much possible we need to build something which can be evolved a year or two from now rather than require a complete redesign. So define your immediate mobile website needs as well as your longer term ones and cosider the pros and cons of the value that doing an app brings vs investing in a site that works across devices.

02. Know your target audience and what they use

Knowing what type of device people are viewing your mobile website on is key for guiding the design process and your mobile website strategy. Though many people have smartphones, don’t assume that everyone does, or that they all have an iPhone or Android phone. Instead look into what devices your target audience actually are using with the help of analytics or research.

Other things to consider is how your target audience use their phone and for what as well as if they have a reliable internet connection. The latter is particularly important if, for example, your users will fill in forms on their mobile devices.

03. Understand mobile website usage and behaviour patterns

Mobile website design tips: 3
Understand how your audience is interacting with their devices (image source: http://www.flickr.com/photos/jorgeq82/4732700819)

There are a range of misconceptions regarding mobile website usage that can lead to misleading design decisions. One of the most common ones are how mobile users are always rushed and on the go, or that we’re only interested in certain things when we use our mobile phones.

In fact a big portion of our mobile website usage happens when we have time to kill or when we’re sat at home in the sofa and that impacts how we should approach things.

It’s better to base your design decisions on the theory that we’re increasingly using our phones for the same tasks as we do on desktop, as this is actually what’s already happening. But as much possible do research into the specifics for your target audience to understand what’s true for them.

04. Understanding tasks and context

In the early days of mobile usage there was a stronger relationship between tasks and context. Limitations with devices as well as how we experienced the internet on them meant that the tasks we carried out were quite limited. If someone accessed our site on a mobile device we could assume they were on the go and after something specific.

Today mobile devices are used anywhere and everywhere and increasingly for the same tasks as a desktop. Though context is still an important consideration, it’s in the form of how our surroundings impact our usage rather than that the context we’re in equals a set number of tasks that we want to carry out.

05. Try to avoid bespoke mobile site

So how do you decided what to do with your mobile website? Limitations with current technical solutions like a CMS may make building a bespoke mobile website necessary. But if possible try to avoid building separate mobile sites. In the long run these will be more costly and time consuming to maintain as it means doing bespoke ones for different devices.

Building something which works on as many devices as possible will provide you with the best setup for focusing your resources and budget on the content rather than maintenance.

06. Keep core content the same

Mobile website design tips: 6
Content is the core to your mobile offering (image source: http://www.flickr.com/photos/sepblog/3649959481/)

As users increasingly are using their mobile devices for the same tasks as on desktops and due to this expect an equal and continuous journey across devices, there is a strong argument that your mobile website should be a reflection of your desktop version.

People do click the ‘desktop version’ link, particularly when served with a very limited mobile website, or a site that is substantially different structurally or visually to what they are used to. So try to keep the core content the same and keep in mind how the user will move from one device to another and what that should mean for their experience.

07. Optimise for mobile

Just because you keep the core content the same doesn’t mean that you shouldn’t or can’t optimise your mobile website. On the contrary you should optimise both display of content, interactions where appropriate to make them better for touch and look at using built in device capabilities.

Mobile provides great opportunities for creating even better and more tailored experiences than on desktop and these can still be achieved even if you don’t build a bespoke mobile website or app.

08. Look at entry points as a guide for whether to do an app or not

Mobile website design tips: 8
Look at entry points for users (image source: http://www.flickr.com/photos/slieschke/2202041617)

Apps are great for more focused and personal experiences and if you’re considering supplementing your offering with an app using analytics and looking at entry points can be a first guide. If the majority of your users arrive via direct traffic this could indicate that they bookmark your URL and that an app icon on the home screen would be of value. If most of your traffic comes via shared links an app alone won’t cut it as people need to be able to get to your content even if they haven’t installed your app.

09. Use analytics to define what devices to focus on

Mobile website design tips: 9
Ah, the BlackBerry 9780. Classic

Consulting analytics is also great for defining what devices to focus on in terms of operating system, version, or screen size. For example, in Google analytics you can see a breakdown of the devices that are being used, the divide between different operating systems as well as what versions of each operating system that is being used.

10. Consider the different types of apps

If you have identified that you need an app look into what type of app that is right for you. Native apps like Instagram are built specifically for each operating system. Due to that they often provide the most device optimised experience but it does mean maintaining bespoke code bases.

An alternative is hybrid apps like Facebook that are based around HTML5 and JavaScript, using a wrapper to provide native capabilities. This means fewer versions to maintain but can be timely to get the functionality to be app like. What to choose depends amongst other things on your objectives, budget and how often you need to update your content.

11. Adhere to UI guidelines and patterns

Every operating system has a set of UI and interaction principles that their users are used to. If you create an Android app don’t just take your iOS app design and use it as is but optimise and recognise that each operating system is different. Learning what makes them different and adhering to the guiding principles will make your app easier to use.

12. Consider backwards compatibility and fragmentation

Mobile website design tips: 12
Consider fragmentation (image source: http://developer.android.com/about/dashboards/index.html)

When it comes to doing apps it’s not as simple as iOS and Android. Each operating system has different versions and not every user will be on the latest one. Adoption rates of new versions varies and whilst it’s fairly rapid for iOS it’s slower and as a result more fragmented for Android. Make sure you don’t just design your mobile website for the latest versions but that the versions that your target audiences will primarily be on are covered.

13. Define your grid and breakpoints

Mobile website design tips: 13
Define your grid (image source: http://foundation.zurb.com/docs/layout.php)

When it comes to responsive design, defining your grid and breakpoints is the backbone of your mobile website design. There are a number of tools to help you define both the number of columns, their width and the gutters as well as providing guidance for how these will work on mobile websites and smaller screens. In some cases a fixed approach where the width remains the same is more appropriate. In some a fluid approach or a combination of the two.

But the grid and your breakpoints, i.e. the different screen resolutions that change the display of content from one layout to the next, is your trusted friend when it comes to responsive and making your site modular.

14. Mobile or desktop first – where do you start

Mobile website design tips: 14
Where do you start? (image source: http://www.flickr.com/photos/chr/5805931302/)

Designing for mobile first is still a hot topic. Some people are more comfortable with it. Others less so. As with everything there is seldom a right or wrong approach.

The key is to focus on the content and having smaller screens in mind, but whether that is done with sketches for mobile being made along the way whilst the more detailed definitions are done for desktop first doesn’t really matter. As long as you consider your content, why it’s there and how it should behave across devices. Start where you feel comfortable but experiment with both.

15. Define your content stacking strategy

Mobile website design tips: 15
Define your content stacking strategy

Unless you define how the different content modules in your columns are going to behave the modules in the left column will be placed at the top as you move to a smaller screen, followed by the middle column modules below and lastly the right column at the bottom. This seldom equates to the order of importance of the individual content modules.

To ensure your content is displayed properly from desktop to mobile or vice versa you need to define how the content modules are going to stack and reorder themselves. Use a simple number approach to start with, sketch out how the display of the content would change and take it to the rest of the team to work through. Get development to prototype it and do further definition where needed.

16. Don’t forget the navigation

An often overlooked area which is starting to get more attention when it comes to responsive design is the navigation. Brad Frost has written some excellent posts on the matter outlining different options as well as pros and cons with each. Read them and define how navigation is going to work on your mobile website, rather than leave it up to development to define.

17. Don’t be afraid to challenge what’s already out there

Mobile website design tips: 17
Challenge what’s already out there (image source: http://www.flickr.com/photos/nhuisman/3168683736)

The web is full of great pattern libraries and tutorials. Learn from them and take inspiration but don’t be afraid to come up with something new or challenge what is already out there. Established patterns are great but pushing boundaries is what brings us forward and in the world of mobile things are moving fast.

18. Not every page/screen needs a wireframe/design

Mobile website design tips: 18
Not everything needs to be designed (image source: http://www.flickr.com/photos/saucef/7184615025/)

It’s easy to get trapped in that everything needs to be defined. But every page or view for every screen size or orientation does not need a wireframe or design. Use analytics as a guide for what to focus on, work closely with the development and the design team and find a way and level of definition that works best for you and your project. But try to avoid e.g. doing wireframes for each main screen size and orientation. A lot of that can be handled with a master set and sketches for the rest.

19. Work collaboratively and closely across disciplines

Mobile website design tips: 19
Working collaboratively offers many benefits (image source: www.flickr.com/photos/enriquemendez/5069887958)

To get the best end result when it comes to mobile design, and design in general, there should be close collaboration between the different disciplines. Many problem areas won’t be noticed until you wireframes turns into designs and designs into build and the more you work together the sooner you will identify and find solutions to them.

20. Prototype, test, and iterate

Mobile website design tips: 20
A/B testing can be invaluable (image source: http://www.flickr.com/photos/nomadic_lass/5598218199)

The most important things when it comes to designing for mobile is to prototype and iterate as you go. Work closely with the development team to see if what is being proposed actually works when it’s built and to identify situations that needs more detailed looking into. And get something together that you can test with your prospective users and get actual feedback on. That in the end is what matters.

21. Deliver content quickly

The best mobile sites are elegant and clean. Try to understand what people visiting a mobile phone website will actually expect to see – ask clients what’s really important to them and consider what information their users will want to access quickly, such as reservation information, menus and location maps on a restaurant website.

22. Limited layers aid navigation

Try to keep to a maximum of three levels of navigation through a mobile site – some people aim for just two. Mobile users want to get information quickly, so they won’t tap here, there and everywhere just to find what they’re looking for.

23. Design from the user’s viewpoint

Only people who haven’t been involved with the build can give an honest assessment of the user experience you’re offering

Try to learn to use a device from a user’s point of view. Test your design on that device and ask your clients to test it too, so you can see if there’s any information that shouldn’t be there or if anything’s missing. User testing is always really important as well.

24. Choose the right web font

While you should try to avoid using serif fonts unless they’re very sharp and easy to read, mobiles have advanced enough that you can be more creative with type and you can embed fonts on a mobile site. You still need to keep things as simple as possible for users, though. Also read our article on responsive typography tips.

25. Don’t get hung up on different devices

While you do need to be mindful of the fact that not everyone is using the same device – for example, not all smartphones have touchscreens – the technology used on different mobile devices is fairly similar. So remember that not everyone has the same screen resolution or input, but don’t get too hung up about it. If your content is worth accessing, people will want to access it, however the particular device interprets your styling.

26. Test, test, test

Testing is the secret to a great app

There are so many different platforms out there that it’s practically impossible to test on every possible combination of smartphone and operating system; new Android devices ship almost weekly, not to mention Windows Mobile, iOS, Blackberry OS and Cyanogen OS. It is important to test across a cross-section of devices, however, and you should aim to make this an iterative, ongoing process. There’s nothing worse than designing against iOS alone, then discovering at the end of your build that Android devices won’t render your page as intended.

27. Consider battery life

It might sound counter-intuitive to have to worry about battery life when you’re designing a website for mobile, but your users will thank you for being considerate. This is an issue web designers need to be aware of because smartphones and tablets have limited-size batteries, and powerful processors. The more you work the processor, the more the battery will drain. This is especially true when you’re using HTML5 features such as geo-locational positioning, or rendering complex canvas animations, so try to use these tools sparingly.

28. Accept and embrace the limitations

It’s tempting to try to cram every last bit of functionality into a mobile-orientated website, but you need to accept that some things are better suited to desktop machines than portable devices. Conversely, mobile devices are far better at some things than desktops. Location-aware content, for example, is an ideal application for mobile, but rendering webGL is (currently) best left to the desktop.

29. Minimise text input

On most phones and tablets it’s perfectly possible to type out a few sentences or paragraphs with relative ease, but it’s not exactly a fun experience. It’s also a pretty interruptive process on modern touch-screen devices as the virtual keyboard pops up over the web content. To reduce user frustration, aim to minimise the amount of text input you require in web forms, and where it’s really necessary make sure that you consider the practicalities: nobody is likely to type a 2000 word essay into Safari on an iPhone!

30. Love the pace of change

One of the best things about the current lifecycle of features on smartphones is the sheer speed at which the platforms are developing. Techniques that didn’t work just six or 12 months ago are now perfectly feasible. The downside to this is that code you work on today isn’t guaranteed to still work in a year, especially if you’re using cutting-edge technologies. Make sure your client understands this.

Contributors: Dean Evans, Anna Dahlström and Sam Hampton-Smith

By Web design