Mit Responsive Design passt sich das Layout allen Bildschirmgrößen an
Webdesigner arbeiten gern mit Symbolen. Eine kleine Lupe im Suchfeld, ein Pfeil, ein Warenkorbsymbol. Jedes dieser Symbole ist ein Bildelement, das entweder per image-Tag oder per CSS (background-image) eingebunden wird.
Diese Bildchen sind in der Regel sehr klein, nur ein paar Kilobyte gross. Dadurch fallen sie beim Laden der Seite kaum ins Gewicht. Naja, bisher war das so.
Es gibt sehr wirkungsvolle Methoden, Bilddaten schlank zu halten. Die Stichwörter dazu sind die richtige Bildkompression, CSS3-Effekte (der Artikel dazu ist in Arbeit) und das Grafikformat SVG. SVG ist die Abkürzung für „Scalable Vector Graphics“.
WeiterlesenGestern bin ich auf einen interessanten Artikel auf filamentgroup.com gestoßen, in dem es um das Problem der Bildgrößen im Responsive Design geht. Hier war ausnahmsweise nicht von Javascript- und PHP-Tricks die Rede, mit denen man Bilder in unterschiedlichen Größen ausliefern kann. Im Artikel geht es – ganz altmodisch – um Bildkompression.
Eigentlich ein alter Hut, aber einer, der es verdient hat, aus der Mottenkiste herausgeholt zu werden.
Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen. Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein: meta name=“viewport“ content=“width=device-with“ Diese Anweisung ist weit […]
WeiterlesenZurzeit teste ich ein neues WordPress-Theme mit einem Responsive Design in verschiedenen Browsern. Bei diesem Theme arbeite ich mit HTML5, CSS3 und Media Queries. Moderne Browser können diese Angaben gut lesen, ältere IE-Versionen aber haben damit Probleme. IE7 und IE8 können weder HTML5-Syntax noch Media Queries interpretieren.
WeiterlesenInhalt von SlideShare anzeigen Hier klicken, um den Inhalt von SlideShare anzuzeigen. Erfahre mehr in der Datenschutzerklärung von SlideShare. Inhalt von SlideShare immer anzeigen Inhalt direkt öffnen View more presentations from Steve Fisher View on Slideshare: Responsive Web Design Process
WeiterlesenWer sich mit Responsive Web Design beschäftigt landet früher oder später bei der Frage: Mit welchen Breakpoints soll ich arbeiten? Breakpoints definieren die Stellen, an denen sich das Layout einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich großen Displays dargestellt werden sollen.
WeiterlesenDen Begriff „Mobile First“ hat Luke Wroblewski geprägt. Dahinter steht der Gedanke, dass man beim Entwickeln eines Webdesigns mit der mobilen Version anfangen sollte.
WeiterlesenQuellen zum Responsive Webdesign James Young hat auf seinem Blog eine Liste seiner Bookmarks zum Thema Responsive Webdesign und Responsive Development gepostet. Es sind ein paar interessante Sachen dabei.
WeiterlesenWenn man eine Website mit einem Responsive Design umsetzen will, hat man gut zu tun. Was auf den ersten Blick einfach aussieht, ist auf den zweiten Blick ganz schön komplex.
Was ich mich dabei immer wieder gefragt habe ist: Wozu eigentlich die Umstände mit dem flexiblen Raster (Fluid Grid)?
Die Arbeit mit Prozentangaben ist kompliziert und man muss das Verhalten des Layouts aufwändig testen. Würde es denn nicht reichen, nur mit Media Queries zu arbeiten? Dann könnte man beim festen Layout bleiben und die Seite sieht trotzdem auf unterschiedlichen Geräten gut aus.
Inhalt von SlideShare anzeigen Hier klicken, um den Inhalt von SlideShare anzuzeigen. Erfahre mehr in der Datenschutzerklärung von SlideShare. Inhalt von SlideShare immer anzeigen Inhalt direkt öffnen Eine Präsentation von Bryan Rieger Aus dieser (sehr informativen aber auch unterhaltsamen) Präsentation habe ich gelernt, dass es nicht nur um iPhones und Android-Smartphones geht, wenn von „Mobile“ die […]
Weiterlesen