CODEWITHSUNDEEP
htmlcssmedia-queries
1252748
1252748

Reputation: 15369

how do media queries increase site performance for mobile users

I've read that using media queries to change a site for a mobile device is good because it is less overhead and phones have less download speed. But how does that help? Can I do anything but just hide the elements I don't want seen on the mobile device? it still has to download the hidden elements. So what's the gain? I'm quite confused.

Upvotes: 4

Views: 230

Answers (2)

Aaron Brewer
Aaron Brewer

Reputation: 3667

The whole idea of Responsive/Adaptive Website Design is not so much on making the size of your web page or it's assets smaller... It's about making content accessible and readable for people that are viewing your website on a Mobile Device. I would never say to hide elements just because someone is on a mobile device, I would say design and develop accordingly so the content is more presentable on a Mobile and or Tablet device.

Per your gain statement; The gain that you receive from designing and developing a website that is catered not only to desktop users, but mobile and tablet users as well. More people will be less prone to leave and more prone to stay and check out your content.

You can read more up on 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 may also read 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 Responsive/Adaptive Website Design.

Hope this helped!

Upvotes: 1

Brett
Brett

Reputation: 2785

Through media queries and CSS you don't just "hide" the content. Depending on how you set it up, you're not just hiding the content - it's not getting loaded.

You can also use media queries to choose image resolution, depending on the viewport. You can send lower-resolution images to mobile devices and hi-res to retina displays.

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

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

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

Upvotes: 0

Related Questions