praegnanz.de büro für intervernetzte medien

Gerrit, 23.10.2015

Mobile First First Contact

Gerade habe ich meinen jüngsten HTML/CSS-Einführungskurs an der Zürcher Hochschule der Künste beendet. Teilnehmer waren elf ausgesprochen freundliche Erstsemestler, die die Grundlagen der Webgestaltung erlernen sollten. Es gab keine nennenswerten Vorkenntnisse in der Materie, also konnte ich – wie immer – relativ frei agieren. Und anders als in den letzten Jahren wollte ich diesmal etwas Neues ausprobieren.

Was, wenn man jeglichen historischen Ballast ignoriert, und nur die neuesten und tollsten Praktiken lehrt? Ein bisschen Zen in den Unterricht (und meinen eigenen Kopf) bringen, auch wenn es nicht 100% praxisnah ist?

Ich habe das mal gemacht:

  • nur die neuesten Browserversionen
  • keine Float-Layouts, nur Flexbox-basierte Konstruktionen
  • Mobile First in Entwurf und Umsetzung
  • vollfluides CSS (möglichst alle Breitenangaben in Prozent)
  • Responsive Breakpoints für den zweiten Kursabschnitt aufheben

Ich kann sagen, dass das soweit ganz gut geklappt hat! Das Konzept, dass die mobile Nutzung einer Website heute viel wichtiger ist als die Desktop-Nutzung, musste kaum erklärt werden – das erschließt sich Menschen mit Anfang 20 von alleine.

Wenn man HTML und CSS komplett neu lernt, so ist eine anfängliche Beschränkung auf eher lineare Mobile-First-Layouts eine hilfreiche Sache, denn besonders komplexe Gestaltung ist hier kaum möglich – von daher konnten die Kursteilnehmer ihre Scribbles meist erfolgreich und ohne größere Schwierigkeiten umsetzen. Für viel Freude sorgte dann am letzten Tag der finale Check des Layouts auf dem eigenen Smartphone – umgesetzt über MAMP und Zugriff per lokaler IP-Adresse im ZHdK-WLAN.

In nur 3 Tagen konnte ich die Grundlagen von modernem HTML/CSS rüberbringen. In meinen früheren Kursen ging recht viel Zeit für komplizierte Erläuterungen von schwer verständlichem Layoutverhalten drauf, u.a. bei Floats, Clearing, Selfclearing. Klar, manche Dinge wie absolute Positionierung in Kontextelementen oder Prozentangaben im vertikalen Padding, sind nach wie vor starker Tobak für Anfänger, aber man muss natürlich auch realistisch sein – CSS ist nicht einfach!

Insgesamt bin ich sehr zufrieden, wie selbstverständlich das Konzept einer unbekannten Viewportgröße aufgenommen wurde, und wie nett die Entwürfe teilweise geworden sind. Das mache ich jetzt immer so.

Wen es interessiert: Die Studierenden bekamen drei verschiedene Briefings mit ein paar vorbereiteten Assets zur Auswahl: Die Webpräsenz einer Glamrock-Band, das Tagebuch einer Weltreise und die Produktwebsite eines neuartigen Sneaker-Modells. Alle drei Aufgaben wurden etwa gleich oft gewählt :-)

4 Kommentare

  1. Jan am 24. Oktober 2015 #

    Kann man die Arbeiten irgendwo sehen? Klingt ja in der Theorie sehr interessant…

  2. dulange am 4. November 2015 #

    Ich hab mich auch schon häufig gefragt: Wenn ich jetzt jemandem Webdesign (im Sinne von HTML/CSS) beibringen wollte, wie könnte man es schaffen, den hässlichen Urschleim aus den unschönen Tagen auszulassen? Ist es möglich, eine solche Schulung ohne »Ach, wisst ihr, früher war das mal so …« zu leiten?

    Was heißt denn jetzt genau »soweit ganz gut geklappt«?

  3. Gerrit am 5. November 2015 #

    Naja, man sagt halt, dass man nur den Einsatz von modernen Browsern unterstützt, und dann lässt man Float-Layouts weg und alles andere, was stört :-)

  4. Thorvald am 6. November 2015 #

    Die letzten Schulungen die ich im Bereich HTML/CSS gegeben habe, liegen schon ein paar Jahre zurück (noch bevor Responsive Web Design en vogue wurde). Daher ist es sehr interessant zu lesen, welchen Ansatz Gerrit verfolgt. Das muss ich mir merken, falls ich mal wieder eine Schulung übernehmen muss.

    Also vielen Dank für den Artikel. :-)

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.