Welche Tools für bildschirmunabhängiges Design?

[FredBow]

Hallo,

habt ihr ein paar Tipps aus der Praxis, welche Tools für bildschirmunabhängiges Design sinnvoll sind?

Mein Hintergrund
- baue seit Web1.0 Webseiten
- HTML, CSS, JavaScript, PHP gut bekannt
- bisher Frameworks wie modx verwendet
- bisher Frontend & Design weitestgehend per Hand gecoded
- bin aber kein Guru, der nachts von nichts anderem träumt

Ich steige jetzt von Pixel-Design auf bildschirmunabhängiges Design um. Wühle mich seit Wochen durchs Netz, probiere viel aus und bin ziemlich am "Fluchen".

Ich weiß, dass bei bildschirmunabhängigem Design zwischen responsiv, adaptiv und fluid unterschieden wird. Meine Tendenz geht im Moment zum fluid. Vermutlich hängt das aber auch von den Anforderungen ab und man muss ggf. individuell entscheiden, was man nimmt.

Eine erste Erkenntnis ist: von Hand gecoded birgt beim dynamischen Design verflixt viele Stolperfallen. Mehr als beim Pixel-Design. (Ist zumindest mein Gefühl). Viele Aufgaben fallen immer wieder an (z.B. Text oder Bilder horizontal und vertikal zentrieren. Schriftgrößen nachtrimmen - die sind ja nicht fluid, etc.)

Für spezielle Aufgaben (Slideshows, Menüs, etc.) gibt es ja bereits diverse "Bausteine".

Gibt es sowas aber auch für diese Basics? Und am besten als Baukasten? So dass man sich nicht immer wieder aufs Neue mit den selben Fragen beschäftigen muss. Ich hab das Gefühl, ich muss dringend den Aufwand reduzieren. Sonst brauch ich Wochen für eine kleine Webseite

Im ersten Ansatz könnte man einfach Wordpress nehmen, dort ein responsives Design installieren und schön ist. Aber als Designer geht mir a) das doch gegen den Strich und b) kann ich so vermutl. nicht immer optisch das umsetzen, was mir gerade vorschwebt. Da scheinen mir die Grenzen doch zu eng.

Kann man sowas überhaupt automatisieren? Oder baut man sich das wirklich immer per Hand? Habt ihr da Erfahrungen und Tipps?

Fred

 

[lachender_engel]

Ein Bildschirmunabhängiges Design setzt immer auf ein Gitter (grid). Daher ist es für Dich ein guter Einstieg Deine Arbeit über ein solches Grid-System/Framework aufzubauen.
Zwei Vertreter die auch Fluid können sind zum Beispiel PROFOUNDGRID und natürlich Bootstrap.
Aus meiner Erfahrung kann ich Dir sagen, dass Du nicht jedes Layout als fluid umsetzen kanns. Ich versuche auch zuerst die Umsetzung auf fluid. Doch je nach Anordnung von elementen oder "Besonderheiten", die sich die Designer ausdenken, passt das manchmal nicht.

(z.B. Text oder Bilder horizontal und vertikal zentrieren. Schriftgrößen nachtrimmen - die sind ja nicht fluid, etc.)

Doch, auch Schriftgrößen kannst Du "fließen" lassen.

 

[FredBow]

Prima, danke für die Tipps. Ich schau mir die beiden mal an.

Doch, auch Schriftgrößen kannst Du "fließen" lassen.

Ich kenne da nur die Methoden:

a) mittels media queries die Schriftgröße trimmen. Ist aber mit ziemlichen Stufen versehen.
b) mittels der Einheiten vw/vh. Eigentlich sehr schick. Aber da ist die Unterstützung wohl noch nicht vollständig.

em, rem und % richten sich ja alle nicht nach der Browserbreite/-höhe.

Gibt es sonst noch einen "Trick"?

Fred

 

[lachender_engel]

em, rem und % richten sich ja alle nicht nach der Browserbreite/-höhe.

Gibt es sonst noch einen "Trick"?

Der "Trick" ist mit Vererbungen zu arbeiten. rem und em sind da (aus meiner Sicht) die erste Wahl. Beide richten sich nach den Einstellungen im Body-Tag. rem funktioniert wie em, aber bleibt relativ zum root-Element der Seite. em bleibt relativ zum Eltern-Element.

Die "Kunst" dabei ist eben CSS sauber zu verschachteln. Wenn Du das einmal drauf hast, dann ist die Arbeit sehr schnell erledigt. Denn im Regelfall brauchst Du nicht mehr als 3-5 Definitionen von Schriftgrößen

 

[FredBow]

Aber wenn ich das richtig verstanden habe, dann ist em - trotz Vererbung - doch auch immer statisch.

Beispiel:
Ich habe ein simples Viereck. 50% vom Browserfenster breit. In dessen Mitte steht ein Text. Der Text soll immer fast die ganze Fläche des Vierecks annehmen. Fast, heißt gefühlt 70-80%.

Also im HTML steht

<div id="viereck">
Hallo, ich bin ein Welttext.
</div>

im CSS dazu

#viereck{
 width:50%;
 background:red;
 font-size:1.5em;
 text-align:center;
}

Bei einer Breite von 800px füllt mit einer font-size von 1.5em (und keiner speziellen Einstellung im Browser) der Text nun so ca. 80% des Vierecks.

Ziehe ich das Browserfenster breiter, wird zwar das Viereck breiter, aber der Text bleibt starr. Das kann ich meines Wissens nur ändern, wenn ich mittels media queries die font-size Schritt für Schritt anpasse oder wenn ich statt em als Einheit nun vw nehme.

In wie fern kann mir bei so einem Beispiel Vererbung helfen? Verstehe ich was falsch oder sehe ich den Wald vor Bäumen nicht? *amKopfKratz*

Fred

 

[Gelöschtes Mitglied 133165]

Probier mal "Edge" und "Animate" von Adobe aus. Nicht sehr bilig und auch noch lange nicht perfekt, aber beim 30-tägigen-Test kannst Du ausprobieren, ob es das ist, was Du Dir vorstellst.

 

[tr4ze]

In wie fern kann mir bei so einem Beispiel Vererbung helfen? Verstehe ich was falsch oder sehe ich den Wald vor Bäumen nicht? *amKopfKratz*

Gar nicht !!!
Geparsed ist in diesem Fall geparsed.Da hilft nur die font-size per Javascript anzupassen.

Die Frage währe ob das Sinn macht, gerade font-size ist so ein Atribut wo du eigentlich immer davon ausgehen solltest das dein CSS vom Custom Browser CSS des Benutzters überschrieben wird.
Du weisst also nie was tatsächlich an Werten vorhanden ist. Was das für Nebenefffekte haben kann überlasse ich mal deiner Fantasie.

 

[groove]

Schau dir mal TYPO3 6.2. Bootstrap, mit TypoScript beschäftigen und du kannst deine "Bausteine" immer wieder verwenden.
Zum Bispil auf dieser Basis hier experimentieren.
http://www.pas-solutions.ch/pas-solutions-gmbh/responsive-typo3-template-fuer-typo3-6-2/
Ansonsten hißt das wichtigste Tool Wissen ;-)

 

[FredBow]

Ansonsten hißt das wichtigste Tool Wissen ;-)

OK, wenn ich das recht verstehe, dann bleibt es wirklich bei viel Handarbeit, einem selbst gezimmerten Baukasten, mit Unterstützung eines Frameworks und ein paar FrontendTools.

Bootstrap hab ich mir angesehen. Das sieht wirklich mächtig aus. Da ist auch viel dabei, was man sich sparen kann, neu zu coden.

Typo3 schau ich mir auch nochmal an.
Danke für die Tipps!

 

[Myhar]

Was ist das für ein mit falscher Information gefüllter Beitrag?

Gar nicht !!!
Geparsed ist in diesem Fall geparsed.Da hilft nur die font-size per Javascript anzupassen.

Dafür sind doch mediaqueries da. Da kann man die font-size auch displaygrößenabhängig steuern.

Die Frage währe ob das Sinn macht, gerade font-size ist so ein Atribut wo du eigentlich immer davon ausgehen solltest das dein CSS vom Custom Browser CSS des Benutzters überschrieben wird.
Du weisst also nie was tatsächlich an Werten vorhanden ist. Was das für Nebenefffekte haben kann überlasse ich mal deiner Fantasie.

Auch das ist so nicht korrekt. Es stimmt, jeder Browser lässt sich individuell einstellen und man darf NIE davon ausgehen, dass man sich auf eine gleiche Darstellung auf verschiedenen Browsern verlassen darf. Aber die wenigsten passen die CSS des Browsers an (und die, die es tun, wissen meistens von den Auswirkungen)
Man kann also nur von den Standardwerten ausgehen und dafür sorgen, dass es sich bei veränderten Werten nicht ungewollt verhält.