Topsy Turvy Design: Adapting your design process for adaptive layout
Upcoming SlideShare
Loading in...5
×
 

Topsy Turvy Design: Adapting your design process for adaptive layout

on

  • 831 views

Slides from my talk at Front End Conference, Oslo 2011

Slides from my talk at Front End Conference, Oslo 2011

Statistics

Views

Total Views
831
Views on SlideShare
572
Embed Views
259

Actions

Likes
0
Downloads
8
Comments
0

2 Embeds 259

http://www.frontend2011.com 258
http://uiportal.mcafee.int 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Topsy Turvy Design: Adapting your design process for adaptive layout Topsy Turvy Design: Adapting your design process for adaptive layout Presentation Transcript

  • IopsyTurvyDesign Adapting your design process for adaptive design @richquick Background texture thanks to ~Essence of a Dream~ http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/
  • IopsyTurvyDesign Adapting your design process for adaptive design Background texture thanks to ~Essence of a Dream~ http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/
  • Who am I?
  • Rich Quick
  • Rich Quick(before you ask)
  • Yes(it is my real name)
  • Here’s my passport to prove it
  • WebDesigner
  • Front endDeveloper
  • 12Years
  • Just started working for
  • Very traditional site
  • Very traditional siteDesigned for desktop
  • Very traditional siteDesigned for desktopTraditional design process
  • Very traditional siteDesigned for desktopTraditional design processLooks “so so”
  • TheTraditionalDesignProcess
  • The
  • The Traditional Design Process
  • The Traditional Design Process 1 Big FatCheque http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/
  • 2 Have a lattehttp://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/
  • s
  • Do some wireframes 3
  • Do some wireframes 3 (maybe)http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/
  • Do some wireframes 3
  • Do some wireframes 3
  • Do some wireframes 3
  • Do some wireframes 3
  • 4Give to the(ultra cool) designer
  • Who does some Photoshop magic
  • 5Then the client / your boss sees it
  • 5Then the client / your boss sees it and loves it 1 st TIME
  • 5Then the client / your boss sees it and loves it 91st TIME
  • 6Next, the design gets handed over to this guy
  • 6 The geek* / techie* / HTML monkey** delete as applicable
  • He* does a load of geekytechienerdy stuff * It a he, obviously.
  • 7 Big Fat FinalCheque
  • 1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 HTML Monkey does voodoo 7 Big fat final cheque
  • 1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 HTML Monkey does voodoo 7 Big fat final cheque
  • Traditional Print Process
  • Big fat deposit cheque 1 Have a latte cappuccino 2 Do some wireframes 3 Photoshop Indesign comps 4 Sign off 5HTML Monkey Printer does voodoo 6 Big fat final cheque 7
  • 1 2 3 5 4 6 7
  • WHY?
  • CHANGE
  • DONʼT MAKE MECHANGE
  • THE MORE YOUASK PEOPLE TOCHANGE
  • THE LESS OF THEMWILL
  • var ageOfWebDesignProcess; // in yearsif (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = 572;}
  • PEOPLE HATE CHANGETHAT MUCH }
  • Web Designers
  • Get asked to changemore than most
  • First I learnt tables.. then that was wrongThen I learnt Flash.. then that wasnʼt coolThen I learnt CSS..Then it was accessibility..Then it was XHTML..Then it was HTML5..Now what?!!
  • Adaptive Web Design** or responsive, depending on what book you read
  • Aww crap!
  • can I be bothered?
  • some good news
  • some good news
  • itʼs really easy
  • there’s just 1 thing you need to learn
  • Media Queries@media screen and (min-width:1025px) { /* your CSS here */}
  • That’s it (pretty much)
  • At least from atechnical point of view
  • From atechnical point of view Learn 1 line of code and you know how to do adaptive design
  • From atechnical point of view Learn 1 line of code and you know how to do adaptive design
  • From adesign point of view It doesnʼt need to be much harder
  • There’s no wrong or rightway to do adaptive design But hereʼs how I do it...
  • Remember the cutleryin Titanic?
  • No?
  • Just start from the outside, Jack, and work in
  • Just start from the outside, Jack, and work in
  • Start inthe “traditional” way
  • Cheque, latte,wireframes,Photoshop
  • Then ask “what if”?
  • “What if it wasa bit thinner?”
  • “What if it was thinner still?”
  • When youʼre designingStart from the outside and work in
  • When youʼre designingStart from the outside and work in
  • When codingStart from the inside and work out
  • It’s way easierand there’s a hidden IE gift
  • Codethinnestfirst
  • Then codeoutwards
  • Gracefully degrade your designProgressively enhance your code
  •  A word about IE
  • IE <8 doesn’t support @mediaUse conditional commentsor javascript (modernizr.js, css3-media-queries.js) http://code.google.com/p/css3-mediaqueries-js/
  • Learn to let go Safari, Chrome, Firefox, Opera, your fridge IE
  • The IEGift
  • jQuery
  • Books Adaptive Web Design Aaron Gustafson Responsive Web Design Ethan Marcote
  • Thanks Rich Quick @richquickrich@richquick.tv