Homepage Handy-freundlich gestalter (@media screen..) + Fragen

[rest0ck]

Hey,

bin ziemlich neu im Geschäft und habe gerade meine erste Homepage quasi fertig.
Hier der Link: http://rest0ck.canis.uberspace.de/Jaklef/

Hab mir gestern überlegt ich gestalte das ganze etwas um, um es für Handys oder Tablets besser bedienbar zu machen. Einfach brower-Fenster etwas verkleinern.

Meine Fragen:

• Wenn man die Homepage auf dem Handy aufruft, ist man häufig etwas rein gezoomt, wie kann ich das lösen?
• Hab alle Schriftgrößen von px auf em geändert, weil ich dachte es wäre besser. Jetzt sind die teilweise besser zu lesen, in anderen bereichen (wie beim aufklappbaren Menü) verändert sich die Größe aber ganz merkwürdig. Auf dem PC aber, sehen sie auf wie vorher (px)
• Die Videogallerie (jqeury plugin) ist ein wenig komisch, manchmal ändert sich die festgelegte Größe und manchmal nicht. Ich denke es hängt mit meiner Verwendung von !important zusammen. Leider hängt das Plugin irgendwann einfach mal ein style = margin-top etc dran und ich hab keine Ahnung, WO - hab es dann eben auf diese unelegant Art gelöst. Funktionert soweit zwar, aber jetzt mit der Skalierung macht es eben Probleme
• Ich nutze ja ein Hintergrundbild, allerdings wird das auf dem Handy sehr komisch dargestellt, kann man irgendwie sagen es soll immer in der selben Größe dargestellt werden, egal wie sehr gezoomt ist? Oh und wenn reingezoomt ist, dann hat der nicht-sichtbare Teil kein Hintergrundbild(/textur).
• Kann man auf diese Art und Weiße trotzdem noch irgendwie einstellen, dass man das Desktop-Layout erzwingt? Manche wollen das ja evtl nicht, ..

Oh und wenn ich schon dabei bin: Gibt es irgendwas, das euch gar nicht gefällt? Ist für einen Freund, der ist grundsätzlich zufrieden und es entspricht seinen Vorstellungen, sind aber offen für Kritik.

Danke schon mal und Grüße

Achja, für meine nächste Homepage würde ich gerne mal irgend ein einfaches Framework verwenden, habt ihr da Vorschläge? Glaub mit Wordpress will ich mich auch mal befassen, es soll am Ende ein Blog werden übers Kochen .. habt ihr evtl Theme-Vorschläge, die man ändern kann, oder sonst irgendwelche Tipps?

 

[Insanic]

Bei vielen Websites ist es so, das es extra eine mobile Version mit weniger Aufwand/Grafiken/Videos/Schnickschnack gibt.

Kannst dich hier mal einlesen, da steht grob worauf man achten soll, sowie einige weiterführende Links.

http://www.meine-erste-homepage.com...ng_mit_smartphones_und_tablets_optimieren.php

Bei mir auf dem Tablet werden grundsätzlich die Webseiten in der mobilen Version geladen, ich kann aber auch direkt auf "normale" Desktop Ansicht stellen, aber oftmals wird dann alles sehr klein und fummelig.

 

[Madman1209]

Hi,

ich würde dir empfehlen, dich mit Media Queries auseinander zu setzen. Gerade für verschiedene Formfaktoren (Smartphone, Tablet, Widerscreen Desktop usw) ist das in meinen Augen sehr sinnvoll.

VG,
Mad

 

[Daaron]

1.) Using the viewport meta tag to control layout on mobile browsers
2.) em ist tatsächlich besser (beseitigt Probleme mit manchen Devices), sollte aber konsequent genutzt werden.... also auch für alle Breitenangaben (außer Grafiken)
3.) Solche Plugins sind immer zickig. Beste Lösung: n anderes suchen, dass sich nicht arschig verhält
4.) background-attachment: fixed; ist dein Problem. So wie dein Hintergrund aufgebaut ist, funktioniert das nicht. Du solltest mal gucken, ob du zusätzlich noch irgendwas mit background-size: (contain oder cover) anfangen kannst.
5.) Nö. CSS Media Queries sind endgültig, und das ist gut so.

Was die letzte Frage angeht:
Wenn es wirklich ein Blog werden soll, wäre Wordpress nicht verkehrt. WP ist zwar brechreizerregende Codesuppe, aber leider trotzdem eine der besseren Blogging-Lösungen

 

[rest0ck]

Vielen dank schon mal für die Antworten

Hi,

ich würde dir empfehlen, dich mit Media Queries auseinander zu setzen. Gerade für verschiedene Formfaktoren (Smartphone, Tablet, Widerscreen Desktop usw) ist das in meinen Augen sehr sinnvoll.

VG,
Mad

Werde ich mir mal näher anschauen, danke

1.) Using the viewport meta tag to control layout on mobile browsers
2.) em ist tatsächlich besser (beseitigt Probleme mit manchen Devices), sollte aber konsequent genutzt werden.... also auch für alle Breitenangaben (außer Grafiken)
3.) Solche Plugins sind immer zickig. Beste Lösung: n anderes suchen, dass sich nicht arschig verhält
4.) background-attachment: fixed; ist dein Problem. So wie dein Hintergrund aufgebaut ist, funktioniert das nicht. Du solltest mal gucken, ob du zusätzlich noch irgendwas mit background-size: (contain oder cover) anfangen kannst.
5.) Nö. CSS Media Queries sind endgültig, und das ist gut so.

Was die letzte Frage angeht:
Wenn es wirklich ein Blog werden soll, wäre Wordpress nicht verkehrt. WP ist zwar brechreizerregende Codesuppe, aber leider trotzdem eine der besseren Blogging-Lösungen

1) Glaub das ist wonach ich gesucht habe, danke. Obwohl ich bei mir jetzt als width ~500 eingestellt habe und das dann eigentlich nur dazu führte, dass ich nur so weit raus zoomen kann, statt bis zum Rande des Inhalts, wie üblich. Das hatte nichts an der zoomeinstellung geändert, aber ich teste es zu hause noch mal

2) Hm okay, das ist etwas schwierig, weil alles pixelgenau eingestellt ist, verschiebt sich das etwas, verrückt alles :x
Woher weiß ich wieviel em wieviele px sind und vor allem, wie verändert sich dann was auf Handys z.b.? Mich verwirrt das alles etwas :>

3) Hm okay, schau ich zuhause auch mal rein danke

4) Hm, find ich bisschen schade eigentlich, weil ich schon unter 1086px das ganze einschränke .. ist die Seite zu breit?

WP: Ja, dachte ich mir schon. Obwohl sich das sicher auch mit Blogger umsetzen lassen würde, oder?
Es braucht im Grunde nur: Blog, About, Rezepteindex, Kategorien im dropdown, Suche

 

[Daaron]

Ich ging davon aus, dass du zumindest ansatzweise mit Media Queries gearbeitet hast, daher nur mein Verweis auf den Viewport. Effektiv braucht man nur:
<meta name="viewport" content="width=device-width, user-scalable=no"> oder, alternativ, <meta name="viewport" content="width=device-width,initial-scale=1.0">
Ohne Mediaqueries geht das natürlich nach hinten los.

Was das pixelgenaue Arbeiten angeht... Macht man nicht, wenn man flexible Layouts entwerfen will. Und man versucht auch nicht herauszufinden, wie viele em ein px sind und umgekehrt. Das alles hängt AUCH von der Zoomstufe des Browsers ab. Hast du noch nie auf nem Smart-TV von der Couch aus gesurft?

Das Layout an sich ist ja ganz hübsch (schlichte Eleganz), aber die Umsetzung solltest du von Grund auf überdenken. Verwende einen Mobile First - Ansatz. Das heißt: Du schreibst erst einmal alles so, dass es auf einem schmalen Smartphone hochkant gut aussieht (inkl. herunterskalierender Bilder, vergrößerter Schaltflächen für bessere Touch-Interaktion,...). Jetzt verbreiterst du das Bild so weit, bis deine Darstellung anfängt, Kacke auszusehen. Hier ist dein erster Bruchpunkt. Finde heraus, wie viele em deine Seite gerade breit ist und schreib jetzt für alle em > diesem Wert neue/erweiterte Styles, so dass es wieder gut aussieht. Das ganze wiederholst du, bis es auf nem FullHD-Monitor gut aussieht udn gut lesbar ist.

Wenn du mehrspaltig arbeiten willst (willst du ja): Überleg dir eine eigene Notation, wie du deine Spalten klassenbasiert aufteilst. Du könntest z.B. ne Klasse "one-fourth" anlegen, die definiert, dass das betroffene Objekt ne Breite von 25% (oder besser: 23%+1% Margin links & rechts) hat. Wenn deine Darstellung zu schmal ist, so dass man mit 25% Breite nichts mehr erkennt, dann schalte unterhalb dieser Breite das Floating und die Breitenbegrenzung ab.

Und insgesamt: http://mediaqueri.es/ <- Beispiele, alles voller hochkarätiger Beispiele

 

[rest0ck]

Ich ging davon aus, dass du zumindest ansatzweise mit Media Queries gearbeitet hast, daher nur mein Verweis auf den Viewport. Effektiv braucht man nur:
<meta name="viewport" content="width=device-width, user-scalable=no"> oder, alternativ, <meta name="viewport" content="width=device-width,initial-scale=1.0">
Ohne Mediaqueries geht das natürlich nach hinten los.

Was das pixelgenaue Arbeiten angeht... Macht man nicht, wenn man flexible Layouts entwerfen will. Und man versucht auch nicht herauszufinden, wie viele em ein px sind und umgekehrt. Das alles hängt AUCH von der Zoomstufe des Browsers ab. Hast du noch nie auf nem Smart-TV von der Couch aus gesurft?

Das Layout an sich ist ja ganz hübsch (schlichte Eleganz), aber die Umsetzung solltest du von Grund auf überdenken. Verwende einen Mobile First - Ansatz. Das heißt: Du schreibst erst einmal alles so, dass es auf einem schmalen Smartphone hochkant gut aussieht (inkl. herunterskalierender Bilder, vergrößerter Schaltflächen für bessere Touch-Interaktion,...). Jetzt verbreiterst du das Bild so weit, bis deine Darstellung anfängt, Kacke auszusehen. Hier ist dein erster Bruchpunkt. Finde heraus, wie viele em deine Seite gerade breit ist und schreib jetzt für alle em > diesem Wert neue/erweiterte Styles, so dass es wieder gut aussieht. Das ganze wiederholst du, bis es auf nem FullHD-Monitor gut aussieht udn gut lesbar ist.

Wenn du mehrspaltig arbeiten willst (willst du ja): Überleg dir eine eigene Notation, wie du deine Spalten klassenbasiert aufteilst. Du könntest z.B. ne Klasse "one-fourth" anlegen, die definiert, dass das betroffene Objekt ne Breite von 25% (oder besser: 23%+1% Margin links & rechts) hat. Wenn deine Darstellung zu schmal ist, so dass man mit 25% Breite nichts mehr erkennt, dann schalte unterhalb dieser Breite das Floating und die Breitenbegrenzung ab.

Und insgesamt: http://mediaqueri.es/ <- Beispiele, alles voller hochkarätiger Beispiele

Ohje. Danke erst mal für die Mühe.

In Verwendung ist zur Zeit:

<meta content="width=498, initial-scale=1.0" name="viewport"></meta>

Hab hier eine feste Breite festgelegt, nachdem ich es mit device-width versucht habe, in der Hoffnung das es das Problem löst.

Also ich hab einen Smart-TV, den allerdings noch nie als Browser genutzt

Wenn ich aber Mobile-First angehe, dann ist doch erst mal alles einfach nur Block und untereinander? Das Problem sind dann bei mir die versch. Plugins wie z.B. lazyYoutube und diese dämliche Videogalerie, für die ich Geld ausgeben habe, weil ich nichts bessere gefunden habe :/

Also die Spaltenbreite lege ich mit % fest und die des Wrappers mit em? (Will keine 100%width Seite)
Auf einem Full HD Monitor ist es jetzt ja gut lesbar, finde ich zumindest, nur vielleicht nicht auf z.B. Smartphones mit Full HD, oder 4k Teilen z.B.?

Ich weiß echt nicht wie ich das genau angehen muss, .. die Seite ist ja und soll auch etwas "statisch" sein, bis es dann zu dem Sprung -> Mobile kommt, wie es jetzt ist .. soll ich die schriftgrößen da auch abändern?

Ich untersuche die Beispiel mal genau ;P danke

 

[Daaron]

Hab hier eine feste Breite festgelegt, nachdem ich es mit device-width versucht habe, in der Hoffnung das es das Problem löst.

Ne feste Breite ist ne feste Breite. Damit übergehst du alles, was du eigentlich bezweckst: Du willst, dass die Größe des Displays (bzw. seine Auflösung) darüber entscheidet, was wie dargestellt wird.

Wenn ich aber Mobile-First angehe, dann ist doch erst mal alles einfach nur Block und untereinander?

Nicht ausschließlich. Man kann auch unnötige Elemente komplett ausblenden, Dinge in Slide-Ins verbergen,... Denk daran, dass deine Handy-Besucher Touch-Interaktion gewohnt sind.

Also die Spaltenbreite lege ich mit % fest und die des Wrappers mit em? (Will keine 100%width Seite)

Jo, auf die Weise erhälst du ne Menge Flexibilität.

Auf einem Full HD Monitor ist es jetzt ja gut lesbar, finde ich zumindest, nur vielleicht nicht auf z.B. Smartphones mit Full HD,

Reale Auflösung vs. "virtuelle" Auflösung.
Ein iPad hat ne extrem hohe physische Auflösung durch Retina. Am Ende ist es aber doch nur einige hundert "virtuelle" Pixel breit. Daher: em's.. die kümmern sich

soll ich die schriftgrößen da auch abändern?

Wenn es die Lesbarkeit erhöht... aber ja. Aber Änderungen an der Schriftgröße lösen bei der Verwendung von em als Seitenbreite und Maßangabe für die Bruchpunkte große Änderungen aus. Immer Vorsicht walten lassen.

 

[rest0ck]

Das macht mich grad Wahnsinnig. Nichts funktioniert, wie ich es mir erhoffe.
Padding oder Margin in % ist unterschiedlich, je nach Inhalt .. so verrutscht alles und die Seite sieht total murks aus.. bin mega verwirrt.
Und ich sehe auch keinen unterschied wenn ich em/rem nutze im vergleich zu px, ehrlich gesagt. Sieht bei mir jetzt zumindest auf handy und PC genau so aus wie vorher :|

 

[Daaron]

Den Unterschied merkst du oftmals erst, wenn du mal zoomst. Strg+Mausrad verhält sich unterschiedlich bei em und px.

 

[rest0ck]

Hm, wird in beiden Fällen mini ._.

 

[Daaron]

http://goldilocksapproach.com/demo/
http://webdesign.tutsplus.com/articles/taking-the-erm-out-of-ems--webdesign-12321

 

[Madman1209]

Hi,

@Daaron

Wenn wir gerade schon mal beim Thema sind: gibt es irgendwelche Frameworks, mit denen sich so etwas mit wenig Aufwand und sauber realisieren lässt? Oder ist hier "Handarbeit" der bessere Weg aus deiner Erfahrung? Würde mich interessieren. Man findet so Sachen wie das "Less Framework", aber ich weiß nich so genau was ich davon halten soll. Nutzt du so etwas oder würdest du eher Abstand nehmen?

VG,
Mad

 

[rest0ck]

Ich lese mir das alles später mal durch, vielleicht auch noch auf der Arbeit, ist nicht so viel zu tun heute :>
Mein Problem war jetzt nicht das Mobil machen, es war allein schon das anordnen in %

Die 2 großen Divs auf der Startseite z.B., wenn ich da sage width:50% fehlt natürlich margin. Dann mach ich 1% margin right, will das aber nur beim first-child oder first-kind-of-type (oder so) .. allein das funktioniert nicht, mache also links und rechts 1% margin, dann muss das aber überall so sein, sonst passt nichts mehr. Dann sind da die 8 Bilder, die ich dann ja auch in % angeben muss .. die werden dann auf einmal ultra winzig und verschieben sich total nach rechts, weil % auf einmal wieder anders fungiert .. plötzlich passt gar nichts mehr. Der Abstand der Überschriften war auch immer verschieden, weil padding in % auch dazu führt, dass es immer unterschiedlich ist und mit em ist es im Grunde genau das gleiche wie mit px (wenn ich rem nutze, hol ich einfach pxanzahl/16), verstehe das alles grad nicht >.<

Bezüglich frameworks: So ein grid ist ja im Grunde das gleiche prinzip, da gibt es u.a. auch "Cute Grids", sehr minimalistisch ..

 

[Speedy.]

Die 2 großen Divs auf der Startseite z.B., wenn ich da sage width:50% fehlt natürlich margin. Dann mach ich 1% margin right, will das aber nur beim first-child oder first-kind-of-type (oder so) .. allein das funktioniert nicht, mache also links und rechts 1% margin, dann muss das aber überall so sein, sonst passt nichts mehr

Einfache Lösung: gib den beiden DIVs eine ID oder eine Klasse, mit denen du sie sauber ansprechen kannst.

<div id="left"></div>
<div id="right"></div>

Oder so ähnlich. Dann kannst du dem linken DIV ein margin-right von 1% und eine width von 49% vergeben und es sollte funktionieren.

Dann sind da die 8 Bilder, die ich dann ja auch in % angeben muss .. die werden dann auf einmal ultra winzig und verschieben sich total nach rechts, weil % auf einmal wieder anders fungiert

Richtig, wenn du Bildern eine Breite von 1% vergibst, dann nehmen sie 1% der Breite des umschließenden Containers ein. Wenn um deine Bilder also ein div mit einer Breite von sagen wir 100px hast, dann wäre dein Bild nur 1px breit...
Ich persönlich mag es nicht, Bildproportionen in % anzugeben. Hier finde ich px tatsächlich richtig und gut, im Notfall kannst du auch mit max-width und height: auto setzen, um die Bilder bei kleineren Auflösungen anzupassen.

Der Abstand der Überschriften war auch immer verschieden, weil padding in % auch dazu führt, dass es immer unterschiedlich ist und mit em ist es im Grunde genau das gleiche wie mit px (wenn ich rem nutze, hol ich einfach pxanzahl/16), verstehe das alles grad nicht >.<

Für solche Abstände würde ich niemals % nehmen, sondern immer em. Ist einfach einfacher. Und ich persönlich schaue auch nicht nach, das ich px durch 16 teile um auf em zu kommen (was ja richtig ist), ich mache das eher nach optischer Sichtung und schaue, ob der Abstand passt.

Bezüglich frameworks: So ein grid ist ja im Grunde das gleiche prinzip, da gibt es u.a. auch "Cute Grids", sehr minimalistisch ..

Ich habe bereits mit dem 960 Grid System, dem Twitter Bootstrap und Skeleton gearbeitet und bin letzlich immer wieder zur handgeschriebenen Lösung zurückgekehrt. Der Grund ist, dass ich für meine Projekte keine vollwertigen Grids benötige und einfach selbst ein paar Zeilen Code schreibe, was performanter und einfacher ist. Zudem sind die wenigsten Grid-Systeme voll responsive (Bootstrap ist da mit dem Mobile-First Ansatz am besten, aber auch ziemlich fett), sodass du wieder bei px bist...

 

[rest0ck]

Einfache Lösung: gib den beiden DIVs eine ID oder eine Klasse, mit denen du sie sauber ansprechen kannst.

<div id="left"></div>
<div id="right"></div>

Oder so ähnlich. Dann kannst du dem linken DIV ein margin-right von 1% und eine width von 49% vergeben und es sollte funktionieren.



Richtig, wenn du Bildern eine Breite von 1% vergibst, dann nehmen sie 1% der Breite des umschließenden Containers ein. Wenn um deine Bilder also ein div mit einer Breite von sagen wir 100px hast, dann wäre dein Bild nur 1px breit...
Ich persönlich mag es nicht, Bildproportionen in % anzugeben. Hier finde ich px tatsächlich richtig und gut, im Notfall kannst du auch mit max-width und height: auto setzen, um die Bilder bei kleineren Auflösungen anzupassen.



Für solche Abstände würde ich niemals % nehmen, sondern immer em. Ist einfach einfacher. Und ich persönlich schaue auch nicht nach, das ich px durch 16 teile um auf em zu kommen (was ja richtig ist), ich mache das eher nach optischer Sichtung und schaue, ob der Abstand passt.



Ich habe bereits mit dem 960 Grid System, dem Twitter Bootstrap und Skeleton gearbeitet und bin letzlich immer wieder zur handgeschriebenen Lösung zurückgekehrt. Der Grund ist, dass ich für meine Projekte keine vollwertigen Grids benötige und einfach selbst ein paar Zeilen Code schreibe, was performanter und einfacher ist. Zudem sind die wenigsten Grid-Systeme voll responsive (Bootstrap ist da mit dem Mobile-First Ansatz am besten, aber auch ziemlich fett), sodass du wieder bei px bist...

Danke für dir Antwort.
Kann mir jemand bitte kurz zusammenfassen, wann ich nun em, wann px und wann am besten % nutze? Bin sehr verwirrt.

Hab grad paar Seiten angeschaut, die nutzen für Wrapper eigentlich fast alle width:Xpx oder max-width:Xpx, aber sogut wie nie % oder em. Im Wrapper wird meistens mit % gearbeitet, macht ja Sinn, obwohl da ja auch max-width funktionieren würde?

Schriften und Abstände von Schriften -> em

Abständige von Containern? em oder px? Ich schätze mal em.

Will das gante jetzt erst mal an einer neuen leeren Seite testen ^.~

 

[Daaron]

Wenn wir gerade schon mal beim Thema sind: gibt es irgendwelche Frameworks, mit denen sich so etwas mit wenig Aufwand und sauber realisieren lässt? Oder ist hier "Handarbeit" der bessere Weg aus deiner Erfahrung?

Ich persönlich schreib lieber alles selbst. Viele Frameworks bringen einen Berg CSS Resets mit, die man gar nicht will. Will ich, dass z.B. das Standard-Verhalten von ul & ol global überschrieben wird? Ganz sicher nicht, denn um es dann für Listen wieder zu aktivieren muss man Dutzende Zeilen CSS schreiben. Dasselbe gilt für die Standard-Abstände von <p>, <h*>,....

Meine Präferenz liegt aber auch n ganzes Stück weit daran, dass ich fast ausschließlich mit Contao oder Magento arbeite und deren Markup jeweils eben nicht in die Schemata der üblichen Frameworks passt. Eine eigene CSS-Lösung geht da viel schneller als das gesamte Markup umzubiegen.

Die 2 großen Divs auf der Startseite z.B., wenn ich da sage width:50% fehlt natürlich margin.

Genau deshalb mein Verweis auf eine eigene, sinnvolle Klassenstruktur. Wenn du einheitlich Breiten & Abstände in sinnvoll benannten Klassen lagerst, brauchst du deinen Elementen nur selbige mitzugeben.

Ich persönlich mag es nicht, Bildproportionen in % anzugeben. Hier finde ich px tatsächlich richtig und gut, im Notfall kannst du auch mit max-width und height: auto setzen, um die Bilder bei kleineren Auflösungen anzupassen.

Bilder legt man auf:
max-width: 100%;
height: auto;
und lässt den umschließenden Container (v.a. <figure>) entscheiden, wie groß es wird.

Für solche Abstände würde ich niemals % nehmen, sondern immer em. Ist einfach einfacher. Und ich persönlich schaue auch nicht nach, das ich px durch 16 teile um auf em zu kommen (was ja richtig ist),

px/16 ist nur dann = em, wenn man Schriftgröße 16 nimmt... Tut man das? Immer? Neee, spätestens <h*> hat andere.
Und Abstände sollten in derselben Einheit wie die Breite angegeben werden, andernfalls kommt man in Teufels Küche. Stell dir mal folgendes vor:

2 Elemente nebeneinander, 50/50
width:48%;
margin: 0 10px;
float:left;
Was passiert, wenn das umfassende Element jetzt schmaler als 1000px wird?
Ich sag ja: Teufels Küche. Jetzt fängst du entweder an, mit calc() zu arbeiten (was bei locker 20% deiner Kunden nicht geht), oder du wechselst doch auf "Prozente überall".

Ich habe bereits mit dem 960 Grid System,...

960Grid ist ganz schlimm. Was will ich mit 960px Maximalbreite? 40% meiner Besucher haben Mobile Devices (und kommen maximal bis 960), aber der Löwenanteil der restlichen 60% fährt 1600px und mehr horizontal. Denen kann ich getrost ne ~1100px breite Seite bieten, evtl. mit größerer Schrift, höher aufgelösten Bildern, zusätzlichen Funktionen bzw. übersichtlicheren Darstellungen,... Das tut der Lesbarkeit keinen Abbruch, denn die liegt einzig und allein an der Zeilenlänge.

 

[rest0ck]

Ich komme mir so blöd vor. Bin immer noch verwirrt. Wie sage ich denn z.B.

wrapper{
max-width: 1000px;
2 container nebeneinander
float: left;
width: 49%
margin-left/right: 1%
}

Dann ändert sich der Abständig je nachdem, wie groß das Fenster ist.
Ich will jetzt aber immer den selben Abstand haben, aber die Größe in % angeben. Allein daran scheitert es bei mir schon.

/e und dann kommt ja noch padding hinzu <.<

/e2
box-sizing: boder-box, ..damit scheint es zu funktionieren

 

[Speedy.]

Bilder legt man auf:
max-width: 100%;
height: auto;
und lässt den umschließenden Container (v.a. <figure>) entscheiden, wie groß es wird.

Kann man machen, trotzdem nicht mein Favourit. In vielen Fällen schreibe ich bei Bildern noch feste Pixelwerte und ändere diese bei Media Queries, um den kleineren Auflösungen gerecht zu werden. Das Twitter Bootstrap, mit dem ich mal eine Seite gemacht habe, arbeitet so ähnlich wie du, aber da bin ich (wohl auch aufgrund von etwas Unwissen) ziemlich auf die Nase mit gefallen.

2 Elemente nebeneinander, 50/50
width:48%;
margin: 0 10px;
float:left;
Was passiert, wenn das umfassende Element jetzt schmaler als 1000px wird?
Ich sag ja: Teufels Küche. Jetzt fängst du entweder an, mit calc() zu arbeiten (was bei locker 20% deiner Kunden nicht geht), oder du wechselst doch auf "Prozente überall".

Dem stimme ich teilweise zu. Klar, bei Layoutangaben etwa sollte man stets mit den gleichen Einheiten arbeiten, sprich in deinem Fall Prozent. Mach ich auch so. Aber doch nicht bei dem Abstand von Überschriften nach unten oder oben? Das leuchtet mir nicht ein, da setze ich lieber auf em, zumal meine Schriftgrößen sowieso in em angegeben sind.

960Grid ist ganz schlimm. Was will ich mit 960px Maximalbreite? 40% meiner Besucher haben Mobile Devices (und kommen maximal bis 960), aber der Löwenanteil der restlichen 60% fährt 1600px und mehr horizontal. Denen kann ich getrost ne ~1100px breite Seite bieten, evtl. mit größerer Schrift, höher aufgelösten Bildern, zusätzlichen Funktionen bzw. übersichtlicheren Darstellungen,... Das tut der Lesbarkeit keinen Abbruch, denn die liegt einzig und allein an der Zeilenlänge.

Das 960 Grid System habe ich auch damals kennengelernt, als Webentwicklung noch nicht so weit mit Responsive Design und hohen Auflösungen war. Damals hat es Spaß gemacht, damit schnell Grids zu realisieren, aber ich stimme dir zu - heute ist das absolut nicht mehr empfehlenswert.

@rest0ck

Den immer selben Abstand mit reinen Prozenten kriegst du so nicht hin. Prozente sind eben immer variabel der Browsergröße bzw. des umliegenden Elementes im Dokument gegenüber. Was dir bestimmt helfen könnte ist das CSS Box Model. Normalerweise werden Abstände wie margin oder padding zu der Breite eines Elementes addiert, aber du kannst das auch umbiegen:

div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Das sorgt dafür, dass auf alle div-Elemente der Abstand (also margin oder padding) nicht auf die Gesamtbreite dazugerechnet werden, sondern die Gesamtmaße erhalten bleiben und der Inhalt nach innen geschoben wird.
Schwer zu erklären, siehe am besten hier: http://css-tricks.com/the-css-box-model/

Jedenfalls kannst du dann auch mit festen px- oder em-Werten arbeiten.

 

[Daaron]

1.) Ein Wrapper umhüllt üblicherweise ALLES, alle Spalten etc. Ein Wrapper hat keine prozentuale Breite, sondern entweder eine feste Breite oder, was besser ist, eine max-width.
2.) Wie ich schon beschrieben hab: Prozentuale Breiten (die eben für vollkommen freie Breiten nötig sind) und feste Abstände vertragen sich nicht. Merkt aber am Ende auch keiner, denn wer ändert schon die Fenstergröße und zählt dabei Pixel? Entscheidend ist, ob der Gesamteindruck stimmig ist. Denk immer daran: Der Goldene Schnitt ist auch kein fester Pixelwert.

Ergänzung (28. Februar 2014)

Aber doch nicht bei dem Abstand von Überschriften nach unten oder oben? Das leuchtet mir nicht ein, da setze ich lieber auf em, zumal meine Schriftgrößen sowieso in em angegeben sind.

Ne, natürlich nicht. Ne <h1> hat ihr margin: 1.5em 0; und gut. Natürlich ist sowas nicht prozentual.