php-homepage.com

Bilder im Responsive Design - Responsive Images

Aus aktuellem Anlass (High Dpi und Retina Displays, 4k Monitore usw.),
Habe ich mich nochmal der Bilder- Problematik im responsivem bzw. mobilen Webdesign gewidmet.
Wofür ehemals Verrenkungen mit adaptive images und ähnlichem gemacht wurden mussten, gibt es nun auch Neues (picture-Element, media queries)
für responsive Bilder!

Einführung in CSS/CSS3 mit Beispielen

Aufgrund der Anfragen habe ich den Artikel "CSS in HTML einbinden"
um folgenden ergänzt bzw. erweitert:

"Drei Arten, CSS in HTML einzubinden, Vor- und Nachteile"

background

Hintergrundfarbe und Hintergrundbilder, auch Neuerungen mit CSS3

Farbverlauf - gradient mit CSS3

Farbverlauf mit CSS3, gradient mit CSS, Beispiele

CSS3 Sinn und praktische Beispiele

CSS3 ist noch in Entwicklung, erfährt aber immer breitere Browserunterstützung.
Warum und wie soll/kann man CSS3 einsetzen?

Adaptive Bilder und Skalierung

Responsive Design und das Problem mit den skalierten Bildern.
Was sind Adaptive Images? Und was hat Skalierung mit Responsivem Design zu tun?

Mobile Friendly

Wie gestalte ich eine Webseite mobiltauglich, nochmal kurze Erklärung der Techniken, adaptives (media queries), responsives Design.

Responsive Design

"flüssiges Design", oder auch flexibles layout wird für Webdesigner mehr und mehr ein (umstrittenes) Thema. Umstritten deshalb, weil es keine "optimale" Lösung gibt, beim Thema fluid layout spielen subjektive Kriterien meist eine größere Rolle. Jemand der mit einer "Standardauflösung" von 1024*768 Pixeln (4:3), 1280*720 Pixeln (16:9 Breitbild) oder ähnlichen im Internet surft, wird im ersten Moment nicht nachvollziehen können wie wichtig ein flexibles Layout für Webmaster sein kann. Längst benutzen nicht mehr über 90% der Internetuser eine dieser "Standardauflösungen" und nicht zuletzt der Boom mobiler Endgeräte in den letzten Jahren erfordert ein Umdenken.
update 02/2015
Der Begriff Responsive Design, bzw. Responsive Layout wurde erst in den letzten Jahren geprägt. Schon amüsant, wie fluid layout anfangs nur von einer Minderheit von (belächelten)Webmastern eingesetzt wurde und nun (weiterentwickelt) als "Responsive Webdesign" breiten Anklang findet:-)

Layout mit Divs oder Tabellen?

Egal mit welchen Mitteln man eine homepage erstellt, purem html und css, eingebauten (php) scripten, oder mittels cms.
Das "Grundgerüst", sprich grobe layout der Seite ist die Basis für das gesamte Projekt. Hat man früher (aus Bequemlichkeit?) viele Webseiten mittels Tabellen formatiert, so geht man seit einiger Zeit vermehrt dazu über, das layout über divs zu realisieren.
update 02/2015
Auch hier fand in den letzten Jahren ein Umdenken statt und Tabellenlayouts sind im Großen und Ganzen verpönt, Tabellen sollten nur noch für ihren eigentlichen Zweck, nämlich der Darstellung von Daten, verwendet werden!

CSS Einführung

Cascading StyleSheets sind Dateien (*.css), die verwendet werden, um Webdokumente zu formatieren. CSS ist eine Stilsprache, hier werden sämtliche Informationen für die Darstellung und Formatierung (layout) einer Internetseite abgelegt. Der große Vorteil in der Verwendung von stylesheets liegt in der Trennung von

Dies ist nicht nur nötig für ein semantisch sauberes (x)html, sondern erleichtert auch die Wartung bestehender Webseiten.

update 02/2015

Aktuell befindet sich CSS in der Version 3 in Entwicklung,wird auch schon längere Zeit eingesetzt und von allen aktuellen Browsern richtig interpretiert, bis zur Verabschiedung (offiziellen Freigabe) wird aber noch einige Zeit vergehen.
Ich persönlich setze viele neue Features von CSS3 auch schon ein ("rounded corners" mit sprites (css2.1) ist je nach Designanforderung recht aufwändig und erfordert extra Grafiken,...)
Mit CSS3 genügt hier eine Zeile:
border-radius:...
Natürlich wird CSS3 von älteren Browserversionen nicht unterstützt, aber gut irgendwann müssen wir aufhören, den Internet Explorer 6.x 7.,... mittels "Verrenkungen" im Code (Browserweichen, Hacks, Workarounds) künstlich am Leben zu erhalten.
Nutzer, die den Browser nicht aktualisieren wollen (bei unseren Seiten mit insgesamt mehreren zigtausend Pageviews/Tag sind das etwa 3-4%),
müssen halt mit Sicherheitslücken und eingeschränkter Funktionalität leben und auf viele tolle neue Designfeatures verzichten.
Mit Stand Jänner 2016 ist die Zeit für Windows XP schon lange abgelaufen, "ältestes" Unterstütztes Betriebssystem von Microsoft ist Windows7,
für das der Internet Explorer 11 zur Verfügung steht. Selbst Google stellt die Unterstützung für Versionen<= Internet Explorer 9 für seine Dienste ein.
Somit sollte die kleinste genutzte Version des IE mittlerweile bei 10 liegen
und der Verwendung von CSS3 steht nichts mehr im Wege!

CSS in HTML einbinden

Um ein externes Stylesheet .CSS in html einbinden zu können, muss man dies natürlich dem browser mitteilen. Dies geschieht indem wir den link zu unserem externen stylesheet, zB. "style.css" <link rel="stylesheet" type="text/css" href="/style.css" /> in den "head" Bereich jedes Dokuments, das dieses Stylesheet verwenden soll, einbinden.
Natürlich muss man bei dieser relativen Verlinkung aufpassen, unter welchen Pfad die Datei tatsächlich liegt. href="style.css" würde bedeuten, die Datei "style.css" liegt im selben Verzeichnis/Ordner wie das Dokument, das es einbindet. Üblicherweise legt man für stylesheets aber ein eigenes Verzeichnis an, zB. /stylesheets. Man würde das css dann so einbinden: <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" /> Um xhtml konform zu arbeiten, schließen wir das "link-tag" mit einem backslash / am ende(bei html "nicht nötig")

CSS Tutorial, Fluid Layout

Passend zum Artikel Layout mit Divs oder Tabellen widmet sich dieser Teil des CSS-Tutorials dem Layout, sprich dem Grunddesign einer Homepage.

Ein flexibles "fluid" Layout passt sich dem Bildschirm des Betrachters an, deshalb verwenden wir keine bzw. nur die nötigsten Angaben in Pixeln. Erklärung zum Thema finden Sie hier:"fluid layout"
Größenangaben werden relativ angegeben, zB. in %, em, anstatt fixer Größen, wie man es (noch) sehr häufig findet. Der Vorteil resultiert in einem flexiblen layout der homepage, das heißt, egal wie groß das Anzeigegerät des Besuchers ist, die Seite füllt den ganzen Bildschirm aus.

CSS Tutorial - Vererbung

Einfach gesagt versteht man unter dem Begriff "Vererbung" in der Programmierung, das Weitergeben (vererben) von Eigenschaften einer Klasse zur untergeordneten Klasse.
Beispiel: Klasse "Mutter" ist eine Untergeordnete Klasse von "Familie"; weisen wir nun der Klasse Familie bestimmte Eigenschaften zu, dann "erbt" diese auch "Mutter" als untergeordnete Klasse,...
CSS ist zwar keine Programmiersprache, Vererbung funktioniert hier aber nach dem gleichen Schema. Vererbung in CSS erscheint auf den ersten Blick etwas verwirrend, ich versuche deshalb dies auch für Anfänger verständlich zu machen.

CSS Tutorial-Überschreiben-kombinieren

In diesem Teil lernen wir die Kombination von Selektoren, Überschreiben und das Zusammenfassen von Attributen.

CSS Tutorial-Selektoren

Dieses tutorial knüpft direkt an die Einführung in CSS an, die grundlegende Verwendung und Einbindung von CSS-Dateien setzen wir also schon voraus.
Ohne zu weit in die Theorie über (spezielle) Selektoren, Elemente, Attribute, usw. einzutauchen, legen wir gleich mit praktischen Beispielen los:-)
grundlegende Syntax von CSS:
Selektor {Eigenschaft:Wert;}
Der Selektor bestimmt welches Element ausgewählt wird, danach in geschwungenen Klammern die Eigenschaft: gefolgt vom gewünschten Wert. Beispiel: body {color:red}

Media Queries (CSS3)

Mit media queries lassen sich diverse Eigenschaften des Ausgabegerätes abfragen. Nützlich vor allem wenn man etwa die Auflösung des Gerätes wissen möchte, bzw. im Fall von Responsive Design, verschiedene CSS-Anweisungen für Anzeigegeräte mit unterschiedlicher Auflösung. Und das ganze ohne PHP oder Javascript:-)