Lage webside for mobil med mobil layout

[HulkHaugen]

Jeg har aldri vært flink med bokmerker, og har ingen planer om å bli det heller Derfor har jeg laget min egen startside. Nå tenkte jeg at jeg også kunne lage min egen mobile startside, og vil ha layout med ikoner, 4 stk i bredden og med tittel under ikonet, akkurat som i menyene på en Android eller iOS enhet. Da er det noen ting jeg lurer litt på:

 

1. Oppløsning. Jeg vil ta hansyn fra små til store mobiler, selv om 480x800 nok er det mest vanlige i dag. Veg vil også skalere bedre enn jeg har gjort tidligere da det har vært meget pixelorientert. Til nød kan det flytte ikoner til neste linje med lavere oppløsning, eller opptil 5 i bredden på store skjermer. Hvis jeg setter width="25%" el. på div, så risikerer jeg masse luft rundt ikonene som vil se dumt ut...

 

2. Designet. Lurer litt på hvordan dette skal gjøres, og har sett for meg en class="link" eller noe lignende til å bruke på et div-element, men da blir det jo veldig mange div'er. Er det dumt? Hvordan kan det ellers gjøres praktisk?

 

3. HTML5? min nåværende side (PC) er skrevet i XHTML+CSS, men jeg googlet noen templates og fant én basert på HTML5, og lurte på om jeg burde prøve ut det. Fot/mot?

[Drunkenvalley]

Bare du flytter alle hardkodede størrelser over i CSSene kan du mer eller mindre slå deg løs.

 

Hvis kvart løsflytende element er ein float basert på em størrelser burde jo i grunnen alle elementene skalere ganske så pent tvers over fleste mobil-nettlesere.

[HulkHaugen]

Ja, jeg skriver så mye som mulig i CSS, kanskje jeg formulerte meg litt feil. En liten stund siden jeg har gjort dette nå. Men hva med ikonene til linkene? Hvis de er f.eks. 100x100px, og blir fordelt utover et display på 720x1280, så vil der vel bli veldig masse tomrom? Så du er enig i å bruke én <div> med ikon og tekst pr lenke?

[Drunkenvalley]

Eg har egentlig litt vanskelig for å forstå spørsmålet her akkurat nå, beklager.

 

Bildene kan alltids tvinges til å skaleres ned; dette burde i utgangspunktet ikkje ha stor effekt.

 

Telefoner pleier å ha ein rimelig grei presentasjons-plass, så det er ikkje noe problem med å ha mykje luft. Spørsmålet er vel heller korleis du får den tomme lufta til å se bra ut...

[HulkHaugen]

ok, men hvordan autoskalerer jeg bildestørrelsene til å tilpasse telefonens oppløsning da? Jag jeg sette width="20%" og height="width" ??? Jeg vil at avstanden mellom ikonene skal være proposjonal, uavhengig av oppløsningen på telefonen...

 

EDIT: Si at ikonet er 128x128px, og oppløsningen er 480px, da vil ikonene overlappe hverandre, men hvis oppløsningen er 800px, så vil det bli veldig mye mellomrom. Tror kanskje jeg bare skal definere størrelsen i pixler, det virker greiere, og hvis man tilter telefonen vil man få flere ikoner på samme linje...

Endret 14. desember 2011 av HulkHaugen

[agm]

Du kan jo bruke responsive CSS til å sniffe bredden på nettleservinduet.

 

Legg dette i HTML:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, 
maximum-scale=1.0">

 

Og så kan du tilpasse CSSen utifra bredde på nettleseren:

 

@media all and (max-width: 320px) {
 // Her kommer CSS tilpasset iPhone stående
}
@media all and (max-width: 480px) {
 // Her kommer CSS tilpasset iPhone liggende
}
@media all and (max-width: 768px) {
 // Her kommer CSS tilpasset iPad stående
}
@media all and (max-width: 1024px) {
 // Her kommer CSS tilpasset iPad liggende
}

[EnvyAndroid]

Kanskje du kan bruke

http://html5boilerplate.com/mobile

eller

jQuery Mobile?

 

sparer deg for mye arbeid, med mindre du vil lære og gjøre alt selv