You’ve spent hours honing in the branding. You’ve followed SEO best practices for every page. You’ve even painstakingly mapped out user flows to find the optimal page architecture. In short, you’ve built a beautiful website that you’re sure your visitors will love. It looks gorgeous on your 17” retina display.
But how’s it going to work for someone visiting the site on a 4-year-old Nokia phone?
As of 2018, more than half of all web traffic comes from mobile devices. Yet many companies and developers still build their site on and for desktop users. Mobile visitors are often an afterthought – even though they are, at this point, the majority.
As smartphone adoption and LTE network penetration continue to climb, mobile web traffic will only grow in importance. If you’re building a website, that means testing and optimizing the site for mobile users can no longer be an afterthought. It has to be front and center.
To adapt to the changing trends in user behavior and device usage, many developers are adopting the practice of mobile-first design: prioritizing a website’s functionality and UX on mobile devices first and foremost, then making any necessary tweaks to keep the site looking good for desktop users. The data tell us that this is the way of the future – so here are some practical tips for developing, testing, and perfecting a website using mobile-first design principles.
Responsive Design Is a Must
At this point, building a responsive website is almost a given, but it still bears repeating. Responsive design is at the very core of a mobile-first design framework.
In essence, a responsive website is one that detects the visitor’s screen size, then shuffles the content automatically to fit optimally on that screen. This stands in contrast to a website that simply scales the site linearly or loads the full-size website and has users scroll around to see off-screen content.
A responsive website is a must-have for any mobile-optimized website, but this is only the first step to mobile-first design. To truly build the website “mobile-first,” you can’t simply design the website on a desktop and then hit the “responsive” button: you have to fundamentally shift your design process and priorities. It’s a fundamental change in approach.
Progressive Enhancement Over Graceful Degradation
Traditionally, web developers achieved mobile optimization through something called “graceful degradation.” This approach involves building the website first for a desktop user, then designing the website to be responsive but eliminating less important content as the viewer’s screen size shrinks. There’s nothing inherently wrong with this approach: the website will still be usable on a small screen. The problem is that graceful degradation treats mobile users as an afterthought.
Mobile-first design involves taking an inverse approach. Instead of building the site on desktop and eliminating content for mobile screens, true mobile-first design uses an approach called “progressive enhancement.”
In progressive enhancement, you design your website for the smallest screen first: a smartphone. The first step is to create a layout on a smartphone screen, arranging the most important content and site elements for the best possible user experience on that screen. This means designing the site with an eye towards the absolute most important things for users and for the business.
For an e-commerce website, this would mean featuring your newest and top-selling items as the centerpiece of your website, as these are what most users will be looking for and what lead directly to sales. From there, you start to add in other elements like less popular items and miscellaneous information on the business.
Designing this way is what “mobile-first” really means: very literally, you start the design process with the mobile website. Then, you add elements as the screens get bigger.
Inverted Priorities
Another key element of mobile-first design is thinking about how the needs of mobile users might differ from desktop users, then designing the website to suit those needs as a first priority.
What this looks like in practice depends on the nature of your business and what your customers want from it. For a physical store, most mobile users will probably come to your site in search of things like address, phone number, and business hours. Accordingly, that information should be placed at the top of the screen, where a mobile user can see it immediately, instead of in the footer, where they might normally reside.
This is just one example, however. For a blog or content-based website, this could mean putting popular, new, or trending content first on the page. For a service business, it may mean putting a CTA or contact button at the top the page.
The point is that when it comes to deciding what’s important, the needs of mobile users come first. In a mobile-first website, the design reflects that prioritization.
Mobile-First Website Testing
Finally, mobile-first web design means taking a specific approach to user testing. In line with the previous points, your UX testing process should cater to mobile users as the priority. You want to design a good UX for mobile users first, then worry about how the site functions on a desktop. But mobile-first web testing goes beyond this.
In addition to straight-ahead user testing, you need to understand how your site functions in a wide range of possible mobile scenarios. This applies to more than just layout and screen size: you need to consider factors like network connection type, signal strength, the model and generation of a user’s device, even the web browser app that a visitor is using. To fully optimize your site for mobile, you must understand how the site performs under all these different conditions.
The testing process doesn’t end once your site goes live, though. You want testing to be an iterative, continuous process, which means you’ll need to continue collecting system performance and usage data for every user that visits your site. As the Rootstrap Blog explains:
“Keep those performance scripts running constantly. By leveraging these, you will do your whole business a favor. It allows an in-depth evaluation into usage scenarios and how these impact revenue. System performance monitoring is a huge aid to improving overall business intelligence.”
By all means, you should test as many scenarios as possible while your site is in development. But the reality is you can’t predict everything. Continuous performance monitoring lets you identify problems as they happen in the real world, which means you can iteratively improve your site over time.
Mobile-First Means a Change in Thinking
Ultimately, mobile-first design means flipping the entire design process on its head. Your core, fundamental target user changes: you’re no longer primarily concerned with how your site operates on a desktop platform. Instead, mobile visitors are your primary use case – desktop comes second.
For many web designers, mobile-first design can feel odd and sometimes unsatisfying. Designing for such a tiny screen is less fun, and it’s tempting to spend most of your time building out the big, beautiful desktop site.
But as traffic data show us, designing this way doesn’t match the world we live in. If you’re designing primarily for a desktop user, you’re designing for the minority. Inevitably, your users will feel that. As we move into 2020 and beyond, web designers will need to embrace the mobile-first mentality. Desktop is no longer the default – and it’s time for our design practices to reflect that.
Author Bio
Ben Lee is a tech influencer, one of Inc.’s 30 Under 30 Most Brilliant Entrepreneurs, and cofounder of Rootstrap, a digital creative studio that helps clients including Fortune 100 companies and early-stage startups with strategy, development, and growth. Rootstrap’s award-winning flagship service, Roadmapping, has helped over 500 entrepreneurs and startups hone their digital product for development & market success, with alumni raising an average of $250,000 in seed capital. Rootstrap regularly works with clients to develop mobile apps, web platforms, chatbots, and emerging tech projects, and past clients range from Snoop Dogg to Google and Spotify.
The post How to Develop and Test a Site Using Mobile-First Design appeared first on SpyreStudios.
from SpyreStudios http://spyrestudios.com/how-to-develop-and-test-a-site-using-mobile-first-design/
No comments:
Post a Comment