CODEWITHSUNDEEP
performanceresponsive-design
Amit Kumar Gupta
Amit Kumar Gupta

Reputation: 7413

responsive web design using @media rule and total size of a webpage

The purpose of @media rule is to apply various CSS settings when viewport get resized.

If I take an example of responsive menu, where we replace a horizontal menu bar with select box when viewport gets decreased, I'll have code for both select box as well as for horizontal menu. So that I can hide either of them when viewport gets changed. Same with replacing images for small view port. In addition, all CSS for different view ports would be loaded at client machine.

I feel it'll increase overall size of a webpage.

Please let me know, if we can do some conditional loading, or if there is some other effective alternative.

One of the way I figure out, is to put some conditions at server side on the basis of user-agent. But it'll not work for HTML sites, and require a lot of server side code.

Upvotes: 0

Views: 73

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

If you can live with focusing on the image sizes rather than the size of the HTML file, here are some ideas.

  • Adaptive Images detects screen size and automatically delivers appropriate sized images (based on break points you set). It can be applied retroactively to a site, so easy enough to check if it's a good solution for you.

  • Creating divs with background images means you can easily specify different background images at different viewports, so this will be more efficient than loading a full sized image which you scale down for mobile.

  • Foundation from Zurb has just introduced Interchange which does something similar to Adaptive Images, serving device appropriate images

Hopefully one of these approaches might work well for you. Good luck!

Upvotes: 1

Related Questions