Presentation that I gave, along with coworkers Mark Sims and Mike Townson, at the Dallas Society of Visual Communications.
http://www.dsvc.org/events/working-lunch/10/2012
1. Proactive
Responsive
Design
Dallas Society of Visual Communications
Wednesday — October 24, 2012
http://flickr.com/photos/63631877@N00/3937964101
2. We work as designers/devs at
Nathan Smith Mark Sims Mike Townson
Principal UI Architect UI Developer UX Designer
http://www.projekt202.com
3. Relax, don’t stress out
taking notes. You can
get the slides here…
http://j.mp/pro-rwd
4. Front-end development is like playing midfield. It’s the
“glue” that connects visual design with the server-side.
5. The term “Responsive Web Design”
was coined by Ethan Marcotte, in an
an article published by A List Apart.
Loosely defined, it means adapting
to various screen sizes, using a fluid
grid and @media queries in CSS.
7. Ethan also wrote a book…
http://www.abookapart.com/products/responsive-web-design
8. When should you use RWD™?
Responsive web design using @media queries (with one
codebase for all devices) typically works best for web
“sites” (not apps). Apps work best when tailored to one
particular interaction paradigm. For instance, mobile
Gmail is a different experience than on the desktop.
As a general rule of thumb, if your content can be read
via RSS (such as Google Reader) and still make sense, it
might be worth considering a responsive approach.
9. State of mobile in 2007 — The year the iPhone was introduced
http://flickr.com/photos/djwudi/382030798
10. The state of mobile in 2012 — Touch screens reign supreme
11. The one thing all these phones have
in common (besides Angry Birds) is
they all have decent web browsers.
http://paulirish.com/2010/high-res-browser-icons
12. Each day, on planet Earth…
1,450,000
mobile devices activated
317,124
newborns begin life
http://lukew.com/ff/entry.asp?1506
19. Disney.com — Entire site is responsive
There is one Flash ad, which disappears if the browser is at “mobile” width.
Note: Most mobile devices have little/no support for Flash, Silverlight, etc.
29. Neatly organized *.sass CSS served to browser
http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
48. Elements that rely only on mousemove,
mouseover, mouseout or the CSS pseudo-
class :hover may not always behave as
expected on a touch-screen device such
as iPad or iPhone. — Apple Reference Library
http://trentwalton.com/2010/07/05/non-hover