MEDIA QUERIES ARE GREAT, BUT...
Media queries are awesome, a godsend for website developers that want to make small tweaks to their stylesheets to give a better experience for users on devices of various sizes. Media queries essentially let you customize the CSS of your site depending on screen size. Before you dive into this article, learn more about responsive design and check out some fine examples of media queries usage here: mediaqueri.es.
As Brad Frost points out in an earlier article, changing the look is only one of many things to consider when building for the mobile web. If the only thing you do when you build your mobile website is customize your layout with media queries, then we have the following situation:
All devices get the same JavaScript, CSS, and assets (images, videos), resulting in longer than necessary load times.
All devices get the same initial DOM, potentially forcing developers to write overly complicated CSS.
Little flexibility to specify custom interactions tailored to each device.
WEBAPPS NEED MORE THAN MEDIA QUERIES
Don't get me wrong. I don't hate responsive design via media queries, and definitely think it has a place in the world. Furthermore, some of the above mentioned issues can be resolved with approaches such as responsive images, dynamic script loading, etc. However, at a certain point, you may find yourself doing too many incremental tweaks, and may be better off serving different versions.
As the UIs you build increase in complexity, and you gravitate toward single-page webapps, you’ll want to do more to customize UIs for each type of device. This article will teach you how to do these customizations with a minimal amount of effort. The general approach involves classifying your visitor’s device into the right device class, and serving the appropriate version to that device, while maximizing code reuse between versions.
janainaart
origamiaround
gummygunk
dailybridgerton
jacobvanloon
stormborns
titsay
romaincrisis