CSS & Responsive webdesign

Responsive webdesign med CSS - når webdesignet skal virke i alle browser typer, størrelser og på alle medie platforme.

I dag efterspørger flere og flere webløsninger, der er kompatible med alle former for platforme. Webdesignet skal virke både på kontorets store faldskærme, Ipad's lidt mindre skærm og helt ned til Iphone og de andre smartphones små skærme.

De sidste års trend har været at lave såkaldte mobil-site, som var designet og programmeret til netop små skærme og lille bånd hastighed. Rent praktisk lavede/laver man to næsten identiske hjemmesider. En til de almindelige computere og en til alle de håndholdte. Det store problem med denne løsning er, at vi for fremtiden kun kan forstille os at få flere og flere forskellige medier, som vi går på internetten med.
Skal kunderne så også betale for at lave Ipad-hjemmesider, TV-hjemmesider, spille-konsol-hjemmesider og alle fremtidens internet-devices-hjemmesider? Svaret er heldigvis nej.

Responsive webdesign

Det nye inden for webdesign og CSS er Resposive webdesign, hvor målet er at lave én løsning, der virker på alle platforme og i alle skærmstørrelser. Ideen bag Resonsive webdesign er, at hjemmesiden selv "finder ud af" på hvilket medie den nu vises på, og samtidig tilpasser sig netop dissse specielle vilkår. Er det en lille smartphone med Android eller en stor 40 tommer fladskærm på en Mac computer. Ud over at tilpasse designet til mediet, kan hjemmesiden kodes til at fra- eller tilvælge elementer. Eksempelvis kan man kode hjemmesiden, så reklamespot og bannere ikke vises på den lille smartphone, men kun på den store fladskærm. Her skal nøje gennemtænkes hvilke elementer og informationer, der altid skal vises, for at siden giver mening, og hvilke elementer der kan undværes når skærmstørrelsen er lille og internet hastigheden lav.

CSS3 giver nye muligheder

Udvælgelse af HTML og ændring af designet kan i dag laves med CSS. Sammenholdt med de mange nye muligheder i CSS3 er det med til at "genopfinde" CSS'en og gøre style sheet programmøren til en meget vigtig og central rolle i programmeringen af en hjemmeside - fra design til funktion.

Før du kaster dig ud i at kode...

Det er altid en godt, at vide lidt omkring hvilke browsere og skærmstørrelser der benytte lige nu. Her er http://www.w3counter.com/globalstats.php en uvurderlig kilde.
For mere præcist er der her: http://rankings.dk/en/rankings/web-browsers-details.html en opgørelse, som kun går på DK.

Mine "guruer" ...

• Chris Coyier er helt sikkert en af mine største helte. Udover at han selvfølgelig er fantastisk til CSS, har han en bred viden omkring jQuery og PHP. Men det der gør ham så fantastisk i mine øjne er, at han er helt nede på jorden og meget pædagogisk i sine forklaringer. Besøg hans hjemmeside http://css-tricks.com for læse eller se (screencast) hans brugbare guides, eller deltag i debatten på sidens mange fora.
• Ikke en guru ... men en god samling af links angående responsive webdesign, og en lille smule omkring Drupal - https://www.drupal.org/node/1388492