Responsive web design content, design process, & tools. julia jamieson Experience Designer Elevator Up up thumbs up 

CONTENT DESIGN IMPLEMENTATION 1 2 3 

CONTENT DESIGN IMPLEMENTATION 1 2 3 

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 

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 

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 

Make Decisions: Example, jessicahische.is 

Make Decisions: Example, jessicahische.is mobile first what is important consider your user 

Make Decisions: Example, jessicahische.is think off canvas create transitions accessibility 

Make Decisions: Example, jessicahische.is progressive enhancement utilize the space you have 

Make Decisions: Example, jessicahische.is progressive enhancement utilize the space you have curate what’s needed 

Design: Fluid & Flexible Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise. –Information Architects 

Tools: A fluid grid, example EJS 1000 Pixel Grid 

Manipulate it for your needs: other grid resources: elliotjaystocks.com guideguide.com gridpak.com 

Then, follow the grid: 

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 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. 

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. 

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 :) 

Example: Information Architects 

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 

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/ 

Tools: Style Tile + User Interface Library 

Tools: PSD Mock Up not a deliverable guide to finding the best compromise 

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 

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: 

get at us right thanks for humoring me. btw, we’re hiring twitter @elevatorup twitter @juliajamieson 

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