Om flexibla bilder av Tim Kadlec

En flexibel hemsida i mobilen kräver inga stora bilder. Tekniken för att visa olika bilder för olika media spretar.

Tim Kadlec har testat olika sätt för detta och tagit reda på om alla bilder laddas in eller bara de som ska visas för det aktuella mediet gör det. Mycket intressant!

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

MKSE gillar Tour Africa!

Förra veckan tipsade jag Martin Edenström om Tour Africas nya fina hemsida som Dragnet programmerat. Idag kan vi alla läsa om den på mkse.com. Vad tyckte han då? Jo...

"Ett väl genomfört jobb av byråerna."

Kolla in mer:

Den flexibla webben

Nu är det dags att börja fylla en ny kategori här på bloggen: Den flexibla webben!

I samma takt som folk börjar besöka sidor via mobil och läsplatta så anpassar vi hemsidorna efter dessa medier. Namnen för detta är många; flexibel hemsida. responsive web, anpassningsbar design o.s.v.

För att illustrera vilka typer av tekniska prylar som en sådan flexibel design kan anpassas till finns denna sida: www.thismanslife.co.uk/projects/lab/responsiveillustration. Surfa in med datorn och ändra storleken på webbläsarfönstret för att se allihopa.

Flexibla verktyg

CSS

Det dyker upp fler och fler mallar med css och javascript som ska underlätta utvecklingen av flexibla hemsidor. De kan innehålla färdiga grids, satta textstorlekar och färdiga gränsvärden för olika enheter (media queries). Ett av dem som har testats här heter Skeleton www.getskeleton.com. Ett som låter intressant är lessframework.com. Men det går att göra en flexibel webb utan dessa extra verktyg.

Bildspel

Flexslider säger sig vara "The Best Responsive jQuery Slider". Det är ett väl utvecklat jQuery-plugin som gör det den ska och gör det bra. Det finns utrymme för att anpassa utseende och funktion efter sidan den ska användas till och den går att styra på en touch-skärm. En sida vi gjort som använder Flexslider är www.tourafrica.se. Mer info om pluginet hittar du på denna sida: flex.madebymufffin.com.

Lightbox

Fancybox gick och blev version 2.0 för ett tag sedan. Den största förändringen för oss som jobbar med webben är att den nu är licensierad under Creative Commons Attribution-NonCommercial 3.0. Alltså att den kostar att användas på kommersiella sidor. För den dryga kostnaden 650 kr så kan utvecklare använda Fancybox på ett obegränsat antal sidor och det är det värt. Andra förändringar är att den är just flexibel, den använder CSS3 till skuggor och rundade hörn. Läs mer om Fancybox på www.fancyapps.com/fancybox

Referenser

Sidor vi gjort flexibla: