Blog

Was ist Responsive Webdesign?

Der Begriff Responsive Webdesign umfasst verschiedene Techniken um eine Website an unterschiedliche Ausgabegeräte, wie Smartphone, Tablet, Smart-TV und neuerdings Smart-Watches und Autos auszuliefern. Erdacht oder zu erst erwähnt wurde der Begriff in diesen Artikel im Jahre 2010, von den im Bosten lebenden unabhängigen Webdesigner und Web-Developer Ethan Marcotte. Er schrieb auch das Buch Responsive Web Design dazu. Welches bereits in der zweiten Auflage erschienen ist.

In diesen kurzen Artikel will ich nur umreißen, worum es bei Responsive Webdesign geht. Dies soll kein Artikel sein, der tief in die Materie eintaucht.

Die Techniken hinter Responsive Webdesign sind folgende: Ein Fluides Grid, flexible Bilder und Media-Queryies. Diese nun kurz, und hoffentlich verständlich erklärt.

Fluides Grid:

Das Grid kommt eigentlich aus dem Printbereich. Jede Printzeitung hat so ein unsichtbares Gestaltungsraster, an das sich die Inhalte orientieren.

Hier ein Beispiel des Grids von Twitter Bootstrap 3.

bootstrap-grid

Das Grid von Bootstrap basiert auf 12 Spalten, wenn man so will. Wie in der ersten Reihe gut zu sehen. Es sind 12 Elemente, die jeweils einzeln unterteilt sind. Die zweite Reihe zeigt den ersten Container oder Spalte mit 8-facher Breite an. Übrig bleiben 4 bis zur 12. So führt sich das weiter. Denkbar sind alle Möglichkeiten, die 12 als Ergebnis haben. Halbe Spalten gibt es nicht.

Ein fluides Grid heißt also, dass sich die Spalten dem umschließenden Element anpassen, also zum Beispiel der vordefinierten gesamten Breite der Website. Die CSS-Klasse .col-md-12 hat zum Beispiel eine gesamte Breite von 970px. Die einzelnen CSS-Klassen für die Spalten oder auch Columns haben eine fluide Breite in Prozent. Darum auch fluides Grid. Mehr dazu gibt es in der Dokumentation von Twitter Bootstrap.

Durch Media-Queries, die weiter unten beschrieben sind, wird dieses Verhalten beschrieben, wenn es zu einen „Umbruch“ dieser Spalten kommen soll. Dies geschieht, wenn nicht genügend Platz für den vorhanden ist  und ein vordefinierter Wert den Umbruch auslöst.

Flexible Bilder:

Bilder auf einer Website haben normalerweise eine feste Größe. Dies ist hinderlich, wenn man die Website, zum Beispiel, auf einem Smartphone betrachten will und das Bild hat eine fest vorgegebene Größe. Abhilfe schafft eine relative Größe des Bildes, sodass es sich anpasst. Es gibt viele verschiedene Möglichkeiten und Tools, Bilder je nach gerät auszuliefern. Man bedenke nur das iPad, welches die doppelte Pixeldichte eines normalen Displays hat. So wirkt ein Logo schnell matschig und verschwommen auf dem iPad, sofern es nicht optimiert ist. Diese einzeln Tools und Techniken aufzuführen, würde den Artikel sprengen und zu tief gehen. Dafür braucht es einen eigenen Artikel.

Media-Queryies:

Dies sind nun die CSS-Regeln, nachdem sich das Grid und alle anderen Elemente richtet. Hier wird beschrieben, wie die Website, auf einer bestimmten Breite auszusehen hat. Zum Beispiel sieht meine Website auf dem iPhone 4 komplett anders aus als auf einen Desktop. So werden alle Spalten untereinander ausgerichtet. Aus einem 12 Spalten Grid wird ein Einspaltiges.

Zusammenfassung

Responsive Webdesign beschreibt die Technologien, die nötig sind, um eine reaktionsfähige Website aufzubauen. Mit reaktionsfähig ist gemeint, dass sich der Inhalt einer Website genau an das Ausgabegerät anpasst und so ein optimales Benutzererlebnis ermöglicht. Sei es von Handy oder Smart-Watch bis zum Smart-TV.

Ich hoffe, der kleine Einblick hat euch gefallen und ich konnte etwas Licht um den Begriff Responsive Webdesign schaffen. Es gibt viele Artikel da draußen, die tiefer in das Thema eintauchen. Zu empfehlen ist hier der Blog vom Kulturbanause.

 

Fun zum Freitag #8

Teste dein Wissen um die psychologische bzw allg. die Wirkung von Farben auf dem Menschen. Chromantics nennt sich das Quiz, welches euch dieses Wissen abfragt. Egal ob du nun (Web)Designer, Texter oder Webdeveloper bist, dieses Grundwissen kann nicht schaden.

Beantwortest du eine Frage richtig, bekommst du einen Punkt gutgeschrieben. Am Ende werden dir dann deine Gesamtpunkte angezeigt, den du auch teilen kannst, wenn du das Projekt gut findest. Zudem gibt es zu jeder Frage auch eine Anmerkung, warum die Farbe das macht, was sie macht. Diese Erklärungen finde ich sehr gelungen und beschreiben die Wirkung der Farben und dem Zusammenhang genau. In der Erklärung nach einer Frage ist auch eine Quelle angegeben, in der man dann nachlesen und stöbern kann. Nettes Detail, der Antwortbutton zeigt den Farbcode in HEX an. Leider ist der Antwortbutton kein richtiger Button, sonder ein div-Container. Das Quiz funktioniert auch nur ab dem Internet-Explorer 10. Auch eine nette Spielerei ist, dass sich die Farbe von Kopf- und Fußbereich der Website stetig ändert.

Mein erster Versuch 8/10. Also viel Spaß mit dem Chromantics Quiz und ein erholsames Wochenende.

Beat the Clock – Lösungen

Im Artikel Fun zum Freitag #7 habe ich euch das Browser-Game „Beat the Clock …with JavaScript knowledge“ vorgestellt. Heute werde ich euch die Lösungen aufzeigen. Ich finde die Idee dahinter sehr gut und gelungen, auch wenn ich mir mehr Level und Abwechselung gewünscht hätte. Ein weiterer Kritikpunkt ist, dass sich die einzelnen Fragen nicht zufällig (random) anordnen. So muss man nur einen Screenshot machen und in aller Ruhe darüber nachdenken, um auf die Lösung zu kommen. Dank Logik. Seine Lösung kann man dann in der Console des Browsers oder im Game überprüfen. Gut fand ich, dass der Timer, meines Wissens nach, nicht manipuliert werden kann. Gerne mehr davon.

Lösungen:

# Ausdruck Lösung
1. [1, 4, 6, 5, 7].length 5
2. null == undefined true
3. [„neo“, „morpheus“, „trinity“, null, „ghost“][2] trinity
4. „abc“.split(„“)[0] a
5. Object.keys({foo: „bar“, bar: „foo“})[1] bar
6. /321/.test(„123“) false
7. Math.round(0.3 + 0.4) 1
8. [„foo“, „bar“, „baz“].reverse().join().slice(0,3) baz
9. [null, false, undefined].filter(Boolean) []
10. Number(„2“) – 1 == 1 true
11. (true + false) < 2 – true false
12. new Array(2).toString().slice(-1) ,
13. typeof new String(„What Am I?“) object

Wärt ihr auf alle Lösungen auf Anhieb gekommen? Viel Spaß beim Ausprobieren. Happy Coding!

Ein eigenes WordPress-Theme erstellen mit underscores.me

Einleitung:

Im Teil Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank habe ich gezeigt, wie man lokal mit WordPress arbeiten kann.

Das Starter Theme:

In diesem Teil geht es darum, wie man sein eigenes WP-Theme erstellt. Dazu nehme ich die Website  underscores.me. Man kann sich das aktuelle Starter-Theme, hier generieren lassen. Es ist hervorragend dazu geeignet sein eigenes Theme zu erstellen. Im generierten Theme wurde sich auch um eine mobile Navigation gekümmert, die die Desktopnavigation ersetzt, sobald ein Brakepoint, via Media-Query, erreicht ist. Zwei Layoutarten sind ebenso von Anfang an mit dabei. Dies wären Sidebar rechts oder Sidebar links. Dazu muss man nur den betreffenden CSS-Code kopieren.

Um zu starten, muss man nur einen Namen für sein Theme eingeben und den Button „Generate“ drücken. Der Download startet automatisch. Nun habt ihr eine Zip, die entpackt werden muss.

Geht in den ausgepackten Ordner rein, und kopiert den Ordner der alle Dateien enthält. Dies ist euer Theme-Ordner.

das gerade generierte und ausgepackte theme von underscores
das gerade generierte und ausgepackte theme von underscores

Diesen Ordner kopiert ihr in das Theme-Verzeichnis eures lokalen WordPress. Bei mir ist das C:/xampp/htdocs/wordpress/wp-content/themes

ordner-themes-wordpress
Ordner Themes WordPress

Starter Theme aktivieren

Um das Theme nun zu benutzen und um sich einen ersten Eindruck zu verschaffen, müssen wir das frische Theme auch in unseren lokalen WordPress aktivieren. Dazu meldet Ihr euch ins Backend von WordPress an. Dazu muss vorher XAMPP laufen und Apache und MySQL gestartet sein. Um sich im Backend anzumelden, gebt bitte Folgendes in den Browser ein. localhost/wordpress/wp-login.php. In meine Fall da wordpress bei mir unter htdocs liegt. Je nachdem wo euer WordPress liegt, muss die URL anders lauten.

Seid Ihr angemeldet geht links auf Design -> Themes. Hier sollte, wenn Ihr alles wie ich gemacht habt, euer Starter-Theme erscheinen. Aktiviert es nun.

wordpress-backend-themes
WordPress Backend Themes

Im Frontend sieht es dann folgendermaßen aus.

wordpress-frontend-starter-theme
WordPress Frontend Starter-Theme

Nicht schön aber alles funktioniert. Nun ist es an euch, was ihr aus diesem „Starter-Theme“ mit Hilfe von CSS und ein wenig PHP Wissen anstellt.

Die Sidebar aktivieren

Was ich abschließend noch zeigen möchte, wie man die Sidebar aktiviert. Default kommt die Sidebar unter dem Main-Content, da alles auf Width 100%  gesetzt ist. Um nun die Sidebar neben den Inhalt zu bekommen, je nach dem wo die Sidebar stehen soll, kopiert das CSS aus dem Ordner layouts. In meinen Fall: content-sidebar.css in eure style.css.

Wie man mit Frameworks und WordPress arbeitet? Dazu wird auch noch ein Artikel erscheinen. Dies soll nur eine Grundlage für Interessierte sein, für die, die sich in die Materie einarbeiten wollen.

Viel Spaß mit euren neuen WordPress Theme. Happy Coding!

Fun zum Freitag #7

Heute was Kniffliges für die JavaScript Nerds. Im kleinen Browser Game „Beat the Clock …with JavaScript knowledge“ geht es darum, den Output, der in der Konsole stehen würde, in ein Eingabefeld zu tippen. So wie die Anweisung in der Konsole angezeigt werden würde, wenn man den Befehl manuell, in die Konsole, die unter den Entwicklerwerkzeugen zu finden ist, eingeben würde.

Soweit so gut. Klinkt erst mal recht einfach mit ein wenig JavaScript Wissen. Der Passus ist aber, dass es einen Timer gibt. Dieser läuft naturgemäß ab. Jedoch, wenn man einen Ausdruck richtig beantwortet, wird wieder Zeit aufgefüllt. 5 Sekunden pro richtige Antwort. Die Freie Auswahl hat man auch, welchen Ausdruck beantworten möchte. Einfach drauf klicken. Tab geht leider nicht. Somit verliert man Zeit, da man die Maus benutzen muss. Ziel ist so viele Antworten wie möglich zu geben.

Ich muss zugeben, dass ich noch nicht alle Ausdrücke korrekt beantwortet habe. Somit auch nicht weiß, was Euch am Ende erwartet. Besonders viel habe ich mich auch noch nicht mit dem Spiel auseinandergesetzt. Wenn mal an einem Wochenende Zeit ist, werde ich es angehen. Ich habe da schon einige Ideen wie man das Ganze auch ohne Timer „Abarbeiten“ kann. Ich denke Ihr auch 😉

Hier nochmal der Link zum Spiel: „Beat the Clock …with JavaScript knowledge“

Die CSS3 Eigenschaft Flexbox – Einleitung

Worum geht es? Was kann Flexbox:

Heutige Website-Layouts basieren auf Floats und Clearings um ein Layout den Anforderungen, ähnlich dem des Print-Layout, gerecht zu werden.

In Zukunft wird dies Flexbox übernehmen. Ich möchte hier nur eine kurze Einführung in die Thematik geben und Anregung schaffen, sein Wissen zu erweitern und zu verfestigen. Was früher Tabellen waren, auf denen das Layout einer Website basierte, ist heute die Herangehensweise mit Floats, Margins und Clearings. Jedoch wird Flexbox viele neue und interessante Lösungen im Webdesign schaffen.

Flexbox an sich ist ein Wert der CSS Eigenschaft display. Erst wenn ein Container oder HTML-Element die Eigenschaft display:flex; oder display:inline-flex; besitzt, können auch die weiteren Eigenschaften, wie unten aufgezählt, benutzt werden. Ich beschränke mich in diesen Artikel auf die Eigenschaft order.

Weiterlesen „Die CSS3 Eigenschaft Flexbox – Einleitung“

Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank

Ich bin mir durchaus bewusst, dass es schon eine Vielzahl von Artikeln über Google zu finden gibt. Dennoch möchte ich der Vollständigkeit wegen einen solchen Artikel auf dem Blog haben. Dieser Artikel spiegelt meine Erfahrung wieder und hat keinen Anspruch auf Vollkommenheit. Wenn Fehler gefunden werden, dann könnt Ihr mir diese gerne in die Kommentare stellen. Gleiches gilt für Vorschläge aller Art.

Weiterlesen „Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank“