1 / 42

Responsive Web Design

Responsive Web Design. Sponsored by. Webinar – May 14, 2014. Nikhil J Deshpande. Rise of Mobile. Source : http://www.lukew.com/ff/entry.asp?1728. Rise of Mobile. Source : MIT Technology Review. Rise of Mobile. Rise of Mobile. Rise of Mobile. Many Devices One Web.

saxon
Download Presentation

Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Rise of Mobile Source: MIT Technology Review

  4. Rise of Mobile

  5. Rise of Mobile

  6. Rise of Mobile

  7. Many Devices One Web

  8. Many Devices One Web

  9. Mobile Sites

  10. Layout 101

  11. Layout 101

  12. Print to Screen

  13. Print to Screen

  14. Once upon a time

  15. The Good Book

  16. Components of Responsive Fluid Grid

  17. Components of Responsive Flexible Media

  18. Components of Responsive Media Queries

  19. The Grid System • Structure • Consistency • Predictability • Define spatial relationship

  20. The Grid System

  21. Flexible Images

  22. HTML5

  23. HTML5 • New Defined Tags • Better semantic value • Organized code • Accessibility • SEO

  24. HTML5 • Browser Support • SHIMs

  25. CSS3

  26. CSS3 • Font Embeds • Fallback • Polyfill

  27. Media Queries

  28. Media Queries @ media screen and (max-device-width:480px) media type keyword media feature

  29. Responsive Navigation

  30. Responsive Navigation

  31. Responsive Navigation

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

  33. Mobile First

  34. Test Test Test • Viewport testing • Troubleshooting breakpoints • Testing tools • Device Testing • Device Lab

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

  36. Device Testing

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

  38. www.synerzip.com Hemant Elhence hemant@synerzip.com 469.322.0349 Questions? • 39 84

  39. Synerzip in a Nutshell • 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 • 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 • Actually reduces risk of development/delivery • Experienced team - uses appropriate level of engineering discipline • Practices Agile development – responsive, yet disciplined • Reduces cost – dual-shore team, 50% cost advantage • Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option

  40. Our Clients

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

More Related