[DOCU-272] Responsive design Created: 11/Apr/12  Updated: 31/Dec/14  Resolved: 31/Dec/14

Status: Closed
Project: Documentation
Component/s: content
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Neutral
Reporter: Antti Hietala Assignee: Antti Hietala
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PDF File Web Designer - April 2012 - Magnolia.pdf    
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:

 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:



 Comments   
Comment by Antti Hietala [ 22/May/12 ]

Nice presentation on the key concepts of responsive design
http://johnpolacek.github.com/WhatTheHeckIsResponsiveWebDesign-impressjs/#/title

Comment by Ruth Stocks [ 11/Jun/12 ]

New page at - http://docuauthor.magnolia-cms.com/templates/responsive-web-design.html

Notes:

In my research, I found a few references to 'media listeners', but they are very new. It would be nice to add a reference if we are planning to include them. See:

Comment by Ruth Stocks [ 31/Dec/14 ]

Documented at:

Generated at Mon Feb 12 01:07:34 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.