Mobile Layouts / responsive layouts

[klixx]

Hallo zusammen,
so langsam arbeite ich mich endlich in mobiltaugliche html(5)/css(3)-Techniken ein - zugegeben hänge ich da stark nach, aber das soll sich bessern. Ich weiß um verschiedene Tools, die es z.B. ermöglichen, Spalten abhängig von Auflösung & viewport darzustellen (also zu 'floaten' oder eben untereinander mit flexiblen Breiten etc.). Wo ich aber immer noch ziemlich im Dunkeln tappe, ist die Anpassung von Bildern. Die meisten 'modernen', 'responsive' Designs/Layouts scheinen mir auf großflächige Bilder als Design-/Layoutelement zu verzichten, allenfalls wird ein (ggf. 100% skaliertes) BG-Bild eingesetzt.
Wie sieht das aber aus, wenn ich ein (block) header-Bild verwenden möchte oder eben ein 'spaltenfüllendes' Bild? Gibt es da auch bereits Ansätze, die mir dabei behilflich sind?
Werde mir morgen das twitter bootstrap mal genauer ansehen - was ich außerdem seit langem auf meiner Liste habe ist jQuery Mobile - aber ich glaube, da geht es primär um die Benutzerfunktionen (Touch-Events etc) - oder?
Gruß und danke für alle links & sonstigen Tipps.

 

[anste14]

AW: Mobile Layouts / responsive layouts

Hier ist eine Seite mit einigen guten Artikeln:

http://www.elmastudio.de/category/responsive-webdesign-2/

 

[cebito]

AW: Mobile Layouts / responsive layouts

Wie sieht das aber aus, wenn ich ein (block) header-Bild verwenden möchte oder eben ein 'spaltenfüllendes' Bild?

Dann gibst du die Breite im CSS in % an und es scaliert sich mit dem Elternelement.

 

[klixx]

AW: Mobile Layouts / responsive layouts

Dann gibst du die Breite im CSS in % an und es scaliert sich mit dem Elternelement.

Ist es wirklich so einfach (= bin ich wieder zu blöd, dass ich den Wald vor Bäumen nicht seh? ) - werde ich ausprobieren, danke!

@anste14: Über den link (elmastudio) bin ich auf ein Skript gestoßen, das die Bilder per php für verschiedene Größen anpasst (also dann auch wirklich die Dateigrößen reduziert - das wäre dann natürlich noch eine weitergehende Lösung, allerdings ist mir das eigentlich schon zu kompliziert). Insgesamt wirklich gute Artikel, danke ebenfalls!

 

[Dagobert68]

AW: Mobile Layouts / responsive layouts

Hallo klixx

Wie wär's denn mit der neuen Version des CSS-Frameworks YAML 4? (www.yaml.de). Das ist auch fully responsive und erleichtert einiges an Arbeit in punkto floatende Spalten etc. Erfordert etwas Einarbeitungszeit, ist dann aber extrem hilfreich, finde ich. Und es berücksichtigt auch ältere IE-Versionen automatisch, so dass man sich nicht noch mit iehacks etc. beschäftigen muss.

Ist nur so'ne Idee

 

[klixx]

AW: Mobile Layouts / responsive layouts

Ja, auf der yaml-Seite war ich tatsächlich gestern auch mal wieder - seit langem. Hatte mich vor ein paar Jahren(?) - ich glaube Version 2/3(?) - mal ganz gut eingearbeitet, bin aber über die Zeit davon abgekommen, da ich ohne das Framework irgendwie auch (und schneller) klargekommen bin. Aber nun mit den vielen Ausgabevarianten ist es eine andere Situation. Wobei ich (noch) nicht sehe, dass man mit yaml einen großen Vorteil ggü. anderen (kostenlosen) css-/Grid-/ ... - Frameworks hat - bzw. versuche ich das dann wohl jetzt mal herauszufinden.
Gruß!

 

[MyBad]

AW: Mobile Layouts / responsive layouts

Ich kann das Skeleton-Framework nur empfehlen. Habe damit schon diverse Projekte realisiert und bin immer wieder begeistert.

Das Framework gibt es unter getskeleton.com

 

[Gideon]

AW: Mobile Layouts / responsive layouts

Hier ist ein Buch (englisch), das alle Fragen zum Thema resp. WD (auch Bilder) beantwortet: http://www.abookapart.com/products/responsive-web-design

 

[Schmarsi]

AW: Mobile Layouts / responsive layouts

Gibt es vergleichbare Lektüre auch auf Deutsch?

 

[klixx]

AW: Mobile Layouts / responsive layouts

Hier ist ein Buch (englisch), das alle Fragen zum Thema resp. WD (auch Bilder) beantwortet: http://www.abookapart.com/products/responsive-web-design

Danke für den Link!