Bestehende Webseite für mobile Geräte optimieren.

LinuxMan

Hallo, ich will eine Webseite für mobile Geräte optimieren. Und zwar so, das auch Google die Seite lieben wird. Da es sich um komplett selbst geschriebenen Code in PHP/HTML handelt, werde ich das komplett händisch machen müssen. Aber dafür fehlt mir noch genügend Grundwissen. Folgendes Tutorial, das mir schonmal einen super Überblick gibt, habe ich gefunden:

selfhtml wiki, bestehende Webseite responsiv umbauen

Aber jetzt stellt sich mir noch die Frage, wie ich damit überhaupt anfangen sollte. Mir schwebt die Idee vor Augen, einfach zwei Varianten der Webseite anzubieten und mittels PHP abzufragen, ob ein Desktop oder ein mobiles Gerät die Seite anfordert. An mobile Geräte würde ich dann einfach eine abgespeckte Variante der bisherigen Seite senden. Ist das machbar? Und wenn ja, wie? Habe darüber leider noch nichts gefunden und wäre für jeden hilfreichen Tipp dankbar.

DetlefM

Ich denke über den serverseitigen Script zu versuchen ein "responsive" Design zu erhalten ist zum Scheitern verurteilt.
Bitte nicht missverstehen, ich habe keine fertige Antwort sondern bin auch auf der Suche.
Aber ich habe in den letzten Wochen gelernt, dass Webseiten mit "Responsive Design" erstens bei Google getested werden können (Link derzeit nicht wieder gefunden) und zweitens dann auch als Button auf Android hinterlegt werden können. Also das was man will.
Das schwierige (für mich) ist zu verstehen wie ich unter css das @media richtig einsetze. Denn wie Du auch schon bei Selfhtml gefunden hast sind Pixelangaben einfach out.
Ich habe (von klein zu groß) ein Smartphone mit Full-HD (5,2 Zoll) , ein Tablet (HD 1280×720 8 Zoll), ein Laptop (3.000 x 2.000 13,5 Zoll) und einen Desktop Full HD 23 Zoll..
Wenn ich mich auf Pixel verlasse ist der Desktop identisch mit dem Smartphone und der Laptop gibt sich auch als Screen only aus wenn ich ihn als Tablet benutze.
Also brauchen wir beide eine Angabe der physischen Größe des Bildschirmes denn die Auflösung des menschlichen Auges ist nun mal nicht variabel.
Wir brauchen in etwa gleich große Buchstaben unter Berücksichtigung des Abstandes zum Display.
Wobei dann mein Smart-TV mit 4K Auflösung mit ins Spiel kommt.
Wenn Du also anfängst serverseitig das Problem zu lösen wird es aus meiner Sicht in einer Menge Code enden die nur für Deine Zwecke evtl. funktioniert.
Wenn wir dagegen CSS finden der das für uns und alle anderen mit der gleichen Problemstellung löst dann sind wir alle weiter.
Ich werde jedenfalls eine Frage mit ähnlichem Inhalt hier posten - mal sehen ob jemand was weiss.
Ein erfrischend kurzes Tutorial habe ich auf youtube gesehen

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Es gibt noch viele andere aber die meisten sind lang und gehen nicht so auf den Punkt: Wie mache ich es "responsive" schnell ein.
Deutsche Tutorials sind Mangelware.Also werden wir wohl nach dem wir unser Problem gelöst haben eines machen müssen.

Sailor

Hallo,
machbar ist alles und du brauchst dafür auch nicht unbedingt zwei Seiten und eine Benutzerabfrage. Das kannst du mit HTML und CSS und PHP alles 'automatisieren'.
Als erstes... ganz wichtig... musst du im <head> deiner Seite folgendes anführen.

HTML

<meta name=viewport content="width=device-width, initial-scale=1">

und dann überlegst du dir, für welche Displaygrößen du deine Seite optimieren willst - Displaygröße ist allerdings nicht gleich der Auflösung der Anzeige im Browser!
Bewährt hat sich bei mir folgende Aufteilung:
größer (breiter) 1024 Pixel, damit erwischt du alles was größer ist als der alte Standard VGA Standard (1024x768 )
800 bis 1024 Pixel, damit erwischt du alles, was sich mit dem alten Standard und dem noch älteren Standard (800x600 )
kleiner 800 Pixel
Mit den von dir ausgewählten Werten erzeugst du dann mit einer @media query sowas wie eine CSS Weiche

HTML

<link rel="stylesheet" type="text/css" href="stylez/gross.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" type="text/css" href="stylez/mittel.css" media="screen and (max-width: 1023px) and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="stylez/klein.css" media="screen and (max-width: 799px)">

Du kannst natürlich auch mehr oder weniger 'Weichen' nutzen und wie gesagt die 'width-Werte' nach deinen Vorstellungen anpassen - es dürfen sich nur keine Lücken oder Überschneidungen ergeben!
Jetzt musst du natürlich die entsprechenden Stylesheets erzeugen, die dann deine Seite in den zugehörigen Größen formatieren sollen.
Dinge, die dann in den einzelnen Größen nicht angezeigt werde soll, kannst du einfach mit 'display: none;' ausblenden!
Viel Spaß beim basteln!

- - - Aktualisiert - - -

Wenn ihr unsicher seid, was denn die Pixelauflösung eures Browsers bei den diversen 5.2'' und 8'' und Tablets und Smartphones und und ...ist, dann klickt mal auf diesen Link! Mit dem Gerät, das ihr abfragen wollt.

http://s414653727.online.de/tab_test/screen_test.php

Ihr bekommt dann die Werte, die der Browser tatsächlich anzeigt und das ist unabhängig von der Displaygröße!

djheke

Ein Link zu Deiner Seite wäre viel interessanter, als hier nur zu Spekulieren.

LinuxMan

Eine CSS-Weiche wäre möglicherweise auch eine elegante Lösung. Allerdings bezweifle ich, ob es da sinnvoll wäre, einfach nur auf verschiedene Bildschirmauflösungen zu optimieren. Das Problem ist doch, so wie ich das sehe, das die meisten Smartphones/Tablets heute HD bis Full-HD Bildschirme haben. Diese aber sind erheblich winziger als ein HD-Bildschirm am Desktop-PC. Folglich bräuchte ich eine Weiche, die auf slchen Mini-Displays große Schrift erzeugt und auf Desktops normale bis kleine Schrift. Und ich vermute mal, da müsste man nicht nach Bildschirmbreite, sondern nach Gerät selektieren.

Ein gutes Beispiel, wie ich mir das vorstelle gibt es auf der Webseite Coinbase, da habe ich auf meinem Full-HD Bildschirm am Schreibtisch und auf meinem Smartphone (1280x720) exakt die selbe Schriftgröße. Die Headline ist etwas kleiner, aber sonst ist es identisch, egal wie ich das Smartphone drehe. Würde hier mit der Bildschirmauflösung selektiert, da müsste die Schrift doch auf dem Smartphone exstrem winzig sein, da 5" verglichen mit 24" schon ein recht extremer Unterschied ist.

Und das Menu oben ist auf dem Smartphone auch anders als auf dem Desktop. Für das Smartphone gibt es das übliche Quadrat mit den 3 horizontalen Linien. Und für den Desktop die gewohnte Menuleiste. Um derartige Unterschiede hinzubekommen, wird man wohl kaum die Pixelbreite des Bildschirmes abfragen, oder?

Die Seite, die ich ändern will ist diese hier: Zentrum7

Das aktuelle Layout ist aber auch schon deutlich schlanker geworden. Es befindet sich aber noch in der Entwicklungsphase und ist noch nicht online. Folgende Elemente werden mit der neuen Version weg sein: das große Bild im Head, die fette Menuleiste wandert vorerst in eine kleine Menuleiste im Footer, Die Sprechblase mit der Tante verschwindet, übrig bleibt nur der Text. Die zufällig angezeigten Produktvorschläge verschwinden komplett. Ebenso die Navigation links und quasi alle weiteren Texte und Links. Übrig bleibt dann das Logo mit einem zusätzlichen Text darunter, darunter dann das Suchformular und dann der Footer. Und im Final Release werde ich vermutlich die Menuleiste im Footer ganz nach oben an den Dateikopf verlegen. Oder sowohl im Header als auch im Footer haben. Die Startseite sieht dann von der Anordnung der Elemente so ähnlich aus wie die von Google.

Die Unterseiten sind dann etwa so: Zentrum7/Fernseher

Auch hier ist das Layout wie das neue auf auf der Startseite mit dem Unterschied, das es für den Desktop ein zweispaltiges Layout geben soll mit Anzeigen in einer schmalen Spalte rechts. Für Mobile Geräte bin ich noch nicht ganz sicher. Entweder lasse ich dort mangels Platz die Anzeigen ganz weg, oder die kommen einfach ganz unten drunter.

DetlefM

Wirf mal einen Blick auf Bootstrap. Das hier habe ich auf die Schnelle als Playground gefunden und es gibt jede Menge Videos auf youtube. Bei Bootstrap geht es von Mobile First aus und die Veränderung des Layouts von 3 zu 1 Spalten passiert automatisch. Ich bin sicher es gibt noch jede Menge anderer Bootstrap Seiten im Netz mit Tutorials, Templates usw.
https://www.bootply.com

Sailor

@LinuxMan
Hast du mal nachgeschaut, welche Auflösung (Breite x Höhe) der Browser deines Smartphone mit HD Display denn tatsächlich hat?
Schau dir mal die Liste hier weiter unten an!
http://www.blog.tocki.de/2011-06-29/lis…iler-endgerate/

Ich weiß es nur von meinem Handy, einem Samsung mit 5'' Display - hier ist nominell angegebene Pixelzahl des Display deutlich höher, als das, was der Browser anschließend tatsächlich darstellt.

Zu deinem Beispiel mit https://www.coinbase.com/ - die machen das genau so! Pixelbasiert! Nur dass die ihre Weiche mit der @media query in einem Stylesheet unterbringen. Kannst es dir ja mal selbst anschauen!
Und ja, diese Änderungen am Layout gehen genau so... großes Display mit vielen Pixeln - Menü links... mittleres Display mit weniger Pixeln - Menü oben.. kleines Display mit wenig Pixeln - kein Menü, stattdessen diese 3Balken zum Anklicken.

DetlefM

Also keine Ahnung welche Werte so der Screen Test von Sailor ausgibt (ist bei mir auf dem Phone sowas wie 360x640) jedenfalls habe ich mal mit javascript gespielt und hierhttps://s3.amazonaws.com/dmone.de/test.html
einen Link hinterlegt. Source könnt ihr euch mit Rechts-Klick anzeigen lassen. Ist statisches html mit javascript.
Jedenfalls kommt da was in Richtung von HD. Etwa 178ßx945 oder so.
Beim Surfen bin ich dann noch über https://dev.opera.com/articles/css-viewport-units/ gestolpert - keine Ahnung ob das weiter hilft.
Jedenfalls, falls jemand eine simple html page hat die sich gut auf meinem Smartphone, Tablet und Desktop zeigt: Her damit. Oder halt einen Link auf ein Youtube Video, Blog oder was auch immer.

Sailor

DetlefM
Ich schicke dir mal den Link zu meiner HP als PM! Dann kannst du prüfen, ob das mit deinem Handy klappt oder nicht!
Einverstanden?

DetlefM

Danke, gerne.

djheke

Solltest Du schon genug Geld mit 'Zanox-Affiliate' verdient haben, dann lass Dein Projekt von einer Web-Agentut neu Erstellen/Gestalten. Alles andere wäre unnötige Arbeit.

MrMurphy

Hallo

Hier liegt offensichtlich eine vollkommen falsche Vorstellung vom "Responsive Design" vor.

Zitat

Mir schwebt die Idee vor Augen, einfach zwei Varianten der Webseite anzubieten

Solch ein Vorgehen soll mit "Responsive Design" unter anderem vermieden werden. Nebenbei: Auch Google verabscheut so ein Vorgehen und straft solche Seiten ab.

Durch "Responsive Design" werden Webseiten grade vollkommen unabhängig vom Endgerät erstellt.

Das praktische Vorgehen ist dadurch auch stark vereinfacht.

Zunächst wird der HTML-Quelltext im body-Bereich nach den aktuellen Regeln von HTML erstellt. Dabei spielt das Design überhaupt noch keine Rolle.

Erst danach wird das Design erstellt. Das Fenster wird einfach in der Breite geändert und das Aussehen des Inhalts wird dann bei Bedarf anpasst. Bewährt hat sich dabei das Vorgehen "Mobile First". Wobei mit "Mobile First" einfach ein schmales Fenster gemeint ist, kein Endgerät.

So erhält man innerhalb kürzester Zeit einen schlanken Quelltext mit einem vom Endgerät unabhängigen "Responsive Layout".

Gruss

MrMurphy

LinuxMan

Stimmt, wenn ich obigen Link mit meinem Smartphone anklicke, habe ich angeblich nur 640x360 Pixel (quer gehalten). Beim Tablet sind es immerhin 960x552. Aber wieso erzählt dann der Hersteller was von 1280x720 bzw. 1920x1080?

Ich habe vorhin mal nach "CSS-Weiche mobile geräte" gegoogelt und das hier gefunden:

https://www.heise.de/ix/artikel/Allen-recht-1058764.html

Besonders der Media-Typ "handheld" dürfte für mein Vorhaben optimal sein, um für mobile Geräte ein anderes Stylesheet auszuliefern.

Damit werde ich jedenfalls mal einen Versuch starten. Wenn das genügt, dann ist der Umbau ja erheblich einfacher als gedacht

DetlefM

Also "handheld" ist deprecated siehe https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Wäre also eine Sackgasse. Aber grundsätzlich sollte es schon mit eine @media abfrage im css gehen.

Sailor

Das was der Hersteller angibt sind die Eigenschaften des Displays... wenn du dir einen einen Ultra HD Fernseher mit einer Zeilenbreite von 2160 Pixeln kaufst und schaust dann einen HD Sender, der ja nur 1080 Pixel Breite liefert... hast dann nur den halben Bildschirm? Neee... der Fernseher füllt dann die 2160 Pixel schön mit dem was ihm geboten wird.
Das Beispiel hinkt zwar an allen Ecken, aber es macht das Prinzip klar... dein Handy Display kann irgendwas astronomisches an Auflösung, dein Browser liefert aber nur was realistisches, dann wird das Realistische auf dem Astronomischen angezeigt.
Ach ja, würde mich interessieren, ob das mit dem 'handheld' (=Handcomputer wie Palms oder Mobiltelefone, meist mit monochromen Bildschirmen und geringer Bandbreite) funktioniert?
Und wenn, ob du da noch eine 'and' Angabe machst (@media handheld and (?????) ) und wenn ja, was? Pixel?

MrMurphy

Hallo

Wie DetlefM geschrieben hat war Handheld bereits tot, bevor es richtig geboren war. Kein Gerät mit Apple- oder Google-Betriebssystem hat die Angabe jemals unterstützt.

Gruss

MrMurphy

LinuxMan

So, die Mobile-Optimierung ist nun online ( Z7.de ). Danke für alle Tipps und Hinweise

Stimmt, das mit Mediatype Handheld war ne dumme Idee von mir. Laut der Beschreibung des Types geht es dabei auch um recht exotische Geräte wie: (Handcomputer wie Palms oder Mobiltelefone, meist mit monochromen Bildschirmen und geringer Bandbreite / Zitat aus Artikel, obiger Link zu heise.de), also nix wie Smartphone und Tablet. Habe ich halt anfangs falsch interpretiert.

Die wesentliche Differenz zwischen Desktop und Mobile habe ich wie folgt in einer einzigen CSS-Datei geregelt:

Code

div#HeadNavi {
        position:absolute; top:12px; text-align:center; width:94%; }


@media (min-width:590px) {
div#HeadNavi {
        position:absolute; top:12px; text-align:center; width:70%; } }

Drei solcher div Tags habe ich so in der Art formatiert, das ist alles. Der Clou dabei ist, das bei der 590px Grenze aus einem 2 Spalten-Layout eine einzige schlauchartige Spalte wird. Das genügt für meinen Fall. Ansonsten habe ich die Pixelangaben der Schriftgrößen alle in em statt px angegeben. Damit waren dann alle Kompatibilitätsprobleme beseitigt.

Die Menuleiste oben ist noch nicht, wie ich es für schmale Displays plante, auf das 3-Balken-Icon minimiert. Aber vorerst passt es in der Breite auch auf ein 320px breites Display. Google scheint auch zufrieden damit zu sein. Ein Feinschliff vom Layout wird allerdings noch folgen. Falls jemand Verbesserungsvorschläge hat, nur zu

DetlefM

Mmh, ist ein Schritt in die richtige Richtung aber passt nicht immer.
Du kannst das am einfachsten im Chrome Browser sehen. Wenn Du da Deine Seite öffnest und mit F12 die Developer Tools aufrufst dann hast Du unter dem zweiten Icon links sowas wie "Toggle Device".
Und dann kannst Du die verschiedensten Geräte mit Deiner Website betrachten (und die Liste kann auch erweitert werden es werden nicht gleich alle angezeigt) .
Also z.B. IPhone 5 ist schon ok - obwohl auch hier der Suchbutton und die Eingabezeile viel zu klein ist. Aber bei Kindle Fire HX sieht es wirklich nicht nutzbar aus. Ich versuche mal zwei Screenshots anzuhängen.