Designing for Mobile First
When creating any website, consider the various device types and screen sizes that users may be accessing it from. From my experience, mobile users are currently making up 60-70% of website traffic. This is where responsive design comes in - it's a framework that allows a website to automatically adjust to the user's device.
There are various tools available to help create responsive designs, such as Bootstrap, Foundation, and Bulma. Many of the common CMS platforms offer a form of responsive design out of the box for less technical website creators.
When designing a website, it's essential to take a mobile-first approach. This means designing templates and content types with mobile devices in mind, and testing them on a variety of display sizes. However, it's important to keep in mind that graphics, breakpoints, copy, and buttons may not always line up perfectly. Therefore, it's essential to test and improve the design as necessary.
Agency Secret: Require that mobile designs be part of any mockups you get! Don’t settle to just review a desktop version of any creative, it only shows that your partners are being lazy. Mobile is harder, but when it’s the majority of your users, don’t settle.
Optimize the following for mobile:
Load speeds: Large images can significantly impact a website's load speed, especially on mobile devices.
Button size: Make sure buttons are large enough to be easily tapped with a finger. Avoid small buttons, especially in pop-ups.
Hover states: These may not be intuitive for mobile users, so consider the user experience when designing hover states.
Mobile navigation: Navigation should be easy to use on a mobile device, with simple finger interactions.
Checkout: Keep the checkout process simple, with minimal pages, auto-completion, multiple payment options, and a guest checkout option.
Need Help Prioritizing eComm Projects?
I’ve spent years with major brands analyzing and prioritizing enhancements to eCommerce stores. Book a quick conversation with me and let’s see if I can help prioritize your business!
Key Takeaways
Wrapping it up, designing for mobile first requires a responsive design framework, testing and improving the design for various display sizes, and considering the specific needs of mobile users such as load speeds, button size, hover states, mobile navigation and checkout process.
Also, don’t settle for just a desktop mockups! Get the mobile designs and ensure you’re supporting most of your users.
