What’s the Difference Between Mobile-First & Responsive Web Design?

mobile and responsive website design
Responsive web design & mobile-first design are two terms that are often used when referring to how mobile websites should be built.. But what do they mean and what are the differences?

Share This Post

Understanding these differences is essential if you are talking to a web designer or design company about what you want for your website. 

Responsive web design is a design implementation or style, while mobile-first is a design methodology or criterion. Thus, responsive web design may not be a mobile-first design, but a mobile-first design will almost certainly be responsive web design. Confused? Read on…

Responsive web design means that the web pages respond to the size of the display screen…

Responsive Web Design 

Responsive web design is all about having flexible web pages that adjust according to the size of the screen on which they are displayed. When the web first became available to the world at large, almost every user had a simple VGA screen that had a resolution of 640×480 pixels. Designers of the first websites could happily construct pages that displayed optimally at these dimensions. 

800×600 Res Screen = Perfect

When SVGA became available, screen resolutions increased to 800×600. This was followed by XGA, with resolutions of 1024×760. At the latter resolution, websites designed for 640×480 did not look so good. It was also clear that new technology would push screen resolutions up further. That led to the initiative to provide a means of flexible web design that could adapt to the display. CSS 2.12 introduced media types, but it was not until CSS 3 that true flexibility, or responsiveness, could be achieved through style sheets.

1024×760 Res Screen = a bit small….

Responsive web design means that the web pages respond to the size of the display screen. Let’s take a simple example where a web page displays three images alongside each other. The page was built with a desktop display in mind. If people browse the page from a tablet or smartphone, or people zoom in on a desktop, they may only see either all or part of, the image on the left. The other two images are outside the display area. 

Smaller Screens elements may get cut off…

This problem is solved to some extent by using responsive, or fluid, web design. The web page developer adds additional code that tells the page to display differently for different display sizes. In our example, the developer would ensure that the images are stacked on top of each other on smaller displays. The benefit of having a responsive design is that all the page contents can be displayed no matter what the display size is. 

Responsive Design: Elements can shrink, grow or wrap to fit any screen size

This may seem to solve all the problems of designing for multiple display sizes. It makes life easier from a maintenance point of view since only one version of each page exists. Unfortunately, there can be limitations to this approach.

Going back to our three images, what if each image has a caption underneath? The responsive page will duly display the caption below each image regardless of display size. However, the caption may look large and ungainly on smaller displays and can be wrapped over several lines, which is not visually appealing. It is possible to prevent this type of unwanted side effect by implementing a mobile-first approach to the design.

Mobile-first Design; To build web pages optimized for mobile display…

Mobile-first Design 

Mobile-first design is simply a methodology where designers build web pages optimized for mobile display. In other words, the mobile display is essentially the default design, and design for other display sizes follows. This approach is recommended by some pretty influential businesses, including, of course, Google, and is based on the fact that mobile is now the way most consumers will visit a website.

Mobile-first design: The layout is built for mobile first then tablet, then desktop
Mobile-first design: The layout is built for mobile first then tablet, then desktop

With our three images example, the mobile-first designer would ensure that the image captions are displayed in a font size suitable for mobile display, possibly hide one of the 3 images, or maybe the design would incorporate different captions depending on display size. 

Mobile-first design: Elements can grow, shrink, wrap and hide. Incorporate touch friendly navigation, large link buttons and space saving elements like the Burger menu for example

The example we have used with images is a fairly simple one, just for illustrative purposes. But there are many other aspects to optimizing a website for mobile use. For example, mobile users do not use a mouse (so mouse ‘hover’ or mouse ‘over’ is of no use), so the way a user navigates through a website is different, and this needs to be taken into account. Other considerations include; Larger fonts, space saving optimization like ‘Burger menu’ or navigation, smaller images and scripts, large link and button areas. Another key aspect is page load times. 

Aha! So that’s why it’s called a Burger menu!

In summary, the principle behind the mobile-first design is that websites should be built to provide the best possible user experience for mobile users. Achieving that will most likely involve using responsive web pages, but building responsive web pages does not in itself mean a web page will be optimized for mobiles.

Is your website Responsive and Mobile friendly? Gives us a call today!

Keep Reading

branding in hip hop culture

Branding in Hip Hop Culture

In this post we explore some of our favorite examples of branding in hip hop culture. We talk about why some of these branding efforts work so well, and how they’ve influenced the culture as a whole. Walk this way…

How to market to gen x

Marketing to Gen X

If you grew up around the turn of the millennium, Gen X is the demographic that uses modern tech but thoroughly annoy you when they do!