Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Post-modern Web Design

54c6acb1bc0e9be441a10378791f0cc5?s=47 Kevin Suttle
April 12, 2011

Post-modern Web Design

Overview of the nuts and bolts of HTML5/CSS3 that we can use today. Given at 360 Flex Denver.

54c6acb1bc0e9be441a10378791f0cc5?s=128

Kevin Suttle

April 12, 2011
Tweet

More Decks by Kevin Suttle

Other Decks in Design

Transcript

  1. Post-modern Web Design with your guide Kevin Suttle

  2. FAIR W ARNING Flash, canvas, audio, and video will not

    be covered.
  3. mY GOAL To bring us up to speed

  4. MY MOTIV ATION

  5. Onl y two things are infinite, the universe and human

    stupidity, and I'm not sure about the former. - Albert Einstein
  6. "Anytime I see a movie or a TV show where

    there are people from the future or another planet, they're all wearing the same outfit. Somehow they all decided, 'All right, that's enough. From now on, this is going to be our outfit: one-piece sil ver jumpsuit with a V-stripe on the chest and boots. That's it. We're going to start visiting other planets and we w ant to look like a team.'" - Jerry Seinfeld
  7. We're just a fold-up briefcase fl ying car a w

    a y from being the Jetsons. We have robot maids, video phones, and instant meals in packets.
  8. None
  9. 2006 five years ago

  10. 2006 five years ago

  11. The next generation

  12. Living document Dropping the 5

  13. the year 2022 A bit of a miscommunication

  14. breaking it down Little by little

  15. Why should i care? Because it matters right now

  16. the new hotness Let’s dig in

  17. the new hotness Doctype <!DOCTYPE  HTML  PUBLIC  "-­‐//W3C//DTD  HTML  4.01//

    EN"  "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE  html> Old and busted Fresh Doctypes are for validators, not people, and not browsers.
  18. the new hotness Meta tags <meta  http-­‐equiv="Content-­‐Type"  content="text/html;  charset=UTF-­‐8"> <meta

     charset="UTF-­‐8"> Old and busted Fresh
  19. the new hotness JavaScript and CSS <script  type="text/javascript"  src="file.js"></script> <script

     src="file.js"></script> Old and busted Fresh HTML(5) is a huge step forward in web development user experience. <link  rel="stylesheet"  type="text/css"  href="file.css"> <link  rel="stylesheet"  href="file.css"> Old and busted Fresh
  20. the new hotness Root element <html  xmlns="http://www.w3.org/1999/xhtml"  lang="en"  xml:lang="en"> <html

     lang="en"> Old and busted Fresh
  21. the new hotness Choice of syntax This can be good

    or bad. Just be consistent. <img  src="http://360flex.com/images/banner.png"/> <img  src="http://360flex.com/images/banner.png"></img> <IMG  src="http://360flex.com/images/banner.png"></IMG> <img  src=http://360flex.com/images/banner.png  />
  22. the new hotness Nesting elements inside links <h1><a  href="http://360flex.com">360  Flex

     Denver</a></h1>   <p><a  href="http://360flex.com">Check  out  the  event  details!</a></p> <a  href="http://360flex.com"> <h1>360  Flex  Denver</h1>   <p>Check  out  the  event  details!</p> </a> Old and busted Fresh
  23. the new hotness Semantics <section> <nav> <article> <aside> <hgroup> <header>

    <footer> <time> <mark> <meter> <progress> General purpose grouping of content, marker of outline* Main navigation intended for a single page. Self-contained composition, intended to be individually distributed. Content separate from the main content (typically sidebars) The heading of a Text <section>* <nav>* Sometimes referred to as masthead, including branding and Usually for colophons, comments and social media links. Represents either a time on a 24-hour clock or a precise date in the proleptic Gregorian calendar Highlighted text, search results Measurement scales with maximum and minimum values Highlighted text, search results
  24. the new hotness Nav tag Text <nav>      <h1>Navigation</h1>

         <ul>        <li><a  href="articles.html">Index  of  all  articles</a></li>        <li><a  href="today.html">Things  sheeple  need  to  wake  up  for  today</a></li>        <li><a  href="successes.html">Sheeple  we  have  managed  to  wake</a></li>      </ul> </nav> Main navigation intended for a single page.
  25. the new hotness Article tag Text <article>  <header>    <h1>The

     Very  First  Rule  of  Life</h1>    <p><time  pubdate  datetime="2009-­‐10-­‐09T14:28-­‐08:00"></time></p>  </header>  <p>If  there's  a  microphone  anywhere  near  you,  assume  it's  hot  and  sending  whatever  you're  saying  to  the  world.  Seriously.</p>  <p>...</p> </article> Self-contained composition, intended to be individually distributed.
  26. the new hotness Aside tag Text <aside>  <h1>Switzerland</h1>  <p>Switzerland,  a

     land-­‐locked  country  in  the  middle  of  geographic  Europe,  has  not  joined  the  geopolitical  European  Union,  though  it  is  a  signatory  to  a  number  of  European  treaties.</p> </aside> Content separate from the main content (typically sidebars)
  27. the new hotness Content models Text Sectioning elements: “Content that

    de nes the scope of headings and footers.” Sectioning “roots”: <section> <nav> <article> <aside> <blockquote> <body> <details> <fieldset> <figure> <id>
  28. the new hotness Header and footer “A header element is

    intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.” <header>      <h1>Mike’s  Mechanics</h1>      <a  href="/quotes/">Free  quotes!</a>      <img  src="/images/logo.gif"/>      <p>For  when  all  you  need  is  a  miracle.</p> </header> <footer>      <a  href="http://facebook.com">Like  us  on  Facebook</a>      <small>Copyright  © 2011, Mike’s Mechanics</small>      <p>Tell  your  friends</p> </footer> “When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”
  29. the new hotness *Multiple hierarchies in the form of Content

    models Text <h1>  -­‐  <h6>  can  be  used  multiple  times  in  a  single  document   using  <section>  is  the  delimiter “The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections.”
  30. the new hotness *Multiple hierarchies in the form of content

    models Text produces the following in browsers that respect the outline algorithm <h1>My  favorite  music</h1>   <section>    <header>        <h1>Artists</h1>    </header>      <p>Bands  and  artists  who  make  up  my  collection.</p>   <section>      <header>          <h1>DJ  Shadow</h1>      </header> <p>The  godfather  of  modern  instrumental  hip-­‐hop</p>   </section> <section>      <header>          <h1>Prefuse-­‐73</h1>      </header> <p>The  man  of  many  aliases.  All  of  them  great.</p>   </section> My favorite music -Artists - DJ Shadow - Prefuse-73
  31. the new hotness Links for understanding the new content model

    Text http://gsnedders.html5.org/outliner/ http://chrispederick.com/work/web-developer/ http://code.google.com/p/h5o/ http://www.456bereastreet.com/archive/201103/ html5_sectioning_elements_headings_and_document_outlines/ http://www.w3.org/TR/html5/sections.html#outline
  32. ACcessible rias More semantic means more accessible role="search"  (search  form)

      role="banner"  (masthead)   role="contentinfo"  (footer) ARIA Roles
  33. The best approach How to know if you can use

    the new bits right now
  34. detect features There’s no such thing as detecting ‘HTML5’ The

    good news: using HTML5 bits is possible, even in older browsers The bad news: It requires JavaScript
  35. http://modernizer.com

  36. modernizr Feature detection > Browser snif ng if  (Modernizr.canvas)  {

           //  create  some  cool  canvas-­‐y  stuff }   else  {      //  canvas  not  supported }    
  37. HTML5shim a.k.a “HTML5shiv” <!-­‐-­‐[if  lt  IE  9]> <script  src="http://html5shim.googlecode.com/ svn/trunk/html5.js"></script>

    <![endif]-­‐-­‐> https://code.google.com/p/html5shim/
  38. There is so much more Thankfully the web exists local

     storage offline  storage HTML5  databases  (indexDB) history  APIs undo  APIs web  forms viewports microdata  and  granular  semantics drag  and  drop geolocation messaging web  workers/sockets
  39. There is so much more Thankfully books exist http://diveintohtml5.org/ http://introducinghtml5.com/

    http://www.abookapart.com/products/html5-­‐for-­‐ web-­‐designers
  40. Css3 Learn it. Love it. Live it.

  41. lessening reliance On images, JS, and system fonts

  42. new hotness Lots to love in CSS3

  43. Borders Who knew they could be so exciting? border-­‐color border-­‐image

    border-­‐radius box-­‐shadow
  44. Border-color Who knew they could be so exciting? border:  8px

     solid  #000; -­‐moz-­‐border-­‐bottom-­‐colors:  #555  #666  #777  #888   #999  #aaa  #bbb  #ccc; -­‐moz-­‐border-­‐top-­‐colors:        #555  #666  #777  #888   #999  #aaa  #bbb  #ccc; -­‐moz-­‐border-­‐left-­‐colors:      #555  #666  #777  #888   #999  #aaa  #bbb  #ccc; -­‐moz-­‐border-­‐right-­‐colors:    #555  #666  #777  #888   #999  #aaa  #bbb  #ccc; padding:  5px  5px  5px  15px;
  45. Border-image Picture this border-­‐image: border-­‐top-­‐image border-­‐right-­‐image border-­‐bottom-­‐image border-­‐left-­‐image border-­‐corner-­‐image: border-­‐top-­‐left-­‐image

    border-­‐top-­‐right-­‐image border-­‐bottom-­‐left-­‐image border-­‐bottom-­‐right-­‐image border-­‐image:  url(border-­‐image.png)  25%  repeat;
  46. Border-image Example

  47. Rounded borders It’s about time .colophon  {      -­‐webkit-­‐border-­‐radius:

     10px;      -­‐moz-­‐border-­‐radius:  10px;      border-­‐radius:  10px;   } border-­‐bottom-­‐left-­‐radius,   border-­‐bottom-­‐right-­‐radius,   border-­‐top-­‐left-­‐radius,   border-­‐top-­‐right-­‐radius
  48. Rounded borders Examples

  49. SHADOWs Box-shadow #colophon  {    -­‐moz-­‐box-­‐shadow:  10px  10px  5px  #999;

       -­‐webkit-­‐box-­‐shadow:  10px  10px  5px  #999;    box-­‐shadow:  10px  10px  5px  #999; }
  50. SHADOWs Text-shadow #colophon  a:link  {    text-­‐shadow:  10px  10px  5px

     #999; }
  51. attribute Selectors Lookout regex and jQuery p[title*="bout"]  {background:  blue;} <p

     title="about"> p[title^="con"]  {background:  red;} <p  title="contact"> p[title$="g"]  {background:  black;} <p  title="blog">
  52. Multiple backgrounds Again, it’s about time header  {    

     background:  url(image1.png)  no-­‐repeat  top  left,      url(image2.png)  repeat-­‐x  bottom  left,      url(image3.png)  repeat-­‐y  top  right;  }
  53. the rest of the new hotness Lots of CSS goodness

    opacity background:  rgb(255,  235,  0)  ;  opacity:  0.5; background:  rgba(255,  235,  0,  0.5); -­‐moz-­‐column-­‐count:  3; -­‐moz-­‐column-­‐gap:  1em; -­‐moz-­‐column-­‐rule:  1px  solid  black; -­‐webkit-­‐column-­‐count:  3; -­‐webkit-­‐column-­‐gap:  1em; -­‐webkit-­‐column-­‐rule:  1px  solid  black; option  2 -­‐moz-­‐column-­‐width:  13em; -­‐webkit-­‐column-­‐width:  13em; -­‐moz-­‐column-­‐gap:  1em; -­‐webkit-­‐column-­‐gap:  1em; Color properties Multi-column layouts
  54. the rest of the new hotness A little bit more

    obscure text-­‐overflow:  ellipsis-­‐word; word-­‐wrap:  break; Text properties
  55. the rest of the new hotness A little bit more

    obscure box-­‐sizing -­‐moz-­‐box-­‐sizing -­‐webkit-­‐box-­‐sizing Layout UI content-­‐box  (default) border-­‐box Allows you to calculate the non-content boxes inside the content area size Values
  56. the rest of the new hotness A little bit more

    obscure .box  {   width:  100px;   height:  100px;   border:  1px  solid;   resize:  both; Layout UI horizontal vertical both inherit Values
  57. the rest of the new hotness A little bit more

    obscure #voice-­‐volume  {  -­‐xv-­‐voice-­‐volume:  x-­‐soft;   -­‐xv-­‐voice-­‐balance:  right;  } #voice-­‐balance  {  -­‐xv-­‐voice-­‐balance:  left;  } #speech-­‐cue  {  cue-­‐after:  url(ding.wav);  } #voice-­‐rate  {  -­‐xv-­‐voice-­‐rate:  x-­‐slow;  } #voice-­‐family  {  voice-­‐family:  female;  } #voice-­‐pitch  {  -­‐xv-­‐voice-­‐pitch:  x-­‐low;  } #speech-­‐speak  {  speak:  spell-­‐out;  } Speech Wonderful for accessibility, great for screen readers
  58. web fonts You don’t have to rely on Arial and

    Times New Roman @font-­‐face  {  font-­‐family:  Delicious;  src:   url('Delicious-­‐Roman.otf');  }  @font-­‐face  {  font-­‐family:   Delicious;  font-­‐weight:  bold;  src:  url('Delicious-­‐ Bold.otf');  } You DO, however, have to deal with licensing if you don’t own the font
  59. web fonts

  60. web fonts

  61. web fonts http://code.google.com/webfonts

  62. web fonts How to know when a site uses them

  63. web fonts How to know when a site uses them

  64. When you can use css3 Right friggin’ now We can

    start using many of these techniques today. Not 2022, not 5 years from now. Today. Vendor pre xes like -­‐moz and -­‐webkit are a good thing, relatively speaking. We have the box model to thank. The spec doesn’t work like you think. Browsers push the implementations individually.
  65. what if they don’t look the same? http://dowebsitesneedtolookexactlythesameineverybrowser.com/

  66. responsive web design Hail media queries

  67. responsive web design The answer to all our problems? Fact:

    Media queries were not introduced in CSS3 Ethan Marcotte (@beep) is credited as popularizing this technique of dealing with varying screen sizes. /*  Smartphones  (portrait  and  landscape)  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  */ @media  only  screen   and  (min-­‐device-­‐width  :  320px)   and  (max-­‐device-­‐width  :  480px)  { /*  Styles  */ } /*  Smartphones  (landscape)  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  */ @media  only  screen   and  (min-­‐width  :  321px)  { /*  Styles  */ } /*  Smartphones  (portrait)  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  */ @media  only  screen   and  (max-­‐width  :  320px)  { /*  Styles  */
  68. responsive web design The answer to all our problems?

  69. Buckle up Lecture time

  70. responsive web design The answer to all our problems? "Do

    we just adhere to the original article and serve the largest images to all devices, scaling as needed? Do we use a server technology and serve multiple images based on resolution? There are 3 major problems with both of these as solutions. 1. Bandwidth intensive for mobile 2. They're hacks at best. 3. I'll come back to this
  71. a question of context Should it be “one web”? There

    are 2 sides: those who believe there should be separate sites and domains for each context and the RWD "one web" group who believe there is no such thing as "mobile web" anymore.
  72. a question of context What about mobile? Bottom line: mobile

    rst.
  73. None
  74. dispelling myths It’s not just Webkit 6% U.S. market share

    for iPhone, < 4% globally “The most popular devices don’t necessarily translate to the most used devices.” -@bryanreiger http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu http://gs.statcounter.com OperaMini is more widely used than any other because it’s a proxy browser, making it usable on older devices
  75. None
  76. dispelling myths It’s not just Webkit 6% U.S. market share

    for iPhone, < 4% globally “The most popular devices don’t necessarily translate to the most used devices.” -@bryanreiger http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu http://gs.statcounter.com OperaMini is more widely used than any other because it’s a proxy browser, making it usable on older devices
  77. back to media queries Is RWD the answer?

  78. global guidelines Mobile- rst +

  79. be sensible Look at the hard data Use technologies for

    what they were meant to do. Keep things performant, limit HTTP requests. Check your analytics, do user research. By this new frontier of web design, web language professionals can push the limits of creativity and work with browser vendors in tandem, helping the new era of web design evolve.
  80. thank you image credits: DryRoastedBlend.com