Najskôr mobil. Od Mobile First k Mobile Native: čo je dôležité mať na pamäti pre vývojárov, ktorí sa zameriavajú iba na smartfóny

Domov / technológie

Vytvoríme jednoduchú, responzívnu navigáciu na stránke. Naše riešenie nám pomôže sústrediť sa obsahu našu stránku, čo je možno najvyššia priorita pri vývoji pre mobilné zariadenia. Nebude tu zahrnutý žiadny JavaScript, ale pozrieme sa na to pomocou prístupu Mobile First.

Mobilná navigácia

Dokonale prijateľný responzívny dizajn, ale pri štandardných veľkostiach mobilného zobrazenia (320 x 480 pixelov) skutočne vidíte iba navigačné menu. Iste, stačí otvoriť domovskej stránke, chcel by som vidieť niečo iné ako toto. London & Partners nie sú jediní, ktorí majú tento problém, tento postup je viditeľný v mnohých responzívnych dizajnoch na celom webe.

Aké sú teda riešenia?

Už vieme o niekoľkých spôsoboch, ako to obísť, ako napríklad spoliehanie sa na jQuery, ktoré nám to pomôže zistiť. Vezmite si vysvetlenie Chrisa Coyiera o rozbaľovacej ponuke Päť jednoduchých krokov.



Veľká obrazovka, malá obrazovka.

S pomocou jQuery duplicitná ponuka sa vytvorí ako rozbaľovací zoznam, ktorý je na začiatku skrytý pomocou CSS. Keď mediálne dopyty zistia menšiu obrazovku, zviditeľnia rozbaľovaciu ponuku a zneviditeľní pôvodnú navigáciu. Toto je ideálne riešenie pre mobilné zariadenia, pretože rozbaľovacie zoznamy zaberajú minimálny priestor a používajú sa špeciálne užívateľské rozhranie zariadení (napríklad scroller na iPhone).

Prípadne môžete navigáciu skryť, ale po stlačení tlačidla „menu“ prejsť do režimu zobrazenia. Tento efekt môžete vidieť v akcii v najnovšom Bootstrape Twitteru.


Menšie obrazovky skrývajú navigačné odkazy a zobrazujú ikonu „zoznamu“ (ktorá sa rýchlo stala vnímanou ako „ponuka“), ktorá zobrazuje navigáciu po kliknutí. Návštevníkom z mobilných zariadení sa opäť ponúka čo najviac obsahu a ak sa rozhodnú, majú k dispozícii možnosti navigácie.


Čisté riešenie CSS

Použijeme techniku, o ktorej hovoril Luke, ktorá zahŕňa pomocou CSS a prístup Mobile First. Čo rozumieme pod pojmom „mobilný prístup“? Jednoducho povedané, ideme vyvinúť priame mobilné usporiadanie a potom postupne vylepšovať dizajn pre väčšie obrazovky. Použijeme mediálne dopyty, ktoré zisťujú neustále sa zväčšujúce veľkosti obrazoviek, postupne pridávajú štýl a funkcie.

To znamená, že pri prezeraní dizajnu na mobilnom zariadení sa načíta len minimum CSS a podkladov. To tiež znamená, že staršie verzie IE (ktoré nerozpoznávajú mediálne dopyty) budú prezentované na mobilnej verzii stránky. Viac informácií o tejto téme nájdete v časti Leaving Old Internet Explorer Behind od Joni Korpi.

1.Značenie

Myšlienky tohto riešenia vysvetlím, keď sa posunieme vpred, takže teraz si načrtneme nejaké označenie, počnúc prázdnym dokumentom HTML5.

Mobilná navigácia s prvou odozvou

Keď to urobíme, pridáme nejakú štruktúru stránky. Priamo potrebné body a všetko pre účely našej demonštrácie. Použil som textovú výplň Monty Python od Holy Grail (vďaka Chris Valleskey), čo je v dobrom slova zmysle vyčaruj úsmev na tvári pri práci :)

Nav Blue. Nie, jaj...

Drž hubu! Budeš ticho?! Ale ty si oblečený ako jeden... Camelot! Nevolíte kráľov.

Chceme krík!!

Pozri, moje klamstvo! Drž hubu! Ale vy ste oblečený ako jeden…

  • Nos?
  • Pst! Rytieri, vítam vás vo vašom novom domove. Poďme na Camelot!
  • Pozri, moje klamstvo!
Pomoc, pomoc, som potláčaný!

prečo? Počúvaj. Podivné ženy ležiace v rybníkoch a rozdávajúce meče nie sú základom systému vlády. Najvyššia výkonná moc pochádza z mandátu od más, nie z nejakého fraškovitého vodného obradu. Buď ticho! Mlok?!--koncový obal-->

2. Rozloženie navigácie

Dali sme dokopy základnú html stránku, takže teraz je čas na hlavnú atrakciu; naša hlavná navigácia..

Áno, všetko ste videli správne – pridali sme to do riadku 68 po posledný článok. Nezabudnite, že momentálne vyvíjame pre mobilné zariadenia, neskôr sa pozrieme na desktopovú verziu. Navigáciu sme umiestnili na koniec našej stránky, čo pôsobí dosť zvláštne. Teraz umiestnime odkaz do hornej časti našej stránky, aby používatelia mohli nájsť navigáciu, ak si to želajú.

Nav Menu

3. Resetujte CSS

V závislosti od toho, ako zvyčajne spúšťate webové projekty, sa tento krok môže líšiť od vášho bežného pracovného postupu. Vždy som bol toho názoru, že reštart Erica Meyera je dobré začať, najmä preto, že ho nedávno zrevidoval. Jeho pravidlá obnovenia pridáme do šablóny so štýlmi, aby sme mohli spustiť náš css:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 POZNÁMKA: PREBIEHAJÚCE PRÁCE POUŽÍVAJTE POZOR A TESTOVAŤ S ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , akronym, adresa, veľký, citovať, kód, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, stred , dl, dt, dd, ol, ul, li, fieldset, forma, štítok, legenda, tabuľka, titulok, tbody, noha, hlavička, tr, th, td, článok, bokom, plátno, detaily, figcaption, figúra, päta , hlavička, hgroup, menu, navigácia, sekcia, súhrn, čas, značka, zvuk, video ( okraj: 0; výplň: 0; okraj: 0; obrys: 0; veľkosť písma: 100 %; písmo: zdediť; zvislé- align: baseline ) /* HTML5 display-role reset pre staršie prehliadače */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1 ) ol, ul ( štýl zoznamu: žiadny; ) blockquote, q ( úvodzovky: žiadne; ) blockquote:pred, blockquote:po, q:pred, q:po (obsah: ""; obsah: žiaden; ) /; * nezabudnite nejako zvýrazniť vložky! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) table ( border-collapse: Collapse; border-spacing: 0; )

4.Základné štýly

Zapnuté momentálne naša stránka vyzerá dosť nudne.


Takže poďme zlepšiť situáciu pridaním nejakého jednoduchého stylingu.

/*začiatok našich štýlov*/ body ( písmo: 16px/1,4em "PT Sans", bezpätkové;; farba: #1c1c1c; ) p, ul ( okraj: 0 0 1,5em; ) ul ( štýl zoznamu: disk ; padding: 0 0 0 20px; ) a ( farba: #1D745A; ) h1 ( ) h2 ( font-family: "PT Serif", serif; font-size: 32px; line-height: 1,4em; margin: 0 0 .4em; font-weight: bold; ) /*layout*/ .wrapper ( ) article ( border-bottom: 1px solid #d8d8d8; padding: 10px 20px 0 20px; margin: 10px 0; ) /*header*/ header ( pozadie: #1c1c1c; výplň: 15px 20px ) /*kratšia clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after ( content:""; display:table; ) header; :after ( clear:both; ) /* Pre IE 6/7 (trigger hasLayout) */ header ( zoom:1; ) h1.logo a ( color: #d8d8d8; text-decoration: none; font-weight: bold; text-transform: font-size: 20px; medzera medzi písmenami: 0,2em; výplň: 0 10px;

veľkosť písma: 12px;


font-weight: bold; line-height: 22px; výška: 22px; text-transform: veľké písmená; medzera medzi písmenami: 0,1 em; -webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px; ) a.to_nav:hover, a.to_nav:focus ( farba: #1c1c1c; pozadie: #ccc; ) Toto sú všetky základné informácie (fonty, výšky riadkov, farby atď.), ale čo je naozaj dôležité, je, že som nakreslil tlačidlo „ponuka“ napravo vo vnútri , presne tam, kde by ste ho očakávali. Ak naň umiestnite kurzor myši, uvidíte zmrazený stav – samozrejme to nie je potrebné pre zariadenia s dotykový displej

, ale podobný charakter akcie sa prenesie aj na nekompatibilné verzie


Internet Explorer

. Čo my

určený

/*navigácia*/ #primary_nav ul ( list-style: none; background: #1c1c1c; padding: 5px 0; ) #primary_nav li a ( display: block; padding: 0 20px; color: #fff; text-decoration: none ; font-weight: bold-spacing: 0.1em; border-bottom: 1px solid ) #primary_nav li :last-child a ( border-bottom: none; ) #primary_nav li a:hover, #primary_nav li a:focus ( color: #1c1c1c; background: #ccc; ) /*footer*/ footer ( font-family: " PT Serif", serif; font-style: italic; text-align: center; font- veľkosť: 14px;)

Oveľa lepšie. Odkazy na menu sme urobili peknými a veľkými (ďalšie podrobnosti si prečítajte v blogu Luke Wroblewski Touch Target Sizes) a opäť definovali state:focus pre spätnú väzbu od používateľov.


6. Zväčšiť sa

Dobre, pracovali sme s našou jednoduchou mobilnou šablónou, ale teraz je čas na pokročilejšie vylepšenia. Na základe mediálnych dopytov určíme, kedy už naše mobilné rozloženie nie je vhodné.

Ale v akom bode sa to tak stane? Existuje mnoho spôsobov, ako pristupovať k mediálnym dopytom, ale budeme pracovať na základe toho, že zobrazovaná oblasť pre mobilné zariadenia je 320 x 480 pixelov. Pri orientácii na výšku má šírku 320 pixelov, šírku 480 pixlov pri orientácii na šírku, takže dáva zmysel, ak nastavíme prvý dopyt na médiá tak, aby špecifikoval akúkoľvek obrazovku väčšiu ako 480 pixelov.

Ďalším krokom je však pravdepodobne tablet. iPad má rozlíšenie 980px x 768px, takže môžeme bezpečne predpokladať, že čokoľvek menšie ako 768px je vhodné pre naše mobilné rozloženie. Čokoľvek väčšie ako 768 pixelov môže fungovať s rozložením navigácie na pracovnej ploche, "desktop" verzia.

Takže teraz môžeme začať pridávať pravidlá, takže nastavme dopyt na médiá:

/*media queries*/ @media only obrazovka a (min-width: 768px) ( )

Tento mediálny dopyt spustí všetky štýly, ktoré obsahuje, ak je najmenšia hodnota výrezu 768 pixelov. Všimnite si prosím zaradenie jediný kľúčové slovo, ktoré zaisťuje, že Internet Explorer 8 nebude zmätený a pokúsi sa spracovať požiadavku. Pre podrobnejšie informácie viď.

Začnime našu prácu tým, že tlačidlo „menu“ zmizne:

@media only screen a (min-width: 768px) ( a.to_nav ( display: none; ) )

Keď je prehliadač o niečo širší, tlačidlo ponuky sa už nebude zobrazovať.

7.Presuňte navigáciu

Teraz musíme presunúť našu hlavnú navigáciu do hornej časti stránky. Urobíme to tak, že ho odstránime z toku dokumentov a umiestnime ho úplne hore.

@media only screen and (min-width: 768px) ( a.to_nav (zobrazenie: žiadne; ) .wrapper (pozícia: relatívna; šírka: 768px; margin: auto; ) #primary_nav (position: absolute; top: 5px; right : 10px; pozadie: žiadne ) #primary_nav li ( display: inline; ) #primary_nav li a ( float: left; border: none; padding: 0 10px; -webkit-border-radius: 2px; -moz-border-radius : 2px; polomer okraja: 2px;

Aby to bolo možné, musíme najprv správne umiestniť jeho rodiča (.wrapper). Môžeme to urobiť buď tu v mediálnom dopyte, alebo to definovať na začiatku našej šablóny štýlov.

Keď je ponuka úplne nainštalovaná, musíme odstrániť niektoré kotviace prvky. Nemusíte robiť nič špeciálne, stačí, aby sa zoznam produktov zobrazoval lineárne, odstránili okraje a veľké medzery. Stavy vznášania, o ktorých sme hovorili predtým, sú samozrejme skvelé, takže ich nemusíme meniť.


8. A nakoniec...

Ak ste boli pozorní, určite ste si všimli, že v navigácii máme stále odkaz „späť na začiatok“ – to už teraz nepotrebujeme, však?

Môžeme to odstrániť niekoľkými spôsobmi, ale aby bolo jasné, čo sa deje, najprv pridáme triedu do prvku zoznamu:

  • Hore

    • A potom sa toho môžeme zbaviť v našom mediálnom dopyte:

    #primary_nav li.top ( display: none; )

    Záver

    To je všetko! Existuje mnoho spôsobov, ako implementovať tento nápad (ikona zoznamu je len jedným z nich) a samozrejme môžete pokračovať v pridávaní mediálnych dopytov, aby ste mohli pracovať na väčších obrazovkách. Dúfam, že teraz na to máte dôvod. Vytvorili sme jednoduchú, responzívnu, dotykovú navigáciu pomocou prvého mobilného prístupu so zameraním na obsah a použiteľnosť. Kto potrebuje niečo viac?!

    Ďalšie zdroje

    Tu je niekoľko užitočných odkazov uvedených v tomto článku, ktoré sú zostavené do jedného pohodlného zoznamu:

    • Luka Wroblewského
    • Chrisa Coyiera
  • Vývoj mobilných aplikácií

    • O Mobile First sa toho napísalo pomerne veľa a na túto tému existujú dobré knihy. A napriek tomu ho väčšina vývojárov a spoločností vo svojich projektoch nepoužíva alebo o tomto prístupe vôbec nevie.

    Preto vám o tom chcem stručne povedať a s príkladmi to budú užitočné informácie pre tých, ktorí o tomto prístupe ešte nepočuli.
    Pokúsim sa odpovedať na tri hlavné otázky:

    • Čo je Mobile First a jeho výhody
    • Implementácia prístupu
    • Štatistika výsledkov
    Čo je Mobile First? V tomto roku počet používateľov využívajúcich mobilné zariadenia na prístup na internet dosiahol 60 %. Preto mobilná návštevnosť je čoraz významnejšia a majitelia webových stránok musia tieto štatistiky brať do úvahy. Ako ukazuje prax, užívatelia mobilné telefóny a tablety trávia menej času online a uprednostňujú stránky z prvých riadkov výsledkov vyhľadávania. Používatelia PC môžu tráviť viac času hľadaním informácií. Preto musí byť váš web dobre optimalizovaný vyhľadávače(SEO) a spĺňať všetky požiadavky Mobile First, aby bola návšteva používateľa na vašom webe čo najpohodlnejšia a najzrozumiteľnejšia prostredníctvom jeho mobilného zariadenia.

    Preto niektoré z najdôležitejších požiadaviek pri vývoji Mobile First sú:

    • Najprv ukážte najdôležitejší obsah
    • Webová stránka by mala byť ľahká a optimalizovaná, pretože... rýchlosť pripojenia mobilnej siete môže byť slabé v závislosti od polohy používateľa
    • Webová stránka by nemala načítať viac zdrojov, ako používateľ potrebuje na získanie informácií, ktoré potrebuje, pretože... Mobilný internet je stále drahý. Ďalšie informácie by sa mali načítať iba na žiadosť používateľa
    Mobile First je teda metóda vývoja optimalizovanej webovej stránky pre rôzne mobilné zariadenia, berúc do úvahy rýchlosť sieťového pripojenia. A dôležitosť zobrazovania základného obsahu koncovému používateľovi.

    Vyhľadávací gigant Google nedávno napísal o dôležitosti tohto prístupu:

    „V našom rebríčku výsledkov zvýšime ukazovateľ vhodnosti pre mobilné zariadenia. Tieto zmeny ovplyvnia mobilné vyhľadávanie vo všetkých jazykoch sveta a budú mať významný vplyv na výsledky vyhľadávania. Preto bude pre používateľov jednoduchšie nájsť výsledky optimalizované pre ich zariadenia.“
    Video o dôležitosti Mobile First od Oliviera Rabenschlaga – šéfa Google Creative Development Agency.

    Výhody prístupu Mobile First Pripomínam, že dnes počet používateľov využívajúcich mobilné zariadenia na surfovanie po internete dosiahol 60 %. A preto používanie Mobile First pri vývoji webovej stránky poskytuje týmto používateľom v prvom rade veľké výhody.
    • Jedna webová stránka pre všetky zariadenia
    • Používatelia dostanú dôležitý obsah stránky ako prvý
    • Rýchle načítanie stránky pri nízkych rýchlostiach pripojenia
    • Pohodlné rozhranie pre navigáciu na obrazovke mobilu
    • Minimálne množstvo webových zdrojov potrebných na zobrazenie hlavného obsahu – úspora mobilný internet dopravy
    • Popredné pozície vo výsledkoch vyhľadávania Google
    Implementácia Implementácia prístupu bude demonštrovaná pomocou rámca Moff.js (Mobile First Framework). Toto je rámec JavaScriptu, ktorý je prispôsobený vývoju Mobile First.

    Prístup zvážime na príklade stránky s podrobnými informáciami o aute.

    Určenie dôležitej časti obsahu Zvyčajne je na takejto stránke veľa údajov. A musíme sa rozhodnúť, ktorý z nich je dôležitý predovšetkým pre používateľa.

    Podrobný zoznam údajov na stránke:

    Predstavme si, že hlavnou vecou z tohto zoznamu je hlavný obrázok, názov výrobcu, modely, výbava, cena, zoznam charakteristík a výbavy.

    Prvá stránka pre mobil. Názov spoločnosti Popis spoločnosti Nissan Versa Note z roku 2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Ut enim ad minim veniam, quis nostrud cvičenie ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • Okrem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • Model: Versa Note
    Karoséria: 4D Hatchback
    • Motor: 1,6 l 4-valcový DOHC 16V
    • Palivo: Benzín
    • Štandardné
    • Brzdový asistent
    • Dvojité predné bočné airbagy
    • Rozmrazovač zadného okna
    • Kôš vo dverách spolujazdca
    • Kôš vo dverách vodiča
    • Airbag snímajúci pasažierov
    • Kontrola trakcie
    • CD prehrávač
    • Palubný počítač
    • Elektronické riadenie stability
    • Predný stabilizátor
    • Posilňovač riadenia
    • Stierač zadného okna
    Predné lampičky na čítanie
    • Hlavný airbag
    • Kontaktovať
    • ABS brzdy

    Vytvoril Company.com

    Autorské práva Sitemap V ideálnom prípade ide o objem návštevnosti, ktorý môže používateľ vynaložiť na získanie týchto údajov. A to sa pokúsime dosiahnuť s minimálnym rozdielom.

    V prvom rade si napíšme štýly zobrazovania stránok na

    mobilných zariadení. A až potom sa štýly upravia pre iné veľkosti obrazovky pomocou mediálneho dotazu. @media (min-width: 768px) ( /*Štýly pre tablety a počítače*/ ) Pridávanie ďalších informácií

    Teraz musíme pridať zostávajúce údaje tak, aby o nich používateľ vedel a mohol ich získať na požiadanie.
    Tu používame pomocníkov Data Events, ktorí pomáhajú získať informácie na požiadanie. Keď kliknete na odkaz, žiadosť Ajax sa odošle na adresu uvedenú v atribúte href. Výsledok požiadavky sa zapíše do prvku špecifikovaného v atribúte data-load-target. Dôležitým bodom je, že atribút data-load-screen označuje, pri akých hodnotách obrazovky sa miniatúry automaticky načítajú. Veľkosti obrazoviek sú prevzaté z rámca CSS Bootstrap služby Twitter. A v atribúte data-load-module uvádzame identifikátor registrovaného modulu, ktorý bude pripojený po vložení výsledku ajax požiadavky.

  • Požiadavka ajax sa odošle na adresu URL uvedenú v odkaze a výsledok sa vloží na stránku
  • Registrovaný modul (vozidlo-galéria) je pripojený
  • Zahrnuté sú závislosti (jQuery a Slick-carousel)
  • Načítava sa súbor hlavného modulu
  • Inicializácia modulu
    • Ďalej sa pozrime na registráciu tohto modulu. Vyhlásenie o triede modulu Rám Moff má modulárny systém, pomocou ktorého implementujeme triedu modulov vozidiel a galérií.

    Moduly v Moff sú nezávislé aplikačné prvky, ktoré majú svoju vlastnú obchodnú logiku a môžu závisieť od externých knižníc.

    Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; funkcia setMainImage() ( _mainImage = _module.find(".vehicle_images_main img"); ) funkcia initializeSlickJs() ( $(_module. find(".vehicle_images_thumbs-list")).slick(( infinite: true, slidesToShow: 5, slidesToScroll: 1 )) ) function handleMainImage() ( $(_module.scope).on("click", ".vehicle_images_thumbs- item img", changePreview); ) function changePreview() ( var index = this.src.match(/thumb(\d+)/); _mainImage.src = "images/preview" + index + ".jpg"; ) this .scopeSelector = ".obrázky_vozidla"; this.init = function() ( setMainImage(); initializeSlickJs(); handleMainImage(); ));
    Počas inicializácie triedy spustíme slick-carousel, aby sme vytvorili karusel našich miniatúr a nastavili obsluhu na ich zobrazenie.

    Registrácia modulu Registrácia modulu prebieha pomocou objektu, ktorý obsahuje jedinečný identifikátor a môže obsahovať závislosti modulov a súbor triedy hlavného modulu.

    Moff.amd.register(( id: "vozidlo-galéria", depend: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"] ), súbor: ( js: ["js/vehicle-gallery.js"] ), afterInclude: function() ( Moff. module.initClass("Galéria vozidiel");
    V našom príklade sme ako závislosti zadali jQuery a jeho doplnok slick-carousel, ktorý vytvára karusel z miniatúr. Závislosti sa načítavajú synchrónne v poradí, v akom určíte. A po závislostiach sa načíta trieda modulu vehicle-gallery.js. Ďalej po načítaní súboru modulu a jeho závislostí inicializujeme modul pomocou udalosti afterInclude.

    Štatistika výsledkov. Poďme si zhrnúť výsledky tvorby Mobile First stránky.

    Spodný graf ukazuje, že neoptimalizovaná stránka je o 73 % ťažšia ako stránka Mobile First. Môžeme tak ušetriť 186,94 KB, ktoré používateľ nemusí pri prezeraní vašej stránky potrebovať.

    Záver Takto sa zbavíme zaťažovania veľké množstvo sekundárne zdroje, ktoré však budú dostupné na požiadanie používateľa.

    Tento článok obsahuje iba jeden príklad načítania. dodatočné informácie. Úplný príklad si môžete pozrieť na webovej stránke frameworku.

    Dátum zverejnenia: 29.03.2013

    Poznámka autora: Začiatkom tohto roka som bol v počiatočných fázach redizajnu webovej stránky našej spoločnosti. Už sme plánovali zaujať priamy responzívny prístup k webdizajnu, ktorý je preferovaným riešením na podporu viacerých zariadení. Po poučení z úprimných diskusií na An Event Apart v Bostone o obmedzeniach a výzvach responzívneho webového dizajnu som si uvedomil, že naše riešenie potrebuje trochu doladiť.

    Našťastie bol projekt pred nami ideálnou príležitosťou na experimentovanie a výzvu na zlepšenie nášho adaptívneho pracovného postupu. V tomto článku podrobne popíšem kroky, ktoré sme podnikli, vrátane niektorých zmien, ktoré sme urobili, keď sme pracovali na vytvorení lepšie responzívneho webu.

    Stanovenie cieľov

    Prvým krokom, ktorý sme v našom projekte urobili, bolo vytvorenie zoznamu výhod a prekážok nášho adaptívneho prístupu. Náš zoznam vyzeral takto:

    VÝHODY

    1. Vybudovanie, podpora a propagácia jednej webovej stránky.

    2. Podporuje mnoho veľkostí obrazovky, nielen extrémne veľké monitory stolné počítače a malé prenosné zariadenia.

    3. Odolnosť voči budúcnosti, pretože rozloženie sa bude meniť v závislosti od veľkosti obrazovky, nielen od veľkosti dnešných populárnych zariadení.

    PREKÁŽKY

    1. Obsah určený len pre zariadenia s veľkou obrazovkou je často streamovaný na malé obrazovky a jednoducho „vystrihnutý“ pomocou dopytov na médiá CSS, čím vznikajú zbytočné sťahovanie.

    2. Vzhľadom na rozloženie „bez veľkosti“ nemôžeme zmeniť pôvodné poradie takéhoto rozloženia (alebo z neho úplne vylúčiť nedôležité prvky) v závislosti od zariadenia alebo veľkosti obrazovky.

    Pravdepodobne si všimnete, že nedostatky adaptívneho prístupu, ktoré sme identifikovali, sú oblasti, kde je najlepšie len mobilné riešenie problému. Pre našu novú webovú stránku sme chceli to najlepšie z oboch svetov – výhody, ktoré môže ponúknuť citlivý prístup a špecializované mobilné riešenie.

    Počnúc obsahom

    Jedným zo spoločných rozdielov medzi responzívnym dizajnom a dizajnom špecifickým pre mobilné zariadenia alebo iba pre mobilné zariadenia je obsah alebo vlastnosti odovzdané prehliadaču. Vyhradená webová lokalita pre mobilné zariadenia často odráža iba podmnožinu obsahu, ktorý sa nachádza na „normálnej“ verzii webovej lokality. Ide o jednu z prebiehajúcich diskusií medzi týmito dvoma prístupmi, pričom zástancovia webových stránok určených len pre mobilné zariadenia často argumentujú tým, že používatelia mobilných zariadení chcú pristupovať len k obsahu, ktorý je pre nich „dôležitý“.

    Problém tohto spôsobu myslenia je v tom, že to, čo je pre používateľa – každého používateľa – „dôležité“, sa mení v závislosti od situácie. Obmedzenie prístupu k obsahu len kvôli zariadeniu, ktoré používate, je spoľahlivý spôsob, ako nahnevať a sklamať tých, ktorí nespĺňajú ideálny scenár, ktorý ste si predstavovali, keď ste sa rozhodovali, čo si ponechať a čo odstrániť zo svojej mobilnej webovej stránky.

    Vždy sme verili, že všetci používatelia by mali mať prístup ku všetkému obsahu, ktorý webová lokalita ponúka, ale chceli sme sa uistiť, že je to skutočne správne pre našu webovú stránku a našich používateľov. Aby sme určili správny prístup, obrátili sme sa na našich analytikov a nezistili sme žiadny rozlíšiteľný rozdiel medzi typom obsahu, ktorý požadujú mobilní hostia a návštevníci z iných ako mobilných zariadení. Obsah, ktorý bol obľúbený u používateľov počítačov, bol rovnako obľúbený u návštevníkov z mobilných zariadení.

    Okrem toho sme si sadli a porozprávali sa s niektorými našimi súčasnými klientmi, ktorí predstavujú väčšinu publika našej webovej stránky, a položili sme im niekoľko otázok vrátane: „Aký obsah navštevujete našu webovú stránku, keď ste na pracovnej ploche ?" a: "A čo tablet alebo telefón?" Rozhovory boli samozrejme podrobnejšie, ale už teraz vidíte, čo nás zaujalo. Opäť sa zistilo, že hľadaný obsah bol rovnaký bez ohľadu na použité zariadenie.

    Údaje určujú smer

    Fakty, ktoré sme zistili počas nášho výskumu, posilnili naše presvedčenie, že pre našu webovú stránku je správnou voľbou citlivý prístup, ktorý zabezpečuje prístup k rovnakému obsahu na akomkoľvek zariadení. Tento prieskum nám tiež umožnil zistiť, k akému obsahu na našej webovej stránke sa vôbec nepristupovalo. Keď sme našli stránky, ktoré naše publikum nepoužívalo, vystrihli sme ich z mapy webu. To isté sa urobilo s najmenej obľúbeným obsahom v hierarchii obsahu a našich plánoch redizajnu.

    Tým, že sme s návrhom začali prezeraním obsahu a zhromažďovaním údajov o tom, čo bolo pre naše publikum dôležité a čo nie, sme sa mohli posunúť do fázy návrhu so zdravým plánom toho, aký obsah mal návrh našej webovej stránky podporovať.

    Vytvorenie dizajnu krajných bodov

    Počul som argumenty pre navrhovanie v prehliadači a oceňujem výhody, ktoré tento prístup poskytuje. Keď som pri niekoľkých príležitostiach vyskúšal navrhovanie v prehliadači, zistil som, že môj vlastný pracovný postup pri navrhovaní je najjednoduchší a najpohodlnejší začať vo Photoshope. V žiadnom prípade neverím, že je to správne rozhodnutie pre každého, ale je to pravda pre mňa a takto som začal tento projekt.

    Pre responzívny dizajn používam metódu, ktorú nazývam „edge design“. Začínam vytvorením desktopovej verzie webu. V nej riešim typografickú úpravu textov dizajnu, štýl a celkové vizuálne smerovanie – ako aj rozloženie širokouhlého zobrazenia webu. Keď som s touto verziou webovej stránky spokojný, pracujem na malej obrazovke alebo na „mobilnej“ verzii, pričom mám rovnaký vizuálny smer, ale prispôsobujem rozloženie tak, aby vyhovovalo menšej obrazovke. Na konci tohto procesu už mám vizuálne príklady dvoch veľmi odlišných rozložení webových stránok - verzie tohto projektu pre najväčšiu a najmenšiu obrazovku. Tieto dva príklady budú mojím sprievodcom pri vývoji prednej časti webovej stránky.

    Najprv mobil

    „“ prístup k adaptívnemu dizajnu nie je nová myšlienka. O tejto technike, pri ktorej najprv vytvoríte mobilné rozloženie webovej stránky a potom použijete mediálne dopyty na prispôsobenie a pridanie do tohto rozloženia, keď sa veľkosť obrazovky zväčší, sa uvažuje už nejaký čas. osvedčených postupov v responzívnom webdizajne. Tento prístup nie je nový, je stále veľmi dôležitý a v kombinácii s naším plánom „začať s obsahom“ nám pomohol zamerať energiu na jeden z nedostatkov identifikovaných v adaptívnych projektoch – problém komunikácie nedôležitého obsahu.

    Počnúc obsahom sme zabezpečili, že všetok obsah na našej webovej stránke je relevantný a vhodný pre všetkých používateľov, mobilných aj iných. Znamenalo to, že sme sa nemuseli obávať odovzdávania veľkého množstva obsahu v značke, ale museli sme ho len vizuálne skryť pomocou pomocou CSS. Mobilný prístup znamenal, že tieto obrázky budú zdieľané iba so zariadeniami, pre ktoré boli určené. Náš nový dizajn si napríklad vyžadoval grafiku na pozadí s akvarelovou textúrou.

    Obraz, pomerne veľký, sa mal stať súčasťou dizajnu iba na veľkých obrazovkách (od 660 px a väčších). Pretože naše CSS začína mobilným dizajnom, tieto veľké grafiky sa nikdy neposielajú na zariadenia s malou obrazovkou, pretože dopyt na médiá, ktorý načíta tento obrázok, sa spúšťa iba na veľkých obrazovkách. Mediálny dopyt, na ktorý sa vzťahuje pozadie html prvok, vyzerá takto:

    @media only screen and (min-width: 660px) ( html ( background: url(/images/bg-watercolor.jpg) no-repeat fixed center top; ) )

    @media only obrazovka a (min - šírka: 660px) (

    html (

    pozadie: url (/images/bg - akvarel. jpg) nie - opakovať pevne na stred hore;

    Okrem použitia tohto obrázok na pozadí Dopyt na médiá s rozlíšením 660 pixelov tiež zavádza množstvo ďalších zmien v rozložení webovej stránky, pričom sa presúva z toho, čo sa považuje za rozloženie pre malú obrazovku, na to, čo sa stane rôznymi verziami so širokouhlou obrazovkou.

    Vytváranie pre dizajn, nie pre zariadenia

    Keď sme v našich webových projektoch začali používať responzívny dizajn, zamerali sme sa na známe zariadenia a veľkosti obrazoviek a naše mediálne dopyty ich často odrážali (iPhony, iPady – na výšku aj na šírku – notebooky, širokouhlé desktopy atď. .d.). Postupom času sa zistilo, že to nebol najlepší prístup, pretože riešil len tie zariadenia a veľkosti obrazoviek, ktoré sú dnes populárne, a nie tie, ktoré by sa mohli objaviť v budúcnosti. Jednou zo silných výhod responzívneho webového dizajnu je jeho perspektívnosť. Preto to plne implementovať silné stránky odklonili sme sa od budovania zariadení namiesto toho, aby sme nechali dizajn diktovať kontrolné body mediálne otázky.

    Mobilná metóda položila základ CSS našej webovej stránky. Vďaka tomu sme web spustili v prehliadači a upravili sme ho na najmenšiu veľkosť nášho rozloženia (nastavili sme CSS na minimálnu šírku 320px). Postupne sa veľkosť okna prehliadača zväčšovala, aby sa zistilo, ako značka reaguje. Ako sa okno zväčšovalo, všimli sme si, že značenie sa začalo deformovať. Práve v týchto bodoch sme potrebovali nastaviť nové mediálne dopyty, aby sme upravili označenie.

    Aby sme pochopili túto metódu, vytvorili sme grafiku a nastavili ju ako pozadie pracovnej plochy. Vertikálne čiary ukazovali šírku 320 px (naša najmenšia veľkosť), potom boli rozmiestnené po každých sto pixeloch počínajúc 400 a použili sa ako vodítka pri zmene mierky okna prehliadača, aby sa určilo, kde sa dizajn začína lámať, a potom sme použili tieto približné hodnoty pixelov v konečných mediálnych dopytoch, ktoré boli pridané do CSS.

    Prístup pridávania mediálnych dopytov založených na požiadavkách na dizajn a nie na známych veľkostiach zariadení umožňuje webovej lokalite lepšie reagovať na širokú škálu veľkostí obrazoviek. Výsledkom však je, že súbor CSS zaplní väčším počtom mediálnych dopytov, ako keby ste použili body prerušenia špecifické pre zariadenie. A napriek tomu, zatiaľ čo počet mediálnych dopytov je väčší, samotné dopyty bývajú veľmi malé, pretože v každom z nich sa vykoná len veľmi málo zmien namiesto toho, aby sa vytvorili drastické zmeny, ktoré by si normálne vyžadovali mediálne dopyty založené na zariadení.

    Jednou z oblastí našej webovej stránky, kde došlo k zjavnému nárastu mediálnych dopytov, je navigácia.

    Adaptívna navigácia

    Navigácia je jedným z najťažších aspektov responzívneho dizajnu. Naša webová stránka má v podstate štyri hlavné navigačné oblasti.

    1. Hlavná navigácia;

    2. Čo nazývame „pomocná navigácia“, ktorá odkazuje na rôzne portály a služby používané našimi zákazníkmi;

    3. Navigácia v päte;

    4. Navigácia v jednotlivých sekciách, ktorá je prezentovaná na podstránkach webu (pri veľkoplošných rozloženiach) v ľavom stĺpci.

    Keďže náš CSS je určený predovšetkým pre mobilné zariadenia, jedným z prvých problémov bolo nastavenie navigácie pre rozloženie na malej obrazovke. To znamená vypnúť zobrazenie všetkých sekcií navigácie okrem hlavnej navigácie.

    #helpNav, .subNav, footer nav ( display: none; )

    #helpNav, .subNav, footer nav (

    displej: žiadny;

    Ďalej som už spomenul, že naším cieľom nie je doručovať obsah do zariadení, ale až potom „vypnúť“. V skutočnosti to bol cieľ, no v našej navigácii sme sa museli zmieriť s tým, ako na to. Nepodarilo sa nám nájsť iné, jednoduché, ale podporované riešenie. Našťastie sa zdá, že obsah, ktorý dodávame a nezobrazujeme, je len niekoľko záznamov, takže jeho vplyv na sťahovanie návštevníkov je minimálny.

    Pomocná navigácia je jedinou oblasťou webovej stránky, o ktorej sme zistili, že nie je relevantná pre väčšinu používateľov, pretože tieto odkazy a portály boli určené iba pre používateľov počítačov. To je silný predpoklad a odvážne tvrdenie. Hlavným dôvodom boli samotné portály, ktoré boli aplikáciami tretích strán mimo našej kontroly a neboli optimalizované pre mobilné zariadenia s malou obrazovkou a služby, ktoré ponúkali, boli prispôsobené na podporu firemných klientov s veľkými obrazovkami pracovnej plochy.

    Táto situácia nás inšpirovala k rozhodnutiu odstrániť túto sekciu z verzie pre malú obrazovku a počas mesiacov, počas ktorých bola stránka v prevádzke, sme nedostali žiadne pripomienky ani sťažnosti od našich užívateľskú základňu. Čo sa týka ďalších dvoch navigačných oblastí, časti navigácie podstránkou a časti päty, tento obsah je prezentovaný ako súčasť hlavnej navigácie na zariadeniach s malou obrazovkou. Preto tieto tri oblasti štandardne vypíname.

    Neskôr, keď sa veľkosť obrazovky zväčší a prekročíme bod 660 pixelov, kde sa začne zobrazovať dizajn širšej obrazovky, dáme týmto navigačným oblastiam štýly, ktoré vyžadujú.

    Tu je CSS pre našu sekundárnu navigáciu:

    #helpNav ( zobrazenie: blok; pozícia: absolútna; hore: 1 pixel; vpravo: 0 pixelov; šírka: 100 %; zarovnanie textu: vpravo; ) #helpNav ul ( padding-left: 10px; ) #helpNav li ( display: inline; padding-right: 6px; padding-left: 6px; background-color: #2f6a98; ) #helpNav a (veľkosť písma: 12px; padding: 0 6px; color: #FFF; border-radius: 20px; ) #helpNav a :hover (farba pozadia: #f66606; )

    #helpNav (

    displej: blok;

    pozícia: absolútna;

    hore: 1px;

    vpravo: 0px;

    šírka: 100 %;

    text - zarovnať : vpravo ;

    #helpNavul (

    padding - left : 10px ;

    #helpNavli (

    zobrazenie: inline;

    padding - right : 6px ;

    padding - left : 6px ;

    pozadie - farba : #2f6a98;

    #helpNav a (

    veľkosť písma: 12px;

    výplň: 0 6px;

    farba : #FFF;

    border-radius: 20px;

    #helpNav a:hover (

    A navigačné oblasti podstránok:

    SubNav ( display: block; width: 25%; float: left; ) .subNav h4 ( padding-bottom: 8px ) .subNav ul ( list-style: disc; color: #c65204; padding: 0 0 20px 20px; ) . subNav li ( padding-bottom: 14px; ) .subNav a ( color: #186483; font-size: 21px; font-family: "RokkittRegular", Times, "Times New Roman", serif; line-height: 1; )

    SubNav(

    displej: blok;

    šírka: 25 %;

    plavák: vľavo;

    SubNav h4 (

    výplň – spodná časť: 8px

    SubNavul(

    zoznam - štýl : disk ;

    farba : #c65204;

    padding: 0 0 20px 20px;

    SubNavli (

    padding - bottom : 14px ;

    SubNav a (

    farba : #186483;

    veľkosť písma: 21px;

    výška riadku: 1;

    Nakoniec navigácia v päte:

    footer nav ( display: block; margin-top: 40px; ) footer nav ul ( list-style: none; ) footer nav li ( padding-bottom: 24px; width: 19%; padding: 0 5% 20px 0; float: left; ) .innerNav li ( width: 100%; float: none; padding-bottom: 4px; ) footer nav a ( color: #575454; font-size: 12px; ) .innerNav a ( font-weight: normal; )

    navigácia v päte (

    displej: blok;

    margin - top : 40px ;

    päta nav ul (

    štýl zoznamu: žiadny;

    päta navli (

    padding - bottom : 24px ;

    šírka: 19 %;

    padding: 0 5% 20px 0;

    plavák: vľavo;

    InnerNavli(

    šírka: 100 %;

    plavák: žiadny;

    padding - bottom : 4px ;

    päta nav a (

    farba : #575454;

    veľkosť písma: 12px;

    InnerNav a (

    font-weight: normal;
    Pixely alebo ems

    Všimnite si, že pre naše mediálne dopyty sme použili hodnoty pixelov. Pomocou dopytov na pixelové médiá sme, podobne ako ostatní vývojári front-endu, začali robiť responzívny dizajn a prijali sme túto prax ako súčasť nášho pracovného postupu. V duchu „vybudovania lepšie responzívneho webu“ však poukážem na článok o dopytoch na dimenzionálne médiá pomocou ems, na ktorý sme boli upozornení pri úprave tejto sekcie. V podstate zlepšiť vzhľad Pri zvyšovaní priblíženia sa dôrazne odporúča previesť mediálne dopyty px na dopyty médií em vydelením všetkých hodnôt pixelov veľkosťou písma tela.

    Tento skvelý článok nás inšpiroval k prehodnoteniu nášho myslenia o mediálnych dopytoch založených na pixeloch a je ďalším príkladom toho, ako sme pokračovali v zdokonaľovaní responzívneho prístupu. Aj keď sme ems nepoužili v našich mediálnych dopytoch v tomto konkrétnom projekte, v súčasnosti s nimi experimentujeme a tento prístup tu stojí za zmienku.

    Hlavná navigácia

    Naša hlavná navigácia sa na širokouhlých obrazovkách zobrazuje ako vodorovný riadok v hornej časti rozloženia. Na malých obrazovkách sa štruktúra hlavnej navigácie mení tak, že v hornej časti každej stránky je veľké tlačidlo Menu, ktoré odkazuje na navigáciu v spodnej časti stránky. Aby sme to dosiahli, pridali sme do hlavičky prepojenie s ID menuLink a triedou oftabButtonr, čo je takmer začiatok značkovania. Potom sme umiestnili sekciu s ID mainNav na úplný koniec označenia. V tejto sekcii je naša hlavná navigácia, ktorá je jednoducho neusporiadaným zoznamom s niekoľkými ďalšími neusporiadanými zoznamami pre menu sekcie podstránok vo vnútri. Máme tiež kotvu s ID toTop, ktorá funguje ako odkaz na začiatok stránky.

    V pokračovaní princípu mobile-first sme upravili štýl odkazu na ponuku v hornej časti rozloženia malej obrazovky, aby vyzeral ako tlačidlo.

    #menuLink a ( float: right; margin: -56px 8px 0 0; ) .tabButton a ( color: #FFF; font-family: "RokkittRegular", Times, "Times New Roman", serif; font-size: 20px; farba pozadia: #45829b; padding: 10px 12px; border-radius: 10px;

    #menuOdkaz a (

    plavák: vpravo;

    okraj : - 56px 8px 0 0 ;

    TabButton a (

    farba : #FFF;

    font - rodina: "RokkittRegular" , Times , "Times New Roman" , serif ;

    veľkosť písma: 20px;

    pozadie - farba : #45829b;

    výplň: 10px 12px;

    border-radius: 10px;

    TabButton a: podržte kurzor myši (

    pozadie - farba : #f66606;

    Naša hlavná navigačná ponuka je nastavená na zobrazenie na malej obrazovke:

    #mainNav ( margin-top: 30px; width: 100%; ) #mainNav #toTop a ( float: right; margin: 0 8px 0 0; font-size: 20px; ) #mainNav nav ( padding-top: 80px; ) #mainNav ul ( list-style: none; ) #mainNav li ( background: #45829b; border-bottom: 1px solid #abc7d2; padding: 4px 10px 4px 15px; ) #mainNav li:hover ( background-color: #f66606; ) #mainNav a ( font-size: 24px; color: #FFF; font-family: "RokkittRegular", Times, "Times New Roman", serif; )

    #mainNav (

    margin - top : 30px ;

    šírka: 100 %;

    #mainNav #toTop a (

    plavák: vpravo;

    okraj : 0 8px 0 0 ;

    veľkosť písma: 20px;

    #mainNav nav (

    padding - top : 80px ;

    #mainNavul (

    štýl zoznamu: žiadny;

    #mainNavli (

    pozadie : #45829b;

    border - bottom : 1px solid #abc7d2;

    padding: 4px 10px 4px 15px;

    #mainNav li:hover (

    pozadie - farba : #f66606;

    #mainNav a (

    veľkosť písma: 24px;

    farba : #FFF;

    font - rodina: "RokkittRegular" , Times , "Times New Roman" , serif ;

    Naše podponuky, ktoré sa nezobrazujú na svojej pôvodnej pozícii, sa teraz môžu zobrazovať podľa požiadaviek stránky. Každá z týchto podponuiek má jedinečné ID, ako napríklad servicesTab, a každá sekcia webovej lokality má triedu aplikovanú na značku body. Trieda sekcie „Spoločnosť“ je CompanyPage. Túto triedu používame na úpravu celej sekcie webovej stránky. Ak chcete aktivovať podponuku, použijeme triedu sekcie podponuky podľa potreby, keď je sekcia aktivovaná.

    CompanyPage #companyTab ul, .newsPage #newsTab ul, .contactPage #contactTab ul, .servicesPage #servicesTab ul ( display: block; )

    CompanyPage #companyTab ul,

    NewsPage #newsTab ul,

    Kontaktná stránka #contactTab ul,

    Stránka služieb #servicesTab ul (

    displej: blok;

    Pribúdame

    S príchodom väčších rozložení obrazovky – opäť s mediálnymi dopytmi s veľkosťou 660 pixelov a viac – dramaticky meníme rozloženie hlavnej navigácie. Najprv zakážeme zobrazenie tlačidiel menuLink a toTop, pretože už nie sú potrebné:

    #menuLink a, #toTop a ( display: none; )

    #menuLink a, #toTotop a (

    displej: žiadny;

    #mainNav ( pozícia: absolútna; horná časť: 92 pixelov; okraj: 18 pixelov 2 % 0 2 %; šírka: 96 %; zarovnanie textu: stred; ) # mainNav ( odsadenie: 5 pixelov; okraj-vrchol: 1 pixel plný #bacfd7; border-bottom: 1px solid #bacfd7; ) #mainNav li ( background: none; display: inline; border-bottom: 0; border-right: 1px solid #bebebe; padding: 0 6px 0 8px; margin: 4px 0; ) #mainNav a (veľkosť písma: 16px; farba: #45829b; ) #mainNav a:hover ( farba: #f66606; )

    #mainNav (

    pozícia: absolútna;

    hore: 92px;

    okraj: 18px 2% 0 2%;

    šírka: 96 %;

    text - zarovnať : stred ;

    }

    #mainNav nav (

    padding: 5px 0;

    border - top : 1px solid #bacfd7;

    okraj - spodok : 1px plný #bacfd7;

    }

    #mainNavli (

    pozadie: žiadne;

    zobrazenie: inline;

    okraj - dole : 0 ;

    veľkosť: 16px;

    farba : #45829b;

    }

    #mainNav a:hover (

    farba : #f66606;

    }

    Tieto štýly nastavujú vzhľad hlavnej navigácie. Aby sa to ale zmestilo do dizajnu namiesto zariadenia, budeme musieť pri zväčšovaní veľkosti obrazovky urobiť drobné úpravy. Naše hlavné písmo navigácie má celkovo osem rôznych veľkostí širokouhlého rozloženia, ktoré sa menia s rozširovaním obrazovky a zväčšením pracovného priestoru. Jednou z prekážok, ktorým sme čelili pri práci s responzívnym dizajnom, bolo zistiť, ako čo najlepšie zobraziť túto navigáciu spôsobom, ktorý zjednoduší používanie a bude vizuálne príťažlivý.

    Tento vzor sledujeme niekoľkokrát a nakoniec zväčšíme veľkosť písma na 27 pixelov, keď web dosiahne svoj cieľ. najväčšia veľkosť. Týmto spôsobom sa navigácia na webovej stránke zhoduje s dizajnom a obrazovkou, ktorá sa používa na jej zobrazenie tým najlepším možným spôsobom.

    Získanie pomoci od CMS

    Naším preferovaným CMS je ExpressionEngine a špecifiká ďalšej časti článku sú špecifické pre túto platformu, ale základnú myšlienku toho, čo sme dosiahli pomocou ExpressionEngine, možno určite použiť aj na iné populárne platformy CMS.

    Jednou z najväčších prekážok adaptívneho prístupu je, že nemôžete poskytnúť rôzne značky alebo iný zdrojový kód rôzne zariadenia. Toto je prekážka, ktorú sme chceli prekonať pomocou nášho CMS. Počas experimentovania a skúmania sme narazili na článok s názvom Going Truly Adaptive With ExpressionEngine. Pomocou metodológie podrobne popísanej v tomto článku sme mohli použiť skript na detekciu zariadenia na nastavenie premennej v mobilnom alebo stolnom systéme. Potom sme mohli načítať značky na našu stránku na základe toho, s ktorou z týchto premenných sme sa stretli.

    Posunom vpred a použitím detekcie zariadení sa nám podarilo vykonať ďalšie veľmi malé zmeny na ďalšie zlepšenie mobilného zážitku. Pre nás to bolo niečo ako progresívne vylepšovanie, kde sme postavili kvalitné riešenie a potom sme sa ho snažili posunúť dopredu, aby sme priniesli mierne optimalizovaný zážitok. Určite si prečítajte podobný názor Chrisa Coyiera na kombinovanie RWD a mobilných šablón, kde polemizuje o miešaní a spájaní rôznych techník vo svojej mobilnej stratégii.

    Začnime v malom

    Tieto premenné by ste samozrejme mohli použiť na dodanie úplne odlišného označenia a zdrojového kódu do rôznych zariadení, ale náš pôvodný prístup bol o niečo menej extrémny. Keďže už bolo rozhodnuté, že akákoľvek verzia našej webovej stránky bude mať prístup k celému obsahu, pôvodne sme požiadali túto metódu premenné mierne regulovať množstvo dodávaného obsahu. Napríklad na domovskej stránke našej webovej lokality zobrazujeme upútavky na množstvo obsahu, ktorý sa na webovej lokalite nachádza. V sekciách „Kultúra“ a „Projekt Spotlight“ je každý príspevok doplnený obrázkom.

    Obrázky sú pekným doplnkom, ale rozhodne nie zásadným, a preto tieto obrázky našim používateľom mobilných zariadení vôbec neukazujeme. Opäť nechcem povedať, že na ich zakázanie používame CSS, ktoré aj tak načíta dáta do prehliadača; namiesto toho používame premenné set na vylúčenie obrázkov z označenia, ak by sa nemali zobrazovať.

    Syntax je celkom jednoduchá. Po nastavení premenných - a vyššie uvedený článok vysvetľuje, aké ľahké je to urobiť pridaním systémový súbor config.php je malý skript – tieto premenné môžete použiť ako príkaz if.

    img src = "(obrázok-upútavky)" alt = "(!JAZYK:(názov)" / > { / if } { if global : site_version == "mobile" } { title } { / if } !}

    Toto je syntax ExpressionEngine, ale môžete si ju prečítať a ľahko zistiť, čo sa deje. Ak sa nájde plná premenná, doručíme ukážkový obrázok zo záznamu článku v databáze. Ak namiesto toho narazíme na premennú mobil, dodáme názov nadpisu článku.

    Rovnaký prístup je aplikovaný na sekcie „Novinky“ a „Blog“ na domovskej stránke, ktoré poskytujú tri krátke upútavky, ak narazíte na celú premennú, a iba jednu, ak sú mobilné. Syntax vyzerá takto:( exp : channel : entries channel = "news" (ak global : site_version == "full" ) limit = "3" ( / if ) ( if global : site_version == "mobile" ) limit = "1" (/ak ))

    Tu môžete vidieť, že pristupujeme ku kanálu ExpressionEngine s názvom novinky. Pomocou našej premennej určujeme, koľko aktuálnych prvkov sa zobrazí z tohto kanála pomocou parametra limit.

    Poďme ešte o krok ďalej

    V sekcii Kultúra na webe uverejňujeme články, ktoré sú často doplnené množstvom obrázkov. Na rozdiel od obrázkov s ukážkami na domovskej stránke webovej lokality sú obrázky v samotných článkoch pre tento obsah životne dôležité, pretože pomáhajú udržiavať alebo zvyšovať dôraz článku. Aj keď sú tieto obrázky dôležité, sú tiež dosť veľké – každý má šírku 650 pixelov, pričom väčšina článkov obsahuje aspoň tri obrázky, niekedy až desať. Keďže mobilné zariadenia budú zobrazovať obrázky približne v polovičnej veľkosti, načítavanie obrázkov v plnej veľkosti bude dosť dôležité. Aby sme sa s tým vyrovnali, pozrime sa znova na definíciu zariadenia a premenné.

    Pre každý článok vytvoríme dve sady obrázkov: jednu v plnej veľkosti so šírkou 650 pixelov a druhú s takmer polovičnou veľkosťou. Potom v našom článku použijeme premenné (najprv však musíme povoliť kód ExpressionEngine v našej šablóne stránky) a pridáme označenie pre obe sady obrázkov – prehliadaču sa však doručí iba jedna z nich. Mobilné zariadenia prijímajú malé obrázky, zatiaľ čo všetky ostatné prijímajú obrázky v plnej veľkosti.
    Rovnaký prístup platí pre veľkú reklamnú plochu na domovskej stránke. Tieto rotujúce bannery a obrázky propagujú dôležité veci, ako sú nadchádzajúce udalosti, nové služby, oznámenia lepšie ako zvyšok domovskej stránky. Billboard je ďalším príjemným prvkom vo všetkých ohľadoch, ktorý je určený len pre veľké displeje. Opäť používame premenné na doručenie hlavnej časti billboardu, ako aj JavaScriptu, ktorý ju spúšťa, do príslušného zariadenia – čo nám umožňuje efektívne odosielať rôzne označenia rôzne zariadenia a odstránenie ďalšej prekážky, ktorú sme identifikovali na začiatku projektu.

    Pomocou mobilného prístupu a nášho CMS sme schopní dodať naše domovskej stránke pre používateľov stolných počítačov na 738,3 KB a výrazne ju znižuje na iba 174,4 KB pre mobilných používateľov.

    Alternatívne plány

    Jedna z otázok, ktorá ma vždy trápila v súvislosti s prístupom len pre mobilné zariadenia a detekciou zariadení, je: „Čo sa stane, ak detekcia zlyhá? Doručuje sa do mobilného zariadenia „normálna“ verzia webovej lokality, čím sa znehodnocuje váš starostlivo vytvorený mobilný dizajn? Táto funkcia je jedným z hlavných dôvodov, prečo som sa vyhol riešeniu určenému len pre mobilné zariadenia používané v minulosti na detekciu zariadení.

    Detekciu zariadení používame pre náš adaptívny pracovný postup a vyzbrojila nás skvelými alternatívami pre prípad, že by detekcia zariadení z nejakého dôvodu nefungovala. Keďže používame adaptívny prístup, aj keď mobilný prehliadač bude dodaná plná verzia, označenie bude vyhovovať tomuto zariadeniu, pretože náš CSS sa tomu prispôsobí.

    Navyše, pretože všetko je určené predovšetkým pre mobilné zariadenia, prvky, ktoré nie sú určené pre malé obrazovky, ako napríklad vyššie uvedená obrovská grafika na pozadí, sa vôbec neodrážajú. Jediná vec, ktorá nás sklame, je to, čo sme urobili s našimi premennými vygenerovanými na definovanie zariadenia. Ak dôjde k najhoršiemu scenáru a detekcia zariadenia zlyhá, potom mobilná verzia získa len niekoľko obrázkov navyše alebo nejaké označenie alebo nejaký JavaScript. Celkový dojem bude stále vyhovovať mobilnému zariadeniu. Nie je to zlé pre „najhorší scenár“.

    Pokrok, nie ideálny

    Pred pár rokmi mi jeden klient povedal niečo, čo si pamätám dodnes. O svojej webovej stránke povedal:

    « Nerobte si starosti s tým, aby bol môj web dokonalý. Len pracujte na zlepšení. Jeho neustále zlepšovanie bude krokom správnym smerom».

    Táto myšlienka ma inšpirovala roky a pripomenula mi, aby som neodmietal to najlepšie len preto, že to nie je dokonalé.

    to viem toto rozhodnutie– nie je dokonalý, a to je v poriadku, pretože ide o zlepšenie nášho predchádzajúceho adaptívneho pracovného postupu. Pomohlo nám to prekonať niektoré prekážky, ktoré sme identifikovali, a teraz môžeme tieto vylepšenia priniesť do projektov, na ktorých pracujeme. Áno, stále existuje veľa zložitostí, ktoré zatiaľ nevieme efektívne ovplyvniť, ako je poskytovanie vysokokvalitného obrazu na HD displeje, ako aj používanie mediálnych dopytov založených na em, o ktorých sme už písali, ale v súvislosti s týmto a ďalšími projektmi sme sa uberajú správnym smerom.

    Ktovie... Možno raz niekto postaví „dokonalú webstránku“. Momentálne sa zameriavame skôr na pokrok ako na dokonalosť, pričom robíme malé vylepšenia a pracujeme na budovaní citlivejšej webovej stránky.

    čo myslíš?

    Ako vytvárate responzívne weby? Používate definíciu charakteristiky alebo definíciu zariadenia? Kedy by ste odporučili použiť jedno alebo druhé? Čakáme na vaše komentáre!

    Adaptívne rozloženie webových stránok umožňuje webovým stránkam automaticky sa prispôsobiť obrazovkám tabletov a smartfónov. Návštevnosť mobilného internetu každým rokom rastie a na efektívne spracovanie tejto návštevnosti musíte používateľom ponúknuť responzívne weby s užívateľsky prívetivým rozhraním.

    Vyhľadávače používajú množstvo kritérií na vyhodnotenie odozvy stránok pri prezeraní na mobilných zariadeniach. Google sa snaží majiteľom smartfónov a tabletov zjednodušiť používanie internetu tým, že stránky prispôsobené pre mobilné zariadenia označuje vo výsledkoch mobilného vyhľadávania špeciálnou značkou mobile-friendly. Yandex má tiež algoritmus, ktorý používateľom v mobilnom vyhľadávaní uprednostňuje stránky s mobilnou/responzívnou verziou.

    Zobrazenie stránky na mobilných zariadeniach si môžete skontrolovať na službách a.


    Ryža. 1. Výsledky mobilného vyhľadávania od spoločností Yandex a Google s poznámkou o prijateľnosti stránky pre mobilné zariadenia Čo je to adaptívne rozloženie?

    Adaptívne rozloženie predpokladá absenciu vodorovného posúvača a škálovateľných oblastí pri prezeraní na akomkoľvek zariadení, čitateľný text a veľké plochy pre klikacie prvky. Pomocou mediálnych dopytov môžete ovládať rozloženie a umiestnenie blokov na stránke a zmeniť usporiadanie šablóny tak, aby sa prispôsobila rôznym veľkostiam obrazovky zariadenia.

    Základné techniky tvorby responzívneho webu sú uvedené v článku. Pre responzívny dizajn je šírka kontajnera hlavnej stránky nastavená v % a môže sa rovnať 100 % šírky okna prehliadača alebo menej. Šírka stĺpcov mriežky je tiež uvedená v %. V responzívnom dizajne je šírka hlavného kontajnera a stĺpcov mriežky pevná pomocou hodnôt px.

    Technika adaptívneho fluidného rozloženia, o ktorej sa hovorí v tejto lekcii, bude perfektne fungovať na šablóne s dvoma stĺpcami, vďaka čomu bude stránka prispôsobivá a pohodlná na prezeranie na mobilných zariadeniach. Šablóna predpokladá iné rozloženie hlavného obsahu stránok v tejto lekcii sa bude diskutovať o rozložení hlavnej stránky.

    Rozloženie domovskej stránky

    Stránka sa skladá z troch hlavných blokov: hlavička (hlavička), obalový kontajner pre hlavný obsah a bočný panel a päta (päta). Zoberme si 768px a 480px ako dizajnové zlomové body.

    V prvom bode skryjeme horné menu a presunieme bočný panel pod kontajner s príspevkami. V druhom bode zmeníme umiestnenie prvkov hlavičky a zrušíme umiestnenie tlačidiel sociálnych sietí v príspevkoch a zrušiť zalamovanie stĺpcov päty stránky.


    Ryža. 2. Príklad adaptívneho rozloženia 1. Meta tagy a sekcia

    1) Pridať do sekcie potrebné súbory— odkaz na použité písma, knižnicu jQuery, ako aj doplnok bez prefixov (aby sa nepísali predpony prehliadača pre vlastnosti):

    Adaptívne rozloženie webovej stránky

    2. Hlavička stránky

    Do hlavičky stránky umiestnime nasledujúce prvky kontajnera:
    logo

    Voľba editora

    © 2024 ermake.ru -- O oprave PC - Informačný portál