Design Web Responsive - Xposed Agency

Design

Design Web Responsive

Design Web Responsive

Responsive web design

Responsive web design (RWD) este o abordare a design-ului web care face ca paginile web să se încarce corect pe o varietate de dispozitive şi dimensiuni ale ferestrelor sau ale ecranului. Studii recente iau în considerare inclusiv apropierea vizitatorului ca parte a contextului de vizualizare ca o extensie pentru RWD. Conţinutul, designul şi performanţa unui site sunt cerinţe necesare pe toate dispozitivele pentru a asigura utilizabilitatea (folosirea uşoară) a site-ului şi satisfacţia vizitatorului.

Un site proiectat cu RWD îsi adaptează aspectul la mediul de vizualizare folosind grile fluide bazate pe proporţiile conţinutului, imagini flexibile şi interogari media CSS3, o extensie a regulii „@media”, în următoarele moduri:

  • Conceptul de grilă fluidă necesită dimensionarea elementelor din pagină în unităţi relative, cum ar fi procente, in loc de unităţi absolute precum pixeli sau puncte.
  • Imaginile flexibile sunt de asemenea dimensionate folosind unităţi relative, astfel încât ele să nu se afişeze în afara elementului care le conţine.
  • Interogările media permit paginii să utilizeze diferite reguli pentru stilul CSS pe baza caracteristicilor dispozitivului pe care este afişat site-ul, de exemplu lăţimea suprafeţei de redare (lăţimea ferestrei browserului sau dimensiunea fizică a unui afişaj).

RWD a devenit mai important deoarece volumul traficului mobil inseamnă acum mai mult de jumătate din traficul total de pe internet. De aceea, Google a anunţat Mobilegeddon în 2015 şi a început să mărească ratingul site-urilor prietenoase cu dispozitivele mobile, în cazul căutărilor efectuate de pe un dispozitiv mobil. Proiectarea unui site responsive (RWD)este un exemplu de plasticitate (capacitatea de adaptare) a interfeţei de utilizator.


Mic istoric

Primul site caracterizat printr-un aspect care se adaptează la lăţimea ferestrei de vizualizare a browserului a fost Audi.com, lansat la sfârşitul anului 2001, creat de o echipă de la razorfish formată din Jürgen Spangl şi Jim Kalbach (arhitectura informaţiei), Ken Olling (design) şi Jan Hoffmann (dezvoltarea interfeţei). Capabilităţi limitate funcţie de browser („Limited browser capbilities”) însemna că pentru Internet Explorer, aspectul se putea adapta dinamic în browser, în timp ce pentru Netscape pagina trebuia să fie reîncărcată de pe server când era redimensionată.

Cameron Adams a creat în 2004 un site demonstrativ, care este încă online. Până în 2008, o serie de termeni in legătură cu domeniul, cum ar fi „flexibil”, „lichid”, „fluid” şi „elastic” au fost folosiţi pentru a descrie aspectul. Interogările media CSS3 au fost aproape gata pentru prima dată la sfârşitul anului 2008 / începutul anului 2009. Ethan Marcotte a inventat termenul Design web responsiv (RWD) – şi l-a definit ca însemnând grilă fluidă / imagini flexibile / interogări media – într-un articol din mai 2010 din „A List Apart”. El a descris teoria şi practica design-ului web responsiv în scurta sa carte din 2011 intitulată „Responsive Web Design”. Designul responsiv a fost listat ca # 2 în „Top Web Design Trends” pentru 2012 de către revista .net magazine, după “progressive enhancement” la # 1.

Mashable a numit 2013 „Anul Responsiv Web Design” (RWD). Multe alte surse au recomandat design-ul responsiv ca o alternativă eficientă din punct de vedere al costurilor pentru aplicaţiile mobile, datorită capacităţii de a incapsula întregul cod într-un singur site Web. Utilizatori şi dezvoltatori deopotrivă au început să realizeze beneficiile şi importanţa proiectelor „mobile-responsive”, pe măsură ce utilizarea mobilă a continuat să crească.

Această conştientizare a importanţei a fost confirmată când Google a făcut anunţul că motoarele de căutare vor recompensa site-urile web responsive cu clasificări mai bune.


Conceptele „Mobile first”, „unobtrusive JavaScript” şi „progressive enhancement”

„Mobile first” (versiunea mobilă a site-ului este cea mai importantă), „unobtrusive JavaScript” (separarea Javascript de documentul HTML) şi „progressive enhancement” (îmbunătăţire progresivă) sunt concepte corelate care preced RWD.

Browserele telefoanelor mobile simple nu înţeleg JavaScript sau interogări media, deci o practică recomandată este crearea unui site web de bază şi îmbunătăţirea acestuia pentru telefoane inteligente şi PC-uri, mai degrabă decât utilizarea conceptului „graceful degradation” (funcţionarea site-ului in lipsa Javascript), pentru a face un site complex şi plin de imagini să ruleze pe telefoane mobile.


„Progressive enhancement” bazat pe detecţia browser-ului, a dispozitivului sau a caracteristicilor

Datorită volumului ridicat de utilizare a internetului pe dispozitive mobile, acestea nu mai pot fi ignorate. În 2014, pentru prima dată, mai mulţi utilizatori au accesat internetul de pe dispozitive mobile decât de pe desktop.

În cazul în care un site web trebuie să accepte dispozitive mobile de bază care nu au JavaScript, detecţia browser-ului („user agent”) (denumită şi „browser sniffing”) şi detectarea dispozitivului mobil sunt două modalităţi de a deduce dacă anumite funcţii HTML şi CSS sunt suportate (ca bază pentru îmbunătăţirea progresivă) – oricum, aceste metode nu sunt complet fiabile decât dacă sunt utilizate împreună cu o bază de date pentru capabilităţile dispozitivelor.

Pentru telefoane mobile mai capabile şi PC-uri, mediile de dezvoltare JavaScript, cum ar fi Modernizr, jQuery şi jQuery Mobile, care pot testa direct suportul browser-ului pentru funcţiile HTML / CSS (sau pentru a identifica dispozitivul sau browser-ul), sunt populare. Polyfills poate fi folosit pentru a adăuga suport pentru alte caracteristici – de ex. suport pentru interogări media (necesare pentru RWD) şi îmbunătăţirea suportului HTML5 în Internet Explorer.

Detectarea caracteristicilor de asemenea poate să nu fie complet fiabilă; câteodată poate raporta că o caracteristică este disponibilă atunci când aceasta fie lipseşte, fie este atât de prost implementată încât este efectiv nefuncţională.


Provocări şi alte abordări

Luke Wroblewski a rezumat câteva dintre provocările RWD şi de design mobil şi a creat un catalog de modele de layout pentru toate dispozitivele. El sugerează că, în comparaţie cu o abordare simplă RWD, experienţa dispozitivului sau abordările RESS (design web responsiv cu componente de pe server) ofera o experienţă pentru utilizator mai bine optimizată pentru dispozitive mobile. Implementarea în partea de server (“dynamic CSS”) a unor limbaje de stil, cum ar fi Sass sau Incentivated’s, poate face parte dintr-o astfel de abordare, prin accesarea unui API de pe server care gestionează diferenţele dispozitivului (de obicei, receptorul mobil) în conjunţie cu o bază de date de capabilităţi ale dispozitivelor pentru a mări utilizabilitatea. RESS este mai scump de dezvoltat, necesitând mai mult decât logica din partea de client, şi astfel tinde să fie rezervat pentru organizaţii cu bugete mai mari. Google recomandă designul web responsiv (RWD) pentru site-urile web pentru smartphone-uri, comparativ cu alte abordări.

Deşi mulţi editori încep să implementeze design-ul responsiv, o provocare continuă pentru RWD este aceea că unele anunţuri de tip banner şi unele videoclipuri nu sunt fluide. Cu toate acestea, publicitatea de căutare şi afişarea anunţurilor (banner) suportă direcţionarea platformei pentru anumite dispozitive şi diferite dimensiuni şi formate ale anunţurilor pentru desktop, smartphone şi dispozitive mobile de bază. Pot fi utilizate diferite adrese URL ale paginilor de destinaţie pentru platforme diferite, sau poate fi folosit Ajax pentru a afişa diferite variante ale anunţului pe o pagină. Tabelele CSS permit layout-uri hibride fixe şi fluide.

Există în prezent multe modalităţi de validare şi testare a proiectelor RWD, variind de la validatoare de site-uri mobile şi emulatoare de dispozitive mobile, până la unelte de testare simultană, cum ar fi Adobe Edge Inspect. Browser-ele Chrome, Firefox şi Safari şi consola Chrome oferă instrumente de redimensionare pentru analiză design responsiv, aşa cum fac şi produse de la părţi terţe.

Utilizarea RWD se va extinde în continuare, odată cu utilizarea mobilă în creştere; potrivit Statista, vizitele pe motoarele de căutare din SUA provenind de pe dispozitive mobile au atins 51% şi sunt în creştere.

Alege sa lucrezi cu noi pentru a iti creste business-ul. Oferim atat servicii de Creare Site de Prezentare, cat si de Creare Magazin Online.

Ideea ta conteaza