Design trends - from html tables to semantic html5

Design Trends:
from tables to
semantic html5
with a little help from the Doctor

Kevin Bruce

Let’s Do A Little Time
Travel

Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 2

The “before time”
pre-1993

-books maga-zines Dumb TV


Then Came the World Wide
Web


Hyperlinks
1993
Text linked to other
text
Basic images

Giff animation
Beyond header text,
little-to-no design on
pages


“What we seem have here are
tables.”


New Technologies
1998
table-based layout
top and side
navigations
javascript rollovers
basic design
emerging


Tables
A simple tool that lets you layout a
page.

You could create complex layouts with
nesting tables inside one another.


but you still had to know
code


“You know, this thing makes it easy to write
code”


Visual Apps Driving
Design
Adobe (Seneca)
Pagemill
Released 1994

very basic preview

basic table building

basic text formatting


Visual Apps Driving
Design
GoLive Cyberstudio
Adobe GoLive
Acquired 1999

Drag & Drop Layers
Basic rollover
creation table
Advanced
building
Basic text formatting
Unique hybrid html
view

Visual Apps Driving
Design
Macromedia
Fireworks &
Dreamweaver
Released 1997

Advanced WYSIWYG
Advanced table &
layer building
Advanced text
formatting
Basic rollover creation


“Flash will save us all!”


Flash comes into it’s
own. 1996 as Future
Released
Splash, Purchased by
Macromedia and re-released
as “Flash”

Vector-based animation

Alpha Transparency
compact size, smooth
animation
Shockwave/Flash plugin
required to view


Flash comes into it’s
own.
2000

On almost all browsers
as a standard plugin

Spectacular Design
Appears

Imaginative navigation


A new word is added
to our vocabulary


ﬂashturbation
Used by web designers to refer to a website that uses Flash
excessively (usually in an introduction and in the navigation); this
is often irritating and in many cases only used to show off how
'pro' a site is.

“Dang, that site took like a minute to get past its Flashturbation
intro.”

(n) Using Macromedia Flash to make a short, almost pointless
animation only for fun.

“I know I should be working on my real animation, but to relieve
some stress I just Flashturbated for a while.”


“That’s all well and good, but what about
xhtml?”


Cascading Style Sheets


New Technologies &
Platforms
2004-2005

Social Media,
Blogs & AJAX


Blogs- breaking the rules

Blogs put web
publishing in the
hands of the
average user.
Navigation on the
right
Slowly breaking
from the tiny text
syndrome


Ajax - javascript’s “refreshing”
answer
Made popular by
Google Maps

Make server calls
without refreshing
the page

All modern browsers
supported it


“I’m tired of reinventing the wheel...”


New Platforms and
Frameworks
2008

Web Apps, JS Frameworks, APIs, Adobe Air

Time to make a stand


Flash Has a Powerful
Enemy
2010

HTML5 Championed by Apple


HTML5 Features
HTML5
+

CSS3
+

Javascript

It’s not just html, it’s a
“stack” of technologies!


HTML5 Features

on
Canvas
D raw b
we
y our !
p age
example:

21 HTML5 Canvas
Experiments


HTML5 Features
Location
you
ere
Wh t?!
a

example:

FOUND YOU!


HTML5 Features

Typography
FINAL LY! No
mor e Arial
and T imes!
example:

Apple Demo


HTML5 Features

Get yo ur Video
pc orn
po t!
ou
example:

Exploding Video


“Learned design from history. Guidelines to
follow.”


Guidelines to
Follow
Clear Navigation

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

Guidelines to
Follow
Clear Navigation

Not a Lot of Text


Guidelines to
Follow
Clear Navigation

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


Whitespace != Bad
Google+
Whitespace
Issues?
People have learned
to cope with it.


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


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!


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


<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! Write Code
We are currently in a restricted alpha/beta period.
</h2> Semantically
using css to skin your
<p>If you've received your invite then enter that information below:</p>

<form>
look entirely
<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>


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


Because

People Scan, they don’t read.


Because

They don’t want to have to
think.


Because

They don’t want to have to
think.
They want the information now
yesterday


and...


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

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


“But, my Client
can’t afford an app
and their site looks
tiny on a phone...”


“I can ﬁx that”


Responsive Design

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


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


Responsive Design

Demo


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?!
ty l e
e S ....
I nlin me
Sha

CSS3 allows for Viewport Size Detection

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 {
                    ﬂoat: right;
                }
        }
@media screen and (min-width: 800px) {

Can get
             #nav li {
                 ﬂoat: left;
}
cluttered
}
easy to w , but
incorpor rite &
ate into
sheets existing


Responsive Design


2. Put media queries directly in the style sheet. This is the most common approach.

ionn
@media screen and (min-width: 400px) and (orientation: portrait) {
                #nav li {
lut tai
t soain
                    ﬂoat: right;
                }
n eso m
leain t
        }

e c pa
@media screen and (min-width: 800px) {

Th t a
             #nav li {
                 ﬂoat: left;

}
}
bu
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" />


more info
Link
ies
Responsive Web Design
Katrien De Graeve
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

Responsive Web Design Techniques, Tools and Design Strategies
Smashing Editorial
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-
design-strategies/


The Takeaway...


Keep it Simple
Use technologies only when they serve a
purpose.

Think “minimalist”

Design to accommodate for all devices where
possible.

never ﬂashturbate in public


Thank You

Personal Site: kevinbruce.com
Professional Site: mojoLive.com
Blog: neutralgood.net
Twitter: @kevinbruce

Design trends - from html tables to semantic html5

Recommended

Recommended

More Related Content

Similar to Design trends - from html tables to semantic html5

Similar to Design trends - from html tables to semantic html5 (20)

Recently uploaded

Recently uploaded (20)

Design trends - from html tables to semantic html5

Editor's Notes