Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
You can change this under Settings & Account at any time.
Responsive Design in the DXA
Transcript of Responsive Design in the DXA
One site for all devices
Lower Cost of Ownership
DXA = RESS
CSS/JS solution (Bootstrap)
+ Optimizations server side:
Resizing / cropping
Optimizing images is the quickest win for significant payload reduction.
DXA has a solution that is designed to be simple, rather than comprehensive:
1. Editor Uploads/Publish a
single high-res image
2. View Developer defines the
3. DXA does the rest...
(demo - image reuse and code)
SDL Mobile / Contextual Image Delivery or a native image resizer can be used.
Aspect (defined in view)
Display width (context engine)
Pixel ratio (context engine)
Grid units (passed in View Data)
Responsive Design (coded logic)
Standard Sizes: 160, 320, 640, 1024, 2048
1. Bootstrap rows also need to be managed server side -
Using Region views limit the impact of this
2. Collapsing columns can result in bigger, rather than smaller images -
Teasers have a different layout for single column design
Bootstrap contains a CSS framework for (nested) responsive layouts based on a 12 unit grid, and configurable display width breakpoints.
(demo - collapsing columns and menus)
(demo - conditional rendering code)
Design & DXA