Design trends - from html tables to semantic html5
Upcoming SlideShare
Loading in...5
×
 

Design trends - from html tables to semantic html5

on

  • 1,594 views

A review of design trends through the history of the web and how technology has helped shape design.

A review of design trends through the history of the web and how technology has helped shape design.

Statistics

Views

Total Views
1,594
Views on SlideShare
1,581
Embed Views
13

Actions

Likes
1
Downloads
2
Comments
0

2 Embeds 13

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • no “e” 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–present: The Web becomes ubiquitous\n
  • \n
  • \n
  • browsers are enabled with “javascript”\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’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 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’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’t make people squint\n\n
  • \n
  • We also use the canvas tag for charts\n
  • Defines an article\n Defines content aside from the page content\n Isolates a part of text that might be formatted in a different direction from other text outside it\n Defines a command button that a user can invoke\n Defines additional details that the user can view or hide\nDefines a visible heading for a element\nSpecifies self-contained content, like illustrations, diagrams, photos, code listings, etc.\nDefines a caption for a element\nDefines a footer for a document or section\nDefines a header for a document or section\nGroups a set of to elements when a heading has multiple levels\nDefines marked/highlighted text\nDefines a scalar measurement within a known range (a gauge)\nDefines navigation links\nRepresents the progress of a task\nDefines a ruby annotation (for East Asian typography)\nDefines an explanation/pronunciation of characters (for East Asian typography)\nDefines what to show in browsers that do not support ruby annotations\nDefines a section in a document\nDefines a date/time\nDefines 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
  • \n
  • \n
  • \n
  • \n

Design trends - from html tables to semantic html5 Design trends - from html tables to semantic html5 Presentation Transcript

  • 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
  • flashturbationUsed 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 fix that”Musketeers.me Design Trends - from html tables to semantic html5 - Kevin Bruce 49
  • 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
  • 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 {                     float: right;                 }         } @media screen and (min-width: 800px) { Can get              #nav li {                  float: 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                     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
  • 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 flashturbate 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