Mobile-First Web Development (2023): Best Practices To Get Started
If you’ve ever tried to visit an unusable website from your smartphone, you know the pain. With 50% of all users browsing the web with a smartphone, mobile-first design has never been more relevant since failing to comply with modern devices results in higher bounce rates, lower search engine rankings, and lost customer acquisition.
Mobile first design is included when you hire a professional web agency like JAMStack Consulting, so it’s not always obvious to understand the efforts that go into it: that’s why in this article, we break down the best practices we follow to deliver truly responsive websites and web apps. Make sure these are included in your next project’s scope to make the most of it!
What’s Responsive Design
Mobile-first design means prioritizing the development of a website for mobile devices to ensure the website's content and features are accessible and usable on smaller screens.
Traditionally, web designers visualize websites on their desktop screen so the design is influenced by the screen’s dimensions, but with the rapid increase in mobile device usage the paradigm shifted towards testing on screen dimensions closer to a mobile phone’s. Because there is less room to display important information, the developer needs to adjust accordingly.
The notion of mobile-first design is also referred to as responsiveness―the ability of a website to dynamically adapt to different screen sizes and orientations.
Why Mobile First Design
Aside from the fact mobile devices have become the primary means of accessing the internet for many users, a positive mobile experience leads to increased engagement and longer visit durations. Search engines like Google will penalize you if you fail to meet accessibility criteria, so mobile-first design is also necessary to increase your visibility to potential customers.
Because responsive design focuses on creating an intuitive and frictionless user journey that makes it easier for mobile users to find information and make purchases, businesses can significantly improve their conversion rates by simply applying design principles.
Most people carry their smartphones everywhere they go, so optimizing your website for mobile use is also an opportunity to increase your retention rates using push notifications and other web APIs to engage with users whenever they are.
Mobile First Vs Desktop First
Mobile-first design starts with designing for smaller screens and gradually scales up to larger screens, whereas desktop-first design begins with designing for larger screens and then adapts to smaller screens. Mobile-first design involves condensing, reorganizing, or even eliminating non-essential elements to maintain a clean and uncluttered user interface, while desktop-first design may incorporate more complex layouts and additional features for larger screens.
8 Best Practices For Mobile First Design
- Media queries
Media queries is a CSS feature that allows developers to apply specific CSS styles based on the characteristics of the user's device like screen size, orientation, and even features like touch support.
- Start with standard breakpoints - Use media queries to define breakpoints and apply appropriate styles. Breakpoints are specific screen sizes at which the layout of a website or application changes to accommodate different devices. Consider common device categories like mobile phones (< 768px), tablets (768px), laptops (1366 pixels), and desktops (> 1366px).
- Prioritize the content - As the viewport becomes smaller, rearrange elements to display the most important information first, ensuring it remains easily accessible and prominent. Consider hiding or minimizing non-essential elements to maintain a clean and uncluttered layout on smaller screens.
- Leverage responsive layouts - Grid and flexbox layouts can easily be transformed to look good on both small and larger screens, so make sure to prefer them over more methods like floats or absolute positioning.
Using CSS libraries like TailwindCSS saves a significant amount of time thanks to built-in classes and styles. Sso don’t reinvent the wheel if possible.
- Metadata values
HTML meta tags provide important information to browsers and search engines to optimize the display, behavior, and accessibility of websites on multiple devices.
- Viewport - The viewport meta tag enables the browser to adjust the page's dimensions based on the device's screen size. By default, use the "<meta name="viewport" content="width=device-width, initial-scale=1" />" tag to set the viewport's width to the device's width.
- Accessibility tags - HTML meta tags can provide information to assistive technologies and users with disabilities. Use the "lang" attribute to specify the language of the content for screen readers and translation tools to adapt. Also include the "role" attribute to define the role of certain elements like navigation for better accessibility.
- Browser testing
Browser testing ensures a website functions as expected across different devices.
- Test on different browsers - Test your website on multiple web browsers like Chrome, Firefox, Safari, and Microsoft Edge, including mobile-specific browsers like Safari for iOS or Opera Mobile. Each browser can interpret CSS and HTML slightly differently so you need to identify inconsistencies or compatibility issues.
- Test on different devices - Conduct thorough testing on different devices and screen sizes, including user interactions. Emulators and browser developer tools can help simulate various devices, but it's also important to perform real-world testing on physical devices whenever possible.
- Measure core web vitals - Core Web Vitals metrics obtained via tools like Google Lighthouse help you identify areas in your user journey that need improvement like optimizing large contentful elements, reducing input delays, and minimizing layout shifts.
- Image optimization
Images represent more than 60% of a webpage’s size on average, so optimizing them is key for optimal user experience.
- Responsive images - Responsive images leveraging the "srcset" and "sizes" attributes allows you to provide multiple image sources with different resolutions or sizes to let the browser select the most suitable image based on the device's properties and prevent unnecessary data consumption and loading time.
- Lazy loading - Lazy loading images located below the fold is also mandatory to reduce the initial page load time. As users scroll down, images are loaded dynamically, ensuring faster initial rendering and improved perceived performance.
For more best practices to optimize your images, take 5 minutes to read our dedicated article on NextJS images.
Optimal font styles directly impact readability.
- Use relative units - Instead of using fixed pixel sizes for fonts, employ relative units like percentages (%), ems (em), or rems (rem) to scale appropriately on different devices while ensuring a consistent reading experience.
- Pick fonts carefully - Some fonts can look good on a desktop but become unreadable when you decrease the size. Unless you know what you’re doing, prefer standard or popular fonts like Roboto, Open Sans, Helvetica, etc.
Tables often contain large amounts of data that do not fit well on smaller screens. Unfortunately, the native HTML tag isn’t responsive by default, so you’ll need to implement it yourself or use a third-party library.
- Add an option to collapse or hide columns - Identify non-essential or less important columns within the table and give the option to collapse or hide them on smaller screens.
- Avoid displaying too many rows - Use pagination to avoid excessive DOM nodes.
Lastly, consider displaying a summary of the content instead of the entire table. This summary could give users an overview of the data and help them decide whether they need to explore the complete table or not.
- Pop Ups
Marketers love popups. They can be used to display important messages, capture attention, or present offers. One of the most common problems web users encounter on a mobile website though is badly designed pop-ups that completely ruin the experience:
- Prefer exit intent popups - Exit intent popups appear when visitors are about to leave the website. Because they appear after the users have found what they are looking for, they are best to retain users and convert them into customers.
As a marketer, my professional opinion is that it’s usually best to stick to well-designed call-to-actions instead of relying on popups on mobile: they’ll be just as impactful with proper design, but they’ll integrate much more smoothly in the flow of the app.
- Progressive enhancement
Progressive enhancement is the principle of starting with a solid technical foundation and then progressively enhancing the experience for devices with more advanced browser features. This way, a user will still be able to use your website even though a device compatibility problem occurs.
- Leverage semantic HTML first - Prioritize semantic HTML markup to structure the content of your website. By using proper HTML elements such as headings, paragraphs, lists, and semantic tags like
Ideally, all websites should be progressive web applications (PWA). By definition, mobile networks aren’t as reliable as your home’s wifi so you need to **account for offline scenarios **to be truly mobile first.
Responsive web design is crucial to allow users to access your website from a variety of devices and screen sizes, but it requires adequate planning and adherence to a set of best practices. We learned about the importance of media queries, HTML metatags, browser testing, image optimization, typography, and progressive enhancement, while detailing how to handle key elements like tables, navigation and popups.
While implementing these best practices may seem daunting, you don't have to tackle them alone: JAMStack Consulting, our web development agency based in the US, specializes in responsive web design both on mobile and desktop and can handle these for you. Whether you need assistance in implementing responsive design for your existing website or require a responsive web solution from scratch, we can do it! Reach out to us today.