Building html5 sites that don't suck

Creating an HTML5 Site That Doesn’t Suck - Kevin Bruce - PHP|tek 2012 - May 25th 2012

Creating an HTML5 Site That Doesn’t SuckThe do’s and don’ts of using HTML5.

Kevin Bruce

1

Tuesday, May 29, 12


Who Am I?

2

DesignerDeveloper

Tuesday, May 29, 12


Where I Work

3Tuesday, May 29, 12


2 Years Old, and it’s Still The “New Shiny”

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

Tuesday, May 29, 12

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

New HTML5 Stack Features

Tuesday, May 29, 12


New Features

CanvasDraw on

your

web page!

7

examples:

21 HTML5 Canvas Experiments

Simple Example

Tuesday, May 29, 12

http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

http://kevinbruce.com/talks/html5sitesthatdontsuck/site/canvas.php

http://kevinbruce.com/talks/html5sitesthatdontsuck/site/canvas.php


Canvas

8

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

Tuesday, May 29, 12


New Features

TypographyFINALLY! No

more Arial and

Times!

9

example:

Apple Demo

Simple Example

Tuesday, May 29, 12

http://www.apple.com/html5/showcase/typography/

http://www.apple.com/html5/showcase/typography/

http://kevinbruce.com/talks/html5sitesthatdontsuck/site/typography.php

http://kevinbruce.com/talks/html5sitesthatdontsuck/site/typography.php


New Features

VideoGet y

our

popcorn out!

10

example:

Exploding Video

Simple Example

Tuesday, May 29, 12

http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://kevinbruce.com/talks/html5sitesthatdontsuck/site/video.php

http://kevinbruce.com/talks/html5sitesthatdontsuck/site/video.php


Client- “That’s Awesome!”

“I want it all on my site!”



Let’s Do A Little Time Travel




HTML, Rollovers & Banners

1998

13

print(“Hello World”); php3 released

Tuesday, May 29, 12



Flash Explodes!

2000

14

php4 releasedecho “Hello World”;

Tuesday, May 29, 12



Social Media, Blogs & AJAX

2004-2005

15

php5 released$hello = new HelloWorld;

Tuesday, May 29, 12



Web Apps, JS Frameworks, APIs, Adobe Air

2008



Flash Has a Powerful Enemy

HTML5 Championed by Apple

2010

Tuesday, May 29, 12


“Learned design from history. Guidelines to follow.”



Guidelines to Follow

Clear Navigation

Not a Lot of Text

Tuesday, May 29, 12


Clear Navigation

Not a Lot of Text


If it’s a text-heavy page, leave lots of visual “rest areas”

Tuesday, May 29, 12


Whitespace != BadGoogle+

Whitespace Issues?People have learned to

cope with it.

Tuesday, May 29, 12


Clear Navigation

Not a Lot of TextIf it’s a text-heavy

page, leave lots of visual “rest areas”

Large(ish) links and Form Elements


Tuesday, May 29, 12


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 3 paragraphs worth total!

Keep Your Content

Simple

Tuesday, May 29, 12


Other Good PracticesUse HTML5 gee-whiz-features minimally and

ONLY when necessary!

24

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

Tuesday, May 29, 12


Write Code Semantically

using css to skin your look

entirely



Write Code Semantically

using css to skin your look

entirely

25

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

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

Tuesday, May 29, 12


“I’m sorry... Why is this important?”



Because

27

People Scan, they don’t read.

Tuesday, May 29, 12


Because

28


They don’t want to have to think.

Tuesday, May 29, 12


Because


29

They don’t want to have to think.

They want the information now yesterday

Tuesday, May 29, 12


and...



Mobile Smart Phones

in a (tiny) screen sizeThey will be viewing your site on this screen

An awesome pocket-sized computer!Apple sold 55 million iPhones last year

Tuesday, May 29, 12


“My Client can’t afford an app and their site

looks tiny on a phone...”



A simple tool for every eventuality



Responsive Design

flexible grid layouts that respond to the size of your browser window.

Tuesday, May 29, 12


Responsive DesignA Fairly Quick and Painless Solution

35

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

Tuesday, May 29, 12


Responsive Design

Demo



Responsive Design

CSS3 allows for Viewport Size Detection

37

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>

Inline Style

s?!

Shame....

Tuesday, May 29, 12


Responsive Design


38

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) { #nav li { float: left; } }

Can get cluttered, but easy to write & incorporate into existing sheets

Tuesday, May 29, 12


Responsive Design


39

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />

3. Include a query in a linked style sheet’s media attribute:

The cleanest solution but a

pain to maintain

Tuesday, May 29, 12


more info

Responsive Web DesignKatrien De Graeve

http://bit.ly/msftRespDesign

Responsive Web Design Techniques, Tools and Design Strategies Smashing Editorialhttp://bit.ly/smashResponsDesign

Linkies

10 Beautiful examples of responsive Web designDesign & Devhttp://tnw.co/10respDesign

Tuesday, May 29, 12

http://msdn.microsoft.com/en-us/magazine/ee532098.aspx?sdmr=KatrienDeGraeve&sdmi=authors








http://bit.ly/smashResponsDesign

http://bit.ly/smashResponsDesign



http://tnw.co/10respDesign

http://tnw.co/10respDesign


The Takeaway...



Keep it SimpleUse technologies only when they serve a purpose.

Think “minimalist”

Design to accommodate for all devices where possible.

never flashturbate in public



Thank You

43

Personal Site: kevinbruce.com

mojoLive.comProfessional Site:

neutralgood.netBlog:

@kevinbruceTwitter:

Rate me on...

Tuesday, May 29, 12

http://twitter.com/kevinbruce/

http://twitter.com/kevinbruce/

http://neutralgood.net/blog/

http://neutralgood.net/blog/

http://mojoLive.com/

http://mojoLive.com/

http://kevinbruce.com

http://kevinbruce.com

https://joind.in/talk/view/6494/





















































































http://mojolive.com/profile/kevin%23!involvement














































































































































































Technology

Building html5 sites that don't suck