Slide 1

Slide 1 text

Post-modern Web Design with your guide Kevin Suttle

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

mY GOAL To bring us up to speed

Slide 4

Slide 4 text

MY MOTIV ATION

Slide 5

Slide 5 text

Onl y two things are infinite, the universe and human stupidity, and I'm not sure about the former. - Albert Einstein

Slide 6

Slide 6 text

"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

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2006 five years ago

Slide 10

Slide 10 text

2006 five years ago

Slide 11

Slide 11 text

The next generation

Slide 12

Slide 12 text

Living document Dropping the 5

Slide 13

Slide 13 text

the year 2022 A bit of a miscommunication

Slide 14

Slide 14 text

breaking it down Little by little

Slide 15

Slide 15 text

Why should i care? Because it matters right now

Slide 16

Slide 16 text

the new hotness Let’s dig in

Slide 17

Slide 17 text

the new hotness Doctype Old and busted Fresh Doctypes are for validators, not people, and not browsers.

Slide 18

Slide 18 text

the new hotness Meta tags Old and busted Fresh

Slide 19

Slide 19 text

the new hotness JavaScript and CSS Old and busted Fresh HTML(5) is a huge step forward in web development user experience. Old and busted Fresh

Slide 20

Slide 20 text

the new hotness Root element Old and busted Fresh

Slide 21

Slide 21 text

the new hotness Choice of syntax This can be good or bad. Just be consistent.

Slide 22

Slide 22 text

Slide 23

Slide 23 text

the new hotness Semantics

Slide 24

Slide 24 text

the new hotness Nav tag Text      

Navigation

      Main navigation intended for a single page.

Slide 25

Slide 25 text

the new hotness Article tag Text      

The  Very  First  Rule  of  Life

   

   

If  there's  a  microphone  anywhere  near  you,  assume  it's  hot  and  sending  whatever  you're  saying  to  the  world.  Seriously.

 

...

Self-contained composition, intended to be individually distributed.

Slide 26

Slide 26 text

the new hotness Aside tag Text  

Switzerland

 

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.

Content separate from the main content (typically sidebars)

Slide 27

Slide 27 text

the new hotness Content models Text Sectioning elements: “Content that de nes the scope of headings and footers.” Sectioning “roots”:

Slide 28

Slide 28 text

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.”      

Mike’s  Mechanics

     Free  quotes!            

For  when  all  you  need  is  a  miracle.

     Like  us  on  Facebook      Copyright  © 2011, Mike’s Mechanics      

Tell  your  friends

“When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”

Slide 29

Slide 29 text

the new hotness *Multiple hierarchies in the form of Content models Text

 -­‐  

 can  be  used  multiple  times  in  a  single  document   using    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.”

Slide 30

Slide 30 text

the new hotness *Multiple hierarchies in the form of content models Text produces the following in browsers that respect the outline algorithm

My  favorite  music

             

Artists

         

Bands  and  artists  who  make  up  my  collection.

                 

DJ  Shadow

     

The  godfather  of  modern  instrumental  hip-­‐hop

                 

Prefuse-­‐73

     

The  man  of  many  aliases.  All  of  them  great.

  My favorite music -Artists - DJ Shadow - Prefuse-73

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ACcessible rias More semantic means more accessible role="search"  (search  form)   role="banner"  (masthead)   role="contentinfo"  (footer) ARIA Roles

Slide 33

Slide 33 text

The best approach How to know if you can use the new bits right now

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

http://modernizer.com

Slide 36

Slide 36 text

modernizr Feature detection > Browser snif ng if  (Modernizr.canvas)  {        //  create  some  cool  canvas-­‐y  stuff }   else  {      //  canvas  not  supported }    

Slide 37

Slide 37 text

HTML5shim a.k.a “HTML5shiv” https://code.google.com/p/html5shim/

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

There is so much more Thankfully books exist http://diveintohtml5.org/ http://introducinghtml5.com/ http://www.abookapart.com/products/html5-­‐for-­‐ web-­‐designers

Slide 40

Slide 40 text

Css3 Learn it. Love it. Live it.

Slide 41

Slide 41 text

lessening reliance On images, JS, and system fonts

Slide 42

Slide 42 text

new hotness Lots to love in CSS3

Slide 43

Slide 43 text

Borders Who knew they could be so exciting? border-­‐color border-­‐image border-­‐radius box-­‐shadow

Slide 44

Slide 44 text

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;

Slide 45

Slide 45 text

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;

Slide 46

Slide 46 text

Border-image Example

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Rounded borders Examples

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

p[title^="con"]  {background:  red;}

p[title$="g"]  {background:  black;}

Slide 52

Slide 52 text

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;  }

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

web fonts

Slide 60

Slide 60 text

web fonts

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

web fonts How to know when a site uses them

Slide 63

Slide 63 text

web fonts How to know when a site uses them

Slide 64

Slide 64 text

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.

Slide 65

Slide 65 text

what if they don’t look the same? http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Slide 66

Slide 66 text

responsive web design Hail media queries

Slide 67

Slide 67 text

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  */

Slide 68

Slide 68 text

responsive web design The answer to all our problems?

Slide 69

Slide 69 text

Buckle up Lecture time

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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.

Slide 72

Slide 72 text

a question of context What about mobile? Bottom line: mobile rst.

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

back to media queries Is RWD the answer?

Slide 78

Slide 78 text

global guidelines Mobile- rst +

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

thank you image credits: DryRoastedBlend.com