Responsive Revolution

Points to keep in-mind while (and before) developing a responsive web project.

Transcript

1. Responsive Revolution
2. Sergey Lerner Industrial designer Front End Developer
3. STOP for a moment!
4. Think like Gary
5. STYLE
7. STYLE • Usually consistent, But sometimes Not. • Probably will change in the future. • Should be defined in one place. • Reduce Dependence on Images with CSS. • If its Vector use vector. • Use Relative Units. • Please work with style guides.
8. LAYOUT
10. LAYOUT • Destine to change. • Always develop a Fluid Architecture. • Consider different building approaches.
11. Dude where’s my flying car ?! LOGIC
12. Dude where’s my flying car ?!
13. LOGIC • Don’t overkill (Avoid Including Bulky JS Libraries If You Can Help It). • Use Feature-detection. • Know when to initialize / destroy. • Maybe better of with CSS ?!
14. PERFORMANCE
16. PERFORMANCE • Consider mobile latency. • Consider CPU. • Load only what you need. • Avoid Bloats of code. • Look into Rendering. • Large Images are dangerous. • Use Data URIs to Save HTTP Requests.
17. DEVICE CAPABILITIES
19. DEVICE CAPABILITIES • Touch gestures. • SMS, Call. • Hover. • URIs: open application. • Use Semantic html to open native Inputs.
20. CHALLENGES
22. If you're not failing every now and again, it's a sign you're not doing anything very innovative. Woody Allen
23. header footer body social gallery navigation feature
26. STYLE LAYOUT LOGIC PERFORMANCE DEVICE CAPABILITIES CHALANGES
31. TOOLS to make it just a little bit easier:
32. Thank You