Kategoriarkiv: Responsive webdesign

Mobilvenlig hjemmeside


Der er typisk to måder at forholde sig til en mobilvenlig hjemmeside på. Enten udarbejdes en dedikeret mobil-version af hjemmeside – dette ses typisk ved, at hjemmesiden har en separat version fx på et subdomæne (m.domæne.dk). Eller alternativt kan man gå den mere “responsive” vej. Med “responsive” (og adaptive) webdesign refereres der populært til webdesigns, der tilpasser sig den pågældende enhed (fx laptop, tablet eller smartphone).

Hvad er responsive eller mobilvenligt webdesign / hjemmeside-design?

Som nævnt ovenfor, kan udfordringen med at lave en mobilvenlig hjemmeside gribes an på forskellige måder. Så vidt muligt, vil jeg grundlæggende argumentere for, at man går efter et responsive design. At et hjemmeside-design er responsive betyder, at den “reagerer” på omgivelserne. Og som bekendt er omgivelserne i denne sammenhæng en blanding af browseren og skærmstørrelsen. En 27″ iMac stiller andre krav til præsentationen end en iPhone (eller anden smartphone). Imellem disse to yderpunkter ligger en række mellemstationer, såsom tablets, smartphone i landscape format (når den ligger ned), mm.

Hvis en hjemmeside er bygget op udfra en responsive tilgang, vil man i nyere browsere (fx Safari, Chrome, Firefox og Internet Explorer 9+) kunne se, hvordan hjemmesiden opfører sig i forskellige skærmstørrelser. Det illustreres let ved at resize browservinduet og ganske enkelt tage fat i højre side/kant af vinduet og trække mod venstre, så vinduet gradvist bliver smallere.

I transformationen fra stor til lille skærm (eller omvendt) vil der typisk ske en række ændringer i form at størrelser, placeringer, synlighed, osv. af elementer. På de små skærme kan det være en god idé at skjule de elementer, der ikke 100% relaterer sig til sidens primære pointe. Det kunne fx være banner-annoncer, store footere med yderligere info, osv.

Forskellen på at resize en hjemmeside, der er baseret på et responsive / adaptive design-mønster og en hjemmeside, der har fast definerede bredder, strukturer osv, er, at man på en meget lille skærm vil få en “sammenpresset” version af hjemmesiden (dvs. med meget små bogstaver). Dette er ikke særlig mobil-venligt. I et mobil-venligt design, vil man have mulighed for at bevare tekst-størrelser, vise billeder i et passende format, skjule mindre relevante elementer, osv.

Læs mere om forskellen på adaptiv og responsive webdesign her…



IE9 using wrong media query


Today I was facing a problem with a responsive webdesign in IE9. For you information it’s based on getskeleton.com, but that’s not really part of the problem.

My responsive webdesign was working just perfectly in all the browsers I expected it to work – except for IE9. I had done an early test that didn’t show any problems, but today, it suddenly broke in IE9. Or in other words, IE9 started ready a this media query for mobile devices:

@media only screen and (max-width: 767px) {}

Googling the problem didn’t really help me out, but since a lot of you out there have been facing something similar I though I’d share my findings here. Basically I knew that the site was running perfectly in an early state. So I was convinced that the problem was “my fault” and at some point I must have done something wrong.

The solution / answer was found by using w3’s CSS validator. I simply pasted the entire CSS content into their “By direct input” and there it was – a simple CSS error. My CSS looked like this:

#header-nav-wrap-small ul li.current-menu-item ul li a,
#header-nav-wrap-small ul li.current-menu-parent ul li a,
#header-nav-wrap-small ul li.current-menu-ancestor ul li a,
#header-nav-wrap-small ul li ul li a
padding: 5px;
background: #eeeeee;
color: #0C4A5D;
}

I didn’t’ realize that I missed out the beginning {. Chrome, Safari, FF, etc. handled my poor CSS without any problems, but IE9 was so “kind” to break the media queries and forced me to discover the bug.

Bottom line: “Small” CSS errors can force IE9 to jump into the wrong media queries and break your responsive design. So if you experience something like this – well, check out your CSS, there might be some bugs in the machinery.