Tips und Tricks zum Thema Responsive Webdesign

responsive webdesign tips and tricks.md

#Responsive Web Design

Einleitung

Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten. 👌☺️

Viewport und (Normalize)

<!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Vereinheitlichung der Styles, da jeder Browser unterschiedliche Standards nutz --> 
<link rel="stylesheet" href="/css/normalize.css">

Media Queries

Media Queries je nach Website anpassen und besser keine fixen Pixelwerte verwenden. Somit selber entscheiden, wann sich das Layout ändert (durch ausprobieren)!

/* Media Queries hier für Screens / ≥ 568px */
@media screen and (max-width: 35.5em) {
    .navigation .inhalt {
      float: none;
      width: auto;
    }
    
    /* Liste innerhalb der Navigation ändern */
    .navigation li {
      display: inline-block;
    }
}

Tools für Media Queries

Firefox: Extras, Webentwickler, Bildschirmgrößen testen (Nachteil: Metainfos werden nicht interpretiert)

-> Firefox OS Simulator oder Opera Mobile Emulator (verschiedene Devices zur Auswahl)

Chrome: Hat ein Tool, wo man schlechte Netzwerkverbindungen simulieren kann

Clearfix: Blogbeitrag 2015

/*
Mit CSS gefloatete Elemente werden aus dem Standard-Dokumentfluss eines HTML-Dokuments entfernt.
Andere Elemente verhalten sich daher so, als wären die gefloateten Elemente nicht vorhanden und
rutschen im Layout häufig an eine unerwünschte Stelle. Um Floats aufzuheben und somit das oben 
beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
*/
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
} 

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* Für den IE6 und IE7 */
}

Texte und Fonts

1. Schriftgrößen mit 'em' (1em= 16px)
2. @media fontsize: 100%
3. Gute JS-Plugins: Slaptext und FitText
4. Responsive Data Tables

Responsive Videos

Mit FitVids.js werden die Videos responsive eingebunden. Link zur offiziellen Homepage

######Wie kann ich es ausprobieren?

Link zu: jQuery