![Page 1: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/1.jpg)
Responsive App Design with the Lightning Design
System
![Page 2: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/2.jpg)
Keir Bowden
CTO, BrightGen
@bob_buzzard
+ 9
x 5
![Page 3: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/3.jpg)
Demo App
![Page 4: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/4.jpg)
Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo
![Page 5: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/5.jpg)
What is Responsive
Design• Apps respond to device
• Viewport size
• Orientation
• Named by Ethan Marcotte
• http://bobbuzz.me.uk/1hI879K
![Page 6: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/6.jpg)
What is Responsive
Design
![Page 7: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/7.jpg)
Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo
![Page 8: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/8.jpg)
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
![Page 9: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/9.jpg)
Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo
![Page 10: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/10.jpg)
Cornerstone #1 – Viewport
Meta Tag• Viewport meta tag
• width=device-width• Report actual size of device
• initial-scale=1.0• Display page actual size
![Page 11: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/11.jpg)
Cornerstone #2 – Fluid Grid
![Page 12: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/12.jpg)
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
![Page 13: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/13.jpg)
Cornerstone #3 – CSS Media
Queries• Expression limiting scope of CSS
![Page 14: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/14.jpg)
Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo
![Page 15: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/15.jpg)
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
![Page 16: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/16.jpg)
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+
![Page 17: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/17.jpg)
Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo
![Page 18: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/18.jpg)
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
✔✖
![Page 19: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/19.jpg)
Fluid-Width Images
• New attributes for img element• srcset – image options and widths
• sizes – media query and desired width
• Browser chooses appropriate image
![Page 20: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/20.jpg)
Art Direction
• Don’t always want to shrink
![Page 21: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/21.jpg)
Picture Element
![Page 22: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/22.jpg)
Picture Element
• Not supported by lightning components (Spring 16)
• Generate the HTML elements through a component
renderer
• ‘Picture’ component in demo app
![Page 23: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/23.jpg)
Agenda
• What
• Why
• How
• Lightning Design System
• Images
• Demo
![Page 24: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/24.jpg)
Demo
• Blog home page
• Built on Lightning Design System
• Recent posts
• Comments
• Search
• Github :
• bobbuzz.me.uk/SFTW16RWD
![Page 25: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/25.jpg)
Code
Post
Post
Post
About
Search
1
Post
Post
Post
3
Search
About
1
![Page 26: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/26.jpg)
Code
![Page 27: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/27.jpg)
Code
![Page 28: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/28.jpg)
Recap
• Viewport meta tag
• Responsive grid
• CSS breakpoints
• Responsive images
![Page 29: Responsive App Design with the Salesforce Lightning Design System](https://reader034.vdocuments.mx/reader034/viewer/2022051721/5873259f1a28ab596c8b4947/html5/thumbnails/29.jpg)
Questions?
BrightGen
Stand 114
Cloud Expo