Ein tarent TechTalk von mir zum Thema Bootstrap. Gehalten am 05.05.2014.

1. Bootstrap nutzen
TechTalk 05.05.2014

2. 07.05.2014 2
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

3. 07.05.2014 3
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

4. Das Web (HTML/CSS) ist überall
Wir sind, bis auf wenige Ausnahmen, alle keine Designer
Entwickler müssen oft (Web-)Oberflächen umsetzen
– Zu häufig ohne konkrete Vorgaben
Verwendung von (guten) Frameworks spart kosten zu ist zukunftsorientiert
Wikis in evolvis bringen Bootstrap mit, so dass jeder davon profitieren kann
07.05.2014 4
Einführung

5. 07.05.2014 5
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

6. Ziel: Informationen leicht zugänglich und leicht erfassbar darstellen
– Nicht: Emotionen transportieren, Produktpräsentationen, etc.
Designer: Fast alles was sie anfassen sieht plötzlich gut aus
Aber was machen wir zahlenverliebten Nerds mit zwei linken Händen für das
Basteln?
4 Grundregeln ermöglichen es jedem eine aufgeräumte und leicht zu nutzende
Webseite zu entwerfen
07.05.2014 6
Design Prinzipien

7. 1. Nähe (proximity)
1. Ausrichtung (alignment)
1. Kontrast (contrast)
1. Wiederholung (repetition)
http://my.safaribooksonline.com/book/-/9783827330581/designprinzipien/13
07.05.2014 7
Design Prinzipien

8. Elemente die mit geringen Abständen zueinander stehen, werden als
zusammengehörig wahrgenommen.
Einander zugehörige Elemente sollten dicht nebeneinander angeordnet sein.
Wenn mehrere Elemente nahe beieinander platziert werden, sind sie keine
getrennten Einheiten mehr, sondern sie werden zu einer visuellen Einheit.
So lassen sich Informationen leichter organisieren, das Layout wirkt nicht
überfüllt und der Leser erhält eine klare strukturierte Seite.
07.05.2014 8
Nähe (proximity)

9. Beispiel: Trennen durch Abstand und Gemeinsamkeiten herstellen
07.05.2014 9
Nähe (proximity)
SIZES
Small
Medium
Large
X-Large
MATERIAL
Wood
Plastic
Padded
Veneer
COLORS
White
Black
Red
Green
Blue
Yellow
SIZES
Small
Medium
Large
X-Large
MATERIAL
Wood
Plastic
Padded
Veneer
COLORS
White
Black
Red
Green
Blue
Yellow

10. Beispiel: Kontext erzeugen durch gruppieren
07.05.2014 10
Nähe (proximity)

11. Jedes Element sollte eine visuelle Verbindung mit einem anderen
Seitenelement haben.
Es soll nichts zufällig auf der Seite platziert werden.
Bilden sich durch (imaginäre) horizontale Linien Spalten, so kann die Struktur
der Seite sehr schnell erfasst werden.
07.05.2014 11
Ausrichtung (alignment)

12. Beispiel: 2 imaginäre Linien an beiden Seiten
07.05.2014 12
Ausrichtung (alignment)

13. Gegenbeispiel: Der Tetris Looser
07.05.2014 13
Ausrichtung (alignment)

14. The Grid
Optimal ist der „Goldene Schnitt“
Einfacher:
– Immer mit 3 Teilen
07.05.2014 14
Ausrichtung (alignment)

15. Die Idee beim Kontrast ist die Vermeidung von Elementen, die sich zu ähnlich
sind.
Wenn die Elemente (Schrift, Farbe, Größe, Linienstärke, Form, Abstand usw.)
nicht gleich sind, dann müssen sie sehr unterschiedlich gestaltet werden.
Kontrast ist häufig der wichtigste visuelle Anreiz auf einer Seite – durch ihn
erhält der Leser überhaupt erst einen Impuls, die Seite zu betrachten.
Sehr wichtig: Nicht nur ein bisschen Kontrast / Unterschied erzeugen, sondern
deutlichen Kontrast einsetzten.
07.05.2014 15
Kontrast (contrast)

16. Beispiel:
Deutlichen Kontrast erzeugen
07.05.2014 16
Kontrast (contrast)

17. Beispiel: Elemente mit Kontrast machen die Seite interessanter
07.05.2014 17
Kontrast (contrast)

18. Elemente müssen wiederholt werden damit das Designs zu einem gesamten
Layout wird
Es können sich Farben, Formen, Texturen, Abstände, Linienstärken, Schriften,
Größen, grafische Konzepte usw. wiederholen
Damit unterstreicht man die Organisation und verstärken die Einheit
07.05.2014 18
Wiederholung (repetition)

19. Beispiel: Erzeugen eines erkennbaren Layout durch wiederholende Elemente
07.05.2014 19
Wiederholung (repetition)

20. Ergänzend: Farben
07.05.2014 20
Design Prinzipien
Red – Adrenaline, blood pressure, anger, love.
Orange – Active, energetic, more informal, appetite
Green – Nature, soothing, growth, freshness, hope,
less active
Blue – Openness, intelligence, faith, calming,
reduce appetite
Purple – Royalty, power, innovation, wealth
White – Clean, perfection, light, purity
Black – Death, evil, power, elegance

21. Ergänzend: Schriften / Typografie
Bitte:
– keine Treppen
– keine Kästen (Treppen-Gefahr)
07.05.2014 21
Design Prinzipien

22. 07.05.2014 22
eirmod tempor
invidunt ut labore
et dolore magna
aliquyam erat
sed diam voluptua
At vero eos et
accusam et justo
duo
Beispiel: Treppen und Kästen
Lorem ipsum dolor
sit amet
consetetur
sadipscing elitr
sed diam nonumy
Wichtige
Information
Lorem ipsum dolor
sit amet
sed diam voluptua
At vero eos et
accusam et justo
duo
Block 1 Block 2 Block 3

23. 07.05.2014 23
eirmod tempor invidunt
ut labore et dolore
magna aliquyam erat
sed diam voluptua
At vero eos et accusam
et justo duo
Beispiel: Treppen und Kästen
Lorem ipsum dolor sit
amet
consetetur sadipscing
elitr
sed diam nonumy
Wichtige Information
Lorem ipsum dolor sit
amet
sed diam voluptua
At vero eos et
accusam et justo duo
Block 1 Block 2 Block 3

24. 07.05.2014 24
Beispiel: Treppen und Kästen
eirmod tempor invidunt
ut labore et dolore
magna aliquyam erat
sed diam voluptua
At vero eos et accusam
et justo duo
Lorem ipsum dolor sit
amet
consetetur sadipscing
elitr
sed diam nonumy
Wichtige Information
Lorem ipsum dolor sit
amet
sed diam voluptua
At vero eos et
accusam et justo duo
Block 1 Block 2 Block 3

25. 07.05.2014 25
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

26. Front-End-Framework für die Entwicklung von Projekten für das moderne Web
Fokus: responsive und mobile first Design (ab v3.0)
Einheitliche CSS + HTML Struktur
Set an wichtigen Design-Elementen
– Web Design und Layout Patterns : CSS
– Widgets und Funktionalität: JavaScript
Große Community
Entwickler: Twitter Inc.
Erscheinungsjahr: 2011
Aktuelle Version: 3.1.1
Programmiersprache: CSS (LESS), JavaScript
Lizenz: MIT-Lizenz
(vor Version 3.1.0 Apache License 2.0)
CC BY 3.0 (Dokumentation, Icons)
07.05.2014 26
Bootstrap

27. Wo es möglich ist erfüllt Bootstrap die Design Prinzipien
Nähe / Proximity
– Umgesetzt bei Design-Gruppen, Zuständigkeit des Designer
Ausrichtung / Alignment
– 12 Spalten Fluid Grid (anpassbar)
Wiederholung / Repetition
– Standard Typographie, Elemente, Normalisiert, Zuständigkeit des Designer
Kontrast / Contrast
– Zuständigkeit des Designer, Elemente haben guten Kontrast
07.05.2014 27
Bootstrap

28. Grundsätzliches CSS Styling (Styles die auf die HTML-Elemente direkt wirken)
– Grid system
– Typography
– Tables
– Forms
– Buttons
– Images
Komponenten die häufige Anwendungsfälle abdecken
(Gruppen von HTML-Elementen die durch Bootstrap-CSS formatiert werden)
– Glyphicons
– Dropdowns + Button groups + dropdowns
– Navs + Navbar
– Breadcrumbs + Pagination
– Labels + Badges
– Thumbnails
– Alerts + Panels + List / Input groups
07.05.2014 28
Bootstrap

29. GUI „Effekte“ mit JavaScript
– Modal + Alert
– Dropdown + Button
– Scrollspy + Affix
– Tab
– Tooltip + Popover
– Collapse
– Carousel
Anpassen / Customizing
– Erweitern und überschrieben mit eigener CSS-Datei
– LESS / SASS
– Angepasster Build zum reduzieren der Größe
http://getbootstrap.com/customize/
07.05.2014 29
Bootstrap

30. Einbinden von Bootstrap:
http://getbootstrap.com/getting-started/#template
07.05.2014 30
Bootstrap

31. 07.05.2014 31
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

32. 07.05.2014 32
Typography

33. 07.05.2014 33
Button

34. 07.05.2014 34
Button Groups

35. 07.05.2014 35
Alerts, Labels, Badges

36. 07.05.2014 36
Navigation

37. 07.05.2014 37
Navigation, Table

38. 07.05.2014 38
Formulare

39. 07.05.2014 39
Formulare

40. 07.05.2014 40
Highlighting

41. Bootstrap hat ein Grid System das auf 12 Spalten basiert
Das Grid System ist eine Möglichkeit um eine solide Struktur zu bilden
07.05.2014 41
The Grid

42. Beispiele
07.05.2014 42
The Grid

43. 07.05.2014 43
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

44. http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
07.05.2014 44
Community

45. 07.05.2014 45
http://bootsnipp.com

46. 07.05.2014 46
http://bootsnipp.com

47. 07.05.2014 47
http://bootsnipp.com

48. 07.05.2014 48
http://bootsnipp.com

49. 07.05.2014 49
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

50. Nachteile von Bootstrap:
– Apps sehen fast alle gleich aus, wenn man das Design nicht anpasst
– „DIV bloat“, wenn man nicht aufpasst
ZURB Foundation
– Mehr Design Element bei Bootstrap
– Bootstrap: px; Foundation: REM (em)
– Grid System ist fast identisch
– Foundation: erst mobile
– Community ist bei Bootstap viel größer
Weiter: G5, Ink, Terrific
07.05.2014 50
Alternativen

51. 07.05.2014 51
Agenda
1. Einführung
2. Design Prinzipien
3. Bootstrap
3.1 im Detail
3.2 Community
4. Alternativen
5. Bootstrap und evolvis Wikis

52. 07.05.2014 52
Überschriften

53. 07.05.2014 53
Tabellen

54. 07.05.2014 54
Seitenlayout

55. Versuche deine nächste Wikiseite mit Hilfe von Bootstrap ansprechend zu
gestallten!
Wiki: new page
Nutze die Ideen aus diesem Vortrag
Und natürlich: http://getbootstrap.com/css/
07.05.2014 55
Übung macht den Meister

56. Ingo Reinhart Mail: i.reinhart@tarent.de
Rochusstraße 2-4
53123 Bonn