Reach More Customers With Responsive Web Design! - Atlanta Responsive Web Design
Responsive Web Design
-
Upload
andy-croll -
Category
Technology
-
view
1.481 -
download
3
description
Transcript of Responsive Web Design
![Page 1: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/1.jpg)
Andy Croll • 6th July 2011
Responsive Web DesignA new web standard
![Page 2: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/2.jpg)
Who is this idiot?Andy Croll@andycroll
“Between jobs”
Previously wego.com, viki.com & various consulting gigs
![Page 3: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/3.jpg)
Why?The web is not print.
Never has been.
![Page 4: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/4.jpg)
We used to get away with it“Best in Internet Explorer”
800×600 → 1024×768
Ubiquitous 960px grids
![Page 5: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/5.jpg)
Circa 2002
These were the only screens we hadbut my weren’t they lovely
![Page 6: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/6.jpg)
The “post PC” worlda.k.a. Phones are as important
![Page 7: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/7.jpg)
There’s No Need
Not just about the tiny pocket screensAlthough I’m as guilty of this as the next designer
![Page 8: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/8.jpg)
It’s not...m.yoursitehere.comA specific touch optimized interfaceThe awful bloody onswipe thing (although WordPress TwentyEleven is responsive)
![Page 9: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/9.jpg)
What does it look like?
blog.andycroll.com
![Page 10: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/10.jpg)
What does it look like?
getdenso.com
![Page 11: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/11.jpg)
What does it look like?
winnielim.com
![Page 12: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/12.jpg)
How?@media only screen and (min-width: 768px) { /* Your CSS goes here for iPad and up */}
@media only screen and (max-width: 320px) {/* Your CSS goes here for portrait phones */
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /* Retina Display!!! */}
![Page 13: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/13.jpg)
Supported?All “modern” browsers
& Mobile Webkit
Shit browsers? JS-fallback.
![Page 14: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/14.jpg)
The Next 1 Billion People Online Will Be Accessing From Their Phones
Mobile firstThere’s advantages in driving your design as well
![Page 15: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/15.jpg)
& respond.js
![Page 16: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/16.jpg)
It’s not the only solutionBut think about the amount of work an adaptive or responsive approach is compared to complete re-engineering.
Adaptive? Responsive? Flexible grids?
![Page 17: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/17.jpg)
Get this bookabookapart.com
@beep
The other books are great too.
![Page 18: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/18.jpg)
A Manifesto As Much A Tutorial
And while you’re buying books...Get HARDBOILED
![Page 19: Responsive Web Design](https://reader031.fdocuments.us/reader031/viewer/2022013111/548c9ab4b4795927358b4db1/html5/thumbnails/19.jpg)
Available For Work
@andycrollandycroll.com