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

▶
patterns in the process clearleft
SMART_READER_LITE
LIVE PREVIEW

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

Nov 19, 2022 462 likes •1.26k views

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

slide-1
SLIDE 1

patterns in the process

slide-2
SLIDE 2

clearleft

sophie andy cennydd james richard paul natalie jeremy

slide-3
SLIDE 3

discovery content information architecture visual design templates

slide-4
SLIDE 4

discovery

@sophystar @andybudd

slide-5
SLIDE 5

discovery

slide-6
SLIDE 6

@rellyab

content

slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

ia

@cennydd @clagnut @boxman

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24

ElfCartel super best friends web

Search Go Home People Groups · · Log out Dashboard Settings Bob Bobertson Me in a nutshell Olenit iuscing consequis facinci dolut, ros irilla psustrud. Stincil lacus inciduipit mollis magniamet, dolortisl consenisim aliquisi diamet ver illa quipsum illaor illam. Put veros dunt curae gait, veriusto accum patin. Conullandiam blamet pede, issectem dionsenit illam ridiculus acipisl lute, suscipit doloboreet coreraestrud. Tellus tat lacinia, commodipis nulput veliquat volor venit enim, fermentum eugiat nummy. Accumsandre si sustrud, tisi vulluptatum ullaor eu, praesed euisl acilit sequat. Aliquip aute nostrud, lobor dolor nim vulputat, non curae bla etuerostrud. Nonsenibh endreet veros alisi dipiscipit, niscidu dolent sagittis. Aliquis nonulla acipsus.

More about me Friends Groups

Amidactio's profile

friend status super best friend good friend mere acquaintance never met Add to friends Screen name Adactio b0xman Clagnut Oriental prince in a land
  • f soup
logged in A friend Notes

elfcartel.clearleft.com

slide-25
SLIDE 25

code.new-bamboo.co.uk/polypage

slide-26
SLIDE 26
slide-27
SLIDE 27

user testing silverbackapp.com

slide-28
SLIDE 28

visuals

@nicepaul @jvbates

slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36

templates

@adactio @natbat

slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41

HTML XHTML liquid fixed IE6 decisions

slide-42
SLIDE 42

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

slide-43
SLIDE 43

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

dean edwards

slide-44
SLIDE 44
slide-45
SLIDE 45

p = 50 log ––––– + 1 a aie6 t tie6

[ ]

slide-46
SLIDE 46

HTML CSS JavaScript

slide-47
SLIDE 47

HTML

forms tables microformats

slide-48
SLIDE 48

<li> <a href=".."> <img src="avatar.gif" alt="" /> username </a> </li>

list of contacts

slide-49
SLIDE 49

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

hCard

slide-50
SLIDE 50

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

XFN

slide-51
SLIDE 51

CSS

reset elements classes IDs page-specific

slide-52
SLIDE 52

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

site

slide-53
SLIDE 53

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

site-section

slide-54
SLIDE 54

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

site-section-page

slide-55
SLIDE 55

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

tips

slide-56
SLIDE 56

JavaScript

progressive disclosure form enhancements

slide-57
SLIDE 57

progressive disclosure

slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60
slide-61
SLIDE 61

<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'); });

slide-62
SLIDE 62
slide-63
SLIDE 63
slide-64
SLIDE 64

form enhancements

slide-65
SLIDE 65
slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68
slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71
slide-72
SLIDE 72

<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>

slide-73
SLIDE 73
slide-74
SLIDE 74
slide-75
SLIDE 75

pattern storage svn sandbox wiki

slide-76
SLIDE 76

discovery content information architecture visual design templates build

slide-77
SLIDE 77
slide-78
SLIDE 78

discovery content information architecture visual design templates build

slide-79
SLIDE 79

@funella theplant @henry theplant @spikey theplant