With more than 1 billion smartphones shipped last year, there’s no going back to designing for desktops and figuring out mobile later.

Responsive Mockup Image

8 Ways to Make Your Website Design Mobile First

Thu Apr 5, 2018

When customers ask me about how to make their websites mobile friendly, they’re often anxious about starting what sounds like a really difficult project. And that’s understandable. Mobile web usage is projected to overtake desktop usage for the first time ever in 2014, and that means there’s no going back to designing for desktops and figuring out mobile later. 

Although best practices for mobile are still being defined, responsive design is beginning to dominate as the best solution for a mobile-friendly web experience. Mobile-only websites (sometimes called M-dot sites because of their m.yoursite.com URLs) provide only a limited version of the full website, and don’t always line up to the main website in terms of content and branding. Moving forward, the question has been settled for a lot of organizations that want to go mobile: making their website design fully responsive is the way to go.

The biggest hurdle these projects run into is not technological or skill related. It’s not staffing or the content management system or lack of enthusiasm for the project: it’s outmoded thinking, rooted in the desktop design era. 

I decided to break out the major differences between designing desktop-first and mobile-first (a term coined by Luke Wroblewski) websites and web experiences. If you’re considering a mobile-first redesign of your site, or need to optimize what you already have, this is a great starting point to see where you need to think differently. 

1. Design for the smallest screen first

Shrinking your website to fit on a tiny screen doesn’t make it usable or mobile friendly, just smaller. You can no longer assume visitors will just go back to their computers, especially when a competitor’s website is mobile optimized already. Your mobile optimized website should offer a complete experience that allows a visitor to find crucial information, contact you, or make a purchase, regardless of screen size.

2. Think task-oriented instead of browsing-oriented

Whatever a visitor needs to do on your site, she wants to do it now. Clicking several levels down to find what she needs is frustrating, and the mobile user's perception of speed is skewed to make your site seem slower.. Real estate and time are short and you might only have space for one important message, one call to action, and two navigation options before the mobile visitor has to scroll.

3. Define what’s most important

From a user experience (UX) standpoint, having too many options on the homepage is never a good practice, but certainly easier to get away with on a larger screen that doesn’t require you to scroll to see all the information. Fewer options work better for users on any device, but are absolutely necessary on a mobile one. You will need to identify what is most crucial for your visitors and your business and limit other elements, avoiding an information architecture that is too flat.

4. Choose progressive enhancement over graceful degradation

Graceful degradation means designing in a way that when viewed in incompatible browsers or on various devices, the website would lose some of the flourishes, but mostly appear intact and not completely broken. Mobile-first doesn’t focus on what can be added to enhance, but rather what can be subtracted and still provide a polished, user-friendly design and experience. Progressive enhancement is about understanding what’s essential, and then adding functional enhancements as screen size increases.

5. Plan for resource constraints

Responsive design goes beyond small screens. Not all mobile web users have unlimited data plans, or find themselves in 4G LTE covered areas. Your website needs to load quickly and perform well despite these constraints because device and carrier limitations should not stand between you and your customer.

6. Leverage mobile-only capabilities

While there are a lot of things you can do on a desktop site that you can’t (and shouldn’t) attempt on a mobile device, there are things you can do only on mobile. Location services, built-in camera and microphone, screen orientation are all features that open new paths to interacting with your website. Think about how the unique features of mobile can work to your advantage.

7. Recognize which user base is shrinking

Fewer people are buying desktop computers, and mobile carrier subsidies are making tablets and smartphones more affordable for families that couldn’t afford a computer for each member. According to PC World, the global smartphone market topped 1 billion shipments for the first time in 2013. That’s a smart phone for one out of every 7 people on the planet, and the sole point of Internet access for many of them.

8. Serve the user first

Your website should always serve your business goals, but when space, speed, and bandwidth are not concerns, it’s easy to fall into vanity-driven decision making, including or featuring information that doesn’t help the site visitor. This is really a key tenet of mobile-first thinking: putting the user first is not just the preferred way, it’s really the only way to design a successful experience.

Mobile web design continues to evolve alongside mobile web user habits. With so much still uncertain and unknown, the best way to plan a mobile-focused web strategy or project is to set aside your former web experience. Start without the old assumptions, and with the sole focus of doing what is absolutely best and necessary for the user. With that as your foundation, you can design for mobile success.

Jon Lapomardo Headshot
Jon Lapomardo
Customer Success Manager | Percussion Software

As a customer success manager at Percussion, Jon spends his days helping customers through every stage of their implementation. Whether it's assisting with planning the project, walking them through a task, or cheering them on, he's become the go-to guy for many happy Percussion customers. Jon is a Renaissance man, who besides his mastery of web development, has a background in philosophy, is a passionate musician, and active community volunteer.