Responsive Layout
Novice
Some responsiveness is shown, but for only 1 or 2 screens of the design. The layout patterns may be unconventional or impractical for a responsive design.Competent
Responsiveness is demonstrated and considered throughout the design. Attention has been paid to common responsive patterns for content and navigation.Proficient
Sizing and interface density is considered and appropriate across target devices. Feasibility of implementation has been considered or reviewed with a developer.Expert
The responsive design is sufficiently mocked up and documented so that a developer would be able to use what’s provided to start building the website/product.See Also
Competencies
- Interaction Design Interface layout
- Visual Design Style Tile
- Visual Design Typography
- Visual Design Amount of Design Variations
- Visual Design Presentation Slides Design
- Visual Design Quality of Design Variations
- Interface Prototyping HTML & CSS
Explainers
Lessons
Resources
Talks
References
- Learn CSS Grid
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- Media Queries for Standard Devices
- CSS Syntax
- CSS Transition Property
- Keyframe syntax
- MDN Keyframe
- MDN Using CSS Transition
- MDN’s documentation for CSS
- CSS Reference
- CSS: Cascading Style Sheets
Tutorials
- Grid by Example
- The Experimental Layout Lab
- An Interactive Guide to CSS Transitions
- CSS Diner
- Flexbox Froggy
- Grid Garden
- Learn to Code HTML & CSS
