Responsive Design, was könnt ihr empfehlen?

[[BC]grmbl]

Hallo,

ich habe Anfang des Jahres (m)eine neue Website an den Start gebracht und bisher noch keinen Gedanken an Mobilgeräte verschwendet. Das muss ich jetzt ändern...
Könnt ihr Tutorials zu Responsive Design empfehlen? Es gibt Websites, bei denen nur das Menü umgestaltet wird und schon ist die mobile Ansicht fertig. Was sollte alles angepasst werden, außer dem Menü?

Danke.

 

[R4sh]

allgemein alles d.h. die navi, der content und der footer sollten angepasst werden. am besten schaust du mal bei selfhtml , da solltest du fündig werden. http://de.selfhtml.org/index.htm

MfG R4sh

 

[hoerg]

Als Tutorial für Responsive Design fand ich dies hier ganz hilfreich:
http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch

sowie Pt. 2 davon

 

[CloakingDevice]

Das ist einfach. Alles sollte angepasst werden. Inklusive Schriftgröße. Denk auch an Checkboxen, Radiobuttons und derlei. Die sind mit dem Daumen nur schwer bedienbar. Ich finde es heute sogar sinnvoller die umgekehrte Route zu gehen. Fang mit der Mobilseite an und schau wie den zusätzlichen Platz auf größeren Geräten effektiv nutzen kannst. Das führt meiner Erfahrung nach zu besseren Resultaten.

Empfehlen würde ich dir ein gutes Framework. Du kannst auf den Klassiker Bootstrap setzen sofern du halbwegs mit deren Style zufrieden bist, ansonsten gibt es noch Foundation oder auch Semantic UI. Natürlich sind da noch weitere, hier nicht explizit aufgeführte.

 

[Daaron]

ich habe Anfang des Jahres (m)eine neue Website an den Start gebracht und bisher noch keinen Gedanken an Mobilgeräte verschwendet. Das muss ich jetzt ändern...

Im Zweifel ist es jetzt schon etwas spät dafür. Ein bestehendes Layout im Nachgang "responsive" zu machen ist im besten Fall nervig, im ungünstigsten Fall quasi unmöglich.
So etwas beachtet man schon in der allerersten Konzeption. Egal, was man designed, bei allem hat man im Hinterkopf "Wie sieht das auf nem schlanken Telefon aus, wie auf nem 4k-Monitor?"

Es gibt Websites, bei denen nur das Menü umgestaltet wird und schon ist die mobile Ansicht fertig. Was sollte alles angepasst werden, außer dem Menü?

Nur das Menü? Da kommen die aber nicht weit, weil ein Desktop eben breeeeeit ist. Für Desktops kachelt man Content nebeneinander. Nehmen wir z.B. so einen Forenpost hier: Weil wir den Platz haben, wird die User-Info links des Beitrags dargestellt. In ner Mobile-Ansicht wäre das nicht möglich.

Die einzig korrekte Antwort auf "Was muss angepasst werden?" lautet: Alles, was blöd aussieht, blöd lesbar ist oder sich blöd bedienen lässt. Außerdem natürlich alles, was übermäßig Bandbreite benötigt. Ein Hoch auf <picture> und dessen JS-Fallbacks.

 

[T0a5tbr0t]

Anpassen MUSS man erstmal gar nichts. Es hängt einfach vom Layout der Seite ab, ob der Content / die Funktionalität auf kleinen Bildschirmen (und mit anderem Input wie Touchscreens) noch gut nutzbar ist.

Ich würde empfehlen sich mal über "Viewports" in Browsern zu informieren. Was ist das und wieso verhalten sich Mobil-Browser da standardmäßig anders als Desktop Browser? Dann verstehen was media queries in CSS sind und wozu die gut sind (vor allem "width", den Rest braucht man selten).
Dann vielleicht auch noch was genau CSS Units wie px, em, % etc. eigentlich genau angeben. (CSS px haben z.B. nichts mit echten "physikalischen" Bildschirm-Pixeln zu tun)
Soweit der Technische Krams.
Alles andere sind dann einfach Designfragen.

 

[John Reese]

Unabhängig von dem Thema an sich, also Responsive Design, krieg ich nach dem erneuten Aufruf deiner Seite eine schöne Fehlermeldung:
http://puu.sh/gWGFN/449b415647.png

 

[[BC]grmbl]

Das ist gar nicht meine Seite, es geht um eine andere.

Danke für die vielen Tipps, dann habe ich wohl ordentlich was zu tun.