Mobile First vs Responsive Web Design

You may have seen the term mobile-first when reading about web design and may have wondered what it means? What is the difference between Mobile First and responsive web design? We use the term here at Pixel Perfect Web Design and so will explain the difference and why it is important.

Responsive Web Design

Mobile First Responsive Web Design Infographic

First, we are going to look at what responsive web design is and why it is still important.  Fluid, adaptive, flexible, liquid, elastic are some of the descriptive names used when talking about web design.  Essentially they are all the same, web pages that adapt to the viewport and size of the browser window.  This is what responsive web design is, websites that respond to the size of the browser window.  If you are viewing this page on a desktop or laptop, try resizing the window and you will see the page change and respond to the window size.

To enable the page the respond to the window change, the elements that make up the page adapt.  Images resize, text moves and some parts disappear when you resize the page down to the same size as a mobile device.  Responsive design allows web pages to be viewed on any device and still keep its design. Designing different page to fit the vast amount of phones and tablets available would not work. Additionally as monitors for desktops have become bigger, users resize their browsers to view multiple applications on the same screen. By using responsive design techniques you can target different devices based on size and orientation so the page adapts.

Responsive web design means ‘web pages that adapt to the viewing environment to minimise resizing, panning and scrolling’.

Is responsive web design still important?

Yes, responsive web design is still the way we design pages. We want them to work across all browsers and view-ports so we still need to design pages that adapt.

Mobile First

Mobile first describes how a website or page is designed. The key difference is that with a mobile-first approach, the design is created for mobile devices first. It then adapts and responds to the bigger screens of tablets, laptops and desktops.

Mobile First is still responsive web design but with more than

60% of all web browsing is done on a mobile phone or tablet, it makes sense that we design for these devices first.

AMP – Accelerated Mobile Pages

Different to responsive and mobile first web design, AMP is where pages are designed to be faster loading for mobile devices. AMP pages are separate pages that are optimised using AMP HTML, AMP Java-script and AMP Cache. AMP pages can be viewed on any browser if you want to see the amp version of this page click this link.

Whilst Accelerated Mobile Pages are good for delivering content quickly, they do not replace standard mobile first responsive sites. If you would like to read more about Accelerated Mobile Pages the AMP Project has lots of information.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.