Contemporary webdesign

394 views
329 views

Published on

Slides for the contemporary webdesign workshop at BTK:

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
394
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Contemporary webdesign

  1. 1. Contemporary Webdesign Lukas Oppermann
  2. 2. ask in english
  3. 3. web design?
  4. 4. design.
  5. 5. wireframes & usability.
  6. 6. ideas & content.
  7. 7. strategy.
  8. 8. code.
  9. 9. contemporary?
  10. 10. user centered.
  11. 11. targeted.
  12. 12. animated & fun.
  13. 13. fast.
  14. 14. responsive.
  15. 15. responsive?
  16. 16. size.
  17. 17. bandwidth.
  18. 18. usage situation.
  19. 19. you loose control.
  20. 20. functionality ≠ look
  21. 21. The Good
  22. 22. Inspector
  23. 23. Chrome (⌥+ ⌘ + j) Firefox (⌥+ ⌘ + i) Safari (⌥+ ⌘ + i)
  24. 24. CSS
  25. 25. 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/
  26. 26. 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/
  27. 27. 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/
  28. 28. border-radius border-radius: top right bottom left; border-radius: all-corners; https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. THE END Lukas Oppermann lukas@vea.re
  35. 35. 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
  36. 36. Links (2) Artikel & Tutorials http://smashingmagazine.com/ http://net.tutsplus.com/ http://webdesign.tutsplus.com/ http://alistapart.com

×