Mobile Last
CrsIao RatL




                     H-Farm – Tenuta Ca’ Tron
                     Sabato 17 novembre 2012
#mob01   @areaweb
HeL
IsiO Stli      LiiNa bAgdn
 DeiN & dvLomN   ArhTetE & cnN
w DeEOpET
IneFae & wb Dein
IneAcin/U dsG
DeIN   DeEOpET   Tt & DeU
Mobile first
reality check
mobile last
conclusioni
attenzione
MOBILE
 FIRST
www.lukew.com/ff/entry.asp?933
www.abookapart.com/products/mobile-first
twitter.com/lukew/status/262920585938612224/photo/1/large
Dopodiché,
il diluvio…
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?
LUKE wroblewski




twitter.com/lukew/status/268406393944559616
RESPONSIVE    RWD
              MDWD
        Vs.   MFWD
              RESS
 ADAPTIVE     PRD
ADAPTIVE

  RESPONSIVE
MOBILE       PATTERN
  FIRST       libraries




 ADAPTIVE    FRAMEWORK
RESPONSIVE   boilerplate
REALITY
 CHECK
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)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
mark boulton
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.


        markboulton.co.uk/journal/gridset-and-the-red-pill
www.slideshare.net/yiibu/pragmatic-responsive-design/
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
Content First
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
LONGNECKER
I'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.

          www.netmagazine.com/opinions/responsive-web-design-boring
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience
37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign
BUDGET (tempo/soldi)
requisiti   contenuti
obiettivi   architettura delle informazioni
                       user
DESIGN                 experience


waterfall
MOBILE
 LAST
HTML(5)
LESS/CSS
@media
responsive
HTML(5)
LESS/CSS
@media
responsive
HTML(5)
LESS/CSS
@media
responsive
HTML(5)
LESS/CSS
@media
responsive
HTML(5)
LESS/CSS
@media
responsive
For Real   ©
www.webdebs.org
www.relais-abbazia.it
www.ermesponti.it
www.avanscoperta.it
CONCLUSIONI
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.




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.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/
www.slideshare.net/yiibu/pragmatic-responsive-design/
mobile ?
FIRST / last / while
il punto è… USE YOUR


   HEAD
   FIRST
grazie
IsiO StlI
   W.Dio.E
credits:
Jacopo Romei + Sam Reghenzi
referenze:
Must-Read
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-boring
http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
http://markboulton.co.uk/journal/gridset-and-the-red-pill
http://www.netmagazine.com/opinions/responsive-web-design-boring
http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
http://37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-
noise-redesign
http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/



Nice-to-Read
http://www.lukew.com/ff/entry.asp?1394
http://www.lukew.com/ff/entry.asp?1562
http://www.lukew.com/ff/entry.asp?1436
http://www.alistapart.com/articles/responsive-web-design/
Nice-to-Read (cont.)
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-7877412
http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
http://www.slideshare.net/pekkos/mobile-experiences
http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-
design
https://speakerdeck.com/scottjehl/responsive-responsible
https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-
less-than-a-year
https://speakerdeck.com/m83/responsive-webdesing-and-the-little-dirty-secret-behind-fluid-grids

http://markboulton.co.uk/journal/adaptive_content_management
http://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-Design
http://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-workflow
http://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-
introduction
http://digital.cabinetoffice.gov.uk/govuk-launch-colophon/



Resources
http://responsive.is/
http://bradfrost.github.com/this-is-responsive/patterns.html
http://mediaqueri.es/
http://futurefriend.ly/
Per chi volesse approfondire...




                                  www.webdebs.org

Mobile last