Details
-
Task
-
Resolution: Fixed
-
Neutral
-
None
-
None
-
None
-
-
Empty show more show less
-
Empty show more show less
Description
Document how Magnolia implements the principles of responsive Web design. This should be a feature article that introduces the reader to the approach, makes an argument in favor of RWD, and walks through features that implement RWD in Magnolia CMS.
The RWD approach relies on three technical ingredients: fluid grids, flexible images and media queries. Magnolia has been practicing responsive design since 4.3.
- The STK and the static HTML prototype have a fluid grid that allow page elements to float.
- Media queries defined in a theme select an appropriate CSS based on viewport size and the type of device.
- The imaging engine creates images in different sizes on-the-fly, based on variation rules.
- Device Detection module allows you to identify the requesting device and resolve an appropriate template and theme.
Resources:
- Wikipedia: Responsive Web Design
- A List Apart: Responsive Web Design
- Themes: CSS
- Imaging module
- Different renderings of the demo-project layout, use to illustrate floating, alternative dynamic layouts
- Device Detection
- Web Designer - April 2012 - Magnolia.pdf

Checklists
Acceptance criteria