responsive webdesign

RepsonsiveWebdesignTipps, Tricks und Fallstricke

InhaltverzeichnisMedia QueriesJavaScriptSVGResponsive ImagesFallstrickeUmsetzungen

Media Queries

screen and (max-width: 568px) /* Mobile */ screen and (max-width: 768px) /* Tablet Portrait */ screen and (max-width: 1024px) /* Tablet Landscape */ screen and (min-width: 1024px) /* Desktop */

Verwendung in SASS $mobile: "(max-width: 568px568px)"; $portrait: "(max-width: 768px)"; $landscape: "(max-width: 1024px)"; $desktop: "(min-width: 1024px)";

.home { #header { border-bottom: 0; } @media #{$portrait} { #header { margin-top: 1em; } } }

Reihenfolge1. Desktop2. Tablet Landscape3. Tablet Portrait4. Mobile

Verwendung inJavaScript

function defineViewport(){ var width = $(window).width();

switch (true) { case (width <= 568): viewport = "mobile"; break; case (width <= 768): viewport = "portrait"; break; case (width <= 1024): viewport = "landscape"; break; default: viewport = "desktop"; break; } }

JavaScript

Binding $(function(){ /* initial rendering */ defineViewport(); });

Binding $(function(){ /* initial rendering */ defineViewport();

/* viewport-switchting rendering */ $(window).bind('resize orientationchange', function() { defineViewport(); }); });

In Viewport Function if(inViewport(['mobile','portrait'])) { toggleNav('bind'); … }

In Viewport – The Magic/* Checks for viewport cases - Strings and Arrays (default = array) */ function inViewport(viewports){ if(typeof viewports == 'string'){ viewports = new Array(viewports); } return !!($.inArray(viewport, viewports) > -1); }

DOM Manipulation var extraSearch = $('#header .produktsuche');

if(inViewport(['mobile','portrait']) && extraSearch.length) { $('.footer').append(extraSearch); }

HTML <img src="http://www.hsp.biz/static/images/logo.svg" data-alt="http://www.hsp.biz/static/images/logo.gif" width="119" height="108" alt="" />

Modernizr $(function(){ if (!Modernizr.svg || !Modernizr.inlinesvg){ var SvgImg = $('img[src$=svg]');

$.each(SvgImg, function(){ var el = $(this), alt = el.attr("data-alt");

if(alt.length){ el.attr("src", alt); } }); } });

Responsive Images

HTML <img src="kleines-bild.jpg" data-desktop="grosses-bild.jpg" data-mobile="kleines-bild.jpg" alt="" />

JavaScript /* mobile first images */ function responsiveImg() { var image = $('img[data-desktop]');

if(inViewport("mobile", "portrait")){ image.each(function () { $(this).attr('src', $(this).data('mobile')); }); } else if (inViewport("landscape", "desktop")){ image.each(function () { $(this).attr('src', $(this).data('desktop')); }); } }

Fallstricke

JavaScript Viewport ermitteln

JavaScript Match Media

Nä!CSS3-Transitions zum Ermitteln der Viewportgröße

funktionieren in älteren und uncoolen Browsern nichtund können eine komplette Webseite zerstören.

Ehrlich! Ich hab's getestet.

jQuery UI NavigationSlideDown anstatt Fade ✓Mouseover-Events ✓Scroll-Events / Overflow: hidden ✓Besonders auf dem Blackberry und Windows Phonetraten Probleme mit Toch-Events auf ✓

Position: Fixed

responsive webdesign

Technology