bla

Websites in verschiedenen Auflösungen testen

Mittwoch, 2.3.2016, 08:17 > da]v[ax

Bildschuss_20160302_08-13-48

Resizer ist ein praktisches Tool von Google, mit dem ihr das Verhalten einer Website in verschiedenen Auflösungen testen könnt. Leider treten die wirklichen Probleme dann doch meist erst auf den Geräten selbst zutage, aber für einen schnellen Überblick ist das schon okay. Meine Fresse, wie viele Stunden ich schon in mein CSS gesteckt habe will ich echt nicht mehr wissen...

Update: p3t3r schreibt mir:

Wenn man lieber ohne Google arbeitet, wird man bei http://www.responsinator.com ebenfalls bestens bedient. Auch hier funktionieren die Links im Simulator, man kann also in der simulierten Darstellung kreuz und quer durch die Seite navigieren.

Wenn es etwas schneller gehen soll, ist das Teil von http://mattkersley.com/responsive/ mein derzeitiger Favorit. Dieses Tool hat kürzere Ladezeiten, bietet jedoch keine Möglichkeit der Navigation in den simulierten Anzeigen.

Leider hat man immer das Problem, dass Handys generell zu groß dargestellt werden, man also immer erst mal rauszoomen muss, um eine Idee von den wirklichen Größenverhältnissen zu bekommen. Darüber hinaus stimmt das Endergebnis bei Responsinator noch etwas weniger als bei Resizer:

responsinator resizer

Links Responsinator, rechts Resizer, daneben jeweils ein iPhone 5s.

Fazit: ohne ein Testgerät geht es nicht wirklich, aber um mal eine grobe Vorstellung zu bekommen, sind die Tools schon okay.

2. Update: Chris schreibt:

Hm, es gibt doch auch beim Firefox Inspector so ein Tool (rechts oben in der tab-leiste, das 4. von rechts in der Standardkonfiguration). Wozu dann diese externen Tools verwenden?

Ach was!

(via eac)

9 Meinungen zu “Websites in verschiedenen Auflösungen testen”

  1. p3t3r meinte:

    Yo. Nettes Tool.

    Wenn man lieber ohne Google arbeitet, wird man bei http://www.responsinator.com ebenfalls bestens bedient. Auch hier funktionieren die Links im Simulator, man kann also in der simulierten Darstellung kreuz und quer durch die Seite navigieren.

    Wenn es etwas schneller gehen soll, ist das Teil von http://mattkersley.com/responsive/ mein derzeitiger Favorit. Dieses Tool hat kürzere Ladezeiten, bietet jedoch keine Möglichkeit der Navigation in den simulierten Anzeigen.

    Off Topic:
    Ich bin halt nicht mehr sooo der Freund von Google. Meine Kalender, Adressbücher und Medien laufen auf eigenem Server in eigener Cloud über einen Banana Pi, an dem eine 500 GB Festplatte hängt. Die 'offiziellen' Cloud-Anbieter nutze ich sukzessive nur noch für Backups, die dort natürlich verschlüsselt geparkt werden, falls der Banana Pi mal sterben sollte.

    Aber trotzdem danke für den Hinweis! Es ist ja immer gut, eine Alternative zu haben.

    Viva la resolution! ;-)

  2. da]v[ax meinte:

    @p3t3r: danke für die Alternativen, die übernehme ich mal direkt. Ich bin auch nicht so der Googelfreund.

  3. Lilli meinte:

    Nachdem ich sowieso die Seiten in den verschiedenen Brwosern testen muß, warum sich noch eine mögliche Fehlerquelle in den Workflow einreihen ?

    Was ist so schlimm daran? ;D
    http://www.frontendfan.com/wp-content/uploads/2012/11/resize.gif

    @p3t3r: ditto. War noch nie ein Freund von Google und mein alter Raspberry hängt auch "irgendwo" ausser Landes am Netz...

  4. da]v[ax meinte:

    @Lilli: hahaha ja klar, das geht auch, aber manchmal isses schon gut zu sehen, wie der "erste Eindruck" z.B. auf einem Phone ist und dazu braucht man schon die exakten Abmessungen.

  5. Chris meinte:

    Hm, es gibt doch auch beim Firefox Inspector so ein Tool (rechts oben in der tab-leiste, das 4. von rechts in der Standardkonfiguration). Wozu dann diese externen Tools verwenden?

  6. da]v[ax meinte:

    @Chris: ach sieh an! Das wusste ich nicht mal!! Danke.

  7. Chris meinte:
  8. da]v[ax meinte:

    @Chris: ui! Auch cool!

  9. Thomas meinte:

    Nachdem ich gerade meine Adresse dort eingegeben habe, habe ich mich erst einmal gewundert, warum in den "virtuellen" Bildschirmen nur eine weiße Seite angezeigt wird. Dann ist mir eingefallen, dass die Webseite nur per Iframe dort eingebunden wird und ich in der Apache-Konfiguration Header set X-Frame-Options: "sameorigin" gesetzt habe.

    Also kurz deaktiviert und dann funktionierte es. Naja, wird alles so dargestellt, wie es auf den Geräten selbst auch dargestellt wird. Am besten hat man aber mindestens ein weiteres Gerät zur Verfügung, auf dem man den Kram dann richtig testen kann (und nicht nur über die Entwicklerkonsole des Browsers in verschiedenen Auflösungen). ^^

    Bei mir ist es das Android-Smartphone.

    MFG Thomas

Antworten

Dein Kommentar

Das Kleingedruckte:
Halte Dich bitte an die Spielregeln. Welche Emoticons du verwenden kannst, steht hier. Kommentarabonnements werden automatisch nach 3 Monaten gelöscht.
 
 Wer HTML kann, ist klar im Vorteil. Diese Tags sind erlaubt:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
 
 Bei der Menge an Spam-Kommentaren passiert es hin und wieder, dass ein Kommentar vom Spamfilter gefressen wird. Bitte sei mir nicht böse aber ich habe weder Zeit noch Lust, solch verloren gegangenen Kommentaren hinterher zu forschen. Wenn das öfters passiert, schreib' mir 'ne Mail damit ich dich whitelisten kann.

OOPS!

Es sieht so aus, als hättest du keinen Werbeblocker installiert. Das ist schlecht für dein Gehirn und manchmal auch für deinen Computer.

Bitte besuche eine der folgenden Seiten und installiere dir einen AdBlocker deiner Wahl, danach kannst du todamax wieder ohne Einschränkungen genießen.


uBlock Origin: für Chrome | Firefox | Safari

AdGuard: für Chrome | Firefox | Safari | Opera | Yandex

AdBlock Plus: für Chrome | Firefox | Safari | Opera | Internet Explorer

uMatrix: für Firefox | Chrome | Opera

Ey, lass mich einfach rein, okay?
(Setzt per Javascript einen Cookie. Wenn Du das alles deaktiviert hast, weiß ich auch nicht, wie ich dir helfen soll)

Ich will das hier nie wieder sehen.
(Setzt per Javascript einen sehr langlebigen Cookie. Wenn Du das alles deaktiviert hast oder Cookies automatisch oder auch von Hand löschst, weiß ich auch nicht, wie ich dir helfen soll)

Ihr Browser versucht gerade eine Seite aus dem sogenannten Internet auszudrucken. Das Internet ist ein weltweites Netzwerk von Computern, das den Menschen ganz neue Möglichkeiten der Kommunikation bietet.

Da Politiker im Regelfall von neuen Dingen nichts verstehen, halten wir es für notwendig, sie davor zu schützen. Dies ist im beidseitigen Interesse, da unnötige Angstzustände bei ihnen verhindert werden, ebenso wie es uns vor profilierungs- und machtsüchtigen Politikern schützt.

Sollten Sie der Meinung sein, dass Sie diese Internetseite dennoch sehen sollten, so können Sie jederzeit durch normalen Gebrauch eines Internetbrowsers darauf zugreifen. Dazu sind aber minimale Computerkenntnisse erforderlich. Sollten Sie diese nicht haben, vergessen Sie einfach dieses Internet und lassen uns in Ruhe.

Die Umgehung dieser Ausdrucksperre ist nach §95a UrhG verboten.

Mehr Informationen unter www.politiker-stopp.de.