Snabbt och användbart gränssnitt- för alla besökare

SNABBT OCH ANVÄNDBART GRÄNSSNITT

Om mig• Marcus Österberg

• 50 % utvecklingsledare på eHälsoenheten inom Regionkansliet.

• 50 % informationsarkitekt i objektet Kommunikation via webbtjänster.

Presentationen & mer info om ämnet finns på tba.nu/snabbwebb

SNABBT OCH ANVÄNDBART GRÄNSSNITT

Agenda• Kort intro.

• Genomgång av checklistan för snabb och användbar webb, 13 punkter allt som allt.

• Diskussion, reflektion och frågor.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

Varför bry sig?• Ny lagstiftning 1:a

januari, 2015.

• Efter 1 sekunds väntan börjar användaren bli handikappad.

• Glesbygd * mobil uppkoppling ≈ bekymmer med responsiv webb.

• Snabb & användbar webb = bra sökmotoroptimering.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

1. Följa tillgänglighetsriktlinjen WCAGArgument:

• Inte diskriminiera de med funktionshinder.

• Följa webbstandard.

Verktyg:

• W3C:s Easy Checks.

• Accessibility Evaluator for Firefox, och Total Validator till Firefox

SNABBT OCH ANVÄNDBART GRÄNSSNITT

2. Ladda in på under en sekundArgument:

• Efter 1 sekund uppstår kognitionsproblem.

• Bra SEO.

Verktyg:

• Life-of-request Information, tillägg för Firefox.

• Pingdom.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

3. Minst 80 av 100 i Google PagespeedArgument:

• Googles måttstock på kvalitativ webb = SEO.

• Fångar många problem.

Verktyg:

• Google Pagespeed Insights, deras API eller plugin i webbläsare.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

4. Tre eller färre CSS-filerArgument:

• Räcker med en?

• Färre filer ≈ snabbare inladdning.

Verktyg:

• Yslow tillägg för Firefox eller bookmarklet.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

5. Tre eller färre Javascript-filerArgument:

• Räcker med en?

• Färre filer ≈ snabbare inladdning.

Verktyg:

• Yslow tillägg för Firefox eller bookmarklet.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

6. Tre eller färre UI-bilderArgument:

• Räcker med en?

• Färre filer ≈ snabbare inladdning.

Verktyg:

• Yslow tillägg för Firefox eller bookmarklet.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

7. UI-bilder ska optimeras för webbenArgument:

• Snabbare överföring av bilder.

Verktyg:

• Smush.it (webb/API)

• ImageOptim (Mac)

SNABBT OCH ANVÄNDBART GRÄNSSNITT

8. Inte använda externa teckensnittArgument:

• Typografi är bevisligen viktigt för igenkänning av avsändare, läsbarhet etc. Användbarhet med andra ord.

• Extra filer ger längre väntetid.

Verktyg:

• Font Family Reunion - för kontroll av om “rätt” teckensnitt kan visas på alla enheter.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

9. Validera HTML, CSS & JavascriptArgument:

• Mindre risk för tillgänglighetsproblem.

• Bör fungera i framtiden.

Verktyg:

• W3C:s validator på webben.

• Total Validator till Firefox.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

10. Minifiera HTML, CSS & JavascriptArgument:

• Mellanslag, tabbar, \n gör filerna större utan nytta.

Verktyg:

• .NET har minification+bundling

• minifycode.com

SNABBT OCH ANVÄNDBART GRÄNSSNITT

11. Skicka textfiler i komprimerad formArgument:

• Minskar textfilers storlek innan de skickas = går snabbare.

Verktyg:

• Google Pagespeed.

• Yslow -> Kolla Gzip-kolumnen under “Components”.

• Web.config inom .NET

• .htaccess på Apache mfl (Wordpress)

SNABBT OCH ANVÄNDBART GRÄNSSNITT

12. Följa alla prio 1 på webbriktlinjer.seArgument:

• Nationell webbstandard.

• Gör webben mer förutsägbar & användarvänlig.

Verktyg:

• Webbriktlinjer.se

SNABBT OCH ANVÄNDBART GRÄNSSNITT

13. Livslängd på statiska filer = 30 dagarArgument:

• Inte skicka oförändrade filer till återkommande besökare = snabbare inladdning.

Verktyg:

• Google Pagespeed.

• Tamper Data till Firefox.

• Network-fliken i Chrome.

SNABBT OCH ANVÄNDBART GRÄNSSNITT

Sammanfattat1. WCAG 2.0 nivå AA.

2. Ladda < 1 sek.

3. Pagespeed > 80 av 100.

4. Max 3 CSS-filer.

5. Max 3 Js-filer.

6. Max 3 UI-bilder.

7. Optimera UI-bilder.

8. Inte ha externa fonter.

9. Validera HTML/CSS/Js.

10.Minifiera HTML, CSS, Js

11. Komprimera/Gzip.

12.Följa prio 1 på webbriktlinjer.se

13.Livslängd 30 dagar på statiska filer.

Läs mer på tba.nu/snabbwebb