Markus: CSSCamp

Tatiana Mac

Das grundsätzliche Thema war wie unterschiedliche Ethnien und Randgruppen auch in den ganzen Design Prozess integriert werden sollten. z.B. Gender Input Forms etc.

Gender Input

• Male

• Female

• Undefined

• Undetermined

Ziel des Vortrages

Integration von Elemente welche ausserhalb der "normalen" User Gruppen sind.

Stépanie Walter

UI Design

IMG elem:hover Animationen 0.3-1 sek Loaders spinner 2-5 sek Mehr als 5 sek. Transferring, Progress Bar, etc. Wichtig ist immer ein Feedback dem User zu geben. Wenn die Progress Bar zum Schluss schneller wird ist das eine sehr positive User Experience.

CSS Animation and Transforms

IMG prefers-reduced-motion

Beim Video laden, immer Teile das Rahmens anzeigen bis am Schluss das Video angezeigt werden kann. Damit die lade Zeit überbrückt werden kann.

Create a Gallery

Informationen stehen in einem JSON File. Im Skeleton werden die Daten des JSON Files geladen. Nach und nach werden die Bilder geladen.

Bei WhatsApp wenn jemand am schreiben ist, wird das mit den animierten Punkten angezeigt.

Das Ziel dieses Vortrages ist, dass die Zeit für das warten, bis die Daten geladen werden dem User mit Animation angenehmer gemacht werden, damit es zu keinem Absprung kommt.

Ziel des Vortrages

Die User immer informieren, dass eine Interaktion läuft mit Design Elementen wie Spinner etc.

Jason Pamental

UX

Was haben Fonts für einen Einfluss auf die User Experience. Kleine word-spacing Anpassungen können einen grossen Einen grossen Einfluss auf due Lesbarkeit eines Textes haben.

Variable Fonts

Type is the voice of our words CSS custom properties --heading-size = 6

Alle Fonts in einem File.

User experience mit Font size, Line height beim skalieren. https://codepen.io/jpanmental/pen/MGEPEL (Beispiel) https://css-tricks.com/dark-modes-with-css https://fonts.gstatic.com/experimental/incxfer_demo

Ziel des Vortrages

Zusammenführen von mehreren Font in ein File, damit nur 1 Request gemacht werden muss. Beim resizing des Browsers können mit wenigen Anpassungen die User experience verbessert werden.

Cassie Evans

Interactive Web Animations with SVG

SVG has a DOM Animationen mit HTML Elemente Transformbox wird nicht von allen Browser unterstützt.

TweenMax.from() Timeline.timeScale()

Interaktion mit SVG's

Ein Kameleon wechselte die Farbe wenn ein farbiges Posit in die Webcam gehalten wurde.

image-rendering: Pixelated

Face Detection in the Browser

Experimental in Chrom IMG on CAM const findFace

Links:

https://codebar.io https://informationisbeatiful.org https://d3js.org https://solar.clearleft.com https://freepik.com https://jakearchibald.github.io/svgomg/

Animationplattforms

Velocity.js (bad) GreenSocks (good) https://greensocks.com/morphSVG Anime (good)

Ziel des Vortrages

Animationen von SVG's welche per HTML Elemente verändert werden können. Wichtig ist auch, dass Animationen einfach angepasst werden.

Harry Roberts

IMG Link with Slides Alle Notizen sind im Workshop gemacht.

Ziel diese Vortrages

Speed up the Website und wie kann die Website mit Dev Tool richtig analysiert werden.

Adam Argyle

Boost UX

Earth UX 2019 Fast apps 2019 Snappy SCC Calm Strategie Calm Tactics

Sharp vs Soft Heavy vs Light Physical & Digital Body & Mind

Google Material Design ist smoother weil die Animationen nicht so schnell gehen. Passives laden der Inhalte: Loader anzeigen bis alles geladen ist. Aktives laden der Inhalte: Step by Step anzeigen des jeweiligen geladenen Inhaltes. Der User muss das Gefühl haben, dass er die Kontrolle über die Applikation hat und nicht die Applikation über den User.

Design needs to Speak UX needs to Listen Auch beim Wording kann man einen User positiv oder negativ beeinflussen. "U must register before Vote" or. "Register before Vote" Multi Animationen zeitlich überlagernd ergeben ein sehr smoothes Ergebnis.

Ziel des Vortrages

Zeit muss bei einer Interaktion sein. Der User bekommt dadurch ein gutes Gefühl, dass er auch alles richtig macht.

Oliver Turner

Houdini is an Toolbox - Paint API - Animation API - Layout API IMG data-grad-stat

Links

https://css-houdini.rocks/

Ziel des Vortrages

Zukunftsweisende CSS Features welche leider von den heutigen Browsern noch nicht alle unterstützt werden.

Lara Schenk

CSS Algorithms.

Imperative: JS, Phyton, Ruby etc.

Declarative: SQL, HTML, CSS

Ziel dieses Vortrages

Mit "Algorithmus" können Boxen neu angeordnet werden. Diverse Beispiele wie die Boxen angeordnet werden können. Funktionalität von Grids.

Sergei Kriger

Inform User wenn eine Interaktion gemacht wurde. Z.B wenn ein Button geklickt wurde. "i Like this Post" or "i dislike this Post" polite vs. assertive vs off

Arria Live Regions on-demand-live-regions

Ziel des Vortrages

Mit dem Screenreader werden diverse Informationen von Messageboxes oder Buttons vorgelesen, damit die Information ausgegeben werden können.

Courtny Christian

Ziel dieses Vortrages