Welcome to WebmasterWorld Guest from 34.204.171.108

Forum Moderators: not2easy

Message Too Old, No Replies

Mobile-first CSS

     
1:05 pm on Aug 25, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 285


Hi

I am surprised to see how many web masters / web designers are still writing "Desktop-first CSS", so I thought it might be useful to talk about Desktop and Mobile first CSS.

First of all, when we speak about "Mobile-first CSS" it has NOTHING to do, with designing a page layout in priority for mobile!

Mobile-first and Desktop-first CSS are only referring to the order in which you write your CSS. So it's purely technical consideration. (Mobile-first design is another subject).

Quick example, considering that Desktop is > 720px , mobile < 720px ( this is simplistic for the example only), let's take a div with a class "xyz" :

.xyz{background:red;}
@media only screen and (max-width:720px){.xyz{background:blue;}}

On Desktop the div will have a Red background, and on mobile a Blue background.

How does it translate for the rendering engine.

(1) xyz.background=red

(2) if(max-width<720px) then xyz.background=blue

So

- on dekstop, only (1) is executed, (2) is ignored.
- on mobile, (1) is executed AND (2) is executed.

So it means that on mobile, there are TWO "calculations/operations", before the class is defined.

Mobile devices are often less powerful than desktops, so what's the point to make them compute twice more things?

Now let's write the CSS in a different order:

.xyz{background:blue;}
@media only screen and (min-width:720px){.xyz{background:red;}}

This produces the exact same. Red on desktop and Blue on mobile, BUT, in that case, on mobile devices, there is only ONE "calculation", the second is ignored since the mobile device is not concerned by the condition.

Of course , in this example, this is extremely simple, but if you consider a real situation, you can see how much resources can be wasted on mobile devices, if the browser has to compute the desktop class parameters, and then again has to apply the mobile device parameters. You can see that this is in the interest of everybody to optimize how CSS are calculated, and avoid mobile to have to calculate things twice.

So writing Mobile-first CSS, can improve your first paint, and (may) make your page to start being displayed quickly on mobile devices, even if it's a matter of milliseconds, visitors can "feel" it.

(all optimizations all welcome)

ps: it' s again more true, if you have external CSS files, this will avoid extra file download and latency.
1:24 pm on Aug 25, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4523
votes: 350


If only browsers would ignore resources not intended for them. Unfortunately they don't ignore such external CSS files because they can't tell that they don't need those resources until they are read.
5:45 pm on Aug 25, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 285


I shouldn't have added the "ps". I am not using external CSS files, so I assumed that, since you can add a "media" parameter in the <link tag, I assumed that browsers were only loading files, if the media query was matching.
11:33 am on Aug 26, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


That's how I use media query, but I keep seeing it discussed in ways I don't think utilize the power of what it can do.

People search for ways to hide files from different screen sizes when all that is unnecessary if they'd just call the appropriate files using media query.
8:50 pm on Aug 26, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10469
votes: 1099


If one writes to the view port and has set the scale properly, most of this takes care of itself. Mobile has nothing to do with it. RESPONSIVE does.