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 2012
Tuesday, 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 2012
Tuesday, May 29, 12

3. Where I Work
3 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, May 29, 12

6. New HTML5 Stack Features
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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, 2012
Tuesday, 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, 2012
Tuesday, 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, 2012
Tuesday, 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, 2012
Tuesday, 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, 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 you've 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 don't 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, May 29, 12

31. and...
30 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, May 29, 12

37. Responsive Design
Demo
36 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, May 29, 12

42. The Takeaway...
41 Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012
Tuesday, 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 2012
Tuesday, 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 2012
Tuesday, May 29, 12