Archiv für Schlagwort: bildschirm

Responsives Webdesign einfach testen

Bekanntlich ist ja responsibles Webdesign aktuell der heiße Scheiß. Und das ist eigentlich auch ganz klug. Denn so kann man seine Webseite schnell für verschiedene Endgeräte, sprich neben Desktops und Notebooks auch Tablets und Mobiltelefone anpassen. Ein paar CSS-Media Queries mit angepassten Werten in das Stylesheet und fertig. ((Zumindest ist so die einfache Theorie. In Wirklichkeit ist das ein wenig aufwändiger.))

der tag und ich - auf einem simulierten iPad

Den neuen Code zu testen ist dann aber nicht ganz so einfach, zumindest ich habe zum Beispiel zu Hause kein iPad rumliegen. Gut das es Menschen gibt, die Dinge wie Resizer entwickeln. Das ist ein Bookmarklet für den Browser, dass einem die darstellende Fläche im Browser entsprechend der Darstellungsfläche eines der Endgeräte skaliert. Zur Auswahl stehen dabei die Auflösungen

  • Mobile (320×480)
  • Small Tablet (460×640)
  • Tablet – Portrait (768×1024)
  • Tablet – Landscape (1024×768)
  • Desktop (1200×800)

Ich benutze die dazugehörige Resizer Chrome Extension seit ein paar Tagen und bin ziemlich begeistert davon. Wie in obigem Screenshot dargestellt sieht dieses Blog zum Beispiel in der iPad-simulierenden Ansicht aus. Oben rechts sieht man auch, zugegebenermaßen eher schlecht, die kleine Box mit der man die verschiedenen Auflösungen auswählen kann.

Zwar kann die Extension den Test auf dem echten Gerät nicht komplett ersetzen, doch ist es so schon tausend Mal komfortabler und genauer, als einfach den Browser ein wenig größer oder kleiner zu ziehen.

Außerdem machte mich Shortee auf das Responsive Design Test Bookmarklet von Benjamin Keen aufmerksam. Das zeigt nach einem Klick die verschiedenen Darstellungsvarianten einer Webseite nebeneinander in einem Browserfenster an.

Responsive Mehrfachansicht

Und wo wir gerade dabei sind: Sowohl The Responsinator, als auch responsive.is bieten den gleichen Mehrwert, sehen dabei aber anders/hübscher aus.

Retina on OS X

Retina on OS X

All of these new assets are exactly four times the normal size, meaning that retina screens would need to contain four times the number of pixels for objects to stay the same physical size on the screen. On a 15″ MacBook Pro or 13″ MacBook Air, that would be an increase from 1440×900 to 2880×1800 pixels.

Dustin Curtis zeigt an einigen Beispielen, wie Apple scheinbar auch Mac OS darauf vorbereitet auf Retina-Displays zu laufen. Das macht meine Vorfreude auf mein nächstes MacBook, sofern es denn mit einem solchen Display ausgestattet ist, noch ein wenig größer.

Wichtig ist dieser Schritt vor allem für Entwickler von mobilen Applikationen. Wenn das neue iPad wirklich mit Retina-Auflösung kommen sollte, wäre sie höher als die eines aktuellen 27″ iMacs.