Designing for Mobile First
By Todd Williams
Today, a world of digital information comes at the swipe of a finger — 77% of Americans own smartphones, and they’re increasingly using them as a main method of Internet access (Pew Research Center). As mobile web traffic spikes, designers are challenged to create websites that function across multiple platforms and devices.
How do you take your vision for a desktop website, full of stunning visuals and impactful design elements, and translate it to a 4-inch smartphone screen? The trick is to work in reverse and design your website for mobile first.
Here are our 5 guidelines to follow when designing for mobile:
1. Do Your Homework
Before you’re nose-deep in UX debates and content brainstorms, define the purpose of your website. Understand your goals and customers to determine if mobile makes sense for your brand. Dig into your analytics and see where your web traffic is coming from — are you a B2B company that operates mainly on desktop, or an attraction that people Google on the go? At this point it’s important to bring your digital and creative teams together so they can marry design with performance.
2. Make Tough Decisions Early
While your designer’s heart may focus on eye-catching visuals, building websites for mobile is all about prioritizing user objectives and developing a clear content hierarchy. Designing for mobile forces you to think early on about the content that will be most important for your users. The content visible at the top of your site should be limited to the most important pieces of information and the strongest call to action.
3. Content Dictates Layout
When you’re designing websites for desktop, you have flexibility in terms of layout, allowing you to fill in your content as needed. You have the space you need to include bold graphics and visuals, and you can mold your content to fit your design. The opposite is true for mobile – the information you serve up is most important, and your content dictates what your site looks like.
4. Design for Mobile First
When designing for mobile, you have to make different design decisions than you would for a desktop site – certain elements won’t translate well on smaller screens. To maximize efficiency, start with the mobile version and work your way up to the desktop. Take a billboard for example – it’s easier to turn the content for a billboard into a print ad than the other way around. Similarly, it’s best to take less and turn it into more when designing for the web. That way, you’re not struggling to find space for your content.
5. Optimize User Experience
When it comes to engagement, you have a tight deadline — most users have a 7 second attention span. When people swipe through your website, they expect it to be relevant, functional and user-friendly. A high-performance mobile user experience builds relationships and showcases your brand. Consider finger-friendly designs that limit navigation like scrolling and clicking. Also consider load time, optimizing videos and images to make them fast and responsive. Google will prioritize your mobile-friendly website, helping you rank above other sites.
Need help getting your brand mobile-ready? Contact us today for a free consultation!
About the Author
Todd is a strategic and creative leader with over 15 years of experience delivering creative solutions that strengthen brands, generate results and fulfill business objectives. Todd offers expertise in multichannel marketing and advertising, with an emphasis on digital and web design. When he’s not designing for mobile first, he’s playing video games or starting office Nerf gun wars.