Mobilt

Lavendla får accelererade mobilsidor (AMP)

Snabbare mobila sidor är livsviktiga för företag som som säljer komplexa tjänster på nätet. Därför har Angry Creative byggt om standardpluginet för AMP för att den bättre passa den digitala begravningsbyrån Lavendlas behov.

lanvendla-mobil

Angry Creatives kund Lavendla är nu AMP-anpassade för att ladda blixtsnabbt i mobilen.

Accelererade mobilsidor (AMP) ska enligt Google ge fyra gånger snabbare laddtider på mobilen. AMP kortar laddtider och minskar datamängden. Eftersom Google verkligen pushar för AMP är det inte omöjligt att AMP blir en rankingsignal i framtiden som lyfter upp AMP-sidor före andra sidor i det mobila söket. Google gjorde exempelvis https till en rankingsignal efter en kampanj för https.

Problemet med standardplugninet för AMP för WordPress från Automattic är att den bara anpassar själva blogginläggen och vanliga fasta sidor men inte specialanpassade sidor.

–Vi har anpassat pluginet för att det även ska omvandla vanliga sidor till AMP. Lavendla har exempelvis särskilda stadssidor som vi också vill att de ska ladda snabbt i mobilen, säger Johan Möller, utvecklare på Angry Creative.

Johan är lite frågande till att det bara är blogginläggen som AMP-anpassas av standardpluginget från Automattic.

–Det kanske kommer mer. AMP kommer att bli stort. Vi kommer att standardanpassa vår plugin för att kunna erbjuda den åt alla våra kunder.

Accelerated Mobile Pages (AMP) är ett ramverk, AMP HTML, som bygger på existerande html-teknik. AMP ger fyra gånger snabbare laddtider och minskar datamängden. Googles ”accelererade mobilsidor” är ett svar på Facebook Instant articles, men med en open source-profil för att göra det mer attraktivt för andra plattformar som Twitter, Pinterest, WordPress och LinkedIn.

AMP skalar exempelvis bort tredjepartsskript och omvandlar alla bilder till en storlek för att göra sidorna snabbladdade i mobilen.

Alla företags som använder WordPress kan implementera accelererade mobilsidor på några minuter. Installera bara tilläggsprogrammet AMP. Men om temat använder tredjepartsskript kan de se konstiga ut i mobilen utan särskilda anpassningar.

AMP projektets hemsida finns det manualer hur sajtägare kan skapa AMP-sidor. Vilka html-koder som fungerar och vilka som är förbjudna för AMP-sidor

 

Ny sajt åt Skyltspektrum!

Vi här på webbyåran teamade upp med Skyltspektrum igen för en ny webbplats.

2010 gjorde vi designen åt Skyltspektrum medans Kafit byggde sajten i CMS’et Midgard. Den här gången var det WordPress som gällde, för ett enkelt och smidigt redaktionellt arbete.

De hade en rätt tydlig vision om hur sidan skulle kunna se ut så vi utgick ifrån en mall de själva gjorde som vi hade lov att modifiera efter tycke.

Upplägget av sidan är blockbaserat, lite som Pinterest. För att lösa detta använde vi oss av det häftiga jQuery-pluginet Masonry som pusslar ihop blocken så de passar in så bra som möjligt beroende på storlekarna. Masonry räknar även om när man ändrar storlek på webbläsaren vilket enkelt gjorde sidan responsiv så den ser bra ut på alla enheter.

I och med detta samarbete passade vi även på att uppgradera oss lite och köpte en helt galen skylt!

KontorEtt: Lite snyggare, lite bättre.

Sedan i höstas har vi sakta men säkert byggt en ny webbplats åt KontorEtt. En webbplats som reflekterar deras känsla för stil och design, och som tydligare kan kommunicera vad de är för företag och vad de arbetar med. Då KontorEtt har en tydlig specialité – att inreda kontor för företag – så borde även den delen finnas tydligt representerad på deras webbplats. Deras dåvarande webbplats fokuserade mer kring att de hade en designoutlet, något som står för bara 5-10% av verksamheten.

Vi valde istället att dels kunna visa upp produkter och erbjudanden på webbplatsen, men även att de skulle ha inspirerande kundcase på webbplatsen där de visade upp vad de gjort för andra klienter. Vi skapade även en redaktionell yta i form av en blogg där Bosse, den designbitne VDn, kommer skriva artiklar om både det ena och det andra inom design. Vi hjälpte dem även få igång ett nyhetsbrev där de lätt kan gå ut med erbjudanden till de klienter som väljer att prenumerera på den informationen.

Förutom att vara vansinnigt snygg är sidan även responsiv och anpassar sig därmed till tex smartphones, för att leverera den mest relevanta informationen till den typen av besökare.

Vi är oerhört nöjda och tackar för ett gott samarbete!

Interaktionsgapet mellan Mobilwebben och Appen minskar.

För en tid sedan berättade IDG.se om att Financial times väljer att skippa Apple och istället göra en mobil webbsida med HTML5 framför att sälja en app via Apples appstore. Detta går i linje med vad jag tidigare skrivit om när det är rätt läge att välja en mobil webbplats jämfört med en app: En app är bara användbar när man behöver få tillgång till de olika API:erna som finns i telefonen. Detta kan vara något så löjligt som att det enda man söker är att få ett ”pling” i mobilen så fort det postats något nytt, men oftast handlar det om att komma åt fräsiga funktioner som kamera, gyro etc.

Förbättrad interaktion i nästa generation av mobilwebbar

Problemet med att bygga en mobilwebb idag är att det inte går att använda position: fixed;. Det vill säga att det inte går att lägga menyalternativ och andra saker ”över” innehållet som det går på en ”vanlig” dator. Allting blir istället fast positionerat. Nästa generation av mobilwebbar kommer att låta oss göra detta och dessa kommer att se ut som appar via verktyg som redan idag existerar. Det handlar egentligen bara om att dessa verktyg måste öka i populäritet få de sista buggarna bortbankade.

De ramverk som existerar idag har ingen tillgång till telefonens API, men med hjälp av JavaScript går man om hur saker och ting är ”tänkt” att fungera i telefonens webbläsare, och ger en tillgång till interaktionsmoment som man normalt inte förväntar sig skall fungera i webbläsaren. Framförallt fixar den den mycket irriterande position: fixed ”buggen”, och hemsidors menysystem går äntligen att bygga som om de vore appar – med en footer / header som alltid följer med.

Intressanta ramverk

Någon av dessa ramverk skulle kunna användas till att göra en separat mobilwebbslösning av kaliber! Frågan är bara; Vem gör det först?

Sencha Touch

http://www.sencha.com/products/touch/

iScroll

http://cubiq.org/iscroll-4

Jquery Touch Scroll

https://github.com/neave/touch-scroll Nedlagd 🙁

Appar VS Mobilanpassning – När skall man använda vad?

Just nu snackas det väldigt mycket om appar och mobilanpassningar. Men när skall man välja det ena framför det andra?  Och vad innebär de olika sakerna egentligen? Det finns två populära sätt att presentera material på mobila plattformar: Mobilappar & Mobilanpassade hemsidor. Här kommer jag prata om när man skall använda vad.

(mer…)