YEI - The world has gone mobile. But has your web experience?

In this presentation I presented to Yale Entrepreneurial Institute's Tech Bootcamp students about the shifting approach to designing and collaborating for the responsive web.

Transcript

1. The world has gone mobile.
   But has your web experience? @petesena #YEIrwd
2. A little about me.
3. Hi there. I’m @petesena You would expect a fancy bio of me to go here or something but that would just be douchey. You should follow me on twitter. I tweet about the intersection
 of design and technology in marketing. Cool tools, trends, tutorials and all that jazz. If this presentation has been useful for you please share it with someone.
6. This is the web today.
7. 77% of people use smart phones as their preferred medium for searching. -Google / Nielsen
 mobile search moments march 2013
8. WTF! I just want to get information about your brand or startup
9. Where did responsive design come from?
10. So what the hell is responsive design? flexible grid flexible media media queries
11. It means you are device agnostic!
13. Why responsive? • One application to maintain which runs everywhere • Improve SEO and user confusion with one set of URLs • Such a variety of devices, platforms and browsers • Mobile and desktop simply isn’t enough • Don’t discriminate, one site for all devices • Future proof and ready for the next device
14. Breaking some old habits.
15. The old waterfall web design process Discovery Strategy &
 Planning Design Development Optimize
16. It’s time to evolve.
17. Evolving to a new iterative process Project Planning! Discovery (Immersion)! Strategy! Content Strategy! UX & IA! Design! Development! Post Launch!
18. A new web design process Sketching Review Validate Prototyping Design Wireframe Strategy Outcome
19. Not content first. Not mobile first. Context first.
20. sketch early.
25. Some handy User Experience design tools
26. Design systems. Not comps.
27. What makes up a
    design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
28. What makes up a
    design system? •Content •Grid & Visual Hierarchy •Typography •Color Palette •Iconography / Shape / Form •Imagery
29. Responsive
    web design
    resources • Style Tiles (http://styletil.es/) • Gumby grid & UI Kit templates (gumbyframework.com) • Sketchsheets (sneakpeekit.com) • Modular Scale (balanced typography)
30. A photoshop UI kit A photoshop user interface kit can be very helpful as a starting place. It will contain virtually all HTML elements which will be a great reference asset for when it comes time for building the markup/css. Gumby Framework includes all the grid photoshop files as well as the interface elements.
31. Analog & digital grids
32. Resources for web typography Fonts
33. Resources for front-end development
34. The best advice ever.
35. wait for it...
36. Learn to code. </>
37. Where to learn front-end development ?
38. If you enjoyed this gimme some love and new followers 
 on twitter @petesena
    Go make something.