CSS Media Queries – The Best Option for Mobile Web Design?
September 23, 2022
As the complexities and needs for a high performance mobile internet continually intensifies, web developers and web designers are looking at new ways to ensure optimum functioning for mobile web sites. One of those scripting tools is CSS media queries. But is its use in the portable world as useful as many are making out?
Unfortunately it seems the whole philosophy of using this method appears to be questionable from the outset. In order to use CSS media queries you will be using more code where the site will be seen on a smaller screen, powered by a less powerful CPU than a PC, and necessarily, has a slower network.
So in effect you are giving a smaller less powerful device more to download and therefore slowing everything down! Performance is perhaps more important on the mobile phone than a desktop. i.e. you are more likely to be urgently looking for business information, wanting to connect to a social network or your emails within a short period of time.
There is also the images issue with CSS queries. The problem is with a technique called Fluid Images. Developers can input the scripting so the browser actually resizes the full image. Downloading this size of an original image file on to a mobile phone can even be a lot for a top of the range iPhone or Blackberry to deal with. Older mobile versions or less able phones may well struggle.
The other most powerful aspect to take into consideration is that CSS queries are not even supported by many mobile browsers. It is inconsistent at best. Presumably the goal of re-structuring a web site for good performance on mobile devices is to reach a greater and more expansive audience. By using CSS queries you are in effect only reaching a select proportion of the mobile audience.