Monday, January 16, 2012

Responsive design

Just nu sitter jag och anpassar en ny kunds webbplats så att det ska se lika fantastisk ut på både Smart Phone och iPad som den gör på bred skärm. Responsive design alltså, liknande det vi utvecklade för Radiotjänst i slutet av förra året.

Självklart använder vi oss utav Media Queries. Så här kan det se ut:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* CSS här */
}

Jag känner mig mer och mer frustrerad när jag för femtioelfte gången förminskar webbläsarfönstret för att simulera ungefärlig iPad storlek eftersom designen vägrar omforma sig trots mina Media queries.

Jag vet ju att jag har gjort allting rätt, skolboksexempel, inga slarvfel någonstans…

Till slut kommer Lybeck förbi som en räddande ängel och påpekar att jag naturligtvis inte kan skriva min-device-width om jag inte testar på en faktisk device. Ska man testa provisoriskt som jag gör genom att dra i webbläsarfönstret måste man så klart vaska ordet device och endast skriva min-width och max-width för att det ska fungera.

Men ååååååååååh! Så självklart, så irriterande. Men tack Lybeck!