www.romver.ru
/ Полный список статей / веб-сайт на маленьком экране

Как заказать сайт


АБРАКАДАБРА (Тоже самое но в читаемом виде)

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

3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(812) 984 5721

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2019 romver.ru

Полная карта сайта Display Pagerank