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
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
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+
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
22. Picture Element
• Not supported by lightning components (Spring 16)
• Generate the HTML elements through a component
renderer
• ‘Picture’ component in demo app