Status

Magnolia UI currently has 2 breakpoints for 3 resolutions implemented.

• tablet (<1200)
• laptop / desktop (1200-1600)
• wide screen / monitor (>1600)

See also these links for further references

https://app.zeplin.io/project/5acc848ede054e0a4865f805/dashboard?seid=5acc9f98a512b487476f970d

https://jira.magnolia-cms.com/issues/?jql=labels%20%3D%20responsive-design

Problem

When resizing the browser window there still are a lot of visual glitches (see attached screens). To tackle the problem we need to split the tasks into 3 steps.

Design guidelines (avongunten)

• Verify that we defined the right break points (feedback from Christian / Training)
• Check if we need more than 2 break points
• Provide coherent design guidelines for the 3 resolutions

Implementation (developer)

• Check if the right breakpoints are in place for all pages and templates
• Apply the design guidelines correctly

Testing

• Do quality check and testing on different browsers