Mobile last
-
Upload
cristiano-rastelli -
Category
Technology
-
view
110 -
download
0
description
Transcript of Mobile last
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...