Responsive Design Methodology
6 likes3,640 views
The document outlines the process of responsive web design, emphasizing the importance of content processing, creating responsive prototypes, and visual design. It promotes a mobile-first approach, focusing on content relevance and testing across various devices. Key elements include the use of style tiles and designing components for real web environments to enhance usability and aesthetics.
Responsive Design Methodology
- 4. How we do it (at the moment)
- 5. 1. Content processing 2. Responsive prototype 3. Visual design 4. Testing
- 6. Processing content • Gather real content • Identify content types • Determine importance • Determine structure & pages
- 7. Responsive prototype • Mobile first • Focus on content • Determine importance • Loose unnecessary bits.
- 9. If you don’t need it on mobile you probably don’t need it on desktop.
- 10. Responsive prototype • Build real responsive layouts • Test where content breaks • Device agnostic • Test on real devices
- 11. Responsive prototype • HTML & CSS • Reusable
- 16. Visual design • Style tiles • Refinement
- 17. Style Tiles • Colors • fonts • Images • Interface elements • Overall mood of a website
- 19. Responsive Style Tiles • Tangible • Touchable • HTML & CSS • Reusable
- 20. Responsive Style Tiles • Focus on typography • Focus on readability • Design for touch
- 25. Refinement • Merge style tile and layouts • Design components • Design interactions, transitions
- 26. Designing in the browser • Real webfonts • Real constraints • Real environment
- 28. Testing • Real devices • Real environments • Real resolutions • Real densities