Mobile First

Menu
Menu

Introduction to 'Mobile First' Web Development

Most people these days will view web pages through their mobile devices. This caused a paradigm shift amongst web developers many of whom came to adopt a 'mobile first' apprach to their designs. 'Mobile first' web development is an approach where design and development begin with the smallest screen sizes, primarily mobile devices, and then scale up to larger screens like tablets and desktops. This strategy emerged as mobile web usage grew rapidly, making it crucial for websites to be accessible and user-friendly on mobile devices. By starting with the smallest screen and essential content, as developers we can ensure the core user experience is solid, and then they progressively enhance the design for larger screens.

Responsive Web Design: The concept of the web pages resizing for different devices is commonly known as Responsive Web Design. Mobile First is just one strategy that allows for Responsive Web Design.

Know your Pixels

Before getting into the concept of mobile first it is useful to consider the humble pixel. As a web designer it is important you have a grasp of the likely values in pixels that screen widths occupy. This is represented as width x height. That is the number of coloured dots across and then down the screen. We are generally interested in width rather than height, as we want to ensure are designs don't force a user to scroll horizontally. As a guide here are some popular devices and screen sizes in pixels.

Device Screen Size
'Standard' Desktop screen 1366 x 768
iPad 1024 x 768
iPhone Screen 5s 320 x 568

For information you are viewing this on a screen that is pixels

Origins of the Meta Viewport Tag

One of the critical components of mobile-first development is the use of the meta viewport tag. In the early days of mobile web browsing, websites designed primarily for desktops were often poorly rendered on mobile devices. They would appear zoomed out, requiring users to pinch and zoom to interact with the content.

The layout viewport is the virtual area used by the browser to render a webpage before considering the actual screen size of the device. In early mobile browsers, the layout viewport was set to a width that mimicked a desktop screen (typically around 980px). This resulted in websites appearing zoomed out on mobile devices. Even today, some browsers still use a larger layout viewport for compatibility with non-responsive sites.

When Apple released the first iPhone in 2007, it introduced the meta viewport tag as a solution to improve web experiences on mobile devices. The viewport tag allows developers to control the layout viewport's size and scale, giving them more control over how content appears on small screens.

The basic syntax for the meta viewport tag is:

Let’s break down the attributes:

For example, on the original iPhone, the device’s screen width was 320px, but without the viewport tag, it would try to display a webpage as if it had a much larger 980px screen, resulting in a zoomed-out view.

Compare pages with and without the meta viewport. It is best if you can view these on a mobile device (or use the mobile emulator view in your browser):

Media Queries and the Mobile-First Approach

With the introduction of the meta viewport tag, mobile-first design became more practical. In a mobile-first strategy, developers define styles for small screens first and then apply additional styles for larger screens as needed. This is typically done using media queries with the min-width condition, which applies styles progressively as the screen size increases.

A simple example using media queries in the <link> element:

Here the mobile.css is loaded for all users. If the user is on a device at least 600px wide, then the second stylesheet desktop.css is also loaded.

So mobile.css is loaded first and if desktop.css is then loaded, the rules it contains can enhance or overwrite those in mobile.css.

Note: With this mobile first approach the file mobile.css is not overwritten by desktop.css for 600px plus users, but both files are loaded. Under CSS specificity as the desktop.css is loaded second, if it contains any conflicting rules with mobile.css, then the desktop.css rules prevail. You can see this in the Chrome Dev Tools as a line through any overwritten rules.

Breakpoints with min-width and max-width

We have just seen an example with min-width used to load new stylesheets if a minimum screen width is detected. There is also a max-width condition. The values at which these conditions are applied are known as 'breakpoints', and will generally be used to categorize device/media types, ie mobile, tablet, desktop.

min-width
Applies styles when the viewport is at least a certain width. Associated with 'mobile first' and used to load styles as the viewport increases.
max-width
The max-width property applies styles when the viewport is equal to or smaller than a certain width. The styles you define with max-width apply when the screen is narrower than that specified width.

With mobile first we can generally just use min-width for example:

In this structure:

A use-case for max-width is where we might want to apply a style between a particular range. This is useful for targeting tablets which can vary in viewport when in portrait or landscape mode.

An example using this would be:

Media Queries in CSS

An alternative approach to using the <link> with media queries is to embed them in your CSS file using the @media 'at-rule'. The @media effectively act as conditional logic with min-width and/or max-width type conditions wrapped around the rules to be applied in curley brackets { .... }.

This has the benefits of allowing you to have one CSS file with all your rules in. A basic example would be:

In this example, the base styles are applied to all screen sizes by default, and then larger screens progressively receive additional styling based on the min-width breakpoints.

Responsive Images

Images in responsive designs do need some care and attention.

When it comes to handling images across different devices screens there have been a range of techniques used over the years. The most straight-forward technique is to use a percentage width on the <img> tag.

The above creates a class that could be applied to any image that needs to resize with its parent's dimension.

This technique relies on the <img> been inside of a parent element, as the percentage width value is relative to the parent container's width.

The CodePen below shows this technique in action:

See the Pen Responsive Image by Martin Cooper (@mustbebuilt) on CodePen.

Examples of Mobile First Designs

Below are a couple of examples of web page layouts created using the mobile first approach. Open these in your browser and use the Google Chrome Developer tools to view the pages at different widths.

To emphasis the different breakpoints there are different background images in the desktop.css and tablet.css but no background image in the mobile.css.

Chrome Dev Tools Mobile View

Flexbox Example

Making the screen bigger, you will fall into the breakpoint at 768px and the stylesheet tablet.css is loaded. The design will change adding colour and a background image. The stylesheet also sets the <main> tag to display:flex creating a flex container. One the flex items <nav> is given 25% of the flex container space with the property flex:0 0 25%, the zero values indicating that it cannot grow or shrink.

Finally, moving out to a breakpoint at 1200px, the desktop.css loads. The display:flex is no longer applied to <main>, and it returns to a simple display:block such that the navigation appears above the <section> that holds the bulk of the text.

Grid Example

The design is replicated solely with grid. As with the flexbox example it is the tablet.css that holds the intereting code. This applies a display:grid to <main> with settings of grid-template-columns: 1fr 3fr; which is all that is needed to creat the 25%/75% split between the <nav> and <section>.

The mobile and design stylesheets just let the block elements do their thing adding the colour and images as appropriate.