Building html5 sites that don't suck

6,671 views

Published on

Published in: Technology, Design

Building html5 sites that don't suck

  1. Creating an HTML5 Site That Doesn’t Suck The do’s and don’ts of using HT ML5. Kevin Bruce 1 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  2. Who Am I? Designer Developer 2 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  3. Where I Work 3 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  4. 2 Years Old, and it’s Still The “New Shiny” 4 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  5. 2 Years Old, and it’s Still The “New Shiny” + + It’s not just html, it’s a stack of technologies 5 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  6. New HTML5 Stack Features New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012Tuesday, May 29, 12
  7. New Features your Canvas on Draw pa ge! web examples: 21 HTML5 Canvas Experiments Simple Example 7 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  8. Canvas <canvas id=”tree” width=”400” height=”200”> Please stop using IE8 and upgrade, already. </canvas> <script> var paper = document.getElementById(“tree”); var context = paper.getContext(“2d”); //set fill color context.fillStyle = “#0066CC”; //create rectangle context.fillRect(10,10, 100, 100); </script> 8 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  9. New Features Typography FIN AL LY! No more A rial and Times! example: Apple Demo Simple Example 9 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  10. New Features y our Video Get n o ut! pop cor example: Exploding Video Simple Example 10 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  11. Client- “That’s Awesome!” “I want it all on my site!” 11 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  12. Let’s Do A Little Time Travel 12 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  13. Let’s Do A Little Time Travel 1998 HTML, Rollovers & Banners print(“Hello World”); php3 released 13 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  14. Let’s Do A Little Time Travel 2000 Flash Explodes! echo “Hello World”; php4 released 14 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  15. Let’s Do A Little Time Travel 2004-2005 Social Media, Blogs & AJAX $hello = new HelloWorld; php5 released 15 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  16. Let’s Do A Little Time Travel 2008 Web Apps, JS Frameworks, APIs, Adobe Air 16 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  17. Flash Has a Powerful Enemy 2010 HTML5 Championed by Apple 17 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  18. “Learned design from history. Guidelines to follow.” 18 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  19. Guidelines to Follow Clear Navigation Not a Lot of Text New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012Tuesday, May 29, 12
  20. Guidelines to Follow Clear Navigation Not 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, 2012Tuesday, May 29, 12
  21. 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, 2012Tuesday, May 29, 12
  22. 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, 2012Tuesday, May 29, 12
  23. Keep Your Content Simple Home Page Your 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 3 paragraphs worth total! New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012Tuesday, May 29, 12
  24. 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 graphs 24 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  25. Write Code Semantically using css to skin your look entirely 25 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  26. <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! We are currently in a restricted alpha/beta period. </h2> Write Code <p>If youve received your invite then enter that information below:</p> Semantically <form> using css to <input type="text" placeholder="Invited Email Address or Beta Code" /> <input type="submit" value="Sign Me Up!" /> skin your look </form> entirely <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> 25 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  27. “I’m sorry... Why is this important?” 26 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  28. Because People Scan, they don’t read. 27 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  29. Because People Scan, they don’t read. They don’t want to have to think. 28 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  30. Because People Scan, they don’t read. They don’t want to have to think. They want the information now yesterday 29 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  31. and... 30 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  32. Mobile Smart Phones An awesome pocket-sized computer! Apple sold 55 million iPhones last year in a (tiny) screen size They will be viewing your site on this screen 31 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  33. “My Client can’t afford an app and their site looks tiny on a phone...” 32 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  34. A simple tool for every eventuality 33 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  35. Responsive Design flexible grid layouts that respond to the size of your browser window. 34 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  36. Responsive Design A 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 size 35 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  37. Responsive Design Demo 36 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  38. 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?! e S tyle I nlin .... Sh ame CSS3 allows for Viewport Size Detection 37 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  39. Responsive Design 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;                 } Can get c         } luttered, @media screen and (min-width: 800px) { to write & but easy              #nav li { incorporate                  float: left; existing sh into   } } eets CSS3 allows for Viewport Size Detection 38 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  40. Responsive Design 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" /> solution but a The cleanest aintain pain to m CSS3 allows for Viewport Size Detection 39 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  41. more info Link ies Responsive Web Design Katrien De Graeve http://bit.ly/msftRespDesign Responsive Web Design Techniques, Tools and Design Strategies Smashing Editorial http://bit.ly/smashResponsDesign 10 Beautiful examples of responsive Web design Design & Dev http://tnw.co/10respDesign 40 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  42. The Takeaway... 41 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  43. Keep it Simple Use technologies only when they serve a purpose. Think “minimalist” Design to accommodate for all devices where possible. never flashturbate in public 42 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12
  44. Thank You Personal Site: kevinbruce.com Professional Site: mojoLive.com Blog: neutralgood.net Twitter: @kevinbruce on ... me Rate 43 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012Tuesday, May 29, 12

×