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.

Going mobile first is a no-brainer nowadays, but you do need to take it into account in your project estimates. Some features relying on Javascript for example will require more time from the developer to test all device-specific events like touch events on mobile. Unless you have the budget, you might run into situations where it doesn’t make sense to implement feature parity across devices. An experienced web agency like JAMStack Consulting can help you assess difficult technical decisions, so don’t hesitate to reach out!

8 Best Practices For Mobile First Design

  1. 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.

  1. 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.
  1. 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.
  1. 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.

  1. Typography

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.
  1. Tables

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.

  • Leverage horizontal scrolling - For tables with many columns, enable horizontal scrolling automatically on smaller screens. Use CSS overflow properties or JavaScript libraries to keep all columns accessible without affecting the document’s layout.
  • 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.

  1. 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:

  • Avoid popups on load - A classic mistake is to bombard users with popups―whether it’s cookie policy, email signup forms, or ads. On mobile, where screen space is even more limited, a popup avalanche is a sure way to irritate your potential customer.
  • 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.

  1. 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 &lt;nav>, &lt;article>, and &lt;section>, you create a solid foundation that is accessible and understandable by all devices and screen readers. Forms benefit a lot from modern browser support without even needing Javascript, so leverage it.
  • Enhance with CSS3 features - Leverage CSS3 features to enhance the visual presentation and interactivity of your website with transitions, animations, and other visual effects. It’s 2023, most animations don’t require Javascript anymore!
  • Finish with JavaScript for interactivity - Lastly, sprinkle some JavaScript to add interactivity and advanced functionality to your website but make sure to display a fallback even when JavaScript is disabled or not supported by the device.

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.

Hire Us

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.