Web Designer Freelance Interview Question:

Tell us when talking about responsive web design, what are the differences between the Mobile First and the Desktop First approaches?
Where does each excel and what are some of the issues it leads to?

Submitted by: Muhammad

► ► Mobile First is a methodology for creating responsive CSS code where the styles for mobile devices are written first, without media queries, and for each screen size step up, a new media query is added extending, modifying and overriding the existing styles of the previous (smaller) step.

☛ Advantages - Easiest to optimise load times on smaller devices as no extra assets and styles apply (the assets linked in the following media queries don't get loaded). Very effective for simpler designs where larger screen styles are an upgraded version of the smaller ones, for example, when decoration or new elements are added for richer experience on larger screens.

☛ Disadvantages - This technique is not as effective if the mobile and the desktop versions of the layout have significant differences, or for complex layouts and for most web apps. In such cases, the Mobile First code gets more complex than necessary with too many overrides.


► ► Desktop First is the classic way of writing CSS; the desktop version of the styles is either not in media queries or starts with a minimum width requirement, and for each screen size smaller than the initial one, a new media query is added starting from the largest to the smallest. With each consequent media query, elements are hidden, rearranged or re-styled.

☛ Advantages - As opposed to the Mobile First approach, Desktop First excels at designs that significantly differ between screen sizes, such as when elements are removed as the screen gets smaller. This is also the only way to add responsive capabilities to an existing older website without rewriting its code.

☛ Disadvantages - If not implemented correctly, it could lead to unused or overridden code and assets being loaded on smaller devices thus making the website heavier on smartphones. This leads to unnecessary overriding of styles and writing extra code for simpler designs where Mobile First could be implemented more easily.
For websites where the mobile and desktop versions are slightly different, it's generally a better practice to serve separate stylesheets based on screen size, or to isolate the two layouts in non-overlapping media queries, each strongly specific to its target devices.
Submitted by: Muhammad