In order to succeed in the digital age, businesses must cater to an increasingly mobile audience: building a ‘one size fits all’ website is no longer an option. Having a site that forces people to scroll and zoom through pages that aren’t built for mobile browsing will lead to frustrated customers and lost sales.
If you have decided to take the plunge and optimise your website for multi-device browsing, here are four things to consider to ensure your site provides maximum ROI.
1. Website overhaul vs mobile templates
Budget is a key consideration for businesses looking to optimise their web presence for mobile and building a few mobile-specific templates has the benefit of requiring less up-front financial investment. In general, not all content will or can be viewed on a mobile device, so the most prudent method is to analyse current web traffic and identify the pages most viewed on mobile devices.
Looking at bounce rates and the length of time visitors spend on a page can help establish engagement levels. Then, having identified the best performers, it’s possible to build templates just for these select pages. This is a good short-term solution on a low budget, however, long term it can be more complex as it effectively creates two sites that will, over time, cost more to maintain.
For a longer lasting solution, building a responsive website is more efficient, cost-effective and generally easier to maintain despite requiring a larger immediate investment. An important factor to consider is the age of the current website; if the website is three years of age or older then it’s beneficial to re-design and develop a fully responsive site. In addition to only having to maintain one site, the site will feature the latest technology and most importantly, security.
2. The impact of a separate mobile site on SEO
This subject has attracted much debate over the past few years and is understandably a concern for businesses looking to make their website work across multiple devices. Google algorithms are a closely guarded secret, but the main SEO concern seems to be ‘does your website keep visitors engaged, is the content relevant and does it provide value over other competitor websites?’
One thing that is becoming apparent is that algorithms are starting to stop content that isn’t optimised for mobile from appearing in search results. If a website is not engaging, has a high bounce rate, content which is not relevant, and forces the user to squint and zoom their way through a site not built for mobile browsing, it’s likely the site will be penalised by Google.
If you do opt for separate mobile templates, ensure that you adhere to Google best practice codes to avoid looking as though you’re trying to ‘trick’ it with more than one URL for the same content. Google states that if a mobile site requires multiple URLs for the same content then it should all be accessible for Googlebot user-agents.
Building a separate mobile site will not impact your SEO negatively as long as you adhere to best practice codes; but as these are constantly changing, a responsive site offers a better long-term solution as you only have to update one site to reflect these changes instead of two sets of templates.
3. Optimise your content for a range of devices
When building a responsive site, the easiest approach is to code for the mobile version first and then scale up to incorporate tablets and devices. This allows code breakpoints to be content dependent as opposed to device dependent, as well as implementing additional functionality to cater for the increased capabilities of larger devices. This approach ensures that the pursuit of a quality mobile experience doesn’t mean you have to neglect your other platforms.
When deciding how to distribute your content, view it as a unique opportunity to tap into your customers’ browsing habits. Mobile sites should be punchy and use short, sharp content. It’s unlikely that someone browsing on an iPhone will want to spend hours reading case studies or in depth product reviews, so make mobile content light on words and less heavy on visuals. Many customers visiting your mobile site will be new to your service or product, so it’s important that it has a ‘best foot forward’ feel to it.
4. Keep your content fresh and your site secure
As sites have to cope with an increasingly broad range of devices; from older smartphones right up to ultra-HD desktops; there is a challenge to ensure that all customers are getting a positive experience. This demands that businesses keep their websites updated, addressing the technical advances to allow all of these devices to be targeted regardless of their capabilities.
Often, once a website goes live, there is no ongoing strategy for maintaining the technical aspects of the site. As such, the CMS often doesn’t get updated when newer versions and security patches become available. This poses a serious threat for businesses as they risk being hacked and in more serious cases; breach data protection which in turn will lose the trust of their customers.
To keep up to date involves assigning budget to keep on top of such updates and make them regularly. A good way to achieve this is for a business to have a maintenance agreement with their agency. This allows agencies to be proactive with their clients and share the latest trends, technology and security, whilst the business benefits from the knowledge and expertise their agency offers.
Contrary to the common knowledge, not many people actually speak or use English outside some certain islands in Europe.
True – educated, younger people do often speak 3-4 languages, including their mother tongue and English. But that’s not as big a percentage as you’d think. Worse, knowing a language isn’t the same as preferring or even using it.
Having a multilingual website in Europe is a must. Otherwise you switch off a huge part of your potential audience.
1. On average we use just our native language
Or even worse – in most countries it’s normal to really not know more than one (or two) languages.
2. European nations are really small
Large proportion of your potential customers are from the neighbouring countries and most probably speak another language. Be inclusive, your market can’t possibly end with the borders of your tiny home country.
3. Millions around you don’t share your mother tongue
It would be easy to think that in Belgium, “Belgish” is spoken. But no, there is no such thing. Most of the people there speak either French of Flemish, a dialect of Dutch. But there are millions more, who speak the language they brought from home with them when they came to live and work in the heart of Europe. Address more than just the main language of your country.
4. Going English-only is especially bad idea
Outside of UK and Ireland not so many can even speak it not to mention use it for meaningful usage of your website.
5. Never forget Google search results
More than 30% of the visitors on an average website come from search engines. Almost all the searches are done in the native language of the searcher. If your website has no content in their language, they will never even see your site in the results.
There’s no one-size-fits-all solution for calls-to-action.
You can’t just slap the words “Click Here” on a red button, put it everywhere on your site that you want people to click, and then start to rake in leads and customers.
Effective calls-to-action (CTAs) are a bit more complex than that. You’ve got multiple audiences looking at your website — visitors, leads, customers, promoters, etc. — and you want to get each group to do different things.
You want to get those visitors to become leads, leads to become customers, and then customers to become promoters — but you can’t serve them the same CTAs to accomplish those different goals.
Your solution? You’ve got to create multiple types of CTAs to serve these different audiences and their goals so that you can bring them down your marketing funnel.
However, you don’t need to go overboard and create a bagillion different CTAs — in reality, there are really only eight different types of CTAs you need on your website when you’re first starting out.
As your business grows and your website gets more complex, you might need to switch these up, but these are a great jumping-off point for any marketer.
The 8 Types of Call-to-Action Buttons You Need on Your Website
1) Lead Generation
First and foremost, calls-to-action are crucial to generating leads from your website. Since you’re trying to turn visitors into leads via these CTAs, you’ll want to place them in any spot on your website with a high percentage of new visitors.
The most popular place people put these types of CTAs is on their blog — at the end of their posts, in the sidebar, and maybe even as a floating banner in the corner. To be successful, these CTAs should be eye-catching and effectively communicate the value of clicking on it — visitors should know exactly what to expect when they get to the landing page the CTA points to.
Here’s what a lead generation CTA looks like:
2) Form Submission
And once your visitors get to your landing page, they’ll need to do two more things before they can be registered as a lead: fill out a form and click on a button to submit their information to your contacts database.
Since your visitors are sooooo close to becoming a lead, you don’t want them to slip through the cracks with a lackluster submit button. Therefore, it’s crucial to trade out your “submit” button copy for something more actionable and specific to the marketing offer they are about to give their information for.
See how the lead capture form and button below are much more actionable and engaging than a “submit” button?
3) “Read More” Button
In any place you display a feed of content — your blog, your customer case study page, or even your press newsroom — you probably don’t want to display the whole post one the home page. Entice your homepage viewers to click on individual posts by featuring the first few paragraphs of your content followed by a “read more” CTA.
Here’s what a “read more” button looks like:
Besides allowing more content to be featured on your homepage feed, “read more” buttons make sure that your engaging posts receive the stats they deserve. That way, people will have to click through to read any post instead of scrolling down on the homepage, which ensures that the post itself gets credited with its own traffic, not the homepage.
4) Product or Service Discovery
When someone is poking around your website trying to learn about your company and what it offers, you want to make it as easy as possible for them to do so. After all, your products and services are what keep your business afloat. The CTAs don’t have to be fancy images — simple text on a button can do the trick, as long as the button stands out enough against its background.
Here’s an example of what that can look like, taken from our very own homepage:
5) Social Sharing
One of the simplest types of calls-to-action is one that encourages you to share a piece of content with your friends. Social sharing buttons are a low-commitment way for visitors, leads, and customers to engage with your brand. So, be sure to include them in places where it makes sense on your website — blog posts, landing pages, etc.
Don’t just slap them on everything, though. You wouldn’t want to include them in places where people are giving you their personal information, for example.
The best part about this type of CTA is that it is really easy to customize.
Here’s what it can look like:
6) Lead Nurturing
So what happens when someone becomes a lead but isn’t quite ready to lay down the moolah for your product or service? You’ve got to entice them with another type of offer — but one that is more aligned with your product offering than a typical top of the funnel marketing offer.
Think about offers like product demos, free trials, or free quotes — this is the offer you want to promote with a lead nurturing CTA. You want to showcase these CTAs in places you know lots of leads visit — maybe as a smart CTA option in a blog post or as an offering at the bottom of another marketing offer’s thank you page.
Here’s a prime example of what one looks like:
7) Closing the Sale
And once all of your lead generation and lead nurturing are done, you want to get down to business and turn those leads into customers. This type of CTA will be very sales-focused: you want to get potential customers to want to buy your product or service right here, right now.
Again, if you have smart CTAs, you can use them at the end of blog posts — but you also might consider placing them on product pages, as potential customers may want to do one last bit of research before taking the plunge.
This is an example of what a sales-focused CTA would look like:
8) Event Promotion
If you are throwing an event — whether online or in person — it’s pretty clear you’re going to want to get people (and a lot of them) to attend.
Use an event promotion CTA to raise awareness of the event or even help drive ticket sales. The best part about this type of CTA is that there are endless places you can put it, depending on which segment of your audience you’re trying to get to attend.
For customers, you might consider placing this on their login page, dashboard, or even on the page you offer them a receipt. Or for leads, you could make this CTA appear in your blog sidebar. The possibilities are endless.
Memorize these 9 guidelines if you want to build elegant, easy to use, and human-centered user interfaces.
A website is much more than a group of pages connected by links. It’s an interface, a space where different things — in this case, a person and a company’s or individual’s web presence — meet, communicate, and affect each other. That interaction creates an experience for the visitor, and as a web designer, it’s your job to ensure that experience is as good as it can possibly be.
And the key to that is to think about your user first, foremost, and always.
Thankfully, while web design is a relatively new discipline, it owes a lot to the scientific study of human-computer interaction (HCI). And these 9 handy guidelines straight from HCI research will help you focus on your users when designing websites and apps.
Interface design, which focuses on the layout of functionality of interfaces, is a subset of user experience design, which focuses on the bigger picture: that is, the whole experience, not just the interface.
1. Know your users
Above all else, you have to know who your users are—inside and out. That means knowing all the demographic data your analytics app(s) can pull, yes. But more importantly, it means knowing what they need, and what stands in the way of them achieving their goals.
Getting to that level of empathy requires more than careful analysis of stats. It requires getting to know the people who use your website. It means speaking with them face to face, watching them use your product (and maybe others), and asking them questions that go deeper than, “What do you think of this design?”
What are their goals? What stands in the way of them achieving those goals? How can a website help them overcome or work around those challenges?
Don’t stop at knowing what your users want. Dig deeper and find out what they need. After all, desires are just outgrowths of needs. If you can address a user’s deep-seated need, you’ll address their wants while also fulfilling more fundamental requirements.
The insights you’ll uncover from analyzing data and speaking with users will inform every decision you make, from how people use your interface to what types of content you’ll highlight within that interface.
2. Define how people use your interface
Before you design your interface, you need to define how people will use it. With the increasing prevalence of touch-based devices, it’s a more pivotal concern than you might think. Just look at Tinder: the app’s user experience is literally defined by the ease and impulsivity of a simple swipe.
People use websites and apps in two ways: directly (by interacting with an element of the product) and indirectly (by interacting with an element external to the product).
Examples of direct interactions
– Tapping a button
– Swiping a card
– Dragging and dropping an item with a fingertip
Examples of indirect interactions
– Pointing and clicking with a mouse
– Using key commands/shortcuts
– Typing into a form field
– Drawing on a Wacom tablet
Who your users are and what devices they use should deeply inform your decisions here. If you’re designing for seniors or others with limited manual dexterity, you wouldn’t want to lean on swiping. If you’re designing for writers or coders, who primarily interact with apps via the keyboard, you’ll want to support all the common keyboard shortcuts to minimize time working with the mouse.
3. Set expectations
Many interactions with a site or app have consequences: clicking a button can mean spending money, erasing a website, or making a disparaging comment about grandma’s birthday cake. And any time there are consequences, there’s also anxiety.
So be sure to let users know what will happen after they click that button before they do it. You can do this through design and/or copy.
Setting expectations with design
– Highlighting the button that corresponds to the desired action
– Using a widely understood symbol (such as a trash can for a delete button, a plus sign to add something, or a magnifying glass for search) in combination with copy
– Picking a color with a relevant meaning (green for a “go” button, red for “stop”)
Setting expectations with copy
– Writing clear button copy
– Providing directional/encouraging copy in empty states
– Delivering warnings and asking for confirmation
For actions with irreversible consequences, like permanently deleting something, it makes sense to ask people if they’re sure.
4. Anticipate mistakes
To err is human; to forgive, divine.
Alexander Pope, “An Essay on Criticism”
People make mistakes, but they shouldn’t (always) have to suffer the consequences. There are two ways to help lessen the impact of human error:
1. Prevent mistakes before they happen
2. Provide ways to fix them after they happen
You see a lot of mistake-prevention techniques in ecommerce and form design. Buttons remain inactive until you fill out all fields. Forms detect that an email address hasn’t been entered properly. Pop-ups ask you if you really want to abandon your shopping cart (yes, I do, Amazon—no matter how much it may scar the poor thing).
Anticipating mistakes is often less frustrating than trying to fix them after the fact. That’s because they occurbefore the satisfying sense of completion that comes with clicking the “Next” or “Submit” button can set in.
That said, sometimes you just have to let accidents happen. That’s when detailed error messages really come into their own.
When you’re writing error messages, make sure they do two things:
1. Explain the problem. E.g., “You said you were born on Mars, which humans haven’t colonized. Yet.”
2. Explain how to fix it. E.g., “Please enter a birthplace here on Earth.”
Note that you can take a page from that same book for non-error situations. For instance, if I delete something, but it’s possible to restore it, let me know that with a line of copy like “You can always restore deleted items by going to your Trash and clicking Restore.”
The principle of anticipating user error is called the poka-yoke principle. Poka-yoke is a Japanese term that translates to “mistake-proofing.”
5. Give feedback—fast
In the real world, the environment gives us feedback. We speak, and others respond (usually). We scratch a cat, and it purrs or hisses (depending on its moodiness and how much we suck at cat scratching).
All too often, digital interfaces fail to give much back, leaving us wondering whether we should reload the page, restart the laptop, or just fling it out the nearest available window.
So give me that loading animation. Make that button pop and snap back when I tap it—but not too much. And give me a virtual high-five when I do something you and I agree is awesome. (Thanks, MailChimp.)
Just make sure it all happens fast. Usability.gov defines any delay over 1 second as an interruption. Over 10 seconds, a disruption. And the latter’s generous: for about half the U.S. population, 3 seconds is enough to cause a bounce.
If a page will load in under 5 seconds, don’t display a progress bar, as it’ll actually make the loading time seem longer. Instead, use a visualization that doesn’t imply progress, like Mac’s infamous “pinwheel of death.” But not that. If you do use progress bars on your site, consider trying some visual tricks to make the load seem faster.
6. Think carefully about element placement and size
Fitts’ Law, a fundamental principle of human-computer interaction (HCI), states that:
The time to acquire a target is a function of the distance to and size of the target.
In other words: the closer and/or bigger something is, the faster you can put your cursor (or finger) on it. This obviously has all kinds of implications for interaction and UI design, but three of the most important are:
Make buttons and other “click targets” (like icons and text links) big enough to easily see and click. This is especially important with menus and other link lists, as insufficient space will leave people clicking the wrong links again and again.
Make the buttons for the most common actions larger and more prominent.
Place navigation (and other common interactive elements, like search bars) on the edges or corners of the screen. This last might seem counterintuitive, but it works because it lessens the need for accuracy: a user doesn’t need to worry about overshooting their click target.
While you’re thinking about element placing and size, always keep your interaction model in mind. If your site requires horizontal scrolling rather than vertical scrolling, you’ll need to consider where and how to cue users to this unusual interaction type.
7. Don’t ignore standards
Being highly creative types, designers tend to love to reinvent things—but it’s not always the best idea.
Why? Because a revamped version of a familiar interaction or interface adds “cognitive load”: it makes people think again about a process they’ve already learned. Obviously, you can reinvent the wheel all you want—but only if it actually improves the design.
This rule of thumb explains why Google Docs’ menu bar features almost all the same options as Microsoft Word’s before Vista:
Up till fall 2013, the archive button was at the top left of the screen—right where Android design specs said the “Up” button should be. Pocket wanted to focus people on the reading experience, and not duplicate an existing hardware control, but the inconsistent placement caused new users to accidentally close and archive the article they were reading, rather than simply returning to their reading list as expected.
That tiny change “increased the likelihood [new users] would continue using Pocket from this point onwards by 23%.”
8. Make your interfaces easy to learn
When it comes to simplicity, people often cite a paper by Harvard psychologist George Miller called, “The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information.” The article suggests that people can only hold 5 to 9 things in their short term memory with any reliability. Miller himself called this a coincidence, but that doesn’t seem to hold anyone back from citing him.
That said, it’s only logical that the simpler something is, the easier it is to remember in the short term. So, whenever possible, limit the number of things a person needs to remember to use your interface efficiently and effectively. You can facilitate this by chunking information, i.e., breaking it into small, digestible chunks.
This idea dovetails with Tesler’s Law of Conservation of Complexity, which states that UI designers should make their interfaces as simple as possible. That can mean masking the complexity of an application behind a simplified interface whenever possible. A popular example of a product failing to follow this law is Microsoft Word.
Most people only do a few things in Word—e.g., typing—while others can use it to do all sorts of powerful things. But around the world, everybody opens the same version of Word, with the same UI, leaving your average Joe—who’s not a power user—overwhelmed by the variety of options they’ll probably never use.
This led to a concept called progressive disclosure, where advanced features are tucked away on secondary interfaces. You’ll often see this on websites’ home pages, where short chunks of copy introduce a product or feature, then link off to a page where users can learn more. (This also happens to be a best practice for mobile design, where robust navigation is always a challenge.)
Pro tip: Avoid using “learn more” and similarly non-specific text in links and buttons. Why? Because it doesn’t tell users what they’ll “learn more” about. Often, people simply scan a page looking for a link that takes them where they want to go, and “learn more,” repeated 15 times, doesn’t help. This is especially true for users of screen readers.
9. Make decision-making simple
Too much of the web screams at us: “Banners” suddenly expand to become full-screen ads. Modals pop up, imploring us to subscribe to blogs we haven’t had a chance to, you know, read yet. Video interstitials stop us in our tracks, forcing us to watch precious seconds tick oh-so-slowly by. And don’t even get me started on the widgets, flyouts, tooltips …
Sometimes I long for a calmer web—and Hicks’ Law gives us all a reason to build one. The idea’s as simple as its end result: the more options you present a user, the harder it becomes for them to make a decision.
This impacts almost everything we build:
– Overall layouts
– Navigation menus
– Pricing pages
– Blog indexes
– Content feeds
The list goes on. But the upshot is: the simpler we make our designs, the faster and easier it is for users to make the decisions we want them to make. That’s exactly why landing pages and non-newsletter emails should only have one call to action.
Pro tip: Sometimes, you actually do want users to slow down and consider their options. That’s why the tiled designs of Pinterest, Dribbble, and many blogs actually work well. After all, the more options you have to decide between, the more likely it is you’ll find one that works for you.
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.
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.
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.
Once users click through to one of those options, they’re greeted with large photos showcasing what Shutterfly is capable of for easy browsing.
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.
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.
Take note of the large buttons in their menus — perfect for tapping with your finger on a mobile screen.
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.
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.
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.
And if you’d prefer not to engage in the conversation-like exchange, you can simply scroll down for details.
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.
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.
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.
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.
Plus, there are those large call-to-action buttons again, which are great for mobile users.
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.
As with BuzzFeed, you’ll find a clickable menu in the top left-hand corner of the screen listing out all the post categories.
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:
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.
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
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.
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:
And here’s the bottom of the page (equipped with a delightful signoff):
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.
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.