Embed Size (px)
Citation preview
Responsive Design: Past, Present & Future
FITC Spotlight Advanced Responsive Design 2016
@andrewsmyk
www.andrewsmyk.com/advancedrwd
@andrewsmyk
@andrewsmyk
@andrewsmyk
past
present
future
past
present
future
past
present
future
@andrewsmyk
past
present
future
past
present
future
past
present
future
640 x 480 800 x 600
@andrewsmyk
past
present
future
640 800
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
640 x 480 800 x 6001024 x 7681200 x 9001920 x 1200
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
I am gonna have to media query the shit out of this.
design with text only
@andrewsmyk
past
present
future
@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
past
present
future
design with text only: Pages are low weight with high performance.
@andrewsmyk
past
present
future
An unstyled HTML page is
ubiquitous and device agnostic.
@andrewsmyk
past
present
future
“Design consistency is not about pixels.”
@andrewsmyk
past
present
future
Responsive Typography
Building for HierarchySizeWeightColorPositionType 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 readabilityincreases legibilitybalances white-spacebalances typographic texture type contrast
Responsive Typography
Modular Scales2: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 ¾ = .7516px base font 16/.75 = 21px21/.75 = 28px28/.75 = 37px37/.75 = 50px
Responsive Typography
9 12 16 21 28 37 50 67 89
Responsive Typography
9 12 16 21 28 37 50 67 8910 13 18 24 32 42 56 74
Responsive Typography
Modular Line Height - As the screen gets smaller, increase line height- 1/.75 = 1.3
It’s all about the content.
@andrewsmyk
past
present
future
Content Modeling & Strategy
• Content Engagement• Content Curation• Rank and Prioritize Content
@andrewsmyk
past
present
future
accessibility:#a11yWCAG
@andrewsmyk
past
present
future
Provide text alternatives (WCAG2)
Readable and Understandable (WCAG2)
Content Appears and Operatesin Predictable Ways (WCAG2)
Robust Compatibility with Current and Future Devices (WCAG2)
@andrewsmyk
past
present
future
Use Role attribute properly (a11y)
Link are recognizable (a11y)
Logical Layouts and Patterns (a11y)
Semantic Headings and Structures (a11y)
@andrewsmyk
past
present
future
A A A
@andrewsmyk
past
present
future
A A A
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
progressiveweb apps
ResponsiveApp-like-interactionsDiscoverableInstallableLinkable
@andrewsmyk
past
present
future
Browser DependentURL maskingEmpty Shell (wait for content downloading)
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@media (distance: far) { /* increase text size here */}
@andrewsmyk
past
present
future
“Adjust to Screen”
iPad viewport of 768 as a baselinefor large screens at distance.
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
past
present
future
@andrewsmyk
Questions?
Thank you!
@andrewsmykwww.andrewsmyk.com/advancedrwd
