ProactiveResponsive Design Dallas Society of Visual Communications Wednesday — October 24, 2012 http://ﬂickr.com/photos/63631877@N00/3937964101
We work as designers/devs atNathan Smith Mark Sims Mike TownsonPrincipal UI Architect UI Developer UX Designer http://www.projekt202.com
Relax, don’t stress outtaking notes. You canget the slides here…http://j.mp/pro-rwd
Front-end development is like playing midﬁeld. It’s the“glue” that connects visual design with the server-side.
The term “Responsive Web Design”was coined by Ethan Marcotte, in anan article published by A List Apart.Loosely deﬁned, it means adaptingto various screen sizes, using a ﬂuidgrid and @media queries in CSS.
Ethan also wrote a book… http://www.abookapart.com/products/responsive-web-design
When should you use RWD™?Responsive web design using @media queries (with onecodebase for all devices) typically works best for web“sites” (not apps). Apps work best when tailored to oneparticular interaction paradigm. For instance, mobileGmail is a diﬀerent experience than on the desktop.As a general rule of thumb, if your content can be readvia RSS (such as Google Reader) and still make sense, itmight be worth considering a responsive approach.
State of mobile in 2007 — The year the iPhone was introduced http://ﬂickr.com/photos/djwudi/382030798
The state of mobile in 2012 — Touch screens reign supreme
The one thing all these phones havein common (besides Angry Birds) isthey all have decent web browsers. http://paulirish.com/2010/high-res-browser-icons
Each day, on planet Earth…1,450,000mobile devices activated 317,124 newborns begin life http://lukew.com/ﬀ/entry.asp?1506
The biggest problem facingresponsive design is <img>and potential ﬁle size.But, there’s a neat solutionfor JPG images, at least…
A non-exhaustivelist of potentiallyhelpful responsiveCSS frameworks…
Elements that rely only on mousemove,mouseover, mouseout or the CSS pseudo-class :hover may not always behave asexpected on a touch-screen device suchas iPad or iPhone. — Apple Reference Library http://trentwalton.com/2010/07/05/non-hover