Meniul
AcasăTelefon

Ce puncte să folosiți pentru designul adaptiv. Design web adaptabil și receptiv. Ce este designul responsive

Aspectul adaptiv modifică designul paginii în funcție de comportamentul utilizatorului, platformă, dimensiunea ecranului și orientarea dispozitivului și este o parte integrantă a dezvoltării web moderne. Vă permite să economisiți semnificativ și să nu trebuie să desenați design nou pentru fiecare rezoluție, dar modificați dimensiunea și locația elementelor individuale.

Acest articol va analiza principalele elemente ale site-ului și modul de adaptare a acestora.

Reglarea rezoluției ecranului

În principiu, puteți împărți dispozitivele în diferite categoriiși compoziție pentru fiecare dintre ele separat, dar va dura prea mult timp și cine știe ce standarde vor fi în cinci ani? În plus, conform statisticilor, avem o gamă întreagă de rezoluții diferite:

Devine evident că nu vom putea continua să proiectăm pentru fiecare dispozitiv separat. Dar ce să faci atunci?

Soluție parțială: faceți totul flexibil

Desigur, aceasta nu este o metodă perfectă, dar elimină majoritatea problemelor.

Ethan Marcotte a creat un șablon simplu care demonstrează utilizarea aspectului receptiv:

La prima vedere poate părea că totul este ușor, dar nu este. Aruncă o privire la logo:

Dacă reduceți întreaga imagine, inscripțiile vor deveni ilizibile. Prin urmare, pentru a salva sigla, imaginea este împărțită în două părți: prima parte (ilustrare) este folosită ca fundal, a doua (logo) își schimbă dimensiunea proporțional.

Elementul h1 conține o imagine ca fundal, iar imaginea este aliniată la fundalul containerului (antet).

Imagini flexibile

Lucrul cu imagini este una dintre cele mai importante probleme atunci când lucrați cu design responsive. Există multe moduri de a redimensiona imaginile, iar cele mai multe dintre ele sunt destul de simplu de implementat. O soluție este utilizarea lățimii maxime în CSS:

Imagine (lățimea maximă: 100%;)

Lățimea maximă a unei imagini este de 100% din lățimea ecranului sau a ferestrei browserului, deci cu cât lățimea este mai mică, cu atât imaginea este mai mică. Rețineți că lățimea maximă nu este acceptată în IE, așa că utilizați lățime: 100% .

Metoda prezentată este o opțiune bună pentru creare imagini adaptive, dar schimbând doar dimensiunea, vom lăsa greutatea imaginii la fel, ceea ce va crește timpul de încărcare pe dispozitivele mobile.

O altă modalitate: imagini receptive

Tehnica, introdusă de Filament Group, nu numai că redimensionează imaginile, ci și comprimă rezoluția imaginilor pe ecrane mici pentru a accelera încărcarea.

Această tehnică necesită mai multe fișiere disponibile pe Github. Mai întâi luăm fișierul JavaScript ( rwd-images.js), dosar .htaccessȘi rwd.gif(fișier imagine). Apoi folosim ceva HTML pentru a lega rezoluțiile mari și mici: mai întâi imagine mică cu prefix .r(pentru a arăta că imaginea ar trebui să răspundă), apoi un link către imagine mare folosind data-fullsrc:

Pentru orice ecran mai lat de 480 px, va fi încărcată o imagine cu rezoluție mai mare ( largeRes.jpg), iar pe ecranele mici se va încărca ( smallRes.jpg).

Pe iPhone și iPod Touch există o caracteristică: un design creat pentru ecrane mari se va micșora pur și simplu într-un browser cu o rezoluție mică, fără defilare sau suplimentare aspect mobil. Cu toate acestea, imaginile și textul nu vor fi vizibile:

Pentru a rezolva această problemă, utilizați metaetichetă:

Dacă scara inițială este egală cu unu, lățimea imaginilor devine egală cu lățimea ecranului.

Structură personalizabilă de aspect al paginii

Pentru modificări semnificative ale dimensiunii paginii, poate fi necesar să modificați aranjamentul general al elementelor. Este convenabil să faceți acest lucru prin dosar separat cu stiluri sau, mai eficient, printr-o interogare media CSS. Nu ar trebui să existe probleme, deoarece majoritatea stilurilor vor rămâne aceleași și doar câteva se vor schimba.

De exemplu, ai fisierul principal cu stiluri care definesc #wrapper , #content , #sidebar , #nav împreună cu culorile, fundalul și fonturile. Dacă stilurile principale vă fac aspectul prea îngust, scurt, lat sau înalt, puteți identifica acest lucru și include stiluri noi.

style.css (principal):

/* Stiluri de bază care vor fi moștenite de foaia de stil copil */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elemente structurale */ #wrapper( lățime: 80%; margine: 0 auto; fundal: #fff; padding: 20px; ) #conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) # sidebar-left( lățime: 20%; float: stânga; margin-right: 3%; ) #sidebar-right( lățime: 20%; float: stânga; )

mobile.css (copil):

#wrapper( lățime: 90%; ) #conținut( lățime: 100%; ) #sidebar-left( lățime: 100%; clar: ambele; /* Stiluri suplimentare pentru noul design */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( lățime: 100%; clear: ambele; /* Stil suplimentar pentru noul nostru aspect */ border-top: 1px solid #ccc; margin-top: 20px; )

Pe ecran lat stânga și dreapta panouri laterale se potriveste bine in lateral. Pe ecranele mai înguste, aceste blocuri sunt situate unul sub celălalt pentru o mai mare comoditate.

Interogări media CSS3

Să vedem cum puteți utiliza interogări media CSS3 pentru a crea modele receptive. min-width specifică lățimea minimă a ferestrei sau a ecranului browserului la care vor fi aplicate anumite stiluri. Dacă orice valoare este sub min-width , stilurile vor fi ignorate. max-width face opusul.

Ecran @media și (lățime minimă: 600 px) ( .hereIsMyClass ( lățime: 30%; float: dreapta; ) )

Interogarea media va funcționa numai atunci când lățimea minimă este mai mare sau egală cu 600 px.

Ecran @media și (lățime maximă: 600 px) ( .aClassforSmallScreens (clar: ambele; dimensiunea fontului: 1.3em; ) )

În acest caz, clasa ( aClassforSmallscreens) va funcționa atunci când lățimea ecranului este mai mică sau egală cu 600 px.

În timp ce lățimea minimă și lățimea maximă se pot aplica atât lățimii ecranului, cât și lățimii ferestrei browserului, este posibil să fie nevoie să lucrăm doar cu lățimea dispozitivului. De exemplu, pentru a ignora browserele deschise într-o fereastră mică. Puteți utiliza min-device-width și max-device-width pentru aceasta:

@media ecran și (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen și (min-device-width: 768px) ( .minimumiPadWidth ( clar: ambele; margin-bottom) : 2px solid #ccc) )

În special pentru iPad, interogările media au proprietatea orientare, ale căror valori pot fi fie peisaj(orizontală), sau portret(vertical):

@ecran media și (orientare: peisaj) ( .iPadLandscape ( lățime: 30%; float: dreapta; ) ) @ecran media și (orientare: portret) ( .iPadPortrait ( clar: ambele; ) )

De asemenea, puteți combina valorile interogării media:

Ecran @media și (lățime minimă: 800 px) și (lățime maximă: 1200 px) ( .classForaMediumScreen ( fundal: #cc0000; lățime: 30%; float: dreapta; ) )

Acest cod va fi executat numai pentru ecrane sau ferestre ale browserului cu lățime cuprinsă între 800 și 1200 px.

Puteți încărca o anumită foaie cu stiluri pentru diferite valori de interogare media, astfel:

JavaScript

Dacă browserul dvs. nu acceptă interogări media CSS3, atunci înlocuirea stilurilor se poate face cu folosind jQuery:

$(document).ready(function())( $(window).bind(„resize”, resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Dacă lățimea este mai mică de 600 px , foaia de stil mobilă este utilizată if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Dacă lățimea este mai mare de 600 px, se folosește foaia de stil pentru desktop $("link").attr((href: "style.css")); ) ) ));

Afișaj opțional conţinut

Abilitatea de a micșora și rearanja elementele pentru a se potrivi pe ecrane mici este excelentă. Dar nu este cea mai bună opțiune. Dispozitivele mobile prezintă de obicei un set mai larg de modificări: navigare simplificată, conținut mai concentrat, liste sau rânduri în loc de coloane.

Iată marcajul nostru:

Conținut din bara laterală din stânga | Conținut din bara laterală din dreapta

Conținut principal O bară laterală din stânga O bară laterală din dreapta

style.css (principal):

#conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) #sidebar-left( lățime: 20%; float: stânga; margine-dreapta: 3%; ) #sidebar-right( lățime: 20 %; float: left ) .sidebar-nav( display: none; )

mobile.css (simplificat):

#conținut( lățime: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Dacă dimensiunea ecranului este redusă, puteți, de exemplu, să utilizați un script sau fișier alternativ cu stiluri pentru a mări spațiul alb sau pentru a înlocui navigarea pentru o mai mare comoditate. Astfel, având capacitatea de a ascunde și afișa elemente, de a schimba dimensiunea imaginilor, elementelor și multe altele, puteți adapta designul oricărui dispozitiv și ecran.

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ă procedați design adaptiv prin editarea stilurilor 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 lumea în mod greșit, crezând că nu au probleme cu afișarea site-ului pe computere obișnuite, deoarece cineva a așezat ș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:

  • - Schimbăm px cu % numai pentru valori mari, nu este nevoie să schimbăm 5 px cu 1% (de exemplu),
  • - 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.

    Înainte de adaptare (l-am salvat pe cel vechi pentru istorie) fișier 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 elimina derularea orizontală, acest lucru este util pentru adaptarea mobilă, uneori are sens să indicați doar o interdicție defilare orizontală prin utilizarea:

    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ă strângeți încă ecranul, încă nu am ajuns la adaptarea mobilă, am făcut-o încă munca de baza pentru ecrane mari.

    CSS sub 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 (dimensiune font: 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:

    Numere de pagină, #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 corecții la ieșire. 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 ei este indicat că dimensiune maximă Lățimea imaginilor este de 96% (cu indentări frumoase), iar înălțimea este setată automat.

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

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

    • Prin ecranul @media și asigurați-vă că închideți blocurile de afișare care nu sunt necesare pentru mobil, dar convertiți în % acele valori care sunt afișate incorect, 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.

    Toată lumea vorbește despre design web responsive. Dar asta înseamnă că toată lumea înțelege pentru ce este?

    Designul responsive nu se referă doar la dezvoltarea de site-uri web pentru dispozitive mobile, aici despre care vorbim despre adaptarea layout-urilor pentru marimi diferite ecran (vizualizări).

    În acest tutorial, ne vom uita la principiile de bază din spatele designului web responsive pentru a înțelege mai bine această tehnică. În continuare, vom crea un site web receptiv care se va scala perfect pe ecrane mari și mici. Designul web responsive a devenit foarte popular în rândul din ce în ce mai mulți oameni care folosesc dispozitive mobile precum iPhone, iPad, BlackBerry și alte smartphone-uri și tablete compatibile cu internet.

    Este important să înțelegeți că site-ul nu trebuie creat pentru un anumit desktop sau dispozitiv mobil. Ceea ce este important aici este capacitatea aspectului de a se adapta la diferite dimensiuni.

    Frustrarea utilizatorului

    Unii oameni cred că este normal ca utilizatorul să reducă funcționalitatea și să elimine conținutul pe care îl consideră neimportant. Dar cum poți fi sigur că informațiile pe care le-ai tăiat sau mutat pe o pagină secundară nu sunt conținutul care este cel mai important pentru mine?!

    În primul rând, trebuie să înțelegeți că designul responsive nu este doar despre designul mobil. În al doilea rând, dezvoltarea unui site web responsive bun necesită un numar mare de timp și efort, nu doar ajutorul interogărilor media. Cu un număr mare și în creștere de dispozitive web, este foarte important să oferiți site-ului dvs. șansa de a facilita în mod eficient experiența utilizatorului.

    Pentru un site web receptiv, putem folosi același cod atât pentru desktop, cât și pentru mobil. Acest lucru este convenabil deoarece nu trebuie să ajustam separat conținutul pentru fiecare dispozitiv. Dar multe site-uri web își ascund conținutul, considerându-l inutil pentru utilizatorii de telefonie mobilă. Există două probleme cu asta:

    • În primul rând, penalizează efectiv utilizatorii de telefonie mobilă care navighează pe site.
    • În al doilea rând, stilurile ascunse în CSS nu înseamnă că conținutul nu se încarcă. Acest lucru poate avea un impact masiv asupra eficienței, în special pentru cei cu conectivitate slabă.

    Prin urmare, cea mai bună abordare a dezvoltării site-ului web este să luați în considerare mobil sau dispozitive mici, In primul rand. În acest fel, vă puteți concentra pe cele mai importante informații pe care site-ul dvs. trebuie să le livreze. Și apoi, dacă este necesar, puteți folosi metode condiționaleîncărcări în care grilele dvs. de aspect, imaginile mari și interogările media sunt stratificate peste un design de ecran mic existent.

    Ghid pas cu pas

    Pentru acest tutorial, am creat un site web care se adaptează perfect între ecrane mari și mici. Salvați tot conținutul, pe toate dimensiunile de ecran. Și folosind interogări media, navigarea va fi comutată de la un afișaj orizontal la unul vertical pentru dispozitivele mai mici.

    Un element cheie al flexibilității în designul receptiv este lățimea fluidă a aspectului. Tot ce trebuie să faceți este să creați lățimi de wrapper, conținut și coloane care se vor adapta la diferite lățimi ale dispozitivului. Nu este nimic nou, dar este mai important acum ca niciodată. Pentru a menține lucrurile simple, vom crea o pagină fluidă formată din navigare, o imagine principală și două coloane, care ține cont de locația pe dispozitive diferite dimensiuni. Am inclus și respond.min.js, care permite interogărilor media să funcționeze în IE6-8.

    Principal Structura HTML:

    Demo de site responsive

    • Derulați la conținut
    Siglă
    • Acasă
    • Cumpără
    • Serviciu
    • Contacte
    Poveste

    Istoria modelului Mercedes SL datează din 1954 - atunci nemții au prezentat Mercedes 190 SL cu două uși la Salonul Auto de la New York. Vă puteți imagina nivelul de șoc estetic în rândul vizitatorilor salonului auto de atunci. Sub caroseria de o frumusețe captivantă se afla o platformă scurtată de la Mercedes W120 Ponton sedan și o monococă din oțel. Suspensia era complet independentă - cu un braț dublu în față și arbori de axă oscilante în spate. Lungime - 4290 mm, distanta intre axe - 2400 mm.

    Când vine vorba de CSS, setarea lățimii maxime este o idee bună, va împiedica scalarea site-ului pe ecrane uriașe, dar nu va împiedica micșorarea paginilor. Una dintre principalele probleme atunci când treceți de la lățime fixă ​​la fluidă este imaginile. În CSS, există o soluție simplă la această problemă. Doar setați lățimea imaginii la 100%. Să adăugăm și automat pentru înălțimea imaginilor pentru a evita imaginile stricate în Opera și Safari pe ecrane mici:

    /* Aspect */ #wrapper ( lățime: 96%; lățime maximă: 920px; margine: automată; padding: 2%; ) #principal ( lățime: 60%; margine-dreapta: 5%; float: stânga; ) deoparte ( lățime: 35%; float: dreapta; ) /* Logo H1 */ antet h1 ( înălțime: 98px; lățime: 216px; float: stânga; afișare: bloc; fundal: url(images/sllogo.png) 0 0 no- repetare; text-indent: -9999px ) /* Navigare */ header nav ( float: right; margin-top: 40px; ) header nav li ( display: inline; margin-left: 15px; ) header nav ul li a ( text-decoration:none; color:#333;) #skipTo ( afișare: none; ) #skipTo li ( fundal: #ccc; ) /* Imagine principală*/ #banner ( float: stânga; margin-bottom: 15px; width : 100% ) #banner img ( lățime: 100%; înălțime: auto; )

    Imaginea ta va apărea pe elementul părinte la lățimea completă și se va micșora odată cu ea. Doar asigurați-vă că lățimea maximă a imaginilor nu depășește lățimea maximă a containerului său.

    Utilizarea imaginilor mari poate afecta timpul de încărcare. Prin urmare pentru mici ecrane, există o metodă receptivă pentru imagini care detectează dimensiunea ecranului utilizatorului și produce o imagine mai mică/mai mare în funcție de ceea ce este necesar. Această metodă este încă greu de numit ideală, dar merită totuși luată în considerare.

    Comutați navigarea principală

    Motivul principal pentru care trebuie să vă schimbați navigarea este din cauza minimizării care apare, ceea ce poate face ca butoanele să nu fie citite și să fie dificil de apăsat. Utilizarea acestei metode va ușura viața utilizatorului. Veți observa, de asemenea, în cod că am făcut modificări la secțiunile #main și aside pentru a le combina într-o singură coloană.

    /* Interogări media */ @media ecran și (max-width: 480px) ( #skipTo ( display: block; ) header nav, #main, aside ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) header nav li ( margine: 0; fundal: #ccc; display: block; margin-bottom: 3px; ) header nav a ( afișare: bloc; padding: 10px; text-align: center; )

    Veți observa că pe unele dispozitive mobile, site-ul dvs. web se va micșora automat pentru a se potrivi. a acestui ecran. Acest punct devine o problemă atunci când trebuie să creștem dimensiunea ecranului pentru a naviga prin conținut incomod.

    Pentru a permite interogărilor media să intre în vigoare, un site obișnuit optimizat pentru mobil și receptiv ar trebui să conțină ceva de genul următor:

    Proprietatea width este responsabilă pentru dimensiunea ferestrei de vizualizare. Poate fi setat la un anumit număr de pixeli, lățime=960 sau la valoarea lățimii dispozitivului, care este lățimea ecranului în pixeli la scară de 100%. Proprietatea initial-scale controlează scara la prima încărcare a paginii. proprietățile de scară maximă, scară minimă și scalabile de utilizator controlează modul în care utilizatorii pot scala pagina (mai mare/mai mică).

    Mai recent, cu 10 ani în urmă, atunci când creau site-uri web, designerii web erau ghidați de o anumită lățime medie de ecran a monitoarelor utilizatorilor. La început, cea mai comună rezoluție a fost 800*600, apoi a crescut la 1024*768. Pe Internet s-ar putea întâlni următoarele cuvinte: „Site-ul este optimizat pentru o astfel de rezoluție.” Odată cu creșterea numărului de dimensiuni de ecran, aspectul de cauciuc al site-urilor web a devenit popular, despre care am scris în articolul cu același nume. Datorită acestui tip de layout, a fost posibilă vizualizarea site-urilor pe monitoare cu rezoluții diferite.

    Cu toate acestea, în anul trecut aspectul cauciucului a încetat să mai fie un „panaceu”. Pe de o parte, au apărut monitoarele cu dimensiuni uriașe de ecran, pe de altă parte, a avut loc revoluția mobilă - a crescut numărul de conexiuni la internet a dispozitivelor mobile (laptop-uri, smartphone-uri, tablete). mai mult număr computere desktop. Traficul mobil este în creștere și este nevoie de a afișa corect site-ul pe ecrane un numar mare diverse diferite dispozitive. Gama de dimensiuni este prea largă.

    Dacă site-ul arată rău pe ecranele mici, atunci vizitatorul pur și simplu îl părăsește, traficul scade și factori comportamentali.

    Pentru a verifica cum arată site-ul dvs. când este vizualizat diverse dispozitive, puteți utiliza serviciul Screenfly. Pentru a face acest lucru, introduceți adresa site-ului și selectați dintr-un număr suficient de lista mare dispozitivul dorit. Acesta poate fi un computer desktop sau tablete tipuri variate, și telefoane mobile. Puteți schimba orientarea ecranului de la peisaj la portret și invers.

    Cum se rezolvă problema afișării normale a site-ului web pe diferite dispozitive? Există două căi de ieșire:

    • Utilizați două versiuni ale site-ului, cea obișnuită pentru computere desktop, și mobil.
    • Utilizați un design receptiv.

    Care dintre aceste opțiuni de aplicat este, desigur, la latitudinea proprietarului sau clientului site-ului să decidă. Dacă site-ul a fost creat cu mult timp în urmă, are un design desenat manual care face parte din brand, atunci ar putea merita să faceți un versiune mobila, și lăsați-l pe cel vechi. Pentru site-urile web noi, desigur, ar trebui să alegeți un design responsive.

    Ce este designul responsive?

    Ce fel de design este acesta și prin ce diferă de cauciuc?

    Șablonul de cauciuc nu își schimbă structura atunci când lățimea ecranului se modifică, ci doar își schimbă dimensiunile. De exemplu, o pagină web are trei coloane: în stânga este un meniu cu o lățime de 25% din lățimea ferestrei, în centru este conținut – ​​50%, în dreapta este o bară laterală – 25%. Cu o lățime a ferestrei de 1000 px, acestea vor avea dimensiuni de 250, 500 și, respectiv, 250 px, ceea ce este destul de normal. Dar dacă utilizați un telefon mobil cu un ecran mic de 320 px lățime, coloanele se vor micșora la dimensiuni de 80, 160, 80 px și vor deveni ilizibile.

    Care este soluția? Implică schimbarea radicală a paginii web. Această modificare constă în faptul că, după o scădere treptată a lățimii coloanelor, structura paginii este reconstruită - este întinsă într-o singură coloană. Dar aceasta nu este singura diferență.

    Cerințe de design receptiv
    • Se adaptează la dimensiunea și orientarea ecranului, variind de la monitoare mari PC-uri desktop și sfârșit telefoane mobile.
    • Redimensionați imaginile când schimbați rezoluția ecranului. Chiar și pe site-urile cu un design „fluid”, dimensiunile imaginii nu se schimbă, iar la o anumită lățime a ecranului, dungă orizontală derulați pentru a le vizualiza. Când utilizați un design responsive, imaginile „se potrivesc” pentru a se potrivi cu dimensiunea ecranului.
    • Eliminarea elementelor șablonului neimportante. Ele pot fi ca elemente decorative, și software care nu funcționează pe dispozitivele mobile.
    • De mare viteză descărcări. Viteză internet mobil este încă relativ mic, iar acest lucru trebuie luat în considerare la dezvoltarea unui site destinat vizionarii pe dispozitive mobile.
    • Utilizarea este relativă nasturi mari. Utilizarea dispozitivelor mobile intrare tactilă iar absența unui cursor trebuie luată în considerare la elaborarea designului.
    • Lucreaza cu funcții mobile, de exemplu, geolocalizarea.
    Cum este creat designul receptiv

    Acest design se bazează pe utilizare Media CSS interogări (interogări media). Datorită acestor solicitări, sunt determinați mai întâi parametrii dispozitivului pe care îl folosește vizitatorul și, în funcție de această alegere, se conectează stilul adecvat, adică cu design adaptiv, un site este utilizat cu un set de stiluri pentru diferite dispozitive. De exemplu, dacă un vizitator accesează site-ul cu computer obișnuit, o foaie de stil este conectată și vede un site cu un antet mare colorat, un meniu orizontal, mai multe coloane de conținut, iar atunci când utilizați iPad-ul, se aplică un stil diferit și, în loc de un antet uriaș, este un logo mic. afișat, meniul se transformă într-o listă verticală, iar conținutul este extins într-o singură coloană.

    Șabloane receptive

    Este posibil să convertiți un șablon de site existent într-o versiune responsive? Desigur, puteți dacă aveți suficiente cunoștințe de HTML și CSS. Dar, dacă folosești orice sistem de gestionare a conținutului - WordPress, Joomla!, Drupal, atunci este mai bine să găsești șablon gata făcut, Acum șabloane adaptive s-au dezvoltat multe. Apropo, în articolul meu „Cum să aleg un șablon pentru WordPress” ar trebui să adăugați acum un alt element „Verificarea șablonului pentru receptivitate”.

    Deci, putem spune că designul responsive este în prezent Este cel mai mult într-un mod modern dezvoltarea site-ului web și, în ciuda complexității sale relative, este viitorul. Progresul nu stă pe loc, apar dispozitive noi, mai complexe și software le devine și mai dificil.

    Apropo, tocmai a apărut un curs inedit al lui Andrei Kudlay. Folosind Cadru bootstrap, astăzi puteți crea un site web cu un design frumos, plăcut, profesional și nu trebuie să fiți un profesionist în aspect. Folosind cadre, chiar și cel mai începător în construirea de site-uri web poate aranja o pagină, poate crea un site web cu o singură pagină sau o pagină de destinație. Mai mult, site-ul va fi destul de profesionist, iar timpul petrecut la crearea lui este minim.

    Toate acestea sunt foarte serioase și, pentru a lua o pauză, vă sugerez să puneți cap la cap și să vă uitați la un alt tablou al conaționalului meu, Artistul Poporului din Rusia N.P.

    Scrieți părerea dvs. despre designul responsive în comentarii.

    Salutare tuturor! Recent, uitându-mă la statisticile unuia dintre proiectele mele, mi-am dat seama că era timpul să învăț cum să creez un design adaptiv pentru site-ul web, adică un design care să arate bine pe ambele computere desktop atât laptopuri cât și dispozitive mobile. Aruncă o privire pentru tine, sugerează Metrica.

    Cum iti place aceasta poza? Poate că în unele subiecte procentul traficul mobil Va fi mai puțin, în altele va fi mai mult, dar în orice caz, nu mai poți ignora vizitatorii care te citesc de pe un smartphone sau tabletă.

    Știți cum văd utilizatorii de dispozitive mobile site-ul dvs.? Din fericire, există o modalitate de a verifica serviciu excelent— responsinator.com

    Totul aici este revoltător de simplu - introduci adresa site-ului și vezi cum arată pe dispozitivele mobile. Să luăm un exemplu de blog cu care probabil toată lumea este familiarizată.


    La Alexandru Borisov frumos șablon, este imediat evident că s-au investit mulți bani în design și aspect. Totuși, citirea unui blog de pe telefon este foarte incomod și nu m-aș mira dacă rata de eșec în rândul utilizatorilor de dispozitive mobile este mult mai mare decât în ​​rândul celor care accesează site-ul de pe un computer.

    Ce să fac? Există două căi de ieșire: lăsați totul așa cum este și urmăriți cum alte proiecte ocolesc pe ale dvs. în rezultatele căutării. motoare de căutare sau faceți designul site-ului dvs. web receptiv.

    Ce este designul responsive

    La început, nu am văzut diferența dintre aspectul adaptiv și cel „fluid”, când dimensiunea blocurilor se schimbă în funcție de lățimea ecranului. Cu toate acestea, există o diferență.

    Designul responsive nu doar se întinde sau se micșorează în lățime, se adaptează la dimensiunea ecranului, schimbând uneori complet stilul blocurilor.

    Cel mai simplu exemplu: zona de conținut este întinsă pe toată lățimea ecranului, iar bara laterală fie este mutată în jos, fie dispare complet din pagină. Sau meniul se transformă dintr-unul obișnuit orizontal într-o listă derulantă.

    Cum să faci un design responsive pentru site-ul tău

    În funcție de bugetul dvs. și de cunoștințele CSS/HTML, pot exista mai multe opțiuni.

    Comandați un aspect adaptiv de la un freelancer

    Opțiunea cea mai corectă, după părerea mea, este și cea mai nepopulară. Pentru că plăcerea nu este ieftină. Și totuși, dacă fondurile permit și nu există dorința de a înțelege complexitățile aspectului, este mai bine să găsești un studio sau un freelancer care să-ți adapteze șablonul pentru dispozitive mobile sau să creeze unul nou. Și știți deja să verificați funcționarea acestuia pe dispozitive cu rezoluții diferite - responsinator.com vă poate ajuta.

    Găsi design gata făcut

    ÎN În ultima vreme Aproape toți designerii încearcă să-și adapteze șabloanele pentru dispozitivele mobile. Puteți căuta un design gata făcut, de exemplu, aici:

    • www.templatemonster.com este una dintre cele mai populare colecții de șabloane plătite pentru diverse CMS și doar site-uri HTML.
    • www.templatemo.com - multe opțiuni gratuite design modern.

    Această opțiune este potrivită pentru cei care nu urmăresc un design exclusiv sau care pot face propriile modificări codului pentru a face șablonul unic.

    Utilizați cadre

    Cadrul - s-ar putea spune, cadrul șablonului, fișierele sale principale și o grilă de blocuri. Designerii le iubesc pentru ușurința în utilizare și economisirea de timp, deoarece un șablon „pește” gata făcut vă permite să nu pierdeți timpul cu rutină. Dacă știți să lucrați cu cadre, folosirea acestora pentru a crea un design responsive este o soluție excelentă.

    Veți găsi o listă uriașă de cadre adaptive pentru fiecare gust pe Habré. Dar cele mai multe dintre ele sunt destul de greu de folosit și grele ca volum. Prin urmare, pentru cei care iubesc minimalismul, recomand o altă listă de cadre adaptive ușoare de la Beloweb.ru. În același timp, aruncați o privire mai atentă pe blog, există o mulțime de „bunătăți” utile pentru designeri și designeri de layout.

    Faceți singur aspectul

    Această metodă este pentru cei care nu caută modalități ușoare și doresc să-și dea seama singuri. În esență, pentru ca șablonul să fie receptiv, trebuie să utilizați două lucruri:

    Metaetichetă Viewport
    Care determină tipul de dispozitiv de pe care vizitatorul a accesat site-ul și setează lățimea corectă a ecranului. Doar copiați acest cod în capul site-ului dvs.

    @regula media
    Datorită cărora putem scrie stiluri diferite pentru aceleași blocuri din fișierul dvs. css. Arata cam asa:

    #left( lățime: 600px; float: stânga; margin-right: 10px; ) #right( lățime: 400px; float: dreapta; ) Ecran numai pentru media și (max-width: 1010px)( #stânga, #dreapta( lățime : 98% float: nici o marjă: 10px;

    În acest exemplu, blocul #stânga are 600 de pixeli lățime și va fi poziționat la stânga blocului #dreapta de 400 de pixeli. Dar dacă rezoluția monitorului este mai mică de 1010 pixeli, scoatem ambalajul din ambele blocuri și le întindem la 98% din lățimea ecranului.

    Și așa trebuie să scrieți reguli pentru următoarele dimensiuni de ecran:

    • 320px pentru iPhone 3-5 în poziție verticală
    • 480px pentru iPhone 3-4 în poziție orizontală
    • 568px pentru iPhone 5 pe orizontală
    • 384px pentru smartphone în poziție verticală
    • 600px pentru smartphone în poziție orizontală
    • 768px pentru iPad pe orizontală
    • 1024px pentru iPad în poziție verticală

    O listă completă de rezoluții poate fi găsită pe responsinator.com sau în raportul Yandex.Metrica pentru site-ul dvs. (secțiunea Tehnologii/Rezoluții afișare). Într-un cuvânt, nu va fi dificil pentru cei care sunt familiarizați cu aspectul site-ului web să înțeleagă această problemă.

    Știi, rareori dau link-uri către cursuri plătite(pentru că nu recomand niciodată ceva pe care nu l-am folosit niciodată), dar acesta este cu adevărat cel mai bun material de instruire pe care l-am urmărit vreodată. Datorită lui Mikhail, șablonul meu de blog este acum nu numai adaptat la diferite rezoluții de ecran, ci a devenit mai ușor decât versiunea anterioară și este mai bine optimizat pentru motoarele de căutare.

    Apropo, dacă citiți articolul de pe telefonul mobil, scrieți dacă totul este la locul lui, este totul convenabil? Asta e tot pentru azi. Dacă aveți întrebări sau completări, bine ați venit la comentarii, ca întotdeauna, sunt deschise tuturor.