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.
- 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
- Grid by Example
- The Experimental Layout Lab
- CSS Diner
- CSS Transition Tutorial
- Flexbox Froggy
- Grid Garden
- Learn to Code HTML & CSS
- Media Queries for Standard Devices
- CSS Reference
- CSS Transition Property
- CSS: Cascading Style Sheets
- Keyframe syntax
- MDN Keyframe
- MDN Using CSS Transition
- MDN’s documentation for CSS
- A CRAP way to improve usability
- Anatomy of a CSS rule
- Learning to See
- Lessons From Swiss Style Graphic Design