With the UK now using their mobiles to surf the web more than any other device, mobile web design is more important today than ever. 60% of consumers feel more positive about a company that has a website with original, custom content. It’s hard to understate the importance of your customers’ first port of call, so you need to make sure your site is engaging, reflects your brand values , and works no matter what device it is viewed on. With so many sites trying to grab attention, how can you stand out from the crowd?
Here are 5 mobile web design tips to give you a hand in 2017.
1. Use the latest layout trends
Card layouts are one of the most recent trends sweeping through web design layout. Card layouts are essentially boxes that contain your images, text and calls to action. They’re popular for a reason – not only do they look ordered and fetching, they serve a number of practical uses.
Card layouts allow content to be moved around to optimise user experience and are immediately responsive. Responsiveness will forever be the buzz word of mobile web design, so do yourself a favour. Use card layouts to look contemporary and stay responsive no matter what size screen the next iPhone has.
2. Incorporate video
By next year, 79% of all consumer internet traffic will be video. 50% of all mobile traffic is already video based. If you’re not convinced that video is the way to go this year, re-think your mobile web design, otherwise you’ll risk being left in the dust.
Ideally, a mobile video player should run HTML5. That way it will work on most mobile devices. But use video wisely. Keep things light, so they don’t drain bandwidth and mobile processing speed. Battery life and mobile data are the two biggest concerns to mobile users, so be smart about your use of video. Having a lightweight video player also improves page load times, so you get a better user experience.
3. Keep thinking with thumbs
Unlike the elegant mouse pointer you’re no doubt using to scroll down this page, thumbs come in all shapes and sizes. They’re unwieldy and can cover more than 30% of your visual real estate on some devices. You want to make sure users can navigate your site with their phone hand.
Make sure that your buttons are large enough to be easily pressed with this vital appendage, and located in a place that is naturally comfortable to reach. The average index finger for adults is 15 to 20 mm, which translates to 45 to 57 pixels. So as a rule of thumb (ha ha!), give buttons at least 45px of space. If you need to resort to pinch and zoom functionality, your site isn’t correctly optimised.
4. Use SVGs
Scalable Vector Graphics (SVG) are a fancy new tool to have in your web design tool belt. SVGs use XML markup language instead of just being a straight-up image format. This gives them a whole host of advantages over .jpegs. They’re scalable, so they’re ideal for mobile web design, they can be animated using CSS, and you can add handy things to the code, like tracking.
5. Personalise your Google map
Nowadays, everyone is used to seeing the famous map with the little red pin. For mobile users, local search is commonplace, and people are often navigating to maps to find you on the go. These maps are everywhere. And they’re dull as dishwater. Switch things up this year and stand out of the crowd by personalising your map. Our top tip is to customise your map in a way that complements your design.
Mobile web design is more important than ever. Three quarters of people who visit a website that isn’t optimised for mobile will leave and never come back. Can you afford to lose that many customers?
