Improove på Twitter: "improove: Idag hade vi finbesök på KUSen. Andreas Ehn från Wrapp kom och pratade kring deras spännande startup. Vad tycker... http://t.co/DFGJnLOz"
Nu har vi äntligen kommit igång med höstens KUD igen. Alltså våra interna föreläsningar där vi delar kunskap med varandra. Idag var det vår nya talang Lowe Bäckström som visade hur man krämar musten ur nya Google Analytics alla features. Han går bland annat igenom ett konkret case som vi kör med Dagen.se där vi genom en enkel webbenkät kan få en bild av hur stor del av trafiken på olika delar av sajten som utgörs av faktiska prenumeranter.
Eftersom koden för modulen finns öppen på GitHub så kändes det som en självklarhet att bidra med en svensk översättning av den och idag fick jag ett meddelande från deras projektledare Ivan Weiler, som jag för övrigt hade nöjet att träffa på Magento Developers Paradise, att min översättning nu finns med i den senaste versionen (0.9.7) av modulen.
I veckan har jag läst på lite om Media Queries. W3C-standarden för att anpassa stilmallar(CSS). Genom att i CSS-filen ställa frågor om t.ex. vilken bredd skärmen eller webbläsarfönstret har. Vilken upplösning som används eller orienteringen på enheten(liggande, stående). Denna fråga fungerar ungefär som en vanlig if-sats och används för att avgöra vilka css-klasser som skall användas.
Egentligen förenklar detta bara moment som tidigare varit möjliga att styra genom javascript men det finns något i enkelheten i detta som gör att det blir lättare att ta sig an anpassning av webben för olika plattformar. Det som ibland kallas för responsive webdesign. D.v.s. att webbplatsen anpassar sig baserat på egenskaperna av den enhet som anropar snarare än att man bygger olika versioner av sajten för respektive device. Media Queries kanske inte är revolutionerande men det gör arbetet betydligt enklare.
För att testa detta påbörjade jag arbetet med at anpassa vår egen webb där jag använde mig av följande query och skriva över ca 30 CSS-klasser och vips så är webben helt anpassad för mobila enheter.
@media screen and (max-width: 480px) {
….
}
Tidigare har jag jobbat med att skapa unika mobila wordpress-teman men då alla moderna mobila smartphones(Android och iOS) har stöd för media queries testade jag detta vilket visade sig vara mycket enklare än jag vågat hoppas. Arbetet tog ett par timmar. Har man bara taggat upp sin HTML-kod rent och snyggt är det inget större problem att dölja en del klasser och modifera andra för att de snabbt skall vara anpassade för mindre enheter. För att uppnå resultatet nedan gjordes inte några som helst ändringar i HTML eller PHP-kod. Enbart CSS-klasser.
Och om du ger dig på detta. Glöm inte att använda fluid images också för att anpassa bildstorlekarna.
