Slides for the contemporary webdesign workshop at BTK:

1. Contemporary
Webdesign
Lukas Oppermann

2. ask in english

3. web design?

4. design.

5. wireframes &
usability.

6. ideas &
content.

7. strategy.

8. code.

9. contemporary?

10. user centered.

11. targeted.

12. animated &
fun.

13. fast.

14. responsive.

15. responsive?

16. size.

17. bandwidth.

18. usage
situation.

19. you loose
control.

20. functionality
≠ look

21. The Good

25. Inspector

26. Chrome (⌥+ ⌘ + j)
Firefox (⌥+ ⌘ + i)
Safari (⌥+ ⌘ + i)

27. CSS

28. position
static (default browser behavior)
absolute & fixed (at specified top, left, bottom,
right position)
https://developer.mozilla.org/en-US/docs/Web/CSS/position
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

29. 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/

30. colors
rgb: (red green blue);
rgba: (red green blue alpha);
#RRGGBB
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/

31. border-radius
border-radius: top right bottom left;
border-radius: all-corners;
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

32. box-shadow
box-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

33. text-shadow
text-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

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

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

36. none
Attributes 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

37. THE END
Lukas Oppermann
lukas@vea.re

38. Links
Which 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

39. Links (2)
Artikel & Tutorials
http://smashingmagazine.com/
http://net.tutsplus.com/
http://webdesign.tutsplus.com/
http://alistapart.com