1.3.0experimentalScreen Detection

This extension adds user screen information to the symphony param pool for server-side optimizations for responsive web design.

Clone URLhttps://github.com/thebestsophist/Screen_Detection.git

Add as a submodulegit submodule add https://github.com/thebestsophist/Screen_Detection.git extensions/Screen_Detection --recursive

Compatibility

2.x.x2.1.x2.2.x2.3.x2.4.x2.5.x2.6.x2.7.0
NoNoNo1.3.0NoNoNoNo. Soon?

Readme

Screen detection

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.

Requirements

  • jQuery (though you could get around it if you wanted)
  • Modernizr (optional)

Installation

  1. Add the folder to your extensions folder.
  2. Enable the extension in System -> extensions
  3. Add the text of js/plugin.js to your scripts.
  4. You're done!.

How it works

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 http://stackoverflow.com/a/8876069)

Why keep polling for changes?

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.

Why not just use screen width?

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.

Fallback

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.

How you (probably) shouldn't use this extension.

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.

License

Released under MIT, just like Symphony CMS. Share and enjoy!

Version history

Symphony 2.2.3 to 2.3.x

  • Updating broken extension id (per http://www.getsymphony.com/discuss/thread/103681/1/#position-5)

Symphony 2.2.3 to 2.3

  • Added version requirements. No functional changes.

Requires Symphony 2.2.3

Requires Symphony 2.2.3