Post on 23-Jan-2018
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