“Mobile first” is a common term thrown around by website experts but what does this really mean? Essentially, it’s when you design a website (or software) with the mobile experience as your primary consideration, rather than desktop. The amount of people browsing the web on their mobile has significantly increased over the past few years and is estimated to grow even further. Which is why a beautiful website on mobile is so important to attract potential visitors and minimize your bounce rate on mobile devices.
Some people assume that their website looks great on desktop so it will just look like a cool, mini version on mobile but this isn’t necessarily the case. And If a large portion of your website traffic comes from mobile page views (you can check this in your Statistics) then you should definitely be optimizing your website for mobile.
So we’ve put together some common mobile website design pitfalls and how to avoid them! Check also our step-by-step tutorial on creating a mobile-friendly website.
Fail 1: You don’t have a mobile responsive template
You probably created your website a few years back and now it finally looks just the way you want (on your desktop). If you haven’t changed your template in a good while, then the chances are you’re still using one of our older templates. The old templates have a code instead of a city name (e.g. F4242), they are “mobile-friendly” but don’t look nearly as good as the modern “responsive” templates (named after a city).
So, how is responsive better? Your website will automatically “respond” to the size of the device your visitor is using. The resolution, images, and menu will look perfect whether they use a tablet, desktop or smartphone. Plus it’s better for your SEO as Google can find you more easily.
Maybe you just haven’t had the chance to check your website on a mobile/tablet yet? Or you can’t be bothered to update your template and re-work your whole website? We totally understand where you’re coming from. But take a look at all those people around you browsing their mobiles on public transport. They’re all potential visitors you could be gaining just for that one extra hour of work every day for a week.
An example of an unresponsive template. The contact form comes off the page.
The new responsive template looks perfect.
Solution: To see your current template, open your menu and choose Design > Main > Templates.Your current template will appear in the top left corner. Make sure your Jimdo template is the name of a city (e.g. Stockholm). If not, then it isn’t responsive and we strongly recommend changing your template design to something more modern. You can use this tool to check how your website appears on every device!
Fail 2: Your images or video are making your website slow
Look up your website on a mobile device then count how long it takes to load “1-2-3…” If it took 3 seconds or longer you should go through your page and figure out what is slowing it down. Prime suspects tend to be any videos, animations or extra add-ons. Think about whether these really add value to your website and if it’s worth the increase in page loading time (not to mention mobile data consumption!). Google provides a simple and free way to diagnose many mobile issues on your website. Just type in your website URL and you’ll be offered some suggested improvements for your mobile website.
A good practice is to optimize any images on your website. This means resizing an image if necessary and reducing the file size. There are plenty of tools out there that can help you compress an image, without losing any of the quality. Even a small reduction in file size on an image-heavy page or background image can make a noticeable impact. Remember page load times are used by Google as an SEO factor so it could negatively affect your ranking if your page takes a while to load.
Solution: Check how long your website takes to load on mobile then audit your website to remove or optimize any items that could be slowing down your website.
Fail 3: There’s no visual hierarchy
There’s too much going on and your eye doesn’t know whether to focus on the Logo, Heading or Call-To-Action. It’s time-consuming to go through a website on a mobile, so make the user experience a lot easier by dividing the content logically into sections. Then create individual Headers for each section using H1, H2 and H3 tags. Providing an intuitive user experience will engage users for longer and increase the chances of a purchase on your website.
Important information for your visitors should be at the top of your website. Then get into specifics further down. Think of what the visitor is expecting to see and answer the 5 W’s: Who? What? Why? When? Where? Then ask yourself whether you can see the key selling points or message on your website.
An example of a website with a clear structure and visual hierarchy
Solution: Make a site plan. This will help you create an outline of your website and create categories so you can trim any unnecessary extras.
Fail 4: Your website is hard to read
You may have the greatest content in the world but no one’s going to read it if they’re squinting and have to pinch or zoom in to a text to get through it. This issue is even more noticeable in smartphones than tablets due to the screen size.
That fancy serif font may have looked great on a desktop but now it’s a bit of a struggle to read on a mobile device. Try a sans serif font like Open Sans or Roboto that’s easy to read then check your font size is large enough. A general rule is to keep your body text a minimum of 16pt but keep in mind that that number is dependent on what font you’re using.
Some background images can reduce readability when you’re out and about, making your text harder to read. So try and stick to a simple background color and text color that complement each other.
Make sure that the contrast between your background and your text is strong enough that text is easy to read
Solution: Always check your website in View Mode. This feature lets you view your website on desktop and preview what it will look like to mobile/tablet users. It’s worth asking your friends and family to take a look at your website on their device. If they had problems reading your text then maybe it’s time to simplify the look for your website. A plain white background with some blocks of color to make it pop doesn’t have to be boring!
Fail 5: Your website looks crowded
Leaving white space is even more important on a smaller screen so your fingers are able to tap one button like the call-to-action. People using mobile devices need even larger text and buttons that you might expect in order to be able to use a website comfortably.
Calls to action (CTA) should be a minimum of 30-40 px in size so they stand out. Mobile shoppers tend to be impulse buyers so if the website isn’t easy to navigate and difficult to tap, then it could be a reason to leave the transaction. So make sure to check it’s easy to recognize and activate the CTA.
A lot of elements, images, and colors can make your website look cluttered and scare off your visitors. In this case, then it’s time to add some white space between paragraphs, texts, and other elements. White space makes your site much easier to navigate and read what is important.
If you’re scrolling through a website on the bus (like me), you’re probably skim reading. Which means you want to find the information you need clearly laid out. Rushing around doesn’t leave much time to read large bulks of text on a mobile, for example. Make sure your text is short, scannable and on point with plenty of space in between paragraphs.
Solution: Make sure you have enough white space around your elements and text so that the visitor isn’t feeling overwhelmed with information. You could also try using a button instead of an in-text link for important content to make it easier to tap.
Fail 6: You overload people with forms or pop-ups
You know that feeling of annoyance when you realize you have to fill out an online form to get free wifi at the airport? Think about that when considering adding any pop-ups that require typing on a touchpad. Navigation on a mobile device can be difficult enough without the added struggle of typing on a touchpad. Try to make everything as simple as possible with the least possible required action.
If you need to add a satisfaction survey, for example, make it easy to vote with a smiley and just add a text box for any extra comments. If it’s a newsletter subscription, try to include only the important details or drop down lists to make it easy as possible.
Solution: Take a look at the wide range of forms offered by JotForm or add a chat pop-up with Pure Chat for example. As you can see in the example below, you can find an add-on that is unobtrusive like the speech bubble at the bottom of the page. This won’t interrupt your user experience and your visitors are more likely to tap on it. Just remember this is also an add-on so it can slow down your loading time.
blackyeti.com shows the importance of white space and clear call-to-action. Notice the speech bubble at the bottom of the page. This is a live support chat add-on.
Discreet live chat support add-on that only pops up once you tap on it.
The key to mobile web design is simplicity. Less is definitely more on a smaller screen. It’s worth keeping in mind the challenges that a touchpad can bring to the user experience. So the trick is to think of the design of your page for fingers, making features easy to tap or swipe. Make sure your visitors can find the most important information straight away and then stick to the tips offered above and you’ll be fine! If you’re really not sure, you can always try some usability testing with customers or friends.
If you haven’t tried our free app yet, now is a great time to try it out. It’s the perfect way to keep on top of your website from a mobile or tablet when you’re away from your desk.