Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Design in the DXA

No description
by

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
means
Lower Cost of Ownership
Better SEO

DXA = RESS
RE
sponsive with
S
erver
S
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.
Factors:
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
http://www.tridiondeveloper.com/responsive-images-an-approach-using-sdl-mobile
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)
Questions?
Responsive
Design & DXA
Full transcript