Web Layouts für Smartphones, Tablets und                Desktops      Henning Schmidt, hedersoft GmbH          - Entwickle...
Über mich Studium der Wirtschaftsinformatik in Paderborn Seit 15 Jahren Softwareentwicklung, Beratung und  Administratio...
Agenda Herausforderung Ansatz: Responsive Web Design (RWD) Frameworks Twitter Bootstrap Bootstrap und Xpages It‘s de...
Herausforderung Bisher Web Entwicklung für Desktop Browser 2007 Einführung des iPhone, 2010 folgt das iPad,  2008 kommt ...
Herausforderung Möglichkeit 1: Erkennen des UserAgent    Nachteil: User Agent kann in den meisten     Browsern umgestell...
Ansatz: RWD Responsive Web Design RWD   Ethan Marcotte hat den Begriff 2010 eingeführt auf „A List    Apart“ (Issue No. ...
RWD: Fluid Grids Fluid Grids    IE hat Schuld!    Problem: IE skaliert Fonts     nicht, wenn diese in px angegeben werd...
RWD: Fluid Grids Fluid Grids    Annahmen:      • 7 Spalten à 124px +        Spaltenabstand 20px = 988px      • Bei Schri...
RWD: Fluid Grids Fluid Grids    Die Lösung: Prozentuale     Größenangaben!    Wie können die Größen berechnet werden?  ...
RWD: Fluid Grids Fluid Grids    Grid im Grid:     Die Containergröße muss     angepasst werden!
RWD: Fluid Images Die Seiten skalieren nun wunderbar, aber  Bilder nicht! Ein kleiner Trick hilft in modernen Browsern:...
RWD: Fluid Images Firefox können wir nicht retten! Wir können aber davon ausgehen, dass FF < V3.0 im  Promillebereich li...
RWD: Media Queries Das Skalierungsproblem haben wir  im Griff. Eine gut skalierende für den Desktop  optimierte Seite pas...
RWD: Media Queries Media Types:   all, braille, embossed, handheld, print, projection, screen,    speech, tty, tv Media...
RWD: Media Queries Was haben wir gewonnen?   Durch Media Queries können die Fenstergrößen abgefragt    und CSS dynamisch...
RWD Beispiel: Collaboration Today
Frameworks Mit dem jetzigen Wissen können wir ein eigenes  Framework bauen Es gibt aber bereits einige Frameworks, die f...
Frameworks Am weitesten verbreitet sind twitter Bootstrap,  Skeleton und Foundation ZURB
Frameworks Entscheidung: twitter Bootstrap    Sehr weit verbreitet    Apache 2.0 Lizenz    Großer Fundus an Entwickler...
twitter Bootstrap Hintergrund Was brauchen wir und wie ist Bootstrap aufgebaut? Grundgerüst – Die Grid Struktur Basis ...
twitter Bootstrap Hintergrund   Internes Projekt bei twitter   Inkonsistenzen projektübergreifend in den Griff    bekom...
twitter Bootstrap Was brauchen wir und wie ist Bootstrap  aufgebaut?    Herunterladen des ZIP Files mit     kompilierten...
twitter Bootstrap Grundgerüst – Die Grid Struktur    HTML5 wird als DocType benötigt!    Fixed und Fluid Grids mit 12 S...
twitter Bootstrap Grundgerüst – Die Grid Struktur    Spalten können versetzt werden (Offset)    Spalten können eingebet...
twitter Bootstrap Grundgerüst – Die Grid Struktur    Layouts      • Fixed Layout (940px!)      • Fluid Layout
twitter Bootstrap Grundgerüst – RWD   RWD ist bei Bootstrap nicht automatisch aktiviert!   Bootstrap-responsive.css mus...
twitter Bootstrap Grundgerüst – RWD   Die zugehörigen Media Queries   CSS Klassen zum Anzeigen und    Verbergen von Ele...
twitter Bootstrap Basis CSS    Typographie      •   <h1> - <h6>      •   Default font-size ist 14px mit einer Zeilenhöhe...
twitter Bootstrap Basis CSS    Typographie      • Addressformatierung mit <address>      • Listenformatierung: .unstyled...
twitter Bootstrap Basis CSS    Forms      • .checkbox, .radio, .inline      • .input-prepend, .input-append, .add-on    ...
twitter Bootstrap Basis CSS    Buttons (sehen im IE9 anders aus!)
twitter Bootstrap Basis CSS    Images    Icons (von Glyphicons, Lizenz: CC BY 3.0)      • 140 Icons in schwarz und weiß
twitter Bootstrap Komponenten     Button groups                        Progress Bar     Button dropdowns              ...
twitter Bootstrap Komponenten   Dropdowns   Button groups
twitter Bootstrap Komponenten   Button Dropdowns   Navs
twitter Bootstrap Komponenten   Navbar                            } RWD
twitter Bootstrap Komponenten   Labels und Badges
twitter Bootstrap Komponenten   Alerts und Progress Bars                                          Dismiss benötigt      ...
twitter Bootstrap Javascript (jQuery)      Transitions                 Alert      Modals (Dialoge)            Button ...
twitter Bootstrap Javascript    Modals (Dialoge)
twitter Bootstrap Javascript    Tooltips und Popovers
twitter Bootstrap Javascript    Carousel
twitter Bootstrap Customizing - Komponenten
twitter Bootstrap Customizing – jQuery Plugins
twitter Bootstrap Customizing – Variablen
Bootstrap und XPages Was brauchen wir?    bootstrap.css, bootstrap-responsive.css, bootstrap.js,     jquery.js, Icons   ...
Bootstrap und XPages It‘s Demo time!
RWD: Vor- und Nachteile Nachteile   Vollständig Client-basiert     • Kompletter Download nötig / Ladezeiten     • CSS st...
RWD: Vor- und Nachteile Vorteile      One Design to rule them all      Schnellere Entwicklungszeiten      Einfacherer ...
RWD: Ausblick Ist RWD schon das Ende der Fahnenstange?    NEIN! RESS steht bereits in den Startlöchern    Responsive D...
RWD: Zusammenfassung 2010 von Ethan Marcotte beschrieben 2011 Twitter Bootstrap Open Sourced Bootstrap seit Version 2.0...
Fragen / Diskussion
Quellenverzeichnis   http://responsive.vermilion.com/compare.php   http://www.lukew.com/ff/entry.asp?1392   http://www....
Nächste SlideShare
Wird geladen in …5
×

Entwicklercamp responive web design

6.956 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
6.956
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3.419
Aktionen
Geteilt
0
Downloads
24
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Entwicklercamp responive web design

  1. 1. Web Layouts für Smartphones, Tablets und Desktops Henning Schmidt, hedersoft GmbH - Entwicklercamp 2013 - 12.03.2013
  2. 2. Über mich Studium der Wirtschaftsinformatik in Paderborn Seit 15 Jahren Softwareentwicklung, Beratung und Administration im Lotus (IBM) Umfeld Gründer und Geschäftsführer der hedersoft GmbH Erreichbar unter:  mail: hschmidt(at)hedersoft(dot)de  twitter: schmhen / planetntf / hedersoft  facebook: schmhen  Skype: hs.smi  Blog: www.schmhen.de / www.planetntf.de  Xing, LinkedIn
  3. 3. Agenda Herausforderung Ansatz: Responsive Web Design (RWD) Frameworks Twitter Bootstrap Bootstrap und Xpages It‘s demo time! Vorteile und Nachteile von RWD, Ausblick Offene Diskussion
  4. 4. Herausforderung Bisher Web Entwicklung für Desktop Browser 2007 Einführung des iPhone, 2010 folgt das iPad, 2008 kommt Android Klassische Browseranwendungen nur bedingt für Smartphones und Tablets geeignet Entwicklung separater Browser GUIs oder Apps = Hoher Entwicklungs- und Wartungsaufwand IDEE: Anwendungen skalieren automatisch auf verschiedenen Endgeräten, aber wie?
  5. 5. Herausforderung Möglichkeit 1: Erkennen des UserAgent  Nachteil: User Agent kann in den meisten Browsern umgestellt werden  Nachteil: User Agent sagt nur bedingt etwas über die Darstellungsmöglichkeiten eines Endgeräts  Nachteil: Es gibt so viele UserAgents, für welche Entwickeln wir? Möglichkeit 2: Erkennen der Fenstergröße  Das klingt doch gut, und was dann?
  6. 6. Ansatz: RWD Responsive Web Design RWD  Ethan Marcotte hat den Begriff 2010 eingeführt auf „A List Apart“ (Issue No. 306)  Ziel: Seiten gestalten, die auf allen Viewports vernünftig skalieren und ansprechend aussehen  Element 1: Fluid Grids  Element 2: Fluid Images  Element 3: Media Queries
  7. 7. RWD: Fluid Grids Fluid Grids  IE hat Schuld!  Problem: IE skaliert Fonts nicht, wenn diese in px angegeben werden  Lösung: Fonts proportional angeben mit em! Zielgröße in px / Containergröße in px = Größe in em Beispiel: 24px / 16px = 1.5em  Hey, was für Schrift gilt, das geht doch bestimmt auch mit anderen Elementen, oder?
  8. 8. RWD: Fluid Grids Fluid Grids  Annahmen: • 7 Spalten à 124px + Spaltenabstand 20px = 988px • Bei Schriftgröße von 16px ergibt sich also: 988px / 16px = 61,75em => max-width:61.75em  Damit skaliert die Seite bei Fenstergrößen < 988px und lässt saubere Ränder bei Fenstergrößen > 988px!  ABER: Das ist doch trotzdem noch ein Fixed Grid mit festen Pixelangaben, die nur in em angegeben werden!  Wir wollen die Elemente aber nicht nur proportinal zur Schriftgröße angeben, sondern auch das Verhältnis der Elemente untereinander!
  9. 9. RWD: Fluid Grids Fluid Grids  Die Lösung: Prozentuale Größenangaben!  Wie können die Größen berechnet werden? Zielgröße in px / Containergröße in px = Größe in % Moment, das hatten wir doch schon!  Also:
  10. 10. RWD: Fluid Grids Fluid Grids  Grid im Grid: Die Containergröße muss angepasst werden!
  11. 11. RWD: Fluid Images Die Seiten skalieren nun wunderbar, aber Bilder nicht! Ein kleiner Trick hilft in modernen Browsern: ABER: IE vor Version 8 und FF vor Version 3 auf Windows Plattformen machen nicht mit! Nun ist guter Rat teuer…
  12. 12. RWD: Fluid Images Firefox können wir nicht retten! Wir können aber davon ausgehen, dass FF < V3.0 im Promillebereich liegt. Für den IE liefert MS die Lösung: AlphaImageLoader (ab IE 5.5) Ein JavaScript, dass beim Laden einer Seite ausgeführt wird, setzt den AlphaImageLoader Filter auf alle Bilder
  13. 13. RWD: Media Queries Das Skalierungsproblem haben wir im Griff. Eine gut skalierende für den Desktop optimierte Seite passt aber nicht auf ein Smartphone! Elemente der Seite müssen neu organisiert werden Die Lösung: Media Queries! Mit CSS 2.1 Einführung von Media Types Seit CSS3 Erweiterung der Types zu Media Queries
  14. 14. RWD: Media Queries Media Types:  all, braille, embossed, handheld, print, projection, screen, speech, tty, tv Media Queries = Media Types + Bedingungen  width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
  15. 15. RWD: Media Queries Was haben wir gewonnen?  Durch Media Queries können die Fenstergrößen abgefragt und CSS dynamisch für die verschiedenen Größen geladen werden!  Damit ist unsere Eingangsbedingung erfüllt  Seiten können auf verschiedenen Fenstergrößen anders dargestellt werden  Elemente können ein- und ausgeblendet werden  Elemente können neu organisiert werden
  16. 16. RWD Beispiel: Collaboration Today
  17. 17. Frameworks Mit dem jetzigen Wissen können wir ein eigenes Framework bauen Es gibt aber bereits einige Frameworks, die frei genutzt werden können Beispiele:  twitter Bootstrap, Skeleton, Foundation ZURB, Less Framework, Golden Grid System, Amazium, MQ Framework, Semantic Grid System, 1140px CSS Grid, 320 and up, The Golidlocks Approach, inuit.css, BluCSS, Gridless, Columnal, Fluid Baseline Grid, …
  18. 18. Frameworks Am weitesten verbreitet sind twitter Bootstrap, Skeleton und Foundation ZURB
  19. 19. Frameworks Entscheidung: twitter Bootstrap  Sehr weit verbreitet  Apache 2.0 Lizenz  Großer Fundus an Entwicklerinformationen • Bootstrap Homepage, Bootstrap Blog, Private Blogs, StackOverflow, …  Hat viele UI Elemente und Widgets an Bord  Optisch ansprechend und anpassbar  Gute Beschreibung für Einsteiger
  20. 20. twitter Bootstrap Hintergrund Was brauchen wir und wie ist Bootstrap aufgebaut? Grundgerüst – Die Grid Struktur Basis CSS UI Komponenten JavaScript Customize
  21. 21. twitter Bootstrap Hintergrund  Internes Projekt bei twitter  Inkonsistenzen projektübergreifend in den Griff bekommen  Open Source seit August 2011  Im Februar 2012 populärstes GitHub Projekt  Unterstützt alle gängigen Browser  Unterstützt HTML5 und CSS3  Seit Version 2.0 mit RWD Integration
  22. 22. twitter Bootstrap Was brauchen wir und wie ist Bootstrap aufgebaut?  Herunterladen des ZIP Files mit kompilierten Dateien oder Sourcen  Es gibt: • Das Grundgerüst • Basis CSS Elemente • Komponenten • JavaScript Plugins (jQuery basiert) • RWD CSS (bootstrap-responsive.css)
  23. 23. twitter Bootstrap Grundgerüst – Die Grid Struktur  HTML5 wird als DocType benötigt!  Fixed und Fluid Grids mit 12 Spalten mit 940px ohne RWD Features. Mit RWD Features 724px und 1170px.
  24. 24. twitter Bootstrap Grundgerüst – Die Grid Struktur  Spalten können versetzt werden (Offset)  Spalten können eingebettet werden (Nested)
  25. 25. twitter Bootstrap Grundgerüst – Die Grid Struktur  Layouts • Fixed Layout (940px!) • Fluid Layout
  26. 26. twitter Bootstrap Grundgerüst – RWD  RWD ist bei Bootstrap nicht automatisch aktiviert!  Bootstrap-responsive.css muss eingebunden werden  Folgende Devices und Bildschirmgrößen werden unterstützt
  27. 27. twitter Bootstrap Grundgerüst – RWD  Die zugehörigen Media Queries  CSS Klassen zum Anzeigen und Verbergen von Elementen auf unterschiedlichen Devices
  28. 28. twitter Bootstrap Basis CSS  Typographie • <h1> - <h6> • Default font-size ist 14px mit einer Zeilenhöhe von 20px • <small>, <strong> und <em> für kleine, fette und kursive Zeichen • .text-left, .text-center und .text-right • Vordefinierte Textfarben durch CSS Klassen
  29. 29. twitter Bootstrap Basis CSS  Typographie • Addressformatierung mit <address> • Listenformatierung: .unstyled, .inline, <dl><dt><dd>, .dl-horizontal  Code • <code>, <pre>, .pre-scrollable (max-height: 350px)  Tables • .table, .table-striped, .table-bordered, .table-hover, .table-condensed, .success, .error, .warning, .info
  30. 30. twitter Bootstrap Basis CSS  Forms • .checkbox, .radio, .inline • .input-prepend, .input-append, .add-on • Buttons statt Text • Inputs in der Größe anpassen • Auch mit Grid Eigenschaften!
  31. 31. twitter Bootstrap Basis CSS  Buttons (sehen im IE9 anders aus!)
  32. 32. twitter Bootstrap Basis CSS  Images  Icons (von Glyphicons, Lizenz: CC BY 3.0) • 140 Icons in schwarz und weiß
  33. 33. twitter Bootstrap Komponenten  Button groups  Progress Bar  Button dropdowns  Modals (Dialoge)  Navigation (tabs, pills, lists)  Dropdowns  Navbar  Tooltips  Labels  Popovers  Badges  Accordion  Page header und Hero Unit  Carousel  Thumbnail  Typeahead  Alerts
  34. 34. twitter Bootstrap Komponenten  Dropdowns  Button groups
  35. 35. twitter Bootstrap Komponenten  Button Dropdowns  Navs
  36. 36. twitter Bootstrap Komponenten  Navbar } RWD
  37. 37. twitter Bootstrap Komponenten  Labels und Badges
  38. 38. twitter Bootstrap Komponenten  Alerts und Progress Bars Dismiss benötigt jQuery Plugin! Ab IE10 und Opera 12!
  39. 39. twitter Bootstrap Javascript (jQuery)  Transitions  Alert  Modals (Dialoge)  Button  Dropdown  Collapse  Scrollspy  Carousel  Tab  Typeahead  Tooltip  Affix  Popover
  40. 40. twitter Bootstrap Javascript  Modals (Dialoge)
  41. 41. twitter Bootstrap Javascript  Tooltips und Popovers
  42. 42. twitter Bootstrap Javascript  Carousel
  43. 43. twitter Bootstrap Customizing - Komponenten
  44. 44. twitter Bootstrap Customizing – jQuery Plugins
  45. 45. twitter Bootstrap Customizing – Variablen
  46. 46. Bootstrap und XPages Was brauchen wir?  bootstrap.css, bootstrap-responsive.css, bootstrap.js, jquery.js, Icons  Neue Datenbank  Bei lokaler Entwicklung Anonymous = Manager  Falls Elemente der Extension Library verwendet werden, so muss diese lokal und ggf. auf dem Server installiert sein Wie starten wir?  Datenbank in DDE öffnen  Datenbankeinstellungen anpassen (u.a. HTML 5!)  Bootstrap Elemente einbinden  Neue Xpage erstellen und los geht‘s!
  47. 47. Bootstrap und XPages It‘s Demo time!
  48. 48. RWD: Vor- und Nachteile Nachteile  Vollständig Client-basiert • Kompletter Download nötig / Ladezeiten • CSS steuert Darstellung  Ältere Mobile Browser unterstützen teilweise kein HTML5 / CSS3  Nicht für alle Applikationen geeignet
  49. 49. RWD: Vor- und Nachteile Vorteile  One Design to rule them all  Schnellere Entwicklungszeiten  Einfacherer Wartung  Spart Zeit und Geld!  Besseres SEO durch eine URL  Social Sharing mit einer URL  Web Analyse / Tracking  Unterstützung neuer Endgeräte
  50. 50. RWD: Ausblick Ist RWD schon das Ende der Fahnenstange?  NEIN! RESS steht bereits in den Startlöchern  Responsive Design and Server Side Components  Client Feature Detection  Laden unterschiedlicher Module für unterschiedliche Endgeräte  Mustache, Detector, WURFL, DeviceAtlas
  51. 51. RWD: Zusammenfassung 2010 von Ethan Marcotte beschrieben 2011 Twitter Bootstrap Open Sourced Bootstrap seit Version 2.0 als RWD Verfügbar Bootstrap lässt sich ohne weiteres in Xpages einbinden RESS steht als nächste Evolutionsstufe von RWD bereits in den Startlöchern
  52. 52. Fragen / Diskussion
  53. 53. Quellenverzeichnis http://responsive.vermilion.com/compare.php http://www.lukew.com/ff/entry.asp?1392 http://www.lukew.com/ff/entry.asp?1509 http://dmolsen.com/2012/02/21/ress-and-the-evolution-of-responsive-web-design/ http://twitter.github.com/bootstrap/customize.html http://www.getskeleton.com/ http://foundation.zurb.com/ http://en.wikipedia.org/wiki/Responsive_web_design http://de.wikipedia.org/wiki/Responsive_Design https://www.redant.com/articles/design-and-build/the-anywhere-web-the-pros-and-cons-of- responsive-web-design/ http://smallbusiness.yahoo.com/advisor/pros-cons-responsive-design-023558855.html http://www.miamiherald.com/2013/01/06/3168547/weigh-pros-cons-of-responsive.html http://thepam.blogspot.de/2011/08/pros-and-cons-of-responsive-web-design.html http://dapurpixel.com/2012/02/28/responsive-web-design-pros-and-cons/ https://dev.twitter.com/blog/bootstrap-twitter http://en.wikipedia.org/wiki/Twitter_Bootstrap http://webexpedition18.com/articles/responsive-css-frameworks/ http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/ http://webdesignledger.com/tools/8-useful-responsive-css-frameworks http://alistapart.com/article/responsive-web-design http://alistapart.com/article/fluidgrids http://unstoppablerobotninja.com/entry/fluid-images

×