exali.de
html5-device-access-512

Frage gestellt von Patrick am 12.09.2012

Kannst du eine kurze Einführung in mobile Webseitenentwicklung geben?

Ich denke da eventuell an:
http://jquerymobile.com/

Aber auch andere Themen wie responsive Webdesign. Ich glaube mich zu erinnern, dass du letztens auch deine Seiten darauf umgestellt hattest. Vielleicht könntest du diese Themen einmal näher erläutern?

Ansonsten danke für das tolle Angebot, bin gespannt wie es sich entwickelt.

Einführung in die Entwicklung mobiler Webseiten

Hallo Patrick. Ein recht komplexes Thema, dass Du Dir da ausgesucht hast. Ich habe mal versucht in einem ca. 25 minütigen Video die wichtigsten Eckdaten zur mobilen Webseitenentwicklung zusammenzufassen.

Gerne gehe ich auf Wunsch auch noch näher auf einzelne Teilaspekte (wie z.B. CSS3 Media Queries) ein. Dazu einfach eine neue Frage stellen :)

Eigenständige mobile Webseite auf Basis des User Agents

Wie im Video besprochen findest du hier den Quellcode zur Ermittlung, ob der Besucher mit einem mobilen Endgerät oder einem Desktop Browser auf die Seite zugreift.

Responsive Webdesign mit CSS3 Media Queries

Hier findest du den im Video verwendeten Quellcode zum Responsive Webdesign mit den CSS3 Media Queries.

Geb deinen Senf dazu

GRAVATAR
Patrick am 12.09.2012 um 09:04 Uhr

Vielen Dank für die schnelle und ausführliche Antwort mit Beispielen!

Ich werde es mir direkt nach der Arbeit heute Abend anschauen.

GRAVATAR
Hermann am 17.10.2012 um 16:27 Uhr

Hallo Torben,
danke für das wirklich gut gemachte Tuto. bzw, die tolle Einführung über die verschiedenen Möglichkeiten.
Du bist mit Responsive sicher auf dem richtigen Weg und obwohl ich derzeit mit selber viel mit Twitter-Bootstrap arbeite stehe ich vor der Frage: Wann ist Jquery-mobile und wann Bootstrap bzw. eine Rsponsive Design die richtige Wahl?

Denn, der derzeit entscheidende Nachteil ist ja nun die Geschwindigkeit im mobilen Web! Das bedeutet für mich wieviel "Overhead" mute ich dem user zu?
Der Nachteil bei bei responsiven Seiten ist doch das Elemente die Ausgeblendet sind, doch sehr wohl mit auf das mobile Endgerät übertragen werden.
Gerade bei Grafiken Bildern oder sonstige "schnick-schnack-Elemente", die auf dem PC im heimischen LAN, die Seite aufpeppen sollen, aus Platz Gründen auf mobilen Geräten nicht angezeigt werden sollen.

Mich würde wirklich brennend Interessieren, wo zieht man da sinnvoll dir Grenze?
Oder bist Du der Meinung, das Mobile Web, wird immer schneller das man die Datengröße nicht mehr so im Fokus haben sollte?
Ich freu mich auf deine Antwort,
viele Grüße
Hermann

GRAVATAR
Torben Leuschner am 17.10.2012 um 16:32 Uhr

Hallo Hermann,

vor ein bis zwei Jahren war ich auch noch ein großer Fan von jQuery Mobile. Mittlerweile bin ich aber komplett auf Responsive Webdesign umgestiegen.

Es gibt eigentlich (fast) immer eine Möglichkeit, mit Hilfe von responsiven Layouts auch die Dateigröße auf mobilen Endgeräten zu beeinflussen.

Das alle Elemente der Desktop-Variante auch bei der Responsive-Variante mitgeladen werden müssen, ist beispielsweise nicht korrekt. Sofern man es richtig anstellt.

Natürlich kann ich mich irren, aber ich vermute, fluiden Layouts gehört die Zukunft.

Viele Grüße,
Torben

GRAVATAR
hermann am 18.10.2012 um 11:19 Uhr

Hallo Torben,
wow das war ja mal eine schnelle Antwort.
DANKE schön!
Leider habe ich sie erst heute gesehen.
Tja ich werde mal versuchen mich schlau zu machen, was das Laden von "versteckten" (hidden) und nicht angezeigten (Display:none) Objekten angeht.
Wenn man es wirklich so erstellen kann das sie nicht geladen werden, es also keinen Datenbalast gibt und das alles über "@media-screen" und Klassen Ansprache geht. Ja das wäre schon der Hammer, kannst Du mir einen Tipp geben wo ich da weitere Infos bekomme um es "richtig Anzustellen".
Dir einen schönen Tag
und viele Grüße
Hermann

GRAVATAR
Torben Leuschner am 18.10.2012 um 11:22 Uhr

Hallo Hermann,

der "Trick" ist eigentlich nur, beispielsweise große Hintergrundbilder oder Elemente selbst in einem Media Query zu verpacken. Also zum Beispiel zu sagen, nur wenn die Auflösung >1600 Pixel beträgt, zeige das Hintergrundbild an.

Meistens macht man es ja umgekehrt, dass man erst das große Bild global definiert und dann per Media Query wieder zurücksetzt (background: none). In dem Fall wurde es aber schon vom Browser geladen...

Viele Grüße,
Torben

GRAVATAR
Hermann am 18.10.2012 um 11:35 Uhr

Oh man.. das könnte gehen!
Nochmals Danke- nun werde ich mal den Tag damit verbringen das ausgiebig zu Testen.
Ferne war ich mal so frei Dich bei G+ hinzuzufügen. Ich bin echt beeindruckt welch ein wissen Du in deinem Alter hast.
RESPEKT!
Wenn du mal ein "grafisches" Prob. hast, sag bescheid, hast einen "gut" bei mir! :-)
Viele Grüße,
Hermann

GRAVATAR
Elena am 19.07.2013 um 21:57 Uhr

Hallo, Torben,
herzlichen Dank für die wunderbare Einführung. Mir ist aber nicht so klar geworden, wie du es mit "ger nichts tun" gemeint hast: wie können bessere Endgeräte mit höherer Auflösung das Problem lösen? Die Webseite wird doch sowieso auf einem Smartphone in Klein angezeigt...
Viele Grüße,
Elena