Wie testet ihr Mobile Websites?

[Mike1410]

Hallo,

ich habe mal eine Frage:
Wie testet ihr eure Webseitenm das diese auf Android Smartphones bzw. iPhones korrekt dargestellt werden?
Gibt es da irgendwelche Emulatoren für den Android-Browser bzw. iPhone-Browser?

Das würde mich mal interessieren?

[schman]

Also ich schau mir die Seiten dann erstmals mit dem Responsinator an, allerdings ist das nicht wirklich ein Test.
Schlussendlich kommst du wahrscheinlich drum rum die Seite wirklich mit einem Gerät (iPhone/Android) zu begutachten.

[webstar]

Auch wenn es nicht der Standardbrowser auf den Iphones/Androids ist, nutze ich für einen allgemeinen mobilen Test den Opera Mobile Emulator: http://de.opera.com/developer/tools/mobile/

[dackelchen]

Im Laufe der Zeit hat sich ein kleines "Testnetzwerk" entwickelt. Das Layoutr wird also von mehreren Leuten mit veschiedenen Ausgabemedien getestet. da ist dasnn auch jeweils ein kurzes Feedback dabei. Flüchtigkeitsfehler werden dabei in der Regel auch gleich ausgemerzt.

[JanoschSkuplik]

Neben den Tests auf dem echten Gerät nutze ich zum Testen von Responsive Designs:

• ebenfalls http://www.responsinator.com/
• für schnelle Tests: http://bricss.net/post/16538278376/s...sign-test-page

Für Tests von weiteren Möglichkeiten, die auch serverseitig berücksichtigt werden müssen:

• Android Emulator (im SDK enthalten): http://developer.android.com/tools/help/emulator.html
• iPhone-Simulare (in Xcode enthalten)

Ansonsten auf jedem Fall die echten Geräte, damit auch Gesten getestet werden können.

[Mike1410]

Vielen Dank, für die vielen Antowrten. Jetzt werde ich mal testen.

[timmey123]

sofern man das web developer addon nutzt, gibts da mittlerweile auch die Funktion "View Responsive Layouts", was für einen schnellen Test auch durchaus passabel ist.

[Slind]

ist kostenlos:

http://spoon.net/browsers

wenn Screenshots reichen gäbe es auch noch folgendes (sieht für mobil jedoch ehe mau aus):
http://browsershots.org/

[mike_mcfly]

https://browserlab.adobe.com

[daviot]

Alles gute Tools.

Ich verwende auch den Emulator von Opera
http://www.opera.com/developer/tools/mobile/

Wenn ich Seiten fürs iPhone optimieren muss, teste ich es zuerst im Safari auf meinem PC, verhält sich sehr ähnlich. Aber einen abschließenden Test am echten Gerät kann man durch nichts ersetzen.

[Slind]

man kann natürlich sofern möglich auch versuchen alles so einfach wie möglich zu halten, dann kann einem maximal noch eine nicht vorhandene schriftart probleme machen.

[cliffparnitzky]

ist kostenlos:

http://spoon.net/browsers

Das ist ja wohl so geil ...

Danke für den Link.

Gruß, Cliff

[joe]

- Adobe Edge Inspect mit ipad oder android handy (Hoffentlich bald mit mehr Geräten ). https://chrome.google.com/webstore/d...&utm_medium=et
- Android SDK http://developer.android.com/sdk/index.html
- Chrome console, hier kann viele Einstellungen treffen u.a. touch events emulieren. Außerdem kann man das device usw. verändern.

[Slind]

Das ist ja wohl so geil ...

Danke für den Link.

Gruß, Cliff

freut mich das es dir taugt, IE muss nur leider für jeden Acc einzeln heruntergeladen werden, wird aber auch auf der cloud gehostet und der freespace reicht so weit ich weiß dafür aus.

[mekroth]

Ich teste mit Ripple für Chrome:

Ripple


Gruß,

Mario

[Nina]

Links aus dem sehr empfehlenswerten Buch "Responsive Webdesign" (http://responsive-webdesign-buch.de/) von Christoph Zillgens:

Responsive testen:
http://responsivepx.com

Mehr zum Thema Mobile-Testing:
http://bradfrostweb.com/blog/mobile/...king-the-bank/

iOS SDK für iPhone und iPad
https://developer.apple.com/devcenter/ios/

Android SDK und Anleitung zur Einrichtung verschiedener Geräte
http://developer.android.com/sdk/
http://sangatpedas.com/android-devic...ndroid-device/

Opera Mini Simulator (nutzt Proxyserver; auch für iPone verfügbar)
http://www.opera.com/developer/tools/mini/

Opera Mini (vollwertiger mobiler Browser) Emulator
http://de.opera.com/developer/tools/mobile/

Firefox Mobile (Fennec) für Desktop
http://www.mozilla.org/de/mobile/

Weitere Liste von Emulatoren
http://www.mobilexweb.com/emulators

[gorti]

Vorteil dabei ist, dass man Firebug dort weiter nutzen kann. Aber um wirklich alles zu testen (ev. Gestures und allg. Touchscreen) braucht es halt die "wahren" Geräte. Aber wer hat das schon...
Ansonsten auch responsinator oder http://mattkersley.com/responsive/

Grüsse

[Thoni]

Den finde ich ganz gut, aber bei mir wurde der Hintergrund nicht angezeigt.
Also nicht 100%ig drauf verlassen - wie bei anderen wohl auch.

http://www.springbox.com/mobilizer/

[Maschmo]

Ich verwende Sauce

Funktioniert auch unter Mac OS X funktioniert.

[dackelchen]

Ich arbeite nicht für Google .

Ich habe den Text dazu jetzt einmal gelesen. Da steht nichts, was einen vernünftig gemachte Webseite nicht ohnehin schon haben sollte.

Der entscheidende Wettbewerbsfaktor ist der Inhalt, nix anderes. Vorausgesetzt einen Seite funktioniert mobil, dann macht das den Unterschied.

Diese ganzen "Google-Algorithmus (ca. 250) werden meiner Meinung erst dann relevant, wenn 10 Seiten das selbe sagen und der Inhalt kein Unterscheidungkriterium mehr ist. Ein Beispiel dazu wären Zeitungsblogs, die mit DPA-Meldungen gefüllt werden.

Im Webdesign arbeitet man bei der Gestaltung mobiler Webseiten bereits nach dem Grundsatz „mobile first“. Das heißt, eine neue Website wird an die mobilen Endgeräte abgestimmt und angepasst. Erst danach wird sie für die großen Laptop- und PC-Bildschirme weiterentwickelt.

Da frage ich mich immer: "Was soll das?" Hier geht es nur um die Reihenfolge. Wenn entweder "mobile" oder "Dektop" nicht optimal sind,. dann habe ich oder eben der betreffende Designer/die Designerin schlampig gearbeitet. Und nicht mal Google ist adaran interessiert, in welcher Reihenfolge ich meim CSS schreibe.

Übersichtlichkeit, einfache Handhabung und kurze Ladezeiten gehören zu den Must-haves einer mobilen Firmenhomepage.

Und bei den Desktoplayouts gilt das nicht? "kopfkratz"

edit: Die Zitate stammen von der verlinkten Seite.

[Stefan01]

Ich habe gerade diese Seite optimiert und mittels

• Responsinator
• Firefox Web-Entwickler-Tool Bildschirmgröße testen
• Responsive Check Center
• Am I Responsive
• Matt Kersley's Resonsive Design Testing

Hier das Ergebnis des Firefox Tools:

screenshot1.jpg



getestet. Danach die Seite auf einem iPhone 6+ getestet und eine Überraschung erlebt:

image2.jpg

Meine Media-Queries:

screenshot.jpg

Sollte ich bei den Media-Queries evtl. noch orientation: portrait bzw. landscape integrieren?

Kann da bitte jemand Lich ins Dunkel bringen habe momentan leider keine anderen Mobilen Geräte zum Testen und bin eben dadurch auf die Testseiten angewiesen.

Vielen Dank schonmal für Eure Hilfe und ein schönes WE!

P.S. Vielleicht kann ein Moderator den Beitrag von mir in einen anderen Beitrag verschieben, habe das leider zu spät bemerkt, Danke!

[Spooky]

Dir fehlt wahrscheinlich einfach die Viewport Angabe.

Außerdem solltest du im Responsive View von Firefox die voreingestellten Werte verwenden. Die entsprechen ungefähr der durchschnittlichen CSS Größe von Smartphones. 320x... entspricht ungefähr dem iPhone 4(S) und kleiner, 360x... entspricht ungefähr Smartphones wie das Nexus 4, 5 und ähnliche 5 bis 6 Zoll Full HD Geräte.

[Stefan01]

Hallo Spooky,


perfekt, vielen Dank für die Hilfe! Die Viewportangaben haben gefehlt, ich dachte allerdings, dass die von Contao automatisch integriert werden und im Seitenlayout nur die Option besteht sie zu überschreiben. Hatte den Viewport schon angegeben bevor ich die Media-Queries angelegt hatte und wieder gelöscht wegen des Hinweises beim Seitenlayout im BE.


Viele Grüße

Stefan

[neophron]

https://developer.chrome.com/devtool...mote-debugging

[Stefko]

Spam

Eine Escort-Damen-Agentur die Websites optimiert ... dass nenne mal wirklich Full-Service
scnr