UB Bielefeld: Responsive Bibliotheks-Webseiten im Corporate Design der Universität auf der Basis von Bootstrap

Grundlagen des "Responsive Design"

Grundlagen

Beim Responsiven Design wird per CSS / Javascript gesteuert, wie Elemente auf einer Webseite auf bestimmten Browserfenstergrößen dargestellt werden sollen.

Responsive Webseiten können somit auf die Eigenschaften (Größe des Displays) des Endgeräts (Smartphones, Tablets, Desktop-PC …) reagieren.

Breakpoints, Viewports, Media Queries

Design und/oder Inhalte ändern sich an bestimmten Punkten (Breakpoints) und passen sich der Größe des Displays / des Browserfensters (Viewport) an
Über spezielle Befehle ("Media Queries") in der CSS-Datei werden Bereiche veändert, ein- oder ausgeblendet
Mit Javascript können z.B. Menüs verändert werden
(aus- und einklappen)

Warum überhaupt
Responsives Webdesign?

Wachsende Vielfalt an Displaygrößen

4K-Monitore (27"+)
Full-HD-Monitore (22-27")
Kleinere Monitore (17-22")
Laptops (12-17")
Netbooks / Tablets (7-12")
Große Smartphones (5-7")
Kleine Smartphones (3-5")
Smartwatches (< 2")

Anteil mobiler Nutzer mit kleineren Displays wächst ständig, ebenso die Anzahl der Nutzer mit sehr großen Displays

… aber wir hatten doch schon eine
"mobile" Website?

Berücksichtigte nur kleine / mittelgroße Smartphones
Für große Smartphones / Tablets ungeeignet
Veraltetes Framework
Umfasste nur wenige Seiten
Doppelter Pflegeaufwand

Basis-Quelltext der Webseite

    <body>
    
<div class="container">

 <header>
 
  <div class="row">
  
   <div class="hidden-xs hidden-sm col-md-offset-1 col-md-11 col-lg-offset-2 col-lg-10">
    … Logoverbund md / lg …
   </div>
   
   <div class="col-xs-10 col-sm-offset-1 col-sm-11 hidden-md hidden-lg">
    … Logoverbund xs / sm …          
   </div>
   
  </div>
  
 </header>
  
 <main>
  
  <nav class="navbar navbar-default col-xs-16 col-sm-4 col-md-offset-1 col-md-3">
  … Navigation …
  </nav>
    
  <article class="col-xs-16 col-sm-11 col-md-8 col-lg-offset-1 col-lg-6">
   … Inhaltsbereich …
  </article>
    
  <aside class="col-xs-16 col-sm-15 col-md-3 col-lg-2">
   … Seitenbereich …
  </aside>
    
 </main>
  
</div>

<footer class="footer">

 <div class="container">
 
  <div class="col-sm-6 col-md-4 col-lg-offset-1 col-lg-3">
   … Footer links …
  </div>
  
  <div class="col-sm-4 col-md-8 col-lg-7">
   … Footer mittig …
  </div>
  
  <div class="col-sm-6 col-md-4 col-lg-offset-2 col-lg-3">
   … Footer rechts …
  </div>
  
 </div>
 
</footer>
  
</body>

Und sonst …

ca. 700 Webseiten geändert / neu erstellt: Vergleich alt - neu
Schönere Formulare: Vergleich alt - neu
"Data Tables" (sortier- und durchsuchbar): Vergleich alt - neu
Telefonnummern verlinkt: Vergleich alt - neu
Icon-Schriftart "Font Awesome" statt grafischer Icons: Vergleich alt - neu
Umstellung auf https
(Kleine) Fehler behoben und aufgeräumt ;-)

Weitere Schritte …

Neue (responsive) Seiten für die Testothek
Responsives Ausleihkonto
Responsiver Katalog.plus!
Reponsive Seiten zum Forschungsdatenmanagement
UB-Suche, Blog, …

Links

Weitere Links in unserer Linksammlung unter http://ub.unibi.de/rwd

Vielen Dank für Ihre Aufmerksamkeit!

Quelle: http://zurb.com/article/926/digital-comics-not-responsive-yet

Kolloquium Wissensinfrastruktur - SoSe 2017

Responsive
Bibliotheks-
Webseiten

im Corporate Design der Universität
auf der Basis von Bootstrap

Grundlagen des "Responsive Design"

Grundlagen

Breakpoints, Viewports, Media Queries

Zwei Arten von "Responsive Design"

Warum überhaupt
Responsives Webdesign?

Wachsende Vielfalt an Displaygrößen

Wachsende Vielfalt an Displaygrößen

Wachsende Vielfalt an Displaygrößen

… und Auflösungen

… aber wir hatten doch schon eine
"mobile" Website?

Wichtige Elmente
unseres Responsiven Designs
mit Bootstrap

Bootstrap

Bootstrap

Bootstrap

Eigene Ergänzungen

Basis-Quelltext der Webseite

Beispiel 1

CSS

HTML

Beispiel 2

CSS

HTML

Responsive Grafiken

Responsive / Adaptive Tabellen

Navigation

Und sonst …

Testen, Testen, Testen

So nicht …

… sondern so

Am besten: Viele (!) Originalgeräte besorgen

Weitere Schritte …

Links

Vielen Dank für Ihre Aufmerksamkeit!

Kolloquium Wissensinfrastruktur - SoSe 2017

ResponsiveBibliotheks-Webseiten

im Corporate Design der Universitätauf der Basis von Bootstrap

Grundlagen des "Responsive Design"

Grundlagen

Breakpoints, Viewports, Media Queries

Zwei Arten von "Responsive Design"

Warum überhauptResponsives Webdesign?

Wachsende Vielfalt an Displaygrößen

Wachsende Vielfalt an Displaygrößen

Wachsende Vielfalt an Displaygrößen

… und Auflösungen

… aber wir hatten doch schon eine"mobile" Website?

Wichtige Elmenteunseres Responsiven Designsmit Bootstrap

Bootstrap

Bootstrap

Bootstrap

Eigene Ergänzungen

Basis-Quelltext der Webseite

Beispiel 1

CSS

HTML

Beispiel 2

CSS

HTML

Responsive Grafiken

Responsive / Adaptive Tabellen

Navigation

Und sonst …

Testen, Testen, Testen

So nicht …

… sondern so

Am besten: Viele (!) Originalgeräte besorgen

Weitere Schritte …

Links

Vielen Dank für Ihre Aufmerksamkeit!

Responsive
Bibliotheks-
Webseiten

im Corporate Design der Universität
auf der Basis von Bootstrap

Warum überhaupt
Responsives Webdesign?

… aber wir hatten doch schon eine
"mobile" Website?

Wichtige Elmente
unseres Responsiven Designs
mit Bootstrap