A Step Towards the New Standards

What we learned to do the last few years

  • Great Animations
  • Better Ads
  • Videos
  • Interactivity
  • Vector design
  • Streaming
  • RIA

How to design
for the Social Web?

How to design
for the Semantic Web?

How to design
for the Mobile Web?

http://www.w3.org/

The Next Open Web Platform

  • HTML5
  • CSS 2.1
  • CSS 3 Selectors
  • CSS 3 Media Queries
  • CSS 3 Text
  • CSS 3 Backgrounds and Borders
  • CSS 3 Colors
  • CSS 3 2D Transformations
  • CSSOM View Module
  • CSS 3 Transitions
  • CSS 3 Animations
  • CSS 3 Multi-Columns
  • CSS Namespaces
  • SVG 1.1
  • WAI-ARIA 1.0
  • MathML 2.0
  • 2D Context
  • Web Storage
  • Indexed Database
  • Web Workers
  • Geolocation
  • Progress Events
  • Element Traversal
  • DOM Level 3 Events
  • Media Fragments
  • XMLHttpRequest
  • Selectors API
  • CSSOM View Module
  • File API
  • RDFa
  • Microdata
  • WOFF
  • …

Designers!
Learn to code!

Why designers should code:

  • Realistic and accurate layouts
  • Control of interactions
  • Prototyping
  • Gauge feasibility
  • Faster iterations
  • Better communication with developpers
  • Shorter development
  • …
  • and it's FREE!

The new Design Tools

Colors and Alpha

Demo
color: hsla(15,0%,100%,0.8);
background-color: hsla(15,100%,50%,1) ;

Border-Radius

Demo
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

Box-Shadow & Text-Shadow

Demo
box-shadow: 0 1px 3px hsla(209,10%,20%,1),
            0 -1px 1px hsla(15,100%,80%,1),
            0 1px 1px hsla(15,50%,30%,1);

text-shadow: 0 1px 1px hsla(15,100%,80%,1),
             0 -1px 1px hsla(15,50%,30%,1);

Gradients

Demo
background-image:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, hsla(15,100%,40%,1)),
    color-stop(1, hsla(15,100%,60%,1))
	);

Easy animations

Transformations

Demo
-webkit-transform: scale(2)
                   rotate(5deg)
                   translate(20px);

Transitions

Demo
-webkit-transition: all 0.3s ease-in;

Animations

Demo

Typography and layout

@font-face

@font-face {
	font-family: Chunk;
	src: url('../fonts/ChunkFive-Roman.otf');
}

h1 { font-family: Chunk, sans-serif; }

Multi Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies tortor id urna volutpat dictum. Integer posuere lorem at ligula ultrices cursus. Proin id fermentum turpis. In rhoncus, sem in laoreet mollis, ante nisl consectetur justo, consequat sodales tellus purus et augue. Cras dictum diam in nibh eleifend sed elementum nulla ultrices. Aenean feugiat, sapien sit amet commodo varius, odio mi euismod eros, in eleifend purus augue nec orci. Etiam sollicitudin sodales quam sodales dignissim. Suspendisse lobortis dictum accumsan. Curabitur convallis sollicitudin orci ut lobortis. Ut dapibus ligula a odio semper eget tempor eros commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae est metus, id vehicula nisl. Nulla semper placerat dui quis adipiscing.
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;

Video and Audio

Video tag

<video>					
	<source src="video.mp4" type="video/mp4">
</video>

The next step
of Open Standards

Most Browsers are ready!

Thank you!