39
Contemporary Webdesign Lukas Oppermann

Contemporary webdesign

Embed Size (px)

DESCRIPTION

Slides for the contemporary webdesign workshop at BTK:

Citation preview

Page 1: Contemporary webdesign

Contemporary Webdesign

Lukas Oppermann

Page 2: Contemporary webdesign

ask in english

Page 3: Contemporary webdesign

web design?

Page 4: Contemporary webdesign

design.

Page 5: Contemporary webdesign

wireframes & usability.

Page 6: Contemporary webdesign

ideas & content.

Page 7: Contemporary webdesign

strategy.

Page 8: Contemporary webdesign

code.

Page 9: Contemporary webdesign

contemporary?

Page 10: Contemporary webdesign

user centered.

Page 11: Contemporary webdesign

targeted.

Page 12: Contemporary webdesign

animated & fun.

Page 13: Contemporary webdesign

fast.

Page 14: Contemporary webdesign

responsive.

Page 15: Contemporary webdesign

responsive?

Page 16: Contemporary webdesign

size.

Page 17: Contemporary webdesign

bandwidth.

Page 18: Contemporary webdesign

usage situation.

Page 19: Contemporary webdesign

you loose control.

Page 20: Contemporary webdesign

functionality ≠ look

Page 21: Contemporary webdesign

The Good

Page 24: Contemporary webdesign
Page 25: Contemporary webdesign

Inspector

Page 26: Contemporary webdesign

Chrome (⌥+ ⌘ + j)

Firefox (⌥+ ⌘ + i)

Safari (⌥+ ⌘ + i)

Page 27: Contemporary webdesign

CSS

Page 28: Contemporary webdesign

positionstatic (default browser behavior)

absolute & fixed (at specified top, left, bottom, right position)

https://developer.mozilla.org/en-US/docs/Web/CSS/positionhttp://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Page 29: Contemporary webdesign

position (2)relative – takes element out of normal scope for positioning. Positioned by float: left|right;

Only other relative elements matter for positioning.

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Page 30: Contemporary webdesign

colorsrgb: (red green blue);rgba: (red green blue alpha);#RRGGBB

https://developer.mozilla.org/en-US/docs/Web/CSS/color_valuehttp://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/

Page 31: Contemporary webdesign

border-radiusborder-radius: top right bottom left;border-radius: all-corners;

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Page 32: Contemporary webdesign

box-shadowbox-shadow: offset-x offset-y blur-size spread color;

box-shadow: inset offset-x offset-y blur-size spread color;

box-shadow: shadow-declaration, shadow-declaration;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Page 33: Contemporary webdesign

text-shadowtext-shadow: color offset-x offset-y blur-size;

text-shadow: shadow-declaration, shadow-declaration;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Page 34: Contemporary webdesign

gradients You need to at least define a gradient for webkit and the standard one.

background-image: -webkit-linear-gradient(top, RGB RGB);background-image: linear-gradient(top, RGB, RGB);

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients

Page 35: Contemporary webdesign

box-sizing This attribute defines how element sizes are calculated by the browser. Options are:

content-box (only content = set size)padding-box (content + padding = set size)border-box (content + padding + border = set size)

box-sizing: border-box;-moz-box-sizing: border-box;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Page 36: Contemporary webdesign

noneAttributes can be disabled using none.For. e.g. if you want to disabled a box shadow on hover you can assign none:

a:hover{box-shadow: none;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Page 38: Contemporary webdesign

LinksWhich CSS3 / HTML5 are save to use http://caniuse.com

CSS properties explained https://developer.mozilla.org/en-US/docs/Web/CSS

CSS properties explained http://www.w3schools.com/

CSS properties explained http://css-tricks.com/snippets/css/

Libraries & Plugins https://github.com/

Very helpful community http://stackoverflow.com

Page 39: Contemporary webdesign

Links (2)Artikel & Tutorials

http://smashingmagazine.com/

http://net.tutsplus.com/

http://webdesign.tutsplus.com/

http://alistapart.com