www.synerzip.co m Responsive Web Design Nikhil J Deshpande Webinar – May 14, 2014 Sponsored by
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
www.synerzip.com
Responsive Web Design
Nikhil J Deshpande
Webinar – May 14, 2014
Sponsored by
www.synerzip.com
Rise of Mobile
Source: http://www.lukew.com/ff/entry.asp?1728
www.synerzip.com
Rise of Mobile
Source: MIT Technology Review
www.synerzip.com
Rise of Mobile
www.synerzip.com
Rise of Mobile
www.synerzip.com
Rise of Mobile
www.synerzip.com
Many Devices One Web
www.synerzip.com
Many Devices One Web
www.synerzip.com
Mobile Sites
www.synerzip.com
Layout 101
www.synerzip.com
Layout 101
www.synerzip.com
Print to Screen
www.synerzip.com
Print to Screen
www.synerzip.com
Once upon a time
www.synerzip.com
The Good Book
www.synerzip.com
Components of Responsive
Fluid Grid
www.synerzip.com
Components of Responsive
Flexible Media
www.synerzip.com
Components of Responsive
Media Queries
www.synerzip.com
The Grid System
● Structure● Consistency● Predictability● Define spatial relationship
www.synerzip.com
The Grid System
www.synerzip.com
Flexible Images
www.synerzip.com
HTML5
www.synerzip.com
HTML5
● New Defined Tags● Better semantic value● Organized code● Accessibility● SEO
www.synerzip.com
HTML5
● Browser Support● SHIMs
www.synerzip.com
CSS3
www.synerzip.com
CSS3
● Font Embeds● Fallback● Polyfill
www.synerzip.com
Media Queries
www.synerzip.com
Media Queries
@ media screen and (max-device-width:480px)
media type keyword media feature
www.synerzip.com
Responsive Navigation
www.synerzip.com
Responsive Navigation
www.synerzip.com
Responsive Navigation
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.
www.synerzip.com
www.synerzip.com
Mobile First
www.synerzip.com
Test Test Test
● Viewport testing● Troubleshooting breakpoints● Testing tools● Device Testing● Device Lab
www.synerzip.com
Device List
● iPod Touch● Android (Mid-level to High-end)● Tablets● Blackberry (High-end)● Windows Phone
Source – www.dmolsen.com
www.synerzip.com
Device Testing
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.
www.synerzip.comwww.synerzip.com
Synerzip in a Nutshell1. 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,
deployment2. 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 advantage5. Offers long term flexibility – allows (facilitates) taking
offshore team captive – aka “BOT” option
www.synerzip.comwww.synerzip.com
Our Clients
www.synerzip.comwww.synerzip.com
Call Us for a Free Consultation!
Hemant Elhence [email protected]
469.322.0349
Thanks!
Related Documents
