Smashing Conference 2015 Barcelona

Smashing Conference 2015 Barcelona

Smashing Conference gikk av stabelen 20. og 21. oktober i Barcelona. Vi, Lena Bjørkli og Markus Voss, dro av gårde for å få et enda større innblikk i hvordan vi som designere og utviklere kan håndtere hverdgslige designproblemer på en intelligent måte ved bruk av smarte teknikker, gode strategier og nyttige verktøy.

Til tross for at det flotte høstværet hjemme i Oslo føltes det slettes ikke helt feil for to kolleger fra Acando å sette seg på et fly og ta turen til Barcelona for å sjekke ut hva Smashing Conference 2015 Barcelona hadde å by på. Barcelona i oktober er ikke Syden akkurat, men behagelige 20 grader og tapas på alle kanter er jo ikke å forakte.

Men til saken:
Konferansen ble holdt i det vakre Palau de la Música Catalana, og startet med et brak tirsdag morgen med katalansk live musikk! Det ble nesten litt i overkant for to litt morgentrøtte nordmenn, men det skapte jo en viss god stemning, vi må jo innrømme det.

Katelansk musikk

Deretter gikk det slag i slag med foredrag som vekslet mellom å være UX-fokuserte og front-end-tekniske. Alle foredragene holdt høy kvalitet med dyktige og proffe foredragsholdere, og bortsett fra sykt lange køer for å få seg kaffe så var det ikke noe å si på organiseringen.

Alt i alt var det 13 foredrag i løpet av de to dagene konferansen varte, pluss fire workshoper på mandag, men de fikk vi ikke med oss denne gangen.

Palau de la Música Catalana

Her følger et sammendrag av noen av de innleggene som vi synes var best og som gjorde mest inntrykk:

The wonderful world of SVG

Chris Coyler fra Code Pen ga en grundig gjennomgang av SVG teknologi, fra det helt grunnleggende til bruk av avanserte animasjoner. SVG er perfekt for datagenererte bilder som vanligvis er tegnet som vektorgrafikk i et bilderedigeringsverktøy, og deretter eksportert for web - som f.eks. ikoner. SVG er oppløsningsuavhengig, i tillegg til å ha en hel del andre kule egenskaper.

SVG er i slekt med XML, noe som betyr at SVG-tagger kan bli stylet på siden med CSS og scriptet med javascript på samme måte som enhver annen del av DOM. Dette gjør at SVG er perfekt for å blant annet lage kule animasjoner, og det finnes flere biblioteker man kan bruke for å få hjelp til dette, som f.eks GreenSock og Snap SVG.

En annen ting som er bra med SVG er at det er tekstfiler, noe som gjør at det er godt egnet for gzip, og filene er ofte mye mindre i størrelse enn et tilsvarende rasterbilde.

Så når passer det å bruke SVG? Det er ikke slik at dette er løsningen i alle tilfeller der man skal vise et bilde, men det er en rekke spesifikke situasjoner der SVG er svært godt egnet.

Vii kan f.eks bruke dem som kilden til en <img> tag, eller som ikke-semantisk dekorativ tekst i CSS-bakgrunner. De kan også kombineres i sprites eller konverteres til data URI. Dersom du ønsker å bygge et ikonsystem med SVG så kan du opprette en enkelt fil som inneholder alle dine SVG 'defs' (SVG-definisjoner av ikonene) som kan lastes inn på siden din som en standard HTTP-forespørsel (og bufres av nettleseren). Du kan deretter referere til ikonet ved å bruke en XLink-attributt. På den måten kan vi få optimaliserte ikoner som er fullt tilgjengelig fra DOM, noe som betyr at vi enkelt kan endre farge eller animere dem med CSS og Javascript.

Les mer om hva Chris sier om bruk av SVG her.

Houdini, Extensible web og CSS.next.

Bruce Lawson fra Opera var konferansens mysterie-foredragsholder. Han kom på scenen forkledd som en grønn kanin, og holdt et innlegg om den utvidbare weben, dvs ideen om at vi kan og bør utvide web-APIer tilgjengelig for oss til å gjøre nettet bedre.

Nettet er i ferd med å tape terreng til native apps - 86% av mobilbruken til amerikanske forbrukere er på native apps, sammenlignet med bare 14% på nettet. Bruce mener at veien å gå for å "redde" den tradisjonelle webutviklingen er å utvikle flere web-APIer, og samarbeide mer om nettleser-specs og få dem gjennomført raskere. Hva nettet trenger er at UX matcher den brukeropplevelsen du finner i native apps. For eksempel: native apps tilbyr hjemmeskjermikoner, mens det for websider er ganske kronglete å lage et bokmerke på mobil og det viser seg at bare 10% av mobilbrukere faktisk bruker dem. Det finnes muligheter til å inkludere bokmerkeikoner på nettsteder som brukerne kan legge på hjemmeskjermene sine, slik at de kan åpne websiden din i fullskjerm på telefonene sine ved hjelp av et klikk.

Bruce påpekte at det er et kunnskapsgap mellom de som skriver specene for nettleserleverandørene, og de utviklerne som faktisk bygger nettsider. Nettet vil utvikle seg best når spesifikasjoner er skrevet med utgangspunktret i hva utviklere faktisk trenger og bruker. Opera har tatt dette innover seg ved å dannet Extensible Web Manifesto, et forum hvor utviklere kan dele sine ideer for å utvide web-teknologien. Dersom man får flere slike iniativer og møtepunkter vil nettleserleverandørene bli mer og mer tilpasningsdyktig til behovene til utviklere og designere, slik at vi kan bygge en web som kan konkurrere med native apps.

Besøk Bruce Lawsons blogg
Les om The Extensible Web masifesto her.

Peace, Hellfire & Outer Space

Seb Lester er en legende innen font-design, og i dette foredraget fortalte han oss om sin reise fra student-tilværelsen til å faktisk ha designet fonter brukt av NASA på raketter som har blitt skutt ut i verdensrommet. Har har også designet fonter brukt av British Airways, Intel, The Daily Telegraph og H&M. Seb har over en million følgere på sin Instagram-profil, hvor han legger ut korte filmer av imponerende kaligrafi-arbeid og andre prosjekter han gjør.

Det var utrolig inspirerende og fascinerende å høre Seb fortelle om karrieren han har hatt, og se eksempler på arbeidet har har gjort. Defintitivt et av de beste foredragene på hele konferansen!

Se Sebs bilder og videoer på Instragram
Seb lesters hjemmeside
Seb lester på You Tube
Les om Sebs prosess for å designe logoen for NASA

Graphic design in the 21st century: Is he Internet killing creativity?

Sannlig dukket det ikke opp en nordmann også! Espen Brunborg er fra Norge, men bor i Edinburgh hvor han har startet opp et lite firma som heter Primate. Der jobber de blant annet med å miske gapet mellom tradisjonelt grafisk design og webutviking.

Espen snakket om utviklingen grafisk design har hatt siden sin spede start sammen med boktrykkekunsten på 1600-tallet, og frem til i dag.

Han stilte tankevekkende spørsmål ved om dagens Internet, med all sin teknologi, best-practice guides, maler og standarder egentlig gjør oss til bedre designere, eller om det bare er med på å drepe kreativitet, homogenisere ideer og undergrave orginalitet.

I dag er alle websider i ferd med å bli bygd over samme mal, og få tør å bevege seg utover aksespeterte standarder. Espen mener dette skaper stillstand og forhindrer kreativitet, og påpeker fem grunner til hva han tenker er årsaken til at det har blitt sånn:

  1. Praktiske årsaker
  2. Konvensjoner
  3. Markedskrefter
  4. Trender
  5. Redsel

For å sitere Espen: "If you don’t dare to try something different, you’ll never create the Eiffel tower, the Pyramids, or even the Hitler teapot. I mean, a teapot that looks like Hitler! If that doesn’t take guts I don’t know what does."

Les Espens innlegg om hvorfor alle websider ser like ut

Les mer fra Espen på hans blogg

Embracing the network

Patrick Hamann fra Financial Times snakket om hvor ustabilt nettverket vi er så avhengige av er. I tillegg til å være ustabilet er det stort sett utenfor utviklerens kontroll, derfor må vi som utviklere designe systemer som håndtere nettverkets upålitelighet. Ifølge Patrick er det fire ting som vi som utviklere bør gjøre for å håndtere ett ustabilt nettverk i våre systemer.

  1. Teste og monitorere feil
  2. Designe for feil
  3. Håndtere feil
  4. Fremtiden

SPOF (A single point of failure) er en del av ett system, som hvis det feiler, forhindrer hele systemet fra å fungere. SPOFs bør unngås i systemer som har høy tilgjengelighet som mål. For å teste ytelse kan Webpagetest brukes. En måte å monitorere lastetiden på egne ressurser er å bruke HTML5 Resource Timing API. Send lastetiden tilbake til serveren og sett opp varsling når ressurser bruker for lang tid til å laste.

For å designe for feil anbefaler han å at nettsiden skal svare innenfor 1 sekund, unngå å bruke "loading spinners" og vurder å bruke "skelleton screens". Facebook for eksempel benytter dette. Det vil si at resten av siden lastes inn før selve feeden i midtre kolonne.

Facebook

For å håndtere feil anbefaler han å bruke "Resource hints". Det er etter hvert blitt vanlig praksis å kombinere alle javascript ressurser til en. Han anbefaler å ha forettningslogikk og annen kode som kan endre seg i en egen fil. Den delen av koden som ikke endrer seg kan man ha cachet i brukerens browser mye lengre. Han anbefaler også å bruke service workers for å opprette en lokal cache av ressurser.

Til slutt ga ett kort innblikk i nye funksjoner som vi kan bruke i fremtiden. Her snakket han om bakgrunnsynkronisering av ressurser. Det vil også bli mulig med push meldinger fra nettsider.

Enhancing Responsiveness with Flexbox

Zoe Gillenwater fra Booking.com snakket om flexbox. Flexbox gir utvikleren mer kontroll over komponeter på en responsiv side. Dette kan for eksempel være sortering av komponenter, alignment og proposjonene til bokser på siden. Flexbox lar nettleseren gjære beregninger, som f.eks de eksakte målene som er nødvendig for at områder skal fylle den tilgjengelige plassen best mulig. Man kan lage mye mer komplekse og pålitelig oppsett med flexbox enn du kan med floats, display table, eller inline-block, og i tillegg med langt mindre CSS.

Flexbox kan brukes nå. Det støttes ikke i alle versjoner av IE, men bortsett fra Internett Explorer er støtten god. Zoe snakket om hvordan det kan brukes på mindre komponenter på en side som progressive enhancement. Internett Explorer vil kunne vise innholdet, men det vil ikke se like bra ut som nettlesere som støtter flexbox. Dette kan gjøres med å kombinere css for flexbox med display table, float eller lignende. Browsere som ikke forstår flexbox bruker denne CSSen, mens browsere som forstår flexbox bruker flexbox. Ved behov kan man bruke Modernizr for å detektere støtte for flexbox i browseren.

Lyst til å se bilder fra konferansen?
Ta en titt på her!

Og ja, vi har lånt noen bilder fra Marc Thiele for å illustrere denne artikkelen.

Vi har fått tillatese til å bruke bildet i topp-banneret Smashing Events GmbH

Blogginnlegget er skrevet i et samarbeid mellom Markus Voss og Lena Bjørkli. Begge konsulenter i Enterprise 2.0 i Acando Norge. 

Bjørkli, Lena

Bjørkli, Lena

Konsulent // Enterprise 2.0
lena.bjorkli@acando.no

 

Om bloggeren:
UX-designer og funksjonell arkitekt. Engasjert i alt som har med samspillet mellom teknologi og mennesker å gjøre, og liker meg best i midten der det skjer! Kobler av med dataspill og fjelltur innimellom slagene.

comments powered by Disqus