[
http://jira.magnolia-cms.com/browse/DOCU-272?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Antti Hietala updated DOCU-272:
-------------------------------
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|http://en.wikipedia.org/wiki/Responsive_Web_Design]
* A List Apart: [Responsive Web
Design|http://www.alistapart.com/articles/responsive-web-design/]
* [Themes:
CSS|http://documentation.magnolia-cms.com/modules/etk/themes.html#CSS]
* [Imaging module|http://documentation.magnolia-cms.com/modules/imaging.html]
* [Different renderings of the demo-project
layout|http://documentation.magnolia-cms.com/technical-guide/stk.html#Layoutandgrid],
use to illustrate floating, alternative dynamic layouts
* [Device
Detection|http://documentation.magnolia-cms.com/modules/device-detection.html]
* [^Web Designer - April 2012 - Magnolia.pdf]
was:
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|http://en.wikipedia.org/wiki/Responsive_Web_Design]
* A List Apart: [Responsive Web
Design|http://www.alistapart.com/articles/responsive-web-design/]
* [Themes:
CSS|http://documentation.magnolia-cms.com/modules/etk/themes.html#CSS]
* [Imaging module|http://documentation.magnolia-cms.com/modules/imaging.html]
* [Different renderings of the demo-project
layout|http://documentation.magnolia-cms.com/technical-guide/stk.html#Layoutandgrid],
use to illustrate floating, alternative dynamic layouts
* [Device
Detection|http://documentation.magnolia-cms.com/modules/device-detection.html]
* [^Web Designer - April 2012 - Magnolia.pdf]
* plus anything else you can find
> Responsive design
> -----------------
>
> Key: DOCU-272
> URL: http://jira.magnolia-cms.com/browse/DOCU-272
> Project: Documentation
> Issue Type: Task
> Security Level: Public
> Components: content
> Reporter: Antti Hietala
> Assignee: Antti Hietala
> Attachments: Web Designer - April 2012 - Magnolia.pdf
>
>
> 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|http://en.wikipedia.org/wiki/Responsive_Web_Design]
> * A List Apart: [Responsive Web
> Design|http://www.alistapart.com/articles/responsive-web-design/]
> * [Themes:
> CSS|http://documentation.magnolia-cms.com/modules/etk/themes.html#CSS]
> * [Imaging module|http://documentation.magnolia-cms.com/modules/imaging.html]
> * [Different renderings of the demo-project
> layout|http://documentation.magnolia-cms.com/technical-guide/stk.html#Layoutandgrid],
> use to illustrate floating, alternative dynamic layouts
> * [Device
> Detection|http://documentation.magnolia-cms.com/modules/device-detection.html]
> * [^Web Designer - April 2012 - Magnolia.pdf]
--
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators:
http://jira.magnolia-cms.com/secure/Administrators.jspa
-
For more information on JIRA, see: http://www.atlassian.com/software/jira
----------------------------------------------------------------
For list details, see: http://www.magnolia-cms.com/community/mailing-lists.html
Alternatively, use our forums: http://forum.magnolia-cms.com/
To unsubscribe, E-mail to: <[email protected]>
----------------------------------------------------------------
