Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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:      ...
Prochain SlideShare
Chargement dans…5
×

Design trends - from html tables to semantic html5

2 161 vues

Publié le

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

Publié dans : Design
  • Soyez le premier à commenter

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

×