АБРАКАДАБРА (Тоже самое но в читаемом виде)
Li6' nebol'6aa 4ast' su6estvuu6ix nine veb-saytov sleduet
standartam. Sredi etix nemnogix li6' gorstka ozabotilas' napisaniem
stiley dla portativnix ustroystv. A iz tex, kto primenaet stili dla
"naladonnikov", nemnogie mogut poxvastat' tem, 4to otdaut pol'zovatelu
"kartinku" s nizkoy razre6au6ey sposobnost'u, bez glavnogo ujasa dla
vsex naladonnikov - gorizontal'noy prokrutki.
Brauzer Opera rabotaet na portativnix ustroystvax s ekranami
vsevozmojnix razmerov i razre6au6ix sposobnostey, 4ast' iz nix imeet
6irinu vsego v 120 pikseley. Mi rabotaem v kompanii, proizvoda6ey
Opera, a potomu mojem podrobney rasskazat' o vstroennix v neё funkciax
podderjki "naladonnikov". Dla etoy stat'i mi podgotovili rad ob6ix
sovetov po sozdaniu tablici stiley, drujestvennoy portativnim
ustroystvam, a takje neskol'ko podskazok, specifi4nix dla Operi,
kotorie mogut okazat'sa poleznimi.
Prokrustovo loje
Glavnoe ograni4enie portativnix ustroystv - malen'kiy ekran, u
kotorogo, vdobavok, mojet otsutstvovat' funkcia gorizontal'noy
prokrutki. Vvod dannix 4a6e vsego osu6estvlaetsa perom (stylus), a ne
mi6'u. Zagruzka faylov v takoe ustroystvo, veroatney vsego,
dorogostoa6aa i medlennaa, processor slab, pamat' ograni4ena. Poetomu
mnojestvo pol'zovateley otklu4aet samu vozmojnost' ska4ivania
izobrajeniy.
Itak, 4to je eti ograni4enia zna4at dla dizaynera?
- Ukladivaytes' v odnu kolonku, izbegaa plavau6ix blokov ;
- Optimiziruyte va6 HTML-kod, ispol'zua racional'nuu i semanti4eski gramotnuu razmetku, a takje CSS;
- Svedite k minimumu 4islo dekorativnix izobrajeniy. Sozdavaa navigaciu, ne polagaytes' na kartinki i plagini;
- Snabjayte izobrajenia xoro6im poasneniem v atribute alt;
- Ne primenayte dinami4eskie effekti v navigacii, dla kotorix obi4no trebuutsa mi6' ili klaviatura.
Umen'6aem mas6tab
Daje esli so vremenem vozrastёt razre6enie ekrana "naladonnikov", ix
fizi4eskaa 6irina vsё ravno budet ne bol'6e, 4em va6 karman. Otsuda
naibolee vajniy vivod: na stranicu mojno pomestit' tol'ko odin stolbec
teksta. Krome togo, vam neobxodimo, 4tobi kolonka bila 6iroka
nastol'ko, naskol'ko eto vozmojno - t.e. tak, 4tobi ona ne bila poxoja
na stixotvorenie (tekst doljen bit' bez viklu4ki vpravo; ne imet'
"rvaniy" praviy kray. - Prim. perev.).
Prejde vsego, izbegayte ispol'zovat' razmer v pikselax dla vsego,
4to krupnee 5px (imenno tak!). Piksel'nie razmeri bol'6e, 4em etot,
budut ploxo mas6tabirovat'sa - ispol'zuyte dla nix procenti ili "em".
Umen'6ite 6irinu poley, otstupov i granic soobrazno ograni4eniam
malen'kogo ekrana. 3em pered zagolovkom xoro6i dla ekrana monitora, no
dla "naladonnika" eto - 4eres4ur. 6irinu granic sleduet li6' slegka
umen'6it', a otstupi nado "urezat'" proporcional'no. Eto pomojet
umen'6it' izbito4nie granici i razradku (spacing) v nekotorix variantax
komponovki stranic: na malen'kix ekranax oni budut kazat'sa "ujatimi".
Na malen'kix ekranax krupniy tekst zanimaet mnogo mesta i vigladit
neukluje. Sledovatel'no, krupnokegel'niy 6rift ne doljen bit' bol'6e,
4em dvajdi uveli4enniy 6rift teksta abzacev, i im ne sleduet
zloupotreblat'. Melkiy kegl' takje doljen bit' bolee blizok po razmeram
k 6riftu paragrafov, nejeli obi4no (kak na ekrane nastol'nogo
komp'utera).
Dayte blokam zanat' maksimal'no vozmojnuu 6irinu - primenayte li6' nebol'6ie
zna4enia gorizontal'noy razradki. Otstup v 1em sli6kom velik dla
ustroystv s uzkimi ekranami, poetomu v bol'6instve slu4aev neobxodimo
ograni4ivat' razmeri gorizontal'nix poley i otstupa predelami 1em.
Poskol'ku procenti ots4itivautsa ot 6irini ekrana - ukazanie razmera
pola v nix, a ne v "em", budet otli4no rabotat' v 6irokom diapazone
razmerov ekrana.
Vistraivaem v liniu
Lu46e vsego stranica vitagivaetsa v odnu kolonku togda, kogda eё
struktura special'no prisposoblena dla etogo. Esli dokument
strukturirovan soobrazno logike, u vas est' garantia, 4to takaa
organizacia stranici budet ponatna ne tol'ko v versii Operi dla
portativnix ustroystv, no takje i v brauzerax, ne podderjivau6ix CSS (i
tex, 4to ustanovleni v nebol'6ix ustroystvax, i tex, 4to v "bol'6ix"
komp'uterax), v golosovix brauzerax, i v terminal'nix brauzerax tipa
Lynx.
Svёrtivanie maketa v odnu kolonku na udivlenie prosto osu6estvit'
(kone4no, esli dla vёrstki vi ispol'zuete CSS): prosto otbros'te ili
otmenite pravila, dobavlau6ie plavau6ee i absolutnoe pozicionirovanie.
Esli osnovoy va6ego maketa slujit tablica - prikajite a4eykam vesti
seba kak blo4nie elementi:
table, tbody, tr, td, th {
display: block; }
Verxnaa 4ast' stranici imeet vajney6ee zna4enie; vi je ne xotite,
4tobi 4itatel' ustalo prokru4ival 6apku stranici v neskol'ko ekranov,
poka ne dostignet na4ala teksta. V na4ale stranici vpolne dostato4no
budet ostavit' logotip i neskol'ko nebol'6ix elementov navigacii,
naprimer, korotkiy navigacionniy spisok, ssilki-cepo4ki,
ili formu dla poiska. Dlinnie navigacionnie spiski, reklamnie
ob&avlenia, i drugie vtorostepennie materiali doljni idti posle
osnovnogo teksta. Dla bol'6instva sxem komponovki stranici eto zna4it,
4to vse oni doljni peremestit'sa v pravuu kolonku (v protivopolojnost'
levoy) na ekranax nastol'nix komp'uterov. V ka4estve ideal'nogo primera
mojno privesti stranici sayta A List Apart.
Nesu6estvennie navigacionnie elementi neobxodimo skrit' s pomo6'u
display: none. Naprimer, esli vi ispol'zuete dinami4noe vipadau6ee
menu, raskinuv6eesa na vsu 6irinu ekrana monitora, dla naladonnika
ostav'te tol'ko zagolovok teku6ego menu, sdelayte ego ssilkoy na etot
razdel sayta i skroyte vse ostal'nie menu s podrazdelami. Eto pozvolit
snizit' peregrujennost' menu, i ne vizovet osobix slojnostey s
navigaciey (pri uslovii, 4to va6 sayt pravil'no organizovan).
Ume6aem vsё v odin ekran
Osnovnaa problema "naladonnikov" zaklu4aetsa v tom, 4to ix ekrani
mali, k tomu je ustroystva mogut voob6e ne imet' mexanizma
gorizontal'noy prokrutki. Zna4it, k neobxodimosti razme6at' kontent v
odnu kolonku dobavlaetsa e6ё odna: vi doljni udostoverit'sa, 4to 6irokie elementi prisposobleni k pokazu na uzkom ekrane.
K elementam s fiksirovannim razmerom otnosatsa izobrajenia i
elementi form. Dla togo, 4tobi oni ne vilezali za predeli ekrana,
zadayte im maksimal'nuu 6irinu v 100% (max-width: 100%).
4to kasaetsa formatirovannix blokov (<pre>): mi libo ujimaem
plotnen'ko-plotnen'ko tekst (s dlinoy stroki po 25-30 simvolov), libo
razre6aem razrivat' stroki pri perenose. Poslednee mojno sdelat',
dobaviv v va6u tablicu stiley sleduu6ie pravila:
pre { white-space: -pre-wrap;
/* Ras6irenie CSS dla brauzera Opera */
white-space: pre-wrap;
/* Dopolnenie dla CSS 2.1 */}
Osteregaytes' fiksirovannogo pozicionirovania. Zafiksirovanniy element, vi6ed6iy za oblast' prosmotra, budet polnost'u nedostupen.
Otkazivaemsa ot dinamiki i effektov
Opera v "naladonnikax" podderjivaet tot je nabor dinami4eskix
effektov, 4to dostupen v versii dla nastol'nix PK. Odnako ne vse
effekti, otli4no rabotau6ie na ekranax nastol'nix PK, vedut seba tak je
na ekranax portativnix ustroystv. "Primo4ki", slegka razdrajau6ie na
bol'6om ekrane, na ekrane "naladonnika" mogut kazat'sa bolee
navaz4ivimi.
Ne ispol'zuyte freymi i vsplivau6ie okna. Da, Opera sposobna
pokazivat' freymi v "naladonnikax", no iz-za nix navigacia i
demonstracia kontenta stanut zaputannimi do boli v pal'cax. Otkrivayte
vse ssilki v etom je okne: "naladonniki" do six por ne mogut upravlat'
mnojestvom okon tak, kak eto delaetsa nastol'nimi PK.
Kak i dla 6irokoekrannix maketov, ubedites' v tom, 4to elementi
navigacii dostupni daje bez mi6i. Razumeetsa, ne stoit privazivat'
skripti k sobitiam, svazannim s klaviaturoy: vzaimodeystvie na
naladonnikax osu6estvlaetsa 4a6e vsego s pomo6'u pera (stilusa), iz-za
4ego nevozmojno ispol'zovat' sobitia hover ili keypress, ili
rass4itivat' na najatie pravoy knopki mi6ki ili dvoynoy 6el4ok.
Ujimaem grafiku
Operatori mobil'noy svazi "greut ruki" na kajdom kilobayte trafika,
iz-za 4ego zagruzka saytov, nasi6ennix izobrajeniami, stanovitsa ne
tol'ko medlennoy, no i vletaet v kopee4ku. Znaa eto, pol'zovateli 4asto
ekonomat vrema i den'gi, prosto otklu4aa pokaz izobrajeniy.
Vi mojete sdelat' svoy dizayn menee nagrujennim grafikoy, sledua etim sovetam:
- Spra4'te nenujnie izobrajenia s pomo6'u display: none - Opera ne budet ix ska4ivat'.
- Ispol'zuyte dla navigacionnix elementov nastoa6iy tekst, a ne grafi4eskie fayli.
- Ukajite Opere ispol'zovat' soderjimoe atributa alt vmesto ska4ivania samogo izobrajenia:
img.as-text { content: attr(alt); }
Nepremenno ukajite zna4enia atributov width (6irina) i height
(visota) dla tex izobrajeniy, kotorie vi re6ili ostavit'. Eto
neobxodimo dla togo, 4tobi stranica soxranala neobxodimuu formu daje do
polnoy zagruzki izobrajeniy. Kstati, izobrajenia, sozdannie dla ekranov
nastol'nix PK, obi4no ploxo mas6tabiruutsa na nebol'6ix ekranax. Lu46e
vsego podxodat dla "naladonnikov" izobrajenia sjatie, umen'6ennie i
(ili) optimizirovannie po razmeru.
Ne zabivayte pisat' dla izobrajeniy al'ternativniy tekst,
napolnenniy smislom. Pomnite, idea atributa alt sostoit v tom, 4to on
ne opisivaet kartinku, a zamenaet ee. Esli izobrajenie slujit li6' dla
dekorativnosti, alt doljen soderjat' pustuu stroku ("").
Optimiziruem HTML
Primenayte effektivnuu, semanti4eski gramotnuu razmetku,
a zabotu o vne6nem vide ostav'te CSS. Tablici stiley (CSS) bolee mo6noe
sredstvo, bolee kompaktnoe, ne zaxlamlau6ee dokument izbito4noy
informaciey o ego vne6nem vide. Eti ka4estva xoro6i pri rabote s lubimi
media-ustroystvami, no osobenno poleznimi oni stanovatsa v processe
vёrstki dla portativnix ustroystv.
- Ne perebor6ite s class-ami, div-ami i span-nami. Esli
est' bolee podxoda6iy HTML teg, ispol'zuyte ego, dobaviv, po
neobxodimosti, osobiy class. Esli v elemente net osoboy nujdi, uberite
ego. Esli mojete podobrat' podxoda6iy po kontekstu klass, ne vvodite noviy.
- Ispol'zuyte
tegi, nailu46im obrazom peredau6ie sut' i strukturu kontenta.
Semanti4eskie HTML tegi imeut ob6epriznanniy smisl, 4ego ne skaje6' o
pridumannix avtorami klassax i variantax otobrajenia teksta v razli4nix
6riftax. Pomimo drugix vigod, logi4eski 4ёtkaa razmetka pozvolaet
brauzeram, ne podderjivau6im CSS (ix 4a6e vstreti6' na portativnix
ustroystvax, nejeli na nastol'nix komp'uterax), pokazivat' pol'zovatelu
ponatniy, vrazumitel'niy kontent. Semanti4eskie tegi, kstati, gorazdo
koro4e, 4em konstrukcii tipa div+class - a eto skazivaetsa na
umen'6enii "vesa" fayla.
- Sozdavayte semanti4eskie, a ne oformitel'skie klassi i identifikatori. Esli va6 kod sam ob&asnaet, po4emu danniy element oformlaetsa imenno tak, a ne kak
on oformlaetsa, va6a razmetka ne budet privazana k opredelennomu
oformleniu. V budu6em oformlenie i komponovka stranici mogut bit' s
legkost'u izmeneni bez izmenenia razmetki. Kod, napisanniy s u4etom
etix pravil, obi4no namnogo bolee kompakten i 4itabelen.
- Pome6ayte
skripti i stili vo vne6nie fayli. V etom slu4ae brauzer budet ix
ke6irovat', 4to sokratit vrema zagruzki s sayta posleduu6ix stranic.
Poprosim Operu primenat' va6i stili
4to j, teper' vi znaete, kak verstat' dla portativnix ustroystv - nastalo vrema ubedit'sa, 4to v Opere vklu4ena podderjka etix stiley:
Opera rabotaet s misl'u, 4to bol'6instvo veb-stranic ne
prisposobleno k pokazu v portativnix ustroystvax. Esli vklu4en rejim
"fit to screen" (nastroyka "po umol4aniu" dla bol'6instva ustroystv),
to avtorskie stili ignoriruutsa i stranici pereformatiruutsa pod
nebol'6oy ekran, za isklu4eniem tex slu4aev, kogda stranica imeet special'niy fayl so stilami dla "naladonnikov".
4tobi ukazat' Opere na nali4ie stiley dla "naladonnikov", v elemente
<link> ili <style> v atribute media zapi6ite zna4enie
"handheld", ili, esli va6 CSS kod soderjitsa v tele stranici,
vospol'zuytes' direktivami @media ili @import, ukazivau6imi na tip
ustroystv:
<link rel="style sheet" href="..." type="text/css" media="handheld" />
<style type="text/css" media="handheld">...</style>
<style type="text/css">
@media handheld { ... }
</style>
<style type="text/css">
@import url(...) handheld;
</style>
Esli eta tablica stiley primenaetsa takje i k drugim tipam ustroystv
(a to i ko vsem srazu) - pere4islite ix v atribute media, razdeliv
nazvania zapatimi. I ne zabud'te avno vpisat' tuda e6ё i handheld.
Naprimer:
<link
rel="style sheet"
href="site-style.css"
type="text/css"
media="handheld,all"
/>
Esli sredi podklu4ennix tablic stiley naydёtsa xota bi odna, imeu6aa
atribut handheld - Opera otklu4it vnutrenniy rejim SSR, i na4nёt
primenat' vse tablici stiley, napisannie dla portativnix ustroystv
(vklu4aa tablici bez ukazania tipa ustroystva ili tablici s
media="all"). Opera ne zagruzit vne6nie tablici stiley, soderja6ie
direktivi @media ili @import rules do tex por, poka ne prinato re6enie
o viklu4enii rejima otobrajenia "rastanut' na ves' ekran".
Sledovatel'no, vi doljni neposredstvenno v samoy HTML-stranice avno ukazat' na nali4ie stiley dla portativnix ustroystv.
Zaver6iv rabotu nad dizaynom, protestiruyte ego.
Esli vam nedostupno portativnoe ustroystvo s ustanovlennim na nёm
brauzerom Opera - emuliruyte povedenie "naladonnika" na nastol'nom PK,
zapustiv stranicu v Opere i najav Shift+F11.
Vzglanite na primer
Dla illustracii predstavlennogo vi6e podxoda (adaptacia dizayna pod
specifiku "naladonnikov") mi sozdali tablicu stiley dla ALA (s
media="handheld"), snabdiv eё kommentariami. Fayl dostupen po adresu /d/pocket/handheld.css. Vi mojete ocenit' rabotosposobnost', prosmotrev /d/pocket/ v sootvetstvuu6em brauzere.
Opera vi6la na svoё sobstvennoe re6enie problemi togo, 4to pri
vozros6em 4isle portativnix ustroystv li6' nezna4itel'naa 4ast'
veb-saytov prisposoblena k pokazu stranic na nix. Bud' Set' ideal'noy -
Opere bi ne pri6los' "tanut' na sebe" vse eti ulovki, nujnie dla
vtiskivania stranici v uzkiy ekran. Odnako mi iskrenne nadeemsa, 4to
vsё bol'6ee 4islo veb-avtorov stanet proavlat' interes k sozdaniu svoix
sobstvennix priёmov, sposobnix pomo4' sozdaniu deystvitel'no
ka4estvennogo dizayna dla "naladonnikov". Sdelat' tak, 4tobi veb-sayti
vigladeli prevosxodno i na nebol'6ix ekranax, slojno, no vsё-taki net
ni4ego nevozmojnogo. Pocket-Sized Design: Taking Your Website to the Small Screen
avtor: © Elika Etemad (Elika Etemad) i Yorun Danielsen N'uf (Jorunn D. Newth) i A List Apart
perevod: Maksim Rossomaxin
| 