Hide Notes 

Slide 1: every time we create a new site or application (or redesign) design new systems / generate new code / use different naming schemes after designing/dev sites for 12+ years = recognition of repetition DEJA VU 1 we notice repetition in code, trends, traffic, and users’ behavior. code user behavior traffic style trends 2
Slide 2: WHAT is this about? ? What IS this about? Over the next hour, going to stand up here on stage in front of you and attempt to figure that out. 3 distillation of best practices a distillation of best practices, potentially shared among millions of sites something that’s simple... easy to adopt... 4
Slide 3: +5 something that’s flexibly applicable freely add to — or remove from — the structure as appropriate lowercase semantic web “dirty semantics” utilize existing standards: embrace the lowercase web [CLICK] address the issue of dirty semantics (Tom Coates) -mark things up however & as fast as you can optional = voluntarily adopted | cooperation NOT control collaborative and decentralized: doc model for global adds and mods 6
Slide 4: common structure IS NOT a single prescription template a limit on creativity or flexibility going to hijack of anyone’s job another standard to validate against 7 ASK the questions SEEK the answers DOCUMENT those answers 8
Slide 5: HOW did this come about? ? Much of this came about after some research two years ago on common naming schemes by Andy Clarke -specifically -- he was trying to find a way to more consistently apply user style sheets. 9 research by Andy Clarke paraphrased: AS A USER I’d like an easy way to customise pages I visit. AS A BUSINESS PERSON I’d like to establish conventions which make my development time more efficient http://www.stuffandnonsense.co.uk/archives/whats_in_a_name.html 10
Slide 6: May 2004 http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html 11 Site name 1 37Signals 2 A List Apart 3 Adactio 4 Adaptive Path 5 Airbag Inustries 6 All in the head 7 And all that Malarkey 8 Andy Budd 9 Asterisk 10 Backup Brain 11 Blue Flavor 12 Cameron Moll 13 Clagnut 14 Collylogic 15 Daring Fireball 16 Digital Web 17 Gotomedia 18 Hard News 19 Hesketh.com 20 Hicksdesign 21 Hivelogic 22 Inside Firefox 23 Intergen News 24 Jason Santa Maria Outer Header Navigation Inner Group 1 Group 2 Group 3 Footer Container Masthead masthead logo header navbar navigation nav navigation banner nav nav-main branding nav content content content main Content content content maincol airbag posts Sidebar secondary extra subcol longboard aside col sidebar Footer footer footer footer footer legal siteinfo-legal footer footer2 copyright footer copyright bookmarks rightbar footer footer Footer footer footer right news love footer footer footer footer copyright footer copyright Research of my own: 2 years later. Has anything changed? Over 60 sites — then gave up. too time consuming box content container wrapper contenti content-main content-sub content col1i content links col2i navBar sidebar storysub features sidebar Sidebar sidebar columnTwo left wrap page header home title <ul> navbar nav content story home content cbody storymain blog blog Main wrapper Box header Banner masthead globalNav nav nav navPrimary nav header banner topbanner header content content columnOne content content content main-body container wrap s800x600 wrapper wrap container outer pageHeader <h1> header marketingCop highlights y maincol sidebox content center content maincol sidebar right contentcontainer mainnavigatio n nav content subnavigation highlight subcol 12
Slide 7: Some common names, but many were unique secondary easelnav copy-etc container sidebar topHolder grid3 header footer maincol bottomHolder content mainpane banner extra box wrap freedom Site name Outer Header Navigation Inner Group 1 Group 2 Group 3 Footer 1 37Signals Container Masthead Content content content Sidebar Footer footer footer footer footer legal 2 A List Apart 3 Adactio masthead logo navbar main secondary extra sidebar navigation nav 4 Adaptive Path header content content maincol airbag posts subcol 5 Airbag Inustries 6 All in the head box navigation nav longboard aside content banner 7 And all that Malarkey 8 Andy Budd 9 Asterisk container wrapper nav-main nav content content-main content-sub content col1i links col siteinfo-legal footer branding contenti col2i footer2 10 Backup Brain 11 Blue Flavor content cbody navBar copyright footer wrap header home title <ul> content story sidebar 12 Cameron Moll 13 Clagnut page navbar nav storymain blog blog storysub features sidebar copyright footer footer home bookmarks rightbar 14 Collylogic wrapper Box header content 15 Daring Fireball 16 Digital Web 17 Gotomedia Banner Main Sidebar sidebar Footer footer footer footer footer footer footer masthead globalNav nav nav content container wrap pageHeader <h1> content columnOne content columnTwo left 18 Hard News right 19 Hesketh.com 20 Hicksdesign 21 Hivelogic s800x600 wrapper wrap header navPrimary nav content content marketingCop highlights y maincol sidebox content center sidebar right news love header main-body 22 Inside Firefox container outer banner 23 Intergen News topbanner header 24 Jason Santa Maria contentcontainer mainnavigatio n nav content copyright footer content subnavigation highlight subcol maincol copyright 13 Exact recurrances Site name 1 37Signals 2 A List Apart 3 Adactio 4 Adaptive Path 5 Airbag Inustries 6 All in the head 7 And all that Malarkey 8 Andy Budd 9 Asterisk 10 Backup Brain 11 Blue Flavor 12 Cameron Moll 13 Clagnut 14 Collylogic 15 Daring Fireball 16 Digital Web 17 Gotomedia 18 Hard News 19 Hesketh.com 20 Hicksdesign 21 Hivelogic 22 Inside Firefox 23 Intergen News 24 Jason Santa Maria Outer Header Navigation Inner Group 1 Group 2 Group 3 Footer Container Masthead masthead logo header navbar navigation nav navigation banner nav nav-main branding nav content content content main Content content content maincol airbag posts Sidebar secondary extra subcol longboard aside col sidebar Footer footer footer footer footer legal siteinfo-legal footer footer2 copyright footer copyright bookmarks rightbar footer footer Footer footer footer right news love footer footer footer footer copyright footer copyright box content container wrapper contenti content-main content-sub content col1i content links col2i navBar sidebar storysub features sidebar Sidebar sidebar columnTwo left wrap page header home title <ul> navbar nav content story home content cbody storymain blog blog Main wrapper Box header Banner masthead globalNav nav nav navPrimary nav header banner topbanner header content content columnOne content content content main-body container wrap s800x600 wrapper wrap container outer pageHeader <h1> header marketingCop highlights y maincol sidebox content center content maincol sidebar right contentcontainer mainnavigatio n nav content subnavigation highlight subcol 14
Slide 8: Site name 1 37Signals 2 A List Apart 3 Adactio 4 Adaptive Path 5 Airbag Inustries 6 All in the head 7 And all that Malarkey 8 Andy Budd 9 Asterisk 10 Backup Brain 11 Blue Flavor 12 Cameron Moll 13 Clagnut 14 Collylogic 15 Daring Fireball 16 Digital Web 17 Gotomedia 18 Hard News 19 Hesketh.com 20 Hicksdesign 21 Hivelogic 22 Inside Firefox 23 Intergen News 24 Jason Santa Maria Outer Header Navigation Inner Group 1 Group 2 Group 3 Footer Container Masthead masthead logo header navbar navigation nav navigation banner nav nav-main branding nav content content content main Content content content maincol airbag posts contentmain content col1i content Sidebar secondary extra subcol longboard aside content-sub links col2i navBar sidebar storysub features sidebar Sidebar sidebar columnTwo left right news love bookmarks rightbar col sidebar Footer footer footer footer footer legal siteinfo-legal footer footer2 copyright footer copyright footer footer Footer footer footer footer footer footer footer copyright footer copyright Related names: (wrap and wrapper, nav and navigation). Still not as much consensus as I wanted to see, except for “footer”. box content container wrapper contenti wrap page header home title <ul> navbar nav content story home content cbody storymain blog blog Main wrapper Box header Banner masthead globalNav nav nav navPrimary nav header banner topbanner header content content columnOne content content content main-body container wrap s800x600 wrapper wrap container outer pageHeader <h1> header marketingCop highlights y maincol sidebox content center content maincol sidebar right contentcontainer mainnavigatio n nav content subnavigation highlight subcol 15 John Allsopp’s data script -> data from ~1300 sites 5000 unique class/ID values none > 100 x 16
Slide 9: design pattern a problem which occurs over and over again... and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice Christopher Alexander, Sara Ishikawa, Murray Silverstein A Pattern Language, 1977 One thing that was missing in all this research: concept of design patterns ... quote... *without ever doing it the same way twice* 17 If someone asks “But won’t having ANY kind of common structure limit creativity?” I just point them to this little ol’ site called the CSS Zen Garden. Talk about locked down structure?! Creepy Crawly This is Cereal Mediterranean Bonsai Sky Miracle Cure Release One 15 Petals C-Note Radio Zen prêt-à-porter What Lies Beneath 18
Slide 10: design pattern a problem which occurs over and over again... and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice Christopher Alexander, Sara Ishikawa, Murray Silverstein A Pattern Language, 1977 *the core of the solution* this is not a one-size-fits-all solution it’s a strategy for solving a problem benefit of looking at patterns is familiarity / recognition / common vocabulary 19 site patterns WHAT THEY ARE blog, wiki, academic, store, app, forum, gallery, brochure-ware, conference, government, ... WHAT THEY’RE FOR political, documentation, distribution, promotion, ... multiple levels of patterns, for example we can identify site-level patterns 20
Slide 11: page-level patterns page patterns contact, news, map, results, product, category, help, ... 21 module patterns BLOG PAGE profile, entries, archive list, interesting links, blogrolls (XFN), photos/galleries, music, ... CONTACT PAGE form, address (hcard), map, departments, people & titles (hcard), ... getting more atomic, we get to module patterns combinations of these might be unique to specific page patterns 22
Slide 12: interaction patterns interaction patterns drag&drop, expand/collapse, highlight, inline edit, column sorting, add new item, delete item, tagging, rating, progress meter 23 Gem by O’Reilly, published end of last year fantastic introduction to interface patterns In essence, patterns are structural and behavioral features that improve the “habitability” of something [...] they make things easier to understand or more beautiful; they make tools more useful and usable. —Jenifer Tidwell 24
Slide 13: blog brochure band store politics Site patterns home entry archive about Page patterns We start out with site-level patterns, come down the tree to pagelevel, using a blog for an easy example’s sake, then module-level -we can also look at this from the bottom up, starting with the base of HTML elements/attributes. Microformats are basically a common structure connection between HTML and specific module-like patterns. profile events blogroll entries archive Module patterns Microformats HTML/XHTML 25 Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. 26
Slide 14: Microformats hcard = people/orgs hcalendar = calendars/events XOXO = lists/outlines —Microformats.org 27 blog brochure band store politics Site patterns But technically, there’s a jump between module and page patterns as far as pragmatic structure goes. We also may need a way to group modules on the page, and assign them some kind of significance relative to each other. home entry archive about Page patterns ? profile events blogroll entries archive Module patterns Microformats HTML/XHTML 28
Slide 15: proposed: 2 types of grouping IDENTIFICATION specific named content (navigation, search, ...) CLASSIFICATION content importance/relevance meta-structure for page architecture the meta-structure completes the missing link between page and module patterns. These groupings hint at possible divisions, and may or may not be used to apply styles or scripts to these groupings. 29 WHO benefits from this? ? 30
Slide 16: designers, developers, engineers greater consistency adoption of best practices decentralized ownership interoperable save time consistency, best practices, decentralized Interoperable: work is applicable broadly 31 If we can consistently identify certain structural elements on the page... 32
Slide 17: And allow use of these elements in any combination and in any style... can even remove from or add to... 33 Gain the ability to consistently target certain elements either through style sheets... #diamond {...} 34
Slide 18: Or by scripts eg. do something with all the elements inside the triangle container document.getElementById('triangle') 35 software vendors reliable targets offer powerful customization auto-generation/detection 36
Slide 19: publishers full library of options content indexed more accurately aggregation of data in new ways 37 users consistency in code is hidden easily skinnable apps and sites greater control benefit from applied best practices 38
Slide 20: WHO is doing related work? ? http://developer.yahoo.com/ypatterns/ 39 Yahoo is doing some great work documenting the patterns they’re encountering and using -- they seem mostly to be focused on interaction patterns though. 40
Slide 21: Six Apart recently standardized on their physical HTML structure across all their publishing products (MT, TypePad, LiveJournal) strange naming choices though, which change, based on layout and order. http://www.sixapart.com/ 41 John Allsopp is leading one of the efforts to gather a collection of patterns at webpatterns.org. Through quizzes and collaborative input, he’s attempting to identify and define the major patterns at different levels. http://webpatterns.org/ 42
Slide 22: Luke Wroblewski, a designer at Yahoo is hosting a conversation between several pattern experts, including the previously mentioned Tidwell. http://www.lukew.com/ff/entry.asp?347 43 WHERE do we begin? ? What kind of principles might we follow here to ensure we end up with something reasonable? 44
Slide 23: Principles 1. Start simple. 2. Identify common patterns. 3. Reuse popular taxonomy. 4.Enable global participation. 45 1. anyone should be able to understand/implement/adopt 2. implementations that fit specific patterns. 3. when appropriate, use language people are already comfortable with. 4. decentralized, no single source ownership, means of documenting other patterns WHY go through the trouble? ? 46
Slide 24: the leap isn’t that big site-wide structure is the norm RSS, Atom, SVG, ... already creating site-wide structures we're already publishing to consistent formats: RSS, Atom, SVG... 47 Sharing from site to site is increasing. Obviously there are certain XML formats we’re using most of the time to do this -- but why can’t we make better use of the HTML that’s already there. No man is an island, entire of itself... —John Donne, 1624 48
Slide 25: the publishing model has completely changed over the past few years. Pages on the Web are no longer controlled by a few large media companies. We can all publish content in one way or another, and we publish a LOT OF IT! many one many many 49 apparently the model is many many many to many. But this is just on the surface... Current search engine max ~8 billion pages 50
Slide 26: The Deep Web is estimated to be around 600 billion pages. Everything on the surface is what search engines can see and index -- everything beneath is what is either behind firewalls, passwords, or pages being prevented from indexing. Deep Web 600 billion pages 51 Just taking a look at the dramatic increase of pages being dumped on the Web now compared with over 10 years ago in 1995... 1995 11 million pages rate? gigabyte 2005 – Deep Web 600 billion + pages 2-20 exabytes/year » terabyte » petabyte » exabyte 2 exabytes = 2,000,000,000 gigabytes 52
Slide 27: blog brochure band store politics Site patterns home entry archive about Page patterns So, returning to this little diagram, we have all these patterns in place. But technically, there’s a big jump between module and page patterns as far as pragmatic structure goes. We also may need a way to group modules on the page, and assign them some kind of significance relative to each other. ? profile events blogroll entries archive Module patterns Microformats HTML/XHTML 53 blog brochure band store politics Site patterns home entry archive about Page patterns So, returning to this little diagram, we have all these patterns in place. But technically, there’s a big jump between module and page patterns as far as pragmatic structure goes. We also may need a way to group modules on the page, and assign them some kind of significance relative to each other. ? profile events blogroll entries archive Module patterns Microformats HTML/XHTML 54
Slide 28: id="entries" id="archive" id="profile" id="events" id="blogroll" So let’s say we start with the module patterns from that diagram, and turn the names given to them into IDs. Once we start getting more then 2 or 3 of these per page, we can already tell it will be difficult to group some of them without another level of meta structure for the page. 55 ??? id="entries" id="archive" So we possibly look at grouping some of these modules together -what we name these groupings? undetermined for now -- but that’s one of the primary questions of common structure. ??? id="profile" id="events" ??? id="blogroll" 56
Slide 29: [group] ??? ??? id="entries" id="archive" What if we want more than one level of grouping to indicate several levels of importance? ??? id="profile" id="events" ??? id="blogroll" 57 header ??? content [group] ??? ??? (entries, archive) ??? (profile, events) Zoom back a little bit now to view this in context of the common header and footer elements, and possibly an über group named something like “content”. If we can get to this level of naming, and use a structure something like this, we get into the the ability to apply variations with CSS (to any site) — I can get excited about this... ??? (blogroll) footer 58
Slide 30: two columns id="header" ??? ??? id="footer" 59 reversed id="header" ??? ??? id="footer" 60
Slide 31: three columns id="header" ??? ??? ??? id="footer" 61 swap order of three columns id="header" ??? ??? ??? id="footer" 62
Slide 32: one column with all content id="header" ??? ??? ??? id="footer" 63 split approach id="header" ??? ??? ??? id="footer" 64
Slide 33: one column with only most important content id="header" ??? id="footer" 65 IMAGINE IF... you never had to worry about CSS layout ever again — that your site could be compatible with millions of style sheets and scripts. 66
Slide 34: OR IMAGINE IF... any style sheet or script you wrote could be licensed to and reused by millions of other people. 67 ALSO IMAGINE IF... user style sheets actually worked and could be configured automatically, without users knowing one line of CSS. 68 if they could be applied consistently enough browser makers could predictably implement a range of styles
Slide 35: THANKS This work is licensed under a Creative Commons Attribution 2.5 License. http://creativecommons.org/licenses/by/2.5/ ! 69