1. New Web Design
Trends
The do’s and don’ts of using HTML5.
Kevin Bruce
1 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

2. The “New Shiny”
HTML5
What’s
ow! en?
e n s th
‘er thi
a ll
2 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

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. The “New Shiny”
HTML5
+
CSS3
4 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

5. The “New Shiny”
HTML5
+
CSS3
+
Javascript
5 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

6. So What?
W hy
ul dI
Sho e?
c ar
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

7. Let’s Do A Little Time
Travel
1998
HTML, Rollovers & Banners
7 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

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. Let’s Do A Little Time
Travel
2005
Social Media, Blogs & AJAX
9 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

10. Let’s Do A Little Time
Travel
2008
Web Apps, JS Frameworks, APIs, Adobe Air
10 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

11. Let’s Do A Little Time
Travel
2010
HTML5 Championed by Apple
11 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

12. HTML5 Stack
on
Canvas
D raw b
we
y our !
p age
example:
21 HTML5 Canvas
Experiments
12 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

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. HTML5 Stack
Typography
FINAL LY! No
mor e Arial
and T imes!
example:
Apple Demo
14 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

15. HTML5 Stack
Get yo ur Video
pc orn
po t!
ou
example:
Exploding Video
15 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

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. Guidelines to
Follow
Clear Navigation
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

18. Guidelines to
Follow
Clear Navigation
Not a Lot of Text
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

19. 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

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. Why?
21 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

22. Because
People Scan, they don’t read.
22 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

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. Because
People Scan, they don’t read.
They don’t want to have to
think.
They want the information now
yesterday
24 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

25. and...
25 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

26. Mobile Smart
Phones
An awesome mini-computer!
in a (tiny) screen size
26 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

27. Mobile Smart
Phones
Apple sold 55 million iPhones last year
They will be viewing your site on this screen
27 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

28. 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 2 paragraphs worth total!
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

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. 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 you've 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 don't 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. Keep it Simple
31 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

32. Thank You
Personal Site: kevinbruce.com
Professional Site: mojoLive.com
Blog: neutralgood.net
32 New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012