Dynamische Anpassung der Webseite
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alter ansatz
ausblenden
beispiel
bild
blenden
browser
buchen
display
element
fenster
gedanke
kriterium
mobile first
modernen browser
part
passen
stolperstein
symbol
url
webseite
-
Hi,
ich würde gerne meine Webseite für mobile Endgeräte aber auch für verschiedene Breiten des Browserfensters anpassen.
Bis jetzt habe ich es so gelöst, dass per javascript und php die breite des fenster und die breite des displays abgefragt wird. Wird eine bestimmte Breite unterschritten wird man automatisch auf die "mobile" Version der Seite weitergeleitet.
Ich habe auch schon von media queries in css gelesen, allerdings stört mich hier, dass trotzdem die komplette Seite geladen wird und man dann für kleine Breiten unerwünschte Elemente nur ausblendet oder neu anordnet. Das klingt für mich etwas umständlich.
Wie ist eure Meinung? Welcher Variante ist besser? Oder habt ihr noch eine ganz andere Methode? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das Thema nennt sich Responsive Webdesign.
Ich kann dir das gleichnamige Buch nahelegen. Sehr schön und leicht erklärt mit paar Beispielen. Im Buch wird ausschließlich (soweit ich bis jetzt gelesen habe) mit Mediaqueries gearbeitet. Es werden auch "Mobile-First" Ansätze und dergleichen behandelt, sehr Hilfreich beim konzipieren einer neuen.
JavaScript funktioniert auf den meisten mobilen Geräten nicht zu 100% und eine neue, eigene Seite laden ist sowieso ein alter Ansatz. Warum nicht eine aufgeräumte Desktop-Version mit noch aufgeräumterer mobilen Version? Wenn deine Webseite so riesig ist, dass du soviel in der mobilen Version ausblenden musst, solltest du dir sowieso Gedanken machen, ob ein Banner hier und da oder eine "Tag-Cloud" oder ne Kategorieliste wirklich von nöten ist (bei der Desktop-Version).
Bin halt ein Fan von minimalistischen Websites
Grüße! -
Ich pers. finde mobile first in dieser Beziehung recht praktisch.
Du fängst mit der "kleinen" Version an und arbeitest dich zur Desktop Variante hoch. Für die IE lovers solltest du auf css3-mediaqueries.js oder was in der Art zurückgreifen, da IE8 und kleiner nichts mit den @media Anweisungen bewerkstelligen kann und nur die "kleine" version im IE auf dem Desktop angezeigt würde.
Ansonsten benötigtst du noch eine Lösung für Bilder, welche direkt im Quelltext eingebunden werden. Google mal nach responsive images ... es gibt da verschiendenen Lösungsansätze... oder du lebst mit der Tatsache das auch in der mobilen version die großen Bilder geladen werden und nur kleingeschoben werden.
Background Bilder kannst du im css via @media bequem ändern.
Auf jeden Fall solltest du dir schon beim Layout Gedanken über die Umsetzungsmöglichkeiten und evtl. "stolpersteine" machen. -
Eigentlich muss man gar nicht so viel ändern, die meisten modernen Browser passen die Seite schon automatisch von der Breite her an.
-
elobomb schrieb:
Eigentlich muss man gar nicht so viel ändern, die meisten modernen Browser passen die Seite schon automatisch von der Breite her an.
Ach!? Nach welchen Kriterien entscheden diese Browser dann? Wenn die Seite nicht dynamisch gestaltet ist, machen auch moderne Browser nur eines: Sie blenden Scrollbalken ein.
Die einzige Möglichkeit, die ein Browser in diesem Falle sonst noch hätte, wäre es, die Seite proportional verkleinert darzustellen, Eine Seite, die fest auf eine Ausgabebreite von 1920 px ausgelegt ist, wird dann aber, z.B. auf einem Smartphone, kaum noch lesbar sein.
Es ist ergo die Aufgabe des Seitengestalters, die Dynamik einzubauen. Genau das macht man mi, wie Limabone schon schrieb, mit responsive Design.
as-retro-parts schrieb:
Bis jetzt habe ich es so gelöst, dass per javascript und php die breite des fenster und die breite des displays abgefragt wird. Wird eine bestimmte Breite unterschritten wird man automatisch auf die "mobile" Version der Seite weitergeleitet.
Ich habe auch schon von media queries in css gelesen, allerdings stört mich hier, dass trotzdem die komplette Seite geladen wird und man dann für kleine Breiten unerwünschte Elemente nur ausblendet oder neu anordnet. Das klingt für mich etwas umständlich.
Media Queries sind die eleganteste Möglichkeit. "Unerwünschte Elemente sind doch höchstens gestalterische Elemente. Mit entsprechenden, geschickt gestalteten Stylesheets werden die nur bei Bedarf geladen. Sich auf Angaben zu verlassen, die man per JS oder PHP holt, ist nicht zuverlässig.
Beitrag zuletzt geändert: 18.5.2013 5:03:43 von fatfreddy -
Mit den richtigen Tools ist die Anpassung mit Media Queries recht einfach,
mit zum Beispiel dem Chrome-Browser von Google kann man seine Seite auf
Mobile Optimierung testen:
F12 drücken - Handy Symbol unten klicken - In dem neuem Fenster kann man
beliebige Displaygrößen einstellen.
Alternativ gibt es eine Tabelle mit Displaygrößen bekannter Smartphones.
Chrome:
https://www.google.com/chrome/
Beitrag zuletzt geändert: 7.7.2015 12:39:27 von cashkingdom -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
