Design trends - from html tables to semantic html5

Design Trends: from tables tosemantic html5with a little help from the Doctor Kevin Bruce

Let’s Do A Little Time TravelMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 2

The “before time” pre-1993 -books maga-zines Dumb TVMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 3

Then Came the World Wide WebMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 4

Hyperlinks 1993 Text linked to other text Basic images Giff animation Beyond header text, little-to-no design on pagesMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 5

“What we seem have here are tables.”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 6

New Technologies 1998 table-based layout top and side navigations javascript rollovers basic design emergingMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 7

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

but you still had to know codeMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 9

“You know, this thing makes it easy to write code” Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 10

Visual Apps Driving Design Adobe (Seneca) Pagemill Released 1994 very basic preview basic table building basic text formattingMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 11

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 viewMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 12

Visual Apps Driving Design Macromedia Fireworks & Dreamweaver Released 1997 Advanced WYSIWYG Advanced table & layer building Advanced text formatting Basic rollover creationMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 13

“Flash will save us all!”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 14

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 viewMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 15

Flash comes into it’s own. 2000 On almost all browsers as a standard plugin Spectacular Design Appears Imaginative navigationMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 16

A new word is added to our vocabularyMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 17

ﬂashturbationUsed by web designers to refer to a website that uses Flashexcessively (usually in an introduction and in the navigation); thisis often irritating and in many cases only used to show off howpro a site is.“Dang, that site took like a minute to get past its Flashturbationintro.”(n) Using Macromedia Flash to make a short, almost pointlessanimation only for fun.“I know I should be working on my real animation, but to relievesome stress I just Flashturbated for a while.”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 18

“That’s all well and good, but what about xhtml?” Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 19

Cascading Style SheetsMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 20

New Technologies & Platforms 2004-2005 Social Media, Blogs & AJAXMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 21

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 syndromeMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 22

Ajax - javascript’s “refreshing” answer Made popular by Google Maps Make server calls without refreshing the page All modern browsers supported itMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 23

“I’m tired of reinventing the wheel...”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 24

New Platforms and Frameworks 2008 Web Apps, JS Frameworks, APIs, Adobe AirMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 25

Time to make a standMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 26

Flash Has a Powerful Enemy 2010 HTML5 Championed by AppleMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 27

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

HTML5 Features on Canvas D raw b we y our ! p age example: 21 HTML5 Canvas ExperimentsMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 29

HTML5 Features Location you ereWh t?! a example: FOUND YOU!Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 30

HTML5 Features TypographyFINAL LY! No mor e Arial and T imes! example: Apple Demo Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 31

HTML5 Features Get yo ur Video pc orn po t! ou example: Exploding VideoMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 32

“Learned design from history. Guidelines to follow.” Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 33

Guidelines to Follow Clear NavigationNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

Guidelines to Follow Clear NavigationNot a Lot of TextNew Web Design Trends - Kevin Bruce - Frederick New Media & Tech Conference - Feb 23, 2012

Guidelines to Follow Clear NavigationNot 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

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

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

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

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 graphsMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 40

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

“I’m sorry... Why is this important?”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 42

Because People Scan, they don’t read.Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 43

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

Because People Scan, they don’t read. They don’t want to have to think. They want the information now yesterdayMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 45

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

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 screenMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 47

“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

“I can ﬁx that”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 49

Responsive Design ﬂexible grid layouts that respond to the size of your browser window.Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 50

Responsive DesignA 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 sizeMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 51

Responsive Design DemoMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 52

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 ShaCSS3 allows for Viewport Size Detection Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 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> 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 existingCSS3 allows for Viewport Size Detection Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 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. 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" />CSS3 allows for Viewport Size Detection Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 55

more info Link iesResponsive Web DesignKatrien De Graevehttp://msdn.microsoft.com/en-us/magazine/hh653584.aspxResponsive Web Design Techniques, Tools and Design StrategiesSmashing Editorialhttp://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

The Takeaway...Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 57

Keep it Simple Use technologies only when they serve a purpose. Think “minimalist” Design to accommodate for all devices where possible. never ﬂashturbate in publicMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 58

Thank You Personal Site: kevinbruce.com Professional Site: mojoLive.com Blog: neutralgood.net Twitter: @kevinbruceMusketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 59

Design trends - from html tables to semantic html5

by Kevin Bruce on Oct 23, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 9

Statistics

Design trends - from html tables to semantic html5 Presentation Transcript

http://www.verious.com	8
https://si0.twimg.com	1