Internet-Software, Browser, FTP, SSH 4.707 Themen, 38.979 Beiträge

Responsive WEB Page

Sigi Saudi / 8 Antworten / Baumansicht Nickles

Hallo Gemeinde,
Ich habe wieder einmal Fragen.
Meine WEB Seiten werden dem Trend folgend zunehmend von Mobilgeraeten aufgerufen, Sartphones, Tablets, etc. Der Anteil liegt z. Z. (Zaehlung ueber den userAgent String seit 2011) bei etwas mehr als 20 %. Dem trage ich dadurch Rechnung, dass ich mich in die responsiv Seitenerstellung eingearbeitet habe. Ich gebe Hauptdimensionen in % an und den font-size in der Einheit 'vh'. Das klappt auch ganz gut, nur, wenn ich die Seite dann mit meinem Samsung Grand 2 SM-G7102 mit dem Chrome Explorer lade, sieht alles gut aus. Nur, wenn ich das Smartphone z. B. von Portrait auf Landscape drehe, bleibt das Portrait Format in Landscape erhalten. Das Format wird nicht rekalkuliert. Woran das liegt, weiss ich natuerlich. Die Seite wird beim Drehen des Geraets nicht neu geladen. Deshalb wird das responsiv Format fuer die neue Displaygroesse nicht neu berechnet. Wenn ich das Geraet drehe und einen Refresh mache, ist natuerlich alles in Ordnung, weil der Refresh ja die Seite neu laedt und neu berechnet. Aber das weiss natuerlich ein zufaelliger Client z.B. in Kenia nicht.
Die Adresse einer solchen Seite ist z. B. http://www.moon-and-sun.com/phubon.php?pasa=de

Ich kenne und benutze natuerlich auch die CSS Moeglichkeiten fuer die Zuweisung anderer CSS Parameter im Falle von Smartphones zu div/class, etc, Definitionen wie z. B. "@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi)..." und das funktioniert auch, aber nur bei einem Refresh wird die Seite neu berechnet wenn das Format von Landscape zu Portrait oder umgekehrt gewechselt hat.

Andererseits habe ich einige WEB Seiten programmiert mit starren Parametern in Pixeln.
Beispiel: http://www.moon-and-sun.com/booking/Specbook.php?pasa=de 

Wenn ich solche Seiten lade, werden sie auf das Smartphone Displayformat umgerechnet und automatisch neu berechnet, wenn ich Portrait >> Landscape >> Portrait wechsle.

Meine Fragen nun:
1.) Warum werden einige Seiten auf das Smartphone Format umgerechnet, andere nicht. Ich hatte die phubon Seite zuerst in Pixeln programmiert und als das Ergebnis sich auf dem Smartphone als mehr als maessig herausstellte, begann ich mit der % resp. vh Programmierung und dem @ im CSS.
2.) Gibt es in javascript, jQuery oder Ajax & Co. eine Moeglichkeit, die Umrechnung der Dimensionen der Elemente vor der Anzeige im Smartphone  zu forcieren? 
MfG
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Nachtrag zu: „Responsive WEB Page“
Optionen

Hallo Gemeinde,
Das Problem mit der responsive Kodierung von Internetseiten hat mir keine Ruhe gelassen und heute, am thailaendischen Neujahrstag 2557/2558 habe ich eine Loesung gefunden.
Erstmal vorweg, ich habe in der Literatur keine Moeglichkei gefunden, beim Wechsel von Landscape auf Portrait oder umgekehrt ein refresh der Seite zu forcieren. Also bin ich den entgegengesetzten Weg gegangen.
Ich habe die Slideshow mit festen Parametern progrsammiert, die auf gaengige Smartphones passen. Im Original ist z. B. mein Samsung Galaxy Grand 2 Duo SM-G7102 im Landscape Modus mit der Slideshow fast voll ausgefuellt. Drehe ich das Geraet auf Portrait, rekalkuliert der Smartphone Browser die Slideshow automatisch so, dass sie in der Breite komplett in Portrait hineinpasst, keine Verzerrungen also. Das gilt auch fuer den Fall, wenn ich von Portrait auf Landscape drehe. Kein Refresh, keine Verzerrungen, jeweils eine saubere Darstellung.
Fuer einen Laptop oder PC ist das Abbild der Slideshow aber zu klein. Ich wollte da das Bildformat 640/360 (16x9) haben. Also musste ich jetzt mit CSS @media only screen einen Weg finden, um PC/Laptop Abrufe der Internetseite zu erkennen.
Ich waehlte mit "@media only screen and (min-width : 1224px){ }" einen recht kleinen Wert fuer die minimale horizontale Aufloesung mit dem Ziel, moeglichst viele PC/Laptop Geraete zu erfassen. einen oberen Wert fuer min-width definierte ich nicht, um mich nicht wieder zu begrenzen. Ich habe dann unter @media die vergroesserten Dimensionen fuer die Darstellung der Slideshow eingegeben. Damit habe ich nun erreicht, dass auf dem Smartphone eine Internetseite angezeigt wird, die auf das Smatphone passt mit einer Bildgroesse von 500x281 Pixeln und auch automatisch dimensionsgerechte Landscape > Portrait > Landscape Wechsel macht. Auf Laptops erhalte ich dann automatisch das groessere Format 640x360. Da Laptops i. a. nicht fuer Wechsel Landscape > Portrait > Landscape ausgelegt sind, ist keine zusaetzliche Kodierung einer Portrait-Seite erforderlich, die dann auch wieder beim Wechsel einen Refresh brauchen wuerde.
Uebrigens, Tablets, iPads & Co zeigen das kleine Smartphoneformat an, was aber kein Problem ist, weil man die Bildgroesse bei diesen Geraeten mit Touchscreen durch Auseinanderziehen des Daumens und des Zeigefingers auf Schirmgroesse bringen kann, was jeder Anwender weiss.
Nach meiner Erfahrung ist eine responsive Kodierung von Internetseiten fuer Smartphones problematisch und nicht empfehlenswert, weil Landscape und Portrait unterschiedliche Groessen der %-Werte fuer die Dimensionierung benoetigen, was im Falle der Lageaenderung des Smartphones einen Refresh erforderlich macht, wenn man die Seite schirmkonform anzeigen will. Das weiss natuerlich ein zufaelliger Customer irgendwo in der Welt nicht, der die Seite abruft. Deshalb ist das Verfahren nur dann gut, wenn jemand ausschliesslich fuer sich selbst Internetseiten kodiert, was aber nur ganz selten zutrifft.
Der Link zu der Slideshow ist: http://www.moon-and-sun.com/phubon.php?pasa=de

Dieser Bericht beschreibt, was ich herausgefunden habe. Sollte jemand andere Erkenntnisse haben, wuerde ich mich ueber eine Antwort freuen.
MfG
Sigi Saudi 

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Wiesner Sigi Saudi „Hallo Gemeinde, Das Problem mit der responsive Kodierung von ...“
Optionen

Servus Sigi Saudi,

ich hab da noch ein Tool womit du deine Webseite abchecken kannst ob alle Einstellungen ideal für mobile Clients sind.

https://developers.google.com/speed/pagespeed/insights/?hl=de&utm_source=wmx&utm_campaign=wmx_otherlinks

 

viel Erfolg bei der Optimierung.

bei Antwort benachrichtigen
Sigi Saudi Wiesner „Servus Sigi Saudi, ich hab da noch ein Tool womit du deine ...“
Optionen

Hallo Mr. Wiesner,

Ich hatte gestern schon geantwortet, finde die Message aber nicht bei Nickels. Deshalb noch einmal:

Vielen Dank fuer den interessanten Link, den ich noch nicht kannte. Einen wervollen Hinweis habe ich dem Test entnehmen koennen: Horizontales Scrollen, wie es in meiner mobilen Version auftrat, sollte man vermeiden. Dem folgte ich und baute in 'body' die Anweisung 'overflow-x:hidden; ein, die horizontals Scrollen unterbindet. Der Rahmen fuer die Slideshow wird so und so komplett angezeigt. Das Scrollen betraf sowieso nur das Hintergrundbild.

Aber die Empfehlung nach der hoeheren Komprinierung der Bilder werde ich nicht befolgen. Der Aufwand steht in keinem Verhaeltnis zum Vorteil, der daraus erwaechst. Auch die Javascriptempfehlung ist unsinnig. Ich soll das Laden des jQuery plugins loeschen. Dann funktioniert die Seite aber nicht mehr, weil ich jQuery reichlich benutze.

Den CSS Part habe ich optimiert. Das war eine leichtere Uebung.

Danke noch mal fuer den Link.

MfG aus Thailand

Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Wiesner Sigi Saudi „Hallo Mr. Wiesner, Ich hatte gestern schon geantwortet, finde die ...“
Optionen

Ich weiß es nicht ob es für dich nötig ist, je genauer du deine Seite optimiert desto höher ist das Google Ranking.

PS.: Du kannst mich Mike nennen.

Grüße aus Oberösterreich.

bei Antwort benachrichtigen
Sigi Saudi Wiesner „Ich weiß es nicht ob es für dich nötig ist, je genauer du deine ...“
Optionen

Hallo Mike,

Es waere schon von Bedeutung, bei Goggle weiter im Ranking nach vorn zu kommen, da meine Webseiten eigentlich als Werbung fuer unser Resort gedacht sind, das wir in Thailand in Wang Nam Kiaw aufgebaut haben.

Aber z. B. die Kodierung meiner hunderte von Bildern zu optimieren, ist schon eine Viecherei, von der ich gern Abstand nehme. Die Gewinne sind auch nur gering, wie ich von der getesteten Seite weiss.

Die Slideshow 'phubon.php' gehoert nicht zu den Resortseiten. Diese Seite habe ich nur nebenbei fuer unsere Freunde gemacht.

Trotzdem ist die Google Optimierung sehr interessant, aber z.B. bei JavaScript Sequenzen macht die Optimierung ein nachtraegliches Korrigieren sehr schwer, weil alle Instruktionen saneinandergereiht sind. Die Struktur geht voellig verloren. Oder gibt es ein Programm, um Google-optimierte JavaScript wieder zu restrukturieren?

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Wiesner „Ich weiß es nicht ob es für dich nötig ist, je genauer du deine ...“
Optionen

Hallo Mike,

Es waere schon von Bedeutung, im Google Ranking nach vorn zu kommen. Meine Internetseiten sind als Reklame gedacht fuer das Resort, dass wir uns in Wang Nam Kiaw in Thailand gebaut haben.

Aber ob es sich dafuer lohnt die hunderte von Bildern zu optimieren, ist fraglich besonders deshalb, weil der Gewinn nur gering ist, wie das Beispiel 'phubon.php' gezeigt hat.

Auch die Optimierung der Javascriptdateien ist ein zweischneidiges Schwert. Optimierung heist fuer JavaScript, dass die Struktur verloren geht, weil alle Instruktionen einfach aneinandergereiht werden. Das macht ein nachtraegliches Korrigieren sehr schwer oder gibt es ein Programm, dass diese Optimierung wieder rueckgaengig machen kann?

Die Webseite 'phubon.php' gehoert nicht in die Resortserie. Diese Seite hatte ich nur fuer meine Freunde erstellt.

Viele Gruesse aus dem z. Z. 35 Grad warmen Thailand. Hier ist jetzt Hochsommer, vergleichbar mit dem Juli in unseren Breiten.

Sigi Saudi 

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Wiesner Sigi Saudi „Hallo Mike, Es waere schon von Bedeutung, im Google Ranking nach ...“
Optionen

Ich weiß nicht was du so an Möglichkeiten hast, Bilder zu optimieren.

Ein Photoshop Batch Auftrag mit "für Web speichern"  oder selbiges mit IrfanView brächte schon Linderung.

Weiters zu deiner Frage Zurückstellung von Codeänerungen, wir nutzen in unserer Firma das alte Programm "Source Safe" womit man auf alte Versionen den Codes jederzeit zurückgreifen kann. Alternativen wären dazu zum Beispiel Gid oder der MS Teamfoundation Server.

Weiters haben wir ein komplettes Abbild von unserem Server bei uns lokal auf dem wir zuerst Programmieren und wenn es funktioniert dann öffentlich gestellt wird. Mit diesem lokalen Webserver ist auch das Source Safe verbunden.

Zur Information, wir sind aufgrund unserer Business - Software sehr Microsoft lastig, deshalb IIS+ASP.net Seiten und das Programm Source Safe.

Man kann sich aber auch selbiges auf Linux oder Bsd Basis aufbauen es gibt dort auch gleichwertige Programme. 

bei Antwort benachrichtigen
Sigi Saudi Wiesner „Ich weiß nicht was du so an Möglichkeiten hast, Bilder zu ...“
Optionen

Hallo Mike,
Hat etwas laenger gedauert mit meiner Antwort, weil ich erst einmal eine Internetseite Mobil Friendy haben wollte (frei nach Google). Das ist mir jetzt auch geglueckt und ich habe mir dafuer ein Template gemacht.
Fotooptimirung mit Adobe Photoshop kann und habe ich gemacht und in Source Safe hab ich mich mittlerweile auch eingearbeitet. Vielen Dank fuer Deine Hinweise.
Fuer das leidige Thema Responsive Web bin ich meinen eigenen Weg gegangen. Ich hatte ja zuerst versucht, die Dimensionen der div und der images und was da so alles dran haengt mit Media Strings zu codieren. Aber davon bin ich wieder ganz abgekommen, weil Freund Apple diese Art der Differenzierung zwischen WEB Mobile Viewports nur bedingt unterstuetzt. Z. B. wird Device Pixel Ratio nicht unterstuetzt. Es ist wie immer: Apple will alles anders machen als andere und verliert damit die Kompatibilitaet mit den Internet Standards aus den Augen. (Ich verstehe nicht den Enthusiasmus der Apple Gemeinde fuer diese technischen Kruecken. Die Liste der Inkompatibilitaeten, wenn man sie dann auflisten wuerde, ist sehr lang. Ich habe mich schon reichlich damit rumgeaergert).
Um die Media Strings zu umgehen und trotzdem eine zu mobilen Geraeten responsive codierung zu erhalten, bediene ich mich der guten, alten JavaScript. Ich frage erst einmal die Displaydimensionen ab und darauf basierend setze ich dann mit document.get.ElementBy ... die Parameter so, dass sie fuer das betreffende Mobiledisplay passen. Um nicht fuer jedes Display die Dimensionen neu berechnen zu muessen, lege ich in meinem speziellen Falle nur die Bildbreite passend zur Portraitschirmbreite des Mobiltelefons fest und berechne mit JavaScript alle anderen erforderlichen Dimensionen, basierend auf der Bildbreite. Das funktoniert gut und erspart viel Arbeit, die bei Verwendung von Media Strings anfallen wuerde, weil CSS eine Berechnung von Parametern nicht hergibt. Mit Ueberpruefung mit dem Mobile-Emulator in Google Chrome habe ich so meine Seite fuer die gaengigsten Mobilbildschirme optimiert.
Auch erstelle ich alle Formate nur fuer Portrait. Dreht der Anwender sein Telefon nach Landscape, kann er das Bild durch "pinch or stretch" (Spreizen zweier Finger) auf das Bildschirmformat vergroessern, das kennt jeder Touchscreen Benutzer. Wenn Landscape extra codiert wuerde, muesste beim Wechsel von Portrait nach Landscape und zurueck jedes mal ein Refresh gemacht werden, was nur die wenigsten wissen.
Abschliessend noch meine Erfahrung mit der Angabe der Dimensionen in Prozent: Davon bin ich wieder voellig abgekommen aus folgendem Grund. Die Prozentdimensionen beziehen sich nach meiner Erfahrung mit den IE Trident7, dem Firefox 38.01 und Google Chrome 43 auf die noch verfuegbare Schirmgroesse. Wenn einer im IE z. B. die Menue Bar anzeigt und ein anderer das nicht macht, passen die Prozentangaben in einem Fall nicht mehr. Auch passen die Prozentwerte niemals fuer alle 3, den IE, den Firefox und den Chrome, usw, weil die jeweils unterschiedliche aktive Bildschirmgroessen haben, die der Ersteller der Internetseite nicht kennen kann. weil die auf jedem PC, Laptop, usw, der die Seite anzeigen soll, individuell gesetzt werden koennen.
Meine 'Mobile friendly' (Google Speedtest Originalton aus 100 / 100 Nutzererfahrung: ✓ Glückwunsch! Es wurden keine Probleme gefunden.) Seite hat die Adresse
http://www.moon-and-sun.com/anlage/gallery-js?pasa=de

Viele Gruesse aus dem sehr warmen Thailand
(Am 29.5. fliege ich fuer 3 Monate nach Deutschland)
Siegfried

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen