Responsive Design, Past, Present and Future
76
Transcript of Responsive Design, Past, Present and Future
Responsive Design: Past, Present & Future
FITC Spotlight Advanced Responsive Design 2016
@andrewsmyk
www.andrewsmyk.com/advancedrwd
@andrewsmyk
@andrewsmyk
@andrewsmyk future
past
present
Things we used to do but stopped doing because something shiny and new came along. And now doing it again.
@andrewsmyk future
past
present
@andrewsmyk future
past
present
640 x 480 800 x 600
@andrewsmyk
past
640 800
@andrewsmyk
past
@andrewsmyk
past
640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200
@andrewsmyk
past
@andrewsmyk
past
@andrewsmyk
past
@andrewsmyk
past
@andrewsmyk
present
@andrewsmyk
present
I am gonna have to media query the shit out of this.
design with text only
@andrewsmyk
present
@andrewsmyk
past
present
future
design with text only
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
design with text only: helps keep your media queries as simple as possible.
@andrewsmyk
present
design with text only: Pages are low weight with high performance.
@andrewsmyk
present
An unstyled HTML page is ubiquitous and device agnostic.
@andrewsmyk
past
present
future
“Design consistency is not about pixels.”
@andrewsmyk
present
Responsive Typography
Building for Hierarchy Size Weight Color Position Type Contrast
Responsive Typography
Modular scale
Responsive Typography
9 12 16 21 28 37 50 67 89
Responsive Typography
Creates Typographic
rhythm
Responsive Typography
Why Modular Scales? increases readability increases legibility balances white-space balances typographic texture type contrast
Responsive Typography
Modular Scales 2:3 (perfect fifth) 3:4 (perfect fourth) * 1:1.618 (golden section) 4:5 (major third) 3:5 (major sixth) 9:16 (minor seventh) *
Responsive Typography
Modular Math for 3:4 ¾ = .75 16px base font 16/.75 = 21px 21/.75 = 28px 28/.75 = 37px 37/.75 = 50px
Responsive Typography
9 12 16 21 28 37 50 67 89
Responsive Typography
9 12 16 21 28 37 50 67 89 10 13 18 24 32 42 56 74
Responsive Typography
Modular Line Height - As the screen gets smaller, increase line height - 1/.75 = 1.3
@andrewsmyk
@andrewsmyk
It’s all about the content.
@andrewsmyk
present
Content Modeling & Strategy
• Content Engagement • Content Curation • Rank and Prioritize Content
@andrewsmyk
present
accessibility: #a11y WCAG
@andrewsmyk
present
Provide text alternatives (WCAG2)
Readable and Understandable (WCAG2)
Content Appears and Operates in Predictable Ways (WCAG2)
Robust Compatibility with Current and Future Devices (WCAG2)
@andrewsmyk
present
Use Role attribute properly (a11y)
Link are recognizable (a11y)
Logical Layouts and Patterns (a11y)
Semantic Headings and Structures (a11y)
@andrewsmyk
present
A A A
@andrewsmyk
present
A A A
@andrewsmyk future
@andrewsmyk
present
@andrewsmyk
present
progressive web apps
Responsive App-like-interactions Discoverable Installable Linkable
@andrewsmyk
present
Browser Dependent URL masking Empty Shell (wait for content downloading)
@andrewsmyk
present
@andrewsmyk
present
@andrewsmyk
present
@media (distance: far) { /* increase text size here */ }
@andrewsmyk future
“Adjust to Screen” iPad viewport of 768 as a baseline for large screens at distance.
@andrewsmyk future
@andrewsmyk future
@andrewsmyk future
@andrewsmyk future
@andrewsmyk future
@andrewsmyk future
@andrewsmyk
Questions?
Thank you!
@andrewsmyk www.andrewsmyk.com/advancedrwd
