WordPress Blog
Alle Artikel zu
Responsive Design
-
Klein und scharf: Iconfonts
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…
-
Responsive Images: Ladezeit sparen mit Vektorgrafiken (SVG)
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“.
-
Bilder für Responsive Designs effizient komprimieren
Gestern 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,…
-
Media Queries: device-width & width – wo ist der Unterschied?
Ü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…
-
Responsive Design: CSS für den Internet-Explorer 7 und 8
Zurzeit 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.
-
Responsive Web Design Process
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 View more presentations from Steve Fisher View on Slideshare: Responsive Web Design Process
-
Neue Ideen zu Breakpoints im Responsive Web Design
Wer 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.
-
„Mobile First“ – Responsive Design von unten
Den Begriff „Mobile First“ hat Luke Wroblewski geprägt. Dahinter steht der Gedanke, dass man beim Entwickeln eines Webdesigns mit der mobilen Version anfangen sollte.
-
Linktipp Quellen Responsive Design
Quellen 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.
-
Responsive Design: Welche Vorteile hat der flexible Raster (Fluid Grid)?
Wenn 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…
-
Rethinking The Mobile Web
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…