mobiloptimering - jug sorø

30
Mobiloptimering JUG Sorø, Juni 2015 CGOnline.dk /v Janich Rasmussen

Upload: janichdk

Post on 22-Jan-2018

162 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Mobiloptimering - JUG Sorø

Mobiloptimering

JUG Sorø, Juni 2015CGOnline.dk /v Janich Rasmussen

Page 2: Mobiloptimering - JUG Sorø

Aftenens program

• Hvad er ”mobiloptimering”?

• Teorien bag

– Media queries?

– Ressourcebrug

• Eksempler

– Dårligt eksempler

– Godt eksempler

• Værktøjer i praksis

– Demo af Google Insights

04/06 – 2015Mobiloptimering af Joomla

Page 3: Mobiloptimering - JUG Sorø

Hvad er ”mobiloptimering”?

04/06 – 2015Mobiloptimering af Joomla

Page 4: Mobiloptimering - JUG Sorø

Hvad er mobiloptimering?

• Responsivitet

– Websitet tilpasser sig visning på variabel enhed

• Billedstørrelser

– Store billeder = nogo på lille forbindelse

• Javascript eksekvering

– Enheder eksekverer ikke ens

• CSS rendering

– Enheder renderer ikke ens

• Flash / java == nogo!

04/06 – 2015Mobiloptimering af Joomla

Page 5: Mobiloptimering - JUG Sorø

Mobiloptimering er så meget mere

• Planlægning af designet– Hvordan skal tingene ombrydes?

• Simplificering af funktioner– Hvordan virker din popup/modal? Eller slideshowet?

• Reducering af tekst– Vi læser ikke. Sådan er det bare!

• Sammenhæng med desktop sitet– Kan man stadig besøge det eller diktere enheden visningen 100%?

• Teknisk optimering– Optimering af JS / CSS? Andet?

– Gzip? Cache? Headers?

04/06 – 2015Mobiloptimering af Joomla

Page 6: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 7: Mobiloptimering - JUG Sorø

Mobiloptimering (og SEO) starter med teknikken

04/06 – 2015Mobiloptimering af Joomla

Page 8: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 9: Mobiloptimering - JUG Sorø

Teknikken er vigtig

• Cliche:

– Min webhost er langsom

1. Nej – Du har proppet dit site med for mange udvidelser.

2. Nej – Du har proppet dit site med udvidelser der connecter til en langsom

”licens” server for hver eneste sidevisning.

3. Ja - Selvfølgelig er den det. Skal vi ikke hoste den?

04/06 – 2015Mobiloptimering af Joomla

Page 10: Mobiloptimering - JUG Sorø

Teknikken er vigtig

• Ved du hvad dit tema laver?

• Ved du hvad dine udvidelser laver?

• Hvor mange [ javascripts | css | billeder ] tilføjer de?

Og hvornår?

04/06 – 2015Mobiloptimering af Joomla

Page 11: Mobiloptimering - JUG Sorø

‘Responsive design’ aka. Media queries

• ”Automatisk”

tilpasning til:

– Telefon

– Smartphone

– Tablets

– Notebooks

– Desktops

– Tv

– Større enheder?

04/06 – 2015Mobiloptimering af Joomla

Page 12: Mobiloptimering - JUG Sorø

‘Responsive design’ aka. Media Queries

04/06 – 2015Mobiloptimering af Joomla

• <meta name=”viewport" content=”width=device-width, initial-scale=1" />

• <link rel="stylesheet" media=”all" href=”default.css" />

• <link rel="stylesheet" media=”desktop" href=”desktop.css" />

• <link rel="stylesheet" media="only screen and (color)" href=”colors.css" />

• { ... }

• @media (min-width: 700px) { ... }

• @media (min-width: 700px) and (orientation: landscape) { ... }

• @media (min-width: 700px), tv and (orientation: landscape) { ... }

• @media (min-width: 700px), handheld and (orientation: landscape) { ... }

• Go crazy: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Page 13: Mobiloptimering - JUG Sorø

Less is more

04/06 – 2015Mobiloptimering af Joomla

Færre

requests

Hurtigere

svar

Mere

caching

Page 14: Mobiloptimering - JUG Sorø

• Low level– Combine

– Minify

– Scale

– Cache

– Gzip

– Htaccess magic

• Helpers– Lazy load

– Modernizr

– jQuery plugins

– Bootstrap

Grundprincipper

04/06 – 2015Mobiloptimering af Joomla

Page 15: Mobiloptimering - JUG Sorø

Dårligt eksempel

04/06 – 2015Mobiloptimering af Joomla

Page 16: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 17: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 18: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 19: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 20: Mobiloptimering - JUG Sorø

04/06 – 2015Mobiloptimering af Joomla

Page 21: Mobiloptimering - JUG Sorø

Opsummering

04/06 – 2015Mobiloptimering af Joomla

88 requests

1.800 kb. = 1,8 mb. = 3.5 sek.

Page 22: Mobiloptimering - JUG Sorø

Lille plus…

(De fleste ressourcer caches dog)

04/06 – 2015Mobiloptimering af Joomla

Page 23: Mobiloptimering - JUG Sorø

Godt eksempel

04/06 – 2015Mobiloptimering af Joomla

Page 24: Mobiloptimering - JUG Sorø

Godt eksempel?

(ikke perfekt, men bedre)

04/06 – 2015Mobiloptimering af Joomla

Page 25: Mobiloptimering - JUG Sorø

Forside

Underside

04/06 – 2015Mobiloptimering af Joomla

Page 26: Mobiloptimering - JUG Sorø

(eta 14 dage)

04/06 – 2015Mobiloptimering af Joomla

Page 27: Mobiloptimering - JUG Sorø

Demo af Google Insights

04/06 – 2015Mobiloptimering af Joomla

Page 28: Mobiloptimering - JUG Sorø

Diverse forslag til udvidelser

• Joomla

– Site Optimisation (eta 14 dage)

– JCH Optimize (betalingsplugin)

• Browser

– Y-slow

– Webdeveloper

04/06 – 2015Mobiloptimering af Joomla

Page 29: Mobiloptimering - JUG Sorø

Spørgsmål?

04/06 – 2015Mobiloptimering af Joomla

Page 30: Mobiloptimering - JUG Sorø

Janich Rasmussen

www.cgonline.dk

[email protected]: http://www.cgonline.dk/jmobil