Redesign für mobile Endgeräte

rage_all · 22. Dezember 2012 15:09

Das Design hat sich eigentlich kaum verändert.

Nun habe ich nur statt der statischen Hintergrundgrafik den dem Content unterlag CSS Anweisungen gesetzt um dieselbe Optik zu bekommen und eben für Mobilgeräte optimierten Code ausgeben zu können.
Ein Wermutstropfen blieb leider: Ich konnte nicht herausfinden warum sich das Layout nach Orientierungswechsel nicht neu angepasst hat. Also musste ein Reload auf JavaScript-Basis her, mit einem Listener auf Orientierungswechsel.
Schade, eher die schmutzige Methode...

Ansonsten bin ich (bislang) einigermaßen zufrieden: Slideshow für die Bilderalben, HTML5-Videos die auf Android und iOS im nativen Player abgespielt werden, die Anfahrtsbeschreibung öffnet die hauseigene App, aber nur wenn es ein Tablet oder Telefon ist - ansonsten kommen Google Maps.

Was meint Ihr?
http://www.mronions.de

Danke für Euer Feedback, speziell zu Mobilgeräten.
Ich konnte es leider nur mit einem Galaxy Ace, Galaxy S3 und einem iPad testen...

czarnowski · 22. Dezember 2012 16:38

Auf meinem normalen Monitor ist es ein Klacks HTML und viel Rand herum - man sollte auch mal an die Desktop - Nutzer denken.

Die Masse der Smartphones hat 320 x 480 Pixel Auflösung - das ist also die untere Basis.

Mobile Web's kann man ausreichend testen wenn die Browserfläche verkleinert wird und da kann man deutlich erkennen das bei normalen Smartphones der Inhalt zwar gut kommt aber nach rechts noch Menge Rand zu sehen ist.

Das Suchfeld sollte über der Menüauswahl sein und nicht ganz unten.

Die Schrift ist auf einem Standardsmartphone zu groß - kann man aus 2 Metern Abstand noch lesen.
Das Logo ist bei 320 er Smartphone ebenfalls zu groß - die Auswahl wird unten gekappt.

Ansonsten gut.

rage_all · 22. Dezember 2012 21:45

Ein Lob aus Deinem Munde ist wie drei... wink
Sorry, musste einfach sein... big_smile

Ja, das mit der Schriftgröße war ein Problem.
Zuerst wollte ich zoomen auf keinen Fall zulassen, weil mein Galaxy S3 mit Opera Standardmäßig auf 225% gezoomt hat und mir jedesmal das Layout zerriss - da hat nichts gepasst. Ging ganz gut, bis ich ein iPad zum testen geliehen bekommen hab. Bis dato war's auch auf einem Galaxy ACE okay.
iPad: Katastrophal. Also zoomen erlaubt, nur zoomt das S3 von Haus aus jetzt nicht mehr, ist nun aber der einzige (nur mit Opera) der trotz Erlaubnis überhaupt zoomen kann. Aaargh!

Ein Problem war auch bis zum Schluss der Rahmen. Der war vorher dran, also sollte der bleiben. Überhaupt sollten Desktop-User gar keinen Unterschied zu vorher spüren. Der hat mir natürlich die 10 PX Abstand geklaut. Toll dass der verschwindet bei weniger als X Pixel Breite, nun war aber der Inhalt an den Rand geklatscht... sad

Ich hatte mich aber inzwischen schon so auf Video, Bildergalerien, Facebook-App Aufruf, Maps Apps, etc. eingeschossen, dass ich dafür keine Lust mehr hatte. Nun war's auf dem S3 in beiden Browsern viiieeel zu klein, also hab ich die Schrift vergrößert - auf dem iPad waren es dann aber Daumengroße Buchstaben... Aaaargh!

Nach einigem hin und her hab ich's nun nur für Retina und andere Hi-Res Screens die Schrift auf 150% aber nur bis 720Px Breite, bzw. Nach Deinem Kommentar auf 140% reduziert. Nun passt es schön im S3 und auf dem iPad (finde ich) sowie auf dem ACE und noch solala auf einem Ur-Alt Phone mit 240px.

Also, für mein allererstes Projekt mit Unterstützung für mobile Geräte finde ich es okay. Das nächste wird besser, logo.
Wenn ich's wieder sehen kann, bastel ich noch was für Full-HD Screens. Jetzt hab ich auch endlich ein Laptop dafür. Zum arbeiten hab ich nur zwei 1280er, da fällt mir das nicht so auf, bzw. füllen 960 Pixel den ganz gut und angenehm aus.

czarnowski · 23. Dezember 2012 01:00

Das Problem Schiffsgröße auf 320 x 480 Standard besteht immer noch.

Bei der Getränkekarte wird z.B. der Preis abgeschnitten 9,00 z.B. erfolgt der Schnitt nach dem Komma, nach rechts ist der Rand zu erkennen, der deutlich vorhanden ist.

Bei der 480 er Darstellung erfolgt ein Umbruch € ist in der Zeile darunter.

Da stimmt etwas grundsätzliches nicht in der Bemaßung.

Die Menüauswahl wird bei 320 unten etwas abgeschnitten und kann ruhig eine Portion höher.
Quer ist das Logo so groß das es den ganzen Schirm ausfüllt - das ist nicht günstig.

Das Image auf der Seite Cocktail ist deutlich zu groß.

Man sollte für Image

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

verwenden.

----------------------------------------------------------------------------

Bei Desktop darf man davon ausgehen das 1980 mindestens vorhanden ist - die gehen in den Firmen sogar bis 2560.

Auf Laptops geht es ab 1280 los und haben heute bereits 16XX Auflösung.

rage_all · 23. Dezember 2012 15:02

Sag mal, wie sieht dann eigentlich amazon, ebay & Co. bei Dir aus? Vollflächig gefüllt? Mit Inhalt?
Selbst Heise, die doch technologisch immer am Zahn der Zeit sind, wird bei mir mit aufziehen nicht anders dargestellt.
Amazon nutzt bei 1920 zwar die volle Breite, aber mit gaaaanz viel weiß dazwischen.

Ja, es ist kindisch zu sagen "wenn der das nicht macht, mach ich das aber auch nicht" - aber, wenn die großen mit Millionen Visitors am Tag sich nicht auf Breitbildschirme einstellen, darf ich schon kritisch fragen ob eine kleine Kneipe aus der "Weltstadt Augsburg" mit hundert Visitors am Tag diesen Mehrwert wirklich investieren muss.

Das mit den Bildern hab ich übersehen - irgendwann war das mit dem Wald und den Bäumen, Danke für den Hinweis. Hab ich nun von width: auf max-width: geändert, nun sollte wenigstens das schonmal passen.

Mit der Tabelle der Getränke ist das so eine Sache...
Ich hab schon gesehen, dass die Zeile blöderweise genau beim Euro-Symbol umgebrochen wird. Wenn ich über die Feiertagen noch Lust hab, konvertiere ich die Leerzeichen in  . Auf der Seite mit den alkoholischen Cocktails funktioniert das schon.
Mich stört aber persönlich viel mehr, dass die Füllmengen und die Preise so aufeinander geklatscht sind, dass man kaum das eine vom anderen Unterscheiden kann.

Naja, aber wenn heutzutage 'jeder' schon 2560er Bildschirme hat, können wir ja getrost davon ausgehen, dass auch keiner mehr mit so einem mickrigen 320er Smartphone rumläuft, nicht? big_smile

Janl · 24. Dezember 2012 12:34

Hallo Nockenfell,

"Bei Laptops ist neu 1366*768 schon fast als Standardauflösung im kommen" deswegen ist kaum noch ein Notebook zu finden mit z.B. 1400 x 900 px, ärgerlich.

@cyarnowski
bei praktisch alle Websites über responsive webdesign sagt man, dass man entwickelt von klein nach gross.
Weiter ist ein Monitor mit > 2500 px breite noch nicht gängig. Wenn ich der Statistik anschaue dann ist 2500 eher seltsam. Ich wähle meistens für maximal 1400 px Breite so bleibt eine Seite noch übersichtlich.
Wie immer hängt es natürlich ab von der Kunde!

Übrigens mronions gefällt mir auch wenn noch die Kleinigkeiten verbessert sollen.

mfg
Jan

Beitrag geändert von Janl (26. Dezember 2012 22:22)

Andynium · 27. Dezember 2012 06:40

Da die Diskussion über Webseiten für aktuelle Bildschirmauflösungen nur noch am Rande mit dem Show off zu tun hatte, hab ich sie abgetrennt

http://www.cmsmadesimple.de/forum/viewtopic.php?id=2818

Forum für CMS/made simple

#1 22. Dezember 2012 15:09

Redesign für mobile Endgeräte

#2 22. Dezember 2012 16:38

Re: Redesign für mobile Endgeräte

#3 22. Dezember 2012 21:45

Re: Redesign für mobile Endgeräte

#4 23. Dezember 2012 01:00

Re: Redesign für mobile Endgeräte

#5 23. Dezember 2012 15:02

Re: Redesign für mobile Endgeräte

#6 24. Dezember 2012 12:34

Re: Redesign für mobile Endgeräte

#7 27. Dezember 2012 06:40

Re: Redesign für mobile Endgeräte

Fußzeile des Forums