Először mobil. A Mobile First-től a Mobile Native-ig: amit fontos megjegyezni azoknak a fejlesztőknek, akik csak az okostelefonokra koncentrálnak. Metacímkék és szakasz

Az Android készülékek 2013-as elterjedtségét tekintve nyilvánvalóvá válik, hogy ma már több ezer különféle eszközünk van, amelyek különböző méretű képernyőkkel rendelkeznek a hálózathoz való hozzáféréssel. Lehetetlen mindegyikhez külön weboldal elrendezést készíteni. Ezért ma rugalmasabb tervezési megközelítésre van szükség.

Ha azt szeretnénk, hogy weboldalunk minden eszközön könnyen használható legyen, függetlenül a felhasználói viselkedéstől, tájolástól vagy képernyőfelbontástól, akkor gondoljunk a reszponzív dizájn megvalósítására projektjeinkben.

Első mobil megközelítés

A „mobile first” kifejezés az utóbbi időben igen népszerű. Ez azt jelenti, hogy először egy elrendezést kell létrehoznia egy mobiltelefon számára, de nagy felbontású képernyőkre optimalizálva. Így az Ön mobiltelefon-elrendezése mindenek felett áll, és nincs szükség különálló elrendezésekre. Ez ennyire egyszerű!

A rugalmas, de egyszerű elrendezések natív használatával jobb támogatást nyújthat számos olyan nagy és kicsi böngésző számára, amelyek nem képesek teljesen érzékeny elrendezéseket megjeleníteni. Ha tehát az elrendezésekről van szó, a „Mobil először” kifejezés valójában „progresszív fejlesztéseket” jelent.
- Ethan Marcotte

Min. szélesség Médialekérdezések

Csak akkor vezessen be konkrét szabályokat az elrendezésekre, ha valóban szüksége van rájuk. Használja az ingatlant min-szélesség réteges elrendezés létrehozásához, amely átfogja a nézetablak teljes szélességét. Könnyebb az összes médialekérdezést egyben tartani, mint egy stíluslap végén vagy külön kódrészletben szétszórva.

/* Kis képernyők (alapértelmezett) */ html ( font-size; 100%; ) /* Közepes képernyők (640 képpont) */ @media (min-width: 40 rem) ( html ( font-size: 112%; ) ) / * Nagy képernyők (1024 képpont) */ @media (min. szélesség: 64 rem) ( html ( betűméret: 120%; ) )

1. Nem minden böngésző egyforma

A különböző böngészők eltérően jelenítik meg a CSS-kódot. Ennek elkerülése érdekében célszerű speciális szkripteket használni az értékek egyetlen nézetbe történő visszaállításához, például a Normalize.css-hez, amely lehetővé teszi az elemek szinte azonos megjelenítését bármely böngészőben. Ezt tartsa szem előtt, mielőtt létrehozza saját stílusfájlját.

2. Hozzáadás Viewport Meta Tag

Helyezze egy blokkba a HTML-jét. Lehetővé teszi a médialekérdezéseket különböző eszközök elrendezésében.

CSS Box modell

Ez fontos az alapok megértéséhez, csakúgy, mint az elemek generálása és viselkedése a böngészőben, mielőtt megtanulná az adaptív tervezést. A CSS dobozmodell négy különböző részből áll.

Tisztítható terület a tartalom körül.

Keret
Keret a párnázás körül.

A tisztítandó terület a keret körül van.

3. Használja doboz-méretezés: border-box

Írja ezt a kódot a CSS-fájl elejére. * - kijelöli az összes elemet az oldalon.

*, *:before, *:after ( -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; )

A választás a tiéd .clearfix:before, .clearfix:after ( tartalom: " "; kijelző: táblázat; ) .clearfix:after ( törlés: mindkettő; ) .clearfix ( *zoom: 1; )

Áramlás Ellenkező

Adjon hozzá egy osztályt .áramlás-ellentéte azokra az oszlopokra, amelyeket először a mobileszközökön, de jobbra a nagy képernyőkön kell megjeleníteni.

@media (min-width: 40rem) ( .column.flow-ellentétes ( lebegés: jobbra; ) )

Gyakorold és fejleszd képességeidet

Ezen egyszerű szabályok betartásával a reszponzív tervezés igazi mesterévé válhat. Gyakoroljon és segítsen az internet jobbá és kényelmesebbé tételében.

Egyébként a legsikeresebb reszponzív tervezésre példa a keretrendszer

Mobil alkalmazás fejlesztés

Elég sokat írtak a Mobile Firstről, és vannak jó könyvek is ebben a témában. Mégis, a legtöbb fejlesztő és vállalat nem használja projektjei során, vagy egyáltalán nem ismeri ezt a megközelítést.

Ezért szeretnék röviden és példákkal mesélni róla, ez hasznos információ lesz azoknak, akik még nem hallottak erről a megközelítésről.
Három fő kérdésre próbálok választ adni:

Mi a Mobile First és előnyei?
A megközelítés megvalósítása
Eredmények statisztika

Mi az a Mobile First? Idén elérte a 60%-ot azoknak a felhasználóknak a száma, akik mobil eszközöket használnak az internethez. Ezért a mobilforgalom egyre jelentősebb, és a webhelytulajdonosoknak figyelembe kell venniük ezeket a statisztikákat. Amint azt a gyakorlat mutatja, a mobiltelefonok és táblagépek felhasználói kevesebb időt töltenek online, és a keresési eredmények első soraiból származó webhelyeket részesítik előnyben. Míg a PC-felhasználók több időt tölthetnek információkereséssel. Ezért webhelyének jól keresőmotorokra (SEO) optimalizáltnak kell lennie, és meg kell felelnie a Mobile First követelményeinek, hogy a felhasználó a lehető legkényelmesebb és érthetőbb legyen az Ön webhelyén a mobileszközén keresztül.

Ezért a Mobile First fejlesztés legfontosabb követelményei közül néhány:

Először mutasd meg a legfontosabb tartalmat
A weboldal legyen könnyű és optimalizált, mert... A mobilhálózati kapcsolat sebessége a felhasználó helyétől függően lassú lehet
A weboldal ne töltsön be több erőforrást, mint amennyire a felhasználónak szüksége van a szükséges információk megszerzéséhez, mert... A mobilinternet továbbra is drága. További információk csak a felhasználó kérésére tölthetők be

Tehát a Mobile First egy módszer egy optimalizált webhely fejlesztésére különféle mobileszközökhöz, figyelembe véve a hálózati kapcsolat sebességét. És az alapvető tartalom megjelenítésének fontossága a végfelhasználó számára.

A Google keresőóriás nemrég írt ennek a megközelítésnek a fontosságáról:

„Eredményi rangsorunkban növeljük a mobilbarát mutatót. Ezek a változások hatással lesznek a mobilkeresésre a világ összes nyelvén, és jelentős hatással lesznek a keresési eredményekre. Ezért a felhasználók könnyebben találhatnak az eszközeikre optimalizált eredményeket.”
Videó a Mobile First fontosságáról Olivier Rabenschlagtól – a Google Kreatív Fejlesztési Ügynökség vezetőjétől.

A Mobile First megközelítés előnyei Hadd emlékeztessem Önöket arra, hogy mára elérte a 60%-ot a mobileszközöket internetező felhasználók száma. Ezért a Mobile First használata a webhelyek fejlesztése során elsősorban ezeknek a felhasználóknak nyújt nagy előnyöket.

Egy webhely minden eszközhöz
A felhasználók először az oldal fontos tartalmát kapják meg
Gyors oldalbetöltés alacsony kapcsolati sebesség mellett
Kényelmes felület a mobil képernyőn történő navigációhoz
A fő tartalom megjelenítéséhez szükséges minimális mennyiségű webes erőforrás - mobilinternetes forgalom megtakarítása
Felső pozíciók a Google keresési eredményei között

Megvalósítás A megközelítés megvalósítását a Moff.js (Mobile First Framework) keretrendszer segítségével mutatjuk be. Ez egy JavaScript-keretrendszer, amelyet a Mobile First fejlesztéshez szabtak.

A megközelítést egy autóról szóló részletes információkat tartalmazó oldal példáján fogjuk megvizsgálni.

A tartalom fontos részének meghatározásaÁltalában sok adat van egy ilyen oldalon. És el kell döntenünk, hogy ezek közül melyik a fontos elsősorban a felhasználó számára.

Az oldalon található adatok részletes listája:

Képzeljük el, hogy ebből a listából a fő kép a fő kép, a gyártó neve, modellek, felszereltség, ár, jellemzők és felszerelések listája.

Mobil Első oldal. Cégnév Cég leírása 2015-ös 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.

Modell: Versa Note
Karosszéria: 4D ferdehátú
Motor: 1.6L 4 hengeres DOHC 16V
Üzemanyag: benzin

Alapértelmezett

Fékrásegítés
Kettős első oldallégzsák
Hátsó ablak jégtelenítő
Utasajtó szemetes
Vezetőajtó szemetes
Az utasokat érzékelő légzsák
Kipörgésgátló
CD lejátszó
Utazási számítógép
Elektronikus menetstabilizáló
Első bukókeret
Szervókormány
Hátsó ablaktörlő
Elülső olvasólámpák
Fejlégzsák
ABS fékek

Létrehozta a Company.com

szerzői jog
Kapcsolatba lépni
Webhelytérkép

Ideális esetben ez az a forgalom, amelyet a felhasználó az adatok megszerzésére fordíthat. És ezt igyekszünk minimális különbséggel elérni.

Először is stílusokat fogunk írni az oldalak mobileszközökön történő megjelenítéséhez. És csak ezután történik a stílusok más képernyőméretekhez való igazítása médialekérdezéssel.

@média (min. szélesség: 768 képpont) ( /*Táblagép és asztali stílusok*/ )

További információk hozzáadása Most úgy kell hozzáadnunk a fennmaradó adatokat, hogy a felhasználó tudjon róla, és kéréssel megkaphassa az adatokat. Adjon hozzá miniatűröket a fő képhez Meg kell mutatnunk a felhasználónak, hogy vannak még további képek megtekintésére. Ehhez hozzá kell adnunk egy linket a fő kép alá, amely a miniatűrökhöz vezet.

További képek megtekintése...
Itt Data Events segítőket használunk, amelyek kérésre segítenek információt szerezni. A hivatkozásra kattintva egy Ajax kérést küldünk a href attribútumban megadott címre. A kérés eredménye a data-load-target attribútumban megadott elemre lesz írva. Fontos szempont, hogy a data-load-screen attribútum azt jelzi, hogy a bélyegképek milyen képernyőértékeken töltődnek be automatikusan. A képernyőméretek a Twitter Bootstrap CSS keretrendszerből származnak. A data-load-module attribútumban pedig a regisztrált modul azonosítóját jelöljük, amely az ajax kérés eredményének beillesztése után csatlakozik.

A linkben megadott URL-re ajax kérés érkezik, és az eredmény bekerül az oldalba

A regisztrált modul (jármű-galéria) csatlakoztatva van

A függőségek benne vannak (jQuery és Slick-carousel)

A fő modul fájl betöltése

Modul inicializálása

Ezután nézzük meg ennek a modulnak a regisztrálását. Modul osztály nyilatkozat A Moff keretrendszer moduláris rendszerrel rendelkezik, amellyel a jármű-galéria modulosztályt valósítjuk meg.

A Moff moduljai független alkalmazáselemek, amelyek saját üzleti logikával rendelkeznek, és függőek lehetnek külső könyvtáraktól.

Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; function setMainImage() ( _mainImage = _module.find(.vehicle_images_main img"); ) function inicializeSlickJs() ( $(_module. find(.vehicle_images_thumbs-list")).slick(( végtelen: igaz, 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 = ".vehicle_images"; this.init = function() ( setMainImage(); inicializeSlickJs(); handleMainImage(); ; ));
Az osztály inicializálása során slick-carousel-t futtatunk, hogy létrehozzuk a miniatűrök körhintaját, és beállítunk egy kezelőt a megtekintésükhöz.

Modul regisztráció A modulok regisztrációja olyan objektum használatával történik, amely egyedi azonosítót tartalmaz, és tartalmazhat modulfüggőségeket és a fő modulosztályfájlt.

Moff.amd.register(( id: "vehicle-gallery", 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"] ), fájl: ( js: ["js/vehicle-gallery.js"] ), afterInclude: function() ( Moff. module.initClass("Járműgaléria"); ) ));
Példánkban a jQuery-t és annak slick-carousel-bővítményét határoztuk meg, amely miniatűrökből karusszelt hoz létre, mint függőséget. A függőségek szinkronban, az Ön által megadott sorrendben töltődnek be. A függőségek után pedig betöltődik a vehicle-gallery.js modulosztály. Ezután a modulfájl és függőségei betöltése után inicializáljuk a modult az afterInclude esemény segítségével.

Eredmények statisztika. Foglaljuk össze a Mobile First oldal létrehozásának eredményeit.

Az alsó grafikon azt mutatja, hogy egy nem optimalizált oldal 73%-kal nehezebb, mint a mobil első oldal. Így 186,94 KB-ot takaríthatunk meg, amire nem biztos, hogy a felhasználónak szüksége lesz az oldalad megtekintésekor.

Következtetés Ily módon megszabadulunk nagyszámú másodlagos erőforrás betöltésétől, amelyek azonban a felhasználó kérésére elérhetőek lesznek.

Ez a cikk csak egy példával foglalkozik a további információk betöltésére. A teljes példa megtekinthető a keretrendszer honlapján.

Ha 720 képpontra vagy kisebbre méretezi át, a fejléc nagyobb méretűvé válik a kényelmes 60 képpontos gombokkal.

A méretek, az elrendezés, a menüpontok és a gombok száma a készülék szélességéhez igazodik.

Ha ismeri az arányait, találhat egy boldog közeget, ahol a méretek megfelelnek a mobil eszközöknek és az asztali számítógépeknek is. Például szakaszcímek. Tipográfia Méretek és arányok

Bizonyos szempontból a nagyobb jobb. De ami még fontosabb, az arányok harmonizálják a tartalmat. Ha a törzsszöveg méretezett 24 képpont, győződjön meg arról, hogy jól illeszkedik a webhely többi részéhez. Itt nincsenek szigorú szabályok, de a vonalmagasság között kell lennie 1,2x előtt 1,4x betűméret. Állítsa be a méreteket, a sűrűséget és a színváltozatokat a prioritások alapján. Itt sok minden az ösztönből és a gyakorlott szemből fakad.

A sor hossza 45 és 90 karakter között lehet. A tipográfia általános szabályait ebben az útmutatóban ismertetjük részletesebben.

Munka az SVGU-val a WebKit for Animations használatával

A teljesítmény fontos: közvetlenül befolyásolja a felhasználó kényelmét. Ha minden lassú, az embereket nem fogják érdekelni a tervezés alcímei, mert csak arra fognak gondolni, hogy a dolgok milyen lassúak.

Lent, amikor az autó elindul, a webkit-transformot használtam a jQuery animációja helyett. Ezzel a megvalósítással a teljesítmény jelentősen javul. Ezenkívül kiválóan működik a Mobile Safari és a Chrome böngészőben.

A parallaxishoz 3 különböző elemhez különböző sebességet állítottam be. Webkit-transform-ot használtam a CSS felső pozíciója helyett. Emiatt sokkal gördülékenyebb lett a görgetés. Viewport beállítása

Gondoskodnunk kell arról, hogy az iOS és Android készülékek 0,5-re méretezzék a dizájnt, hogy 640 képpontos képernyőszélességen minden szépen működjön. iPad esetén 1-re skálázzuk.

iOS Smart Banner

Ha iPhone-ja van, hozzáadhat egy kódrészletet, amely összekapcsolja a webhely tetejét az alkalmazással.

Amikor az emberek iPhone-on vagy iPaden keresztül érik el a webhelyet, egy gyönyörű szalaghirdetést látnak, amely az App Store-ba viszi őket. Az iOS szimulátor használata

Keresés a Chrome-ban Androidon

A mobilfelhasználók fele Androidot használ. A Chrome böngésző elemeinek teszteléséhez Androidon kövesse ezeket az utasításokat.

Eltartott egy ideig, amíg elsajátítottam a lehetőséget a hamburger menü Eszközök > Eszközök ellenőrzése Következtetés menüpontjában

Valóban reszponzív, minden böngészőben és minden eszközön működő webhely létrehozása nem egyszerű feladat. Ezért a lehető leghatékonyabban kell dolgoznia, nehogy az idő nagy részét olyan apróságokra fordítsa, amelyek megőrjítik a fejlesztőt. Az IE6 támogatásának megszüntetéséhez hasonlóan néhány régi eszközt és alacsonyabb felbontást is eltávolítottunk.

Benedict Evans, az Andreessen Horowitz kockázati alap befektetője és partnere írt egy cikket arról, hogy miért tér át egyre több fejlesztő a Mobile First paradigmáról a Mobile Native paradigmára, mi a különbség köztük, és mire érdemes a mobilalkalmazások készítőinek emlékezni. .

„Néhány évvel ezelőtt az IT-cégek áttértek a Mobile First stratégiára. Ezt megelőzően a szervezetek külön fejlesztési részleggel rendelkeztek a mobil platformok és a mobil terület fejlesztésében részt vevő alkalmazottak számára. Mostantól az új funkciók azonnal megjelennek az okostelefonokon, de néha nem kerülnek át PC-re” – írja Evans.

A befektető szerint 2016-ban egyre több cég érkezik a Mobile Native paradigmába. „Ez a Mobile First elv továbbfejlesztése. Mi történik, ha egyszerűen megfeledkezik a számítógépekről és az olcsó mobiltelefonokról? Ha teljes mértékben a 2,5 milliárd okostelefonra koncentrál, és teljesen kihagyja az alsó kategóriás készülékek piacát. Lehet nagy céget építeni?

Evans szerint a Mobile Native stratégiát választó fejlesztőknek először néhány kulcsfontosságú pontot kell figyelembe venniük:

„Az utolsó szempont, amit szeretnék leszögezni, az az, hogy elgondolkodjunk azon, hogy az ilyen alkalmazásokban hány különböző technológia szerepel, és miért nem voltak lehetségesek ezek a szolgáltatások a PC-n” – jegyzi meg Evans.

Elképesztő, hogy az okostelefonok bonyolultabbak és könnyebben használhatók, mint a PC-k – és ez különösen igaz a mobilinternetre.

A befektető elmondása szerint a mobiltelefonnal sok olyan dolgot megtehetnek a felhasználók, amit a magát a számítógépet, billentyűzetet és egeret tartalmazó rendszer nem engedett meg. Ez új lehetőségeket nyit mind az okostelefon-tulajdonosok, mind a fejlesztők számára. „Egy egész generáció felnőtt már, és készen áll a Mobile Native paradigmára. Azok az alkalmazások pedig, amelyek 2007-ben izgalmasak lettek volna, most teljesen egyszerűnek tűnnek.”

„A fejlesztők végre túlléphetnek a Mobile First paradigmáján, és alkalmazhatják képességeiket, hogy a legtöbbet hozzák ki a bolygó kétmilliárd okostelefonjából. Erről a körülbelül kilenc évvel ezelőtti Web 2.0-ra való átállás jut eszembe. Aztán az összes fejlesztő azt mondta: "Tudod, nem kell a Lynx-re, a CGI-szkriptekre és a telefonos kapcsolatokra gondolnunk. Túl vagyunk azon a ponton, ahol az IMG-címke használata ellentmondásosnak tűnt, és gondolkodhatunk azon, hogyan hozzunk létre interfészeket, és új szolgáltatásokat nyújtanak a felhasználóknak" – zárja Evans.

Egy egyszerű, reszponzív webhelynavigációt fogunk létrehozni. Megoldásunk segít abban, hogy összpontosítsunk tartalom oldalunkat, ami talán a legfontosabb prioritás a mobileszközökre való fejlesztés során. Itt nem lesz szó JavaScriptről, de a Mobile First megközelítést alkalmazzuk.

Mobil navigáció

Tökéletesen elfogadható reszponzív kialakítás, de normál mobilnézeti méreteknél (320 x 480 pixel) valójában csak a navigációs menüt látod. Bizonyára csak a főoldalt megnyitva szeretnék valami mást látni, mint ezt. Nem a London & Partners az egyetlen, akinek ez a problémája van, ez a gyakorlat számos reszponzív dizájnban megtalálható az interneten.

Tehát mik a megoldások?

Már ismerünk néhány módot ennek elkerülésére, például a jQuery segítségére, hogy segítsen kitalálni. Vegyük Chris Coyier magyarázatát az Öt egyszerű lépés legördülő menüjéről.

Nagy képernyő, kis képernyő.

A jQuery használatával egy duplikált menü jön létre legördülő listaként, amely kezdetben el van rejtve a CSS használatával. Amikor a médialekérdezések kisebb képernyőt észlelnek, láthatóvá teszik a legördülő menüt, és láthatatlanná az eredeti navigációt. Ez ideális mobileszközökhöz, mivel a legördülő menük minimális helyet foglalnak el, és az eszköz dedikált felhasználói felületét használják (például az iPhone görgetőjét).

Alternatív megoldásként elrejtheti a navigációt, de a „menü” gomb megnyomásakor nézet módba léphet. Ezt a hatást működés közben láthatja a Twitter legújabb Bootstrapjában.

A kisebb képernyők elrejtik a navigációs hivatkozásokat, és egy „lista” ikont jelenítenek meg (amit gyorsan „menüként” fogtak fel), amely kattintáskor a navigációt mutatja. Ismét a mobil látogatók a lehető legtöbb tartalommal jelennek meg, és ha úgy döntenek, navigációs lehetőségek állnak rendelkezésükre.

Tiszta CSS megoldás

A Luke által tárgyalt technikát fogjuk használni, amely magában foglalja a CSS és a Mobile First megközelítés használatát. Mit értünk a „Mobile First megközelítés” kifejezés alatt? Leegyszerűsítve: először mobil-elrendezést fogunk kifejleszteni, majd fokozatosan javítjuk a nagyobb képernyők kialakítását. Olyan médialekérdezéseket fogunk használni, amelyek észlelik az egyre növekvő képernyőméreteket, fokozatosan hozzáadva a stílust és a funkcionalitást.

Ez azt jelenti, hogy a terv mobileszközön való megtekintésekor csak a minimális CSS és eszközök töltődnek be. Ez azt is jelenti, hogy az IE régebbi verziói (amelyek nem ismerik fel a médialekérdezéseket) megjelennek az oldal mobil verzióján. További információért nézze meg Joni Korpi Leaving Old Internet Explorer Behind című részét.

1.Jelölés

A megoldás mögött meghúzódó ötleteket elmagyarázom, ahogy haladunk előre, ezért most vázoljunk fel néhány jelölést, kezdve egy blanco HTML5 dokumentummal.

Mobile First Responsive Navigation

Miután ez megtörtént, adjunk hozzá néhány oldalszerkezetet. A bemutatónk céljaihoz közvetlenül szükséges pontok és minden. A Holy Grail Monty Python szövegkitöltőjét használtam (köszönöm Chris Valleskey-nek), ami jó módszer arra, hogy mosolyt csaljon az arcára munka közben :)

Nav Blue. Nem, kiabál...

Fogd be! El fogsz kussolni?! De te egynek vagy öltözve… Camelot! Nem szavazol a királyokra.

Cserjét szeretnénk!!

Nézd, hazugságom! Fogd be! De te egynek vagy öltözve…

Az orr?
Pszt! Lovagok, üdvözöllek benneteket új otthonukban. Lovagoljunk Camelotba!
Nézd, hazugságom!

Segítség, segítség, el vagyok nyomva!

Miért? Hallgat. Furcsa nők hevernek a tavakban, és kardokat osztogatnak, nem alapozzák meg a kormányzást. A legfelsőbb végrehajtó hatalom a tömegek megbízásából származik, nem pedig valami bohózatos vízi szertartásból. Maradj csöndben! Egy gőte?!--végburkoló-->

2.Navigációs elrendezés

Összeállítottunk egy alap html oldalt, így most itt az ideje a fő attrakciónak; fő navigációnk..

Portfólió
Rólam
Ostobaság
Szolgáltatások
Kapcsolatba lépni
Top

Igen, mindent jól látott – a 68. sorba adtuk hozzá után utolsó cikk. Ne felejtsd el, hogy jelenleg mobil eszközökre fejlesztünk, később megnézzük az asztali verziót. A navigációt oldalunk aljára helyeztük el, ami elég furcsának tűnik. Most elhelyezünk egy linket oldalunk tetejére, hogy a felhasználók, ha akarják, megtalálják a navigációt.

Nav Menü

3. Állítsa vissza a CSS-t

Attól függően, hogy általában hogyan indítja el a webprojekteket, ez a lépés eltérhet a normál munkafolyamattól. Mindig is azon a véleményen voltam, hogy Eric Meyer újraindítása jó kiindulópont, különösen amióta nemrégiben átdolgozta. A css elindításához hozzáadjuk a visszaállítási szabályait a stíluslaphoz:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 MEGJEGYZÉS: FOLYAMATBAN FOLYAMATOSAN HASZNÁLJON ÓVATOSAN HASZNÁLJON, ÉS TESZTELJE AZ ABANDON-NAL */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , mozaikszó, cím, nagy, idéz, kód, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, mezőkészlet, űrlap, címke, jelmagyarázat, táblázat, felirat, tbody, tfoot, thead, tr, th, td, cikk, félre, vászon, részletek, ábrafelirat, ábra, lábléc , fejléc, hgroup, menü, navigáció, szakasz, összefoglaló, idő, jel, hang, videó ( margó: 0; kitöltés: 0; szegély: 0; körvonal: 0; betűméret: 100%; betűtípus: öröklődik; függőleges- align: baseline; ) /* HTML5 megjelenítési szerepkör visszaállítása régebbi böngészőkhöz */ cikk, félre, részletek, képfelirat, ábra, lábléc, fejléc, hcsoport, menü, navigáció, szakasz (megjelenítés: blokk; ) törzs ( sor magassága: 1; ) ol, ul ( lista-stílus: nincs; ) blockquote, q (idézőjelek: nincs; ) blockquote:before, blockquote:after, q:before, q:after (tartalom: ""; tartalom: nincs * ne felejtsd el valahogy kiemelni a betéteket! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) table ( border-collapse: collapse; border-spacing: 0; )

4. Alapstílusok

Jelenleg az oldalunk elég unalmasnak tűnik.

Tehát javítsunk a helyzeten néhány egyszerű stílus hozzáadásával.

/*begin our styles*/ body ( font: 16px/1.4em "PT Sans", sans-serif;; szín: #1c1c1c; ) p, ul ( margó: 0 0 1,5em; ) ul ( lista stílusa: lemez ; kitöltés: 0 0 0 20 képpont; ) a ( szín: #1D745A; ) h1 ( ) h2 ( betűcsalád: "PT Serif", serif; betűméret: 32 képpont; sormagasság: 1,4 em; margó: 0 0 .4em; betűsúly: félkövér; ) /*elrendezés*/ .wrapper ( ) cikk (szegély-alsó: 1px tömör #d8d8d8; kitöltés: 10px 20px 0 20px; margó: 10px 0; ) /*fejléc*/ fejléc ( háttér: #1c1c1c; kitöltés: 15px 20px; ) /*rövidebb clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after ( tartalom:""; display:table; ) fejléc :after ( clear:botth; ) /* IE 6/7 esetén (trigger hasLayout) */ fejléc ( zoom:1; ) h1.logo a ( szín: #d8d8d8; szövegdekoráció: nincs; betűsúly: félkövér; szövegátalakítás: nagybetűk; betűméret: 20 képpont; sormagasság: 22 képpont; lebegés: bal; betűköz: 0,2 em; ) a.to_nav ( lebegés: jobb; szín: #fff; háttér: #4e4e4e; szöveg- dekoráció: nincs; bélés: 0 10px; betűméret: 12 képpont; betűsúly: félkövér; vonalmagasság: 22 képpont; magasság: 22px; szöveg-átalakítás: nagybetűk; betűköz: 0,1 em; -webkit-border-radius: 2px; -moz-border-radius: 2px; határsugár: 2px; ) a.to_nav:hover, a.to_nav:focus ( szín: #1c1c1c; háttér: #ccc; )

Ezek mind az alapok (betűtípusok, vonalmagasságok, színek, stb.), de ami igazán fontos, az az, hogy a "menü" gombot a jobb oldalon, a -ban belülre rajzoltam, pontosan oda, ahol az elvárható.

Ha fölé viszi az egeret, egy fagyott állapotot fog látni – ez természetesen nem szükséges az érintőképernyős eszközöknél, de a hasonló viselkedés át fog ölteni az Internet Explorer inkompatibilis verzióira is. Hogy mi eltökélt A mobilfelhasználók előnyeként ez a state:focus. Ez ugyanaz, mint a :hover állapot, de fontos visszajelzést fog adni az érintőképernyős eszközök számára. Felhasználóink kitalál hogy a menü gomb megérintésével értek el sikert.

Akárhogy is, kattintson rá, és a navigációba kerül – szuper.

Most alakítsuk ki a menüt egy kicsit.

5.Navigációs stílusok

Valójában a fő navigációt úgy alakítjuk ki, mint a fent látható London & Partners-t, kivéve, hogy kifejezetten az oldal alján lesz.

/*navigation*/ #primary_nav ul ( listastílus: nincs; háttér: #1c1c1c; kitöltés: 5px 0; ) #primary_nav li a ( kijelző: blokk; kitöltés: 0 20px; szín: #fff; szövegdekoráció: nincs ; betűsúly: félkövér; szövegátalakítás: nagybetűk; betűköz: 0,1 em; betűköz: 0,1 em; sormagasság: 2 em; magasság: 2 em; szegély-alsó: 1 képpont tömör #383838; ) #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; betűstílus: dőlt; szövegigazítás: középre; betűméret: 14 képpont; )

Sokkal jobb. A menü linkjeit szépre és nagyra alakítottuk (további részletekért olvassa el Luke Wroblewski Touch Target Sizes blogját), és újradefiniáltuk az állapotot: fókusz a felhasználói visszajelzésekhez.

6.Geting nagy

Rendben, dolgoztunk az egyszerű mobilsablonunkkal, de most eljött a fejlettebb fejlesztések ideje. Médialekérdezéseket használunk annak megállapítására, hogy a mobil elrendezésünk mikor már nem megfelelő.

De mikor válik azzá? A médialekérdezések megközelítésének számos módja van, de mi azon az alapon dolgozunk, hogy a mobil nézetablak 320 x 480 pixeles. "Álló" tájolásban 320 pixel széles, "fekvő" tájolásban 480 pixel széles, ezért van értelme, ha az első médialekérdezésünket úgy állítjuk be, hogy bármilyen 480 pixelnél nagyobb képernyőt adjunk meg.

A következő lépés azonban valószínűleg egy táblagép. Az iPad felbontása 980px x 768px, így nyugodtan feltételezhetjük, hogy a 768px-nél kisebb méretek megfelelőek a mobil elrendezésünkhöz. Bármi, ami 768 képpontnál nagyobb, működhet az asztali navigációs elrendezéssel, az "asztali" verzióval.

Így most elkezdhetjük a szabályok hozzáadását, ezért állítsunk be egy médialekérdezést:

/*médialekérdezések*/ @media csak képernyő és (min-szélesség: 768px) ( )

Ez a médialekérdezés a benne lévő összes stílust aktiválja, ha a legkisebb nézetablak értéke 768 képpont. Kérjük, vegye figyelembe a felvételt az egyetlen kulcsszó, amely biztosítja, hogy az Internet Explorer 8 ne keveredjen össze, és ne próbálja feldolgozni a kérést. Részletesebb információkért lásd.

Kezdjük a munkánkkal a "menü" gomb eltüntetésével:

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

Ha a böngésző kissé szélesebb, a menü gomb többé nem jelenik meg.

7. Mozgassa a navigációt

Most át kell helyeznünk a fő navigációt az oldal tetejére. Ezt úgy fogjuk megtenni, hogy eltávolítjuk a dokumentumfolyamból, és a legfelülre helyezzük.

@media only screen and (min-width: 768px) ( a.to_nav ( display: none; ) .wrapper ( pozíció: relatív; szélesség: 768px; margó: auto; ) #primary_nav ( pozíció: abszolút; felül: 5px; jobb : 10px; háttér: nincs : 2px; szegélysugár: 2px; ) )

Ahhoz, hogy ez lehetséges legyen, először helyesen kell elhelyeznünk a szülőjét (.wrapper). Megtehetjük itt a médialekérdezésben, vagy megadhatjuk a stíluslapunk elején.

Miután a menü teljesen telepítve van, el kell távolítanunk néhány horgonyelemet. Nem kell semmi különöset tennie, csak lineárisan kell megjelenítenie a termékek listáját, el kell távolítania a szegélyeket és a hatalmas tereket. A lebegő állapotok, amelyekről korábban beszéltünk, természetesen nagyszerűek, ezért nem kell megváltoztatnunk őket.

8. És végül...

Ha odafigyelt, akkor észrevette, hogy a navigációban még mindig van egy „vissza az elejére” link – erre most nincs szükségünk, igaz?

Többféleképpen is eltávolíthatjuk, de hogy tisztában legyünk azzal, hogy mi történik, először adjunk hozzá egy osztályt a listaelemhez:

Top

És akkor megszabadulhatunk tőle a médialekérdezésünkben:

#primary_nav li.top ( kijelző: nincs; )

Következtetés

Ez minden! Számos módja van ennek az ötletnek a megvalósítására (a lista ikon csak egy ezek közül), és természetesen továbbra is hozzáadhat médialekérdezéseket, hogy nagyobb képernyőkön működjön. Remélem, most megvan rá az oka. Egyszerű, reszponzív, érintéses navigációt hoztunk létre első mobil megközelítéssel, a tartalomra és a használhatóságra összpontosítva. Kinek kell még valami?!

További források

Íme néhány, ebben a cikkben említett hasznos link, egyetlen kényelmes listába összeállítva:

Luke Wroblewskié
Chris Coyier-é