Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start 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.


Responsive Design in the DXA

No description

Will Price

on 20 January 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Design in the DXA

Why Responsive?
One site for all devices
Lower Cost of Ownership
Better SEO

sponsive with
ide components

CSS/JS solution (Bootstrap)
+ Optimizations server side:
Image resizing
Conditional rendering
Display Widths
Bootstrap Layout
Responsive Images
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
aspect ratio

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
Conditional Rendering
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
Full transcript