Upload
cristiano-rastelli
View
33
Download
0
Embed Size (px)
Citation preview
Index• Premises
• Responsive. Adaptive. Mobile.
• Liquid web. Numbers.
• Tools & Techs.
• VisualDNA.
markboulton.co.uk/journal/gridset-and-the-red-pill
Responsive design is time-consuming. Not just writing the code, but all the way back to content requirements, typography, layout,
managing client needs and expectations, Q.A and bug testing.
Making websites this way adds time. In some cases, too much. Or rather, we’re spending
time on the wrong things.
Mark Boulton
If you’re making websites, chances are you’ve given some thought to what constitutes a
responsive-friendly design process — and you’ve probably found that adding a mockup for every breakpoint isn’t a
sustainable approach.
www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
Using a predefined grid seems to make as much sense as using a
predefined colour scheme.
www.alistapart.com/articles/the-infinite-grid/
www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/
Zeldman
Responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.
Where are people using mobile devices?
Source: Compete's Quarterly Smartphone Report
84%
80%
76%
69%
64%
62%
47%
at home
during miscellaneous downtime throughout the day
waiting in lines of waiting for appointments
while shopping
at work
while watching TV
during commute in to work
twitter.com/gluca/status/312849923466985472
Gianluca Diegoli
I realized that it's the mobile experience that determines what then I use in my desktop. For example, Pinterest for iOS is lousy, and then…
googlemobileads.blogspot.co.uk/2011/04/smartphone-user-study-shows-mobile.html
• Context is changing. We must embrace it.
• Measure/track users in specific devices.
• Different approach to quiz & data analysis.
http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/http://www.slideshare.net/yiibu/pragmatic-responsive-design/http://www.netmagazine.com/opinions/responsive-web-design-boringhttp://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.phphttp://markboulton.co.uk/journal/gridset-and-the-red-pillhttp://www.netmagazine.com/opinions/responsive-web-design-boringhttp://www.slideshare.net/pkattera/design-process-for-responsive-web-designhttp://37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesignhttp://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/http://trentwalton.com/2013/04/10/reorganization/http://viljamis.com/blog/2012/responsive-workflow/http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html
Must-Read
Nice-to-Read
Some references:
http://www.lukew.com/ff/entry.asp?1394http://www.lukew.com/ff/entry.asp?1562http://www.lukew.com/ff/entry.asp?1436http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/ http://www.alistapart.com/articles/the-infinite-grid/http://www.alistapart.com/articles/uncle-sam-wants-you-to-optimize-your-content-for-mobile/http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.slideshare.net/livefront/responsive-design-7877412http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-webhttp://www.slideshare.net/pkattera/design-process-for-responsive-web-designhttp://www.slideshare.net/pekkos/mobile-experienceshttp://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-designhttps://speakerdeck.com/scottjehl/responsive-responsiblehttps://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-yearhttps://speakerdeck.com/m83/responsive-webdesing-and-the-little-dirty-secret-behind-fluid-grids
http://markboulton.co.uk/journal/adaptive_content_managementhttp://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/http://www.quora.com/Responsive-Design-vs-Adaptive-Designhttp://www.html5rocks.com/en/mobile/responsivedesign/http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/
Nice-to-Read (cont.)
http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/http://techcrunch.com/2012/10/27/tablet-first-mobile-second/ http://www.jordanm.co.uk/post/32866575759/the-airfix-responsive-workflowhttp://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/http://www.guardian.co.uk/help/developer-blog/2012/oct/18/responsive-design-guardian-introductionhttp://digital.cabinetoffice.gov.uk/govuk-launch-colophon/
Nice-to-Read (cont.)
http://responsive.is/http://bradfrost.github.com/this-is-responsive/http://mediaqueri.es/http://futurefriend.ly/http://www.mobiledesignpatterngallery.comhttp://www.mobilepatterns.com
Resources
http://html.adobe.com/edge/reflow/http://html.adobe.com/edge/inspect/http://zambetti.com/projects/liveview/http://popapp.inhttp://www.solidifyapp.comhttp://proto.iohttps://gridsetapp.com
Tools