Transcript Responsive Web Design

www.synerzip.com
Responsive
Web Design
Sponsored by
Webinar – May 14, 2014
Nikhil J Deshpande
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.
Questions?
www.synerzip.com
Hemant Elhence
[email protected]
469.322.0349
www.synerzip.com
•39
84
Synerzip in a Nutshell
1.
Software product development partner for small/mid-sized technology
companies
•
•
•
2.
3.
4.
5.
Exclusive focus on small/mid-sized technology companies, typically venturebacked 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
www.synerzip.com
Our Clients
www.synerzip.com
Thanks!
Call Us for a Free Consultation!
Hemant Elhence
[email protected]
469.322.0349
www.synerzip.com