Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Wenn Ihr für eine WordPress-Website ein „responsive“ Theme entwickelt, werdet ihr in der Coding-Phase wahrscheinlich ähnlich vorgehen wie ich. Zunächst entwickelt ihr die Desktop-Version der Website oder alternativ die mobile Variante – je nachdem welchem Prinzip ihr folgt. Anschließend wird die Seite für die anderen Bildschirmgrößen adaptiert. Ihr fügt nach und nach neue Media Queries hinzu und wechselt permanent zwischen dem Browser und dem Code-Editor. Den Browser zieht ihr dabei manuell groß und klein und testet so die verschiedenen Ansichten. Leider erkennt man in dieser Vorgehensweise nicht ohne weiteres welcher Media Querie gerade aktiv ist und wo Anpassungen am Code vorgenommen werden müssen. Insbesondere wenn ihr mit sehr vielen verschiedenen Breakpoints arbeitet kann das lästig sein.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Das folgende Plugin erweitert die Admin-Bar von WordPress um die fehlende Anzeige. Nachdem ihr das Plugin wie gewohnt installiert habt, gebt ihr in den Einstellungen die verwendeten Media Queries an. Anschießend wird euch immer angezeigt welcher Media Querie gerade aktiv ist. Ihr sehr also auf einen Blick wo ihr die Korrekturen vornehmen müsst.

Links zu Thema

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. garfield853
    schrieb am 02.08.2012 um 22:47 Uhr:

    jawohl… schon immer gesucht und gebraucht. Danke dafür. Endlich sehe ich sofort beim Testen welche Auflösung ich habe. Danke für dieses Tool.

    Antworten
  2. Jürgen
    schrieb am 20.07.2012 um 12:04 Uhr:

    Danke für den Hinweis auf dieses Plugin, es erleichtert die Arbeit doch unheimlich.

    Antworten
  3. Marco
    schrieb am 18.07.2012 um 13:29 Uhr:

    Ich hab‘ im Firefox in der WebDev Toolbar eigenen größen hinterlegt.
    So musst du den Browser nicht manuel ziehen, sondern klickst einfach die entsprechende Größe an. Gut zur Kontrolle der Monitorauflösung und nebenbei weißt dau auch genau welche MQ gerade aktiv ist ;-)

    Antworten
  4. Kau-Boy
    schrieb am 18.07.2012 um 12:31 Uhr:

    Geniale Idee! Ich habe erst gestern mit meinem neuen responsive Theme rumgerätseltwie groß denn nun der Viewport in meinem Chrome-Browser in Android ist. Mit deinem Plugin kann ich diese Frage in Zukunft sehr einfach beantworten.

    Nutzt es dazu eigentlich einen echten CSS3-Media-Query oder doch nur eine JavaScript Funktion? Die liefern nämlich nicht in allen Browsern das gleiche Ergebnis.

    Antworten
  5. René Grosche
    schrieb am 18.07.2012 um 10:22 Uhr:

    Kleines Tool große Wirkung… und wieder einmal danke für den Tipp :)

    LG
    René

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →