Sparčiai gausėjant mobiliųjų įrenginių (išmaniųjų telefonų) naudotojų, verta taikyti ir į šį segmentą.
1. Išnaudokite visą ekrano erdvę, nes mobilieji įrenginiai turi pakankamai mažą ekraną, lyginant su stacionariais kompiuteriais.
Interneto svetainės, kurių mažiausias plotis 320px tinkamas iPhone, Android, Nokia N97.
Kai kurių mobiliųjų įrenginių ekranų rezoliucijos:
„iPhone” – 320 x 480
„iPhone 4“ – 320 x 480 (sumažinus 2 kartus)
„Nokia N97“ – 360 x 640
„HTC Legenda“ – 320 x 480
„LG Expo“ – 480 x 800
Tai reiškia, kad 320 x 480 interneto svetainės daugumai veiks puikiai.
2. „iPhone 4“ turi 4 kartus daugiau pikselių, nei ankstesnis modelis. Norint, kad svetainė atrodytų gerai, reikėtų padidinti vaizdą 200%. Taip pat reikėtų įterpti ir didelės raiškos vaizdus „iPhone 4“ įrenginiui. Kūrėjai turėtų sukurti 640 pikselių pločio dokumentus ir juos eksportuoti pilna rezoliucija „iPhone 4“ ir 50 procentų sumažinta rezoliucija visiems kitiems įrenginiams.
Čia CSS pavyzdys „iPhone 4“:
.myImage {
height: 40px;
width: 100px;
-webkit-background-size: 100px 40px;
background: url(„images/myImage.jpg”);
}
@media screen and (-webkit-device-pixel-ratio: 2) {
.myImage {
background: url(„images/myImage@2x.jpg”);
}
}
Kartais kyla kai kurių nesklandumų su -webkit-background-size: 100px 40px. Tai yra 2 parametrai (plotis, aukštis), kurie gali būti nurodomi pikseliais (px) procentais ar automatiniai. Galimi ir miksuoti variantai: -webkit-background-size: 100% auto. Tuo nurodoma naršyklei nustatyti reikiamą dydį.
Antras dalykas – nuotraukos (-webkit-device-pixel-ratio: 2). Veikia tik tada, kai įrenginys palaiko „pixel ratio 2“.
3. Mobilieji įrenginiai jūsų svetainę laiko pritaikyta tik stacionariems kompiuteriams, kol jūs nenurodote kitaip. Pridedate „viewport“ į meta žymę, kad svetainės lankytojui nereiktų padidinti/sumažinti ekrano vaizdo:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
Mobilieji įrenginiai taip pat nustato ir teksto dydį automatiškai. Arba jūs galite nurodyti reikiamus CSS parametrus:
body {
-webkit-text-size-adjust: none;
}
4. Mobilieji įrenginiai neturi pelės tikslumo, nes dažniausiai naudojamas pirštų lietimui jautrus ekranas. Neverskite lankytojo nusismailinti pirštų dėl mygtuko paspaudimo jūsų interneto svetainėje. „Apple“ yra pasakę, kad mygtuko dydis turėtų būti 44px x 44px (aukštos rezoliucijos dokumentuose 88px x 88px). Aišku, nereikia padidinti mygtukų, o, tiesiog, padidinti paspaudimui reikalingą plotą.
5. Nenaudokite tokių funkcijų, kurios galimos tik kompiuteriams su pele. Pavyzdžiui, pelės užvedimui jautri sritis (hover) ar (mouseover).
6. Pridėkite piktogramą (ikoną) ir lankytojai įsikels nuorodą į savo greitų funkcijų sistemą. Įkeliame meta žymes:
<!– 57 x 57 Android and iPhone 3 icon –>
<link rel=”apple-touch-icon” media=”screen and (resolution: 163dpi)” href=”icon57x57.png” />
<!– 114 x 114 iPhone 4 icon –>
<link rel=”apple-touch-icon” media=”screen and (resolution: 326dpi)” href=”icon57.png” />
<!– 57 x 57 Nokia icon –>
<link rel=”shortcut icon” href=”icon57x57.png” />
Pastaba. „iPhone“ automatiškai įkels piktogramą užapvalintais kampais. Norint to išvengti, keičiame:
<link rel=”apple-touch-icon-precomposed” media=”screen
and (resolution: 163dpi)” href=”/iOS-57.png” />
<link rel=”apple-touch-icon-precomposed” media=”screen
and (resolution: 132dpi)” href=”/iOS-72.png” />
<link rel=”apple-touch-icon-precomposed” media=”screen
and (resolution: 326dpi)” href=”/iOS-114.png” />
7. Naudokite CSS3 mobiliesiems įrenginiams. Spalviniai perėjimai ar užapvaliniti mygtukų kampai gali atrodyti išskaidyti, todėl naudokite CSS3:
.redButton {
color: #B91440;
font-size: 19px;
line-height: 25px;
padding: 10px 30px;
border: 1px solid #FFFFFF;
background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FFFFFF));
-webkit-box-shadow: 0 0 2px #E4E3E3;
-webkit-border-radius: 5px;
}
Pastaba. „iPhone“, „Android“ ir „Nokia“ palaiko CSS3, bet „Windows mobile broser 6.5“ yra sukurtas IE6 (Internet Explorer“ 6) pagrindu.
8. Kai kurios naršyklės nepalaiko HTML5 funkcijų, bet jos priima HTML5 doctype:
<!DOCTYPE html>
Naudojant šį doctype jūs visoms naršyklėms leisite naudoti HTML4, o HTML palaikančioms naršyklės pridėkite papildomų funkcijų.
9. Svetainės lankytojai mobiliuosiuose įrenginiuose nevisada turi gerą greitaveiką, todėl leiskite jiems naudotis neprisijungus (sugrįžtantiems lankytojams).
Naudojant HTML5 tai nesunkiai įvykdoma. SQLite duombazės sukūrimas – puiki galimybė mobiliesiems įrenginiams, palaikantiems JavaScript.
10. Leiskite lankytojams naudotis ir įprasta svetainės versija. Iškilus kokioms nors problemoms lankytojai gali perjungti į įprastinę interneto svetainės versiją.
Tik sukūrus kokybišką interneto svetainę mobiliesiems įrenginiams, kurių gausa vis didėja, galime pasidžiaugti pritraukę vis daugiau lankytojų.
Dėmesio. Tai patariamojo pobūdžio straipsnis, kuris gali palengvinti kai kurių naujai pradedančiųjų kūrėjų darbą.