Sabrina über die Smashing Conf in Toronto
Das Spezielle an dieser Konferenz ist, dass die Vorträge nicht nur aus Slides bestehen, sondern dass live programmiert, animiert und gestaltet wird – teilweise auch interaktiv. 13 Speakerinnen und speaker haben an 2 Tagen sehr interessante Vorträge gehalten und an 2 weiteren Tagen gab es 9 Ganztags-Workshops zur Auswahl. Die Atmosphäre in Toronto war wirklich großartig und sehr entspannt. Mit rund 400 Teilnehmerinnen und Teilnehmern ist die Smashing Conf zwar schon eine größere Veranstaltung, aber gleichzeitig überschaubar genug, um noch gemütlich zu wirken.
A very GOOD MORNING from @smashingconf in Toronto! #smashingconf #balloons pic.twitter.com/AzwdOR7GmT
— Marc Thiele (@marcthiele) 25. Juni 2019
1 Bühne, unzählige Themen
Generell gibt es nur eine Bühne, so wird jede/r TeilnehmerIn automatisch auch mit neuen Themen konfrontiert, die bisher vielleicht noch nicht im jeweiligen Interessengebiet lagen, aber den Horizont erweitern. Sehr angenehm war, dass man sich dadurch nicht zwischen Vorträgen entscheiden musste und einfach alle ansehen konnte. Über Google Docs konnten die Teilnehmerinnen und Teilnehmer zu jedem Vortrag Fragen stellen und Notizen sammeln. So gab es am Ende immer eine gute Zusammenfassung mit den wichtigsten Punkten.
Networking: Die Pac Man-Regel
Davor, zwischendurch, danach und sowieso immer gab es die Möglichkeit, zu networken. Es wurde auch explizit auf die Pac-Man-Regel hingewiesen: Dabei geht es darum, immer einen Platz freizulassen, wenn man im Kreis zusammensteht. So ist es für einzelne Personen leichter, sich einer Gruppe anzuschließen. Danach rücken alle zusammen, um wieder einen freien Platz zu schaffen. Ich kannte dieses Prinzip davor noch nicht und finde es sehr sympathisch.
Abseits der Konferenz gab es geführte Spaziergänge durch Toronto und Restaurantempfehlungen. Am Ende des ersten Konferenztages wurde eine Bowling Party veranstaltet. Und: Sportliche hatten die Möglichkeit, in der Früh vor der Konferenz an einem 5-Kilometer-Lauf teilzunehmen.
So viel zum allgemeinen Programm. Hier kommen meine Highlights der Konferenz, die vor allem für Developerinnen und Developer interessant sein könnten.
Tag 1:
Brad Frost - "Let's build a Design System"
Brad Frost hat patternlab.io vorgestellt und weitere Pattern Libraries angesprochen. Kurz zusammengefasst ist eine Pattern Library ein Tool, das Designerinnen und Designern sowie Entwicklerinnen und Entwicklern hilft, den Überblick über alle verwendeten Elemente einer Website zu behalten. Ein anderes (unter Entwicklerinnen und Entwicklern sehr bekanntes und nicht sehr beliebtes Thema) ist, Elemente zu benennen. Die meisten Websites bestehen aus sehr vielen Elementen, die alle einen entsprechenden Namen brauchen, der im Frontend und Backend gleichermaßen Sinn macht. Im Normalfall keine leichte Aufgabe. Ein Tipp von Brad Frost war, das betreffende Element auf seine absolut notwendigen Elemente zu abstrahieren und dann zu überlegen, was die Aufgabe ist. Am besten sollte man dabei nur Blindtext verwenden und andere projektfremde Personen fragen, wie sie dieses Element nennen würden. (Das habe ich gleich bei meinem aktuellen Projekt ausprobiert – die Ergebnisse sind sehr interessant und hilfreich.) Zum Schluss haben alle Konferenzteilnehmerinnen und -teilnehmer gemeinsam die Website von Tim Hortons (ein kanadischer Coffeeshop) analysiert und dessen Elemente benannt.
Sarah Drasner - "Let’s Write a Vue App From Scratch"
Faszinierend zu beobachten war, in welcher Geschwindigkeit Sarah Drasner programmiert. Sie hat in 40 Minuten eine kleine Portfolio-Seite aufgebaut und am Schluss noch eine Animation „darüber gestreut.“ Die Seite hat sie mit vue.js und nuxt.js aufgebaut und auch gleich auf netlify deployed. Um so schnell sein zu können, hat Sarah Drasner unter anderem vordefinierte Snippets in ihrer Entwicklungsumgebung verwendet.
Tag 2:
Jules Forrest - "For the love of the grid"
Wer sagt, dass alles, was man ausprobiert, immer Sinn machen muss? Jules Forrests Vortrag drehte sich um CSS Grid. In der einfachsten Form kann man damit Inhalte als Raster darstellen – aber es ist auch möglich, sehr ausgefallene Raster oder Layouts zu bauen. Sie hat es für sehr ausgefallene Layouts verwendet. Zum einen hat sie eine Rechnung aus einem Restaurant präsentiert, die sie nur mit html und CSS nachgebaut hat:
See the Pen Grid Experiment No. 6 by Jules Forrest (@julesforrest) on CodePen.
Zum anderen hat sie live eine aufwendige Menükarte eines Restaurants nachgebaut. Ein solches Layout macht im Web zwar keinen Sinn, spannend war es trotzdem.
See the Pen Russ & Daughters Live Demo for SmashingConf Toronto by Jules Forrest (@julesforrest) on CodePen.
Dan Rose - "Seeing The Pages For The Components"
In Dan Roses Vortrag ging es darum, wie man mit kleinen Veränderungen des Designs viel an der Wirkung einer Website verändern kann. Beispielsweise geben schräge Kanten, abwechselnd angeordnete Bild- und Textkombinationen oder überlappende Bereiche eine gewisse Dynamik. Anschließend haben wir noch gemeinsam eine Website analysiert: Nach der Tim-Hortons-Website am Vortag war dieses Mal Starbucks dran.
Workshop: Tipps für mehr Barrierefreiheit
Ein Workshop, den ich sehr spannend fand, war einer zu meinem Herzensthema – Barrierefreiheit:
deque.com - "How to translate wireframes into accessible HTML/CSS"
Neben grundsätzlichen Argumenten, warum Barrierefreiheit bei der Webentwicklung wichtig ist (mehr dazu auch in meinem anderen Blogbeitrag), wurden in diesem Workshop Tools vorgestellt und wertvolle Tipps gegeben. Folgende fand ich besonders spannend:
- Neue Projekte sofort korrekt und barrierefrei aufbauen. Bestehenden Code Schritt für Schritt verbessern und zwischendurch natürlich auch immer wieder testen, ob auch mit neuem Content noch alles passt. Eine Persona bekommt zusätzlich zur üblichen Beschreibung einen Barrierefreiheitsaspekt. Z. B.: „Außerdem ist die Person von Geburt an (oder aus einem bestimmten Grund) blind.“
- Nachfragen, was die Userinnen und User der Seite wollen. Eine Landkarte mit Daten könnte von den Userinnen und Usern womöglich gar nicht gewünscht werden und durch eine gute Suche oder eine Auflistung besser dargestellt werden.
- Nachfragen, was die Userinnen und User brauchen oder gleich einen Usertest für Barrierefreiheit durchführen. Dabei ist es wichtig, die Userinnen und User zu beobachten oder zu filmen, um die Tools und die Art der Website-Nutzung analysieren und verstehen zu können.
Der Praxisteil: Wireframes, Modal und Cypress
Im Praxisteil des Workshops war es unsere Aufgabe, Wireframes richtig auszuzeichnen. Dabei mussten wir bestimmen, ob Links oder Buttons verwendet werden und welche und vor allem wo Titel bzw. Alternativtexte gesetzt werden müssen. Danach haben wir ein barrierefreies Modal aufgebaut. Dabei ging es darum, den Fokus ins Modal zu bringen und ihn dort zu behalten, bis das Modal wieder geschlossen wird. Damit das Ganze auch sicher funktioniert, haben wir mit "cypress" für jeden Schritt einen eigenen Test geschrieben. Nach jeder Änderung läuft dann der Test durch und meldet, ob auch noch alles wie beabsichtigt funktioniert.
Mein Fazit: Die Konferenz war definitiv ein Highlight. Interessante Themen und eine grandiose Stimmung in einer wunderbaren Stadt waren die richtige Mischung. Bei Gelegenheit nehme ich gerne wieder teil. Hier gibt's noch weiteres Video- und Foto-Material.
Veröffentlicht am: 19.08.2019
Autorin
Sabrina Hess
(Ehemalige Mitarbeiterin)
Sabrina war Developerin bei VERDINO.
Wir haben noch mehr super interessante Blogartikel!