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

Ich möchte euch gerne ein weiteres Online-Tool vorstellen, mit dem ihr eure Website auf verschiedenen Viewports testen könnt. Der Dienst nennt sich Screenfly und simuliert eine Vielzahl an (mobilen) Endgeräten. Angefangen bei Desktop-Computern über Smartphones und TV-Geräte bis hin zu Tablets werden alle gängigen Devices abgedeckt.
Besonders gut gefällt mir, dass nicht nur die Apple-Geräte berücksichtigt werden, sondern eben auch Blackberry, Android und Co. Darüber hinaus lässt sich auch noch vom Portrait- in den Landscape-Modus wechseln.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Nachteilig ist allerdings, dass auch dieser Dienst lediglich den Viewport simuliert. Geräteabhängige Settings werden nicht berücksichtigt.

Screenfly does not mimic the behavior of the devices you select. For example, most mobile phones and tablets have a zoom feature that displays the entire page at once, even if it appears to be clipped off the edges of the screen here.

Media Queries über den Viewport simulieren

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 – 8 Kommentare

  1. Responsive Webdesigns testen | kulturbanause blog
    schrieb am 20.09.2011 um 21:01 Uhr:

    […] Websites auf verschiedenen Endgeräten testen: Screenfly […]

    Antworten
  2. Felix
    schrieb am 14.08.2011 um 19:36 Uhr:

    Leider funktioniert dieses tool auch bei meinen Webseiten nicht. Sehr schade.

    Bezüglich der Bilder und deren Skalierung hast du folgendes empfohlen:

    img {
    width: 100%;
    height: auto;
    }

    bewirkt das folgende genau das gleiche oder worin besteht der Unterschied?

    img, embed, object, video, iframe {
    max-width: 100%;
    }

    Antworten
  3. Tim
    schrieb am 09.08.2011 um 21:55 Uhr:

    @Jonas: Vielen Dank für die schnelle Antwort, funktioniert!!

    @Moev: jo schade, aber vlei kommt ja bald ein nächstes Wundertool heraus :)

    Antworten
  4. Moev
    schrieb am 09.08.2011 um 08:53 Uhr:

    @Tim: Anscheinend geht das wirklich nur mit WordPress Seiten. Sehr komisch. Fand das Tool ja recht nett. Aber sehr schade, das es nicht mit normalen Seiten geht :(

    Antworten
  5. Tim
    schrieb am 04.08.2011 um 12:35 Uhr:

    Echt praktisch. Bei den „nich WordPress“- Seiten wurde das Stylesheet bei mir auch nich berücksichtigt. Woran kann das liegen?

    Ich hab mal noch eine Frage: Jonas, wie bekommst du es hin, dass sich die Bilder in deinen Artikeln dynamisch an die Größe anpassen? Verwendest du mehrere Bilder (in den verschiedenen Größen) oder werden diese direkt verändert?

    Grüße
    Tim

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 04.08.2011 um 13:17 Uhr:

      @Tim: Ich vergebe den Bilder einfach eine Breite von 100% und eine proportionale Höhe dazu. Wenn der Content-Bereich dann ebenfalls flexibel ist passt sich alles dynamisch an die mobilen Endgeräte an.

      img {
      width:100%;
      height:auto;
      }

      Antworten
  6. Moev
    schrieb am 04.08.2011 um 08:53 Uhr:

    Ich finde es nur komisch, das er bei den Seiten die ich getestet habe kein Stylesheet benutzt wird. Ich weiß nicht, ob das grade nen Bug ist oder normal. Sonst aber eine gute Sache.

    Antworten
  7. Jim
    schrieb am 02.08.2011 um 15:41 Uhr:

    Sehr gut sowas sucht man immer gerade in der steigenden Nachfrage an Mobilen Webseiten :)

    Antworten

Schreibe einen Kommentar zu Responsive Webdesigns testen | kulturbanause blog Antworten abbrechen

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.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-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 →