mobiloptimering - jug sorø

Mobiloptimering

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

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

Hvad er ”mobiloptimering”?

04/06 – 2015Mobiloptimering af Joomla

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

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

04/06 – 2015Mobiloptimering af Joomla

Mobiloptimering (og SEO) starter med teknikken

04/06 – 2015Mobiloptimering af Joomla

04/06 – 2015Mobiloptimering af Joomla

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

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

‘Responsive design’ aka. Media queries

• ”Automatisk”

tilpasning til:

– Telefon

– Smartphone

– Tablets

– Notebooks

– Desktops

– Tv

– Større enheder?

04/06 – 2015Mobiloptimering af Joomla

‘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

Less is more

04/06 – 2015Mobiloptimering af Joomla

Færre

requests

Hurtigere

svar

Mere

caching

• Low level– Combine

– Minify

– Scale

– Cache

– Gzip

– Htaccess magic

• Helpers– Lazy load

– Modernizr

– jQuery plugins

– Bootstrap

Grundprincipper

04/06 – 2015Mobiloptimering af Joomla

Dårligt eksempel

04/06 – 2015Mobiloptimering af Joomla

04/06 – 2015Mobiloptimering af Joomla

04/06 – 2015Mobiloptimering af Joomla

04/06 – 2015Mobiloptimering af Joomla

04/06 – 2015Mobiloptimering af Joomla

04/06 – 2015Mobiloptimering af Joomla

Opsummering

04/06 – 2015Mobiloptimering af Joomla

88 requests

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

Lille plus…

(De fleste ressourcer caches dog)

04/06 – 2015Mobiloptimering af Joomla

Godt eksempel

04/06 – 2015Mobiloptimering af Joomla

Godt eksempel?

(ikke perfekt, men bedre)

04/06 – 2015Mobiloptimering af Joomla

Forside

Underside

04/06 – 2015Mobiloptimering af Joomla

(eta 14 dage)

04/06 – 2015Mobiloptimering af Joomla

Demo af Google Insights

04/06 – 2015Mobiloptimering af Joomla

Diverse forslag til udvidelser

• Joomla

– Site Optimisation (eta 14 dage)

– JCH Optimize (betalingsplugin)

• Browser

– Y-slow

– Webdeveloper

04/06 – 2015Mobiloptimering af Joomla

Spørgsmål?

04/06 – 2015Mobiloptimering af Joomla

Janich Rasmussen

www.cgonline.dk

info@cgonline.dkSlides: http://www.cgonline.dk/jmobil