Mobile First

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.

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:

• width=device-width: Sets the width of the viewport to match the width of the device screen, rather than defaulting to a larger desktop-like width (e.g., 980px).
• initial-scale=1.0: Ensures the initial zoom level is set to 100%, preventing automatic scaling that can cause content to appear too large or too small.
• Additional options, like user-scalable=no, can be used to disable zooming (though this is often discouraged for accessibility reasons).

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):

• No Viewport
• Meta Viewport Set

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.

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:

• styles.css contains the default styles optimized for mobile devices.
• styles-tablet.css adds styles for screens that are at least 600px wide, typically targeting tablets.
• styles-desktop.css contains styles for screens 1024px and wider, such as desktops and larger laptops.

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:

• The mobile.css stylesheet is loaded by default, without any media query.
• The tablet.css stylesheet is loaded only when the screen width is between 768px and 1199px (thus targeting tablets). The min-width: 768px ensures that this stylesheet is only used when the screen is wider than 768px. The max-width: 1199px limits the styles to screens narrower than 1200px.
• The desktop.css stylesheet is loaded only when the screen width is 1200px or larger (targeting desktops and larger laptops). The min-width: 1200px ensures that these styles are applied only on large screens.

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.

Flexbox Example

• Demo Responsive Site built with Flexbox and media queries

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

• Grid version with media queries

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.