Bloggarkiv - Januari 2012

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:

Flera nya hemsidor

Nu har vi skrivit om flera projekt vi jobbat med. Det var ett tag sedan sist, så vissa projekt har något år på nacken. Vi skriver om hur vi gjort sidorna och vilka tekniker och verktyg vi använt, mer om den tekniska biten bakom.

Dessa kan du läsa mer om:

  • Tour Africa - en Wordpress-sida som tar besökarna hela vägen till Afrika
  • Oscar of Sweden - en Silverstripe-sida som lägger all fokus på skjortorna
  • Ekoplus - Silverstripe med beställningssystem
  • Skandia Elevator - en stor Silverstripe-sida med mycket innehåll.