techcamp aavn-chanh pham
TRANSCRIPT
Make responsive design more responsive
Presenter: Chanh Pham
• Responsive web design (RWD)
• Current challenges
• Best practices
Content
Responsive web design (RWD)
Media rule
Media type
Media features
• Choose breakpoints
• Design for each breakpoint
• Create CSS for each viewport
To do
Responsive web design (RWD)
IS IT SIMPLE?
Responsive web design (RWD)
• Images
• Embedded third parties
• Navigation
• Tables
• Responsive layout
Problems in RWD
Using image in RWD
Image compression
Icon fonts
Responsive image markup
Using image in RWD
https://github.com/scottjehl/picturefill
Embedded third parties in RWD
Navigation in RWD
Dropdown menu
Navigation in RWD
Toggle navigation
Navigation in RWD
Off canvas navigation
Navigation in RWD
Table in RWD
Table column
toggle
Table in RWD
Responsive table
Table in RWD
Responsive data
table
Flexible box layout model
Responsive layout
Flex container
Flex item Flex item Flex item
Flexbox example
• Typography (rem unit)
• Mobile first
• Adaptive content
Best pratices
THANK YOU