Visa meny
Visa meny

Prestanda och tillgÀnglighet pÄ Smashing Conference New York

SmashingConf Àr en Ärlig webbkonferens med fokus pÄ design och frontend. För nÄgra veckor sedan tog vi oss till New York för att delta pÄ plats. Förutom all vÀrdefull kunskap som finns att hÀmta hÀr var det intressant att se vad branschen anser Àr viktigast just nu.

Det verkar pĂ„ sĂ€tt och vis inte vara sĂ„ mycket omvĂ€lvande nyheter just nu, utan vi befinner oss kanske i nĂ„gon sorts mognadsfas dĂ€r mĂ„nga kloka insikter hĂ„ller pĂ„ att etablera sig. NĂ„gra av de mest dominerande Ă€mnena handlade om designsystem, tillgĂ€nglighet, prestanda och – faktiskt – empati.

Designa system, inte sidor

Hannah, Clas och Olle fick en rejÀl genomkörare av Brad Frost som under sin heldagsworkshop pratade om Atomic design.

Förutom det praktiska arbetssÀttet med atomer, molekyler, organismer, mallar och sidor, sÄ var det vÀldigt intressant för oss att diskutera hur samarbetet mellan utvecklare och designer fungerar bÀst.

NĂ€r ska man sluta designa i Sketch/Photoshop och istĂ€llet designa i kod? Det finns inget “rĂ€tt” svar, men mĂ„nga team skissar nog för lĂ€nge i statiska designprogram istĂ€llet för att jobba med en frontendprototyp.

Brad Frost presents design systems at Smashing Conference New York
Brad Frost visar ett urval av valmöjligheter som behöver göras i varje digitalt projekt, under sin presentation om designsystem.

HÀr kan ett bra designsystem underlÀtta vÀldigt mycket. Utvecklare kan börja bygga tjÀnsten med hjÀlp av designsystemet och designern kan jobba med att utveckla systemet istÀllet för att skissa specifika sidor. NÀr grunddesignen Àr klar övergÄr man till att göra alla designÀndringar direkt i kod och slipper pÄ sÄ sÀtt en massa dubbeljobb.

MĂ„let Ă€r att minska gapet mellan utvecklare och designers, att slippa det linjĂ€ra, uppdelade arbetssĂ€ttet i den mĂ„n det gĂ„r – att tidigt fĂ„ till ett gemensamt tĂ€nk och sprĂ„k.
Olle

Ett designsystem gör det ocksĂ„ lĂ€ttare att bygga en framtidssĂ€krad design – som gĂ„r att förbĂ€ttra och utöka efterhand. Det underlĂ€ttar för bĂ„de arbetsteamet och för kunden i vidareutveckling och kunskapsöverföring.

Ett designsystem gör att vi tvingas sÀtta regler för hur designen skall presenteras och minskar pÄ sÄ sÀtt risken för att designen efterhand svÀvar ut i en rörig visuell upplevelse.
– Clas

Nathan Curtis berÀttade hur vi kan börja med knappar och alla dess states som den första delen i ett designsystem, och sedan bygga vidare pÄ det.

Enklast Àr förstÄs om du har med tÀnket frÄn början, men om du behöver styra upp en befintlig design kan du börja med att göra en inventering av alla olika element pÄ sidan, t.ex. med hjÀlp av Stylify Me eller CSS Stats.

Skapa tillgÀnglighet för alla

TillgÀnglighet var nÄgot som mÄnga talare kom in pÄ utifrÄn sina olika perspektiv. Det Àr ett tema som berör allt ifrÄn UX/UI till utveckling och prestanda, och den handlar i grunden om att inte stÀnga ute mÀnniskor frÄn de tjÀnster vi bygger.

Eftersom jag brinner för inkluderande design tycker jag att det var extra roligt att sÄ mÄnga talare nÀmnde tillgÀnglighet som en sjÀlvklar del av processen.
– Hannah

Sara Soueidans förelÀsning handlade exempelvis om hur hon som utvecklare löste utmaningar utan att tumma pÄ varken tillgÀnglighet eller design, nÄgot som förhoppningsvis Àr pÄ vÀg att bli en sjÀlvklarhet i branschen. TillgÀnglighet bör vara en sjÀlvklarhet genom hela projektet istÀllet för en extra insats i slutet av projektet, vilket aldrig kan ge ett lika bra resultat.

LÄt inte anvÀndarna vÀnta

Det pratades en hel del om prestanda. Det handlade mycket hur viktigt det Ă€r att sidor laddar snabbt Ă€ven pĂ„ dĂ„liga mobilanslutningar och pĂ„ gamla enheter, men ocksĂ„ om saker som att optimera animationer och annat i ett avancerat webbgrĂ€nssnitt. Vi rĂ€knar till fyra sessioner totalt som tog upp prestanda pĂ„ olika sĂ€tt. Det mĂ€rks att branschen bryr sig mycket om laddtider och ett följsamt grĂ€nssnitt – och det Ă€r vĂ€ldigt bra!

Med de verktyg som finns idag finns det goda chanser att upptĂ€cka och Ă„tgĂ€rda prestandaproblem innan de nĂ„r anvĂ€ndarna. Öppna Chrome Devtools och testa att sĂ€nka din processorkraft till en tiondel, eller din nĂ€tverksfart till 3G – och se hur din sajt funkar!
– Hannes

Umar Hansa höll bĂ„de en heldags workshop och en session om Chrome Devtools och smarta arbetsflöden för frontendutveckling. Han fokuserade framför allt pĂ„ applikationsprestanda i browsern, medan Harry Roberts (”the mystery speaker”) istĂ€llet fokuserade istĂ€llet pĂ„ laddtider och bristfĂ€lliga uppkopplingar.

Det Ă€r ett vĂ€lkĂ€nt faktum att dĂ„lig prestanda kostar i form av fĂ€rre besökare och konverteringar, och Harry trummade in denna insikt med all önskvĂ€rd tydlighet. TillvĂ€xten av Internet sker dessutom till största delen i ”emerging markets” – och vill man vara attraktiv för nĂ€sta generations internetanvĂ€ndare mĂ„ste webbtjĂ€nsten ladda snabbt.

Det finns ocksÄ en moralisk aspekt i det hela. Harry berÀttade att i Brasilien kan en person som tjÀnar minimilön behöva jobba i en hel arbetsdag för att ha rÄd att ladda ner 500MB.

Google Analytics har land-specifik information om dina besökares laddtider. Speedcurve Àr en annan tjÀnst som kan anvÀndas för att följa hur sidan laddas pÄ faktiska enheter runtom i vÀrlden. SÀtt upp mÄl för dina laddtider och börja mÀta! AnvÀnd en prestandabudget för att ha ett mÄtt pÄ nÀr tjÀnsten har blivit för tung och det Àr dags att optimera den.

Vi mÄste bry oss om varandra

PĂ„ SthlmConnection har vi ett mantra: ”utan anvĂ€ndare, ingen effekt”. Det fĂ„r oss att alltid fokusera pĂ„ anvĂ€ndarens behov, sĂ„vĂ€l i de specifika produkterna som i den kontext dĂ€r anvĂ€ndarna befinner sig. Detta var ocksĂ„ ett genomgĂ„ende tema under konferensen.

SthlmConnection pÄ High line efter en intensiv dag pÄ Smashing Conference
SthlmConnection pÄ High line efter en intensiv dag pÄ Smashing Conference.

Flera av talarna gjorde kopplingen mellan sitt specifika omrÄde till ett större sammanhang och visade pÄ hur smÄ, tekniska vÀgval kan ha stor inverkan pÄ mÀnniskors liv.

Sammanfattningsvis förstĂ€rkte SmashingConf intrycket av att det Ă€r en allt starkare utveckling inom den digitala vĂ€rlden mot ett mer holistiskt och empatiskt förhĂ„llningssĂ€tt. Inget – varken producenter, anvĂ€ndare eller produkter – existerar i ett isolerat sammanhang, utan vi behöver samarbeta över kompetensgrĂ€nser, vĂ€ga in hela kontexten och verkligen förstĂ„ de olika anvĂ€ndarnas problem för att det vi utvecklar ska bli lĂ„ngsiktigt hĂ„llbart och ge nĂ„gon betydande effekt.

Idag gÄr det inte att konkurrera enbart med en unik tjÀnst, du mÄste ocksÄ erbjuda den bÀsta anvÀndarupplevelsen. DÀrför mÄste vi vara ödmjuka, lyhörda och intresserade av alla olika mÀnniskor anvÀnder de produkterna som vi utvecklar.
– Sofia

Visste du att?

  • Motorolas Moto G4 Ă€r den enhet som bĂ€st representerar den genomsnittliga prestandan globalt. (Harry Roberts)
  • Du kan ta en skĂ€rmdump pĂ„ hela sidan (inte bara det du ser pĂ„ skĂ€rmen) direkt i Chromes Dev Tools (Umar Hansa).
  • Om du anvĂ€nder margin istĂ€llet för padding undviker du att text bakom den tomma ytan inte gĂ„r att markera (Sara Soueidan)
  • Enheten viewport width (vw) möjliggör typografi som skalas med webblĂ€sarens storlek, men den förhindrar anvĂ€ndaren att sjĂ€lv Ă€ndra storlek pĂ„ texten. AnvĂ€nd dĂ€rför px i kombination med vw. (Sara Soueidan)
  • HĂ€r finns en samling av konkreta exempel pĂ„ hur prestandaförbĂ€ttringar givit effekt för anvĂ€ndarupplevelse och lönsamhet: wpostats.com (Harry Roberts)