Downloaded 13 times
Uploaded byKeir Bowden
Responsive App Design with the Salesforce Lightning Design System
This document discusses responsive app design using the Lightning Design System. It covers: - The key aspects of responsive design including using the viewport meta tag, fluid grids that reflow content, and CSS media queries. - Why responsive design is important, including having a single code base that works across devices and providing a consistent user experience. - How the Lightning Design System supports responsive design with its mobile-first approach, predefined components and styles, and use of fluid grids and breakpoints. - Techniques for responsive images, including using srcset, sizes attributes and the picture element to serve optimized images based on device characteristics.
More Related Content
Similar to Responsive App Design with the Salesforce Lightning Design System
Responsive App Design with the Salesforce Lightning Design System
- 1. Responsive App Designwith the Lightning Design System
- 2.
- 3.
- 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.
- 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 34 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 • Designpatterns, 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 • Newattributes for img element • srcset – image options and widths • sizes – media query and desired width • Browser chooses appropriate image
- 20. Art Direction • Don’talways want to shrink
- 21.
- 22. Picture Element • Notsupported 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 homepage • Built on Lightning Design System • Recent posts • Comments • Search • Github : • bobbuzz.me.uk/SFTW16RWD
- 25.
- 26.
- 27.
- 28. Recap • Viewport metatag • Responsive grid • CSS breakpoints • Responsive images
- 29.