Halunken-Tag: Inhalte auf Webseiten – anpassen und ausprobieren

Veröffentlicht von Bastian - 2. Mai 2017

Immer wieder werden neue Webseiten, Landingpage und ähnliche Seiten geplant, konzipiert, designet und umgesetzt. Dabei spielen die richtigen Inhalte eine wichtige Rolle. Angefangen von Texten, Textlängen, Bildern und deren Größen bis hin zu eingesetzten Elementen und Funktionen. Das Zusammenspiel von allem was sich auf einer Webseite befindet entscheidet am Ende darüber ob diese vom Kunde

halunkentag_inhalte

Allgemeine Tipps

Texte

Wichtig ist dabei zu beachten, dass Browser Schriften unterschiedlich darstellen (rendern). Dies kann teilweise dazu führen, dass ein Text in Firefox länger dargestellt wird als der exakt gleiche Text in Chrome. Am stärksten unterscheidet sich ein Text in Safari (Mac). Teilweise werden Schriften kleiner bzw. etwas größer dargestellt, wobei der wichtigste Punkt allerdings die Laufweite der Schrift ist. Tipp: Es sollte immer darauf geachtet werden, dass z.B. eine Überschrift mit beschränkter Anzahl von Zeichen nie den ganzen Platz ausnutzt sondern immer 1 oder 2 Zeichenlängen Abstand hält.

Bilder

Bei Bildern muss darauf geachtet werden, dass diese in einer korrekten Auflösung hinterlegt sind. Dies ist vor allem für die mobile Darstellung wichtig. Die meisten neuen Geräte haben HIGH DPI Dispalys wie beispielsweise Retina bei iOS Geräten. Hierbei handelt es sich um Displays welche eine ca. doppelte so hohe Pixeldichte haben. Dabei spricht man dann von CSS-Pixel, Bild-Pixel und Device-Pixel. Genauer Informationen dazu gibt es Hier Tipp: Als Faustregel gilt: Maximale Darstellung eines Bildes x 2. Beispiel Bildwechsel ab Breakpoint 1000px (Tablet) auf 100% Breite x 2 = 2000px Breit Höhe entsprechend ebenfalls skalieren.

 

Texte in Firefox tauschen

Als erstes wird die gewünschte Webseite aufgerufen. Anschließend auf das zu bearbeitende Element bzw. den Text mit der rechten Maustaste klicken und Anschließend „Element untersuchen“ anklicken. Es öffnet sich nun eine entsprechende Darstellung diese kann wahlweise unten oder am rechten Rand aufgehen. Das nun geöffnete zusätzliche Fenster sind die Developer Tools. Mit Hilfe dieser Tools können unterschiedliche Dinge einer Webseite untersuchen werden. Angefangen von einer einfachen Live Manipulation von Inhalten bis hin zur Prüfung des Request und Response Verhalten von Server. Um nun einen Text auf der Live-Seite zur Laufzeit zu manipulieren muss einfach nur der entsprechende Text im Developer Tool Fenster bearbeitet werden. Sollte hier noch nicht der richtige Text ausgewählt sein muss dieser entweder erst ausgeklappt werden oder mit dem Inspektor nochmal explizit ausgewählt werden.

webseitentesten             Hier ein Video das den Inspektor sehr gut darstellt und auch nochmal alle Tricks beim Manipulieren von Daten erklärt. https://www.youtube.com/watch?v=RBinFeVZz0E

Texte in Chrome tauschen

Ähnlich wie in Firefox bietet Chrome ein Developer Tool an. Auch hier wird zunächst mit der rechten Maustaste auf das Element geklickt und „Untersuchen“ ausgewählt. Nun öffnen sich die Developer Tools am unteren oder rechten Rand (oder als extra Fenster – je nach Einstellung). Das Vorgehen ist dabei exakt der gleiche wie bereits bei Firefox beschrieben.

webseitentesten             Video mit Erklärung zur Chrome Developer Console: https://www.youtube.com/watch?v=nV9PLPFTnkE

Bilder in Chrome und Firefox tauschen

Der Ablauf hierbei ist exakt der gleiche wie bereits bei Texten. Ein Bild wird der rechten Maustaste angeklickt und es wird „Element Untersuchen“ bzw. „Untersuchen“ ausgewählt. Es öffnet sich nun das entsprechende Developer Tool. Der Tag <img> enthält das Attribut src=„BILD URL“. Die Bild URL ist dabei das wichtigste Element. Diese URL gibt an was für ein Bild hier im Moment ausgespielt wird. Wird hier die URL durch eine andere ausgetauscht, wird das neue Bild ausgegeben. Achtung: Bilder müssen dafür Online verfügbar sein. Als Beispiel der Link zum Logo des Blogs: http://blog.internet-halunken.de/wp-content/uploads/2015/05/internet_halunke-e1432109970400.png Der HTML Code würde dann wiefolgt aussehen:

<img src="http://blog.internet-halunken.de/wp-content/uploads/2015/05/internet_halunke-e1432109970400.png"/>

Schriftfarben, Schriftgrößen und Styling ändern

In den Developer Tools können auch CSS Angaben ganz einfach abgeändert und getestet werden. Wird ein Element untersucht und ist das entsprechende Developer Tool geöffnet wird zum einen der HTML Code aber auch das CSS-Styling angezeigt. Hier können Beispielsweise Styling Regeln wie Font-Size, Font-Family, Color, Background-Color usw. geändert werden. Die Änderungen werden dabei direkt auf die Webseite zur Laufzeit dargestellt. Dies hat keinen Einfluss auf die eigentliche Webseite und ist nur für einen Selbst zu diesem Zeitpunkt sichtbar. Nach einem Reload der Seite ist diese wieder wie zuvor. Man Manipuliert das Aussehen somit lediglich zur Laufzeit. Interessante Werte für Texte: font-size: XY (Schriftgröße z.B. in px) color: XY (Schriftfarbe z.B. als #Wert oder Bezeichnung wie Red, blue usw.) font-family: XY (Schriftart) Interessante Werte für Elemente: height: Höhe (Meist in px) width: Breite (Achtung: Meist in % angegeben für reponsive) Allgemeine Werte zum Testen: display: none (Element ausblenden) margin: Äußerer Abstand padding: Innerer Abstand float: Ankern von elementen nach z.B. links oder rechts border: Umrandung (z.B. border: 1px solid black für Rand mit Stärke 1px in Schwarz) background-color: Hintergrundfarbe / Füllfarbe von Elementen

 

Bildgrößen von Webseiten auslesen

Ein Bild mit der rechten Maustaste anklicken und „Element untersuchen“ bzw. „Untersuchen“ auswählen. Es öffnet sich nun das Developer Tool Fenster. Im Fenster wird nun der entsprechende HTML Code des Bildes angezeigt. Fährt man mit der Maus über die URL des Bildes im <img>-Tag werden die Informationen wie z.B. die Größe des Bildes darstellt. Hierbei gibt es einen Wert der Größe, falls die Bildgröße Fix definiert ist bzw. zwei Werte wenn ein Bild größer hinterlegt ist als es eigentlich ausgespielt wird.

Bild mit Fixen Werten: webseitentesten                   Bild mit zwei Werten: Der 1. Wert ist dabei die angezeigte Größe, der 2. Wert ist die Größe des Hinterlegten original Bild (siehe Allgemeine Tipps – Bilder) webseitentesten

 

 

 

 

 

 

Webseiten responsive testen

Browser wie Firefox und Chrome bringen die Funktion mit, Webseiten für mobile Größen zu testen. Dies ersetzt nicht das Testen auf realen mobilen Geräten, aber kann zumindest eine Webseite auf einer bestimmten „Display Größe“ anzeigen und somit sehr schnell Fehler im reponsiven CSS einer Seite finden. Tastenkombination in FireFox: STRG + UMSCHALT + M. Die Webseite wird nun in einen entsprechenden Rahmen eingebettet. Die Größe des Rahmens Stellt die Größe eines mobilen Gerätes dar. Der Rahmen kann dabei nach Belieben gezogen werden oder es können vordefinierte Größen verwendet werden (Beispielsweise 320×480 für die Darstellung im Rahmen eines iPhone 5). Das gleiche gilt auch für Chrome. Hier versteckt sich der Toggle innerhalb des Developer Tools. Ein beliebiges Element auf der Seite mit der rechten Maustasten anklicken und „Untersuchen“ Auswählen. Rechts neben mit dem Inspector Icon befindet sich nun das Icon für „Toggle Device Toolbar“. Durch Klick auf das Icon wird eine neue Leiste hinzugefügt. Hier kann man nun die Größe des mobilen Rahmen einstellen oder Rahmen einfach nach Belieben ziehen. Hier gibt es viele verschiedene Vordefinierte Größen für unterschiedliche Geräte. Über das 3 Punkte Menü am Rahmen Rechts können weitere Einstellungen vorgenommen werden. Beispielsweise „show media queries“ über diese Einstellung werden die Breakpoints einer Webseite sichtbar. Hiermit lässt sich einfach und schnell herausfinden bei welchen Größen eine Webseite anfängt sich entsprechend des Gerätes anzupassen.

Auch hierfür gibt es ein sehr gutes Video das die Funktionen nochmals zeigt und erklärt: https://www.youtube.com/watch?v=IiMcvPBp94E

Styles in Firefox und Chrome tauschen (Fortgeschritten)

In Firefox und Chrome mann man Webseiten dauerhaft für die eigene Darstellung umgestylen. Diese Änderungen greifen nur auf dem eigenen Rechner und haben keinen Einfluss für andere User. Der Nutzer kann dabei das Styling auch an andere Personen weitergeben. Diese können sich selbst dann das Styling für Ihren Browser einrichten. Dies Hilft vor allem dabei das Styling von Webseiten zu testen.

https://www.youtube.com/watch?v=FXpbTTwjMoI  

Nützliche Browser-Erweiterungen

 

Vortrag

Hier kann die PPT zum Vortrag heruntergeladen werden: webseiteninhalte-vortrag-20170309

Das könnte Dich auch interessieren

Design Thinking – Wozu das ganze Denken?

Der Begriff Design Thinking wird oft genannt, wenn es um Innovation und nutzerzentrierte Digitalprodukte geht. Aber was genau ist damit gemeint und wann ist es ...

Projektmanagement in Animes, Teil I: Erfolgreiche Projekte

Manchmal hat man Glück im Leben, und deine Arbeitskollegen sind genauso nerdy wie du selbst. Sie reden bei der Kaffeepause gerne über die neue Staffel Attack ...

Add-on für Firefox und Chrome erstellen

Heute lernen wir, wie wir ein simples Firefox- bzw. Chrome-Add-on erstellen. Dieses Add-on soll nichts weiter tun, als auf einer bestimmten Webseite ein Bild ei...