Numărul 9
Last issue

Dispozitive mobile

Get it on Google Play

Abonare revistă



Numerele anterioare


Numărul 27
Issue:27
Numărul 26
Issue:26
Numărul 25
Issue:25
Numărul 24
Issue:24
Ediții anterioare

Design adaptiv – un moft sau o necesitate

Ce este de fapt un design adaptiv? Răspunsul îl regăsim chiar în titlu şi anume: reprezintă un design care se pliază şi arată excelent pe orice telefon, tabletă, computer personal sau chiar pe televizoarele deştepte.

Probabil veţi întreba de ce este necesară această abordare şi nu se realizează aplicaţii strict ţintite spre un anumit aparat?. In principiu în funcţie de buget, necesitate şi nivelul de complexitate, se va opta pentru una dintre soluţii.

Înainte de a realiza un proiect web cu un design adaptiv, trebuie să ţinem cont de câteva elemente esenţiale:

Schemă flexibilă

O schemă flexibilă în formă de grilă te ajută să-ţi structurezi mai bine informaţia care se va afişa pe ecran. Aceste coloane te ajută să poziţionezi şi să orientezi conţinutul în pagină în funcţie de aparatul pe care acesta este afişat. Bineînţeles, se poate simplifica foarte mult aceasta grilă folosind doar două coloane principale, una să reprezinte partea de meniu, iar cealaltă conţinutul.

.main {
	margin-left: 20px;
}
 
.sidebar {
	width: 200px;
	float: left;
}

Elemente media adaptabile

Elementele media pot să reprezinte imaginile folosite în proiecte, player-ele video sau audio. De exemplu, imaginile se vor putea adapta în funcţie de dimensiunea container-ului , iar aceasta presupune ca imaginile să aibă lungimea setată în procente.

img {
	width: 100%;
}

Când vorbim despre un design adaptiv, trebuie să ţinem cont şi de performanţă. Imaginile folosite trebuie optimizate pentru o vizualizare în condiţii optime pe telefoane. Unul dintre „trucuri” pentru a putea realiza această optimizare, este folosirea javascript pentru a manipula atributul sursă al imaginii („src”) şi pentru a înlocui imaginea în funcţie de dimensiunea ferestrei.

O altă metodă este folosirea unei soluţii server-side oferită de http://adaptive-images.com/. Această metodă este extrem de uşor de folosit. Tot ceea ce ai nevoie este să modifici fişierul .htaccess ,adaptive-images.php şi să introduci o singură linie de javascript în zona de început <head> a site-ului.

Interogări media

CSS3 ne oferă această posibilitate de a putea identifica şi determina dimensiunea ecranului, astfel încât vei putea modifica proprietăţile elementelor din site în funcţie de necesităţi.

Exemplu:

@media screen and (max-device-width: 480px){
.main {
	width: 100%;
  }
.sidebar {
	width: 100%;
	float: none;
  }
}

Din fericire, sunt disponibile framework-uri care ne pot ajuta să realizăm aceste proiecte adaptive fără să le pornim de la zero; printre ele regăsim şi Twitter Bootstrap (http://twitter.github.com/bootstrap/index.html)

Ce ne oferă acest framework:

  • Sistem de grilă fluid pe 12 coloane. Aceasta înseamnă că foloseşte procente în loc la dimensiuni fixe. Bineînţeles, gridul are caracteristicile unui design adaptiv.
  • Machete predefinite pentru conţinut, iar ele pot să conţină coloane adaptabile la dimensiunea ecranului sau fixe.
  • Suport pentru design adaptiv cu un set de interogări predefinite pentru acoperirea tuturor device-urilor.

 

/* Monitoare cu dimensiuni mari */
@media (min-width: 1200px) { ... }
 
/* Tablete în mod portrait sau landscape */
    @media (min-width: 768px)and (max-width: 979px) { ... }
 
/* Telefoane în mod landscape până la tablete în mod portrait */
    @media (max-width: 767px) { ... }
 
/* Telefoane în mod landscape sau cu dimensiuni mai mici */
    @media (max-width: 480px) { ... }

Stiluri pentru diverse componente:

  • Font-uri,
  • Tabele,
  • Meniuri,
  • Paginare,
  • Formulare,
  • Butoane,
  • Imagini,
  • Iconiţe/pictograme.

Funcţii javascript pentru realizarea:

  • Tab-urilor,
  • Carusel de imagini,
  • Tooltip-uri,
  • Căsuţe de alertă.

Pentru o listă completă şi exemple, vizitaţi http://twitter.github.com/bootstrap/

In concluzie, este destul de uşor să începi să realizezi un proiect web adaptiv la dimensiunea ecranelor aparatelor. Haideţi să vedem acum care sunt avantajele:

  • Proiectele oferă o bună experienţă pentru utilizator, fiind un proiect consistent din punct de vedere al stilului şi al conținutului pe toate versiunile afişate.
  • Optimizare mai bună pentru motoarele de căutare. (referinţe externe către o singură adresă şi nu la adrese multiple, exemplu: www.starbucks.com, mobile.starbucks.com, m.starbucks.com)
  • Funcţional pe toate aparatele, indiferent de sistemul de operare folosit.(Exemplu iOS, Android, Windows)
  • Un timp mai scurt alocat pentru realizarea unui singur proiect decât pentru realizarea mai multor proiecte cu aceleaşi funcționalităţi. Acest aspect implică bineînţeles costuri mult mai reduse pentru proprietarul proiectului.
  • Timpul redus pentru întreţinerea conţinutului site-ului, decât sincronizarea conţinutului pe două/trei variante ale site-ului.
  • Actualizarea de conţinut/stil/flow se va face la doar un singur proiect.

Dar pe lângă toate aceste avantaje, sunt bineînţeles şi câteva dezavantaje:

  • Unele resurse pot fi încărcate inutil pentru versiunea mobilă, dacă ne referim la javascript, stiluri, imagini. Toate acestea implică un timp mai mare de încărcare a paginii.
  • Efortul alocat pentru compatibilitatea dintre versiunile de browsere.
  • Interacţiunile sunt diferite de la ecranele cu touch la controlul site-ului pe un computer personal cu ajutorul unui mouse/tastaturi.

Ideea principală este că fiecare site trebuie să aibă un design adaptiv, astfel încât să nu se compromită experienţa utilizatorului, indiferent de aparatul pe care îl foloseşte. Cu toate acestea, sunt proiecte care folosesc un design adaptiv parţial. Exemplu www.microsoft.com

Din păcate, designul adaptiv este folosit doar pe pagina principală a site-ului, iar link-urile de pe pagină te vor redirecţiona către secţiuni care nu sunt adaptive la dimensiunea ecranului. Din acest motiv experienţa utilizatorului va fi diferită de la o pagină la alta, iar acest aspect va crește procentul de părăsire a site-ului.

Un alt exemplu, dar de data aceasta cu un site complet adaptiv, este starbucks.com.

Cu această abordare, starbucks.com este mai uşor de navigat, fiind adaptat pentru mobile, tablete. Implicit şi zona video este îmbunătăţită, şi aceasta cu ajutorul noilor tehnologii HTML 5, cu care se poate reda în condiţii optime pe browser, indiferent dacă este sau nu instalat FLASH.

Excelent! Acum cunoaştem care sunt cei trei paşi esenţiali pe care trebuie să-i parcurgem şi ştim cum va arăta un site cu un design adaptiv. Dar aceasta este totul? Cu toate că avem un site adaptiv, aceasta nu presupune că avem o soluţie adaptată pentru mobile sau tablete.

Pentru a realiza o soluţie fiabilă adaptabilă pentru majoritatea aparatelor mobile, trebuie să ţinem cont de următoarele aspecte:

Ergonomie

Un proiect cu o ergonomie bună poate oferi o serie de beneficii. O interfaţă grafică trebuie să fie intuitivă, uşurând deciziile pe care trebuie să le ia un utilizator.

Conţinut

Pentru telefoanele mobile, defilarea în jos a informaţiei poate deveni un chin. Din acest motiv, este important ca informaţia afişată să fie condiţionată de dimensiunea ecranului.

Html5

Micile facilităţi oferite de html5 pot să facă diferenţa şi să realizeze o experienţă extraordinară pentru utilizator. Exemplu:

autofocus - câmpul care are acest atribut va fi automat selectat la încărcarea paginii.

email - câmpul va fi interpretat de navigatoarele moderne ca o căsuţă de email, iar împreună cu atributul „required”se va face automat o validare de email.

<input
type=”email” name=”email” placeholder=”bogdan.nastasa@endava.com” 
required/>

number - la editare, browserele moderne vor afişa doar tastatura numerică

datetime -în cazul modificării căsuţei, browser-ele moderne vor afişa un calendar

list - atributul list împreună cu elementul “datalist” va afişa o selecţie de informaţii relevante cuvintelor introduse în câmp.

<input type=”text” name=”person” list=”catalog”/>
<datalist id=”catalog”>
 <select>
   <option 
    value=”Bogdan Nastasa”>
   </option>
   <option value=”Bob Marley”>
   </option>
   <option value=”Ben Johnson”>
   </option>
   <option 
    value=”Bernadette Peters”>
   </option>
   <option value=”Halle Berry”>
   </option>
 </select>
</datalist>

Mai sus au fost prezentate doar câteva din facilităţile html5. O listă completă a componentelor o puteţi găsi la adresa: http://html5please.com/

Performanţă şi Optimizare

Aplicaţiile la care timpul de încărcare este redus, vor avea o notă mai bună pentru SEO. De asemenea, contează afişarea conţinutului să fie una cât mai relevantă şi adaptată pentru utilizator.

În concluzie, o aplicaţie cu un design adaptiv este o soluţie recomandată pentru orice aplicaţie web, dar trebuie să ţinem cont de toate aspectele care trebuie implementate pentru a realiza un pachet complet şi adaptat pentru conglomeratele de aparate care ne înconjoară.

Slide-urile prezentării



Bogdan Nastasa

UX/UI Design Lead
@ Endava



Related Articles

Noul sistem de operare lansat de către cei de la Microsoft a adus destul de multe schimbări. Una dintre aceste schimbări este şi background tasks pentru aplicaţiile Metro. Înainte să putem vorbi despre background task-urile din Windows 8 este nevoie să întelegem de ce au fost introduse. Windows 8 a apărut din necesitatea unui sistem de o...

Pragmatismul ca termen general se referă la abordarea unei sarcini într-o manieră care urmărește aspectul practic și util al abordării, pentru a o face cât mai eficientă. În domeniul programării, acest termen este adesea cunoscut sub numele de bune practici ale programării. Acestea se referă adesea la scrierea unui cod curat și gest...

Core Data este un graf de obiecte și un framework pentru persistența datelor oferit de Apple. Este un framework relativ mic, dar foarte robust, oferă soluții pentru multe probleme generale și se potrivește perfect cu Cocoa si alte API-uri furnizate de Apple. (În MVC pattern ține loc de model). Core Data API poate fi descompus în următoare...

Cu ocazia conferinței NEXT 2012, organizată de Softvision, am avut plăcerea să îl cunoaștem și să îl urmărim pe parcursul a câteva ore pe Scott Barber, supranumit și “the face of performance testing” (eng. fața testării performanței). Un geek auto-declarat, care în baza informaţiilor pe care le găseşti deja publicate despre e...

msg

Sponsori

ISDC

SmallFootprint

TPG

fortech accesa Betfair yardi accenture msg mozaic works

Media

Reclamă