Treng tips for å lage touchtelefon-kompatibel nettside

[Fibonacci]

Eg skal no prøve meg på å lage ein mobilvenleg versjon av ei nettside eg har. Dette har eg aldri vore borti før.

 

Forstår eg det rett om nettlesarane på moderne touch-telefonar er såpass oppegåande at ein berre brukar vanleg HTML, og spesialtilpassar/strippar ned koden til å passe små skjermar og låg bandbreidde?

 

Så må vel mobilbrukarane sendast til den mobilvenlege sida. Går ut i frå dette gjerast serverside med t.d. PHP. Analyserer ein client-headers og så redirect til mobilversjon?

I så fall: har nokon eit døme på korleis ein identifiserer dei fleste touch-telefonane?

[ivanito]

Hei Kjell Arne!

 

Å utvikle websider for flere plattformer er utrolig spennende, spesielt nå som tablets og smartphones er blitt så populært blant norges befolkning.

 

Da jeg skulle utvikle min webside i et mobilvennlig format valgte jeg å bruke flere alternativer til css. Koden jeg bruke er vist under:

 

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)">

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 481px)">

 

Jeg har forøvrig laget et lite blogginnlegg om mobilvennlige nettsider, du kan jo ta en titt

 

http://blog.hig.no/090517/2011/03/28/mobilvennlige-websider/

[Fibonacci]

Takk for svar

 

Den <link rel=...>-koda under, er det nok for å identifisere skjermoppløysinga (og dermed om det er ein mobil)?

 

I så fall er det jo ganske enkelt å lage til mobilvennlege sider.

[ivanito]

Takk for svar

 

Den <link rel=...>-koda under, er det nok for å identifisere skjermoppløysinga (og dermed om det er ein mobil)?

 

I så fall er det jo ganske enkelt å lage til mobilvennlege sider.

 

Det er ihvertfall en enkel kode som tar alt med skjermoppløsning lavere enn 480px bredde til en egen css. Enkelt og kanskje også praktisk? Lurer på om db.no faktisk bruker denne typen "videresending" også. Ellers kan jeg si at jeg fant kodesnutten i boken "Building iPhone Apps – Jonathan Stark".

[Fibonacci]

Eg ser no at til dømes NRK (http://m.nrk.no/m/artikkel.jsp?art_id=17478331) lagar mobilsidene sine som relativt enkle standard HTML-sider.

Om det ikkje er verre enn dette, er det gode nyheiter for meg

[Bytex]

m.diskusjon.no er også et veldig godt eksempel. Her får man helt nye menyer på mobil.

[agm]

Du kan jo velge om du vil videresende mobilbrukere til en helt egen side (mange videresender f.eks. domene.no til m.domene.no) eller om du vil tilpasse nettsiden etter nettleseren via CSS.

 

Første alternativ krever at du identifiserer enheten (f.eks. via PHP el.lign. Google 'Browser sniffing' om det høres aktuelt ut), men for en vanlig nettside med begrenset innhold kan nok alternativ 2 være å anbefale. Ivanito er inne på noe når det gjelder å hente inn alternativ CSS-fil til brukere med mindre oppløsning på nettleseren.

 

Jeg pleier å legge opp CSS-filen noe ala dette:

 

	/* Først alt av vanlig CSS */
body { background:#b33a30; }

@media screen and (max-width: 1024px) {
	/* For små skjermer og iPad liggende */
	body { background:tan; }
}
@media screen and (max-width: 768px) {
	/* For små skjermer og iPad stående */
	body { background:gray; }
}
@media screen and (max-width: 480px) {
	/* For iPhone liggende o.l. */ 
	body { background:#3a30b3; }
}
@media screen and (max-width: 320px) {
	/* For iPhone stående o.l. */
	body { background:#779f2f; }
}

 

Som du ser lager jeg nettsiden i stor versjon, og så tilpasses skriftstørrelser, bredder, plasseringer osv ettersom nettleservinduet blir mindre.

 

I tillegg til max-width kan man sjekke f.eks. orientation (holder brukeren enheten liggende eller stående?), max/min-device-width, selve enheten (handheld/screen) osv osv. Google 'Responsive web design', så får du mer om dette!

 

Lykke til!

Endret 28. september 2011 av agm