According to Statista, mobile devices (excluding tablets) generated 54.4 percent of global website traffic in the fourth quarter of 2021, and the World Advertising Research Center predicts that by 2025, three-quarters of worldwide users will access the internet using a mobile device. For freelancers and agencies, this represents a massive opportunity to lay out the groundwork for a mobile-first strategy that caters to larger audiences.
There are other, more practical reasons to think mobile-first. For instance, optimizing your website for mobile became critical for achieving strong search engine rankings when Google began prioritizing mobile page load speed as a key metric in July 2018. It means that if your mobile site is slow or unresponsive, your overall ranking across all devices takes a hit.
Then there are the advantages of starting on mobile and scaling to desktop. Designing for a smaller screen limits the number of elements you include within your design, forcing laser-sharp focus on what’s most important for your users. Mobile design also affords new functionalities without impacting existing ones, unlike going from desktop to mobile, which can prove difficult when translating rich media.
Of course, UX means everything to mobile users these days, and if someone visits your site and finds themselves pinch-zooming the screen to decipher the content, you can bet your Bitcoin they won’t stick around. A mobile-first mentality means you don’t compromise user experience.
So, if your agency doesn't have a mobile-first strategy in place, it's time to get started. Here are five best practices to think about:
Design with a content-first mindset
Anyone who has designed for mobile will know that mobile-first generally means content-first. That’s because it's content that mobile users are ultimately looking for when they browse on their devices.
Adopting this content-first mindset will determine how you approach the design of your site. A good place to start is by visually ranking your design elements using the visual hierarchy principle. That means thinking simple and effective, minimizing any elements that cause clutter, offering good readability (text should be at least 11 points, so it’s legible at a typical distance), and scaling down assets such as the menu. It ensures less distraction for users and steers their eyes in the right direction.
Look no further than Wix Partner Guac Digital Marketing for a prime example in utilizing high-definition imagery when designing its client Le Paris Skincare’s website. By taking a different approach for the mobile version, Guac Digital Marketing minimized white space and opted for full-size visuals to provide visitors with immediately meaningful and actionable content.
Don’t be afraid to build a very different mobile version of a desktop website you have already imagined. Not only will it help you prioritize content, but you’ll also be able to deliver a much more streamlined version that loads faster and better engages visitors on the go. You can leave the ‘bells and whistles’ for your desktop version to impress visitors who have more time to navigate.
Develop your understanding of mobile UX
To ensure mobile site visitors hang around and take the actions you intend, you must deliver an exceptional user experience. The best way to achieve that is to understand the different ingredients that make up great UX.
For starters, clear navigation is non-negotiable. Your site’s design should help users solve a problem or complete a task quickly and effectively. The layout should act like an invisible hand guiding them through their journey. To do this, use familiar icons, always clarify which page users are on, and be intentional and consistent with the placement of buttons and controls.
Also consider designing user-friendly tap targets, that is, any interactive elements like buttons or links. To ensure great UX, they need to be the right size, have enough space around them, be simple to press without interference from other elements, and have clear and concise copy telling you what they do. While the WCAG recommends that targets are at least 44 by 44px in size, Google advises a larger size of 48 by 48px. The trick is to make them big. Tap targets should also be finger-friendly, so make sure they are within thumb range.
Familiarity breeds good UX, which means there’s no need to reinvent the wheel when designing your mobile site. Think about it. Why are links underlined? It’s not entirely clear, but we’ve come to understand that underlined links are clickable because that’s been the convention for as long as webpages have existed. Other design conventions include button shadows and hover effects. If you deviate from design conventions, make sure you have the rationale to do so.
It might sound obvious, but don’t forget to do competitor research. Spend time navigating their mobile sites. Go on the user journey, identify any pain points in the UX, take note, and make sure your site does it better.
Make your mobile site accessible
According to the United Nations, persons with disabilities (PWD) account for 15 percent of the world’s population. Add to that number PWD’s friends and families who act on their emotional connection to those with a disability, and you have a demographic that equates to 73% of all consumers and an emerging market larger than China.
Failing to consider accessibility when designing your mobile site not only misses a massive opportunity, but it tells the public you’re not a brand that values inclusion and diversity. The Web Accessibility Initiative states that making your site accessible helps drive innovation and ensures compliance with international accessibility laws. All this begs the question, why would you not consider making your mobile site accessible?
To take accessibility seriously, you can take several small steps. For example, to cater to the visually impaired, choose your color palette carefully. Use specific color contrast ratios between text and background, graphics and user interface components, and other contrast ratios to conform with Level AAA regulations. Contrast Checker is an excellent resource for testing color contrast, while TPGi’s Colour Contrast Analyser offers guidance on your background color.
For those with cognitive impairments such as epilepsy or ADHD, reduce unnecessary motion on your site. You can do this by limiting autoplay, avoiding parallax scrolling, and enabling visitors to disable motion. Make sure that any audio and video you use is available with subtitles and a transcript for those hard at hearing. You can also add an audio description of the visuals on the screen.
Of course, this only scratches the surface of disabilities and web accessibility. To get a more in-depth look at making your sites more accessible with Wix, follow this accessibility checklist or scan your site for potential issues using the Wix Accessibility Wizard. Why not organize a focus group with PWD? Have them test your mobile site and inform you about making it work for them. After all, they’re the real experts.
Consider your Core Web Vitals
One of the key web trends we identified for 2022 was being smart with SEO. Part of this is ensuring that you deliver faster loading sites with a better user experience, particularly since Google’s launch of Core Web Vitals (CWV) in 2021. But what does Google ranking websites for content loading time, first input delay, and visual stability mean for mobile?
First things first, you have to carefully consider the effects your mobile site’s design elements and content will have on the metrics. Anything you put on a webpage has a cost, which rings true for mobile even more than for desktop.
Don’t be excessive with the number of folds on your homepage. You don’t want users forever scrolling to get to your footer. Consider splitting pages throughout your mobile site instead. Why not move an FAQ section on your homepage to a dedicated FAQ page? Can a secondary piece of content be displayed as a blog post? These are minor changes but can make all the difference to your CWV score.
Images are one of the most significant influencing factors in CWV, and mobile devices are especially vulnerable to delays in first input and to page instability. Minimize the number of assets your site needs to load. Background images on mobile are much less impactful than on desktop, so remove them where you can. Also, ensure your above-the-fold content is text-based.
Other recommended actions to optimize your mobile sites include having good contrast between images, fonts and backgrounds for good visibility, and limiting the number of fonts and font weights you use to ensure a professional look. For accessibility, avoid text embedded in images and for better UX, always place meaningful content above the fold. To avoid slowing things down with large files, choose SVGs for company logos, opt for JPEGs over PNGs, and loop video rather than using GIFs.
Remember that improving performance is a journey, not a destination. Stay informed on any changes Google makes to its CWV measurement and keep a close eye on how your mobile site performs in the Wix dashboard.
Wix has been doing plenty of work behind the scenes to evolve its infrastructure and improve website loading performance for millions of sites. You can see how we stack up against our competitors in Google’s Core Web Vitals Technology Report, or to find out more on CWV and how you can use Wix to achieve high scores, check out our special Partners webinar on the topic.
Know whether app or mobile is right for you
If you plan to implement a mobile-first design strategy, you’ll need to decide whether to create a mobile website, a mobile application, or both. The most appropriate choice depends on your end goals.
In general, a mobile site should be your starting point when developing a mobile web presence, whereas a mobile app is used for more specific purposes that can’t be achieved through building a website. Think about the pros and cons of both options, factoring in your audience, budget, and the features you need to deploy.
One of the key advantages of having a website is its reach – it’s accessible across different platforms and can be easily shared. Also, when compared to a mobile app, a mobile website can be updated more easily. It's instantly accessible, doesn’t require the user to download anything, and usually requires less support and maintenance.
The mobile app has its own unique advantages. Apps generally feature more navigable interfaces, load content faster, and often feature friendlier UX. Mobile apps are also an effective platform for targeting an audience and launching marketing campaigns. They’re convenient for sending push notifications, being used offline, offering greater personalization, and having better access to mobile-specific functions such as the user’s camera or contacts list.
While development costs used to be a significant deterrent for brands launching mobile apps, the landscape shaping accessibility and affordability has changed. Take Branded App by Wix, for example, which democratizes app development by allowing creators to build, customize and publish their own tailor-made app without a single line of code.
The same goes for bridging the gap between mobile sites and mobile applications regarding discoverability. Understanding App Store Optimization and what it takes to rank higher in an app store’s search results can be the difference between your mobile app getting lost in the ether, and being recommended by Apple or Google.
Tap into the mobile-first opportunity
From understanding the importance of mobile UX to scoring high for Core Web Vitals, there’s plenty to consider when implementing a mobile-first design strategy. However, when you do your research and get it right, it means you tap into a market of around 5.31 billion unique mobile users across the globe and, ultimately, reach the right audience, on the right device, at the right time.
Joe O'Connor
Marketing Writer | Wix Partners Dublin
Comentarios