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