Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Design Trends: from tables tosemantic html5with a little help from the Doctor            Kevin Bruce
Let’s Do A Little Time           TravelMusketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   2
The “before time”                pre-1993   -books        maga-zines                              Dumb TVMusketeers.me    ...
Then Came the World Wide         WebMusketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   4
Hyperlinks                    1993                             Text linked to other                             text      ...
“What we seem have here are                tables.”Musketeers.me   Design Trends - from html tables to semantic html5 - Ke...
New Technologies                 1998                           table-based layout                           top and side ...
Tables         A simple tool that lets you layout a                        page.      You could create complex layouts wit...
but you still had to know             codeMusketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce...
“You know, this thing makes it easy to write                   code” Musketeers.me    Design Trends - from html tables to ...
Visual Apps Driving             Design                           Adobe (Seneca)                           Pagemill        ...
Visual Apps Driving             Design                           GoLive Cyberstudio                           Adobe GoLive...
Visual Apps Driving             Design                Macromedia                           Fireworks &                    ...
“Flash will save us all!”Musketeers.me        Design Trends - from html tables to semantic html5 - Kevin Bruce   14
Flash comes into it’s              own. 1996 as Future               Released                   Splash, Purchased by      ...
Flash comes into it’s              own.                           2000                          On almost all browsers    ...
A new word is added    to our vocabularyMusketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce  ...
flashturbationUsed by web designers to refer to a website that uses Flashexcessively (usually in an introduction and in the...
“That’s all well and good, but what about                  xhtml?”  Musketeers.me   Design Trends - from html tables to se...
Cascading Style SheetsMusketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   20
New Technologies &            Platforms                       2004-2005                                                   ...
Blogs- breaking the rules                               Blogs put web                               publishing in the     ...
Ajax - javascript’s “refreshing”            answer                               Made popular by                          ...
“I’m tired of reinventing the wheel...”Musketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   24
New Platforms and            Frameworks                   2008   Web Apps, JS Frameworks, APIs, Adobe AirMusketeers.me    ...
Time to make a standMusketeers.me      Design Trends - from html tables to semantic html5 - Kevin Bruce   26
Flash Has a Powerful            Enemy                                 2010          HTML5 Championed by AppleMusketeers.me...
HTML5 Features                     HTML5                                        +                                  CSS3   ...
HTML5 Features        on                     Canvas  D raw b        we  y our !     p age                example:      21 ...
HTML5 Features                  Location      you  ereWh t?!   a                example:          FOUND YOU!Musketeers.me ...
HTML5 Features             TypographyFINAL LY! No mor e Arial and T imes!                  example:            Apple Demo ...
HTML5 Features   Get yo ur               Video       pc orn    po t!       ou                example:        Exploding Vid...
“Learned design from history. Guidelines to                  follow.” Musketeers.me    Design Trends - from html tables to...
Guidelines to                       Follow Clear NavigationNew Web Design Trends - Kevin Bruce - Frederick New Media & Tec...
Guidelines to                       Follow Clear NavigationNot a Lot of TextNew Web Design Trends - Kevin Bruce - Frederic...
Guidelines to                       Follow Clear NavigationNot a Lot of Text       If it’s a text-heavy page,        leave...
Whitespace != Bad            Google+          Whitespace              Issues?       People have learned           to cope ...
Guidelines to                          Follow             Clear Navigation            Not a Lot of Text          If it’s a...
Keep Your Content                   Simple             Home PageYour message in as few     words as possible  A clear call...
Other Good                 Practices     Use HTML5 gee-whiz-features minimally           and ONLY when necessary!         ...
<header>   mojoLive Beta</header><ul>   <li><a href=”/”>Home</a></li>   <li><a href=”/signup”>Signup</a></li></ul><h1>Beta...
“I’m sorry... Why is this important?”Musketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   42
Because   People Scan, they don’t read.Musketeers.me    Design Trends - from html tables to semantic html5 - Kevin Bruce  ...
Because   People Scan, they don’t read.   They don’t want to have to   think.Musketeers.me    Design Trends - from html ta...
Because   People Scan, they don’t read.   They don’t want to have to   think.   They want the information now   yesterdayM...
and...Musketeers.me    Design Trends - from html tables to semantic html5 - Kevin Bruce   46
Mobile Smart          Phones computer!An awesome pocket-sized      Apple sold 55 million iPhones last year                ...
“But, my Client  can’t afford an app  and their site looks  tiny on a phone...”Musketeers.me   Design Trends - from html t...
“I can fix that”Musketeers.me       Design Trends - from html tables to semantic html5 - Kevin Bruce   49
Responsive Design  flexible grid layouts that respond to the size            of your browser window.Musketeers.me       Des...
Responsive DesignA Fairly Quick and Painless Solution 1. The heavy-lifting is done is CSS(3) 2. It can be enhanced with CS...
Responsive Design                DemoMusketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   52
Responsive Design  1. Use the @import rule to import style rules from other style sheets:       <div id=”google_whitespace...
Responsive Design  1. Use the @import rule to import style rules from other style sheets:       <div id=”google_whitespace...
Responsive Design  1. Use the @import rule to import style rules from other style sheets:       <div id=”google_whitespace...
more info                                          Link                                                      iesResponsive...
The Takeaway...Musketeers.me   Design Trends - from html tables to semantic html5 - Kevin Bruce   57
Keep it Simple     Use technologies only when they serve a                    purpose.                    Think “minimalis...
Thank You         Personal Site:      kevinbruce.com      Professional Site:     mojoLive.com                  Blog:      ...
Upcoming SlideShare
Loading in …5
×

Design trends - from html tables to semantic html5

2,160 views

Published on

A review of design trends through the history of the web and how technology has helped shape design.

Published in: Design
  • Be the first to comment

Design trends - from html tables to semantic html5

  1. 1. Design Trends: from tables tosemantic html5with a little help from the Doctor Kevin Bruce
  2. 2. Let’s Do A Little Time TravelMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 2
  3. 3. The “before time” pre-1993 -books maga-zines Dumb TVMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 3
  4. 4. Then Came the World Wide WebMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 4
  5. 5. Hyperlinks 1993 Text linked to other text Basic images Giff animation Beyond header text, little-to-no design on pagesMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 5
  6. 6. “What we seem have here are tables.”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 6
  7. 7. New Technologies 1998 table-based layout top and side navigations javascript rollovers basic design emergingMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 7
  8. 8. Tables A simple tool that lets you layout a page. You could create complex layouts with nesting tables inside one another.Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 8
  9. 9. but you still had to know codeMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 9
  10. 10. “You know, this thing makes it easy to write code” Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 10
  11. 11. Visual Apps Driving Design Adobe (Seneca) Pagemill Released 1994 very basic preview basic table building basic text formattingMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 11
  12. 12. Visual Apps Driving Design GoLive Cyberstudio Adobe GoLive Acquired 1999 Drag & Drop Layers Basic rollover creation table Advanced building Basic text formatting Unique hybrid html viewMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 12
  13. 13. Visual Apps Driving Design Macromedia Fireworks & Dreamweaver Released 1997 Advanced WYSIWYG Advanced table & layer building Advanced text formatting Basic rollover creationMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 13
  14. 14. “Flash will save us all!”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 14
  15. 15. Flash comes into it’s own. 1996 as Future Released Splash, Purchased by Macromedia and re-released as “Flash” Vector-based animation Alpha Transparency compact size, smooth animation Shockwave/Flash plugin required to viewMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 15
  16. 16. Flash comes into it’s own. 2000 On almost all browsers as a standard plugin Spectacular Design Appears Imaginative navigationMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 16
  17. 17. A new word is added to our vocabularyMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 17
  18. 18. flashturbationUsed by web designers to refer to a website that uses Flashexcessively (usually in an introduction and in the navigation); thisis often irritating and in many cases only used to show off howpro a site is.“Dang, that site took like a minute to get past its Flashturbationintro.”(n) Using Macromedia Flash to make a short, almost pointlessanimation only for fun.“I know I should be working on my real animation, but to relievesome stress I just Flashturbated for a while.”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 18
  19. 19. “That’s all well and good, but what about xhtml?” Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 19
  20. 20. Cascading Style SheetsMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 20
  21. 21. New Technologies & Platforms 2004-2005 Social Media, Blogs & AJAXMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 21
  22. 22. Blogs- breaking the rules Blogs put web publishing in the hands of the average user. Navigation on the right Slowly breaking from the tiny text syndromeMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 22
  23. 23. Ajax - javascript’s “refreshing” answer Made popular by Google Maps Make server calls without refreshing the page All modern browsers supported itMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 23
  24. 24. “I’m tired of reinventing the wheel...”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 24
  25. 25. New Platforms and Frameworks 2008 Web Apps, JS Frameworks, APIs, Adobe AirMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 25
  26. 26. Time to make a standMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 26
  27. 27. Flash Has a Powerful Enemy 2010 HTML5 Championed by AppleMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 27
  28. 28. HTML5 Features HTML5 + CSS3 + Javascript It’s not just html, it’s a “stack” of technologies!Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 28
  29. 29. HTML5 Features on Canvas D raw b we y our ! p age example: 21 HTML5 Canvas ExperimentsMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 29
  30. 30. HTML5 Features Location you ereWh t?! a example: FOUND YOU!Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 30
  31. 31. HTML5 Features TypographyFINAL LY! No mor e Arial and T imes! example: Apple Demo Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 31
  32. 32. HTML5 Features Get yo ur Video pc orn po t! ou example: Exploding VideoMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 32
  33. 33. “Learned design from history. Guidelines to follow.” Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 33
  34. 34. Guidelines to Follow Clear NavigationNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  35. 35. Guidelines to Follow Clear NavigationNot a Lot of TextNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  36. 36. Guidelines to Follow Clear NavigationNot a Lot of Text If it’s a text-heavy page, leave lots of visual “rest areas”New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  37. 37. Whitespace != Bad Google+ Whitespace Issues? People have learned to cope with it.New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  38. 38. Guidelines to Follow Clear Navigation Not a Lot of Text If it’s a text-heavy page, leave lots of visual “rest areas”Large(ish) links and Form Elements New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  39. 39. Keep Your Content Simple Home PageYour message in as few words as possible A clear call to action! More info, for the people that want to know more. Keep it to below 2 paragraphs worth total! New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  40. 40. Other Good Practices Use HTML5 gee-whiz-features minimally and ONLY when necessary! mojoLive only uses the Typography whiz-bang! (we also use a lot of jQuery and CSS3 tricks) oh- and the canvas element for drawing graphsMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 40
  41. 41. <header> mojoLive Beta</header><ul> <li><a href=”/”>Home</a></li> <li><a href=”/signup”>Signup</a></li></ul><h1>Beta Access</h1><h2> We are glad you are interested in our website! Write Code We are currently in a restricted alpha/beta period.</h2> Semantically using css to skin your<p>If youve received your invite then enter that information below:</p><form> look entirely <input type="text" placeholder="Invited Email Address or Beta Code" /> <input type="submit" value="Sign Me Up!" /></form><img src="/img/jojo.signup.png" alt=”monkey holding a letter that says ‘You’re Invited!’” /><p> If you dont have an invite from us yet, you can request one on the <a href="/">homepage</a></p> Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 41
  42. 42. “I’m sorry... Why is this important?”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 42
  43. 43. Because People Scan, they don’t read.Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 43
  44. 44. Because People Scan, they don’t read. They don’t want to have to think.Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 44
  45. 45. Because People Scan, they don’t read. They don’t want to have to think. They want the information now yesterdayMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 45
  46. 46. and...Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 46
  47. 47. Mobile Smart Phones computer!An awesome pocket-sized Apple sold 55 million iPhones last year in a (tiny) screen size They will be viewing your site on this screenMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 47
  48. 48. “But, my Client can’t afford an app and their site looks tiny on a phone...”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 48
  49. 49. “I can fix that”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 49
  50. 50. Responsive Design flexible grid layouts that respond to the size of your browser window.Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 50
  51. 51. Responsive DesignA Fairly Quick and Painless Solution 1. The heavy-lifting is done is CSS(3) 2. It can be enhanced with CSS techniques and jQuery 3. New techniques for loading images depending on viewport sizeMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 51
  52. 52. Responsive Design DemoMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 52
  53. 53. Responsive Design 1. Use the @import rule to import style rules from other style sheets: <div id=”google_whitespace” style=”@import url(style600min.css) screen and (min-width: 600px);”></div> s?! ty l e e S .... I nlin me ShaCSS3 allows for Viewport Size Detection Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 53
  54. 54. Responsive Design 1. Use the @import rule to import style rules from other style sheets: <div id=”google_whitespace” style=”@import url(style600min.css) screen and (min-width: 600px);”></div> 2. Put media queries directly in the style sheet. This is the most common approach. @media screen and (min-width: 400px) and (orientation: portrait) {                 #nav li {                     float: right;                 }         } @media screen and (min-width: 800px) { Can get              #nav li {                  float: left;   } cluttered } easy to w , but incorpor rite & ate into sheets existingCSS3 allows for Viewport Size Detection Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 54
  55. 55. Responsive Design 1. Use the @import rule to import style rules from other style sheets: <div id=”google_whitespace” style=”@import url(style600min.css) screen and (min-width: 600px);”></div> 2. Put media queries directly in the style sheet. This is the most common approach. ionn @media screen and (min-width: 400px) and (orientation: portrait) {                 #nav li { lut tai t soain                     float: right;                 } n eso m leain t         } e c pa @media screen and (min-width: 800px) { Th t a              #nav li {                  float: left;   } } bu 3. Include a query in a linked style sheet’s media attribute: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />CSS3 allows for Viewport Size Detection Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 55
  56. 56. more info Link iesResponsive Web DesignKatrien De Graevehttp://msdn.microsoft.com/en-us/magazine/hh653584.aspxResponsive Web Design Techniques, Tools and Design StrategiesSmashing Editorialhttp://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 56
  57. 57. The Takeaway...Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 57
  58. 58. Keep it Simple Use technologies only when they serve a purpose. Think “minimalist” Design to accommodate for all devices where possible. never flashturbate in publicMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 58
  59. 59. Thank You Personal Site: kevinbruce.com Professional Site: mojoLive.com Blog: neutralgood.net Twitter: @kevinbruceMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 59

×