Hardboiled Web Design

Lunchpresentatie4 januari 20111Vincent SmedingaLiones

Wat zit er in HTML5Wat zit er in CSS 3Wat kunnen we nu al gebruikenWat moeten we daarvoor doen3Ready, set

HTML<h1>Example</h1><p>Helloworld!</p><ul> <li>Yea</li> <li>Nay</li></ul>ExampleHelloworld!Yea

h1 { color: rgb( 0, 192, 255 ); }p { font: 12px / 1.337 boldCandara; }ul li { list-item: square; }CSSdiv { position: absolute; top: 0; right: 0;z-index: 999 }7

$( ‘.gallery a’ ).fancybox();$( ‘.column’ ).equalHeights();$( ‘#go’ ).click( function() { $( this ).ne- xt( ‘form.login’ ).slideDown( ‘slow’ ); }Javascript8

Geschiedenis101999: HTML 4 ‘af’XHTML 1.0 & 1.1W3C ↔ WHATWGWebapps ↔ webdocs2006: XHTML2HTML5 FTW

XHTML2 ↔ HTML5Steven PembertonIan Hickson11

Support existing contentDegradegracefullyPave the cowpathsPriority of consituencies“In case of conflict, considerusers over authors over implementers over specifiers over theoreticalpurity.”Define error handlingDesign principles12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Eenvoudiger13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Eenvoudiger14

<!doctype html>Yey :)Eenvoudiger15

Semantischer<div id=“wrapper”> <div id=“navigation”>…</div> <div class=“news-index”> <div class=“news-item”> <h3>Title</h3> <p>Intro</p> <a href=“news.txt”>Link</a> </div> </div></div><body><nav>…</nav> <section class=“news”><article> <h1>Title</h1><p>Intro</p><a href=“news.html5”>Link</a> </article></section></body >16

SemantischerderAccessibility<header role=“banner”><navrole=“navigation”><div role=“main”><footerrole=“contentinfo”>Microformats<div class=“vcard”> <address class=“fn”>Vincent Smedinga</address> <a class=“orgurl”>liones.nl</a> <span class=“title”>frontend web developer</span></div>18

Meer browserOud<input type=“text”><input type=“radio”><input type=“checkbox”><input type=“submit”><input type=“reset”><select><textarea>Nieuw<input type=“search”><input type=“email”><input type=“url”><input type=“tel”><input type=“number”><input type=“range”><input type=“datetime”><input type=“color”>…19

Meer browserdatalistplaceholderautofocusautocomplete<input type=“text”>21

Minder plugins<video><audio><canvas>FlashShockwaveSilverlight22

Minder plugins<video><audio><canvas>FlashShockwaveSilverlight23

API’s24MicrodataCanvasDrag& dropCachingOffline storageWeb SQLIndexedDBGeolocationDocument editingTimedmedia playbackWeb workersWeb socketsCross-document messaging

Ronde hoekjes:(<div class=“box”> <div class=“tl”> <div class=“tr”> <div class=“bl”> <div class=“br”>It’s getting … </div> </div> </div></div>:)<div class=“box”> … round in here.</div>.box{ border-radius: 10%;}26

Ronde hoekjes27.zonder-hoekjes{ border-radius: 50%;}.eigenwijze-hoekjes{ border-radius: 5px 180px 0 77px;}

<strong>Liones<strong>strong { background: #054780; padding: 20% 10%; border-radius: 0 10% 10% 0; }strong:after { content: “·” }28Ronde hoekjes

#c00-moz-linear-gradient( top, #c00 0%, #fff50%, #006 100% )-webkit-gradient( linear, left top, left bottom, color-stop( 0%, #c00 ), color-stop( 50%, #fff), color-stop( 100%, #006 ) )Gradients29

Shadowtext-shadow: 1px 4px 8px #000;box-shadow: 0 0 10% #fc9;33

α-transparencycolor: #808080;color: rgb( 128, 128, 128 );color: rgba( 0, 0, 0, .5 );34

@font-face{ font-family: 'AkzidenzGrotesk';src: url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.eot' );src: local( '?' ), url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.woff' ) format( 'woff' ),url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.ttf' ) format( 'truetype' ),url( '{Application.path}/Fonts/akzidenz_grotesk_roman-webfont.svg#webfontkBrJyxey' ) format( 'svg' );}header h1{ font: bold16px AkzidenzGrotesk, Arial, Helvetica, sans-serif;color: {Color.blue};}36Fonts

@media screen and ( max-width : 320px ) {…} Smartphone@media screen and ( min-width : 1824px ) {…} Widescreen37Media queries

@media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) and ( min-device-pixel-ratio : 1.5 ) and ( orientation : portrait ) {…} iPad38Media queries

.three-columns { column-count: 3; column-gap: 20px; column-rule: 1px dottedgrey;}39Columns

-webkit-transform:rotate( 33deg )scale( .704 )skew( 30deg ) translate( -46px );40Transformation

.zoom-out { -webkit-transition: all 1s ease; -webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); }.zoom-out:hover { -webkit-transform: rotate( 0deg )scale( 0.67 ) skew( 1deg )translate( 0px ); }41Transition

.bounce{ -webkit-animation-name: cssAnimation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 16; -webkit-animation-timing-function: ease;}@-webkit-keyframescssAnimation{from { -webkit-transform: rotate( 4deg )scale( 1 ) skew( 1deg ) translate( 10px ); }to { -webkit-transform: rotate( 4deg ) scale( 1 )skew( 1deg ) translate( 10px ); }}42Animation

Selectors43h1 + h2dt ~ abbrulli:first-childinput[type=checkbox]article > p:nth-of-type( 3n – 1 )header:target.block::after

Oude, eh, andere browsers46IE6 kan dit allemaal niet zo goed bijhoudenFirefox 2, Safari 3 en Chrome 4 ook niet trouwensEn wat dacht je van de Blackberry browser?Of die van de Nokia? Apple? HTC?Firefox Mobile? Opera Mini? Windows Phone?Of je iPad? Je Google TV?

MaatwerkRechte hoekjesRonde hoekjes53

Hoe pakken we dat aan54ModernizrSelectivizrjQueryeCCStender

Hoe pakken we dat aan56ModernizrSelectivizrjQueryeCCStender

ProgressiveenhancementGracefuldegradationHardboiled web designHoe pakken we dat aan57

Hardboiled“I looked at Berin and laughed. He turned his head and stared right into the muzzle of his own gun. The killer’s face was a vile mask of hatred. Berin had his mouth open, screaming with all the furies of the gods dethroned, but my laugh was even louder. He was still screaming when I pulled the trigger.”— My Gun is Quick, Mickey Spillane, 195059

The term ‘hardboiled’ means tough, like an overcooked egg. The crimes are tough too, so the heroes have attitude, don’t sugar-coat the truth and never play it cute.Hardboiled web design61

“Designs are done in Photoshop andsigned off by a client, whowillobviouslyexpect the website to look the same as the comp,otherwisewhat the hell was the point of givingittothem in the first place?”– Andy Clarke63

“If the project includes HTML markup and CSS templates, we will develop these using HTML5 and CSS2.1 and CSS3 for styling. The landscape of web browsers and devices changes regularly and our approach is to look forward, not back. With that in mind we will test all our markup and CSS in current versions of all major desktop browsers to ensure that we make the most from them.…64

…Users of older or less capable browsers or devices will experience a design that is appropriate to the capabilities of their software. For people using Microsoft Internet Explorer 6, this means a universal, typographically focused design but no layout. We will also test that these templates perform well on Apple’s iPad.”– Andy Clarke65

Bij ons op de PC66Kluwer SupportBrunelNUVLiones SMSLynkx 3.10SiteCore 2HTML5 BoilerplateStandaard frontend architectuur

We bouwen voor de beste browsers.Chrome, Opera, Firefox, SafariInternet Explorer 9Internet Explorer 8Internet Explorer 7 & 667Kortom

Gewoon goed programmeren brengt ons al halverwege.Inhoud, vormgeving en interactie scheidenObject-georiënteerd denkenFlexibiliteit top of mindSemantiek is sexy68Kortom

Gewoon goed programmeren brengt ons al halverwege.Inhoud, vormgeving en interactie scheidenObject-georiënteerd denkenFlexibiliteit top of mindSemantiek is sexy70Kortom

We besteden expliciet aandacht aan andere browsers.Nogmaals, dat wil niet zeggen dat… Ok.Dit kan (deels) in de tijd die we besparen dankzij de nieuwe technieken. Border-radius, weet je nog.Voor veel fallbacksbestaan al best practices, of werkt HTML5 ‘gewoon’.71Kortom

Onze klanten moeten even wennen.dowebsitesneedtolookexactlythesameineverybrowser.comdowebsitesneedtobeexperiencedexactlythesameineverybrowser.com72Kortom

Grafisch ontwerp mag wel wat interactiever.Requirements -> FO ->IO ->GO ->HTMLDesigners horen te weten wat er (gemakkelijker) kanExperimenteren met HTML prototyping73Kortom

Hardboiled Web Design

More Related Content

Similar to Hardboiled Web Design

Hardboiled Web Design

Editor's Notes