NoviceSome 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.
CompetentResponsiveness is demonstrated and considered throughout the design. Attention has been paid to common responsive patterns for content and navigation.
ProficientSizing and interface density is considered and appropriate across target devices. Feasibility of implementation has been considered or reviewed with a developer.
ExpertThe 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.
- 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
- Interaction Design Interface layout
- 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
- Grid by Example
- The Experimental Layout Lab
- An Interactive Guide to CSS Transitions
- CSS Diner
- Flexbox Froggy
- Grid Garden
- Learn to Code HTML & CSS