second stories test a method kit for co creationnnnnnn
Design trends - from html tables to semantic html5
1. Design Trends:
from tables to
semantic html5
with a little help from the Doctor
Kevin Bruce
2. Let’s Do A Little Time
Travel
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 2
3. The “before time”
pre-1993
-books maga-zines Dumb TV
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 3
4. Then Came the World Wide
Web
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 4
5. Hyperlinks
1993
Text linked to other
text
Basic images
Giff animation
Beyond header text,
little-to-no design on
pages
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 5
6. “What we seem have here are
tables.”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 6
7. New Technologies
1998
table-based layout
top and side
navigations
javascript rollovers
basic design
emerging
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 7
8. Tables
A simple tool that lets you layout a
page.
You could create complex layouts with
nesting tables inside one another.
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 8
9. but you still had to know
code
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 9
10. “You know, this thing makes it easy to write
code”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 10
11. Visual Apps Driving
Design
Adobe (Seneca)
Pagemill
Released 1994
very basic preview
basic table building
basic text formatting
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 11
12. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 12
13. Visual Apps Driving
Design
Macromedia
Fireworks &
Dreamweaver
Released 1997
Advanced WYSIWYG
Advanced table &
layer building
Advanced text
formatting
Basic rollover creation
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 13
14. “Flash will save us all!”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 14
15. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 15
16. Flash comes into it’s
own.
2000
On almost all browsers
as a standard plugin
Spectacular Design
Appears
Imaginative navigation
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 16
17. A new word is added
to our vocabulary
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 17
18. flashturbation
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.”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 18
19. “That’s all well and good, but what about
xhtml?”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 19
21. New Technologies &
Platforms
2004-2005
Social Media,
Blogs & AJAX
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 21
22. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 22
23. Ajax - javascript’s “refreshing”
answer
Made popular by
Google Maps
Make server calls
without refreshing
the page
All modern browsers
supported it
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 23
24. “I’m tired of reinventing the wheel...”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 24
25. New Platforms and
Frameworks
2008
Web Apps, JS Frameworks, APIs, Adobe Air
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 25
26. Time to make a stand
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 26
27. Flash Has a Powerful
Enemy
2010
HTML5 Championed by Apple
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 27
28. HTML5 Features
HTML5
+
CSS3
+
Javascript
It’s not just html, it’s a
“stack” of technologies!
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 28
29. HTML5 Features
on
Canvas
D raw b
we
y our !
p age
example:
21 HTML5 Canvas
Experiments
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 29
30. HTML5 Features
Location
you
ere
Wh t?!
a
example:
FOUND YOU!
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 30
31. HTML5 Features
Typography
FINAL LY! No
mor e Arial
and T imes!
example:
Apple Demo
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 31
32. HTML5 Features
Get yo ur Video
pc orn
po t!
ou
example:
Exploding Video
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 32
33. “Learned design from history. Guidelines to
follow.”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 33
34. Guidelines to
Follow
Clear Navigation
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
35. Guidelines to
Follow
Clear Navigation
Not a Lot of Text
New Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012
36. 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
37. 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
38. 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
39. 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
40. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 40
41. <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>
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 41
42. “I’m sorry... Why is this important?”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 42
43. Because
People Scan, they don’t read.
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 43
44. Because
People Scan, they don’t read.
They don’t want to have to
think.
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 44
45. Because
People Scan, they don’t read.
They don’t want to have to
think.
They want the information now
yesterday
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 45
46. and...
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 46
47. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 47
48. “But, my Client
can’t afford an app
and their site looks
tiny on a phone...”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 48
49. “I can fix that”
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 49
50. Responsive Design
flexible grid layouts that respond to the size
of your browser window.
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 50
51. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 51
52. Responsive Design
Demo
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 52
53. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 53
54. 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>
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) {
Can get
#nav li {
float: left;
}
cluttered
}
easy to w , but
incorpor rite &
ate into
sheets existing
CSS3 allows for Viewport Size Detection
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 54
55. 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>
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
float: right;
}
n eso m
leain t
}
e c pa
@media screen and (min-width: 800px) {
Th t a
#nav li {
float: 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" />
CSS3 allows for Viewport Size Detection
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 55
56. 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/
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 56
58. 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
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 58
59. Thank You
Personal Site: kevinbruce.com
Professional Site: mojoLive.com
Blog: neutralgood.net
Twitter: @kevinbruce
Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 59
Notas del editor
\n
\n
no &#x201C;e&#x201D; in ebooks\n\ndumb TVs\n
By Christmas 1990, Berners-Lee had built all the tools necessary for a working Web: the HyperText Transfer Protocol (HTTP) 0.9, the HyperText Markup Language (HTML), the first Web browser (named WorldWideWeb, which was also a Web editor)\n\nThe turning point for the World Wide Web was the introduction[12] of the Mosaic web browser[13] in 1993-\nIt had no back button\n\nIn September 1994, Berners-Lee founded the World Wide Web Consortium (W3C)\n\nBy 1996 it became obvious to most publicly traded companies that a public Web presence was no longer optional\n\n2002&#x2013;present: The Web becomes ubiquitous\n
\n
\n
browsers are enabled with &#x201C;javascript&#x201D;\nBetter control of layout with tables\n
\n
\n
\n
\n
\n
Fireworks enabled slicing of a master image into a web page\n\nDreamweaver allowed for javascript actions to be assigned within a GUI\n
\n
\n
\n
\n
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.\n\nUsing Macromedia Flash to make a short, almost pointless animation only for fun.\n\n
xml transitional\nW3C was going to xml and wanted to motivate the public in that direction\naway from html4\nit didn&#x2019;t work and the W3C moved back to pure html with html5\n
Rewind a bit, during all of that Flash noise\nInternet Explorer 5.0 for the Macintosh, shipped in March 2000, was the first browser to have full (better than 99 percent) CSS&#xA0;1 support\nLeading and Kerning were now possible\nGONE, was the font tag\n
\n
design points\n
making design and the UX easier\n
\n
\n
\n
Apple? Powerful?\n
Apple? Powerful?\n
The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.\nIn interactive visual media, if scripting is enabled for the canvas element, and if support for canvas elements has been enabled, the canvas element represents embedded content consisting of a dynamically created image.\nUsually javascript is needed for anything to be done with canvas\n
pretty cool- also security protects users by asking them if it&#x2019;s ok if the site finds them\n
As far back as 1998, CSS2 provided a way to link to real fonts from your style sheet but not all browsers got on board because of font licensing concerns.\n\nFont middlemen came in and all browsers were on board for the CSS3 rollout\n
\n
\n
\n
\n
\n
Some people are used to clutter\n
don&#x2019;t make people squint\n\n
\n
We also use the canvas tag for charts\n
<article> Defines an article\n<aside> Defines content aside from the page content\n<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it\n<command> Defines a command button that a user can invoke\n<details> Defines additional details that the user can view or hide\n<summary>Defines a visible heading for a <details> element\n<figure>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.\n<figcaption>Defines a caption for a <figure> element\n<footer>Defines a footer for a document or section\n<header>Defines a header for a document or section\n<hgroup>Groups a set of <h1> to <h6> elements when a heading has multiple levels\n<mark>Defines marked/highlighted text\n<meter>Defines a scalar measurement within a known range (a gauge)\n<nav>Defines navigation links\n<progress>Represents the progress of a task\n<ruby>Defines a ruby annotation (for East Asian typography)\n<rt>Defines an explanation/pronunciation of characters (for East Asian typography)\n<rp>Defines what to show in browsers that do not support ruby annotations\n<section>Defines a section in a document\n<time>Defines a date/time\n<wbr>Defines a possible line-break\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
you can do viewport size css in your inline styles\n
you can do viewport size css in your style blocks and single stylesheets\n
you can do viewport size css in your viewport specific style sheets\n