Websites auf verschiedenen Endgeräten testen: Screenfly
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.
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-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.
Feedback & Ergänzungen – 8 Kommentare
Kommentar zu dieser Seite
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 →
[…] Websites auf verschiedenen Endgeräten testen: Screenfly […]
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%;
}
@Jonas: Vielen Dank für die schnelle Antwort, funktioniert!!
@Moev: jo schade, aber vlei kommt ja bald ein nächstes Wundertool heraus :)
@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 :(
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
@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;
}
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.
Sehr gut sowas sucht man immer gerade in der steigenden Nachfrage an Mobilen Webseiten :)