Dobrý deň moji milí čitatelia blogu. Galiulin Ruslan je v kontakte. Dnes si povieme niečo o mobilných verziách stránok, ktoré musí mať každá stránka či blog, aby postúpil na TOP vyhľadávačov. V článku uvediem kódy štýlov a hotové príklady rozloženia stránky, ktoré si môžete stiahnuť do počítača.

Ak váš web stále nie je vhodný pre mobilné zariadenia, odporúčam vám využiť moju radu alebo kontaktovať profesionálov – http://www.mobile-version.ru ktorí budú robiť všetko podľa štandardov vyhľadávačov. Pomocou rovnakého odkazu môžete tiež skontrolovať mobilitu svojho webu.

V ROKU 2013 Google rok začal tlačiť na správcov webu ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), ktoré presviedčajú o potrebe vytvárať odľahčené úpravy webových stránok a od roku 2015 sa mobilita stala jedným z aspektov hodnotenia ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex nezaostáva, pretože vytvoril špeciálny algoritmus Vladivostoku, ktorý zohľadňuje vhodnosť stránky na prezeranie z telefónov.

Mobile Friendly dnes nie je len starostlivosť o návštevníkov, ale aj nevyhnutná podmienka propagácie.

Keď je stránka vytvorená úplne od začiatku, použije sa prístup Mobile First. Ale väčšina má staré fungujúce projekty. Hlavnou otázkou, ktorú mobilná verzia stránky v takýchto situáciách vyvoláva, je, ako to urobiť bez zničenia existujúcej šablóny?

Existujú tri prístupy:

• Samostatná adresa a rozloženie - umiestnené na subdoméne formulára m.site.ru. Presmerovanie nastáva prostredníctvom presmerovania servera užívateľským agentom.
• Responzívny dizajn – adresa URL a html zostávajú rovnaké ako v desktopovom formáte, ale v CSS vracajú mediálne dopyty pravidlá pre rôzne obrazovky.
• RESS je responzívny dizajn, adresa zostáva rovnaká, ale server odosiela sady štýlov v závislosti od typu hardvéru, ktorý stránku požaduje.

Pre majiteľov starých projektov optimálna voľba- použitie adaptívneho rozloženia. Ako to urobiť sami a bez použitia nebezpečných doplnkov, zvážime krok za krokom.

Mobilná verzia stránky: ako to urobiť správne

Ďalšie kroky budú vyžadovať solídne základné znalosti html a css alebo schopnosť rýchlo vygoogliť nezrozumiteľné veci.

Informácie pre začiatočníkov: v CSS slová pred zloženými zátvorkami znamenajú konkrétne časti súboru html, ktoré sú zodpovedné za zobrazenie. Častejšie písané bodkou alebo krížikom - #miesto (vlastnosť: hodnota;).

Krok 1. Odstráňte obmedzenia.

Vlastníci rozloženia tekutín môžu tento krok preskočiť. Zvyšok bude musieť tvrdo pracovať.

šírka- hľadáme veľké časti v kóde s pevne definovaným zobrazením. Ak je parameter špecifikovaný v pixeloch alebo bodoch, musíte zmeniť jeho hodnotu na percentá, ems a iné jednotky, ktoré sú citlivé na prostredie. Hlavná nádoba alebo oblasť obsahu má často pevnú šírku – vo väčšine prípadov sa obmedzenia odstránia jej nahradením maximálnou šírkou.

snímky- namiesto jasných veľkostí predpisujeme vlastnosti pre značku img, ktorá dodá obrázkom prispôsobivosť. Fotky zmenia pomer strán vo svojich nadradených kontajneroch.

img(

Maximálna šírka: 100 %

výška: auto;

tabuľky- Úplnú prispôsobivosť nie je možné nastaviť, ale stránky s nimi môžete upraviť tak, aby boli vhodné pre mobilné zariadenia pridaním tohto kódu:

tabuľka(

displej:blok;

Šírka: 100 %;

overflow-x: scroll;

pretekať-y: skrytý;

ms-overflow-style: -ms-autohiding-scrollbar;

webkit-overflow-scrolling: touch;

Zábaly – sú nastavené vlastnosťou float. Nastavenie tejto možnosti umožní boxom pohybovať sa na základe nastavení okna, prispôsobovať sa prvkom so stabilnou polohou alebo v rámci nadradených kontajnerov. Štandardné prvky div sa predvolene prekladajú do Nový riadok. Napríklad umiestnením blokov div s veľkosťou 200 px do kontajnera s veľkosťou 1 000 px uvidíte tento obrázok.

Bloky sú naskladané na seba. Pridaním zalamovania sa odstránia nové riadky, prvky sa umiestnia do riadku na celom dostupnom priestore.

Krok 2: Naplánujte si reorganizáciu obsahu.

Zistite, aké podrobnosti o stránke pre počítače by sa mali zobrazovať na mobilných zariadeniach. Ak to chcete urobiť, odpovedzte si na nasledujúce otázky:

• Ktoré bloky plnia iba dekoratívne funkcie? - Častejšie sú to posúvače, dekorácie bočných panelov, dotazníky, náhodné fotografie.
• Čo návštevníci ignorujú? - Tepelné mapy kliknutí a ciest vám pomôžu odpovedať na túto otázku. Najmenej aktívne prvky nemilosrdne skrývame.
• Čo musí zostať v mobilná verzia? - Zvyčajne je to reklama, formulár spätná väzba, tlačidlá odberu alebo sociálnych médií.
• Zamyslite sa nad tým, ako by mala stránka vyzerať na tabletoch, smartfónoch a malých starých telefónoch – pre každé zariadenie si môžete nastaviť vlastný vzhľad.

Krok 3. Pohodlie.

Navigácia: obrazovky telefónov sú príliš malé, zvyčajná ponuka stránok sa zriedka zmestí do takýchto rámov. Je zvykom nastaviť menu, rozbaľovacie tlačidlo na tlačidle.

Oblasť obsahu: pre telefóny spravidla nastavte šírku hlavného bloku v CSS na 100%, v závislosti od dostupné miesto. To znamená, že text, moduly, reklamy, obsah bočného panela sa budú zobrazovať na malých zariadeniach v jednom stĺpci.

Senzory: Prsty nie sú také presné ako myš, nechajte im dostatok miesta. Priestor okolo odkazov a iných aktívnych prvkov musí byť aspoň 28 x 28 pixelov.

Pomôžte svojim návštevníkom definovať aktívny priestor – výplň, zvýraznenie, zmenu farieb a ďalšie veci, ktoré možno nastaviť pre dotyky, predpíšte pre odkazy a tlačidlá pseudotriedu hover.

Implementácia mediálnych dopytov s príkladmi

Ak ste niekedy vytvárali CSS tabuľky na tlač, už máte predstavu o možnostiach priraďovania jednotlivých štýlov v závislosti od podmienok.

Mediálne dotazy sú logické výrazy, prístup k nim znamená odpoveď s parametrom true alebo false. Ak je výsledok dotazu pravdivý, to znamená, že rozmery používateľského agenta alebo zariadenia zodpovedajú danému typu média, potom sa automaticky použijú pravidlá štýlu špecifikované v bloku médií.

Mediálne dotazy môžu byť priradené podľa parametrov:

• šírka a výška okna prehliadača;
• šírka a výška zariadenia;
• orientácia - režim na šírku alebo na výšku;
• Rozlíšenie obrazovky.

Aktuálny zoznam argumentov je dostupný na oficiálna špecifikácia.

Prejdime na príklady. Jedzte hotová šablóna, veľkosť jeho obsahovej časti je 1000 pixelov, všetky vnútorné prvky a detaily sú konfigurované vo vzťahu k tomuto parametru.

Ak je obrazovka používateľa užšia ako zadaná časť obsahu, zobrazí sa rolovacia lišta. Plávajúce dizajnové prvky sa môžu správať nepredvídateľným spôsobom – naraziť do seba, roztiahnuť sa, príliš sa zúžiť.

V prvom rade odstránime pevnú veľkosť, ktorá pásik vytvára, aby neprekážal pri úprave. V našej šablóne ide o obálku navigácie. V rozložení čítačky to môže byť jeden alebo viac prvkov. Ak si neviete rady s definíciou, otvorte nástroje pre vývojárov prehliadača – pomocou zobrazenia modelu krabice nájdite prvok, ktorý sa nezmestí do rozmerov obrazovky.

Aby sme to vyriešili, odstránime pevné rámy pridaním štýlov šablóny:

@media only obrazovka a (maximálna šírka: 1000px) (

Nav (šírka: 100 %; )

Ak je teraz šírka obrazovky používateľa menšia ako 1 000 pixelov, šírka ponuky sa bude rovnať 100 % jej veľkosti. Hlavná verzia šablóny vyzerá rovnako ako predtým. Nahradením vlastnosti sa odstránil spodný posúvač pri zmenšovaní obrazovky.

Ale bloky stále vyzerajú pochybne - zmeňme ich zobrazenie tak, že zväčšíme šírku v percentách, aby sa zmestili do požadovaných rozmerov.

Do rovnakého mediálneho dopytu pridávame:

Blok (šírka: 35 %;)

Ako zistiť optimálne veľkosti blokov vášho webu? Vypočítajte ručne alebo vezmite za základ akúkoľvek hotovú mriežku - tekutú mriežku. Môžete sa zamerať na existujúce štandardy: v dvojstĺpcových rozloženiach so šírkou okna 980-1050px sa obal berie ako 95 %, obsah je 60 % a 30 % zostáva pre bočný panel. Zostávajúci priestor ide na vytvorenie hraníc a rezervy pre presnosť.

Na obsah však môžete použiť veľkosť boxu, aby ste zakaždým nepočítali pixely, ale pracovali podľa celkových rozmerov.

Prejdime k nastaveniu zobrazenia na obrazovkách s nižším rozlíšením:

@media only obrazovka a (maximálna šírka: 600px) (

Blokovať (

float:none;

šírka: 85 %;

Okraj: 1 em auto;

Ak je obrazovka menšia ako 600 px, potom by sa naše bloky mali zmestiť do jedného stĺpca - odstránime obal, nastavíme nové zarážky, vycentrujeme a zmeníme šírku. Častejšie sa nastavuje 100 %, ale ak je to z nejakého dôvodu nepohodlné, nastavíme si vlastnú veľkosť.

Môžete si tak nastaviť nielen rozmery blokov obsahu, ale aj ich zobrazenie. Napríklad zakázať zobrazovanie veľkých prvkov a nahradiť ich akýmikoľvek vhodnými.

Ukážme si možnosti na príklade zmeny farieb a zobrazení.

Vo verzii pre smartfóny je hlavné menu skryté a farba bloku je zmenená na modrú, pričom väčšia obrazovka zobrazuje dizajn bez týchto zmien.

Vo väčšine prípadov je potrebné navigáciu skryť – nahradí ju tlačidlo. Je vhodnejšie to urobiť pomocou javascriptu, môžete použiť hotové riešenia.

Úpravy sa robia bodovo, rozsah je možné obmedziť zhora aj zdola. Je to rýchle a pohodlné – jeden riadok nastavuje samostatný CSS pre rôzne zariadenia bez ovplyvnenia hlavného zobrazenia stránky.

Pravidlá @media môžete deklarovať kdekoľvek vo vnútri existujúci stôlštýlov alebo vytvorte pre tieto deklarácie samostatný štýl a potom ho importujte do hlavného CSS pomocou pravidla @import.

Mobilná verzia stránky: ako vyrobiť a čo hľadať

Mediacware rozumejú všetkým moderným prehliadačom, ale nebude fungovať v IE 8 a nižších. Problém je vyriešený odkazom na starý IE prostredníctvom podmienených komentárov. Musia byť napísané v kóde šablóny, nie v CSS.

Samotný skript je dostupný na github ( https://github.com/scottjehl/respond), pridáva podporu pre minimálne a maximálne rozmery a mediaqueries do starších IE.

Ďalším problémom je, že responzívny dizajn predpokladá použitie Html5, čo je opäť pre staršie prehliadače nepochopiteľné. Ošetrené hackom:

Kód je napísaný v html, navyše blokové zobrazenie vytvorených prvkov je nastavené v CSS:

hlavička, navigácia, sekcia, článok, bokom, päta (display:block;)

Okamžite sa pozrime na otázku - ako dosiahnuť, aby sa niektoré skripty zobrazovali iba vtedy dané parametre obrazovke. Ak je nainštalovaný jquery, budete musieť do kódu šablóny pridať jednoduchý skript. Čísla sa zmenia na potrebné. Znie to takto: ak šírka okna presiahne 980 pixelov, na stránku sa použije skript zadaný v ceste. Môžete zadať niekoľko, syntax sa zapisuje analogicky cez bodkočiarku vo zložených zátvorkách.

If ($(document).width() > 980) (

$.getScript("cesta k skriptu");

Ďalším bodom je ako mobilný prehliadač iPhone musí daný obsah spracovať, či je povolené jeho zvýšenie. Za týmto účelom je počiatočná stupnica napísaná v hlave:

Zostáva len skontrolovať správnosť - na to môžete použiť svoj vlastný prehliadač a telefón alebo kontaktovať služby.

Ak je stránka prevedená na lokálny server, správnosť sa dá určiť v ami.responsivedesign.is. Pre správne zobrazenie budú musieť majitelia Denveru zmeniť kódovanie na utf-8 úpravou súboru httpd.conf servera.

Služba ukáže, ako projekt vyzerá na rôznych zariadeniach.

Okrem toho sa testuje šablóna https://developers.google.com/speed/pagespeed/insights/ alebo v špeciálnej forme https://www.google.com/webmasters/tools/mobile-friendly, ako aj vo webmasteroch.

V Yandex to vyzerá podrobne a Google jednoducho oznámi, že nie sú žiadne problémy.

Ak je všetko vykonané správne, nebude žiadne posúvanie, žiadne zbytočné prvky. Mobilná verzia je pripravená a teraz ste sa naučili, ako si ju vyrobiť sami. Ak bol materiál pre vás užitočný, dajte like a prihláste sa na odber bulletinu blogu. Všetko najlepšie.

Kliknutím na jedno z tlačidiel nižšie si môžete stiahnuť 2 príklady stránky zloženej v tejto lekcii a je ľahké s ňou pracovať hotové stránky a skopírujte kód.

S pozdravom Galiulin Ruslan.

Dnes väčšina ľudí používa internet mobilné gadgety- tablety, telefóny, v tomto smere ide aj optimalizácia webových stránok nová úroveň. Ak používateľ príde a vidí, že stránka nie je optimalizovaná pre mobilné zariadenia: obrázok sa nedá zobraziť, tlačidlá sa posunuli, písmo je malé a nečitateľné, dizajn je skreslený – 99 zo 100 % opustí a začnite hľadať inú pohodlnejšiu. A začiarkne políčko, že zdroj je irelevantný, to znamená, že nezodpovedá vyhľadávaciemu dopytu. Preto treba dizajn stránky prispôsobiť rôznym mobilným zariadeniam. Čo je to mobilná verzia stránky, ako ju vytvoriť a ako ju najlepšie použiť? Prečítajte si viac v tomto článku.

Existujú teda štyri kľúčové spôsoby prispôsobenia stránky pre mobilnú verziu.

Prvá metóda – responzívny dizajn

Responzívne šablóny menia obrázok lokality v závislosti od veľkosti obrazovky. Spravidla sú nastavené na štandardných 1600, 1500, 1280, 1100, 1024 a 980 pixelov. Na implementáciu sa používajú dotazy. Sama sa nemení.

Medzi výhody tejto metódy patrí:

• pohodlný vývoj, pretože samotná štruktúra sa prispôsobuje parametrom obrazovky a akákoľvek aktualizácia nevyžaduje vývoj dizajnu od začiatku, stačí vyladiť CSS a HTML;
• jeden URL adresa- používateľ si nemusí pamätať niekoľko mien, nie je potrebné presmerovanie (presmerovanie z jednej adresy na druhú), čo môže skomplikovať prácu webmasterovi a pre vyhľadávač je jednoduchšie triediť a hodnotiť zdroj s jednou adresou.

Samozrejme, adaptívne šablóny majú svoje nevýhody, ktoré sú mimochodom viac ako výhody. Napriek tomu mnohí vývojári dodržiavajú tento koncept, napríklad spoločnosť Google Corporation, ktorej mobilná verzia stránky má adaptívny dizajn. Takže nevýhody:

• Responzívny dizajn nepodporuje rovnaké úlohy na mobilnom zariadení ako na počítači. Ak ide napríklad o mobilnú verziu webovej stránky banky, kde sú pre používateľa dôležité skôr informácie o kurze alebo najbližších bankomatoch, tak tento dizajn úplne stačí. Ak však ide o komplexný štruktúrovaný zdroj s mnohými sekciami a podsekciami, návštevníkom sa pravdepodobne nebude páčiť.
• Pomalé načítavanie premení obľúbenú stránku na nenávistnú. Platí to najmä pre zdroje, kde je veľa animácií, videí, kontextových okien a iných aktívnych prvkov. Vďaka veľkej hmotnosti sa stránka jednoducho „spomalí“, používateľ sa nahnevá a odíde vyhľadávacie pozície miesto - jeseň.
• Nemožnosť vypnúť mobilnú verziu je ďalším významným nedostatkom. Ak je niektorý prvok takýmto rozložením skrytý, nedá sa nič urobiť pre jeho otvorenie, na rozdiel od stránok, kde ho môžete vypnúť a prepnúť na bežnú doménu.

Takáto mobilná verzia stránky vám však rýchlo, bez špeciálnych zručností a nákladov, umožňuje prispôsobiť zdroj akýmkoľvek modulom gadget. Ale vzhľadom na uvedené nedostatky bude vyhovovať malým jednoduchým zdrojom s minimom informácií a multimédií bez náročná navigácia a animácie. Pre komplexnú lokalitu sú vhodné 2 ďalšie metódy.

Metóda dva - samostatná verzia stránky

Táto metóda je veľmi bežná a často je úspešná v tom, aby bola stránka čitateľnejšia na mobilnom zariadení. Jeho podstatou je vytvorenie samostatnej verzie stránky nakreslenej pre aplikáciu a umiestnenej na samostatnej adrese URL alebo subdoméne, napríklad m.vk.com. Zároveň je zachovaná hlavná funkcionalita, dizajn stránky len vyzerá inak. Výhody tejto metódy sú zrejmé:

• užívateľsky prívetivé rozhranie;
• je ľahké meniť a upravovať, pretože verzia existuje oddelene od hlavného zdroja;
• vďaka nízkej hmotnosti funguje samostatná verzia stránky oveľa rýchlejšie ako responzívna šablóna;
• najčastejšie je možné prejsť na hlavnú verziu stránky z mobilu.

Ale ani tu to nebolo bez nevýhod:

• Niekoľko adries – desktopová a mobilná verzia stránky. Ako prinútiť používateľa, aby si zapamätal dve možnosti? Webmajstri často predpisujú z desktopovej verzie na mobilnú verziu, no ak táto stránka v mobilnej verzii neexistuje, používateľ dostane chybu. Tu vznikajú ťažkosti s vyhľadávačmi, ktoré ťažko hodnotia 2 rovnaké zdroje, čo priamo ovplyvňuje propagáciu.
• Mobilná verzia stránky z počítača, ak ju používateľ omylom navštívi, bude vyzerať smiešne, čo môže ovplyvniť aj návštevnosť.
• Táto verzia je často značne obmedzená, desktopová, takže používateľ dostane veľmi obmedzenú funkčnosť. Ale zároveň, ak niečo chýba, návštevník môže ísť plná verzia stránky.

Vo všeobecnosti sa samostatná mobilná stránka ospravedlňuje a je najbežnejším spôsobom prispôsobenia zdroja pre mobilné zariadenia. Je obľúbený u veľkých internetových obchodov, ako je Amazon.

Tretia cesta - OZE-dizajn

Vyhľadávač Google aktívne podporuje tento smer mobilného dizajnu. Ide o najkomplexnejšiu, nákladnú, ale najefektívnejšiu metódu prispôsobenia stránky telefónu alebo tabletu. Volá sa to RESS. Ide o zacielenie na zdroje v mobilnej aplikácii, ktorú je možné stiahnuť pre každé zariadenie zvlášť. Pre Android - s GooglePlay a pre Apple - s iTunes.

Takéto aplikácie sú rýchle, bezplatné, pohodlné, majú schopnosť poňať rôzne typy informácií, pričom pamäť telefónu a internetová prevádzka nezaberú ako pri návšteve stránky cez prehliadač. Sú ľahko dostupné, pretože odkaz bude vždy na obrazovke a nie je potrebné zadávať zložitý názov adresný riadok prehliadač.

Samozrejme, sú tu aj nevýhody, ako zložitosť vývoja, vysoké náklady na prácu pre veľký počet programátorov a nutnosť urobiť viacero možností rozloženia. Aplikácia niekedy nerozpozná mobilné zariadenie. Pravidelné technická podpora, náprava nedostatkov. Napriek tomu sa táto možnosť považuje za najlepšiu z troch navrhovaných z dôvodu jej produktívnej, neprerušovanej prevádzky.

Najlacnejší spôsob vytvorenia webovej stránky pre mobilné zariadenia

Všetky vyššie uvedené metódy zahŕňajú, aj keď nie vždy dlhú a komplikovanú, no stále platenú prácu webmastera. Ak nevidíte naliehavú potrebu takéhoto rozvoja, bude vám vyhovovať jednoduchá a bezplatná mobilná verzia stránky. Aký je najjednoduchší spôsob, ako to urobiť?

Stiahnite si špeciálne šablóny (pluginy) pre responzívny dizajn. Napríklad WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile a ďalšie. Pomôžu korektnejšie zobraziť stránku v telefóne, pričom dostanete pár tipov, čo treba opraviť, aby sa stránka lepšie prispôsobila mobilnej verzii.

Samozrejme, táto metóda je sotva vhodná pre vážne zdroje. Skôr to voľná príležitosť je určený pre malé a jednoduché stránky, blogy, spravodajské kanály. Nezabudnite, že vyhľadávací nástroj Google, ako aj Yandex, dnes kladú vážne požiadavky na mobilné verzie, takže je tu veľká šanca znížiť svoje pozície pomocou tejto metódy.

Pri tejto metóde budú s najväčšou pravdepodobnosťou reklamy a kontextové bannery odrezané, ale stránka sa načíta rýchlo a bez „oneskorení“.

Zásady tvorby mobilných verzií

Nezáleží na tom, či bola mobilná verzia stránky vytvorená zadarmo alebo s pomocou tímu webmasterov, bola vytvorená na systéme RESS alebo pomocou adaptívnej šablóny. Najdôležitejšie je, že pre jeho efektívne fungovanie je potrebné dodržiavať niekoľko mimoriadne dôležitých zásad. Aká by teda mala byť mobilná verzia stránky? Ako to urobiť produktívne, efektívne a produktívne?

Odstránime všetky nepotrebné

Minimalizmus je to, o čo by sa mal vývojár mobilnej verzie stránky snažiť. Predstavte si, aké ťažké je vnímať informácie, ktoré sú plné farieb, tlačidiel, bannerov a ktoré musíte pri hľadaní toho správneho materiálu donekonečna listovať. Mobilný dizajn by mal byť jednoduchý a čistý. Vyberte si 2-3 farby na rozdelenie priestoru (napríklad značkové). Lepšie, ak je jeden z nich biely. Rozdeľte priestor malej obrazovky na zrozumiteľné a čitateľné zóny. Virtuálne kľúče by mali byť viditeľné, aby používateľ jasne vedel, kde má stlačiť a videl – tu je produkt, tu formulár na vyplnenie údajov, tu sú informácie o doručení a platbe.

Všetky ďalšie možnosti, ktorý by bol užitočný v desktopovej verzii a uľahčil by používateľovi život, tu prinesie len ťažkosti. Nechajte len tie najdôležitejšie prvky. animácia, reklamné bannery, multimédiá s najväčšou pravdepodobnosťou len spomalia prácu stránky alebo aplikácie a odvrátia pozornosť od hlavnej veci.

zarovnanie

Otázka zarovnania nie je o nič menej naliehavá, pretože ak sa to urobí nesprávne, používateľ dostane iba koncovky dôležitých slov. Všeobecne sa akceptuje zarovnanie doľava a vertikálne zarovnanie. Predstavte si, že sa posúvate cez informačný kanál vo svojom telefóne. Robíte to zhora nadol, ale nie doľava ani doprava.

Združenie

Keď neexistuje možnosť dlhého reťazca prechodov, skúste spojiť niekoľko krokov do jedného. Stránka napríklad vyžaduje zadávanie údajov v niekoľkých fázach – meno, potom adresa, kde každá jednotlivá bunka obsahuje samostatný dom, ulicu, byt atď. Aby ste používateľa nenútili trafiť veľa malých buniek, opýtajte sa mu vyplní len 2 - meno a adresu.

A odpojenie

Niekedy je naopak potrebné odpojiť sa veľké množstvo informácie. Napríklad v rozbaľovacej ponuke máte zoznam viac ako 80 miest, v ktorých sa uskutočňuje doručenie. Zoskupte ich podľa regiónu, aby používateľ nemusel listovať v tomto obrovskom zozname. Keď prejde kurzorom na krajské centrum alebo kraj, vypadne ďalší zoznam miest.

zoznamy

Mimochodom, o zoznamoch. Sú dve - pevné v abecednom alebo inom poradí a so substitúciou. Ich výber závisí od toho, čo bude uvedené.

Fixné je užitočné, ak používateľ presne vie, čo hľadá. Napríklad mesto, číslo alebo dátum. Druhá možnosť je vhodná pre dlhé zložité názvy alebo pre prípady, keď existuje veľa variácií rovnakého mena a každá privedie používateľa o krok bližšie k cieľu. Možnosť automatickej náhrady sa častejšie používa, keď návštevník potrebuje pomoc. Napríklad pletací web ponúka na nákup pletacích ihiel. Používateľ vstúpi Vyhľadávací dopyt„Kovové pletacie ihlice“, ale v popise vidí „5 mm pletacie ihlice“, „4,5 mm pletacie ihlice“ atď.

Automatické dopĺňanie

Tento bod platí najmä pre stránky, kde sa niečo predáva online a vy musíte vyplniť štandardné formuláre platba, doručenie a pod. Ak osoba nakupuje z telefónu, potom s najväčšou pravdepodobnosťou nemá čas dostať sa k počítaču, čo znamená, že proces nákupu musí byť čo najrýchlejší a najpohodlnejší.

Na tento účel môžu formuláre obsahovať už vyplnené údaje, môžete sa uchýliť k najobľúbenejším odpovediam. Zadajte napríklad dnešný dátum, spôsob platby v hotovosti, mesto, ak pracujete v rovnakom regióne. Môžu byť zmenené, ale ak zasiahnete cieľ, čas používateľa sa ušetrí.

Všetko sa číta, všetko sa pozerá

Pri vytváraní dizajnu mobilnej verzie stránky pamätajte na to, že telefóny každého človeka sú iné, a teda aj zrak. Možno sa vaša stránka bude zobrazovať z malej obrazovky, takže písma by mali byť jednoduché a čitateľné, tlačidlá by mali byť dostatočne veľké, aby sa na ne dalo kliknúť bez toho, aby ste ich preniesli na inú stránku, a obrázky by sa mali otvárať oddelene, veľké, najmä ak rozprávame sa o internetovom obchode.

Nejaké štatistiky

Keď už hovoríme o prispôsobení stránky mobilným zariadeniam, nemožno sa uchýliť k štatistikám, aby sme pochopili, aký dôležitý je tento proces pre online propagáciu.

Čísla sú nasledovné. Dnes gadgety používa 87% populácie, očividne s výnimkou najmenších detí a niektorých starších ľudí. Ekonómovia predpovedajú rast mobilný obchod 100-krát počas nasledujúcich 5 rokov. Zároveň len 21 % stránok je prispôsobených na prácu s mobilnými zariadeniami. To znamená, že internetovú prevádzku a trh elektronického obchodu zaberá len malá 5. časť.

Zamyslite sa nad týmito číslami. Má zmysel prispôsobiť svoj zdroj? Samozrejme áno. Navyše, keď ich je tak veľa voľné miesto na tomto trhu si môžete vziať svoj vlastný segment.

Kde je potrebná mobilná verzia?

Používanie mobilnej verzie má zmysel pre každú platformu, ktorej cieľom je získať vysoké hodnotenie. Koniec koncov, ide o priamy vplyv na používateľa, ktorý mu vytvára pohodlné podmienky na to, aby zostal na vašom webe.

Bez mobilnej verzie nemôže existovať:

• spravodajské portály, keďže väčšinu z nich si prezeráte z telefónu cestou do práce alebo štúdia;
• sociálne siete - z rovnakého dôvodu a navyše existuje faktor online komunikácie, čo znamená, že na tento účel by sa mal vytvoriť pohodlný a zrozumiteľný chat;
• referencie, stránky s navigáciou a pod., kam ľudia chodia, keď niečo hľadajú;
• online nakupovanie – možnosť prilákať zákazníkov, ktorí nestrácajú čas nakupovaním, ale nakupujú všetko cez mobilný internet.

Namiesto záveru

Dnes mobilných technológií sú vo fáze aktívneho rastu a rozvoja, preto v snahe o vedúce postavenie na trhu musí každá spoločnosť zabezpečiť, aby jej internetový zdroj spĺňal požiadavky. Vzhľadom na rastúce nároky používateľov je potrebné stránky neustále modernizovať a prispôsobovať rôzne zariadenia. Je jasné, že ak je pre človeka nepohodlné byť na konkrétnom zdroji, nemôže tam získať informácie o produkte alebo cene, zadať objednávku, zistiť doručenie, potom nájde stránku, kde to všetko bude možné. . Preto, aby ste vyhrali súťaž, je dôležité mať flexibilný, pohodlný, funkčný a zaujímavý zdroj.

Pomôže vám k tomu mobilná verzia stránky Android alebo Ios. Ak to chcete urobiť, musíte si vybrať jednu z vyššie uvedených metód redizajnu - adaptívnu šablónu, vytvoriť novú stránku na subdoméne a prejsť na ňu presmerovaním, použiť bezplatné šablóny alebo stvorenie mobilná aplikácia, pomocou ktorého môže používateľ pohodlnejšie vstúpiť a byť na stránke.

IN modernom svete mať vlastnú webovú stránku je niekedy rovnako dôležité ako mať telefónne číslo alebo adresu Email. Bohužiaľ, nie každý si dokáže vytvoriť krásnu profesionálnu webovú stránku sám a niekedy nefunguje ani krivka. Objednávanie od programátorov tiež nie je ideálne riešenie, keďže nie každý si to môže dovoliť.

Bezplatné šablóny webových stránok HTML vám pomôžu dostať sa z tejto situácie. Šablóna stránky HTML je súbor hotových statických stránok pre stránku určitého subjektu. Pomocou tejto šablóny môžete so základnými znalosťami vytvoriť jednoduchú webovú stránku za pár hodín HTML značky. V sekcii HTML získate tieto znalosti, ak strávite niekoľko hodín štúdiom navyše, a ak nebudete tráviť čas v sekcii CSS, budete môcť úplne ovládať dizajn šablón HTML stránok a úplne ich prispôsobiť. vašim potrebám.

Ďalšou nespornou výhodou šablón webových stránok je, že ich vo väčšine prípadov píšu profesionáli. Profesionálna šablóna stránky znamená nielen krásny a moderný dizajn, ale aj ako je kód napísaný. Vyhľadávače pozerajú na to, ako je vaša stránka napísaná, či je kód SEO optimalizovaný alebo nie a na základe toho vám znižujú alebo zvyšujú pozície vo výsledkoch vyhľadávania. Dobrá stránka by preto mala byť nielen krásna a moderná, čo je dôležité, ale aj dobre napísaná z hľadiska kódu.

Stiahnite si bezplatné šablóny webových stránok HTML a vytvorte svoje projekty okamžite.

Mnoho spoločností dnes venuje oveľa väčšiu pozornosť vytváraniu kvalitných mobilných zdrojov, pretože podľa najnovších údajov 80 % používateľov internetu využíva na vyhľadávanie potrebných informácií prenosné zariadenia. Navyše, marketéri sa pripravujú na veľkú zmenu v algoritme Google, ktorá vstúpila do platnosti 21. apríla 2015. Oficiálny blog spoločnosti hovorí, že teraz kvalita optimalizácia pre mobilné zariadenia zdroj bude do značnej miery určovať jeho pozíciu vo výsledkoch vyhľadávania.

Nadchádzajúca aktualizácia bude mať oveľa väčší vplyv na systém hodnotenia ako rovnaká Panda alebo , a preto je vylepšenie mobilný zážitok by mala byť vašou najvyššou prioritou v blízkej budúcnosti. Podľa článku Search Engine Land o tejto aktualizácii budú všetky stránky podliehať prísnej kontrole odozvy na mobilné zariadenia.

Aby ste mohli svoju stránku plnohodnotne pripraviť na takúto veľkú zmenu, vybrali sme pre vás 15 inšpiratívnych príkladov dizajnu mobilného webu.

Shutterfly je online služba, ktorá vám umožňuje vytvárať fotoalbumy, pohľadnice, pozývacie listy a ďalšie. Keďže každý deň má viac ľudí prístup k svojim fotografiám na svojich smartfónoch, Shutterfly sa zaviazala poskytovať svojim zákazníkom pozitívny mobilný zážitok.

Mobilná stránka spoločnosti zostáva úspešná z dvoch hlavných dôvodov: uľahčuje používateľom nájsť informácie o ponukách a predáva ich prostredníctvom krásnych obrázkov.

Keď ste na stránke, uvidíte, že sekcie ponuky sú zobrazené ako veľké tlačidlá v spodnej časti obrazovky. Vďaka tomu sa návštevníci môžu veľmi rýchlo rozhodnúť pre výber možnosti, o ktorú majú záujem a získať ďalšie informácie.

Túto šablónu som prispôsobil pre štandardné prehliadače takých platforiem ako IOS (3.1+), Android (2.1+), Blackberry (6.0+), Windows telefón 7, ako aj Opera mobile pre Android, ktorá si získava na popularite. Chcem poznamenať, že všetky štandardné prehliadače (s výnimkou Windows Phone 7, ktorý má IE9) sú založené na webkite.

Aký je rozdiel medzi vývojom stránok pre počítače a stránok pre mobilné zariadenia? Ďalej budem hovoriť o niektorých trikoch, ktoré vám pomôžu obísť mnohé problémy.

Aké rozlíšenie zvoliť a metaznačku výrezu

Zdá sa, že by sme si mali položiť otázku, aké povolenie brať ako základ našej stránky? Koniec koncov, teraz sú relevantné zariadenia s rozlíšením 230 x 340 (napríklad HTC Wildfire S) a približne 800 x 480 960 x 640 (HTC Incredible S, Iphone 4) a dokonca aj 1280 x 720 (HTC One X). Na pomoc prichádza metaznačka výrezu, ktorá vyrieši problém s rozlíšením a škálovaním.

• width=device-width - hodnota je nastavená samotným zariadením
• počiatočná mierka=1 – počiatočná mierka je nastavená na 1 (t.j. 1:1)
• maximum-scale=1.0, user-scalable=no - škálovanie je zakázané (chcem poznamenať, že aj s týmito nastaveniami bude HTC tvrdohlavo škálovať a vývojári povedali, že to nie je chyba, ale funkcia)

Trochu o grafike

Aj pri tomto rozsahu rozlíšení treba poznamenať, že väčšina mobilných zariadení má s vysokým rozlíšením nevyužívajú ho na rozšírenie svojho pracovného priestoru, ale na zvýšenie prehľadnosti (viac o tom). Inými slovami, ich saturácia pixelov (DPI) je niekoľkonásobne vyššia ako pri menších rozlíšeniach. Odkiaľ pochádza záver, že zariadenia s veľkým PDI skutočne komprimujú stránku 2-krát, aby získali rovnaké rozmery ako v zariadeniach s nižším rozlíšením (napr. zariadenia Apple Retina displeje majú 4-krát viac bodov na rovnakej ploche obrazovky, čo zvyšuje jasnosť). Výsledok lepšie vidíme na obrázku nižšie.

Teraz, keď už vieme, ako fungujú obrazovky s vysokým DPI, stojí za to zamyslieť sa nad správnym zobrazením všetkých prvkov našej webovej stránky.
Začnime s takými prvkami, ako sú fonty, okraje a iné podobné prvky. Všetky tieto prvky sú v podstate vektorové objekty, ktoré môže prehliadač bez problémov škálovať, takže sa tým nebudeme zaoberať.
Ďalšia vec je s obrázkami a obrázky na pozadí. Koniec koncov, ak uložíme obrázok na pozadí na základe skutočnosti, že máme 320 x 480, zariadenia s hustejším DPI sa pred nami nebudú môcť objaviť v celej svojej kráse a všetko úsilie sprostredkovať jasnosť a kúzlo obrázok príde nazmar, pretože ho v skutočnosti zväčšia 2-krát (a bez ohľadu na to, ako dobre sa škáluje prehliadač - kvalita sa vždy stratí, keď softvér zväčší veľkosť). Tu prichádza na rad vynaliezavosť! Pokúsim sa vysvetliť na príklade. Máme stránku, v hlavičke ktorej je určité pozadie, ktoré zaberá na šírku 320px. Aby teda naše super čisté obrazovky zobrazili tento obrázok na 100%, pôvodný obrázok by nemal byť 320x50 ale 640x100 (presne 2 krát väčšie) a už používa css set background-size: 320px 50px;. Podobný šamanizmus robíme s obrázkami v podobe img.

Optimalizácia dopytov

Vzhľadom na to, že Android, BlackBerry, IOS a Windows Phone 7 plne podporujú Data-url, môžeme výrazne znížiť počet požiadaviek implementáciou všetkých obrázky na pozadí v css. Okrem optimalizácie dopytov máme obrovský zisk vďaka css cache.

Problémy so škriatkami a obrázkami

Vzhľadom na to, že náš prehliadač komprimuje obsah a škáluje na jednu alebo inú veľkosť, môže pri výpočtoch nesprávne zaokrúhliť veľkosti, a preto, keď sú sprite zlepené pixel po pixeli, vyjde pásik ďalšieho prvku. Aby ste tomu zabránili, pri lepení niekoľkých pixelov sa oplatí urobiť medzeru.

Malý problém s formátmi obrázkov

Na niektorých zariadeniach som sa stretol aj s nepríjemným problémom súvisiacim s obrazovými formátmi. Opäť uvediem príklad: pomocou funkcie Uložiť pre web vo Photoshope sú uložené 2 obrázky (jeden z nich je lineárny prechod, ktorý sa tiahne pozdĺž osi Y, a druhý je nejaký druh obrázka, ktorý je vyrezaný kúskom prechod a v skutočnosti by sa mal zmestiť do opakovaného prechodu), ale v rôznych formátoch (png a jpg). Na niektorých zariadeniach je teda jeden obrázok svetlejší a druhý tmavší. Aby som tento problém vyriešil, musel som uložiť oba obrázky v rovnakom formáte.

Skrytie panela s adresou URL

Keďže na našom zariadení nemáme toľko miesta, nezaškodí nám vyhrať pár tuctov pixelov navyše. A môžeme ich nájsť tak, že skryjeme panel s adresou URL. Na to máme jednoduchý skript:

AddEventListener("load", function() ( setTimeout(hideURLbar, 0); ), false); funkcia hideURLbar() ( window.scrollTo(0, 1); )

Ale podotýkam, že tento skript nám môže prekážať, ak náš odkaz vedie na niektorú z kotiev nová stránka(v tomto prípade sa posunieme na náš prvok a po načítaní stránky sa vráti na začiatok), ale tomu sa dá ľahko vyhnúť dodatočnou kontrolou našej adresy URL.

Vizuálny efekt kliknutia na prvok

Napríklad na IOS môžeme dosiahnuť efekt kliknutia pomocou pseudotriedy :active. Ale bude to fungovať, aj keď je náš prvok zaostrený pri posúvaní stránky, čo nie je veľmi pekné. Preto som sa rozhodol napísať malý skript, ktorý bude emulovať kliknutie a zruší ho pri rolovaní stránky.

var scroller=false; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(kliknuteľné); scroller=true; )); $("a").live("touchend",function(event)( var elem=$(this); clearTimeout(možnosť kliknutia); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("active");), 50); ) else ( elem.removeClass("active"); ) ));

Odstránenie okrajov a zvýraznení z odkazov a tlačidiel

Asi každý používateľ si všimol, že keď kliknete na odkaz, je orámovaný a zvýraznený. Takýto efekt môže veľmi pokaziť nápad dizajnéra. Tu prichádza na záchranu akýsi reset štýlov (testované vo všetkých prehliadačoch webkit, a to sú natívne prehliadače IOS, Android, BlackBerry)

*( -webkit-text-size-adjust: none; /*oprava chyby v IOS so zmenou mierky na šírku*/ obrys: žiadny; /*odstránenie okrajov okolo odkazov a tlačidiel*/ -webkit-touch-callout: none; /* v prípade potreby zakážte zvýrazňovanie textu*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*odstráni zvýraznenie pozadia odkazov a tlačidiel*/ )

pevná podpora

Keďže mobilné technológie sa v súčasnosti posúvajú veľmi rýchlo dopredu a v čase písania tohto článku sa percento prehliadačov, ktoré nepodporujú pevné, blíži k nule, nebudem sa do popisu púšťať príliš hlboko. Poviem len, že pre tieto prehliadače by sme mali používať iscroll . Popíšem aj malý trik týkajúci sa dynamického pripojenia skriptov (bude potrebné, aby sa pre bežné prehliadače nepripájal ďalší súbor)

//detekcia starej verzie IOS var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

IN tento príklad Skontroloval som, že ak je to Iphone a verzia prehliadača je menšia ako 534 (nepodporuje opravené). Dynamicky zahŕňam skript fixing.js

CSS3

Nezabudnite tiež, že niektoré vlastnosti css3 už vieme využívať naplno (len nezabudnite na predpony moz-, webkit-, o-). Pre WP7 pokojne pridajte pie.htc.

Odkaz na plochu IOS

Pravdepodobne pre používateľov IOS nebude tajomstvom, že v Safari môžete umiestniť odkaz na stránku na plochu.
Tu je príklad takéhoto prepojenia na Forizmatic.

Nižšie HTML príklad kód ikony (samotný IOS ju upraví, pridá zaoblenie rohov), oznámenie, že tento odkaz sa má otvoriť ako aplikácia (beží na celej obrazovke), ako aj kód, ktorý skryje URL riadok. Ak chcete, môžete dokonca zobraziť úvodné okno.

- oznamuje, čo sa otvorí na celej obrazovke, skryje panel s adresou URL - zmeniť farbu stavového riadku na čiernu (dostupné hodnoty sú predvolené, čierna, čierna-priesvitná). predvolená - odkaz na ikonu, ktorá sa zobrazí na pracovnej ploche.

Môžeme vidieť živý príklad všetkého vyššie uvedeného.