Prvo mobilni. Od Mobile First do Mobile Native: šta je važno zapamtiti za programere koji se fokusiraju samo na pametne telefone

Dom / Tehnologije

Napravit ćemo jednostavnu, prilagodljivu navigaciju web stranice. Naše rješenje će nam pomoći da se fokusiramo na sadržaj našu stranicu, koja je možda glavni prioritet pri razvoju za mobilne uređaje. Ovdje neće biti uključen JavaScript, ali ćemo to pogledati koristeći pristup Mobile First.

Mobilna navigacija

Savršeno prihvatljiv responzivni dizajn, ali pri standardnim veličinama mobilnog prikaza (320 x 480 piksela), sve što zaista vidite je navigacijski meni. Naravno, tek otvaram početna stranica, volio bih vidjeti nešto drugačije od ovoga. London & Partners nisu jedini koji imaju ovaj problem, ova praksa se može vidjeti u mnogim responzivnim dizajnima širom weba.

Dakle, koja su rješenja?

Već znamo za nekoliko načina da to zaobiđemo, kao što je oslanjanje na jQuery da nam pomogne da to shvatimo. Uzmite Chris Coyierovo objašnjenje padajućeg menija Pet jednostavnih koraka.



Veliki ekran, mali ekran.

WITH koristeći jQuery duplirani meni se kreira kao padajući spisak, koji je prvobitno skriven od pogleda pomoću CSS-a. Kada medijski upiti otkriju manji ekran, oni čine padajući meni vidljivim, a originalnu navigaciju nevidljivom. Ovo je idealno rješenje za mobilne uređaje, jer padajuće liste zauzimaju minimalan prostor i koriste posebne korisnički interfejs uređaja (na primjer, skroler na iPhone uređaju).

Alternativno, možete sakriti svoju navigaciju, ali otići u način prikaza kada pritisnete dugme "meni". Ovaj efekat možete vidjeti na djelu u Twitter-ovom najnovijem Bootstrapu.


Manji ekrani skrivaju veze za navigaciju i prikazuju ikonu „liste“ (koja je brzo postala percipirana kao „meni“) koja prikazuje navigaciju kada se klikne. Opet, posjetiteljima s mobilnih uređaja prezentuje se što je više moguće sadržaja i dostupne su im opcije navigacije ako žele.


Čisto CSS rešenje

Koristit ćemo tehniku ​​o kojoj je Luke govorio, a koja uključuje koristeći CSS i pristup Mobile First. Šta podrazumijevamo pod pojmom „Mobilni prvi pristup“? Jednostavno rečeno, mi ćemo razviti direktan mobilni izgled, a zatim ćemo postepeno poboljšati dizajn za veće ekrane. Koristit ćemo medijske upite koji otkrivaju sve veće veličine ekrana, postepeno dodajući stil i funkcionalnost.

To znači da će se prilikom pregleda dizajna na mobilnom uređaju učitati samo minimalni CSS i sredstva. To također znači da će starije verzije IE (koje ne prepoznaju medijske upite) biti predstavljene na mobilnoj verziji stranice. Pogledajte Ostavljajući stari Internet Explorer iza Jonija Korpija za više informacija o ovome.

1.Marking

Objasniću ideje iza ovog rješenja kako budemo napredovali, pa za sada skicirajmo neke oznake, počevši od blanco HTML5 dokumenta.

Mobile First Responsive Navigation

Nakon što smo to uradili, dodajmo strukturu stranice. Direktno potrebne točke i sve za potrebe naše demonstracije. Koristio sam Monty Python tekst punilo iz Svetog grala (hvala Chris Valleskey) koji je na dobar način izmamite osmeh na lice dok radite :)

Nav Blue. Ne, jel...

Začepi! Hoćeš li umuknuti?! Ali ti si obučen kao jedan... Camelot! Ne glasate za kraljeve.

Želimo grm!!

Vidi, moja laž! Začepi! Ali obučen si kao jedan…

  • Nos?
  • Shh! Vitezovi, želim vam dobrodošlicu u vaš novi dom. Odjašimo do Kamelota!
  • Vidi, moja laž!
Pomozite, pomozite, potisnut sam!

Zašto? Slušaj. Čudne žene koje leže u barama i dijele mačeve nisu osnova za sistem vlasti. Vrhovna izvršna vlast proizlazi iz mandata mase, a ne iz neke farsične vodene ceremonije. Budi tih! Njut?!--krajnji omotač-->

2. Navigacijski izgled

Sastavili smo osnovnu html stranicu, tako da je sada vrijeme za glavnu atrakciju; naša glavna navigacija..

Da, sve ste ispravno vidjeli - dodali smo u red 68 poslije zadnji članak. Ne zaboravite da trenutno razvijamo za mobilne uređaje, kasnije ćemo pogledati i desktop verziju. Postavili smo navigaciju na dno naše stranice, što se čini prilično čudnim. Sada ćemo postaviti link na vrh naše stranice kako bi korisnici mogli pronaći navigaciju ako žele.

Nav Meni

3.Resetujte CSS

Ovisno o tome kako obično pokrećete web projekte, ovaj korak se može razlikovati od vašeg normalnog toka posla. Oduvijek sam bio mišljenja da je ponovno pokretanje Erica Meyera dobro mjesto za početak, pogotovo jer ga je nedavno revidirao. Dodaćemo njegova pravila za poništavanje u listu stilova da pokrenemo naš css:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NAPOMENA: RAD U TIJEKU KORISTI SE OPREZNO I TESTIRAJ SA ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , akronim, adresa, veliki, citirati, kod, del, dfn, em, img, ins, kbd, q, s, samp, mali, štrajk, jak, sub, sup, tt, var, b, u, i, centar , dl, dt, dd, ol, ul, li, set polja, obrazac, oznaka, legenda, tablica, natpis, tbody, tfoot, thead, tr, th, td, članak, na stranu, platno, detalji, figcaption, figura, footer , zaglavlje, hgroup, meni, navigacija, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; padding: 0; granica: 0; okvir: 0; veličina fonta: 100%; font: naslijediti; okomito- align: baseline ) /* HTML5 poništavanje uloge prikaza za starije pretraživače */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, meni, navigacija, sekcija (prikaz: blok; ) tijelo (visina linije:: 1 ) ol, ul (stil liste: nema; ) blok citat, q (navodnici: nijedan; ) blockquote:prije, blockquote:poslije, q:prije, q:poslije (sadržaj: ""; sadržaj: nijedan; ) /; * ne zaboravite nekako istaknuti umetke! */ ins (dekoracija teksta: nema; ) del (dekoracija teksta: kroz liniju; ) tablica (sažimanje obruba: kolaps; razmak između ivica: 0; )

4.Osnovni stilovi

On trenutno naša stranica izgleda prilično dosadno.


Zato popravimo situaciju dodavanjem jednostavnog stila.

/*počinjemo naše stilove*/ body (font: 16px/1.4em "PT Sans", sans-serif;; boja: #1c1c1c; ) p, ul ( margina: 0 0 1.5em; ) ul ( stil liste: disk ; padding: 0 0 0 20px ) a ( boja: #1D745A; ) h1 ( ) h2 ( font-family: "PT Serif", serif; font-size: 32px; line-height: 1.4em; margin: 0 0; .4em; font-weight: bold ) /*layout*/. background: #1c1c1c padding: 15px 20px ) /*kraći clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after ( content:""; display:table; ) header; :after ( clear:both; ) /* Za IE 6/7 (okidač hasLayout) */ zaglavlje ( zoom:1; ) h1.logo a ( boja: #d8d8d8; dekoracija teksta: nema; težina fonta: bold; text-transform: font-size: float: left-spacing: 0,2em;

veličina fonta: 12px;


font-weight: bold; visina linije: 22px; visina: 22px; transformacija teksta: velika slova; razmak između slova: 0.1em; -webkit-border-radius: 2px;-moz-border-radius: 2px; radijus granice: 2px; ) a.to_nav:hover, a.to_nav:focus ( boja: #1c1c1c; pozadina: #ccc; ) Ovo su sve osnove (fontovi, visine linija, boje, itd.), ali ono što je zaista važno je da sam nacrtao dugme "meni" sa desne strane, unutar , tačno tamo gde biste očekivali da ga vidite. Ako zadržite pokazivač miša iznad njega vidjet ćete zamrznuto stanje - naravno to nije neophodno za uređaje sa ekran osetljiv na dodir

, ali slična priroda radnje će se prenijeti na nekompatibilne verzije


Internet Explorer

. Šta mi

odlučan

/*navigacija*/ #primary_nav ul ( stil liste: nema; pozadina: #1c1c1c; padding: 5px 0; ) #primary_nav li a (prikaz: blok; padding: 0 20px; boja: #fff; dekoracija teksta: nema font-weight: bold-spacing: 0.1em line-height: 1px solid ) #primary_nav li :last-child a ( border-bottom: none; ) #primary_nav li a:hover; #primary_nav li a:focus ( boja: #1c1c1c; pozadina: #ccc; ) /*podnožje*/ podnožje (familija fontova: " PT Serif", serif; stil fonta: kurziv; poravnanje teksta: centar; font- veličina: 14px;

Mnogo bolje. Napravili smo lijepe i velike veze u meniju (pročitajte blog Luke Wroblewski Touch Target Sizes za više detalja) i još jednom definirali stanje: fokus za povratne informacije korisnika.


6. Getting big

U redu, radili smo s našim jednostavnim mobilnim predloškom, ali sada je vrijeme za naprednija poboljšanja. Koristit ćemo medijske upite da odredimo kada naš mobilni izgled više nije prikladan.

Ali u kom trenutku to postaje tako? Postoji mnogo načina da se pristupi medijskim upitima, ali mi ćemo raditi na osnovu toga da je mobilni okvir za prikaz 320 x 480 piksela. Širok je 320 piksela kada se gleda u "portretnoj" orijentaciji, 480 piksela kada se gleda u "pejzažnoj" orijentaciji, tako da ima smisla ako postavimo naš prvi medijski upit da specificira bilo koji ekran veći od 480 piksela.

Međutim, sljedeći korak je vjerovatno tablet. iPad ima rezoluciju od 980px x 768px, tako da možemo sa sigurnošću pretpostaviti da je sve manje od 768px pogodno za naš mobilni izgled. Sve što je veće od 768px može raditi sa rasporedom navigacije na radnoj površini, "desktop" verzija.

Dakle, sada možemo početi sa dodavanjem pravila, pa postavimo medijski upit:

/*medijski upiti*/ @medijski samo ekran i (min. širina: 768px) ( )

Ovaj medijski upit će pokrenuti sve stilove koje sadrži ako je najmanja vrijednost okvira za prikaz 768 piksela. Obratite pažnju na uključivanje jedini ključna riječ koja osigurava da se Internet Explorer 8 ne zbuni i pokuša obraditi zahtjev. Za detaljnije informacije pogledajte.

Započnimo naš rad tako što ćemo učiniti da dugme "meni" nestane:

@media samo ekran i (min-width: 768px) ( a.to_nav ( display: none; ) )

Kada je pretraživač malo širi, dugme menija se više neće pojavljivati.

7.Premjesti navigaciju

Sada moramo da pomerimo našu glavnu navigaciju na vrh stranice. To ćemo učiniti tako što ćemo ga ukloniti iz toka dokumenata i postaviti ga na sam vrh.

@media only screen and (min-width: 768px) ( a.to_nav ( display: none; ) .wrapper ( position: relative; width: 768px; margin: auto; ) #primary_nav ( position: absolute; top: 5px; desno : 10px pozadina: nema ) #primary_nav li (display: inline; ) #primary_nav li a (float: left; border: none; padding: 0 10px; -webkit-border-radius: 2px; -moz-border-radius; : 2px radijus: 2px;

Da bi ovo bilo moguće, prvo moramo ispravno postaviti njegov roditelj (.wrapper). Možemo to učiniti ovdje u medijskom upitu ili ga definirati na početku našeg stilskog lista.

Kada je meni u potpunosti instaliran, moramo ukloniti neke sidrene elemente. Ne morate ništa posebno raditi, samo trebate napraviti listu proizvoda linearno, ukloniti granice i ogromne prostore. Stanja lebdenja o kojima smo ranije govorili su naravno odlična, tako da ih ne trebamo mijenjati.


8. I na kraju...

Ako ste obraćali pažnju, primijetili ste da još uvijek imamo link "povratak na vrh" u navigaciji - to nam sada ne treba, zar ne?

Možemo ga ukloniti na nekoliko načina, ali da bismo bili jasni o tome šta se dešava, hajde da prvo dodamo klasu elementu liste:

  • Top

    • A onda ga se možemo riješiti u našem medijskom upitu:

    #primary_nav li.top (prikaz: nema;)

    Zaključak

    To je to! Postoji mnogo načina za implementaciju ove ideje (ikona liste je samo jedan od njih), a naravno možete nastaviti da dodajete medijske upite da biste radili na većim ekranima. Nadam se da sada imate razlog za to. Napravili smo jednostavnu, osjetljivu navigaciju na dodir koristeći pristup na prvom mjestu na mobilnim uređajima, fokusirajući se na sadržaj i upotrebljivost. Kome još nešto treba?!

    Dodatni resursi

    Evo nekoliko korisnih veza spomenutih u ovom članku, sastavljenih u jednu prikladnu listu:

    • Luke Wroblewski
    • Chris Coyier's
  • Razvoj mobilnih aplikacija

    • Dosta je napisano o Mobile First-u i postoje dobre knjige na ovu temu. Pa ipak, većina programera i kompanija ga ne koristi u svojim projektima ili uopće ne zna za ovaj pristup.

    Stoga vam želim ukratko ispričati o tome i uz primjere, ovo će biti korisna informacija za one koji nisu čuli za ovaj pristup.
    Pokušaću da odgovorim na tri glavna pitanja:

    • Šta je Mobile First i njegove prednosti
    • Implementacija pristupa
    • Statistika rezultata
    Šta je Mobile First? Ove godine je broj korisnika koji koriste mobilne uređaje za pristup internetu dostigao 60%. Zato mobilni saobraćaj postaje sve značajniji i vlasnici web stranica moraju uzeti u obzir ove statistike. Kao što pokazuje praksa, korisnici mobilni telefoni i tableti provode manje vremena na mreži i preferiraju web stranice iz prvih redova rezultata pretraživanja. Dok korisnici računara mogu provesti više vremena tražeći informacije. Stoga vaša web stranica mora biti dobro optimizirana za tražilice(SEO) i ispunite sve Mobile First zahtjeve, kako bi korisnikov posjet vašoj web stranici bio što praktičniji i razumljiviji putem njegovog mobilnog uređaja.

    Stoga su neki od najvažnijih zahtjeva u razvoju Mobile First:

    • Prvo pokažite najvažniji sadržaj
    • Web stranica bi trebala biti lagana i optimizirana jer... brzina veze mobilnu mrežu može biti slab ovisno o lokaciji korisnika
    • Web stranica ne bi trebala učitavati više resursa nego što je korisniku potrebno da dobije informacije koje su mu potrebne, jer... Mobilni internet je i dalje skup. Dodatne informacije treba učitati samo na zahtjev korisnika
    Dakle, Mobile First je metoda razvoja optimizirane web stranice za različite mobilne uređaje, uzimajući u obzir brzinu mrežne veze. I važnost prikazivanja osnovnog sadržaja krajnjem korisniku.

    O važnosti ovog pristupa nedavno je pisao pretraživač Google:

    „Povećat ćemo pokazatelj prilagođenosti mobilnim uređajima u našoj rang listi rezultata. Ove promjene će utjecati na mobilno pretraživanje na svim jezicima svijeta i imat će značajan utjecaj na rezultate pretraživanja. Stoga će korisnicima biti lakše pronaći rezultate optimizirane za njihove uređaje.”
    Video o važnosti Mobile First-a od Oliviera Rabenschlaga - šefa Google Creative Development Agency.

    Prednosti Mobile First pristupa Podsjećam da je danas broj korisnika koji koriste mobilne uređaje za surfanje internetom dostigao 60%. Stoga korištenje Mobile First-a prilikom razvoja web stranice pruža velike prednosti prije svega ovim korisnicima.
    • Jedna web stranica za sve uređaje
    • Korisnici će prvo dobiti važan sadržaj stranice
    • Brzo učitavanje stranice pri malim brzinama veze
    • Zgodno sučelje za navigaciju na mobilnom ekranu
    • Minimalna količina web resursa potrebna za prikaz glavnog sadržaja - ušteda mobilni internet saobraćaja
    • Najbolje pozicije u rezultatima Google pretrage
    Implementacija Implementacija pristupa će biti demonstrirana korištenjem Moff.js (Mobile First Framework) okvira. Ovo je JavaScript okvir koji je skrojen za Mobile First razvoj.

    Razmotrit ćemo pristup na primjeru stranice s detaljnim informacijama o automobilu.

    Određivanje važnog dijela sadržaja Obično na takvoj stranici ima puno podataka. I moramo odlučiti šta je od toga važno prvenstveno za korisnika.

    Detaljna lista podataka na stranici:

    Zamislimo da je glavna stvar sa ove liste glavna slika, naziv proizvođača, modeli, oprema, cijena, lista karakteristika i opreme.

    Mobile First page. Naziv kompanije Opis kompanije 2015 Nissan Versa Note

    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 exercitation 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.
    • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • Model: Versa Note
    Karoserija: 4D Hatchback
    • Motor: 1.6L 4-Cilinder DOHC 16V
    • Gorivo: benzin
    • Standard
    • Pomoć pri kočenju
    • Dvostruki prednji vazdušni jastuci za bočni udar
    • Odmrzivač zadnjeg stakla
    • Kanta za suvozačka vrata
    • Kanta za vozačeva vrata
    • Vazdušni jastuk za putnike
    • Kontrola vuče
    • CD player
    • Putni kompjuter
    • Elektronska kontrola stabilnosti
    • Prednji stabilizator
    • Servo upravljač
    • Brisač zadnjeg stakla
    Prednja svjetla za čitanje
    • Vazdušni jastuk iznad glave
    • Kontakt
    • ABS kočnice

    Kreirao Company.com

    Copyright Sitemap U idealnom slučaju, ovo je količina saobraćaja koju korisnik može potrošiti da dobije ove podatke. A mi ćemo to pokušati postići uz minimalnu razliku.

    Prije svega, napišimo stilove za prikazivanje stranica

    mobilnih uređaja. I tek nakon toga se stilovi prilagođavaju drugim veličinama ekrana putem medijskog upita. @media (min-width: 768px) ( /*Stilovi za tablet i desktop*/ ) Dodavanje dodatnih informacija

    Sada moramo dodati preostale podatke na način da korisnik zna za njih i da podatke može dobiti tako što ih zatraži.
    Ovdje koristimo pomoćnike Data Events, koji pomažu u dobivanju informacija kada se zatraže. Kada kliknete na link, Ajax zahtjev će biti poslan na adresu navedenu u atributu href. Rezultat zahtjeva će biti upisan u element specificiran u atributu data-load-target. Važna stvar je da atribut data-load-screen označava pri kojim vrednostima ekrana će se sličice automatski učitavati. Veličine ekrana su preuzete iz Twitter Bootstrap CSS okvira. A u atributu data-load-module ukazujemo na identifikator registrovanog modula, koji će biti povezan nakon umetanja rezultata ajax zahtjeva.

  • Ajax zahtjev se šalje na URL naveden u linku i rezultat se ubacuje na stranicu
  • Registrirani modul (galerija vozila) je spojen
  • Zavisnosti su uključene (jQuery i Slick-carousel)
  • Učitavanje datoteke glavnog modula
  • Inicijalizacija modula
    • Dalje, pogledajmo registraciju ovog modula. Deklaracija klase modula Moff framework ima sistem modularnosti sa kojim implementiramo klasu modula vozila-galerija.

    Moduli u Moffu su nezavisni elementi aplikacije koji imaju svoju poslovnu logiku i mogu imati ovisnosti o vanjskim bibliotekama.

    Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; funkcija setMainImage() ( _mainImage = _module.find(".vehicle_images_main img"); ) funkcija initializeSlickJs() ($(_module.). find(".vehicle_images_thumbs-list")).slick(( beskonačno: true, slidesToShow: 5, slidesToScroll: 1 )) ) funkcija handleMainImage() ( $(_module.scope).on("click", ".vehicle_images_thumbs- item img", changePreview); ) funkcija changePreview() ( var index = this.src.match(/thumb(\d+)/); _mainImage.src = "images/preview" + index + ".jpg"; ) ovo .scopeSelector = ".vehicle_images" this.init = function() (setMainImage(); initializeSlickJs(); handleMainImage(); ));
    Tokom inicijalizacije klase, pokrećemo slick-carousel da kreiramo vrtuljak naših sličica i postavljamo rukovalac da ih pregleda.

    Registracija modula Registracija modula se događa korištenjem objekta koji sadrži jedinstveni identifikator i može sadržavati ovisnosti modula i glavnu datoteku klase modula.

    Moff.amd.register(( id: "galerija vozila", zavisi: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"] ), datoteka: ( js: ["js/vehicle-gallery.js"] ), afterInclude: function() ( Moff. module.initClass("Galerija vozila");
    U našem primjeru smo naveli jQuery i njegov slick-carousel dodatak, koji kreira vrtuljak od sličica, kao zavisnosti. Zavisnosti se učitavaju sinhrono, redoslijedom kojim navedete. A nakon zavisnosti, učitava se klasa modula vehicle-gallery.js. Zatim, nakon učitavanja datoteke modula i njegovih ovisnosti, inicijaliziramo modul pomoću događaja afterInclude.

    Statistika rezultata. Hajde da sumiramo rezultate kreiranja Mobile First stranice.

    Donji grafikon pokazuje da je neoptimizirana stranica 73% teža od stranice Mobile First. Na ovaj način možemo uštedjeti 186,94 KB, što korisniku možda neće trebati prilikom pregleda vaše stranice.

    Zaključak Na ovaj način se oslobađamo opterećenja velika količina sekundarne resurse, ali koji će biti dostupni na zahtjev korisnika.

    Ovaj članak pokriva samo jedan primjer učitavanja. dodatne informacije. Kompletan primjer može se vidjeti na web stranici frameworka.

    Datum objave: 29.03.2013

    Napomena autora: Ranije ove godine bio sam u početnim fazama redizajna web stranice naše kompanije. Već smo planirali da zauzmemo pristup direktnog web dizajna, što je poželjno rješenje za podršku više uređaja. Nakon što sam naučio iz iskrenih diskusija na An Event Apart u Bostonu o ograničenjima i izazovima responzivnog web dizajna, shvatio sam da je našem rješenju potrebno malo prilagođavanja.

    Srećom, projekat koji je pred nama bio je savršena prilika da eksperimentišemo i izazovemo sebe da poboljšamo svoj prilagodljivi radni tok. U ovom članku ću detaljno opisati korake koje smo poduzeli, uključujući neke promjene na putu, dok smo radili na izgradnji bolje responzivne web stranice.

    Postavljanje ciljeva

    Prvi korak koji smo poduzeli u našem projektu bio je da napravimo listu prednosti i prepreka našem adaptivnom pristupu. Naša lista je izgledala ovako:

    PREDNOSTI

    1. Izrada, podrška i promocija jedne web stranice.

    2. Podržava mnoge veličine ekrana, a ne samo izuzetno velike monitore desktop računare i male prijenosne uređaje.

    3. Otporan na budućnost jer će se izgled mijenjati ovisno o veličini ekrana, a ne samo o veličini današnjih popularnih uređaja.

    PREPREKE

    1. Sadržaj namijenjen samo uređajima s velikim ekranom često se prenosi na male ekrane i jednostavno se „isecuje“ pomoću CSS medijskih upita, stvarajući nepotrebna preuzimanja.

    2. Zbog rasporeda "bez veličine", nismo u mogućnosti promijeniti originalni redoslijed takvog izgleda (ili potpuno eliminirati nevažne elemente iz njega) ovisno o uređaju ili veličini ekrana.

    Vjerovatno ćete primijetiti da su nedostaci adaptivnog pristupa koje smo identifikovali ona područja u kojima je samo mobilno rješenje problema najbolje. Za našu novu web stranicu željeli smo najbolje iz oba svijeta – prednosti koje mogu ponuditi responzivni pristup i namjensko mobilno rješenje.

    Počevši od sadržaja

    Jedna od uobičajenih razlika između responzivnog i dizajna specifičnog za mobilne uređaje ili dizajna samo za mobilne uređaje je sadržaj ili svojstva koja se prosljeđuju pregledniku. Namjenska mobilna web stranica često odražava samo podskup sadržaja koji se nalazi na „normalnoj“ verziji web stranice. Ovo je jedna od tekućih debata između ova dva pristupa, pri čemu zagovornici web stranica samo za mobilne uređaje često tvrde da mobilni korisnici žele pristupiti samo sadržaju koji im je „važan“.

    Problem s ovim načinom razmišljanja je da se ono što je „važno“ za korisnika – bilo koji korisnik – mijenja ovisno o situaciji. Ograničavanje pristupa sadržaju samo zbog uređaja koji koristite je siguran način da naljutite i razočarate one koji se ne uklapaju u idealan scenarij koji ste zamislili kada ste odlučivali što ćete zadržati, a što ukloniti sa svoje mobilne web stranice.

    Oduvijek smo vjerovali da svi korisnici trebaju imati pristup svom sadržaju koji web stranica može ponuditi, ali smo željeli biti sigurni da je to zaista ispravno za našu web stranicu i naše korisnike. Kako bismo odredili pravi pristup, obratili smo se našim analitičarima i nismo našli nikakvu uočljivu razliku između vrste sadržaja koji traže mobilni gosti i posjetitelja s nemobilnih uređaja. Sadržaj koji je bio popularan među korisnicima desktopa bio je jednako popularan i među posjetiteljima s mobilnih uređaja.

    Osim toga, sjeli smo i razgovarali s nekim od naših trenutnih klijenata, koji predstavljaju većinu publike naše web stranice, i postavili im nekoliko pitanja, uključujući: „Za koji sadržaj dolazite na našu web stranicu kada ste na svom desktopu ?" i: "Šta je sa tabletom ili telefonom?" Intervjui su, naravno, bili detaljniji, ali već vidite šta nas je zanimalo. Još jednom se pokazalo da je traženi sadržaj isti bez obzira na uređaj koji se koristi.

    Podaci diktiraju pravac

    Činjenice koje smo otkrili tokom našeg istraživanja ojačale su naše uvjerenje da je responsivan pristup, koji osigurava pristup istom sadržaju na bilo kojem uređaju, pravi izbor za našu web stranicu. Ovo istraživanje nam je također omogućilo da utvrdimo kojem sadržaju na našoj web stranici se uopće nije pristupalo. Kada smo pronašli stranice koje naša publika nije koristila, izrezali smo ih iz mape sajta. Isto je učinjeno s najmanje popularnim sadržajem u hijerarhiji sadržaja i našim planovima redizajna.

    Započevši dizajn gledanjem sadržaja i prikupljanjem podataka o tome šta je bilo važno našoj publici, a šta nije, uspjeli smo prijeći u fazu dizajna sa dobrim planom za sadržaj koji naš dizajn web stranice treba da podrži.

    Kreiranje dizajna ekstremnih tačaka

    Čuo sam argumente za dizajn u pretraživaču i cijenim prednosti koje ovaj pristup pruža. Nakon što sam u nekoliko navrata pokušao dizajnirati u pretraživaču, otkrio sam da je moj vlastiti tok dizajna najlakši i najpogodniji za početak u Photoshopu. Nikako ne vjerujem da je ovo prava odluka za sve, ali za mene je to istina i tako sam započeo ovaj projekat.

    Za responzivni dizajn koristim metodu koju nazivam „dizajn rubova“. Počinjem kreiranjem desktop verzije web stranice. U njemu razrađujem tipografski izgled dizajnerskih tekstova, stil i cjelokupni vizualni pravac – kao i izgled širokog ekrana web stranice. Kada sam zadovoljan tom verzijom web stranice, radim na verziji za mali ekran ili "mobilnu" verziju, uzimajući isti vizualni smjer, ali prilagođavajući izgled manjem ekranu. Do kraja ovog procesa, već imam vizualne primjere dva vrlo različita izgleda web stranice - verzije ovog projekta za najveći i najmanji ekran. Ova dva primjera će biti moj vodič pri razvoju prednjeg dijela web stranice.

    Mobile First

    Pristup adaptivnom dizajnu nije nova ideja. Ova tehnika, u kojoj prvo izgradite mobilni izgled web stranice, a zatim koristite medijske upite da biste se uklopili i dodali tom izgledu kako se veličina ekrana povećava, već se neko vrijeme razmatra. najbolja praksa u responsive web dizajnu. Pristup nije nov, i dalje je vrlo bitan, a u kombinaciji s našim planom „počni sa sadržajem“ pomogao nam je da energiju usmjerimo na jedan od nedostataka uočenih u adaptivnim projektima – problem komuniciranja nevažnog sadržaja.

    Počevši od sadržaja, pobrinuli smo se da sav sadržaj na našoj web stranici bude relevantan i prikladan za sve korisnike, mobilne i druge. To je značilo da nismo morali da brinemo o prosljeđivanju puno sadržaja u označavanju, već smo ga samo morali vizualno sakriti pomoću koristeći CSS. Pristup na prvom mjestu na mobilnim uređajima značio je da će se ove slike dijeliti samo s uređajima za koje su namijenjene. Na primjer, naš novi dizajn zahtijevao je pozadinsku grafiku s teksturom akvarela.

    Slika, prilično velika, trebala je postati dio dizajna samo na velikim ekranima (od 660 px i više). Budući da naš CSS počinje s mobilnim dizajnom, ove velike grafike nikada se ne šalju na uređaje s malim ekranom jer medijski upit koji učitava ovu sliku pokreću samo veliki ekrani. Medijski upit koji primjenjuje pozadinu na html element, izgleda ovako:

    @media samo ekran i (min-width: 660px) ( html (pozadina: url(/images/bg-watercolor.jpg) bez ponavljanja fiksni centar vrh; ) )

    @medijski samo ekran i (min - širina: 660px) (

    html (

    pozadina: url (/images/bg - akvarel. jpg) ne - ponavljanje fiksno središte vrha;

    Pored korišćenja ovog pozadinska slika Medijski upit koji radi na 660px također uvodi niz drugih promjena u izgled web stranice, prelazeći od onoga što se smatra izgledom na malom ekranu do onoga što će postati razne verzije za široki ekran.

    Kreiranje za dizajn, a ne za uređaje

    Kada smo počeli da koristimo responzivni dizajn u našim web projektima, fokusirali smo se na poznate uređaje i veličine ekrana, a naši medijski upiti su ih često odražavali (iPhone, iPad - i portret i pejzaž - laptopovi, desktop računari sa širokim ekranom, itd. .d.). Vremenom se pokazalo da ovo nije najbolji pristup jer se bavi samo onim uređajima i veličinama ekrana koji su danas popularni, a ne onima koji bi se mogli pojaviti u budućnosti. Jedna od moćnih prednosti responzivnog web dizajna je njegova priroda koja je okrenuta budućnosti. Stoga, da se ovo u potpunosti implementira snage udaljili smo se od izgradnje za uređaje umjesto da dozvolimo dizajnu da diktira kontrolne tačke medijski upiti.

    Metoda na prvom mjestu na mobilnim uređajima postavila je CSS bazu naše web stranice. Sa tim na mjestu, pokrenuli smo web stranicu u pretraživaču i skalirali je na najmanju veličinu našeg izgleda (postavili smo CSS na minimalnu širinu od 320px). Postepeno se povećavala veličina prozora pretraživača da bi se videlo kako je oznaka reagovala. Kako je prozor postajao sve veći, primijetili smo da se oznake počele deformirati. U tim trenucima smo morali postaviti nove medijske upite da bismo prilagodili oznaku.

    Da bismo razumjeli ovu metodu, kreirali smo grafiku i postavili je kao pozadinu radne površine. Vertikalne linije su pokazivale širinu od 320 px (naša najmanja veličina), zatim su bile razmaknute na svakih stotinu piksela počevši od 400, i korištene kao vodiči dok je prozor preglednika skaliran kako bi se odredilo gdje dizajn počinje da se kvari, a zatim smo koristili ove približne vrijednosti piksela u konačnim medijskim upitima, koji su dodati u CSS.

    Pristup dodavanja medijskih upita zasnovan na zahtjevima dizajna, a ne na poznatim veličinama uređaja omogućava web stranici da bolje odgovori na širok raspon veličina ekrana. Međutim, rezultat je da ispunjava CSS datoteku s više medijskih upita nego da ste primijenili prelomne tačke specifične za uređaj. Pa ipak, dok je broj medijskih upita veći, sami upiti obično su vrlo mali, budući da se na svakom od njih vrši vrlo malo promjena umjesto da se stvaraju drastične promjene koje bi uobičajeno zahtijevali medijski upiti zasnovani na uređaju.

    Jedno područje naše web stranice gdje je očito povećan broj medijskih upita je navigacija.

    Prilagodljiva navigacija

    Navigacija je jedan od najtežih aspekata responzivnog dizajna. Naša web stranica u suštini ima četiri glavna područja za navigaciju.

    1. Glavna navigacija;

    2. Ono što zovemo „pomoćna navigacija“, koja povezuje različite portale i usluge koje koriste naši korisnici;

    3. Navigacija u podnožju;

    4. Navigacija po pojedinim sekcijama, koja je predstavljena na podstranicama web stranice (za izgled velikog ekrana) u lijevoj koloni.

    Budući da je naš CSS prvenstveno mobilni, jedna od prvih briga je bila postavljanje navigacije za izgled malog ekrana. To znači isključivanje prikaza svih navigacijskih dijelova osim glavne navigacije.

    #helpNav, .subNav, navigacija u podnožju (prikaz: nema; )

    #helpNav, .subNav, footer nav (

    prikaz: nema;

    Nadalje, već sam spomenuo da nam nije cilj isporučiti sadržaj na uređaje, već ga tek onda „isključiti“. Zapravo, to je bio cilj, ali u našoj navigaciji morali smo se pomiriti s tim kako to učiniti. Nismo uspjeli pronaći drugo, jednostavno ali podržano rješenje. Srećom, čini se da je sadržaj koji isporučujemo i ne prikazujemo samo nekoliko oglasa, tako da je njegov utjecaj na preuzimanja posjetitelja minimalan.

    Pomoćna navigacija je jedino područje web stranice za koje smo utvrdili da nije relevantno za većinu korisnika jer su ovi linkovi i portali bili namijenjeni samo desktop korisnicima. Ovo je snažna pretpostavka i hrabra izjava. Glavni razlog za to su bili sami portali, koji su bili aplikacije trećih strana izvan naše kontrole, a nisu optimizirani za mobilne uređaje sa malim ekranom, a usluge koje su nudili bile su prilagođene za podršku korporativni klijenti sa velikim desktop ekranima.

    Ova situacija nas je inspirisala da odlučimo da uklonimo ovaj odjeljak iz verzije za male ekrane, a tokom mjeseci koliko je stranica aktivna, nismo dobili nikakve komentare ili pritužbe od naših korisnička baza. Što se tiče druga dva područja navigacije, odjeljka za navigaciju podstranicom i odjeljka podnožja, ovaj sadržaj je predstavljen kao dio glavne navigacije na uređajima s malim ekranom. Zbog toga po defaultu isključujemo ova tri područja.

    Kasnije, kako se veličina ekrana povećava i prelazimo tačku od 660px na kojoj dizajn šireg ekrana počinje da se prikazuje, daćemo ovim oblastima navigacije stilove koji su im potrebni.

    Evo CSS-a za našu sekundarnu navigaciju:

    #helpNav ( prikaz: blok; pozicija: apsolutna; vrh: 1px; desno: 0px; širina: 100%; text-align: desno; ) #helpNav ul ( padding-left: 10px; ) #helpNav li ( display: inline; padding-right: 6px-levo: 6px background-color: #2f6a98 ) #helpNav a (font-size: 12px; padding: 0 6px; color: #FFF; border-radius: 20px; ) #helpNav; :hover (boja pozadine: #f66606; )

    #helpNav (

    displej: blok;

    pozicija: apsolutna;

    vrh: 1px;

    desno: 0px;

    širina: 100%;

    tekst - poravnaj: desno;

    #helpNavul (

    padding - lijevo : 10px ;

    #helpNavli (

    display: inline;

    padding - desno : 6px ;

    padding - lijevo : 6px ;

    pozadina - boja : #2f6a98;

    #helpNav a (

    veličina fonta: 12px;

    padding: 0 6px;

    boja : #FFF;

    granica - radijus : 20px ;

    #helpNav a:hover (

    I područja navigacije podstranicom:

    SubNav ( display: block; širina: 25%; float: lijevo; ) .subNav h4 ( padding-bottom: 8px ) .subNav ul (list-style: disc; color: #c65204; padding: 0 0 20px 20px; ) . subNav li ( padding-bottom: 14px; ) .subNav a ( boja: #186483; veličina fonta: 21px; porodica fontova: "RokkittRegular", Times, "Times New Roman", serif; visina linije: 1; )

    SubNav(

    displej: blok;

    širina: 25%;

    float: lijevo;

    SubNav h4 (

    padding - bottom : 8px

    SubNavul(

    lista - stil: disk;

    boja : #c65204;

    padding: 0 0 20px 20px;

    SubNavli (

    padding - bottom : 14px ;

    SubNav a (

    boja : #186483;

    veličina fonta: 21px;

    visina linije: 1;

    Konačno, navigacija u podnožju:

    navigacija podnožja (prikaz: blok; margin-top: 40px; ) navigacija podnožja (stil liste: nema;) navigacija podnožja li ( padding-bottom: 24px; širina: 19%; padding: 0 5% 20px 0; float: lijevo ) .innerNav li ( širina: 100%; float: nema; padding-bottom: 4px; ) podnožje nav a ( boja: #575454; veličina fonta: 12px; ) .innerNav a (težina fonta: normalna; )

    footer nav (

    displej: blok;

    margina - vrh : 40px ;

    footer nav ul (

    lista - stil: nijedan;

    footer navli (

    padding - bottom : 24px ;

    širina: 19%;

    padding: 0 5% 20px 0;

    float: lijevo;

    InnerNavli(

    širina: 100%;

    float: nema;

    padding - bottom : 4px ;

    footer nav a (

    boja : #575454;

    veličina fonta: 12px;

    InnerNav a (

    font-weight: normalan;
    Pikseli ili ems

    Primijetit ćete da smo koristili vrijednosti piksela za naše medijske upite. Korištenje piksel medijskih upita je mjesto gdje smo, kao i drugi front-end programeri, počeli raditi responzivni dizajn i usvojili ovu praksu kao dio našeg toka posla. Međutim, u duhu “izgradnje bolje responzivne web stranice”, istaći ću članak o dimenzionalnim medijskim upitima koristeći ems na koji smo skrenuli pažnju prilikom uređivanja ovog odjeljka. U suštini, poboljšati izgled kada povećavate zumiranje, preporučljivo je pretvoriti px medijske upite u em medijske upite dijeljenjem svih vrijednosti piksela veličinom fonta.

    Ovaj sjajan članak nas je inspirirao da ponovno razmislimo o medijskim upitima zasnovanim na pikselima, i to je još jedan primjer kako smo nastavili da usavršavamo responsive pristup. Iako nismo koristili em u našim medijskim upitima u ovom konkretnom projektu, trenutno eksperimentišemo s njima i pristup je vrijedan spomena ovdje.

    Glavna navigacija

    Naša glavna navigacija je predstavljena na širokim ekranima kao horizontalni red preko vrha rasporeda. Na malim ekranima, struktura glavne navigacije se mijenja tako da postoji veliko dugme Meni na vrhu svake stranice koje povezuje sa navigacijom na dnu stranice. Da bismo to postigli, dodali smo vezu sa ID-om menuLink i klasom oftabButtonr u zaglavlje, što je skoro početak markupa. Zatim smo postavili dio s ID mainNav na sam kraj označavanja. Unutar ovog odeljka nalazi se naša glavna navigacija, koja je jednostavno neuređena lista sa nekoliko drugih neuređenih lista za meni sekcije podstranica. Imamo i sidro sa ID-om toTop, koji služi kao link do vrha stranice.

    U nastavku principa mobilnog prije svega, stilizirali smo vezu menija na vrhu izgleda malog ekrana kako bi izgledala kao dugme.

    #menuLink a ( float: desno; margina: -56px 8px 0 0; ) .tabButton a ( boja: #FFF; porodica fontova: "RokkittRegular", Times, "Times New Roman", serif; veličina fonta: 20px; background-color: #45829b padding: 10px 12px radijus: 10px .tabButton a:pozadinska boja: #f66606;

    #menuLink a (

    float: desno;

    margina : - 56px 8px 0 0 ;

    TabButton a (

    boja : #FFF;

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

    veličina fonta: 20px;

    boja pozadine : #45829b;

    padding: 10px 12px;

    granica - radijus : 10px ;

    TabButton a : lebdjeti (

    pozadina - boja : #f66606;

    Naš glavni navigacijski meni je postavljen na prikaz na malom ekranu:

    #mainNav ( margin-top: 30px; širina: 100%; ) #mainNav #toTop a ( float: desno; margina: 0 8px 0 0; font-size: 20px; ) #mainNav nav ( padding-top: 80px; ) #mainNav ul (list-style: none; ) #mainNav li (pozadina: #45829b; border-bottom: 1px solid #abc7d2; padding: 4px 10px 4px 15px; ) #mainNav li:hover ( background-color: #f66606; ) #mainNav a (veličina fonta: 24px; boja: #FFF; porodica fontova: "RokkittRegular", Times, "Times New Roman", serif; )

    #mainNav (

    margina - vrh : 30px ;

    širina: 100%;

    #mainNav #toTop a (

    float: desno;

    margina : 0 8px 0 0 ;

    veličina fonta: 20px;

    #mainNav nav (

    padding - top : 80px ;

    #mainNavul (

    lista - stil: nijedan;

    #mainNavli (

    pozadina : #45829b;

    granica - dno : 1px solid #abc7d2;

    padding: 4px 10px 4px 15px;

    #mainNav li:hover (

    pozadina - boja : #f66606;

    #mainNav a (

    veličina fonta: 24px;

    boja : #FFF;

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

    Naši podmeniji, koji nisu prikazani u svom originalnom položaju, sada se mogu prikazati kako to stranica traži. Svaki od ovih podmenija ima jedinstveni ID, kao što je servicesTab, a svaki odjeljak web stranice ima klasu primijenjenu na oznaku tijela. Klasa odjeljka “Company” je companyPage. Koristimo ovu klasu za stiliziranje cijelog dijela web stranice. Da bismo omogućili podmeni koristimo klasu sekcija podmenija prema potrebi kada je sekcija aktivirana.

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

    CompanyPage #companyTab ul,

    Stranica vijesti #newsTab ul,

    ContactPage #contactTab ul,

    ServicesPage #servicesTab ul (

    displej: blok;

    Mi se povećavamo

    Kako se pojavljuju veći izgledi ekrana - opet s medijskim upitima od 660px i više - dramatično mijenjamo izgled glavne navigacije. Prvo, onemogućimo prikaz dugmadi menuLink i toTop, jer više nisu potrebni:

    #menuLink a, #toTop a (prikaz: nema; )

    #menuLink a, #to Top a (

    prikaz: nema;

    #mainNav ( pozicija: apsolutna; vrh: 92px; margina: 18px 2% 0 2%; širina: 96%; text-align: centar; ) #mainNav nav ( padding: 5px 0; border-top: 1px solid #bacfd7; border-bottom: 1px solid #bacfd7 ) #mainNav li (pozadina: nema; display: inline; border-bottom: 0; border-right: 1px solid #bebebe; padding: 0 6px 0 8px; margin: 4px 0; ) #mainNav a (font-size: 16px; boja: #45829b; ) #mainNav a:hover ( boja: #f66606; )

    #mainNav (

    pozicija: apsolutna;

    vrh: 92px;

    margina: 18px 2% 0 2%;

    širina: 96%;

    tekst - poravnaj : centar ;

    }

    #mainNav nav (

    padding: 5px 0;

    granica - vrh : 1px čvrsta #bacfd7;

    granica - dno : 1px čvrsta #bacfd7;

    }

    #mainNavli (

    pozadina: nema;

    display: inline;

    obrub - dno : 0 ;

    veličina: 16px;

    boja : #45829b;

    }

    #mainNav a:hover (

    boja : #f66606;

    }

    Ovi stilovi postavljaju izgled glavne navigacije. Ali da bismo ga uklopili u dizajn umjesto u uređaj, morat ćemo napraviti mala podešavanja kako se veličina ekrana povećava. Ukupno, naš glavni navigacijski font ima osam različitih veličina rasporeda na širokom ekranu, koje se mijenjaju kako se ekran širi i radni prostor povećava. Smišljanje kako najbolje prikazati ovu navigaciju na način koji je čini lakom za korištenje i vizualno privlačnom bila je jedna od prepreka s kojima smo se suočili kada smo radili sa responzivnim dizajnom.

    Pratimo ovaj obrazac nekoliko puta, konačno povećavajući veličinu fonta na 27px kada web stranica dostigne svoj cilj. najveća veličina. Na ovaj način, navigacija web stranice odgovara dizajnu i ekranu koji se koristi za prikaz na najbolji mogući način.

    Dobivanje pomoći od CMS-a

    Naš preferirani CMS je ExpressionEngine, a specifičnosti sljedećeg odjeljka članka su specifične za tu platformu, ali osnovna ideja onoga što smo postigli ExpressionEngine-om svakako se može primijeniti na druge popularne CMS platforme.

    Jedna od najvećih prepreka adaptivnom pristupu je to što ne možete pružiti različite oznake ili različit izvorni kod u razni uređaji. Ovo je prepreka koju smo željeli savladati uz pomoć našeg CMS-a. Eksperimentirajući i istražujući, naišli smo na članak pod nazivom Stvarno se prilagođavamo ExpressionEngineu. Koristeći metodologiju detaljno opisanu u ovom članku, uspjeli smo upotrijebiti skriptu za otkrivanje uređaja za postavljanje varijable na mobilnom ili desktop sistemu. Tada smo bili u mogućnosti da učitamo oznake na našu web lokaciju na osnovu koje smo od ovih varijabli naišli.

    Kretanjem naprijed i primjenom detekcije uređaja, uspjeli smo napraviti i druge vrlo male promjene kako bismo dodatno poboljšali mobilno iskustvo. Za nas je to bilo poput progresivnog poboljšanja, gdje smo izgradili kvalitetno rješenje, a zatim pokušali da ga poguramo naprijed kako bismo pružili malo optimizirano iskustvo. Obavezno pročitajte slično mišljenje Chrisa Coyier-a o kombiniranju RWD i mobilnih šablona, ​​gdje on raspravlja o miješanju i usklađivanju različitih tehnika u svojoj mobilnoj strategiji.

    Počnimo sa malim

    Naravno, možete koristiti ove varijable da isporučite potpuno različite oznake i izvorni kod na različite uređaje, ali naš početni pristup je bio malo manje ekstreman. Budući da je već odlučeno da će bilo koja verzija naše web stranice imati pristup svim sadržajima, u početku smo se prijavili ovu metodu varijable da malo reguliraju količinu isporučenog sadržaja. Na primjer, na početnoj stranici naše web stranice prikazujemo teasere velikog broja sadržaja koji se nalaze na web stranici. U odjeljcima “Kultura” i “Projekat u središtu pažnje” svaki post prati slika.

    Slike su lijep dodatak, ali definitivno nisu presudne, zbog čega ove slike uopće ne prikazujemo našim mobilnim korisnicima. Opet, ne mislim da koristimo CSS da ih onemogućimo, koji će ionako učitati podatke u pretraživač; umjesto toga, koristimo set varijable da isključimo slike iz markupa ako ih ne treba prikazati.

    Sintaksa je prilično jednostavna. Nakon što postavite varijable - i gornji članak objašnjava kako je to lako učiniti dodavanjem sistemski fajl config.php je mala skripta - ove varijable možete koristiti kao if naredbu.

    img src = "(teaser-image)" alt = "(naslov)" / > { / if } { if global : site_version == "mobile" } { title } { / if } !}

    Ovo je sintaksa ExpressionEngine-a, ali možete je pročitati i lako vidjeti što se događa. Ako se naiđe na punu varijablu, isporučujemo teaser-sliku iz unosa članka u bazu podataka. Ako se umjesto toga naiđe na varijablu mobile, tada dostavljamo naslov naslova članka.

    Isti pristup se primjenjuje na odjeljke “Vijesti” i “Blog” na početnoj stranici, isporučujući tri kratka najavljivanja ako se naiđe na punu varijablu i samo jedan ako je mobilni. Sintaksa izgleda ovako:( exp : kanal : unosi kanal = "vijesti" ( ako je globalno : site_version == "puna" ) limit = "3" ( / if ) ( ako je globalno : site_version == "mobilno" ) limit = " 1" ( / ako ) )

    Ovdje možete vidjeti da pristupamo ExpressionEngine kanalu koji se zove vijesti. Koristimo našu varijablu da odredimo koliko će trenutnih elemenata biti prikazano sa ovog kanala koristeći limit parametar.

    Hajdemo korak dalje

    U odjeljku Kultura na web stranici objavljujemo članke koji su često popraćeni mnogim slikama. Za razliku od teaser slika na početnoj stranici web stranice, slike u samim člancima su od vitalnog značaja za ovaj sadržaj jer pomažu u održavanju ili poboljšanju naglaska članka. Iako su ove slike važne, one su i prilično velike - svaka široka 650 piksela, a većina članaka uključuje najmanje tri slike, ponekad i do deset. Budući da će mobilni uređaji prikazivati ​​slike otprilike upola njihove originalne veličine, učitavanje slika u punoj veličini postat će vrlo važno. Da bismo se pozabavili ovim, pogledajmo ponovo definiciju uređaja i varijable.

    Za svaki članak kreiramo dva skupa slika: jednu punu veličinu širine 650 piksela, a drugu skoro upola te veličine. Zatim koristimo varijable u našem članku (ali prvo treba da omogućimo ExpressionEngine kod u našem predlošku stranice) i dodamo oznake za oba skupa slika - ali samo jedna od njih se isporučuje u pretraživač. Mobilni uređaji primaju male slike, dok svi ostali primaju slike u punoj veličini.
    Isti pristup se odnosi i na veliku reklamnu površinu na početnoj stranici. Ovi rotirajući baneri i slike reklamiraju važne stvari kao što su predstojeći događaji, nove usluge, najave bolje od ostatka početne stranice. Bilbord je još jedan ugodan element u svakom pogledu, koji je namijenjen samo za veliki displeji. Ponovo koristimo varijable da isporučimo glavni odjeljak bilborda, kao i JavaScript koji ga pokreće, na odgovarajući uređaj - što nam omogućava da efikasno šaljemo različite oznake na različitih uređaja i eliminisanje još jedne prepreke koju smo identifikovali na početku projekta.

    Koristeći mobilni pristup i naš CMS, u mogućnosti smo isporučiti naše početna stranica korisnicima desktop računara na 738,3 KB i značajno ga smanjuje na samo 174,4 KB za mobilne korisnike.

    Alternativni planovi

    Jedno od pitanja koje me je oduvijek mučilo u vezi sa pristupom samo mobilnim uređajima i otkrivanjem uređaja je: „Šta se događa ako detekcija ne uspije? Da li se “normalna” verzija web stranice isporučuje na mobilni uređaj, čime se poništava vaš pažljivo izrađen mobilni dizajn? Ova karakteristika je jedan od glavnih razloga zašto sam izbjegavao rješenje samo za mobilne uređaje korišteno u prošlosti za detekciju uređaja.

    Koristimo detekciju uređaja za naš prilagodljivi radni tok i to nas je naoružalo odličnim alternativama u slučaju da detekcija uređaja iz nekog razloga ne radi. Budući da koristimo adaptivni pristup, čak i ako mobilni pretraživač puna verzija će biti isporučena, oznake će odgovarati ovom uređaju jer će naš CSS odgovarati tome.

    Osim toga, budući da je sve prvenstveno mobilno, elementi koji nisu namijenjeni malim ekranima, poput gore spomenute ogromne pozadinske grafike, uopće se ne odražavaju. Jedina stvar koja će nas iznevjeriti je ono što smo uradili s našim varijablama generiranim da definiramo uređaj. Ako se dogodi najgori scenario i otkrivanje uređaja ne uspije mobilna verzija dobiće samo nekoliko dodatnih slika, ili neke oznake, ili neki JavaScript. Ukupan utisak će i dalje odgovarati mobilnom uređaju. Nije loše za „najgori scenario“.

    Napredak, nije idealno

    Prije nekoliko godina, jedan klijent mi je rekao nešto čega se i dan-danas sjećam. Govoreći o svojoj web stranici rekao je:

    « Ne brinite o tome da moju web stranicu učinite savršenom. Samo radi na poboljšanju. Njegovo kontinuirano poboljšanje bit će pomak u pravom smjeru».

    Ova ideja me je inspirisala godinama i podsećala me da ne odbacujem najbolje samo zato što nije savršeno.

    Znam to ovu odluku– nije savršeno, i to je u redu jer je to poboljšanje našeg prethodnog adaptivnog toka rada. To nam je pomoglo da prevaziđemo neke od prepreka koje smo identifikovali, a sada možemo da unesemo ta poboljšanja u projekte na kojima radimo. Da, još uvijek postoje mnoge složenosti na koje još ne možemo djelotvorno utjecati, kao što je isporuka visokokvalitetnih slika na HD ekrane, kao i korištenje medijskih upita zasnovanih na em, o čemu smo ranije pisali, ali u vezi sa ovim i drugim projektima mi smo kreću se u pravom smjeru.

    Ko zna... Možda će neko jednog dana napraviti “savršenu web stranicu”. Trenutno smo fokusirani na napredak, a ne na savršenstvo, praveći mala poboljšanja na tom putu, radeći na izgradnji responzivnije web stranice.

    sta ti mislis

    Kako pravite responzivne web stranice? Koristite li definiciju karakteristike ili definiciju uređaja? Kada biste preporučili korištenje jednog ili drugog? Čekamo vaše komentare!

    Prilagodljivi izgled web stranice omogućava da se web stranice automatski prilagode ekranima tableta i pametnih telefona. Promet mobilnog interneta raste svake godine, a da biste efikasno obrađivali ovaj promet, potrebno je korisnicima ponuditi responsive web stranice sa korisničkim sučeljem.

    Pretraživači koriste brojne kriterije za procjenu odziva web lokacije kada se gleda na mobilnim uređajima. Google pokušava da pojednostavi korištenje interneta za vlasnike pametnih telefona i tableta označavajući stranice prilagođene mobilnim uređajima posebnom oznakom mobile friendly u rezultatima pretraživanja na mobilnim uređajima. Yandex također ima algoritam koji daje prednost stranicama s mobilnom/responzivnom verzijom za korisnike u mobilnoj pretrazi.

    Prikaz stranice na mobilnim uređajima možete provjeriti na servisima i.


    Rice. 1. Rezultati mobilnog pretraživanja od Yandexa i Googlea s napomenom o prilagođenosti stranice mobilnim uređajima Šta je prilagodljivi izgled?

    Prilagodljivi izgled pretpostavlja odsustvo horizontalne trake za pomicanje i skalabilnih područja kada se gleda na bilo kojem uređaju, čitljiv tekst i velika područja za elemente na koje se može kliknuti. Koristeći medijske upite, možete kontrolirati izgled i postavljanje blokova na stranici, preuređujući predložak tako da se prilagođava različitim veličinama ekrana uređaja.

    U članku su date osnovne tehnike za izradu responzivne web stranice. Za responzivni dizajn, širina glavnog kontejnera web mjesta je postavljena u % i može biti jednaka 100% širine prozora pretraživača ili manje. Širina kolona mreže je također navedena u %. U responzivnom dizajnu, širina glavnog kontejnera i stupaca mreže je fiksirana pomoću px vrijednosti.

    Tehnika adaptivnog fluidnog rasporeda o kojoj se govori u ovoj lekciji savršeno će raditi na predlošku s dvije kolone, čineći stranicu prilagodljivom i pogodnom za gledanje na mobilnim uređajima. Predložak pretpostavlja drugačiji izgled glavnog sadržaja stranica u ovoj lekciji će se raspravljati o izgledu glavne stranice.

    Izgled početne stranice

    Stranica se sastoji od tri glavna bloka: zaglavlja (header), kontejnera omotača za glavni sadržaj i bočnu traku i podnožja (footer). Uzmimo 768px i 480px kao prekretnice dizajna.

    U prvoj tački ćemo sakriti gornji meni i pomeriti bočnu traku ispod kontejnera sa objavama. U drugoj tački ćemo promijeniti lokaciju elemenata zaglavlja i poništiti pozicioniranje dugmadi društvene mreže u objavama i otkažite prelamanje kolona podnožja stranice.


    Rice. 2. Primjer prilagodljivog izgleda 1. Meta tagovi i odjeljak

    1) Dodajte u sekciju potrebne datoteke— link ka korišćenim fontovima, jQuery biblioteci, kao i dodatku bez prefiksa (kako ne bi pisali prefikse pretraživača za svojstva):

    Prilagodljivi izgled web stranice

    2. Zaglavlje stranice

    Sljedeće elemente kontejnera ćemo postaviti u zaglavlje stranice:
    logo

    Izbor urednika

    © 2024 ermake.ru -- O popravci računara - Informativni portal