Responsive App Design with the Lightning Design

System

Keir Bowden

CTO, BrightGen

@bob_buzzard

+ 9

x 5

Demo App

Agenda

• What

• Why

• How

• Lightning Design System

• Images

• Demo

What is Responsive

Design• Apps respond to device

• Viewport size

• Orientation

• Named by Ethan Marcotte

• http://bobbuzz.me.uk/1hI879K

What is Responsive

Design

Agenda

• What

• Why

• How

• Lightning Design System

• Images

• Demo

Why use Responsive

Design?• One app to rule them all

• One URL

• One content source

• Single view of users

• Google’s recommended design

pattern

• Easier to crawl

• Better for the link algorithm

•

http://bobbuzz.me.uk/1g7G3wV

Agenda

• What

• Why

• How

• Lightning Design System

• Images

• Demo

Cornerstone #1 – Viewport

Meta Tag• Viewport meta tag

• width=device-width• Report actual size of device

• initial-scale=1.0• Display page actual size

Cornerstone #2 – Fluid Grid

Reflow

1 2 3 4 5 6 7 8 9 10 11 12

1 2 3 4 5 6 7 8 9 10 11 12

1 2 3 4 5 6

7 8 9 10 11 123

1

2

Cornerstone #3 – CSS Media

Queries• Expression limiting scope of CSS

Agenda

• What

• Why

• How

• Lightning Design System

• Images

• Demo

Lightning Design

System• Design patterns, components and

guidelines

• Mobile first

• Lightning, Visualforce or off-platform

• Consistent styling with Salesforce

• No JavaScript

• Namespaced CSS

• Latest browser versions required

Responsive

Framework• Fluid grid

• 1 thru 8, and 12 columns

• Column spanning styles• slds-large-size--3-of-4

• slds-medium-size--1-of-2

• 4 CSS Breakpoints• x-small 320px+

• small – 480px+

• medium – 768px+

• large – 1024px+

Agenda

• What

• Why

• How

• Lightning Design System

• Images

• Demo

Image Challenges

• 62% of the web is images

• Traditionally fixed size

• Options:

• Blurred pages for some

• Slow pages for everyone

• Download and shrink

• Original size 500x500 = 250k

• Resize for tablet 250x250 = 62.5k –

75% wasted

• Resize for tablet 125x125 = 15.6k –

93% wasted

✔✖

Fluid-Width Images

• New attributes for img element• srcset – image options and widths

• sizes – media query and desired width

• Browser chooses appropriate image

Art Direction

• Don’t always want to shrink

Picture Element

Picture Element

• Not supported by lightning components (Spring 16)

• Generate the HTML elements through a component

renderer

• ‘Picture’ component in demo app

Agenda

• What

• Why

• How

• Lightning Design System

• Images

• Demo

Demo

• Blog home page

• Built on Lightning Design System

• Recent posts

• Comments

• Search

• Github :

• bobbuzz.me.uk/SFTW16RWD

Code

Post

Post

Post

About

Search

1

Post

Post

Post

3

Search

About

1

Code

Code

Recap

• Viewport meta tag

• Responsive grid

• CSS breakpoints

• Responsive images

Questions?

BrightGen

Stand 114

Cloud Expo