Beiträge mit Schlagwörtern‘Media Queries’

Basis-Vorlage für Responsive Webdesign – CSS3 Media Queries

Das Thema Responsive Webdesign hört man inzwischen an jeder Ecke im Webdeveloper-Bereich. Eigentlich ist das Thema ziemlich einfach abgearbeitet, doch man kann sich je nach Anwendungszweck schon etwas schwerer tun. Vor allem dann, wenn es um eine bestehende Website geht, die vielleicht ohne ein Grid-System auskommen muss. Doch darum soll es hier heute nicht gehen. Viel mehr steht für mich die Leichtigkeit im Vordergrund, mit der man selbst einen einfachen WordPress-Theme oder eine einfache Single-Page auch für mobile Geräte angemessen lauffähig macht. weiterlesen…

Das Apple MacBook Pro Retina und die CSS3 Media Queries

Wie ihr sicher mitbekommen habt, habe ich vor ein paar Tagen das CSS3-Media-Queries-Template „rausgehauen“. Der liebe Caschy war nun so nett und hat die Einstellungen einmal an seinem neuen Apple MacBook Pro Retina getestet. Leider ignoriert das Retina-Book die Angabe „min-device-width“ erfolgreich und „min-width“ bringt bei der angezeigten Auflösung von 1440×900 Pixel natürlich auch herzlich wenig (das Notebook hat zwar technisch 2880×1800 Pixel, angezeigt werden virtuell jedoch nur 1440×900 Pixel; wie beim Retina-iPhone mit 960×640 Pixel zu 480×320 Pixel). Lange Rede und kurzer Sinn: das Retina-Book reagiert nur auf folgende Angaben, die ich natürlich im Artikel auf Deutsch, im Artikel auf Englisch, der Demo sowie in der Download-CSS bereits angepasst habe. weiterlesen…

Responsive Webdesign – CSS3 Media Queries – CSS-Template for browsers and mobile devices

Today, I will show you a very useful CSS-Template-File for Web-Designers. If responsive design isn’t your everyday-work, you will either have to use a partly obsolete list of resolutions found somewhere on the internet, or you have to gather all the data that you need and that you can find on your own. weiterlesen…

Responsive Webdesign – CSS3 Media Queries – CSS-Vorlage für Browser und mobile Geräte

Gestern hatte ich es mit dem Bookmarklet für die CSS3 Media Queries, heute gibt’s dann eine CSS-Vorlagen-Datei für die Allgemeinheit. Der Hintergrund ist ziemlich einfach erklärt: Wenn du nicht gerade jeden Tag mit Responsive Webdesign zu tun hast, wirst du dir in der Regel entweder eine ziemlich alte Liste von irgendeiner Website kopieren oder dich hinsetzen und das zusammentragen & -fragen, was du benötigst oder was dir vor allem unter die Augen gekommen ist. weiterlesen…

Responsive Webdesign – Browser-Test-Bookmarklet

Ihr erstellt Webdesigns, diese natürlich auch abhängig von der Auflösung bzw. dem Gerät, klar. Doch setzt ihr euch für jede kleine Änderung immer wieder hin, ändert die Browsergröße (auch wenn dies toll via PlugIn geht) oder testet gar die native Geräteauflösung am Originalgerät, wenn es sich nicht gerade um eine wichtige Änderung für Mobilgeräte handelt? Wirklich? Das geht doch auch viel, viel einfacher. Zum Beispiel mit einem Bookmarklet direkt im Browser. weiterlesen…