How media queries improve site performance for mobile users

Question

I read that using media queries to change the site for a mobile device is good because it has less overhead and phones have lower download speeds. But how does this help? Can I do something, but just hide the elements that I don’t want to see on my mobile device? it should still load hidden elements. So what is the gain? I am very confused.

Answer 1

The whole idea of ​​adaptive / adaptive website design is not so much to make the size of your web page, or less assets ... It's about making content accessible and readable for people viewing your site on a mobile device. I would never say to hide elements just because someone on a mobile device, I would say design and development, so that the content is more presentable on a mobile device or tablet device.

For your claim of winning; You get from designing and developing a website that serves not only desktop users, but also mobile and tablet users. More people will be less likely to quit and more likely to stay and check your content.

You can read more responsive website design below:

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

http://www.techrepublic.com/blog/webmaster/how-to-get-started-with-responsive-web-design/1769

http://www.alistapart.com/articles/responsive-web-design/

You can also learn more about the benefits of responsive website design below:

http://www.loungelizard.com/web-design-blogs/design/the-benefits-of-responsive-web-design/

http://www.seomoz.org/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers

Quick Note: Media queries go hand in hand with a responsive / responsive website design.

Hope this helps!

Answer 2

With media queries and CSS, you don't just “hide” content. Depending on how you configured it, you do not just hide the content - it does not load.

You can also use media queries to select image resolution depending on the viewing area. You can send low-resolution images to mobile devices and greet on retina displays.

See: http://css-tricks.com/snippets/css/retina-display-media-query/

http://menacingcloud.com/?c=highPixelDensityDisplays

http://www.leemunroe.com/responsive-design/