Markup For Mobile (And Other Devices)

A talk about writing good HTML and CSS for the web on multiple devices, given at Future Insights Live in Las Vegas, May 2012.

Transcript

14. <header class="vevent"> <h1 class="summary"><a href="/">Future Insights Live</a></h1> <a class="logo-link" href="/"><img src="img/future-insights-live.png" alt="Future Insights Live"/></a> <h2><strong class="location">Las Vegas MGM Hotel -</strong> <abbr class="dtstart" title="2012-04-30">April 30^th</abbr> - <abbr class="dtend" title="2012-05-04">May 4^th 2012</abbr></h2> </header>
16. <header> <h1><a href="/">Future Insights Live</a></h1> <a href="/"><img src="img/futureinsightslive.png" alt="Future Insights Live"/></a> <h2>Las Vegas MGM Hotel - April 30th - May 4th 2012</h2> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/schedule">Schedule</a></li> <li><a href="/speakers">Speakers</a></li> <li><a href="/partners">Partners</a></li> <li><a href="/register">Register</a></li> </ul> </nav> </header>
17. <div id="header" class="col1"> <div id="h1"><span class="white"<a href="/">Future Insights Live</a></span></div> <br> <div id="img1"> <a href="/"><span class="img"> <img src="img/logo.png" alt="Future Insights Live"/> </span></a> </div> <br> <div class="h2"><b>Las Vegas MGM Hotel</b> - April 30th - May 4th 2012</div> <br> <div id="navigation1"> <div id="navigation"><div class="link"><span class="link"><a href="/">Home</ a></span></div><div class="link"><span class="link"><a href="/about">About</a></span></ div><div class="link"><span class="link"><a href="/schedule">Schedule</a></span></ div><div class="link"><span class="link"><a href="/speakers">Speakers</a></span></ div><div class="link"><span class="link"><a href="/partners">Partners</a></span></ div><div class="link"><span class="link"><a href="/register">Register</a></span></div></ div> </div> </div>
18. <div id="purpletext"> <div id="col1"> <h1>Featuring</h1> <br> <div id="col1span1" <div class="col2"> <div class="italic"><a href="/schedule">Jason Calacanis</a></div> <div id="img3"><a href="/schedule"><img src="img/speakers/jason-calacanis.png" alt="photo of Jason Calacanis" /></a></div> </div> <div class="col3"> <div class="italic"><a href="/schedule">Sara Cannon</a></div> <div id="img4"><a href="/schedule"><img src="img/speakers/sara-cannon.png" alt="photo of Sara Cannon" /></a></div> </div> <div class="col4"> <div class="italic"><a href="/schedule">Carl Smith</a></div> <div id="img5"><a href="/schedule"><img src="img/speakers/carl-smith.png" alt="photo of Carl Smith" /></a></div> </div> </div> </div> </div>
19. <section class="featuring"> <h2>Featuring</h2> <ul> <li> <a href="/schedule">Jason Calacanis</a> <a href="/schedule"><img src="img/speakers/jason-calacanis.png" alt="photo of Jason Calacanis" /></a> </li> <li> <a href="/schedule">Sara Cannon</a> <a href="/schedule"><img src="img/speakers/sara-cannon.png" alt="photo of Sara Cannon" /></a> </li> <li> <a href="/schedule">Carl Smith</a> <a href="/schedule"><img src="img/speakers/carl-smith.png" alt="photo of Carl Smith" / ></a> </li> </ul> </section>
20. <header> <h1><a href="/">Future Insights Live</a></h1> <a href="/"><img src="img/futureinsightslive.png" alt="Future Insights Live"/></a> <h2>Las Vegas MGM Hotel - April 30th - May 4th 2012</h2> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/schedule">Schedule</a></li> <li><a href="/speakers">Speakers</a></li> <li><a href="/partners">Partners</a></li> <li><a href="/register">Register</a></li> </ul> </nav> </header>
21. <div id="header" class="col1"> <div id="h1"><span class="white"<a href="/">Future Insights Live</a></span></div> <br> <div id="img1"> <a href="/"><span class="img"> <img src="img/logo.png" alt="Future Insights Live"/> </span></a> </div> <br> <div class="h2"><b>Las Vegas MGM Hotel</b> - April 30th - May 4th 2012</div> <br> <div id="navigation1"> <div id="navigation"><div class="link"><span class="link"><a href="/">Home</ a></span></div><div class="link"><span class="link"><a href="/about">About</a></span></ div><div class="link"><span class="link"><a href="/schedule">Schedule</a></span></ div><div class="link"><span class="link"><a href="/speakers">Speakers</a></span></ div><div class="link"><span class="link"><a href="/partners">Partners</a></span></ div><div class="link"><span class="link"><a href="/register">Register</a></span></div></ div> </div> </div>
22. <h2>We're committed to bringing you the best speakers in the industry on the hottest, most relevant topics and technologies. See the schedule below for days, tracks, and topics.</h2>
29. <picture alt="Alt tag describing the image represented"> <source src="photo.jpg"/> <source src="photo@2x.jpg" media="-webkit-min-device-pixel-ratio:2, -moz-min-device-pixel-ratio:2, -o-min-device-pixel-ratio: 2/1, min-device-pixel-ratio:2"/> <img src="photo.jpg" /> </picture>
30. header section.hashtag ul li.twitter a { background: url('circle-twitter.png') center center no-repeat; } html.svg header section.hashtag ul li.twitter a { background: url('circle-twitter.svg') center center no-repeat; }
35. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
36. <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 321px)" href="small.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 600px)" href="smallish.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 768px)" href="medium.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 960px)" href="big.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 1200px)" href="massive.css" />
37. header { background: #333; background: rgba(0, 0, 0, 0.5); } My header box My header box
41. div.container { width: 100%; /* 960px / 960px = 1 = 100% */ } div.target { margin: 20px auto; width: 52.0833333%; /* 500px / 960px = .520833333 = 52.0833333% */ }
43. <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 600px)" href="smallish.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width : 960px)" href="big.css" /> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="smallish.css" /> <link rel="stylesheet" type="text/css" href="big.css" /> <![endif]-->