Version: 2012.03.02
This extension adds fields for the user agent's browser window properties to the param pool so you can deliver optimized media sizes in responsive layouts similar to https://github.com/filamentgroup/Responsive-Images.
- jQuery (though you could get around it if you wanted)
- Modernizr (optional)
- Add the folder to your extensions folder.
- Enable the extension in
System -> extensions - Add the text of js/plugin.js to your scripts.
- You're done!.
This extensions is one part of a two-part process and is best used with client-side javascript to deliver optimized media and code for each medium. js/script.js is an example for using Modernizr for javascript media queries. js/plugin.js polls the width of the window and the screen whenever the browser is resized and saves the sizes to six cookies: window-width window-height screen-width screen-height pixel-density and pixel-density which are added to your param pool at the next page request. From there you can use them to set choose-when-otherwise conditions to deliver optimized media and code for paticular screen properties.
(Note: If you are not already using jQuery you should probably use another methods to set your cookies such as https://stackoverflow.com/a/8876069)
While most users do not constantly change their browser and screen sizes, some do. This is especially important for users who plug their notebooks into external monitors and projectors.
While the maximum screen width is useful for figuring out the largest possible size people use, those with giant screens rarely set their browser windows to full width. This means that sending really large media is unnecessary and takes up bandwidth.
Server-side optimization is only a part of the responsive web design toolkit. You will still want to use client-side javascript for user agent changes that take place (eg resizing the window). If you are using Modernizr (modernizr.com), you can use js/script.js as a foundation for writing client-side responsive javascript.
While this extension (sort of) gives you the ability to deliver content based on device, you should not use it to dumb down your content for smaller devices. Instead, build your design and content around mobile-first principles and work your way up to larger screens.
Released under MIT, just like Symphony CMS. Share and enjoy!