von Ralf Hofacker und Sebastian Wolf
http://ub.unibi.de/kwirwd2017
21.04.2017
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.
Anteil mobiler Nutzer mit kleineren Displays wächst ständig, ebenso die Anzahl der Nutzer mit sehr großen Displays
Dieses Bild zeigt nur die mobilen Endgeräte von Samsung (2013)
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
<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>
/* 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;}
}
Im Bild
<span class="hidden-xs">
rechts
</span>
<span class="visible-xs">
<a href="#figure">unten</a>
</span>
sehen Sie …
@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;}
}
<h1 class="header-brand">
<a href="https://www.ub.uni-bielefeld.de/">
<img src="/graphics/texte/headlines/text_unibib.gif">
</a>
</h1>
Fotos (im Header, auf den "Portal"-Seiten oder auf Inhaltsseiten) passen sich der Größe des Browserfensters an
Auf kleinen Displays wird ein zusätzlicher Scrollbalken eingeblendet, wenn der Platz für die Tabelle nicht ausreicht
Wird auf Smartphones "eingeklappt"
Quelle: http://wpwebsites.co.nz/google-loves-mobile-responsive-websites/
Weitere Links in unserer Linksammlung unter http://ub.unibi.de/rwd
Quelle: http://zurb.com/article/926/digital-comics-not-responsive-yet