În primul rând mobil. De la Mobile First la Mobile Native: ceea ce este important de reținut pentru dezvoltatorii care se concentrează doar pe smartphone-uri. Meta-etichete și secțiune

În ceea ce privește prevalența dispozitivelor Android în 2013, devine evident că acum avem mii de dispozitive diferite cu acces la rețea cu ecrane de diferite dimensiuni. Este imposibil să faci un aspect separat al site-ului pentru fiecare dintre ele. Prin urmare, astăzi este nevoie de a folosi o abordare mai flexibilă a designului.

Dacă dorim ca site-ul nostru web să fie ușor de utilizat pe toate dispozitivele, indiferent de comportamentul utilizatorului, orientarea sau rezoluția ecranului, atunci ar trebui să ne gândim la implementarea unui design responsive în proiectele noastre.

Prima abordare mobilă

Termenul „în primul rând mobil” a fost destul de popular în ultima vreme. Înseamnă că trebuie să începeți prin a crea un aspect pentru un telefon mobil, dar optimizat pentru ecrane de înaltă rezoluție. În acest fel, aspectul telefonului dvs. mobil devine totul și sfârșitul, eliminând nevoia de alte aspecte separate. Este atat de simplu!

Folosind layout-uri flexibile, dar simple în mod nativ, puteți oferi un suport mai bun pentru o varietate de browsere, atât mari, cât și mici, care nu pot afișa aspecte complet receptive. Deci, când vine vorba de aspecte, termenul „în primul rând pe mobil” înseamnă de fapt „îmbunătățiri progresive”.
- Ethan Marcotte

Lățimea minimă Interogări media

Introduceți reguli specifice pentru machete doar atunci când aveți nevoie de ele. Utilizați proprietatea lățime minimă pentru a crea un aspect stratificat care se întinde pe întreaga lățime a ferestrei de vizualizare. Este mai ușor să păstrați împreună toate interogările media decât la sfârșitul unei foi de stil sau împrăștiate în bucăți separate de cod.

/* Ecrane mici (implicit) */ html ( dimensiunea fontului; 100%; ) /* Ecrane medii (640px) */ @media (lățimea minimă: 40rem) ( html ( dimensiunea fontului: 112%; ) ) / * Ecrane mari (1024px) */ @media (lățime minimă: 64rem) ( html (dimensiunea fontului: 120%; ) )

1. Nu toate browserele sunt create la fel

Diferitele browsere afișează codul CSS diferit. Pentru a evita acest lucru, este corect să folosiți scripturi speciale pentru a reseta valorile într-o singură vizualizare, de exemplu Normalize.css, care permite ca elementele să fie afișate aproape identic în orice browser. Țineți cont de acest lucru înainte de a vă crea propriul fișier de stiluri.

2. Adăugați Vizualizarea Meta etichetă

Așezați-l într-un bloc HTML-ul dvs. Acesta va activa interogări media în aspecte pentru diferite dispozitive.

Model de casetă CSS

Acest lucru este important pentru a înțelege elementele de bază, la fel ca și generarea și comportamentul elementelor din browser, înainte de a învăța designul responsive. Modelul casetei CSS constă din patru părți diferite.

Zona care poate fi curățată din jurul conținutului.

Cadru Rama din jurul căptușelii.

Zona de curățat este în jurul cadrului.

3. Utilizare dimensionare cutie: chenar-cutie

Scrieți acest cod la începutul fișierului dvs. CSS. * - va selecta toate elementele de pe pagina ta.

*, *:înainte, *:după ( -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; )

Alegerea dvs. .clearfix:before, .clearfix:after (conținut: " "; afișare: tabel; ) .clearfix:după ( clear: ambele; ) .clearfix ( *zoom: 1; )

Flux Opus

Adăugați o clasă .flux-opus la coloanele care ar trebui să fie afișate mai întâi pe dispozitivele mobile, dar în dreapta pe ecranele mari.

@media (lățime minimă: 40 rem) ( .column.flow-opposite ( float: dreapta; ) )

Exersați-vă și îmbunătățiți-vă abilitățile

Urmând aceste reguli simple, poți deveni un adevărat maestru al designului responsive. Practicați și ajutați să faceți internetul mai bun și mai convenabil.

Apropo, un exemplu de design responsive cel mai de succes este cadrul

Dezvoltare de aplicații mobile

S-au scris destul de multe despre Mobile First și există cărți bune pe această temă. Și totuși, majoritatea dezvoltatorilor și companiilor nu îl folosesc în proiectele lor sau nu știu deloc despre această abordare.

Prin urmare, vreau să vă povestesc pe scurt și cu exemple, acestea vor fi informații utile pentru cei care nu au auzit despre această abordare.
Voi încerca să răspund la trei întrebări principale:

• Ce este Mobile First și avantajele sale
• Implementarea abordării
• Statistica rezultatelor

Ce este Mobile First? Anul acesta, numărul utilizatorilor care folosesc dispozitive mobile pentru a accesa Internetul a ajuns la 60%. Prin urmare, traficul mobil devine din ce în ce mai semnificativ și proprietarii de site-uri web trebuie să țină cont de aceste statistici. După cum arată practica, utilizatorii de telefoane mobile și tablete petrec mai puțin timp online și preferă site-urile din primele rânduri ale rezultatelor căutării. În timp ce utilizatorii de computere pot petrece mai mult timp căutând informații. Prin urmare, site-ul dvs. trebuie să fie bine optimizat pentru motoarele de căutare (SEO) și să îndeplinească toate cerințele Mobile First, astfel încât vizita utilizatorului pe site-ul dvs. să fie cât mai convenabilă și de înțeles posibil prin intermediul dispozitivului său mobil.

Prin urmare, unele dintre cele mai importante cerințe în dezvoltarea Mobile First sunt:

• Afișați mai întâi conținutul cel mai important
• Site-ul ar trebui să fie ușor și optimizat, deoarece... Viteza conexiunii la rețeaua mobilă poate fi lentă, în funcție de locația utilizatorului
• Site-ul web nu ar trebui să încarce mai multe resurse decât are nevoie utilizatorul pentru a obține informațiile de care are nevoie, deoarece... Internetul mobil este încă scump. Informațiile suplimentare ar trebui să fie încărcate numai la cererea utilizatorului

Deci, Mobile First este o metodă de dezvoltare a unui site web optimizat pentru diverse dispozitive mobile, ținând cont de viteza conexiunii la rețea. Și importanța afișării conținutului de bază pentru utilizatorul final.

Gigantul de căutare Google a scris recent despre importanța acestei abordări:

„Vom crește indicatorul de compatibilitate cu dispozitivele mobile în clasamentul nostru de rezultate. Aceste modificări vor afecta căutarea mobilă în toate limbile lumii și vor avea un impact semnificativ asupra rezultatelor căutării. Prin urmare, va fi mai ușor pentru utilizatori să găsească rezultate optimizate pentru dispozitivele lor.”
Videoclip despre importanța Mobile First de la Olivier Rabenschlag - șeful Agenției de Dezvoltare Creativă Google.

Avantajele abordării Mobile First Permiteți-mi să vă reamintesc că astăzi numărul utilizatorilor care folosesc dispozitive mobile pentru a naviga pe internet a ajuns la 60%. Și, prin urmare, utilizarea Mobile First atunci când dezvoltați un site web oferă, în primul rând, beneficii mari pentru acești utilizatori.

• Un site web pentru toate dispozitivele
• Utilizatorii vor primi mai întâi conținutul important al paginii
• Încărcare rapidă a paginii la viteze reduse de conectare
• Interfață convenabilă pentru navigarea pe ecranul mobil
• Cantitatea minimă de resurse web necesară pentru afișarea conținutului principal - economisirea traficului de internet mobil
• Primele poziții în rezultatele căutării Google

Implementare Implementarea abordării va fi demonstrată utilizând cadrul Moff.js (Mobile First Framework). Acesta este un cadru JavaScript care este adaptat pentru dezvoltarea Mobile First.

Vom lua în considerare abordarea folosind exemplul unei pagini cu informații detaliate despre o mașină.

Determinarea părții importante a conținutului De obicei, pe o astfel de pagină există o mulțime de date. Și trebuie să decidem care dintre acestea este importantă în primul rând pentru utilizator.

Lista detaliată a datelor de pe pagină:

Să ne imaginăm că principalul lucru din această listă este imaginea principală, numele producătorului, modelele, echipamentele, prețul, lista de caracteristici și echipamente.

Prima pagină mobilă. Nume companie Descrierea companiei 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
• Caroseria: 4D Hatchback
• Motor: 1.6L 4 cilindri DOHC 16V
• Combustibil: benzină

Standard

• Asistență la frânare
• Airbag-uri duble față de impact lateral
• Dezghețator lunetă
• Coșul din ușa pasagerului
• Coșul din ușa șoferului
• Airbag cu detectare a ocupantului
• Controlul tracțiunii
• CD player
• Computer de bord
• Control electronic al stabilității
• Bară antiruliu față
• Servodirecție
• Ștergător de lunetă
• Lămpi de lectură din față
• Airbag deasupra capului
• Frâne ABS

Creat de Company.com

• Drepturi de autor
• a lua legatura
• Harta site-ului

În mod ideal, aceasta este cantitatea de trafic care poate fi cheltuită de utilizator pentru a obține aceste date. Și vom încerca să obținem acest lucru cu o diferență minimă.

În primul rând, vom scrie stiluri pentru afișarea paginilor pe dispozitivele mobile. Și numai după aceea, stilurile sunt ajustate pentru alte dimensiuni de ecran prin interogare media.

@media (lățime minimă: 768 px) ( /*Stiluri pentru tabletă și desktop*/ )

Adăugarea de informații suplimentare Acum trebuie să adăugăm datele rămase în așa fel încât utilizatorul să știe despre acestea și să poată obține datele solicitând-o. Adăugați miniaturi pentru imaginea principală Trebuie să arătăm utilizatorului că mai există imagini suplimentare disponibile pentru vizualizare. Pentru a face acest lucru, trebuie să adăugăm un link sub imaginea principală care duce la miniaturi.

Vezi mai multe imagini...
Aici folosim ajutoare Data Events, care ajută la obținerea de informații atunci când sunt solicitate. Când faceți clic pe link, o solicitare Ajax va fi trimisă la adresa specificată în atributul href. Rezultatul solicitării va fi scris în elementul specificat în atributul data-load-target. Un punct important este că atributul data-load-screen indică la ce valori de ecran vor fi încărcate automat miniaturile. Dimensiunile ecranului sunt preluate din cadrul Twitter Bootstrap CSS. Și în atributul data-load-module indicăm identificatorul modulului înregistrat, care va fi conectat după introducerea rezultatului solicitării ajax.

O solicitare ajax este trimisă la adresa URL specificată în link și rezultatul este inserat în pagină

Modulul înregistrat (vehicul-galerie) este conectat

Sunt incluse dependențe (jQuery și Slick-carusel)

Se încarcă fișierul modulului principal

Inițializarea modulului

În continuare, să ne uităm la înregistrarea acestui modul. Declarația de clasă a modulului Cadrul Moff are un sistem de modularitate cu care implementăm clasa de module vehicul-galerie.

Modulele din Moff sunt elemente de aplicație independente care au propria lor logică de afaceri și pot avea dependențe de biblioteci externe.

Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; function setMainImage() ( _mainImage = _module.find(".vehicle_images_main img"); ) function initializeSlickJs() ( $(_module. find(".vehicle_images_thumbs-list")).slick(( infinit: adevărat, 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 = "imagini/previzualizare" + index + ".jpg"; ) this .scopeSelector = ".vehicle_images"; this.init = function() ( setMainImage(); initializeSlickJs(); handleMainImage(); ); ));
În timpul inițializării clasei, rulăm slick-carusel pentru a crea un carusel cu miniaturile noastre și configuram un handler pentru a le vizualiza.

Înregistrarea modululuiÎnregistrarea unui modul are loc folosind un obiect care conține un identificator unic și poate conține dependențe de modul și fișierul clasei modulului principal.

Moff.amd.register(( id: "vehicle-gallery", depinde: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"] ), fișier: ( js: ["js/vehicle-gallery.js"] ), afterInclude: function() ( Moff. module.initClass("Galerie Vehicule"); ) ));
În exemplul nostru, am specificat jQuery și pluginul său slick-carusel, care creează un carusel din miniaturi, ca dependențe. Dependențele sunt încărcate sincron, în ordinea în care specificați. Și după dependențe, se încarcă clasa de modul vehicul-gallery.js. Apoi, după încărcarea fișierului modul și dependențele acestuia, inițializam modulul folosind evenimentul afterInclude.

Statistica rezultatelor. Să rezumăm rezultatele creării paginii Mobile First.

Graficul de jos arată că o pagină neoptimizată este cu 73% mai grea decât o pagină Mobile First. În acest fel putem economisi 186,94 KB, de care utilizatorul poate să nu aibă nevoie atunci când vă vizualizează pagina.

Concluzie În acest fel scăpăm de încărcarea unui număr mare de resurse secundare, dar care vor fi disponibile la cererea utilizatorului.

Acest articol acoperă doar un exemplu de încărcare a informațiilor suplimentare. Un exemplu complet poate fi vizualizat pe site-ul cadru.

Când se redimensionează la 720 de pixeli sau mai puțin, antetul devine o dimensiune mai mare cu butoane confortabile de 60 de pixeli.
Dimensiunile, alinierea, numărul de elemente de meniu și butoanele se adaptează la lățimea dispozitivului.
Dacă vă cunoașteți proporțiile, puteți găsi un mediu fericit în care dimensiunile se potrivesc atât dispozitivelor mobile, cât și desktop-urilor. De exemplu, titlurile de secțiuni. Tipografie Dimensiuni și proporții

În unele privințe, mai mare este mai bine. Dar, mai important, proporțiile armonizează conținutul. Dacă textul corpului este dimensionat 24px, asigurați-vă că se potrivește bine cu restul site-ului. Nu există reguli stricte și rapide aici, dar înălțimea liniei ar trebui să fie între 1,2x inainte de 1,4x marimea fontului. Setați dimensiunile, densitățile și variațiile de culoare în funcție de priorități. Multe aici provin din instinctul intestinal și un ochi antrenat.

Lungimea rândului trebuie să fie de la 45 la 90 de caractere. Regulile generale ale tipografiei sunt descrise mai detaliat în acest ghid.

Lucrul cu SVGU folosind WebKit pentru animații

Performanța este importantă: afectează direct confortul utilizatorului. Dacă totul este lent, oamenilor nu le va păsa de subtitlurile din designul tău, deoarece tot ce se vor gândi este cât de lente sunt lucrurile.

Mai jos, când pornește mașina, am folosit webkit-transform în loc de jQuery's animate. Performanța se îmbunătățește semnificativ cu această implementare. În plus, funcționează excelent pe Mobile Safari și Chrome.

Pentru paralax am setat viteze diferite pentru 3 elemente diferite. Am folosit webkit-transform în loc de poziția de vârf CSS. Din această cauză, defilarea a devenit mult mai lină. Configurarea Viewport

Trebuie să ne asigurăm că dispozitivele iOS și Android scalează designul cu 0,5, astfel încât totul să funcționeze frumos pe o lățime a ecranului de 640px. Pentru iPad vom scala la 1.

Banner inteligent iOS

Dacă aveți un iPhone, puteți adăuga o bucată de cod care va lega partea de sus a site-ului la aplicația dvs.

Când oamenii accesează site-ul prin iPhone sau iPad, ei văd un banner frumos care îi duce la App Store. Folosind simulatorul iOS
Se verifică în Chrome pe Android

Jumătate dintre utilizatorii de telefonie mobilă sunt pe Android. Pentru a testa elemente în browserul Chrome pe Android, urmați aceste instrucțiuni.

Mi-a luat ceva timp să stăpânesc opțiunea din meniul hamburger Instrumente > Inspectare dispozitive Concluzie

Dezvoltarea unui site web cu adevărat receptiv care să funcționeze în toate browserele și pe toate dispozitivele nu este o sarcină ușoară. Prin urmare, trebuie să lucrați cât mai eficient posibil pentru a nu vă petrece cea mai mare parte a timpului pe lucruri mărunte care îl înnebunesc pe dezvoltator. Similar cu modul în care am renunțat la suportul pentru IE6, am eliminat și unele dispozitive vechi și rezoluții mai mici.

Investitorul și partenerul fondului de risc Andreessen Horowitz Benedict Evans a scris un articol despre motivul pentru care din ce în ce mai mulți dezvoltatori trec de la paradigma Mobile First la paradigma Mobile Native, care este diferența dintre ei și ce este important să-și amintească creatorii de aplicații mobile. .

„Cu câțiva ani în urmă, companiile IT au trecut la o strategie Mobile First. Înainte de aceasta, organizațiile aveau departamente de dezvoltare separate pentru platformele mobile și angajații care erau implicați în dezvoltarea zonei mobile. Acum o nouă funcționalitate apare imediat pe smartphone-uri, dar uneori nu se transferă pe computere”, scrie Evans.

Potrivit investitorului, în 2016 tot mai multe companii vin la paradigma Mobile Native. „Aceasta este o evoluție a principiului Mobile First. Ce se întâmplă dacă pur și simplu uiți de computere și telefoane mobile ieftine? Dacă vă concentrați în întregime pe cele 2,5 miliarde de smartphone-uri și omiteți complet piața dispozitivelor low-end. Poți construi o companie mare?

Potrivit lui Evans, dezvoltatorii care aleg o strategie Mobile Native ar trebui să ia în considerare mai întâi câteva puncte cheie:

„Ultimul punct pe care aș dori să îl fac este să mă gândesc la câte tehnologii diferite sunt implicate în astfel de aplicații și de ce astfel de servicii nu au fost posibile pe computer”, notează Evans.

Este uimitor cum smartphone-urile sunt mai complexe și mai ușor de utilizat decât PC-urile - și acest lucru este valabil mai ales pentru internetul mobil.

Investitorul spune că cu un telefon mobil, utilizatorii pot face multe lucruri pe care sistemul, care includea computerul în sine, tastatura și mouse-ul, nu le permitea să le facă. Acest lucru deschide noi oportunități atât pentru proprietarii de smartphone-uri înșiși, cât și pentru dezvoltatori. „O întreagă generație a crescut deja și este pregătită pentru paradigma Mobile Native. Iar aplicațiile care ar fi fost interesante în 2007 par acum complet simple.”

„Dezvoltatorii pot trece în sfârșit dincolo de paradigma Mobile First și își pot aplica abilitățile pentru a profita la maximum de cele două miliarde de smartphone-uri de pe planetă. Acest lucru îmi amintește de tranziția la Web 2.0 în urmă cu aproximativ nouă ani. Apoi toți dezvoltatorii au spus: „Știi, nu trebuie să ne gândim la Lynx, scripturi CGI și conexiuni dial-up. Am trecut de punctul în care utilizarea etichetei IMG părea controversată și ne putem gândi la cum să creăm. interfețe și oferă utilizatorilor noi servicii”, conchide Evans.

Vom crea o navigare pe site simplă, receptivă. Soluția noastră ne va ajuta să ne concentrăm asupra conţinut pagina noastră, care este probabil cea mai mare prioritate atunci când se dezvoltă pentru dispozitive mobile. Nu va fi niciun JavaScript implicat aici, dar îl vom acoperi folosind o abordare Mobile First.

Navigare mobil

Un design receptiv perfect acceptabil, dar la dimensiunile standard de vizualizare pe mobil (320 x 480 pixeli), tot ce vedeți cu adevărat este meniul de navigare. Cu siguranță, doar deschizând pagina principală, aș vrea să văd și altceva decât asta. London & Partners nu sunt singurii care au această problemă, această practică este observată în multe modele responsive de pe tot web.

Deci care sunt soluțiile?

Cunoaștem deja câteva modalități de a evita acest lucru, cum ar fi baza pe jQuery pentru a ne ajuta să ne dăm seama. Luați explicația lui Chris Coyier despre meniul drop-down Cinci pași simpli.

Ecran mare, ecran mic.

Folosind jQuery, un meniu duplicat este creat ca o listă derulantă, inițial ascuns pentru vizualizare folosind CSS. Când interogările media detectează un ecran mai mic, ele fac meniul drop-down vizibil și navigarea originală invizibilă. Acest lucru este ideal pentru dispozitivele mobile, deoarece meniurile derulante ocupă spațiu minim și folosesc interfața de utilizator dedicată a dispozitivului (cum ar fi scroller-ul iPhone).

Alternativ, vă puteți ascunde navigarea, dar intrați în modul de vizualizare când apăsați butonul „meniu”. Puteți vedea acest efect în acțiune în cel mai recent Bootstrap al Twitter.

Ecranele mai mici ascund legăturile de navigare și afișează o pictogramă „listă” (care a devenit rapid percepută ca un „meniu”) care arată navigarea atunci când se face clic. Din nou, vizitatorilor de pe mobil li se prezintă cât mai mult conținut posibil și au la dispoziție opțiuni de navigare dacă doresc.

Soluție CSS pură

Vom folosi tehnica discutată de Luke, care implică utilizarea CSS și a unei abordări Mobile First. Ce înțelegem prin termenul „abordare Mobile First”? Mai simplu spus, vom dezvolta un aspect mai întâi pe mobil și apoi vom îmbunătăți treptat designul pentru ecrane mai mari. Vom folosi interogări media care detectează dimensiuni din ce în ce mai mari ale ecranului, adăugând treptat stil și funcționalitate.

Aceasta înseamnă că atunci când vizualizați un design pe un dispozitiv mobil, se va încărca doar minimul strict de CSS și active. Aceasta înseamnă, de asemenea, că versiunile mai vechi de IE (care nu recunosc interogări media) vor fi prezentate pe versiunea mobilă a site-ului. Consultați Leaving Old Internet Explorer Behind de Joni Korpi pentru mai multe informații despre acest lucru.

1.Marcare

Voi explica ideile din spatele acestei soluții pe măsură ce avansăm, așa că, deocamdată, să schițăm niște markupuri, începând cu un document HTML5 blanco.

Navigare mobilă First Responsive

După ce am făcut acest lucru, să adăugăm o structură a paginii. Punctele necesare direct și totul în scopul demonstrației noastre. Am folosit textul de umplere Monty Python de la Holy Grail (mulțumesc Chris Valleskey), care este o modalitate bună de a vă pune zâmbetul pe buze în timp ce lucrați :)

Nav Blue. Nu, strigă...

Taci! O să taci?! Dar ești îmbrăcat ca un... Camelot! Nu votați regi.

Vrem un tufiș!!

Uite, minciuna mea! Taci! Dar ești îmbrăcat ca unul...

• Nasul?
• Shh! Cavaleri, vă urez bun venit în noua voastră casă. Hai să mergem la Camelot!
• Uite, minciuna mea!

Ajutor, ajutor, sunt reprimat!

De ce? Asculta. Femeile ciudate care zac în iazuri distribuind săbii nu reprezintă o bază pentru un sistem de guvernare. Puterea executivă supremă derivă dintr-un mandat al maselor, nu dintr-o ceremonie acvatică farsă. Liniște! Un triton?!--înveliș final-->

2.Dispozitiv de navigare

Am creat o pagină html de bază, așa că acum este timpul pentru atracția principală; navigația noastră principală..

• Portofoliu
• Despre mine
• Prostii
• Servicii
• a lua legatura
• Top

Da, ați văzut totul corect - l-am adăugat la rândul 68 după ultimul articol. Nu uitați că în prezent dezvoltăm pentru dispozitive mobile, mai târziu ne vom uita la versiunea desktop. Am plasat navigarea în partea de jos a paginii noastre, ceea ce pare destul de ciudat. Acum vom plasa un link în partea de sus a paginii noastre, astfel încât utilizatorii să poată găsi navigarea dacă doresc.

Nav Meniul

3.Resetați CSS

În funcție de modul în care începeți de obicei proiectele web, acest pas poate diferi de fluxul de lucru normal. Întotdeauna am fost de părere că reboot-ul lui Eric Meyer este un loc bun de început, mai ales că l-a revizuit recent. Vom adăuga regulile sale de resetare la foaia de stil pentru a începe CSS:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTĂ: UTILIZARE ÎN CUCURARE CU ATENȚIE ȘI TESTARE CU ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , acronim, adresă, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, figcaption, figură, subsol , antet, hgroup, meniu, navigare, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; contur: 0; dimensiunea fontului: 100%; font: moștenire; vertical- align: baseline; ) /* HTML5 resetare rol de afișare pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:before, q:after (conținut: ""; conținut: niciunul; ) / * amintiți-vă să evidențiați inserțiile cumva! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) table (border-collapse: collapse; margine-spacing: 0; )

4.Stiluri de bază

În acest moment pagina noastră pare destul de plictisitoare.

Deci, să îmbunătățim situația adăugând un stil simplu.

/*începe stilurile noastre*/ body ( font: 16px/1.4em "PT Sans", sans-serif;; culoare: #1c1c1c; ) p, ul ( margine: 0 0 1.5em; ) ul ( list-style: disc ; umplutură: 0 0 0 20px; ) a ( culoare: #1D745A; ) h1 ( ) h2 (familie de fonturi: „PT Serif”, serif; dimensiunea fontului: 32px; înălțimea liniei: 1.4em; marja: 0 0 .4em; font-weight: bold; ) /*layout*/ .wrapper ( ) articol ( chenar-jos: 1px solid #d8d8d8; umplutură: 10px 20px 0 20px; margine: 10px 0; ) /*header*/ header ( fundal: #1c1c1c; umplutură: 15px 20px; ) /*clearfix mai scurt http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after (conținut:""; display:table; ) antet :after ( clear:both; ) /* Pentru IE 6/7 (declanșatorul areLayout) */ antet ( zoom:1; ) h1.logo a ( culoare: #d8d8d8; text-decoration: none; font-weight: bold; text-transform: majuscule; font-size: 20px; line-height: 22px; float: stânga; letter-spacing: 0.2em; ) a.to_nav ( float: dreapta; culoare: #fff; fundal: #4e4e4e; text- decor: nici unul; umplutură: 0 10px; dimensiunea fontului: 12px; greutatea fontului: bold; înălțimea liniei: 22px; inaltime: 22px; text-transform: majuscule; spațiere între litere: 0,1 em; -webkit-border-radius: 2px; -moz-border-radius: 2px; raza-chenar: 2px; ) a.to_nav:hover, a.to_nav:focus (culoare: #1c1c1c; fundal: #ccc; )

Acestea sunt toate elementele de bază (fonturi, înălțimi de linii, culori etc.), dar ceea ce este cu adevărat important este că am desenat butonul „meniu” în dreapta, în interiorul , exact acolo unde te-ai aștepta să fie.

Dacă treceți cu mouse-ul peste el, veți vedea o stare înghețată - desigur, acest lucru nu este necesar pentru dispozitivele cu ecran tactil, dar un comportament similar se va transfera la versiunile incompatibile de Internet Explorer. Că noi determinat Ca beneficiu pentru utilizatorii de telefonie mobilă, acesta este stare:focalizare. Aceasta este aceeași cu starea :hover, dar va oferi feedback important pentru dispozitivele cu ecran tactil. Utilizatorii noștri descoperi că au obținut succes prin atingerea butonului de meniu.

Oricum, faceți clic pe el și veți fi dus la navigare - super.

Acum să facem un pic de stil al meniului.

5.Stiluri de navigare

De fapt, vom stila navigarea noastră principală ca cea de la London & Partners prezentată mai sus, cu excepția faptului că va fi în mod explicit în partea de jos a paginii.

/*navigație*/ #primary_nav ul ( list-style: none; background: #1c1c1c; padding: 5px 0; ) #primary_nav li a ( display: block; padding: 0 20px; culoare: #fff; text-decoration: none ; greutate font: bold; transformare text: majuscule; spațiere litere: 0,1 em; spațiere litere: 0,1 em; înălțime linie: 2 em; înălțime: 2 em; chenar-jos: 1px solid #383838; ) #primary_nav li :last-child a (border-bottom: none; ) #primary_nav li a:hover, #primary_nav li a:focus (culoare: #1c1c1c; fundal: #ccc; ) /*footer*/ footer ( font-family: " PT Serif", serif; stil font: italic; text-align: center; font-size: 14px; )

Mult mai bine. Am făcut legăturile de meniu frumoase și mari (citiți blogul Touch Target Sizes al lui Luke Wroblewski pentru mai multe detalii) și am redefinit starea: concentrarea pentru feedback-ul utilizatorilor.

6. Devenind mare

Bine, am lucrat cu șablonul nostru mobil simplu, dar acum este timpul pentru îmbunătățiri mai avansate. Vom folosi interogări media pentru a determina când aspectul nostru mobil nu mai este potrivit.

Dar în ce moment devine așa? Există multe modalități de abordare a interogărilor media, dar vom lucra pe baza că fereastra de vizualizare mobilă este de 320 x 480 pixeli. Are 320 de pixeli lățime când este vizualizat în orientare „portret”, 480 pixeli lățime când este vizualizat în orientare „peisaj”, așa că are sens dacă setăm prima noastră interogare media pentru a specifica orice ecran mai mare de 480 de pixeli.

Cu toate acestea, următorul pas este probabil o tabletă. iPad-ul are o rezoluție de 980px x 768px, așa că putem presupune cu siguranță că orice mai mic de 768px este potrivit pentru aspectul nostru mobil. Orice lucru mai mare de 768 px poate funcționa cu aspectul de navigare pe desktop, versiunea „desktop”.

Așa că acum putem începe să adăugăm reguli, așa că haideți să setăm o interogare media:

/*interogări media*/ @ecran numai media și (lățime minimă: 768 px) ( )

Această interogare media va declanșa toate stilurile pe care le conține dacă cea mai mică valoare a ferestrei de vizualizare este de 768 de pixeli. Vă rugăm să rețineți includerea singurul cuvânt cheie care se asigură că Internet Explorer 8 nu devine confuz și încearcă să proceseze cererea. Pentru informații mai detaliate vezi.

Să începem munca făcând să dispară butonul „meniu”:

Ecran numai @media și (lățime minimă: 768 px) ( a.to_nav ( display: none; ) )

Când browserul este puțin mai larg, butonul de meniu nu va mai apărea.

7. Mutați navigarea

Acum trebuie să ne mutăm navigarea principală în partea de sus a paginii. Vom face acest lucru eliminându-l din fluxul de documente, plasându-l în partea de sus.

Ecran numai @media și (lățime minimă: 768 px) ( a.to_nav ( afișare: niciuna; ) .wrapper ( poziția: relativă; lățime: 768 px; margine: automat; ) #primary_nav ( poziția: absolut; sus: 5 px; dreapta : 10px; fundal: niciunul; ) #primary_nav li ( afișare: inline; ) #primary_nav li a ( float: stânga; chenar: niciunul; padding: 0 10px; -webkit-border-radius: 2px; -moz-border-radius : 2px; raza-chenar: 2px; ))

Pentru ca acest lucru să fie posibil, trebuie mai întâi să-i plasăm corect părintele (.wrapper). O putem face aici, în interogarea media, sau o putem defini la începutul foii noastre de stil.

Odată ce meniul este complet instalat, trebuie să eliminăm unele elemente de ancorare. Nu trebuie să faceți nimic special, trebuie doar să faceți lista de produse să se afișeze liniar, să eliminați chenarele și spațiile uriașe. Stările de hover despre care am vorbit mai devreme sunt bineînțeles grozave, așa că nu trebuie să le schimbăm.

8. Și în sfârșit...

Dacă ai fost atent, vei fi observat că mai avem un link „înapoi în sus” în navigare - nu avem nevoie de asta acum, nu?

Îl putem elimina în mai multe moduri, dar pentru a fi clar ce se întâmplă, să adăugăm mai întâi o clasă la elementul listă:

Top

Și apoi putem scăpa de el în interogarea noastră media:

#primary_nav li.top (afișare: niciunul; )

Concluzie

Asta e tot! Există multe modalități de a implementa această idee (pictograma listă este doar una dintre ele) și, desigur, puteți continua să adăugați interogări media pentru a funcționa pe ecrane mai mari. Sper că acum ai un motiv să faci asta. Am creat o navigare tactilă simplă, receptivă, folosind o abordare mai întâi mobilă, concentrându-se pe conținut și utilizare. Cine mai are nevoie de ceva?!

Resurse aditionale

Iată câteva link-uri utile menționate în acest articol, compilate într-o singură listă convenabilă:

• a lui Luke Wroblewski
• Al lui Chris Coyier