Slide deck from my Trailhead dev theatre talk at the 2016 Salesforce London World Tour.

1. Responsive App Design with the Lightning Design
System

2. Keir Bowden
CTO, BrightGen
@bob_buzzard
+ 9
x 5

3. Demo App

4. Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo

5. What is Responsive
Design
• Apps respond to device
• Viewport size
• Orientation
• Named by Ethan Marcotte
• http://bobbuzz.me.uk/1hI879K

6. What is Responsive
Design

7. Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo

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

9. Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo

10. Cornerstone #1 – Viewport
Meta Tag
• Viewport meta tag
• width=device-width
• Report actual size of device
• initial-scale=1.0
• Display page actual size

11. Cornerstone #2 – Fluid Grid

12. 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 12
3
1
2

13. Cornerstone #3 – CSS Media
Queries
• Expression limiting scope of CSS

14. Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo

15. Lightning Design
System
• Design patterns, components and
guidelines
• Mobile first
• Lightning, Visualforce or off-platform
• Consistent styling with Salesforce
• No JavaScript
• Namespaced CSS

16. 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+

17. Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo

18. 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 –
✔
✖

19. Fluid-Width Images
• New attributes for img element
• srcset – image options and widths
• sizes – media query and desired width
• Browser chooses appropriate image

20. Art Direction
• Don’t always want to shrink

21. Picture Element

22. Picture Element
• Not supported by lightning components (Spring 16)
• Generate the HTML elements through a component
renderer
• ‘Picture’ component in demo app

23. Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo

24. Demo
• Blog home page
• Built on Lightning Design System
• Recent posts
• Comments
• Search
• Github :
• bobbuzz.me.uk/SFTW16RWD

25. Code
Post
Post
Post
About
Search
1
Post
Post
Post
3
Search
About
1

26. Code

27. Code

28. Recap
• Viewport meta tag
• Responsive grid
• CSS breakpoints
• Responsive images

29. Questions?
BrightGen
Stand 114
Cloud Expo