1. www.synerzip.com Responsive Web Design Nikhil J Deshpande Webinar – May 14, 2014 Sponsored by

2. www.synerzip.com Rise of Mobile Source: http://www.lukew.com/ff/entry.asp?1728

3. www.synerzip.com Rise of Mobile Source: MIT Technology Review

4. www.synerzip.com Rise of Mobile

5. www.synerzip.com Rise of Mobile

6. www.synerzip.com Rise of Mobile

7. www.synerzip.com Many Devices One Web

8. www.synerzip.com Many Devices One Web

9. www.synerzip.com Mobile Sites

10. www.synerzip.com Layout 101

11. www.synerzip.com Layout 101

12. www.synerzip.com Print to Screen

13. www.synerzip.com Print to Screen

14. www.synerzip.com Once upon a time

15. www.synerzip.com The Good Book

16. www.synerzip.com Components of Responsive Fluid Grid

17. www.synerzip.com Components of Responsive Flexible Media

18. www.synerzip.com Components of Responsive Media Queries

19. www.synerzip.com The Grid System ●Structure ●Consistency ●Predictability ●Define spatial relationship

20. www.synerzip.com The Grid System

21. www.synerzip.com Flexible Images

22. www.synerzip.com HTML5

23. www.synerzip.com HTML5 ●New Defined Tags ●Better semantic value ●Organized code ●Accessibility ●SEO

24. www.synerzip.com HTML5 ●Browser Support ●SHIMs

25. www.synerzip.com CSS3

26. www.synerzip.com CSS3 ●Font Embeds ●Fallback ●Polyfill

27. www.synerzip.com Media Queries

28. www.synerzip.com Media Queries @ media screen and (max-device-width:480px) media typekeywordmedia feature

29. www.synerzip.com Responsive Navigation

30. www.synerzip.com Responsive Navigation

31. www.synerzip.com Responsive Navigation

32. www.synerzip.com Responsive Navigation Survey of 1,333 people using smartphones on the street found that about 75% of smartphone use is one thumb.

33. www.synerzip.com

34. Mobile First

35. www.synerzip.com Test Test Test ●Viewport testing ●Troubleshooting breakpoints ●Testing tools ●Device Testing ●Device Lab

36. www.synerzip.com Device List ●iPod Touch ●Android (Mid-level to High-end) ●Tablets ●Blackberry (High-end) ●Windows Phone Source – www.dmolsen.com

37. www.synerzip.com Device Testing

38. www.synerzip.com Site Optimization ●Validate your HTML and CSS - www.validator.w3.org/nu ●Treat Performance as milestone of your design process ●Use tools to get real data ●Set performance budget - similar to a household budget.

39. www.synerzip.com 3984 Questions? www.synerzip.com Hemant Elhence hemant@synerzip.com 469.322.0349

40. www.synerzip.com Synerzip in a Nutshell 1.Software product development partner for small/mid-sized technology companies Exclusive focus on small/mid-sized technology companies, typically venture- backed companies in growth phase By definition, all Synerzip work is the IP of its respective clients Deep experience in full SDLC – design, dev, QA/testing, deployment 2.Dedicated team of high caliber software professionals for each client Seamlessly extends client’s local team, offering full transparency Stable teams with very low turn-over NOT just “staff augmentation”, but provide full mgmt support 3.Actually reduces risk of development/delivery Experienced team - uses appropriate level of engineering discipline Practices Agile development – responsive, yet disciplined 4.Reduces cost – dual-shore team, 50% cost advantage 5.Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option

41. www.synerzip.com Our Clients

42. www.synerzip.com Call Us for a Free Consultation! Hemant Elhence hemant@synerzip.com 469.322.0349 Thanks!