patterns in the process clearleft
play

patterns in the process clearleft sophie andy cennydd james - PowerPoint PPT Presentation

patterns in the process clearleft sophie andy cennydd james richard paul natalie jeremy discovery content information architecture visual design templates discovery @sophystar @andybudd discovery content @rellyab ia @clagnut


  1. patterns in the process

  2. clearleft sophie andy cennydd james richard paul natalie jeremy

  3. discovery content information architecture visual design templates

  4. discovery @sophystar @andybudd

  5. discovery

  6. content @rellyab

  7. ia @clagnut @cennydd @boxman

  8. elfcartel.clearleft.com logged in A friend Notes Search Go ElfCartel super best friends web Home People Groups Dashboard · Settings · Bob Bobertson Log out Amidactio's profile Add to friends Me in a nutshell Friends Olenit iuscing consequis facinci dolut, ros irilla psustrud. Stincil Screen name lacus inciduipit mollis magniamet, dolortisl consenisim aliquisi friend status diamet ver illa quipsum illaor illam. Put veros dunt curae gait, Adactio veriusto accum patin. Conullandiam blamet pede, issectem super best friend dionsenit illam ridiculus acipisl lute, suscipit doloboreet b0xman coreraestrud. good friend Tellus tat lacinia, commodipis nulput veliquat volor venit enim, Clagnut fermentum eugiat nummy. Accumsandre si sustrud, tisi vulluptatum mere acquaintance ullaor eu, praesed euisl acilit sequat. Aliquip aute nostrud, lobor Oriental prince in a land dolor nim vulputat, non curae bla etuerostrud. Nonsenibh endreet of soup veros alisi dipiscipit, niscidu dolent sagittis. Aliquis nonulla acipsus. never met More about me Groups

  9. code.new-bamboo.co.uk/polypage

  10. user testing silverbackapp.com

  11. visuals @nicepaul @jvbates

  12. templates @adactio @natbat

  13. decisions HTML XHTML liquid fixed IE6

  14. <!--[if lt IE 7]> <link rel="stylesheet" href="/styles/ie.css" type="text/css" media="screen" /> <![endif]-->

  15. dean edwards <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/ 2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->

  16. [ ] a t ie6 p = 50 log ––––– + 1 t a ie6

  17. HTML CSS JavaScript

  18. HTML forms tables microformats

  19. list of contacts <li> <a href=".."> <img src="avatar.gif" alt="" /> username </a> </li>

  20. hCard <li class="vcard"> <a href=".." class="fn nickname url"> <img src="avatar.gif" alt="" class="photo" /> username </a> </li>

  21. XFN <li class="vcard"> <a href=".." class="fn nickname url" rel="contact"> <img src="avatar.gif" alt="" class="photo" /> username </a> </li>

  22. reset elements CSS classes IDs page-specific

  23. site <body> <div id="main-content"> ... </div> #maincontent { width: 60%; }

  24. site-section <body id="discussion"> <div id="main-content"> ... </div> #discussion #maincontent { width: 40%; }

  25. site-section-page <body id="discussion" class="edit" > <div id="main-content"> ... </div> #discussion.edit #maincontent { width: 100%; } #discussion.index #maincontent { width: 80%; }

  26. tips body { min-width: 760px; max-width: 96em; } input[type="radio"], input[type="checkbox"]{ width: 1em; height: 1em; } a:hover, a:focus { text-decoration: underline }

  27. progressive disclosure form enhancements JavaScript

  28. progressive disclosure

  29. <a href="#login" class="toggle">log in </a> ... <div id="login"> ... </div> jQuery('a.toggle').click(function() { var id = jQuery(this).attr('href'); jQuery(id).slideToggle('fast'); });

  30. form enhancements

  31. <select name="sub-category"> <optgroup label="Community Discussion"> <option>Activities</option> <option>Auto</option> ... </optgroup> <optgroup label="Personals"> <option>Women seeking men</option> <option>Men seeking women</option> ... </optgroup> </select>

  32. pattern storage svn sandbox wiki

  33. discovery content information architecture visual design templates build

  34. discovery content information architecture visual design templates build

  35. @henry @funella theplant theplant @spikey theplant

Recommend


More recommend