H-Farm – Tenuta Ca’ TronSabato 17 novembre 2012

CrsIao RatLMobile Last

@areaweb#mob01

HeL

IsiO Stli LiiNa bAgdnDeiN & dvLomN ArhTetE & cnN

w DeEOpETIneFae & wb DeinIneAcin/U dsG

DeEOpET Tt & DeUDeIN

Mobile firstreality checkmobile lastconclusioni

attenzione

MOBILEFIRST

www.lukew.com/ff/entry.asp?933

www.abookapart.com/products/mobile-first

twitter.com/lukew/status/262920585938612224/photo/1/large

Dopodiché,i! di!uvio…

www.alistapart.com/articles/responsive-web-design/

www.abookapart.com/products/responsive-web-design

viljamis.com

bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/

www.alistapart.com/articles/the-infinite-grid/

futurefriend.ly

techcrunch.com/2012/10/27/tablet-first-mobile-second/

Buzzword?

twitter.com/lukew/status/268406393944559616

LUKE wroblewski

RESPONSIVEVs.

ADAPTIVE

RWDMDWDMFWDRESSPRD

ADAPTIVE

RESPONSIVE

ADAPTIVERESPONSIVE

FRAMEWORKboilerplate

PATTERNlibraries

MOBILEFIRST

REALITYCHECK

viljamis.com

bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

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/

www.alistapart.com/articles/the-infinite-grid/

Using a predefined grid seems to make as much sense as using a

predefined colour scheme.

one design fits all sizes

Welcome to Reality

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

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

www.slideshare.net/yiibu/pragmatic-responsive-design/

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

Content First

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

www.netmagazine.com/opinions/responsive-web-design-boring

LONGNECKERI'm just going to come out and say what some of us have been

thinking about responsive design. It breeds boring.

Every site we build should tell our client's story, and the visual language we use is a large part of that. Not the mathematical accuracy of our grid. We have to make sure we don't sacrifice their story for a responsive design. Boring is still boring, no

matter what screen size.

I worry that starting with mobile first keeps us from designing to our full potential. So far, my internet searching hasn't proven me wrong: most responsive sites aren't bad, but they just don't

capture your attention visually.

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign

BUDGET (tempo/soldi)requisitiobiettivi

contenutiarchitettura delle informazioni

DESIGN userexperience

waterfall

MOBILELAST

HTML(5)LESS/CSS@mediaresponsive

HTML(5)LESS/CSS@mediaresponsive

HTML(5)LESS/CSS@mediaresponsive

HTML(5)LESS/CSS@mediaresponsive

HTML(5)LESS/CSS@mediaresponsive

For Real©

www.webdebs.org

www.relais-abbazia.it

www.ermesponti.it

www.avanscoperta.it

CONCLUSIONI

www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/

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.

Zeldman

www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/

Zeldman

Designers who persist in responsive or even adaptive design based on iPhone, iPad, and leading Android breakpoints will

help accelerate the settling out of the market and its resolution toward a semi-

standard set of viewports.This I believe.

www.slideshare.net/yiibu/pragmatic-responsive-design/

FIRST / last / whilemobile?

HEADFIRST

USE YOURil punto è…

IsiO StlI

grazie

W.Dio.E

credits:Jacopo Romei + Sam Reghenzi

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/

Must-Read

Nice-to-Read

referenze:

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/patterns.htmlhttp://mediaqueri.es/http://futurefriend.ly/

Resources

www.webdebs.org

Per chi volesse approfondire...