Responsive Design: Content, Design Process & Tools

A high level overview of my take on responsive web design and overall process.

Transcript

1. Responsive web design content, design process, & tools. julia jamieson Experience Designer Elevator Up up thumbs up
2. CONTENT DESIGN IMPLEMENTATION 1 2 3
3. CONTENT DESIGN IMPLEMENTATION 1 2 3
4. Media Queries, Breakpoints & Content Design without content is decoration. It used to be that you worked on look and feel before you thought about content. But it’s actually very hard to do design without content. –Jeffrey Zeldman
5. Media Queries, Hierarchy & Making Decisions mobile 320 x 480 px tablet 768 x 1024 px tablet/small screen 1024 x 768 px large display @1600 x 1200 px
6. Sketching first & Responsively Wireframed mobile 320 x 480 px tablet 768 x 1024 px tablet/small screen 1024 x 768 px large display 1600 x 1200 px
7. Make Decisions: Example, jessicahische.is
8. Make Decisions: Example, jessicahische.is mobile first what is important consider your user
9. Make Decisions: Example, jessicahische.is think off canvas create transitions accessibility
10. Make Decisions: Example, jessicahische.is progressive enhancement utilize the space you have
11. Make Decisions: Example, jessicahische.is progressive enhancement utilize the space you have curate what’s needed
12. Design: Fluid & Flexible Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise. –Information Architects
13. Tools: A fluid grid, example EJS 1000 Pixel Grid
14. Manipulate it for your needs: other grid resources: elliotjaystocks.com guideguide.com gridpak.com
15. Then, follow the grid:
16. Tools: Typography 1. The idea of responsive typography is that the type always looks and feels the same regardless of the media query.
17. Tools: Typography 1. The idea of responsive typography is that the type always looks and feels the same regardless of the media query Tools: Typography 1. The idea of responsive typography is that the type always looks and feels the same regardless of the media query 2. The further away your body text is from the reader, the larger it needs to be. This is why it works to have larger body text on a desktop, smaller on a tablet, and smallest on a phone.
18. Tools: Typography 1. The idea of responsive typography is that the type always looks and feels the same regardless of the media query 2. The further away your body text is from the reader, the larger it needs to be. This is why it works to have larger body text on a desktop, smaller on a tablet, and smallest on a phone. 3. Readability is more important than having a layout that is always as wide as the viewport.
19. Typography: Print vs. Web Now that we know who you are, I know who I am. I’m not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain’s going to be? He’s the exact opposite of the hero. And most times they’re friends, like you and me! I should’ve known way back when... You know why, David? Because of the kids. They called me Mr Glass. georgia, 16 pt, 140% dark gray on white black on light gray avoid shocking combos (ex pink on yellow) caveat: large retina displays makes this even more complicated :)
20. Example: Information Architects
21. Asset Management A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictable and repetitive. Too much variation and the system is confusing and overwhelming. –Yesenia Perez-Cruz
22. Tools: Style Tile samantha warren design exploration manage the look and feel without considering layout provide a catalyst for design reviews present options without making multiple design comps styletil.es/
23. Tools: Style Tile + User Interface Library
24. Tools: PSD Mock Up not a deliverable guide to finding the best compromise
25. Tools: Remember your Responsive Wireframes?! mobile 320 x 480 px tablet 768 x 1024 px tablet/small screen 1024 x 768 px large display 1600 x 1200 px
26. Ultimately, better collaboration comes through a shared understanding of the different competencies required to build a website. Instead of viewing ourselves in terms of discrete roles, we should instead look to emphasize our range of abilities, and work with others whose skills are complementary. –Paul Robert Lloyd Now, make it happen:
27. get at us right thanks for humoring me. btw, we’re hiring twitter @elevatorup twitter @juliajamieson
28. attributions Information Architects http://informationarchitects.net/blog/responsive-typography-the-basics/ Happy Cog http://cognition.happycog.com/article/sweet-systems http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop Luke W http://www.lukew.com/ff/entry.asp?1583 Mule http://weblog.muledesign.com/2010/08/why_we_dont_deliver_photoshop_files.php Samantha Warren http://styletil.es/ Paul Robert Lloyd http://24ways.org/2011/collaborative-development-for-a-responsively-designed-web ALA http://www.alistapart.com/articles/fluidgrids/ Elliot Jay Stocks http://elliotjaystocks.com/ examples jessicahische.is informationarchitects.net/blog/twitterror/ iA Writer