Workshop Responsive Webdesign Professional
Unser Ausbildungs-Workshop zum Webdesigner mit besonderem Fokus auf anspruchsvolle responsive Layout-Umsetzung beinhaltet vor allem den Umgang mit den Responsive Frameworks Bootstrap und Foundation-Off-Canvas.
Wir richten unseren Workshop RESPONSIVE WEBDESIGN PROFESSIONELL speziell an bereits versierte Webdesigner mit guten Vorkenntnissen, und kombinieren das Arbeiten an einem anspruchsvollen Workshop-Projekt mit Umgebungs-Variablen wie bei einer "echten" Zusammenarbeit mit Auftraggebern, Kunden und Mitarbeitern.
Vom ersten Brainstorming für die Erstellung eines Konzepts bis zur Suchmaschinen-Optimierung der fertigen CMS-Website soll alles miteinbedacht und wenn möglich mit dem Projektleiter vorab abgeklärt werden.
Ein wichtiger Punkt für Webdesigner ist dabei ein "geeignetes Timing" und ein "Gespür für das Notwendige" - ein rasch übermittelter Design-& Layout-Vorschlag ist eine ideale Basis zum "Darüber Reden" und ermöglicht Kunden ihre eigenen Vorstellungen im Kontext zum vorliegenden Vorschlag besser zu kommunizieren. Zudem sind für Design-Vorschläge ansprechende Bilder und Dummy-Grafiken ein enorm wichtiges Rezept - der erste Eindruck zählt immer - eine ordentlich vorbereitete Präsentation als bestenfalls bereits klickbarer "LOOK & FEEL-Dummy" soll sich auch schon zumindest teilweise so anfühlen wie die mögliche finale Version.
Und immer wieder nicht zu vergessen:
Wie verhält es sich am iPhone & Co? Wie verhält sich eine Schaltfläche in den diversen mobilen Browsern? Ist der Inhalt überhaupt noch lesbar? Insgesamt betrachtet ist eine alles berücksichtigende responsive Webseite ein relativ grosser Aufwand, der von Kunden und Auftraggebern oft nicht einbedacht wird.
So wie im Business-& Agentur-Bereich üblich, beginnen wir mit einer zugekauften Layout-Vorlage, ganz einfach weil Responsive Weblayout-Frameworks bereits für die Ausgabe mit gebräuchlichen Broswern und unter Einsatz der JavaScript-Bibliothek jQuery für die Einbindung zahlreicher JavaScript-Funktionen wie etwa Slide-Shows, Popup-Galleries, ua. optimiert sind, und uns daher viel Aufwand erspart bleibt - wir müssen das Rad nicht neu erfinden, bzw hat es seine Gründe warum sich bestimmte Technologien als "state of the art" etablieren, so wie eben speziell das responsive Framework "bootstrap" oder eben "foundation off-canvas". Auch der kommerzielle Faktor - alles soll immer so rasch wie möglich fertig sein - macht die Verwendung von cross-browser-stabilen responsiven Website-Vorlagen mehr als logisch.
Wir ändern also eine für unsere Ansprüche geeignete responsive Layout-Vorlage entsprechend den neuen Anforderungen. Dabei ist es besonders wichtig von Anfang an sehr GENAU zu arbeiten - ungefähre Maße und nur schnell geschätzte Abstände sind nachträglich nur mühsam wieder auszubessern. Auch professionelle Layouts haben oft ihre Schwachstellen - das wollen wir zu Projekt-Beginn besonders genau analysieren und wenn nötig verbessern.
Die Body-Schriftgröße für den allgemeinen Fließtext geben wir in Pixel an - auch Browser definieren ihre voreingestellte Standard-Schriftgröße in Pixel, meist mit 16px - die Zeilenhöhe der Fließtext-Schrift machen wir von ihrer Größe abhängig und verwenden die Maßeinheit em. Wir setzen eine Schrift aus dem Fundus von Google Fonts ein, und wählen eine Schrift mit möglichst vielen Optionen, wie etwa Google Open Sans - zur Sicherheit, falls es platztechnisch eng wird, binden wir auch die Schrift Open Sans Condensed ein.
Sämtliche Maße für die Höhen von Header, Navigations-Leisten, Buttons und anderen Layout-Elementen geben wir in REM an - ausser es gibt Gründe fixe Pixelmaße zu verwenden, etwa für die Platzierung eines Symbols, dessen Position sich beim Zoomen der Website nicht verändern soll. Man sollte also immer mit einbedenken, wie sich die Website AUCH beim Einzoomen verhält - auch wenn die Darstellung einer responsiven Website in erster Linie für die zahlreichen Displays mobiler Endgeräte optimiert wird (mobile first), wollen wir nicht den normalen Desktop-Computer vergessen - am Ende gilt jedoch immer: je schlanker und übersichtlicher der Code, egal ob für HTML-Markup oder CSS-Klassen, desto besser - Suchmaschinen werden das mit einem guten Ranking belohnen, weswegen im HTML-Markup nicht nur übersichtliches Einrücken und Kommentare vorteilhaft sind, sondern auch die Verwendung von semantischen Tags - besonders das Tag "article" sollte nicht vergessen werden.
Maße für Layout-Breiten sind idealerweise auch mit rem zu definieren, die Schriftgrößen und Überschriften sollten auf Basis der Body-Schriftgröße in em formatiert sein. Es sollte also für Anwender, die Ihre Schrift-Anzeige etwas größer möchten, das Zooming immer möglich sein. Ebenso denken wir an eine mögliche Darstellung der Website via Beamer auf Leinwand, weswegen sich eine responsive Website als Deluxe-Variante durch ein mögliches Fullscreen-Zooming auszeichnet.
Für Fragen zu Kurs-Inhalten, Kursdauer und Terminen, bzw für Fragen zu Anmeldung, Finanzierung und Förderungen durch AMS oder Waff stehen wir gerne zur Verfügung.