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.
New Web Design              Trends                 The do’s and don’ts of using HTML5.                                    ...
The “New Shiny”                           HTML5                                                                 What’s    ...
The “New Shiny”                           HTML5                                It’s not just html, it’s a                 ...
The “New Shiny”                           HTML5                                                      +                    ...
The “New Shiny”                           HTML5                                                      +                    ...
So What?   W hy      ul dI  Sho e?    c arNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Fe...
Let’s Do A Little Time                   Travel                                                                1998       ...
Let’s Do A Little Time                   Travel                                                                2000       ...
Let’s Do A Little Time                   Travel                                                                2005       ...
Let’s Do A Little Time                    Travel                                                                 2008     ...
Let’s Do A Little Time                    Travel                                                                 2010     ...
HTML5 Stack                on                                     Canvas          D raw b                we          y our...
HTML5 Stack                                  Location           you       ere     Wh t?!        a                         ...
HTML5 Stack                         Typography     FINAL LY! No      mor e Arial      and T imes!                         ...
HTML5 Stack           Get yo ur                      Video               pc orn            po t!               ou         ...
That’s Awesome!                                  I want it all on my site!16   New Web Design Trends - Kevin Bruce - Frede...
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...
Guidelines to                         Follow   Clear Navigation  Not a Lot of Text         If it’s a text-heavy page,     ...
Why?21   New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
Because            People Scan, they don’t read.22   New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conf...
Because            People Scan, they don’t read.            They don’t want to have to            think.23   New Web Desig...
Because            People Scan, they don’t read.            They don’t want to have to            think.            They w...
and...25   New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
Mobile Smart                           Phones                 An awesome mini-computer!                                   ...
Mobile Smart                           Phones     Apple sold 55 million iPhones last year                                 ...
Keep Your Content                      Simple                Home PageYour message in as few words as                     ...
Other Good                              Practices              Use HTML5 gee-whiz-features minimally                    an...
Other Good                              Practices                             Write Code Semantically                     ...
Keep it Simple31   New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
Thank You                   Personal Site: kevinbruce.com                Professional Site: mojoLive.com                  ...
Upcoming SlideShare
Loading in …5
×

Web Design Trends - the Do's and Don'ts of using HTML5

2,848 views

Published on

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Web Design Trends - the Do's and Don'ts of using HTML5

  1. 1. New Web Design Trends The do’s and don’ts of using HTML5. Kevin Bruce1 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  2. 2. The “New Shiny” HTML5 What’s ow! en? e n s th ‘er thi a ll2 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  3. 3. The “New Shiny” HTML5 It’s not just html, it’s a “stack” of technologies!3 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  4. 4. The “New Shiny” HTML5 + CSS34 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  5. 5. The “New Shiny” HTML5 + CSS3 + Javascript5 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  6. 6. So What? W hy ul dI Sho e? c arNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  7. 7. Let’s Do A Little Time Travel 1998 HTML, Rollovers & Banners7 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  8. 8. Let’s Do A Little Time Travel 2000 FLASH!8 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  9. 9. Let’s Do A Little Time Travel 2005 Social Media, Blogs & AJAX9 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  10. 10. Let’s Do A Little Time Travel 2008 Web Apps, JS Frameworks, APIs, Adobe Air10 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  11. 11. Let’s Do A Little Time Travel 2010 HTML5 Championed by Apple11 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  12. 12. HTML5 Stack on Canvas D raw b we y our ! p age example: 21 HTML5 Canvas Experiments12 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  13. 13. HTML5 Stack Location you ere Wh t?! a example: FOUND YOU!13 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  14. 14. HTML5 Stack Typography FINAL LY! No mor e Arial and T imes! example: Apple Demo14 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  15. 15. HTML5 Stack Get yo ur Video pc orn po t! ou example: Exploding Video15 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  16. 16. That’s Awesome! I want it all on my site!16 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  17. 17. Guidelines to Follow Clear NavigationNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  18. 18. Guidelines to Follow Clear NavigationNot a Lot of TextNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  19. 19. 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
  20. 20. 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
  21. 21. Why?21 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  22. 22. Because People Scan, they don’t read.22 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  23. 23. Because People Scan, they don’t read. They don’t want to have to think.23 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  24. 24. Because People Scan, they don’t read. They don’t want to have to think. They want the information now yesterday24 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  25. 25. and...25 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  26. 26. Mobile Smart Phones An awesome mini-computer! in a (tiny) screen size26 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  27. 27. Mobile Smart Phones Apple sold 55 million iPhones last year They will be viewing your site on this screen27 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  28. 28. 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 tobelow 2 paragraphs worth total! New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  29. 29. 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)29 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  30. 30. Other Good Practices Write Code Semantically a le rt! <h2>Beta Access</h2> geek <h2> We are glad you are interested in our website! We are currently in a restricted alpha/beta period. </h2> <p>If youve received your invite then enter that information below:</p> <form> <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>30 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  31. 31. Keep it Simple31 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
  32. 32. Thank You Personal Site: kevinbruce.com Professional Site: mojoLive.com Blog: neutralgood.net32 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

×