Meniu
AcasăTelefon

Design html receptiv. Cum să faci un design responsive folosind CSS. Soluție parțială: faceți totul flexibil

Astăzi, majoritatea oamenilor accesează Internetul prin intermediul gadgeturi mobile- tablete, telefoane, in acest sens, optimizarea site-ului include si nou nivel. Dacă un utilizator intră și vede că site-ul nu este optimizat pentru dispozitive mobile: imaginea nu poate fi vizualizată, butoanele s-au mutat, fonturile sunt mici și imposibil de citit, designul este denaturat - 99 din 100%, că va pleacă și începe să cauți altul mai convenabil. Și va bifa caseta că resursa este irelevantă, adică nu corespunde interogării de căutare. Prin urmare, designul paginii trebuie adaptat la diverse dispozitive mobile. Ce este o versiune mobilă a unui site web, cum se realizează și care este cea mai bună metodă de utilizat? Citiți mai multe în acest articol.

Deci sunt patru căi cheie adaptați site-ul pentru o versiune mobilă.

Metoda unu - design receptiv

Șabloanele adaptive implică schimbarea imaginii site-ului web în funcție de dimensiunea ecranului. De regulă, acestea sunt setate la 1600, 1500, 1280, 1100, 1024 și 980 pixeli standard. Interogările sunt folosite pentru implementare. Nu se schimba singur.

Avantajele acestei metode includ:

  • dezvoltare convenabilă, deoarece structura în sine se adaptează la parametrii ecranului și orice actualizare nu necesită dezvoltarea unui design de la zero, este suficient să corectați CSS și HTML;
  • unul adresa URL- utilizatorul nu trebuie să-și amintească mai multe nume, nu este nevoie de o redirecționare (redirecționare de la o adresă la alta), ceea ce poate complica munca unui webmaster și este mai ușor pentru un motor de căutare să sorteze și să clasifice o resursă cu o singură adresă.

Desigur, șabloanele adaptive au și dezavantajele lor, care, apropo, depășesc avantajele lor. Cu toate acestea, mulți dezvoltatori aderă la acest concept, de exemplu, Google Corporation, a cărei versiune mobilă a site-ului are design receptiv. Deci, dezavantajele:

  • Designul responsive nu acceptă aceleași sarcini pe un dispozitiv mobil ca pe un desktop. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului web al unei bănci, unde cel mai probabil utilizatorul va avea nevoie de informații despre ratele de schimb sau bancomatele din apropiere, atunci acest design este destul de suficient. Dar dacă este o resursă structurată complexă cu multe secțiuni și subsecțiuni, atunci este puțin probabil să atragă vizitatorii.
  • Încărcarea lentă transformă site-ul tău preferat într-unul urât. Acest lucru este valabil mai ales pentru resursele în care există o abundență de animații, videoclipuri, ferestre pop-up și altele. elemente active. Datorită greutății mari, pagina pur și simplu va „încetini”, utilizatorul se va enerva și va pleca și căutarea pozițiilor site - a cădea.
  • Incapacitatea de a dezactiva versiunea mobilă este un alt dezavantaj semnificativ. Dacă un element este ascuns de un astfel de aspect, nu puteți face nimic pentru a-l deschide, spre deosebire de site-urile unde îl puteți dezactiva și trece la un domeniu obișnuit.

Cu toate acestea, o astfel de versiune mobilă a site-ului rapid, fără abilități și costuri speciale, vă permite să adaptați resursa la orice gadget. Dar, având în vedere deficiențele enumerate, este potrivit pentru resurse mici, simple, cu un minim de informații și multimedia, fără navigare dificilăși animație. Pentru un site complex sunt potrivite alte 2 metode.

Metoda a doua - o versiune separată a site-ului

Această metodă este foarte comună și adesea face un site mai ușor de utilizat pe un dispozitiv mobil. Esența sa este de a crea o versiune separată a paginii, concepută pentru aplicație și situată pe un URL sau subdomeniu separat, de exemplu, m.vk.com. În același timp, funcționalitatea principală este păstrată, designul site-ului pur și simplu arată diferit. Avantajele acestei metode sunt evidente:

  • interfață de utilizator convenabilă;
  • este ușor să schimbați și să faceți modificări, deoarece versiunea există separat de resursa principală;
  • datorită greutății sale reduse, o versiune separată a site-ului funcționează mult mai rapid decât un șablon adaptiv;
  • Cel mai adesea este posibilă trecerea la versiunea principală a paginii de pe cea mobilă.

Dar acest lucru nu este lipsit de dezavantajele sale:

  • Mai multe adrese - versiuni desktop și mobile ale site-ului. Cum să faci utilizatorul să-și amintească două opțiuni? Webmasterii transferă adesea din versiunea desktop în versiunea mobilă, dar dacă această pagină nu există în versiunea mobilă, utilizatorul va primi o eroare. Aici apar dificultăți cu motoarele de căutare, cărora le este dificil să clasifice 2 resurse identice, iar acest lucru afectează direct promovarea.
  • Versiunea mobilă a site-ului de pe computer, dacă un utilizator o accesează din greșeală, va arăta ridicol, ceea ce poate afecta și traficul.
  • Această versiune este adesea foarte redusă, desktop, astfel încât utilizatorul va primi funcționalități foarte limitate. Dar, în același timp, dacă ceva lipsește, vizitatorul poate merge la versiunea completă pagini.

În general, un site mobil separat se justifică și este cel mai comun mod de a adapta o resursă pentru dispozitive mobile. Este popular printre magazinele online mari, cum ar fi Amazon.

A treia cale este proiectarea RESS

Motorul de căutare Google sprijină în mod activ această direcție a designului mobil. Acesta este cel mai dificil, mai costisitor, dar metoda eficienta adaptați site-ul pentru telefon sau tabletă. Se numește RESS. Aceasta vizează o resursă într-o aplicație mobilă care poate fi descărcată pentru fiecare dispozitiv separat. Pentru Android - de pe GooglePlay și pentru Apple - de pe iTunes.

Astfel de aplicații sunt rapide, gratuite, convenabile și au capacitatea de a găzdui diverse tipuri informații, în timp ce memoria telefonului și traficul pe Internet nu sunt consumate la fel de mult ca atunci când vizitați un site prin intermediul unui browser. Ele sunt ușor de accesat, deoarece linkul va fi întotdeauna pe ecranul la îndemână și nu este nevoie să introduceți un nume complex în bara de adrese browser.

Desigur, aici există și dezavantaje, precum complexitatea dezvoltării, costurile ridicate ale forței de muncă număr mare programatori, necesitatea de a face mai multe opțiuni de aspect. Uneori, dispozitivul mobil nu este recunoscut de aplicație. Regulat suport tehnic, corectarea deficiențelor. Cu toate acestea, această opțiune este considerată cea mai bună dintre cele trei propuse datorită funcționării productive, neîntrerupte.

Cel mai ieftin mod de a face un site web mobil

Toate metodele de mai sus necesită muncă, deși nu întotdeauna lungă și complexă, dar încă plătită pentru webmaster. Dacă nu vedeți o nevoie urgentă pentru o astfel de dezvoltare, o versiune mobilă simplă și gratuită a site-ului vi se va potrivi. Care este cel mai simplu mod de a o face?

Descărcați șabloane speciale (plugin-uri) pentru design responsive. De exemplu, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile și altele. Ele vă vor ajuta să afișați mai corect site-ul pe telefon și veți primi mai multe sfaturi despre ce ar trebui corectat pentru a adapta mai bine pagina la versiunea mobilă.

Desigur, este puțin probabil ca această metodă să fie potrivită pentru resurse serioase. Mai degrabă, este oportunitate gratuită Destinat site-urilor mici și simple, blogurilor, fluxurilor de știri. De asemenea, nu ar trebui să uităm asta motor de căutare Google, ca și Yandex, astăzi impune cerințe serioase pentru versiunile mobile, așa că există o șansă imensă de a vă reduce poziția folosind această metodă.

Cu această metodă, cel mai probabil, reclamele și bannerele pop-up vor fi tăiate, dar pagina se va încărca rapid și fără întârzieri.

Principii de creare a versiunilor mobile

Nu contează dacă versiunea mobilă a site-ului a fost creată gratuit sau cu ajutorul unui staff de webmasteri, dacă a fost realizată folosind sistemul RESS sau folosind un șablon adaptiv. Cel mai important lucru este că, pentru ca acesta să funcționeze eficient, trebuie să respectați câteva extrem de multe principii importante. Deci, cum ar trebui să fie versiunea mobilă a site-ului? Cum să-l faci productiv, eficient și productiv?

Îndepărtăm tot ce nu este necesar

Minimalismul este ceea ce ar trebui să încerce un dezvoltator al unei versiuni mobile a unui site web. Imaginați-vă cât de dificil este să percepeți informații pline de culori, butoane, bannere și pe care trebuie să le parcurgeți la nesfârșit în căutarea materialul necesar. Designul mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, cele de marcă). Este mai bine dacă unul dintre ele este alb. Împărțiți spațiul mic de pe ecran în zone clare și lizibile. Cheile virtuale trebuie să fie vizibile pentru ca utilizatorul să știe clar unde să apese și să vadă - aici este produsul, aici este formularul de completare a datelor, aici sunt informațiile despre livrare și plată.

Toate opțiuni suplimentare, care ar fi util în versiunea desktop și ar face viața mai ușoară utilizatorului, nu va aduce decât complicații aici. Lăsați doar elementele cele mai importante. Animaţie, bannere publicitare, multimedia va încetini cel mai probabil funcționarea site-ului sau a aplicației și va distrage atenția de la lucrul principal.

Aliniere

Problema alinierii nu este mai puțin presantă, deoarece dacă este făcută incorect, utilizatorul va primi doar terminațiile cuvintelor importante. În general, este acceptat să se alinieze stânga și vertical. Imaginați-vă că defilați flux de știri la telefon. Faceți acest lucru de sus în jos, dar nu la stânga sau la dreapta.

Asociere

Când nu există posibilitatea unui lanț lung de tranziții, încercați să combinați mai mulți pași într-unul singur. De exemplu, un site necesită introducerea datelor în mai multe etape - un nume, apoi o adresă, unde în fiecare celulă individuală există o casă separată, stradă, apartament etc. Pentru a nu forța utilizatorul să încerce să intre în multe mici celule, cereți-i să completeze doar 2 - numele și adresa.

Și deconectare

Uneori, dimpotrivă, este necesară și deconectarea număr mare informaţii. De exemplu, în meniul derulant aveți o listă cu peste 80 de orașe în care se efectuează livrarea. Grupați-le după regiune, astfel încât utilizatorul să nu fie nevoit să defileze prin această listă imensă. Când mută cursorul peste un centru regional sau regiune, va apărea o altă listă de orașe.

Liste

Apropo, despre liste. Există două dintre ele - fixate în ordine alfabetică sau altă ordine și cu substituție. Alegerea lor depinde de ceea ce va fi listat.

Fixed este convenabil dacă utilizatorul știe exact ce caută. De exemplu, orașul, numărul sau data. A doua opțiune este potrivită pentru nume lungi, complexe sau pentru cazurile în care există multe variații ale aceluiași nume, iar fiecare aduce utilizatorul cu un pas mai aproape de obiectiv. Opțiunea de înlocuire automată este folosită mai des atunci când un vizitator are nevoie de ajutor. De exemplu, un site web de tricotat oferă să cumpere ace de tricotat. Utilizatorul intră interogare de căutare„Ace de tricotat din metal”, dar în sfatul instrumentului vede „ace de tricotat de 5 mm”, „ace de tricotat de 4,5 mm”, etc.

Completare automată

Acest punct se aplică în special site-urilor unde vând ceva online și trebuie să completați formulare standard pentru plată, livrare etc. Dacă o persoană face o achiziție de pe telefonul său, atunci cel mai probabil nu are timp să ajungă la computer , ceea ce înseamnă că procesul de achiziție trebuie făcut cât mai rapid și convenabil posibil.

Pentru a face acest lucru, formularele pot conține date deja completate, puteți apela la cele mai populare răspunsuri. De exemplu, introduceți data de astăzi, metoda de plată în numerar, orașul, dacă lucrați în aceeași regiune. Ele pot fi modificate, dar dacă atingeți ținta, timpul utilizatorului va fi salvat.

Totul se citește, totul se vede

Când creați designul versiunii mobile a site-ului, amintiți-vă că telefonul fiecăruia este diferit, la fel și viziunea lor. Site-ul dvs. poate fi vizualizat pe un ecran mic, astfel încât fonturile ar trebui să fie simple și lizibile, butoanele ar trebui să fie suficient de mari pentru a fi făcute clic fără a fi duse la o altă pagină, iar imaginile ar trebui să se deschidă separat și mari, mai ales când vine vorba de Internet. magazin.

Câteva statistici

Când vorbim despre adaptarea unui site web la dispozitivele mobile, nu se poate să nu recurgă la statistici pentru a înțelege cât de important este acest proces pentru promovarea online.

Numerele sunt după cum urmează. Astăzi, 87% din populație folosește gadgeturi, aparent cu excepția celor mai mici copii și a unor persoane în vârstă. Economiștii prevăd creșterea comerțul mobil de 100 de ori în următorii 5 ani. Cu toate acestea, doar 21% dintre site-uri sunt adaptate să funcționeze cu dispozitive mobile. Aceasta înseamnă că traficul de internet și piața de comerț electronic sunt ocupate doar de o mică parte a 5-a.

Gândește-te la aceste numere. Are sens să vă adaptați resursa? Desigur că da. Mai mult, în timp ce sunt atât de multe spatiu liber pe această piață, vă puteți lua propriul segment în ea.

Unde este nevoie de versiunea mobilă?

Utilizarea versiunii mobile este recomandabilă pentru orice platformă care urmărește să obțină un rating ridicat. La urma urmei, acesta este un impact direct asupra utilizatorului, creând condiții confortabile pentru ca acesta să rămână pe site-ul tău.

Următoarele nu pot exista fără o versiune mobilă:

  • portaluri de știri, deoarece acestea sunt ceea ce majoritatea oamenilor văd de pe telefoanele lor în drum spre serviciu sau școală;
  • rețelele sociale - din același motiv, plus că există și factorul comunicării online, ceea ce înseamnă că pentru aceasta trebuie creat un chat convenabil, ușor de înțeles;
  • cărți de referință, site-uri cu navigare etc., unde oamenii se întorc când caută ceva;
  • Magazinele online sunt o oportunitate de a atrage clienți care nu pierd timpul la cumpărături, ci cumpără totul prin internetul mobil.

În loc de o concluzie

Astăzi, tehnologiile mobile se află într-o etapă de creștere și dezvoltare activă, prin urmare, luptă pentru leadership pe piață, orice companie trebuie să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cererilor tot mai mari ale utilizatorilor, site-urile trebuie să fie permanent modernizate și adaptate la diferite dispozitive. Este clar că, dacă o persoană este incomod să fie pe o anumită resursă, nu poate obține informații despre un produs sau preț acolo, să plaseze o comandă, să afle despre livrare, atunci va găsi site-ul unde toate acestea vor deveni posibile. Prin urmare, pentru a câștiga concurenţă, este important să aveți o resursă flexibilă, convenabilă, funcțională și interesantă.

Versiunea mobilă a site-ului Android sau iOS vă va ajuta să faceți acest lucru. Pentru a face acest lucru, trebuie să alegeți una dintre metodele de reproiectare de mai sus - un șablon adaptiv, creând un site nou pe un subdomeniu și trecerea la acesta prin redirecționare, folosind șabloane gratuite sau crearea unei aplicații pentru mobil cu care utilizatorul să poată intra și să rămână mai comod pe pagină.

Tema acestei luni este receptivitatea site-ului, așa că am decis să vorbim mai detaliat despre ce este designul web responsiv, de ce este necesar și care sunt principiile de bază ale designului web responsive.

Designul web adaptiv este o direcție destul de nouă în proiectarea resurselor web, dar acum este unul dintre principalii indicatori ai calității site-ului web. În acest articol vom vorbi despre ce este responsive web design și ce poate fi acesta.

Ce este designul web responsive

Design web responsive (în engleză„Responsive web design”) este designul paginilor web care oferă o experiență excelentă pentru utilizator. diverse dispozitive ah, conectat la internet.

Aceasta înseamnă că același site poate fi vizualizat cel mai mult diferite dispozitive, indiferent de rezoluția și formatul ecranului - smartphone-uri, tablete, laptopuri etc. În același timp, vizualizarea va fi la fel de convenabilă pentru toate formatele - utilizatorii de dispozitive mobile, de exemplu, nu vor trebui să extindă zonele individuale ale site-ului pentru a nu pierde linkul dorit.

Designul responsive are ca scop să facă paginile web și afișarea conținutului lor adecvate pentru dispozitivul pe care sunt vizualizate.

De ce ai nevoie de design web responsive?

1) O mare varietate de dispozitive de pe care puteți accesa Internetul.În prezent, există multe dispozitive pe care oamenii le folosesc, inclusiv pentru a accesa Internetul. Toate aceste dispozitive variază în ceea ce privește dimensiunea ecranului, rezoluția și, prin urmare, modul în care poate fi afișat un site web pe ele. Prin urmare, este important ca site-ul dvs. să arate bine și să se afișeze corect pentru orice utilizator, indiferent de dispozitivul pe care îl folosește.

2) Popularitatea dispozitivelor mobile cu acces la Internet și creșterea traficului de internet mobil. Odată cu popularitatea tot mai mare a dispozitivelor mobile, numărul de utilizatori care accesează site-uri web de pe acestea a crescut considerabil, așa că nu le mai puteți ignora pur și simplu - nu este vorba de una sau două persoane la fiecare șase luni, aceasta este o parte semnificativă a audienței dvs., și ar trebui să fie confortabil folosind site-ul dvs. (altfel nu o vor face).

3) Informații urgente. Dacă resursa dumneavoastră conține știri/informații urgente și există o mare probabilitate ca utilizatorul să fie nevoie să citească aceste informații de pe telefon (pentru că nu are alte dispozitive la îndemână) în în acest moment timp, trebuie avut grijă să se asigure că are posibilitatea de a face acest lucru.

Diferența dintre un site web responsive și o versiune (aplicație) mobilă a unui site web

Versiunile mobile ale site-urilor web și aplicațiilor mobile, special concepute pentru diverse dispozitive mobile, rezolvă și problema ușurinței vizualizării site-ului, dar au unele dezavantaje.

1) Fiecare tip de sistem de operare necesită propria sa versiune de aplicație/site-ul web. Acest lucru necesită resurse suplimentare, atât timp, cât și bani.

2) Necesitatea de a descărca aplicația. Pentru a utiliza aplicația dvs., utilizatorii trebuie să o descarce. Acest lucru necesită un efort suplimentar din partea utilizatorilor și mulți nu vor face acest lucru decât dacă sunt absolut siguri că au într-adevăr nevoie de aplicație și intenționează să o folosească în mod regulat.

3) Separarea traficului. Din punct de vedere al promovării site-ului, o aplicație mobilă nu este convenabilă deoarece împarte tot traficul de resurse în trafic pe site și trafic pe aplicații, ceea ce va arăta ca mai puțin trafic pe site.

4) Necesitatea integrării materialelor de șantier.În cazul unei aplicații mobile, trebuie fie să sincronizați site-ul cu aplicația ( resurse suplimentare), sau faceți o muncă dublă pentru a umple șantierul și aplicația cu materiale.

Spre deosebire de aplicații mobile, designul adaptiv este o adresă de site, un design, un sistem de management și conținutul site-ului.

Desigur, designul adaptiv are și dezavantajele sale, principalul dintre acestea fiind noutatea relativă a tehnologiei și, în consecință, lipsa buni specialistiși cunoștințe despre proiectarea site-urilor web responsive.

Principiile designului receptiv

Designul începe cu versiune adaptivă site pentru dispozitive mobile. În această etapă, designerii se străduiesc să transmită corect sensul și ideile principale folosind un mic ecran și doar o coloană. Conținutul este redus dacă este necesar, eliminând blocurile de informații neimportante și lăsându-le pe cele mai importante.

  • Proiectare pentru dispozitive mobile din primele etape („mobile first”);
  • Utilizarea unui aspect flexibil, bazat pe grilă;
  • Utilizarea imaginilor flexibile;
  • Lucrul cu interogări media;
  • Aplicarea îmbunătățirii incrementale.

Tipuri de layout-uri receptive

Articolul despre Habrahabr prezintă principalele tipuri de layout-uri adaptive care există în prezent.

1) cauciuc

Ușor de implementat și evident pentru tipul de utilizator de prezentare a site-ului. Blocurile principale sunt comprimate la lățimea ecranului dispozitivului mobil, unde acest lucru este imposibil - sunt rearanjate într-o bandă lungă.

2) Transferarea blocurilor

O modalitate evidentă pentru un site cu mai multe coloane: atunci când reduceți lățimea ecranului blocuri suplimentare(barele laterale) sunt mutate în partea de jos a aspectului.

3) Schimbați aspectul

Această metodă este cea mai convenabilă atunci când citiți un site de pe diferite dispozitive: este dezvoltat un aspect separat pentru fiecare rezoluție a ecranului. Metoda necesită multă muncă, prin urmare mai puțin populară decât cele două anterioare.


Schimbarea aspectului Fragment al site-ului web LukeW Ideation + Design

4) Adaptabilitate „cu puțin sânge”

O metodă foarte simplă, potrivită pentru site-uri simple. Obținut prin simpla scalare a imaginilor și a tipografiei. Nu foarte popular, pentru că... lipsit de flexibilitate.


Adaptabilitate cu puțin sânge. Fragment din site-ul LukeW Ideation + Design

5) Panouri

O metodă care a venit din aplicațiile mobile, unde meniu suplimentar poate apărea la atingerea orizontală sau verticală. Principalul dezavantaj- acțiuni neevidente pentru utilizator: este foarte neobișnuit să vezi navigarea mobilă pe un site web. Dar, în timp, metoda poate deveni destul de populară.


Trebuie amintit că machetele prezentate mai sus nu sunt soluții universale - pentru fiecare proiect este necesar să alegeți metoda cea mai potrivită pentru nevoi și capabilități.

Utilizatorii de internet navighează pe site-uri web pe diferite dispozitive cu ecrane diferite dimensiuni. Dimensiunile ecranului se schimbă constant, așa că este important ca site-ul să se adapteze la oricare dintre ele. Există două abordări principale pentru a crea site-uri web care sunt ușor de adaptat diferite tipuri dispozitive:

Design receptiv (RWD) — design receptiv— proiectarea unui site cu anumite valori de proprietate, de exemplu, plasă flexibilă layout-uri care permit aceluiași layout să funcționeze pe dispozitive diferite;

Design adaptiv (AWD)— design adaptiv sau afișare dinamică — proiectarea unui site cu condiții care se modifică în funcție de dispozitiv, pe baza mai multor aspecte cu lățime fixă.

1. Tehnici de design receptiv

Filozofie design web responsive este că site-ul era convenabil de vizualizat de pe orice dispozitiv, indiferent de dimensiunea ecranului. Fraza design receptiv a fost inventat de Ethan Marcotte în 2011. Caracteristica principală design web responsive - datorită grilei fluide, aspectul răspunde automat la modificările dimensiunii ecranului, umflându-se sau contractându-se ca un balon.

Design receptiv(engleză) Web Design responsive) combină trei metode - aspect flexibil pe bază de plasă, imagini flexibileŞi interogări media.

Flexibilitatea aspectului se bazează pe utilizarea unităților de măsură relative în locul valorilor fixe de pixeli, ceea ce permite ajustarea lățimii în funcție de spațiul disponibil.

Flexibilitatea conținutului textului realizat prin calcularea dimensiunilor fonturilor în raport cu dimensiunea implicită a fontului de 16 pixeli a browserelor, cum ar fi fix dimensiunea fontului: dimensiunea relativă de 42 px este de 42 px / 16 px = 2,625 em.

Problemă imagini flexibile rezolvată folosind regula img (lățime: 100%; lățime maximă: 100%;) pentru toate imaginile de pe site. Această regulă asigură că imaginile nu sunt niciodată mai largi decât containerele lor și nu depășesc niciodată dimensiunea lor reală pe ecrane mai mari.

Interogări media modificați stilurile în funcție de caracteristicile dispozitivului legate de afișarea conținutului, inclusiv tipul ecranului, lățimea, înălțimea, orientarea și rezoluția. Interogările media creează un design receptiv care aplică stiluri adecvate fiecărei dimensiuni de ecran.


Orez. 1. Design receptiv

Tehnici suplimentare de proiectare receptivă

Scalabil grafica vectoriala - utilizați imagini svg care se scalează la orice dimensiune fără a pierde calitatea și arată bine pe ecranele Retina.

Interfețele cardurilor- folosiți așa-numitele interfețe de card - forme dreptunghiulare cu colțuri rotunjite care reprezintă containere pentru conținut. Astfel de blocuri sunt unități de interfață autonome și sunt ușor de mutat în jurul aspectului.

Orez. 2. Pinterest, aspect bazat pe carduri

Lăsați doar esențialul- o tehnică bună, mai ales pentru design responsive. Creați interfețe minimaliste receptive și prietenoase, care devin din ce în ce mai populare în zilele noastre.

Orez. 3. Aspect hotelier, minimalism în web design

Prioritizează și ascunde conținutul corect- folosire elemente ascunse comenzi, în special pentru dispozitivele cu ecrane mici. Ferestrele pop-up, filele, meniurile off-canvas și alte tehnici similare vor ajuta la reducerea numărului de elemente de pe pagină. Eliberând spațiu din elemente inutile, veți face interfața convenabilă și ușor de utilizat.

Creați un spațiu mare pe care se poate face clic pentru butoane— cu cât zona activă a butonului este mai mare, cu atât este mai ușor pentru utilizator să interacționeze cu acesta.

Adăugați interactivitate la interfețele dvs- ca răspuns la o acțiune a utilizatorului, creați o acțiune de răspuns - o animație care va funcționa atunci când treceți cu mouse-ul peste un element de pe dispozitivele desktop și când atingeți un element de pe dispozitive mobile.

2. Personalizarea ferestrei de vizualizare folosind metaeticheta de vizualizare

La browsere mobile pentru săli de operație sisteme Android iar iOS nu a redimensionat automat paginile site-ului, este folosită o etichetă specială cu atributul name="viewport". Această etichetă vă permite să setați valoare specifică Pentru parametrii de lățimeși scara inițială:

— initial-scale=1 înseamnă că dimensiunea paginii din browser va fi egală cu 100% din dimensiunea ferestrei de vizualizare. Adică relația dintre pixelul fizic și css cu pixel va fi 1:1;

— width=device-width înseamnă că lățimea paginii va fi egală cu 100% din lățimea ferestrei oricărui browser. Adică, lățimea paginii site-ului corespunde cu lățimea dispozitivului, deci nu trebuie să fie scalată.

ÎN în acest exemplu conținutul din fereastra browserului va fi de 2 ori mai mare în comparație cu dimensiunea fizică.

De asemenea, etichetați poate fi folosit pentru a controla cât de mult pot crește sau micșora utilizatorii lățimea paginii:

Acest cod vă va permite să măriți lățimea paginii la o valoare egală cu de 3 ori lățimea ecranului dispozitivului și să o reduceți la jumătate din lățimea ecranului dispozitivului.

Puteți refuza utilizatorilor posibilitatea de a scala folosind atributul scalabil de utilizator:

3. Șabloane universale

Cele mai multe dintre machetele folosite pentru a crea un design web receptiv se încadrează într-una dintre cele cinci categorii de modele definite de Luke Wroblewski:
Preponderent fluid(Cel mai cauciuc)
Column Drop(Coloane una sub alta),
Schimbător de aspect(Aspect în mișcare),
Tweaks minuscule(Schimbări mici)
Off Canvas(În afara ecranului).
În unele cazuri, o pagină poate utiliza o combinație de șabloane, cum ar fi Column Drop și Off Canvas.

3.1. Preponderent fluid

Un aspect popular constând în principal din plasă de cauciuc. Pe ecranele mari sau cu lățime medie, dimensiunea acesteia rămâne de obicei neschimbată pe ecranele mari, doar marginile sunt ajustate. Pe mici ecrane grila de cauciuc face ca aspectul să fie recalculat pentru conținutul principal, iar coloanele sunt plasate una sub alta. Avantajul șablonului este că necesită un singur punct de control între ecranele mici și ecranele mari.

3.2. Column Drop

Coloanele sunt plasate una câte una vertical dacă lățimea ferestrei nu poate afișa tot conținutul. Ca urmare, coloanele vor fi poziționate vertical unul sub celălalt. Alegerea punctelor de întrerupere pentru acest șablon de aspect depinde de conținut și este determinată pentru fiecare opțiune de proiectare separat.

3.3. Schimbător de aspect

Cele mai multe șablon receptiv, deoarece oferă mai multe puncte de control pentru ecrane de diferite lățimi. Principala diferență cu acest aspect este că, în loc să recalculăm arborele de randare și să plasați coloane una sub alta, conținutul este mutat. Datorită diferențelor semnificative dintre principalele puncte de control, menținerea acestui aspect este mai dificilă și poate fi necesar să modificați nu numai aspectul general al conținutului, ci și elementele acestuia.

3.4. Tweaks minuscule

Șablonul aduce mici modificări aspectului, cum ar fi ajustarea dimensiunii fontului, redimensionarea imaginilor sau mutarea conținutului. Funcționează bine pe aspecte cu o singură coloană, cum ar fi site-uri cu o singură pagină și articole cu mult text.

3.5. Off Canvas

Conținutul care este utilizat rar, cum ar fi elementele de navigare sau meniurile aplicațiilor, este plasat în afara ecranului și afișat numai atunci când dimensiunea ecranului o permite. Pe ecranele mai mici, conținutul se deschide cu un singur clic.

4. Design receptiv

Spre deosebire de designul receptiv, design receptiv(Adaptive Web Design) se concentrează pe dimensiunile dispozitivelor. Utilizează mai multe aspecte statice pentru diferite tipuri de dispozitive (dispozitive mobile, tablete, computere desktop), pe baza punctelor de control (de cotitură). Adică, layout-urile se încarcă la anumite dimensiuni ale ferestrei browserului dispozitivului, iar tranzițiile între layout-uri au loc mai degrabă decât fără probleme.

De obicei, aspectele receptive au șase opțiuni de aspect, în funcție de lățimea ecranului:
320
480
760
960
1200
1600.

ÎN layout-uri adaptive Funcționalitatea joacă rolul principal, adică atunci când se creează un design, se iau în considerare caracteristicile dispozitivelor, de exemplu, control tactil pentru dispozitive mobile sau spatii mari pentru monitoare desktop.

Tehnici de bază de proiectare receptivă

Păstrează-l consecvent- orice site ar trebui să creeze relație de încredere cu utilizatorul, astfel încât acesta să se simtă confortabil atunci când navighează și interacționează cu el. Designul consecvent înseamnă că atunci când trece pe o altă pagină de pe un site, utilizatorul nu simte că se află pe alt site. Acordați atenție micilor detalii, construiți o ierarhie vizuală, evidențiați elementele importante cu aldine. Folosiți serialul schema de culori pe tot site-ul, reutilizați aceleași elemente pentru situații diferite, cum ar fi același design de notificare pop-up.

Utilizați o grilă— o structură cu 12 coloane este mai de preferat pentru a controla lățimea coloanelor și umplutura dintre ele.

5. Care este diferența dintre responsive și adaptive web design


Orez. 4. Design receptiv și adaptiv pe diferite dispozitive

Pentru a crea machete receptive, utilizați interogări media și dimensiuni relative elemente de grilă specificate folosind % . În proiectarea responsive, scripturile de pe server determină mai întâi tipul de dispozitiv pe care utilizatorul încearcă să acceseze site-ul (desktop, telefon sau tabletă), apoi încarcă exact versiunea paginii care este cea mai optimizată pentru acesta. Elementele de grilă primesc dimensiuni fixe în pixeli.

Prin urmare, principala diferență dintre aceste tehnici este designul responsive - un aspect pentru toate dispozitivele, design adaptiv - un aspect pentru fiecare tip de dispozitiv.

6. Servicii și instrumente utile

Emulator Android pentru Windows, Linux și Mac OS X. Simulatorul iOS este disponibil numai pentru utilizatorii de Mac OS X și face parte din pachetul Xcode ( îl puteți descărca gratuit de la Aplicația Mac Magazin).

Un script PHP care rulează pe orice site web detectează dimensiunea ecranului și ajustează dimensiunea imaginii pentru a se potrivi, rezultând o dimensiune mică a imaginii pe ecranele mici.

Tabele de corespondență între dimensiunile fizice ale dispozitivelor și valorile CSS pentru înălțime și lățime, precum și valoarea raportului de pixeli pentru dispozitivele mobile.

O colecție de site-uri web care utilizează interogări media și design web receptiv.

Cadru CSS bazat pe un aspect cu 12 coloane, maxim 960 px. Acceptat de Chrome, Safari, Firefox, IE 7 și versiuni ulterioare, versiuni mobile ale browserelor.

Un set de instrumente pentru dezvoltarea aplicațiilor web. Mai puțin limbaj, aspect adaptiv pe 12 coloane, suport pentru dispozitive mobile, tablete și monitoare, multe componente, butoane, meniuri derulante, stil propriu câmpuri de intrare, liste, anteturi, etichete, pictograme, alerte, file, bare de progres, sfaturi cu instrumente, acordeon, carusel și așa mai departe, diverse plugin-uri Javascript, suport pentru schele, inclusiv aplicarea stilului Bootstrap la HTML deja generat.

Prezența designului adaptiv este o necesitate - viața a dovedit acest lucru cu rake-ul său, niciun Joomla mobil nu oferă un efect precum adaptarea directă a site-ului. Astăzi vă voi spune cum să faceți un design responsive prin editare Stiluri CSS folosind capul și degetele. Nu va fi posibil să punem totul în detaliu, deoarece fiecare șablon are nuanțe, dar voi da un impuls pentru a începe adaptarea.

Adaptare pentru desktop

În primul rând, îl adaptăm pentru desktop. Aceasta este etapa de bază, de la care începe dansul cu tamburin. Mulți oameni percep în mod greșit lumea, gândindu-se că cu afișarea unui site activată calculatoare obișnuite nu au probleme, deoarece cineva a proiectat șablonul și arată neted la rezoluție normală. În funcție de rezoluția monitorului, da, dar ce zici ecran mai mare, cum arăți cu absolut și pixeli pe un ecran cu o rezoluție de 1920x1080? Scopul adaptării designului este de a afișa site-ul în mod normal pe dispozitivele mobile și de a evita orice probleme pe ecrane mari.

ce facem? Principalul lucru este să traduci totul valori mari V șablon css de la pixeli (px) la procente (%). Există mai multe reguli aici:

  1. - Schimbăm px cu % numai pentru valori mari, nu este nevoie să schimbăm 5 px cu 1% (de exemplu),
  2. - Faceți toată munca prin Firebug, apoi transferați valorile în viața reală.

Puțin pentru înțelegere comună. Aveți un site web pe care lățimea paginii este de 1000 px, are trei blocuri - unul central de 800 px și două bare de site laterale de 100 px. Aceasta înseamnă că după înlocuire cu procente, dimensiunea paginii va deveni 100%, containerul central va fi de 80%, iar blocurile laterale vor fi de 10%. Aspru, dar de înțeles. Acum puțin mai multe detalii.

Am înainte de adaptare (salvat pentru istorie dosar vechi CSS) containerul principal a fost stilat astfel:

#container(margin:0 auto;width:1100px; …

După adaptare a devenit așa:

#container(margin:0 auto;width:77%;overflow: ascuns !important; …

Meniul de sus s-a schimbat din:

Top-meniu>ul>li ul(width:155px; …

Top-meniu>ul>li ul(width:90%; …

Iar offset-ul blocului de conținut este implementat cu:

#conținut(marja:0 220px; …

#conținut(marja:0 20% …

Atenție la cod:

overflow: ascuns !important;

Îl folosim pentru a dezactiva derularea orizontală, acest lucru este util pentru adaptarea mobilă, uneori, are sens să indicați doar interzicerea derulării orizontale folosind:

overflow-x: ascuns !important;

Efectuați toate lucrările prin Firebug sau inspectorul Google, verificați cu ochii - site-ul ar trebui să arate la fel după ce ați convertit px în %. Nu trebuie să micșorați încă ecranul; nu am ajuns încă la adaptarea mobilă, dar am făcut munca de bază pentru ecranele mari.

CSS pentru dispozitive mobile

Baza de date a fost creată, apropo, aceasta este cea mai dificilă etapă acum trebuie să ne asigurăm că site-ul este afișat corect pe toate dispozitivele mobile; Există puține manipulări anterioare, de mai jos ecran mic Nu este posibil să comprimați totul în procente. De acord, este imposibil să vezi o bară de site cu o lățime de 10% pe un smartphone cu o rezoluție de 320 px.

Va trebui să folosim ecranul @media și care efectuează modificări de stil pentru dispozitivele cu o anumită rezoluție. Am stabilit mai întâi prin reducerea ecranului browserului la ce rezoluție aveam probleme de afișare. Îngustând ecranul, am găsit punctul meu de „curbură”, acesta începe de la o lățime de 1000px, ceea ce înseamnă că trebuie să înregistrați principalele stiluri mobile de aici - tot ceea ce va fi afișat mai mult în stilurile unui desktop obișnuit, și mai puțin în stiluri separate.

Exemplu @media ecran și

Am scris CSS pentru dispozitive mobile pe Șablon Joomla 1.5 cam asa:

@media ecran și (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)

@media ecran și (max-width:400px)(td(word-break:break-all;)

ecran @media și (max-width:1000px)(td(word-break:break-all;).numerele paginii, #footer, #navigation, #header,.logo,.nav-box (afișare: niciunul !important ;) #conținut (poziție: automat; lățime: 80%;marja-jos: 0;marja-stânga: 10%;marja-dreapta: 20%;) #container ( lățime: 90% !important;).content-box (lățime:110%).conținut-box h1 (dimensiune font: 130%;).content-box h2 (dimensiune font: 110%;).content-box h3 (dimensiune font: 120%;).conținut -box h4 (font-size: 100%;).top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)

Câteva detalii despre cod.

Când lățimea ecranului este mai mică de 1000 px, barele laterale de site, antetul, paginarea și subsolul nu se mai afișează. În opinia mea, nu sunt necesare în versiunea mobilă. Acesta este ceea ce face codul:

Numerele paginilor, #footer, #navigation, #header,.logo,.nav-box (afișare: niciunul !important;).

În mod implicit, în Joomla mobil 3 și versiuni ulterioare, blocurile laterale coboară, întinzând pagina până la disgrație, așa că chiar și pe motoarele noi poți corecta unele lucruri manual.

Alte valori sunt indicate și pentru blocurile containerului principal și fereastra de conținut, iar rezultatul H1-H4 este convertit în procente (pixelii mi se potrivesc pentru desktop). S-au făcut și corecții la ieșirea din meniul de sus (din fericire, trebuie redus la minimum, dar acest lucru nu este critic și o voi face mai târziu) și afișarea imaginilor a fost schimbată:

img(max-width:96% !important;height:auto !important;).

Pentru aceștia, este indicat că dimensiunea maximă a imaginii în lățime este de 96% (cu indentații frumos), iar înălțimea este setată automat.

Specificul s-a terminat, încă o dată sens general adaptarea site-ului (design) prin CSS.

  1. - Schimbați valorile px mari la %,
  2. - Ne înregistrăm separat @media ecran și pentru dispozitive mobile.

Prin ecranul @media și asigurați-vă că le închideți pe cele inutile blocuri mobile pentru ieșire, dar convertiți în % acele valori care nu sunt afișate corect deoarece au fost lăsate în pixeli în versiunea desktop a CSS.

Ca rezultat, experiența utilizatorului când a lucrat cu Joomla Mobile a fost de 65-70%, cu design responsive folosind CSS, a devenit 99%. Concluziile sunt evidente: Yandex și Goole nu au fost testate pentru adaptabilitate, dar acum trec cu succes.

Crearea unui șablon de site responsive este destul de ușoară, dar păstrarea elementelor echilibrate în toate punctele din șablon este o adevărată artă. Acest tutorial prezintă 5 tehnici de utilizat în CSS pentru un șablon receptiv. Sunt foarte proprietăți simple CSS precum min-width, max-width, overflow și valori relative, dar toate joacă un rol important în dezvoltarea design-urilor receptive.

1. Video adaptiv

Acest truc CSS permite videoclipului încorporat să se întindă până la limitele specificate.

Video (poziție: relativă; padding-bottom: 56,25%; înălțime: 0; overflow: ascuns; ) .video iframe, .video object, .video embed (poziție: absolut; sus: 0; stânga: 0; lățime: 100% ; înălțime: 100% )

2. Lățimea minimă și maximă

Proprietatea max-width vă permite să setați lățimea maximă a unui element. Ar trebui folosit pentru a preveni extinderea unui element dincolo de un anumit cadru.

Container cu proprietatea de lățime maximă

Exemplul de mai jos definește dimensiunea containerului ca 800 px, dar setează limita de dimensiune la 90%.

Container (lățime: 800px; lățime maximă: 90%; )

Imagine adaptivă

Puteți face o imagine redimensionată automat la dimensiunea maximă folosind proprietățile max-width:100% și height:auto.

Imagine (lățimea maximă: 100%; înălțime: automată; )

Codul de mai sus este pentru imagine adaptativă funcționează în IE7 și IE9, dar nu funcționează în IE8. Pentru a corecta situația, trebuie să adăugați proprietatea width:auto. Puteți folosi condițional regula CSS special pentru IE8 sau mai jos truc dat pentru IE:

@media \0screen ( img ( lățime: auto; /* pentru ie 8 */ ) )

proprietatea lățimii min

Proprietatea min-width este opusul proprietății max-width. Setează lățimea minimă posibilă a elementului. Mai jos este un exemplu de utilizare a proprietății min-width pentru a preveni câmpul de intrare să devină prea mic atunci când micșorați.

3. Valori relative

ÎN șablon adaptiv utilizare valori relative poate simplifica semnificativ codul CSS și poate îmbunătăți aspect proiecta.

Câmpuri relative

Mai jos este un exemplu de comentarii care folosesc lățimea relativă a marginii din stânga pentru a crea indentare într-o structură arborescentă. În loc de o valoare absolută în px, se folosește o valoare procentuală pentru următorul nivel din listă. În partea stângă a figurii, puteți vedea asta pe dispozitivele mobile spatiu disponibil pentru elementele listei pot să nu fie suficiente pentru afișarea normală dacă sunt utilizate valori absolute.

Dimensiunea relativă a fontului

Folosind valori relative pentru dimensiunea fontului (em sau %), puteți obține cu ușurință modificări corespunzătoare în înălțimea liniilor și dimensiunile indentării atunci când adaptați șablonul la dimensiunea ecranului dispozitivului. De exemplu, toate elementele asociate sunt redimensionate automat atunci când setați dimensiuni noi de font pentru elementul părinte.

Umplutură relativă

Figura de mai jos demonstrează beneficiile utilizării unei valori % relative pentru umplutură. Blocul din stânga are spațiu dezechilibrat atunci când se aplică valori absolute px. Blocul din dreapta are priveliste minunata cu umplere proporţională de conţinut.

4. Truc cu overflow:proprietatea ascunsă

Puteți împiedica înfășurarea textului în jurul unui element folosind proprietatea de overflow. Foarte simplu și mod util. Puteți despacheta textul în jurul elementului anterior și puteți menține structura conținutului.

Proprietatea max-width vă ajută să încadrați text care nu poate fi spart (cum ar fi o adresă URL lungă) pe mai multe rânduri în loc de doar una.

Despărțire-cuvânt (înfășurare cuvânt: ruptură-cuvânt; )