Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML und CSS für Designer

Ausblenden und anzeigen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch Media Queries gesteuert, können Objekte nicht nur ein anderes Design erhalten sondern z.B. auch ganz ausgeblendet werden. So etwas kann leicht in eine Druckausgabe übertragen werden.

Transkript

Was bei der Umsetzung zu dem responsive Design noch nicht ganz so schön ist, das ist erstens der harte Übergang. Also wir haben hier eine Auflösung, die sehr groß ist, und wo jetzt die Schrift eigentlich eher klein ist. Und dann dieser Sprung. All das ist noch sehr heftig, und was auch ganz interessant sein könnte, ist noch die Darstellung dieser Grafiken. Man kann drüber streiten, ob ich so eine Grafik brauche oder nicht. Also, viel erkennen kann man zumindest bei kleineren Smartphones bei solchen kleinen Grafiken nicht mehr wirklich. Ich möchte das einfach nutzen, um Ihnen noch eine Möglichkeit zu zeigen, so etwas zum Beispiel auch auszublenden. Wenn wir also eine Auflösung haben, wo wir schreiben, alles was kleiner-gleich 768 Pixel ist, dann kann ich das Ganze auch wiederholen, und zwar, ich öffne das jetzt nochmal hier unten drunter. Die geschweiften Klammern darf ich nicht vergessen. So. Und zwar, wenn ich die 480 Pixel beispielsweise nehme, dann habe ich jetzt folgende Reihenfolge. Alles was kleiner-gleich 480 Pixel ist, mach bitte das, was hier drin steht. Und was von 480 Pixel bis maximal 768 Pixel geht, mach bitte das hier, und alles, was da drüber hinaus geht, ist die Basiseinstellung, die hier oben drüber steht. Also im Grunde ganz leicht nachzuvollziehen. Jetzt möchte ich bei den kleinen Auflösungen, zum Beispiel bei dem Smartphone, die Grafiken hier im Fliesstext nicht mehr angezeigt werden. Und das ist ganz einfach. Ich greif mir die section, denn da drin befinden sich die Images. Schreibe img, die geschweifte Klammer, und dann folgt display:none. Also, erklärt sich von alleine, und das speichere ich auch noch ab. Probieren wir es. Und Sie sehen, die Grafiken sind weg. Sobald ich größer werde, sind sie wieder da. Nur ein kleiner Tip, wenn das Ganze mit dem screen funktioniert, es einen weiteren Medientyp print gibt, dann haben Sie damit fast die Lösung, wie Sie jetzt für den Ausdruck, ein Dokument vorbereiten können, dass, wenn es gedruckt wird und auf das Medium Drucker trifft, dass beispielsweise die Header-Grafik nicht gedruckt wird. So eine Riesengrafik möchte ich vielleicht gar nicht auf meiner DIN A4 Seite haben, sondern mir reicht der Text beim Ausdruck, und dann schaltet man das bei media print einfach aus. Das Prinzip dürfte klar sein, und so könnte ich nun auch die Überschrift, ich greif mir mal grade, die, jetzt hier als Beispiel, als Überschrift mal raus. Das ist ok. Aber zum Beispiel hier, bei der 768, möchte ich das dann doch ein bisschen größer haben. Ich geh mal auf 3.5, und hier machen wir mal 2 draus. Ich hoffe, das reicht aus, dass man es sieht. So, ich speichere das ab. Und jetzt habe ich mehrere Stufen. Geh nochmal ganz nach oben. Also, großes Dokument, jetzt werde ich kleiner, jetzt kommt irgendwann der 768'er Sprung. Zack. Und jetzt wird es nochmal kleiner, jetzt folgt das Smartphone, Sie sehen, da war es. Das ist jetzt nicht viel, könnte man nochmal anpassen. Ich geh mal auf 4.5, und hier mal auf 3. Schauen wir einfach jetzt, was passiert. Und das wäre die Größe. Das Verhältnis passt schon wieder. Das wäre die Größe. Sie sehen, so sollte es eigentlich sein. Und dann sieht das Ganze auch wirklich vernünftig aus. Jetzt hab ich in kleinen Auflösungen keine Grafiken, in den großen Auflösungen kommen sie. Die Schriften passen. Und, herzlichen Glückwunsch. Sie haben ein komplexes Design mit jeder Menge Vorgaben aus dem Typographie-Bereich als Online-Magazin, und das auch noch responsive umgesetzt. Ok, ein kleines bisschen mit meiner Hilfe. Ich denke, Sie werden mir zustimmen, dass das gar nicht so kompliziert ist, und Sie den Einstieg in CSS und HTML gefunden haben. Jetzt geht es darum, das Ganze auszubauen, und sich für die einzelnen, separaten Ideen, die man im Kopf hat, noch weitere Befehle zu suchen, und nachzuschauen, wie macht das denn vielleicht jemand anderes.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!