Kolloquium Wissensinfrastruktur - SoSe 2017

Responsive
Bibliotheks-
Webseiten

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

von Ralf Hofacker und Sebastian Wolf

http://ub.unibi.de/kwirwd2017

21.04.2017

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)

Zwei Arten von "Responsive Design"

  • Adaptive: Innerhalb eines Größenbereichs nicht veränderbar (bei uns im Einsatz)
  • Fully Responsive: Auch innerhalb eines Größenbereichs veränderbar

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

Wachsende Vielfalt an Displaygrößen

Quelle: https://en.wikipedia.org/wiki/Display_size

Wachsende Vielfalt an Displaygrößen

Dieses Bild zeigt nur die mobilen Endgeräte von Samsung (2013)

… und Auflösungen

Quelle: https://en.wikipedia.org/wiki/Display_resolution

… 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

Wichtige Elmente
unseres Responsiven Designs
mit Bootstrap

Bootstrap: Stiefelriehmen, Ladeprogramm, selbsterzeugender Kreislauf

Bootstrapping (Informatik), ein Prozess, der aus einem einfachen System ein komplexeres aktiviert.

Bootstrapping (Programmierung), ein Prozess, mit einfachen Entwicklungswerkzeugen mächtigere zu entwickeln.

https://de.wikipedia.org/wiki/Bootstrapping

Bootstrap

  • CSS-Framework (von Twitter entwickelt)
  • Umfasst CSS- und Javascript-Datei(en) mit "Grundbausteinen"
  • CSS basiert auf Less (CSS-Erweiterung bei der konkrete Angaben durch Variablen ersetzt werden können)
  • Javascript basiert auf dem Standard-Framework jQuery
  • Webfont "Glyphicons" (bei uns nicht im Einsatz, wir verwenden Font Awesome)

Bootstrap

  • Bietet viele "vorgefertigte" Design-Elemente
  • Berücksichtigt Browser-Unterschiede
  • Bietet standardmäßig vier Breakpoints (xs, sm, md, lg)
  • Unterteilt eine Seite standardmäßig in 12 gleich breite "Spalten" (12er Grid)
  • Unterstützt "Adaptive" und "Fully Responsive" Design

Bootstrap

  • Lässt sich über Konfigurationsdatei oder per Webseite anpassen
  • Bei Änderungen über "Customize Bootstap" werden Neuerungen ggf. automatisch integriert
  • Ist sehr weit verbreitet
  • Wird laufend weiter entwickelt
  • Bereits auf den PUB-Webseiten im Einsatz ("Know How" vorhanden)

Eigene Ergänzungen

  • "lg"-Breakpoint geändert (von 1200px auf 1340px)
  • Weiteren Breakpoint hinzugefügt (xxs = < 480 Pixel)
  • 16 statt 12 "Spalten" (passt besser zum Corporate-Design-Kopf)
  • Designs vorgefertigter Elemente (Tabellen, Listen, Formulare) angepasst
  • Farben und Schriften an das Corporate Design angepasst
  • Elemente (z.B. flexible Positionierung des "Footer") ergänzt

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>

Beispiel 1

CSS

    /* Bildschirme bis 767 Pixel */
    
@media screen and (max-width:767px){
.hidden-xs{display:none;}
.visible-xs{display:inline;}
}

/* Bildschirme ab 768 Pixel */

@media screen and (min-width:768px){
.hidden-xs{display:inline;}
.visible-xs{display:hidden;}
}

HTML

    Im Bild
 <span class="hidden-xs">
  rechts
 </span>
 <span class="visible-xs">
  <a href="#figure">unten</a>
 </span>
sehen Sie …

Beispiel

Beispiel 2

CSS

    @media screen and (max-width:767px){
.header-brand{padding:7px 5px;}
}

@media screen and (max-width:479px){
.header-brand{font-size:12px;}
.header-brand img{width:140px;}
}

@media screen and (min-width:480px) and (max-width:767px){
.header-brand{font-size:20px;}
.header-brand img{width:200px;}
}

@media screen and (min-width:768px){
.header-brand{padding-bottom:27px;text-align:right;}
}

@media screen and (min-width:768px) and (max-width:991px){
.header-brand{font-size:18px;padding-top:88px;padding-right:275px;}
:lang(en) .header-brand{padding-bottom:29px;}
.header-brand img{width:170px;}
}

@media screen and (min-width:992px) and (max-width:1339px){
.header-brand{font-size:20px;padding-top:126px;padding-right:480px;}
:lang(en) .header-brand{padding-bottom:30px;}
.header-brand img{width:235px;margin-top:-5px;}
}  

@media screen and (min-width:1340px){
.header-brand{font-size:24px;padding-top:177px;padding-right:550px;}
:lang(en) .header-brand{padding-left:40px;}
.header-brand img{margin-top:-10px;}
}

HTML

    <h1 class="header-brand">
 <a href="https://www.ub.uni-bielefeld.de/">
  <img src="/graphics/texte/headlines/text_unibib.gif">
 </a>
</h1>

Beispiel

Responsive Grafiken

Fotos (im Header, auf den "Portal"-Seiten oder auf Inhaltsseiten) passen sich der Größe des Browserfensters an

Beispiel

Responsive / Adaptive Tabellen

Auf kleinen Displays wird ein zusätzlicher Scrollbalken eingeblendet, wenn der Platz für die Tabelle nicht ausreicht

Beispiel

Navigation

Wird auf Smartphones "eingeklappt"

Beispiel

Und sonst …

Testen, Testen, Testen

So nicht …

Quelle: http://wpwebsites.co.nz/google-loves-mobile-responsive-websites/

… sondern so

  • Fenstergröße im Browser ändern
    (Strg+Shift+M in Firefox)
  • Tools / Emulatoren, z.B. "Am I responsive"?
  • Browser-Addons zur Simulierung
    verschiedener Viewports / Geräte

Beispiel

Am besten: Viele (!) Originalgeräte besorgen

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