Solutii de Adaptare a Site Urilor Web la Cresterea Internet Ului Mobil

Cuprins

1. Internetul – un mediu extrem de dinamic

Noi sisteme de operare apar în fiecare zi. Browser-ele sunt din ce în ce mai multe. În fiecare zi întâlnim dispozitive mai mari, mai mici, dispozitive cu capacități incredibil de puternice de a naviga pe internet, dispozitive cu control prin touch screen și dispozitive cu trackpad-uri și tastaturi direct pe ecran (on-screen keyboards).

În timp ce apar noutățile, dispozitivele și browser-ele vechi rămân în uz. Deși tehnologia evoluează într-un ritm incredibil de accelerat, acest lucru nu înseamnă că toată lumea trebuie să țină pasul cu ea. Un nou dispozitiv poate fi lansat, numai pentru a fi retras câteva luni mai târziu. Sunt foarte puține lucruri pe care ne putem baza. Ceea ce astăzi este valabil, mâine poate nu va mai fi. Iar rezultatul tuturor acestor acțiuni este haosul. Haosul naște confuzii, dar stimulează de asemenea inovația și creativitatea. Pentru că noi factori de formare ajung pe piață și browser-ele continuă să-și depășească limitele, numărul de aplicații și de situații pe care le putem crea cresc exponențial.

Internetul este universal. Este omniprezent. Diferit de orice alt mediu de dinaintea lui, internetul se poate adapta la orice ecran și în orice context. Este inerent flexibil și maleabil.

2. Evoluția utilizării dispozitivelor mobile

Cu toate că în ziua de azi Internetul a devenit parte integrantă a vieții noatre de zi cu zi, în ciuda statisticilor impresionante de mai jos, numeroase companii nu au un site web optimizat pentru telefoanele mobile. Statisticile următoare[1] ar trebui să determine pe oricine să înțeleagă importanța adaptării site-urilor web pentru dispozitivele mobile:

Peste 20% din căutările pe Google sunt realizate pe dispozitive mobile.

În 2012, mai mult de jumătate dintre căutările locale au fost realizate pe dispozitive mobile.

În Statele Unite ale Americii, 25% din utilizatori intră pe internet numai de pe dispozitive mobile.

61% dintre respondenți au o părere mai bună despre branduri atunci când acestea oferă o experiență bună de utilizare pe telefonul mobil.

25.85% dintre e-mail-uri sunt deschise pe telefonul mobil și 10.16% sunt deschise pe tabletă.

Piața smartphone-urilor din SUA a depășit în cele din urmă procentul de 50% de penetrare a pieței și intră acum în etapa de “majoritate târzie” a curbei de adoptare a tehnologiilor noi. Numărul de utilizatori de smartphone a crescut cu 29 de procente față de anul trecut și cu 99% față de acum 2 ani.

Android OS de la Google, adoptat de mai mulți producători de echipamente originale (OEM), și iOS de la Apple, folosit exclusiv pe iPhone-uri, au ajuns să domine cu aproape 90% piața de smartphone-uri din SUA în ziua de azi. Ambele platforme au continuat să-și crească cotele de piață în detrimentul BlackBerry, Windows și HP. Această dominație a cotelor de piață este întărită de sistemele de aplicații bine dezvoltate ale celor două platforme, astfel că pentru celelalte platforme este din ce în ce mai dificil să le ajungă din urmă.

Apple continuă să câștige teren ca producător de echipamente originale de top în materie de smartphone-uri în SUA, însă Samsung a cunoscut cea mai explozivă creștere în această piață din ultimii ani cu o evoluție, de la an la an, de mai mult de 100% și o creștere la 2 ani de 400%.

Disponibilitatea îmbunătățită a accesului la internetul de mare viteză a crescut exponențial experiența de consum a utilizatorilor obișnuiți, contribuind la o creștere rapidă și în consumul de media pe telefonul mobil. Accesul la Wi-Fi al smartphone-urilor și al tabletelor nu numai că a eliberat bandwidth-ul rețelelor, dar a contribuit și la o experiență mai bună pentru utilizatori la locație (ex. in-home). În timp ce utilizarea Wi-Fi a devenit din ce în ce mai răspândită, vitezele rețelelor au fost de asemenea îmbunătățite prin 4G și tehnologia LTE, deoarece un număr mare de telefoane de pe piață sunt dotate pentru aceste viteze. Rezultatul net pentru utilizatorii de internet pe mobil este o experiență mai rapidă, fără probleme, ce a rezultat în media de 1 din fiecare 3 minute de consum media digital să fie prin canalele mobile.

Smartphone-urile au depășit 125 milioane de utilizatori în SUA și peste 50 milioane de oameni dețin tablete. Am trecut acum în Noua Lume Digitală – o nouă paradigmă pentru fragmentarea media digitală în care consumatorii sunt întotdeauna conectați.

La nivel mondial, în anul 2013 a avut loc o creștere exponențială în consumul media mobil, după cum utilizarea smartphone-urilor a crescut cu 30%, până la mai bine de 120 milioane de utilizatori, în timp ce tabletele au devenit dispozitivele cu cea mai rapidă creștere în vânzări din istorie atingând 50 milioane de utilizatori. Tabletele au atins deja, în 3 ani de zile, un nivel de utilizare pe care smartphone-urile l-au atins în aproape un deceniu de la prima lor apariție pe piață. Smartphone-urile și tabletele restructurează complet felul în care utilizatorii se conectează și experimentează mediul online, aceștia fragmentându-se și mai departe în funcție de platformele care le-au atras atenția.

În această Nouă Lume Digitală, fundamentele economice ale media digitală sunt în joc, dacă trecerea de la o platformă la alta înseamnă mai puțini bani. În același timp, o creștere totală în utilizarea media înseamnă mai multe oportunități de monetizare pentru companiile media și o mai mare abilitate a vânzătorilor de a realiza campanii pe toate platformele. Afacerile digitale mai au încă o șansă să navigheze eficient această tranziție și să-și maximizeze oportunitățile, în timp ce își diminuează riscurile. Acest lucru va necesita o cunoaștere temeinică a peisajului multiplatformelor și o bună înțelegere a felului în care se modifică stilurile de consum ale utilizatorilor. Cei care nu vor reuși să creeze o strategie de multiplatforme eficientă vor fi cu siguranță lăsați în urmă.

În ultimii ani a fost imposibil să ignorăm creștera dispozitivelor mobile în societatea noastră. iPhone-ul a schimbat felul în care vedem telefoanele mobile, iar mai târziu iPad-ul a introdus un nou tip de dispozitiv mobil, care a luat piața cu asalt. Aceste dispozitive au ocupat o mare parte a pieței de calcul și au devenit jucători principali în ceea ce privește internetul.

Analiza comportamentului în media mobilă de top [1] printre utilizatorii de smartphone-uri și tablete indică similitudini și diferențe interesante pentru ambele grupuri. Utilizatorii ambelor platforme demonstrează o înclinație spre implicare în activități ce se pretează la a fi realizate din mers, cum ar fi accesarea buletinelor meteo, a hărților și a update-urilor de știri.

Fig 1. Tabel comparativ cu tipurile de activități efectuate pe telefoane mobile de tip SmartPhone și tablete

Sursă: ComScore 2013 Mobile Future în Focus Whitepaper [1]

Dispozitivele mobile acoperă o mare parte a utilizării internetului și aceasta este în continuă creștere. În numai 2 ani, Europa a cunoscut o creștere de 183.43% în utilizarea internetului pe mobil, Asia a avut o creștere de 192.46%, iar SUA de 69%. Un raport al ComScore.com [1] a arătat că 37% din timpul petrecut în mediul online în 2012 a fost de pe dispozitive mobile. Pentru Hărți, Meteo, Muzică și Rețele Sociale, dispozitivele mobile au fost mai populare decât PC-urile. Cu toate aceste trenduri, nu este de mirare că o declarație de la Smart Insight preconiza faptul că, până în anul 2014, utilizatorii de internet pe mobil vor depăși pe cei cu acces fix la internet (adică PC-urile).

Chiar și așa dispozitivele mobile, oricât ar fi ele de convenabile pentru utilizatori, aduc cu ele o mulțime de restricții. Cele mai mici dispozitive dispun de până la cu 80% mai puțin spațiu atunci când vine vorba de dimensiunea ecranului, interacțiunile sunt mai puțin precise atunci când sunt prin atingere și, dacă utilizatorii sunt în mișcare, conexiunile pot fi mai slabe. În pofida acestor lucruri, utilizatorii își doresc o experiență extraordinară pe dispozitivele mobile. Conform unui studiu al Compuware din 2011, 71% dintre utilizatori se așeaptă ca un website să se încarce la fel de repede ca pe PC și 74% dintre utilizatori spun că vor ieși de pe un website dacă acesta are nevoie de mai mult de 5 secunde pentru a se încărca.

Fig 2. Compararea tipuri de activități efectuate de utilizatori pe PC și pe dispozitive mobile
Sursă: ComScore 2013 Mobile Future în Focus Whitepaper [1]

Definiția a ceea ce înseamnă smartphone, tabletă sau alt dispozitiv conectabil va continua să se schimbe în următorii ani, date fiind numerosele dispozitive noi ce include dimensiuni și specificații tehnice unice. Este un e-reader sau o tabletă? Un smartphone sau un “phablet”? Aceste întrebări vor deveni comune în anii care urmează, deoarece fiecare producător de dispozitive mobile își adaptează oferta pentru a satisface un set specific de nevoi al numeroaselor micro-segmente de consumatori.

Dimensiunea ecranului, funcționalitatea, portabilitatea, stilul tastaturii, sistemul de conținut, puterea de procesare, viteza de conexiune și multe alte variabile au o importanță diferită pentru consumatori, ceea ce înseamnă că producătorii de echipamente originale vor continua să aducă inovați și să experimenteze cu ofertele lor pentru a găsi soluții ideale pentru consumatori.

4. Evoluția pieței de Internet în România

Și piața din România a cunoscut o mare dinamicitate și creștere în sincron cu piața internațională. Conform unui raport [2] publicat de către Autoritatea Națională pentru Administrare și Reglementare în Comunicații în 10.12.2013, rata de penetrare a internetului mobil de mare viteză a ajuns la 41%. Piața de telefonie și internet la puncte mobile din România a continuat să înregistreze creșteri în prima jumătate a anului 2013, dovadă că interesul utilizatorilor români pentru mobilitate rămâne constant. Un utilizator de internet mobil din România consumă în medie 260 de MB într-o lună, acest indicator înregistrând creșteri în ultimii ani.

În acest raport [2] se menționează și:

La 30 iunie 2013, în România erau active 8,2 milioane de conexiuni mobile de acces la internet în bandă largă, în creștere cu 11% față de finalul anului 2012. Din numărul total de conexiuni, 53% au fost furnizate prin intermediul telefonului mobil, cu plata unui abonament sau a unei extraopțiuni destinate accesului la internet, 31% erau conexiuni prin intermediul telefonului mobil cu plata pe “unitatea de consum”, iar 16% reprezentau conexiuni furnizate prin intermediul modemurilor/cardurilor/USB. Numărul total de terminale/cartele SIM care permiteau accesul la internet mobil prin intermediul tehnologiilor EV-DO, 3G/3G+, 4G a ajuns la 9,9 milioane, cu 14,3% mai mult față de finalul anului 2012.

Astfel, rata de penetrare a accesului la internet la puncte mobile (numărul total de conexiuni raportat la 100 de locuitori) a înregistrat în prima jumătate a anului 2013 o creștere cu peste 5 puncte procentuale, atingând la 30 iunie 2013 un nivel de 56% din populație, în timp ce rata de penetrare a conexiunilor la puncte mobile în bandă largă a ajuns la valoarea de 41%.

În segmentul serviciilor de telefonie la puncte mobile, prima jumătate a anului a adus o scădere nesemnificativă a numărului de utilizatori activi, până la 22,6 milioane, față de valorile înregistrate în anul 2012 (22,7 milioane, la 30.06.2012, respectiv 22,8 milioane la 31.12.2012). Dintre aceștia, 6,3 milioane erau reprezentați de utilizatori pe bază de abonament – persoane fizice, 3 milioane sunt utilizatori pe bază de abonament – persoane juridice, iar 13,3 milioane sunt utilizatori pe bază de cartele preplătite active. La 30 iunie 2013, rata de penetrare a serviciilor de telefonie mobilă înregistra o valoare de 112,3% la 100 de locuitori.

Deasemenea, în “Raportul de date statistice privind serviciile de comunicații electronice, semestrul II 2013” [3] publicat de către Autoritatea Națională pentru Administrare și Reglementare în Comunicații în 10.12.20130.12.2013, se remarcă faptul că rata de penetrare a conexiunilor active de acces la Internet la puncte mobile la 100 locuitori a crescut în anul 2013 de la 50.2% la 67.7%, adică o creștere a ratei de penetrare de peste 33% într-un singur an. Acest lucru dovedește că și piața din România are o dinamică de creștere foarte mare și din ce în ce mai mulți oameni folosesc Internetul pe mobil în viața de zi cu zi pentru a putea afla informații diferite.

Fig 3. Evoluția ratelor de penetrare a conexiunilor active de acces la internet furnizate la puncte mobile, la nivel total și, respectiv, în funcție de modul de furnizare, în perioada 2011 – 2013
Sursă: Raportul de date statistice privind serviciile de comunicații electronice, semestrul II 2013 [3]

Un alt aspect important este faptul că telefoanele mobile ne permit acum căutarea de informații indiferent de locația unde ne aflăm, atât timp cât avem o conexiune activă la Internet. Conform unui studiu publicat de Google Inc. referitor la piața de Internet din România, peste 70% din utilizatori folosesc un dispozitiv SmartPhone pentru a căuta informații despre produse și servicii din mers, adică oriunde s-ar afla.

Fig 4. Locul utilizării dispozitivelor mobile pentru căutarea de informații online
Sursă: Our Mobile Planet Romania mai 2013, Google Inc. [4]

Din punct de vedere al traficului lunar, pe piață din România utilizatorul mediu relizează lunar un trafic de date în jur de 100 MB, conform datele publicate de către Autoritatea Națională pentru Administrare și Reglementare în Comunicații [3].

Fig 5. Tipurile de utilizatori de Internet din România conform raportului publicat de Autoritatea Națională pentru Administrare și Reglementare în Comunicații [3]

5. Adaptarea site-urilor web la noua realitate

O dată cu schimbarea comportamentului zilnic al utilizatorului de Internet prin folosirea într-un grad tot mai mare a dispozitivelor mobile, trebuie să se schimbe și strategia privind site-urile web. Acestea trebuie să se adapteze noii realități prin :

Afișarea informației dependent de dimensiunea ecranului și tipul de dispozitiv

Să afișeze imaginile și alte materiale media diferit în funcție de dispozitiv

Să reducă dimensiunea infomației trimise către browserul dispozitivelor mobile astfel incât încărcarea să fie rapidă

Evoluția tehnologiei web din ultimii ani oferă mai multe soluții pentru crearea de site-uri web adaptate Internetului mobil. Înainte de a discuta aspectele pur tehnice, trebuie să înțelegem modificarea viziunii privind crearea paginilor web asfel incât acestea să migreze către noua realitate, nu doar să ofere o soluție de moment.

Având în vedere ca dinamica evoluției dispozitivelor mobile este foarte mare, trebuia găsită o soluție care în primul rând să poată evolua o dată cu piața. Astfel a apărut o nouă tehnică de realizare a site-urilor web prin care site-ul părăsește dimensiunea fixă și devine fluid sau mai bine zis răspunde în timp real parametrilor dispozitivului pe care se afișează. Această metodă, denumită RESPONSIVE DESIGN permite site-ului să devină compatibil și cu dispozitivele care se vor crea în viitor.

Designul receptiv înseamnă mai mult decât un layout; înseamnă să creezi pentru internet, adică, în mare parte, pentru cei care folosesc browser-ele. Și acest lucru este cam tot ce știm despre cei care ne vizitează website-urile: folosesc un browser. Despre restul nu știm nimic.

Până nu în urmă cu mult timp, la crearea design-ului și structurii unui site web ne bazam pe presupuneri generale legate de dimensiunea ecranului și de tipul de intrare al celui care va accesa site-ul. Odată cu apariția dispozitivelor cu ecrane de diferite dimensiuni și cu moduri alternative de interacțiune, aceste presupuneri nu mai sunt de încredere. Trebuie să creștem paramterii pe care îi folosim atunci când începem să creăm un website.

Oamenii spun că internetul s-a schimbat. Dar chiar așa să fie? Să aruncăm o privire asupra tuturor lucrurilor care s-au schimbat de fapt.

5.1. Dimensiunea ecranului

În crearea unui site web, până prin anul 2010, exista un standard privind lățimea maximă a paginii web când aceasta se crea. Astfel se presupunea că pagina web trebuie să poată fi vizualizată bine de majoritatea utilzatorilor si de aceea lățimea paginii mergea în sincron cu evoluția monitoarelor calculatoarelor web.

În anii 1990, toate paginile de Internetul aveau o lățime de 640 pixeli determinată de monitoarele CRT care nu dispuneau de rezoluții mai mari. La începutul anilor 2000, a crescut la 800 pixeli. După câțiva ani, întrucât rezoluția monitoarelor a crescut s-a recut la o lățime de 1024 pixeli.

Dar în urmă cu cinci ani, dintr-o dată, s-a întâmplat ceva ciudat. Un dispozitiv cu ecran foarte mic a intrat pe piață. Dintr-o dată, ideile noastre despre dimensiunea internetului nu au mai funcționat. Mai târziu, tabletele au intrat pe piață. Oamenii le pot ține în mână așa cum doresc. Astăzi, înălțimea viewport poate fi mai mare decât lățimea! Dar este acesta un lucru nou? Nu chiar.

Din păcate, încă multe companii sau instituții nu țin cont de această nouă realitate și încă păstrează ca și standard lățimea maximă de 1024 pixeli. Un exemplu este chiar site-ul UNIUNII EUROPENE (http://ec.europa.eu/ ). În standardul privind structura și designul paginilor web care aparțin autorităților europene – The EU Internet Handbook [5] – se precizează clar că lățimea maximă a paginilor este de 1024 pixeli.

Adevărul este că niciodată nu am știu de fapt cât de mare este fereastra utilizatorilor noștri. De aceea s-a recurs la alegerea unei soluții care se presupunea că va fi bună pentru majoritatea utilizatorilor. Totuși aceste numere au fost întotdeauna arbitrare și întotdeauna au exista oameni care nu puteau vedea întregul website. Pentru aceștia site-ul nu se afisă corect și deci accesarea site-ului pentru ei era o experiență neplăcută și probabil frustrantă.

5.2. Mouse-ul, dispozitiv standard

Întotdeauna s-a presupus că toată lumea care accesează un site folosește un mouse. Chiar dacă știam că acest lucru nu este tot timpul adevărat, majoritatea creatorilor de pagini web au ignorat complet metodele alternative de interacțiune. Cei care trebuiau să folosească o tastatură, din orice motiv, se descurcau cu greu în interacțiunea cu website-urile noastre.

Dar pentru că majoritatea oamenilor foloseau un mouse și pentru că, în urmă cu ceva timp, mulți designeri credeau că designul pentru majoritate era OK, s-au creat website-uri inutile pentru o bună parte dintre utilizatori. Și numărul lor a tot crescut. Multe interacțiuni realizabile cu mouse-ul sunt complet nefuncționale pe un dispozitiv cu touch. Dar pentru că oamenii iubesc aceste dispozitive și pentru că și managerii și designerii le folosesc, au devenit din ce în ce mai greu de ignorat.

5.3. Internet broadband general

Un alt lucru care dezvoltatorii de pagini de Internet l-au considerat adevărat tot timpul a fost că toată lumea are o conexiune super-rapidă la internet. Și dacă nu o aveau deja, probabil că urmau să o aibă. Acest lucru era încă odată în mare parte adevărat; viteza era în creștere. Dar astăzi, din ce în ce mai mulți oameni folosesc conexiuni 3G slabe și instabile tot timpul. Chiar dacă toți operatorii afirmă că viteza de accesa la Internet pe rețelele mobile este mare, această viteză depinde de acoperirea rețelei și de puterea semnalului în locul unde ne aflăm. Astfel de multe ori, cu toate că avem acces 3G la o rețea mobilă, viteza de acces este limitată sau cu probleme.

Cu toate că în ultimii ani calitatea serviciilor de conectare la Internet a crescut, totuși un site web ar trebui să încerce să răspundă nevoilor a cât mai mulți vizitatori și astfel să îmbunătățească gradul de acces și de folosire a paginii.

5.4. Calculatoare mai rapide în fiecare an

Calculatoarele vor deveni din ce în ce mai rapide era odată o afirmație adevărată. Dacă așteptai jumătate de an înainte de a cumpăra un calculator, puteai lua unul de două ori mai rapid la același preț. Acest fapt era adevărat pentru calculatoarele desktop noi, dar dispozitivele mobile au alte priorități decât viteza procesorului.

Cel mai important aspect pentru un SmartPhone, de exemplu, este durata de viață a bateriei: chiar nu vrei să-l încarci după fiecare convorbire telefonică. Și mai există un trend: în loc să se creeze dispozitive tot mai rapide, numeroși producători încep să vândă dispozitive tot mai ieftine. Pentru mulți utilizatori, prețul și durata de viață a bateriei sunt aspecte mai importante decât viteza procesorului.

Un alt lucru care nu este nou: ce s-a întâmplat cu calculatoarele vechi? Un număr din ce în ce mai mare de oameni renunță la calculatoarele desktop în favoarea unei tablete sau a unui laptop. Dar mai există și cei care nu au renunțat să folosească echipamente vechi. Nu toți au aceleași echipamente de hardware și deci nu putem pleca de la premiza că toți vor avea echipamente de ultimă generație.

5.5. Monitoare calibrate optim

Numai monitoarele profesioniștilor în grafică sunt calibrate corect. Majoritatea celorlalte ecrane nu redau culorile cu acuratețe și multe monitoare sunt pur și simplu slabe. Majoritatea telefoanelor mobile au ecrane decente, până când le folosești afară, pe lumină puternică. Dacă ai noroc, poți citi conținutul, dar cu siguranță nu poți vedea gradientele subtile de contrast scăzut din design.

Nici nu am mențonat ecranele alb-negru “moderne”. Nici acestea nu sunt noi. Oamenii au folosit dintotdeauna ecrane slabe și oamenii cu vederea slabă ți-au vizitat dintotdeauna website-urile. Trebuie să știi că tot mai mulți utilizatori percep o paletă de culori sub media normală. În loc să cumperi un monitor de ultimă generație, cumpără un monitor ieftin și dispozitive slabe calitativ pe care să-ți testezi munca pentru o investiție mai bună.

Toate aceste lucruri nu sunt noi. În 2002, John Allsopp a scris un articol monumental “A Dao of Web Design” în care evidenția și acest aspect și impactul lui asupra paginilor web. Și totuși, cumva, acest aspect a tot fost ignorat. Internetul chiar s-a schimbat în ultimii cinci ani, cu noi dispozitive, noi browsere și multe, multe funcții noi. Avem nevoie de noi parametrii. Stilul vechi de creare a website-urilor pur și simplu nu mai funcționează.

5.6. Un nou parametru: activarea unei funcționalități

Toate dispozitivele, indiferent de funcțiile pe care le oferă, permit utilizatorului să activeze ceva într-un fel sau altul.

Cu un mouse, este un click; cu un dispozitiv cu touch, este o atingere; cu o tastatură, este tasta “Enter”. Există metode de activare prin voce sau prin mișcarea mâinilor în aer. Și multe dispozitive oferă mai mult de o metodă de interacționare. Singurul lucru pe care îl au toate acestea în comun este acțiunea de activare. Majoritatea dintre ele sunt capabile de a face multe alte lucruri, de asemenea, dar toate pot activa diverse lucruri.

Numai recent s-a început includerea de noi metode de admisie a acțiunilor pentru utilizatori. Înainte se presupunea că toată lumea folosește un mouse. Ascunderea conținutului și afișarea lui numai prin trecerea cu mouseul deasupra era considerat un model decent de design. Și funcționa pentru majoritatea oamenilor – până când toate aceste minunate dispozitive cu ecran tactil au intrat pe piață.

Ce poate face un dispozitiv fără mouse atunci când conținutul poate fi redat numai cu ajutorul unui mouse? Diferitele dispozitive includ și diferite soluții. Să ne gândim la un simplu meniu cu drop-down. Când treci pe deasupra unui item din meniu, apare un submeniu. Dar, în afară de trecerea pe deasupra unui item, poți pur și simplu să dai click pentru a urma un link. Atunci ce se va întâmpla când atingi item-ul pe un dispozitiv cu ecran tactil? Ar trebui să apară submeniul sau să se activeze linkul? Sau ambele? Sau ar trebui să se întâmple altceva? Pe iOS, se întâmplă altceva. Prima dată când atingi un link astfel, apare submeniul; cu alte cuvinte, se întâmplă același lucru ca la trecerea pe deasupra cu mouseul. Trebuie să mai atingi o doua oară pentru a urma linkul. Acest lucru poate induce utilizatorii în eroare și nu mulți dintre ei vor atinge o a doua oară ecranul. Pe Android, submeniul apare și linkul este urmat simultan. Nu mai trebuie să vă explic de ce și acest lucru induce utilizatorii în eroare. Este foarte posibil să ne gândim la soluții complexe prin care să definim diferite interacțiuni pentru variate admisii pe dispozitive.

Cea mai bună soluție, este să ne asigurăm că interacțiunea de admisie, activarea în sine, pur și simplu funcționează pentru toată lumea. De exemplu, dacă eșt sigur că cineva folosește un mouse, poți introduce interacțiuni pentru trecerea pe deasupra cu mouseul. Sau dacă ești sigur că cineva are degetele mai groase, poți face butoanele mici ceva mai mari. Dar fă aceste lucruri pe lângă interacțiunile de activare implicite și numai dacă nu mai există niciun dubiu și numai dacă această îmbunătățire chiar ar aduce beneficii reale. Sunt câțiva de “dacă” și unii dintre aceștia, cum ar fi utilizarea mouseului, sunt destul de greu de detectat – mai ales pe dispozitivele care oferă mai multe metode de interacționare, cum ar fi un laptop cu mouse opțional, touch pad, cameră, microfon, tastatură și touchscreen.

5.7. Un nou parametru: ecranele mici

Creșterea este ușoară. Majoritatea lucrurilor cresc. Copiii cresc, copacii cresc, mințile curioase cresc. Nu cresc pur și simplu, dar nu ai nevoie de foarte multă energie pentru a face lucrurile să crească. Acesta este mersul lucrurilor atunci când acestea trăiesc. Deși micșorarea este cu siguranță posibilă, este de asemenea și mai grea. Se poate, de exemplu, să comprimăm o mașină până la o fracțiune din dimensiunea ei originală. O mașină comprimată are un farmec aparte, dar cu siguranță nu mai este la fel de folositoare ca la început. Același lucru este valabil și pentru website-uri. Micșorarea desktopului unui website nu rezultă tot timpul într-o experiență plăcută pe un ecran mic.

Pentru a crea un website care se adaptează acestor ecrane, care să funcționeze pe toate tipurile de ecrane, designul acestuia pentru un ecran mic mai întâi este mult mai ușor. Te obligă să te concentrezi asupra ceea ce este cu adevărat important: dacă nu încape într-un pătrat mic, probabil că nu este extrem de important. Te va obliga să te gândești mai bine la ierarhizare, la ordinea corectă a componentelor în pagină. Același principiu pe care îl urmăm pentru interacțiune – adică facem designul pentru activare mai întâi și apoi îl îmbunătățim – se aplică și pentru designul grafic.

Indiferent de cât de mare sau de mic este un ecran și indiferent de cât de slabe sunt specificațiile unui brower, acesta va fi capabil să redea litere. Deoarece acesta este singurul lucru pe care îl știm sigur – din moment ce culoarea este absentă în majoritatea tabletelor Amyon Kindle, cele mai noi versiuni de CSS nu funcționează pe browser-ele vechi și layout-ul are o importanță redusă pe ecranele de mici dimensiuni – este logic să începem cu textul. Ideea de bază este ca designul să folosească relația dintre diferitele mărimi ale fonturilor. Aproape toată lumea, indiferent de dispozitivul pe care îl are, va fi capabilă să vadă scrisul. Când scrisul este gata, se poate trece la designul pentru ecranele mari.

Și abia după aceea, când sunt gata diferitele layout-uri, site-ul poate începe să fie extins și îmbogățit cu alte elemente de design: culoare, gradient, margine etc. .

Am prezentat toate acestea ca o metodă de lucru foarte strictă; în viața reală, bineînțeles, lucrurile nu sunt atât de rigide. Nu mă gândesc “numai la activare” sau “numai la ecrane mici”. Când spun să începi cu scrisul, nu spun că nu ai voie să te gândești și la desen în același timp. De fapt, încerc să găsesc acele aspecte pe care toate aceste dispozitive diferite le au în comun, cu toate dimensiunile lor de ecrane și cu toate specificațiile lor. Doar că este logic ca mai întâi să creezi cu atenție acest nucleu, ce poate fi distribuit prin toate dispozitivele.

5.8. Un nou parametru: Conținutul

Felul în care s-au creat website-uri până acum a fost prin plasarea unui header cu logo și cu meniu navigabil în partea de sus, cu meniu de subnavigare în stânga, cu widget-uri în dreapta și footer la baza paginii. Când toate acestea erau gata, se poziționa conținutul în spațiul mic rămas la mijloc. Toate lucrurile create înainte – navigația, widget-urile, footer-ul – toate acestea ajutau utilizatorul să părăsească pagina. Dar vizitatorul probabil că dorea să fie acolo! Ce ciudat. Era de parcă nu eram suficient de siguri de conținutul nostru și ne străduiam să găsim altceva ce le-ar putea plăcea oaspeților noștri.

Dar în loc să poluăm pagina cu tot felul de linkuri care să scoată utilizatorul din website, ar fi mai important să se încerce optimizarea acelui lucru din mijloc.

Odată ce ai terminat cu conținutul, te poți întreba dacă acest conținut are nevoie de un header. Sau de un logo. Sau de un meniu de subnavigare. Are nevoie de meniu de navigare? Și chiar are nevoie de toate acele widget-uri?

Multe dintre linkurile pe care eram obișnuiți să le găsim în meniul de subnavigare ar putea funcționa mai bine în locuri cheie din conținutul principal. De exemplu, opțiunea de a adăuga mai multe bagaje la o rezervare de zbor ar putea fi mai eficientă chiar acolo în descrierea zborului, în loc de mijlocul unei liste de linkuri de undeva din partea stângă a paginii. Și atunci când ne uităm la ierarhizarea unei pagini, meniul principal de navigare pare mai important decât conținutul principal? De cele mai multe ori nu ar trebui să fie, iar eu consider că navigația ar trebui să fie conținutul pentru footer. Un simplu link de “Ignoră” în partea de sus a paginii ar putea duce vizitatorul la meniul de navigare sau ar putea aduce meniul în partea de sus a paginii.

În era designului web receptiv, avem nevoie de multe soluții ingenioase. După cum am văzut aici, vechii noștri parametri nu mai funcționează. Trebuie să reluăm în considerare felul în care lucrăm cu interacțiunea, cum abordăm designul și cum structurăm conținutul. Dar trebuie să ne gândim și la un alt lucru foarte important și acela este locul de unde vine conținutul.

6. Soluții de adaptare a site-urile web la creșterea internetului mobil

Toate elementele menționate precedent au determinat schimbarea modului cum sunt construite site-urile web și mai ales includerea în strategia de dezvoltare a unui site web a elementelor specifice Internetului mobil.

Există mai multe soluții care pot fi adoptate pentru a adapta website-ul la traficul în creștere de internet pe mobil:

Crearea de versiuni dedicate pentru MOBIL și TABLETĂ

Designul adaptabil (Adaptive Web Design sau AWD)

Designul fluid (Responsive Web Design sau RWD)

Aceste metode se pot aplica în funcție și de tipul site-ului. Pentru un site care este deja creat, probabil crearea unei versiuni de mobil si tabletă este metoda cea mai rapidă de rezolvare a expunerii pe dispozitive mobile, pe când un design Adaptiv sau Fluid implică refacerea site-ului într-o măsură destul de mare.

6.1. Versiuni dedicate pentru MOBIL și TABLETĂ

Până în 2012, cea mai întâlnită abordare pentru lucrul cu diversitatea dispozitivelor a fost crearea de website-uri separate pentru anumite tipuri de dispozitive (sau, prin eforturi fără țel, pentru un anumit dispozitiv). Adesea, acest lucru înseamnă un website pentru mobil și un altul pentru desktop.

Tot mai mult însă a devenit o obișnuință pentru companii să aibă uneori chiar și patru website-uri diferite pentru o singură companie:

un website pentru desktop

un website pentru tabletă

un website pentru dispozitive mobile cu ecran tactil

un website mai simplu pentru dispozitive mobile fără ecran tactil

Această abordare își are cu siguranță meritele. Crearea unui website separat pentru fiecare tip de dispozitiv face mai ușoară personalizarea experienței – atât în ceea ce privește conținutul, cât și comportamentul. Dacă acest lucru se pretează însă depinde de proiect, de obiectivele afacerii, de utilizatori, de capacitățile echipei, de buget și de toate celelalte componente ale afacerii care trebuie luate în considerare.

Din păcate, acest fapt nu dă randament: înseamnă patru website-uri care trebuie dezvoltate, testate și întreținute. Unii sugerează faptul că un conținut personalizat ar trebui scris pentru fiecare website, ceea ce ar însemna și mai mult timp și efort.

Avantaje:

Se poate crea pentru site-uri existente, extinzând astfel posibilitățile site-ului existent fără a fi necesară refacerea acestuia

Permite adaptarea informației afișate în funcție de dispozitiv

Dezavantaje:

Fiecare site web adițional înseamnă muncă în plus privind de întreținerea conținutului

Nu acoperă cazurile în care apar dispozitive noi cu rezoluții noi

Fiecare versiune va trebui să aibă un URL distinct ceea ce înseamnă că pentru motoare de căutare va exista o fragmentare a conținutului ceea ce duce la o expunere mai slabă în rezultatele pe motoarele de căutare

6.2. Design Adaptiv, bazat pe îmbunătățirea progresivă

Când se construiește un site bazat pe metoda Design-ului Adaptiv (Adaptive Web Design sau AWD), se începe cu conținutul, apoi designul conținutului și optimizarea acestuia pentru diferite ecrane și dispozitive și, după aceea, se trece la optimizarea pentru caracteristicile specifice cum ar fi utilizarea mouseului sau degetele groase. Numeroși dezvoltatori web construiesc website-uri după acest principiu.

Această metodă de dezvoltare a fost prima dată elaborată de Aaron Gustafson și conform definiției implică modificarea designului conform unor seturi predefinite de reguli adaptate unor dispozitive și rezoluții. Metoda are la bază trei elemente ale teoriei de Îmbunătățire Progresivă (Progressive Enhancement):

Conținut – cod HTML optimizat semantic

Prezentare – CSS și formatare

Programare client-side prin Javascript / jQuery

Un site web dezvoltat după această metodă poate funcționa bine dacă dezvoltatorul site-ului web are cunoștințe bune de design și dacă poate acorda atenție la detalii.

Avantaje:

Se pune accent și pe contextul de folosire al site-ului – telefon, desktop, laptop, tabletă- și nu doar doar rezoluția, ceea ce permite adaptarea conținutului obiectivului vizitatorului

Dimensiunea de încărcare a site-ului este redusă întrucât se transmit doar informațiile necesare respectivei rezoluții

Mărește gradul de utilizare a site-ului întrucât ține cont de tipul de dispoztiv (Usabilitz enhancement)

Tehnologia de dezvoltare permite vizualizarea bună a site-ului pe toate browserele, chiar și pe cele vechi

Din punct de vedere al motoarelor de căutare există un singur URL, deci afișarea în rezultatele motoarelor de căutare nu este afectată

Dezavantaje:

Pentru site-uri existente implică crearea site-ului din nou

Necesită crearea de reguli distincte privind modul de funcționare a site-ului în funcție de tipul de dispozitiv și de rezoluția acestuia

Complexitate mai mare din punct de vedere al implementării tehnice

Necesită un timp mai mare de dezvoltare în comparație cu un site implementat folosind Designul Fluid (RWD)

Necesită actualizarea regulilor periodic pentru a lua în considerare și dispozitivele noi apărute

6.3. Design Fluid (Responsive Web Design)

Designul Fluid (Resposive Web Design sau RWD) implică un singur iste web creat astfel încât să se adapteze în timp real la toate tipurile de ecrane indiferent de dispozitivul pe care este afișat. De exemplu, daca site-ul este accesat de pe o tabletă, site-ul se schimbă în timp real în funcție dacă accesăm site-ul în modul Portrait sau Landscape a tabletei. Dacă lățimea dispozitivului de afișare se schimbă, site-ul web își ajustează în mod dinamic aranjarea elemntelor componente astfel încât acesta se afișează corect. Designul Fluid este o abordare de web design care pune în prim plan utilizatorul.

Fig 6. Modificarea modului de afișare a unui site cu Design Fluid (RWD) în funcție de lațimea zonei de afișare a ecranului dispozitivului pe care se vizualizează

Schimbările în dispozitive nu sunt noi desigur; ci ritmul și amploarea schimbării sunt noi. În urmă cu puțin timp, cea mai mare provocarea a unu designer web era dacă website-urile ar trebui să facă marele salt de la 800px la 1024px lățime. După cum monitoarele și ecranele au continuat să crească, provocarea era să se decidă pentru cât din întregul ecran ar trebui să se facă designul, pentru că și dispozitivele au continuat să crească în rezoluția în pixeli. De asemenea, numărul mai mare de pixeli nu era restricționat la ecranele mari; evoluția dispozitivelor mobile a însemnat că ecranele se micșorau.

Avem acum dispozitive mobile în modurile portrait și landscape, tablete în portrait și landscape, laptop-uri, desktop-uri, monitoare și chiar televizoare cu care să ne confruntăm. Era nevoie de o abordare care să permită site-uriloe web să răspundă la orice dispozitiv, iar acest fapt era doar vârful icebergului. Și așa a apărut Designul Fluid (Responsive Web Design).

Fig 7.

Designul Fluid (Responsive Web Design) înseamnă o serie de tehnici și tehnologii, combinate pentru a reda un site web pe un spectru larg de dispozitive într-un mod cât mai practic posibil. Și nu este vorba numai de profesioniștii web care au constatat această nevoie; ci și companiile mici și mari caută metode prin care să-și facă funcțional conținutul web, indiferent de felul în care este folosit de utilizator.

Avantaje:

Se creaază un singur site web care se va adapta în mod fluid la rezoluțiile dispozitivelor

Dezvoltarea se bazează pe tehnologii web recente ceea ce permite

Timp mai scurt de implementare în comparație cu site-urile create cu Design Adaptiv (AWD)

Site-ul se va adapta automat și la noi tipuri de dispozitive sau noi rezoluții

Din punct de vedere al motoarelor de căutare există un singur URL, deci afișarea în rezultatele motoarelor de căutare nu este afectată

Este metoda recomandată de Google privind realizarea unui site web [8]

Dezavantaje:

Pentru site-uri existente implică crearea site-ului din nou

Dezvoltarea site-ului se bazează pe Media Queries, o metodă care nu funcționeză pe browsere mai vechi, necesitând încărcarea de librării Javascript pentru compatibilitate

Folosește mai multe resurse (CSS și Javascript) față de un site creat cu Design Adaptiv

7. Designul Fluid (Responsive Web Design)

7.1. Scurt istoric al Designului Fluid (Responsive Web Design)

Ethan Marcotte, creditat ca părintele Designului Fluid (RWD), a publicat un articol pe site-ul A List Apart, în mai 2010, pe care l-a denumit isteț “Responsive Web Design.” [9]. În acesta, s-a axat pe fluid grids, pe imagini flexibile și pe media queries ca pilonii tehnici pentru RWD. De asemenea, Marcotte a definit nevoia unei abordări a conținutului care să se potrivească acestor fundamente.

Scopul acestor piloni a fost să obțină situația“scris o dată, merge peste tot”. Prin adoptarea RWD, cu schimbările date de conținut introduse, ne putem baza pe faptul că site-urile astfel create se adaptează la alegerile utilizatorilor noștri în materie de dispozitive. În loc să ne concentrăm pe dispozitive, ne concentrăm pe utilizatori.

Dezvoltator veteran, Marcotte a cercetat ani la rând și a susținut tehnicile din articolul său. Deoarece aceste tehnici sunt bazate pe principii de dezvoltare de lungă durată și de bună practică, barierele de penetrare sunt cu mult reduse, mulți deyvoltatori de site-uri web au preluat deja acest principiu.

În articolul publicat în 2010 [9], Marcotte cerea designerilor să profite de caractersticile unice ale internetului:

Acesta este drumul nostru înainte. Decât să personalizăm designuri fără legătură pentru fiecare dintre un număr tot mai mare de dispozitive web, le putem trata ca pe fațete ale aceleiași experiențe. Putem face design pentru o experiență vizuală optimă, dar să includem tehnologii de bază în designurile noastre, care să le facă nu numai flexibile, ci și adaptabile la mediul care le redă.

În general, articolul a fost lăudat, și asta pe bună dreptate. Marcotte a demonstrat că este posibil să redăm o experiență perfectă pe o varietate de dispozitive, nu prin ignorarea diferențelor dintre acestea, ci prin eliberarea de acestea și prin adoptarea fluidității internetului.

Fig 8. Ilustrarea principiului RWD de către Ethan Marcotte [9]

Să începem prin a clarifica un lucru: un website receptiv nu este egal cu un website mobil. Acest fapt cauzează numeroase confuzii și dezbateri aprinse. Desigur, mult din farmecul unei abordări receptive se află în faptul că poate fi folosit pentru o strategie mobilă, dar nu este nici măcar o soluție de moment.

Un website receptiv nu este niciun website pentru mobil, niciunul pentru desktop sau pentru tabletă. Marcotte a clarificat acest aspect [9]:

Atunci când vorbesc sau scriu despre designul receptiv, încerc să subliniez ceva cu cât mai multe linii mari și groase: designul receptiv nu înseamnă “designul pentru mobil.” Nu înseamnă nici “designul pentru desktop”. Ci înseamnă adoptarea unei abordări mai flexibile, indiferentă la dispozitive în realizarea designului web.

Aceast concept indiferent la dispozitive este incredibil de important. Nu putem ști ce tipuri de dispozitive vor folosi oamenii pentru a intra pe internet. Niciun alt mediu nu este atât de accesibil pe o gamă atât de diversificată de dispozitive sau de către atât de mulți oameni. Ca designeri, trebuie să valorificăm acest lucru.

Suntem departe de a fi descoperit totul, dar, cu ajutorul muncii și al experimentelor, aboradarea receptivă a fost mult îmbunătățită de la prima sa versiune. Aceleași trei elemente (media queries, fluid grids și imaginile flexibile) rămân ca centru, dar sunt numai vârful icebergului.

După cum s-a deovedit, o abordare de succes privind RWD se construiește pe aceleași principii definite pentru îmbunătățirea progresivă.

De asemenea, înseamnă că până și cele mai mici modificări în felul în care este livrată aplicația poate aduce schimbări rapide pentru utlizatori și, cel mai adesea, acestea ajută și la verificarea pe viitor a muncii tale. Odată cu evoluția rapidă a dispozitivelor mobile, scara noilor dispozitive poate însemna că aplicația ta devine tot mai inutilă. Deși utilizatorii au învățat că prin două atingeri ale ecranului pot da zoom in, RWD poate evita toate acestea și poate îmbunătăți experiența utilizatorului. O simplă modificare creează o mai bună experiență de bază pentru cei cu ecrane mai mici și cu rezoluții variabile ale ecranului. Simpla adăugare a unui element viewport meta îți poate adapta website-ul – dacă ai atributele corecte – la mobil, la tabletă și la orice dimensiune de display.

7.2. Pilonii Designului Fluid (RWD)

Pilonii designului receptiv sunt:

Grdi-uri fluide – fluid girds

Imaginile flexibile

Media queries

Conținutul dinamic

7.2.1. Grid-uri fluide (FLUID GRIDS)

Gridurile fluide, primul pilon al RWD, sunt succesorii naturali ai layout-ului fluid, care era subiecte aprinse în 2006, când discuția de trecere de la 800 la 1024 era la modă. Scrierea fluidă joacă un rol important aici, de asemenea, deoarece conținutul trebuie să fie la fel de receptiv ca layoutul.

Aranjarea designului unei pagini web în grid-uri și coloane a fost visul designerilor de la începuturile internetului. Implementările nu au reușit încă, dar lucrurile se pot schimba oricând cu avansul făcut în standarde de către W3C. Deoarece nu sunt grid-uri sau coloane specifice în HTML – nici în HTML5 – trebuie să ne folosim de instrumentele pe care le avem la îndemână.

Viteza de dezvoltare este numai unul dintre beneficiile aduse de folosirea cadrelor; HTML și CSS pe care ne bazăm sunt funcționale între browsere și compatibile, extensibile și accesibile pentru un număr mare de dezvoltatori. Când soluția W3C este suportată de browsere, se va aduce mai multă putere și flexibilitate.

Știm că în timp ce monitoarele calculatoarelor și laptopurilor devin mai largi – cu mai mulți pixeli – dispozitivele mobile popularizează dimensiunile mai mici. Mai mult ca oricând, avem nevoie de o abordare de design care să răspundă la paleta tot mai largă de dimensiuni ale ecranelor. Fluid grids din web designul receptiv sunt parte din această abordare. Pe internet (și în afara lui), un grid este un mod de a coordona spațiul dintr-un layout.

Fig 9. Grid-uri fluide pe diferite tipuri de dispozitive. Numărul de coloane se modifică dependent de dimensiunea ecranului dispozitivului.

Grid-urile simple – formate din una, două sau trei coloane – au de obicei conținut care încape într-un singur rând pe orizontală. Grid-urile mai complexe (având peste 9, 12 sau mai multe coloane) încep de asemenea să aducă mai multe rânduri pentru controlul conținutului. Există mai multe convenții privind grid-urile fluide. Cea mai folosită structură este de 12 coloane a câte 90 pixeli lățime (1080px) sau a câte 80 pixeli lățime (960px). În grid-urile complexe, de exemplu, un rând se poate întinde pe 12 coloane, poate conține 3 întinderi normale pe coloanele 1, 4 și 8 și patru întinderi pe coloanele 1, 3, 5, 8 sau altă combinație.

Și în timp ce grid-urile de internet le urmează pe cele din tipografie cu lățimi fixe, au de asemenea luxul de a deveni fluide. Fluid grids au coloane și canale – spațiul dintre coloane – unde lățimile sunt legate de conținutul lor. Conținuturile în sine pot fi fixe ca lățime sau relative, dar coloanele trebuie să fie o parte din aceste conținuturi pentru a deveni fluide. Ce fac cel mai bine fluid grids în RWD este să furnizeze o metodă prin care să nu ne mai concentrăm asupra grid-ului, în principiu asupra felului în care conținutul este așezat în pagină. În loc să așezi layout-ul website-ului în lățimi fixe ca pixeli, fluid grids folosesc dimensiunile lor proporționale pentru a se adapta la dispozitivul utilizatorului. Astfel, suntem capabili să ne concentrăm asupra conținutului și asupra experienței utilizatorului, în loc să ne concentrăm pe structura aplicației noastre.

7.2.2. Imagini Fluide

Cel de-al doilea pilon, imaginile flexibile (sau Resposive Images cum sunt numite în specificațiile HTML5), este folosit pentru a rezolva două probleme:

dificultățile în prezicerea dimensiunilor la care imaginea este afișată

rezoluția la care imaginea este afișată

Pentru a întâmpina aceste provocări, tehnicile imaginilor fluide se referă la tot, de la metode prin care imaginile website-ului găzduiesc fluid grids și layout-uri până la noi propuneri în HTML5, care să vadă surse diferite ale imaginilor folosite pe dispozitive variate. Felul în care sunt combinate aceste tehnici pentru cele mai bune rezultate se va rezuma la echilibrul dintre abilitățile tale și așteptările utilizatorilor.

Dificultatea dată de imagini constă în faptul că grid-urile țin doar de structură, pe când calitatea și eficiența unei imagini sunt mai evidente pentru utilizatori. Utilizatorii unui site probabil nu vor observa că s-a folosit un grid la crearea site-ului – se vor bucura doar de beneficii – dar sigur vor constata imaginile supradimensionate, pixelate sau subdimensionate. Mulți producători schimbă și densitatea pixelilor pe care o pot afișa dispozitivele, rezultând în 1.5 până la de două ori numărul de pixeli ce pot fi afișați pe o varietate de dispozitive.

Fig 10. Diferența dintre o imagine afișată pe un ecran normal (stânga) și unul cu o densitate dublă de pixeli (de tip Retina) (dreapta) [10]

Dacă site-ul web nu reușește să se folosească de această densitate, îi poate face pe utilizatorii tăi să simtă diferența. În sens invers, dacă aplicația ta folosește numai imagini de mare densitate, iar utilizatorii o folosesc predominant pe dispozitive mobile sau pe desktop, vor downloada imagini pe care dispozitivele lor nu le pot utiliza. Astfel, rezultă un bandwidth irosit pentru tine și pentru utilizatorii tăi și să nu mai vorbim de efortul irosit de către o parte din echipa ta.

7.2.3. MEDIA QUERIES

Media Queries au onoarea de a fi cel mai important element din amestecul pentru HTML5 și de asemenea cele mai bune metode de suport între browsere. S-ar putea să nu funcționeze nativ în versiuni mai vechi ale Internet Explorer – de fapt, în orice înainte de Internet Explorer 9 – dar metodele de îmbunătățire ale vechilor browsere cu ajutorul unor tehnici bazate pe Javascript sunt solide și acceptate. Media Queries funcționează pe dispozitive și pe browsere pe care se regăsesc aplicațiile tale și permit acestora să răspundă la aceste dispozitive.

Funcțiile dispozitivelor sunt folosite de regulile de Media Queries, care pot determian încărcarea unor anumite reguli de CSS dependent de rezoluțiile dispozitivului. Media Queries evaluează capacitățile unui dispozitiv; de exemplu, este capabil browser-ul să întrunească aceste condiții? Dacă da, atunci încarcă CSS-ul sau execută aceste reguli:

<link rel="stylesheet" media="print" href="print.css">

<link rel="stylesheet" media="projection and (color)" href="projection.css">

Pentru că sintaxa media queries este bazată pe tipurile de media cunoscute încă de la CSS2.0 (1998, cu o revizuire majoră în 2008), folosirea lor este familiară majorității programatorilor web.

Primul exemplu de mai sus este o regulă HTML care determină încărcarea unei librării cu reguli CSS de care browserul să țină cont la operația de tipărie. Cel de-al doilea este un media query. Dacă cel de-al doilea link nu ar fi avut exprimată o valoare a atributului media, mai degrabă decât o listă de tipuri separate prin virgule, cele două elemente ar fi identice.

7.2.4. Conținutul Dinamic

Conținutul dinamic este cea mai nouă adăugare la regulile privind Designul Fluid (RWD) și este încă în formare. Adepții RWD afirmă că o strategie pentru conținut ce pune utilizatorul în centru este necesară, dar nu există încă un standard în privința abordării de urmat. Precum RWD propune soluții tehnice care se adaptează la tehnologiile utilizatorului, aceasta încearcă de asemenea să se adapteze și la schimbările survenite în încrederea acordată de utilizator conținutului. După cum interacțiunile dintre utilizatori și aplicații devin din ce în ce mai vizibile, RWD va fi capabil să preia mai mult din greutatea acestei provocări.

Conținutul este un concept larg și obscur. “Conținutul” este tot ceea ce consumă utilizatorul unui website atunci când interacționează cu serviciile acestuia. Folosind această definiție, conținutul înseamnă totul de la imagini la navigație, funcții, forme, cuvinte și video. Perspectiva conform căreia conținutul este numai datele care sunt incluse în zona centrală nu este suficientă. O perspectivă bazată pe consum ne permite să luăm în considerare și utilizatorii non-umani, cum ar fi roboții motoarelor de căutare și celelalte programe.

Conținutul dinamic specific RWD este prin urmare felul în care faci conținutul de pe website să se adapteze sau să se integreze în funcție de contextul comportamentului utilizatorului. Cel mai bun exemplu al acestei practici este afișarea mai multor layout-uri, informații sau funcții pentru cei care folosesc dispozitive mobile comparativ cu utilizatorii desktop-urilor. Nu este nevoie să ne limităm numai la contextul dispozitivului însă; conținutul nostru ar putea răspunde diferit și dacă are de a face cu un utilizator nou față de unul experimentat.

De exemplu, să luăm în considerare faptul că Twitter își îndeamnă noii utilizatori să adauge conturi în feed atunci când se înscriu, pentru a face începătorii activi mult mai repede, așa cum putem vedea în figura de mai jos.

Fig 11. Exemplu de acțiune dinamică folosită pe site www.twitter.com : după ce un utilizator își creează un cont, acestuia I se prezintă prin mai mulți pași simpli succesivi principalele funcținalități oferite de site

7.3. Avantajele implementării unui Design Fluid

7.3.1. Experiența pozitivă a utilizatorului

Conform cu Google Think Insights on Mobile [11], dacă un utilizator ajunge pe un website mobil și este frustrat sau nu vede ceea ce căuta, șansele sunt de 61% ca acesta să iasă imediat și să intre pe alt website (cel mai probabil unul competitor). De asemenea, este știu faptul că, dacă experiența este una pozitivă cu website-ul mobil, șansele sunt de 67% că utilizatorul va cumpăra un produs sau va folosi un serviciu disponibile pe acest site.

Deci cu cât experiența utilizatorului este mai bună cu atât site-ul web va fi mai eficient și își va atinge obiectivele.

7.3.2. Preferat pentru SEO

În Ianuarie 2012, pe site-ul oficial Webmaster Central Blog de la Google s-a publicat un articol [12] în care se evidenția clar că Google preferă web designul fluid (RWD) în detrimentul versiunilor dedicate pentru dispozitive mobile.

Având un singur URL este mult mai ușor pentru roboții de parsare aparținând Google să verifice website-ul, algoritmul extern de linkuri pe Google, și reduce șansele de erori SEO în pagină. Pentru toate aceste motive, website-urile construite cu RWD funcționează mai bine în general și sunt mai ușor de întreținut decât cele separate cu versiune dedicate pentru mobil.

Construirea unui site web separat pentru mobil are beneficiile sale și, în anumite cazuri, crearea unei versiuni singulare pentru mobil funcționează de asemenea. Dacă un site web include mult conținut (un site web de știri, de exemplu), o versiune fluidă a acestuia poate fi versiunea de “scrolling”, pentru care utilizatorii își vor pune degetul arătător la treabă pentru a naviga conținutul. Acesta este momentul în care un site web dedicat pentru mobil devine folositor, unul care a fost rearanjat pentru navigarea pe mobil.

Din punctul de vedere al Optimizării pentru Motoare de Căutare (SEO), una dintre cele mai mari provocări în a avea un site web separat pentru mobil este necesitatea de a construi autoritate site-ului web încă o dată, iar majoritatea site-urilor web separate de mobil nu au o poziționare bună în motoarele de căutare, pentru că sunt blocate de versiunile lor pentru desktop. De cealaltă parte, redesignul site-ului web ca și fluid ajută la menținerea backlink-urile și permite realizarea campaniile SEO pe un singur site web. Acest lucru înseamnă că toate link-urile vor fi direcționate către un singur domeniu (spre deosebire de un site web pentru mobil și unul pentru desktop), oferind site-ului web fluid un imbold în paginile de rezultate ale motoarelor de căutare (SERP).

Mai mult decât atât, cu un site web fluid se poate construi social shares dintr-un singur URL, iar atunci când site-ul web este distribuit pe diferite rețele de socializare, indiferent de link-ul vizualzat – fie că este vizualizat și distribuit de pe mobil, tabletă sau pe desktop – întregul conținut va fi clar și ușor de navigat.

7.3.3. Recomandat de Google

Deținând peste 67% din piața de căutare online, când Google spune, profesioniștii din domeniu trebuie să asculte. Google spune [8] că web designul fluid (RWD) este recomandarea sa pentru configurarea pe mobil și merge destul de departe încât să spună că web designul receptiv este cea mai bună practică a industriei.

Acest lucru se datorează faptului că webste-urile cu design receptiv au un URL și același HTML, indiferent de dispozitiv, ceea ce face verificarea, indexarea și organizarea conținutului de către Google mult mai ușoară. Pune acest fapt în balanță cu ideea de a avea un website separat pentru mobil cu URL și HTML diferite față de echivalentul său pe desktop, necesitând astfel ca Google să verifice și să indexeze mai multe versiuni ale aceluiași website.

În plus, Google preferă RWD deoarece conținutul aflat pe un singur website și pe un singur URL poate fi mai ușor distribuit, este mai ușor de interacționat cu el și se poate face referire prin link la el decât la conținutul care se află separat pe un website pentru mobil.

Să luăm, de exemplu, un utilizator de mobil care distribuie conținut de pe un website mobil către un prieten de pe Facebook, care mai apoi accesează conținutul de pe desktop, ceea ce rezultă în vizualizarea unui website simplificat de mobil pe desktop. Acest lucru creează o experiență mai puțin decât optimă și, datorită importanței crescute pe care o acordă Google experienței utilizatorului ca factor de ranking, este esențial să avem și acest aspect în vedere în privința SEO.

7.3.4. Timp de încărcare redus

Conform Google PageSpeed Developers [13], standardele recomandă conținutul din zona vizibilă utilizatorului să se încarce într-o secundă pe un dispozitiv mobil, iar întreaga pagină în două secunde. Acest lucru nu este de obicei posibil atunci când încărcăm un website pentru desktop pe un dispozitiv mobil. Atunci când un utilizator trebuie să aștepte foarte mult timp pentru ca o pagină să se încarce, sunt șanse extrem de mari ca acesta să părăsească website-ul.

7.3.5. Adaptare la dispozitivele viitorului

Unul dintre cele mai mari beneficii ale Designului Fluid (RWD) este că dimensiunea de afișare a site-ului este creată în funcție de mărimea ecranului, nu de dispozitiv. Acest lucru înseamnă că, indiferent de dimensiunea ecranului folosit de cineva pentru a vizualiza site-ul web, se va afișa oricum așa cum trebuie pentru acea dimensiune de ecran. Așa că pe viitor, după cum vor fi folosite noile dispozitive (televizoare, ceasuri, ochelari etc.) pentru internet, site-ul web implementat cu RWD va arăta tot la fel de frumos.

Pe măsură ce tehnologia avansează, va deveni extrem de critic ca site-urile web să ofere utilizatorilor de mobil o experiență facilă. A avea un website mobil nu mai este doar o funcție drăguță, ci o necesitate.

7.3.6. Un singur site web, mai multe dispozitive

Unul dintre cele mai atrăgătoare aspecte ale Designului Fluid (RWD) constă în faptul că site-urile web astfel construite oferă o experiență plăcută pentru utilizatori pe numeroase dispozitive și dimensiuni de ecrane. Aceasta este o caracteristică importantă, deoarece este imposibil să se anticipeze toate dispozitivele și dimensiunile de ecrane pe care le vor folosi utilizatorii pentru a accesa site-ul web. Un site web care funcționează bine indiferent de aceste variabile va oferi o experiență mai bună și constantă utilizatorilor decât unul separat pentru mobil și tabletă, care a fost creat pentru un anumit dispozitiv și pentru o anumită dimensiune a ecranului.

Să luăm următorul exemplu. Cineva caută un produs pe SmartPhone în timpul pauzei de prânz de la birou. Găsește site-ul web care are produsul căutat și hotărăște să continue cercetările asupra produsului atunci când ajunge acasă. Doar că, atunci când ajunge acasă, va folosi un calculator de tip desktop în loc de SmartPhone.

Dacă website-ul din acest exemplu este creat cu RWD, acea persoană va avea o experiență de utilizator coerentă în trecerea de la versiunea adaptată de mobil la cea de desktop, deoarece va vedea aceleași elemente și design pe desktop pe care l-a văzut pe mobil. Pe de altă parte, dacă site-ul web este dedicat pentru mobil, acea persoană va deveni frustrată din cauza faptului că va trebui să caute versiunea de desktop a website-ului și mai apoi produsul încă o dată.

7.3.7. Ușor de administrat

Două site-uri web separate pentru desktop și pentru mobil înseamnă două campanii separate de SEO. Administrarea unui site web și a unei campanii de SEO este mai ușoară decât administrarea a două website-uri și a două campanii de SEO. Acesta este un avantaj cheie pe care site-urile web create cu Design Fluid (RWD) îl au față de cele care au separat versiuni pentru mobil.

Acestea fiind spuse, există beneficii în a avea o strategie SEO pentru mobil, cum ar fi optimizarea pe cuvinte cheie care sunt mult mai căutate de utilizatorii de smartphone.

De exemplu, cineva care caută pe mobil un restaurant local poate folosi sintagma “în apropiere” în căutare. Chiar și așa, un site web separat pe mobil nu este necesar pentru o strategie SEO de mobil și nu există un motiv pentru care cuvintele cheie specifice mobilelor să nu fie integrate într-un design fluid de asemenea.

7.3.8. Experiența utilizatorului

Site-urile web sunt de fapt instrumente pentru distribuirea de conținut. Un site web “prietenos” cu utilizatorii face ca aceștia să găsească mai ușor conținutul, să și-l însușească și să-l distribuie mai departe. Mai presus de toate, designul fluid (RWD) pune accentul pe design-ul pentru utilizator – iar cum experiența utilizatorului este un factor important pentru ranking, este logic ca Google să încruajeze adoptarea RWD [12].

Dacă vizitatorii intră pe un website de pe mobil sau de pe tabletă, ar trebui să vadă tot conținutul la fel de ușor ca utilizatorii de desktop. Să zicem că observi ceva pe un site web în timp ce utilizezi calculatorul de tip desktop și vrei să trimiți acel ceva unui prieten care îl va vizualiza pe telefon. Dacă site-ul web este fluid și a fost creat așa cum trebuie, conținutul va funcționa la fel de bine pe ecranul său cum a funcționat pe al tău.

Designul fluid (RWD) ajută site-urile web moderne să atragă utilizatori moderni; utilizatori care sunt înclinați să acceseze Internetul de pe dispozitive mobile sau de pe tabletă, dar care se așteaptă și ca experiența de pe desktop să fie la fel de bună. Adoptarea desingului fluid este calea pentru a beneficia la maximum de traficul de pe mobil și de pe tabletă, dar și pentru a oferi vizitatorilor cea mai bună experiență de utilizare posibilă.

7.3.9. Creșterea expunerii la audiența de pe mobil și tabletă

Creșterea folosirii Internetului și proliferarea aplicațiilor web pe tabletă și pe dispozitivele mobile a fost forța de mișcare din spatele acestei evoluții. Utilizatorii tradiționali ar fi redirecționați către un website specific pentru un dispozitiv (ex. mobil), dar designul fluid înseamnă că un site web poate fi implementat pe mai multe dispozitive.

Vânzările de tablete sunt estimate la peste 100 milioane în acest an, ceea ce înseamnă că designul receptiv nu a fost niciodată mai important pentru cei care doresc să-și optimizeze conținutul online. Întradevăr, unele site-uri web au deja până la 40% trafic de pe tabletă și dispozitive mobile, fiind astfel un imperativ comercial puternic să se includă o dimensiune mai mică a ecranului într-un design uniform.

8. Analiză a site-ului web www.ghiduri-turistice.info

8.1. Scurt istoric

Site-ul web www.ghiduri-turistice.info este o revistă online cu articole din domeniul călătoriei. Site-ul a fost lansat la data de 01.03.2012 având ca scop coagularea unei mari comunități de iubitori de călătorii.

Site-ul a fost dezvoltat în etape, pe măsură ce așteptările și traficul acestuia a crescut. Site-ul a fost dezvoltat pe o platformă Linux. Ca și limbaj de programare web am folosit limbajul PHP și bază de date de tip MySQL. interfața web a site-ului a fost construită cu HTML și CSS. Elementele de funcționalitate client-side au fost implementate folosind framwork-ul jQuery care extinde funcționalitățile standard Javascript.

Am creat și dezvoltat site-ul într-un interval de 3 luni, în perioada 01.02.2012 – 30.03.2012. Din punct de vedere al designului, site-ul este simplu, elegant și concentrat pe conținut. Însă, deși se afișează corect pe toate dispozitivele indiferent de dimensiunea ecranului nu este ușor de folosit pe toate. Pe dispozitivele cu ecran până în 7” (telefoane mobile sau tablete de mici dimensiuni) site-ul este foarte greu de utilizat întrucât link-urile și butoanele de navigare sunt greu accesibile și textele au o dimensiune redusă, slab lizibilă. Pe dispozitivele cu ecran mai mare, deși textele devin mai lizibile, partea de navigație rămâne dificilă din cauza faptului că elementele de navigație nu sunt adaptate atingerii.

Fig 12. Deși design-ul site-ului este curat, site-ul nu se adaptează în nici un fel la diferite rezoluții ale dispozitivelor de pe care este accesat

8.2. Structură și secțiuni site

Ca și structură site-ul are o organizare bazată pe mai multe categorii și articole. Fiecare articol aparține în mod unic la o anumită categorie. Fiecare categorie am asociat-o unei anumite tematici din punct de vedere al conținutului. De exemplu categoria “Descoperă România” conține articole care au subiect legat de destinații turitice din România. Această organizare permite vizitatorului să citească articolele ușor.

Deasemenea, un articol este caracterizat prin unul sau mai multe cuvinte cheie (tags), acestea având rolul de a grupa articole din Categorii diferite dar care totuși se referă la aceeași destinație sau subiect. De exemplu pot exista articole în categoriile “Vacanțe la munte” și “Orașele lumii” care se referă la destinații din Croația. Aceste articole vor avea ca și cuvânt cheie comun “croatia”. Această modalitate de grupare permite vizitatorului navigarea prin articole într-un mod diferit de cel bazat pe categorii și astfel se mărește șansa ca acesta să găsească articolul căutat.

Din punct de vedere al afișării conținutului – articolelor – în cadrul site-ului, există mai multe tipuri de pagini (secțiuni).

Pagina cu articolele dintr-o anumită categorie: în aceasta se afișează toate articolele pe baza unei ierarhii predefinite de tip Categorie, fiecare articol se prezintă într-un mod succint cu poză și scurtă descriere.

Pagina cu articolele având un anumit cuvânt cheie: în aceasta se afișează toate articolele care au fost marcate cu cuvântul cheie respectiv, indiferent în ce categorie se află, fiecare articol se prezintă într-un mod succint cu poză și scurtă descriere.

Fig 13. Modul de afișare a unui articol în pagina cu articolele grupate după categorie și pagina cu articolele grupate după cuvânt cheie

Pagină detaliu articol: se afișează toate conținutul și toate detaliile articolului – poză, autor, galerie foto, listă cuvinte cheie cu legătură înspre pagina de detaliu al cuvântului cheie etc..

Fig 14. Fiecare articol are o poză principală și mai multe poze în conținut

Întrucât site-ul a plecat de la ideea de BLOG am considerat că structura aceasta va fi mai mult decât acoperitoare nevoilor de trafic și conținutului care va fi publicat. Dar o dată cu creșterea traficului și a numărului de articole (la 30.03.2014 erau publicate pe site un număr de 1144 de articole), navigarea și descoperirea articolelor pentru vizitatori a devenit mai dificilă. De aceea am hotărât ca în versiunea nouă a site-ului, pe lângă optimizarea afișării să realizez și o optimizare a modului de citire a articolelor prin gruparea lor după un criteriu adițional.

Astfel fiecare articol se mai poate grupa într-o nouă ierarhie bazată pe tipul articolului – Jurnal de călătorie, Galerie foto, Galerie video, Noutăți, Evenimente etc.. Astfel un vizitator care dorește să vadă galerii foto despre Italia, va accesa secțiunea „Galerii foto” și apoi filtrează articolele după cuvântul cheie “Italia”. Această nouă grupare înseamnă secțiuni noi de afișare. Modul de afișare a acestora este diferit și depinde de tipul articolului. De exemplu la articolele de tip “Galerie foto” se pune accent pe imagini, pe când la articolele de tip “Noutăți” se pune accent pe conținut.

Structura completă a noului site este ilustrată în Fig 15. În această figură au fost marcate cu culoarea portocaliu secțiunile introduse în versiunea nou implementată cu scopul de a optimiza modul de găsire (descoperire) a articolelor și de a îmbunătății navigarea între categorii și arricole.

Fig 15. Structura secțiunilor site-ului www.ghiduri-turistice.info

8.3. Analiza evoluției traficului de pe dispozitive mobile în perioada 01.03.2012 – 31.04.2014

O dată cu creșterea traficului lunar, am remarcat și creșterea din ce în ce mai mare a ponderei traficului de pe dispozitive mobile – telefoane mobile și tablete. În luna Aprilie 2014, traficul de pe dispozitive mobile măsura aproape 24% din traficul lunar.

Majoritatea acceselor de pe dispozitivele mobile au ca sursă motoarele de căutare (Google) și au ca și destinație pagina de detaliu a unui articol.

Fig 16. Graficul evoluției numărului de vizite de pe dispozitive mobile (telefoane și tablete) în perioada 01.03.2012 – 31.04.2014, grupat pe luni
Sursă: Google Analytics [14]

Fig 17. Împărțirea procentuală a vizitelor în funcție de tipul de dispozitiv în perioada 01.03.2012 – 31.04.2014
Sursă: Google Analytics [14]

Fig 18. Procentele aferente tipurilor de rezoluții aparținând dispozitivelor mobile (telefoane si tablete) pentru vizitele realizate în perioada 01.03.2012 – 31.04.2014
Sursă: Google Analytics [14]

Fig 19. Compararea numărului total de vizite pentru luna Aprilie 2014 cu luna Aprilie 2013, grupate pe tip de dispozitiv
Sursă: Google Analytics [14]

Fig 20. Compararea numărului total de vizite pentru luna Aprilie 2014 cu luna Martie 2014, grupate pe tip de dispozitiv
Sursă: Google Analytics [14]

Așa cum ilustrează datele prezantate anterior, volumul traficului de pe dispozitive mobile a crescut cu peste 700% în luna Aprilie 2014 față de aceeași lună a anului precedent, iar lunar are o creștere medie de 20%. Acest aspect m-a determinat să decid că site-ul trebuie adaptat acestei noi realități.

8.4. Implementarea designului Fluid, o soluție pentru site

Creșterea volumului de conținut (de articole) și a traficului lunar însă a dus treptat la concluzia că site-ul este depășit tehnologic, chiar dacă am mai implementat anumite funcționalități și respectiv am încercat să aduc anumite optimizări.

În alegerea soluției pentru adaptarea site-ului www.ghiduri-turistice.info la traficul de pe dispozitive mobile a trebuit să țin cont de anumite aspecte :

Pe site sunt publicate peste 1000 de articole (la data de 01.03.2014)

Fiecare articol are o poză principală și una sau mai multe poze în cadrul conținutului, dimensiunea acestora fiind deja definită

Designul nou trebuie să folosească imaginile existente, întrucât încărcarea din nou a acestora necesita un timp foarte mare și pentru că nu toate pozele mai sunt disponibile la dimensiune originală astfel incât să poată fi redimensionate fără pierdere de calitate

O sursă importantă de trafic este pagina de Facebook aparținând site-ului https://www.facebook.com/ghiduri.turistice, de aceea este importat ca articolele distribuite pe acest canal să poate fi accesate de pe telefoane sau tablete fără probleme

Întrucât am considerat că este ușor să dezvolt o versiune separată și dedicată pentru mobil, prima soluție impleemntată în Septembrie 2013 a fost crearea versiunii http://m.ghiduri-turistice.info care afișa o versiunea simplificată a site-ului fără detalii grafice. Din păcate, întrucât această versiune implica pentru fiecare articol un URL separat față de cel de pe site-ul de desktop, distribuirea articolelor pe rețele ca Facebook.com sau Pinterest.com însemna divizarea traficului total pe cele două URL-uri distincte. Astfel nu puteam să identific facil cele mai citite articole sau cele mai accesate articole dintr-o anumită sursă de trafic. Deasemenea, din punct de vedere al traficului de pe motoare de căutare, acesta se direcționa pe versiunea de desktop, indiferent de tipul dispozitivului, întrucât site-ul pentru desktop avea un ranking (PageRank) mare pe motoarele de căutare. Această soluție nu a adus rezultatele scontate, ba din contră a generat anumite probleme pe partea de optimizare pentru motoarele de căutare (SEO), un aspect critic pentru dezvoltarea cu succes a proiectului.

Concluzia a fost că singura soluție bună pentru îmbunătățirea site-ului și adaptarea acestuia la traficul crescând de pe dispozitive mobile era re-implementarea acestuia folosind principiul designului fluid (RWD). Prin această nouă versiune doream să rezolv mai multe probleme:

Păstrarea imaginilor aferente articolelor așa cum sunt

Adaptarea designului în timp real în funcție de tipul de dispozitiv și rezoluția acestuia

Micșorarea timpului de încărcare a paginilor din cadrul site-ului prin implementarea de metode de cache-ing și compresie a librăriilor de CSS și Javascript

Îmbunătățirea modului de folosire al site-ului (usability) prin optimizarea navigării în cadrul secțiunilor site-ului

Îmbunătățirea modului de navigare dintr-o pagină în alta (cross-site linking) prin afișarea mai multor artciole în funcție de context

Noul design s-a concentrat pe adaptarea la dispozitive mobile și la optimizarea afișării conținutului pentru creșterea timpului de vizitare al site-ului:

Fig 21. Noul design folosește toate principiile metodei Designului Fluid (RWD) pentru a afișa un site adaptat rezoluției dispozitivului de pe care este accesat

9. Etapele de implementare ale noului Design Fluid

Pentru a trece la noul design site-ul necesită o reimplementare totală astfel încât toate funcțiile să fie migrate către noul mod de afișare adaptat rezoluției dispozitivelor. Din punct de vedere al modului de implementare, am parcurs pașii următori:

Crearea noului design

Definirea structurii de directoare și librării

Definirea structurii claselor care vor implementa toate funcțiile de afișare a articolelor

Implementarea designului – HTML și CSS

Testarea designului în browsere multiple și pe rezoluții diferite

Implementarea funcționalităților folosind limbajul de programare PHP

Testarea întregului deisgn și flux funcțional

Lansarea online a noii versiuni

Întreaga implementare a noului site a durat aproximativ 8 săptămâni și am realizat-o în perioada 01.02.2014 – 30.03.2014.

9.1. Crearea noului design

Înainte de implementarea efectivă a site-ului, am creat designul grafic al principalelor secțiuni folosind programul de editare grafică Adobe Photoshop CC. Prin acest mod am putut testa diferite variante privind modul de aranjare al elementelor site-ului și astfel să aleg acea organizare care se apropie cel mai mult de obiectivele definite din punct de vedere funcțional.

În această etapă am creat designul grafic privind layout-ul pentru câteva pagini:

Prima pagină a site-ului (HOMEPAGE) – Anexa 1

Pagina de categorie care afișează toate articolele aparținând unei anumite categorii – Anexa 2

Pagina de afișare a tuturor galeriilor foto aparținând articolelor din site – Anexa 3

Pagina de detaliu articol – Anexa 4

Pagina de prezentare informație : Despre noi, Echipa noastră, Devino Ambasador și Ce ne place să citim

În realizarea designului a trebuit să țin cont de constrângerea determinată de dimensiunea predefinită a imaginii principale a fiecărui articol.

În crearea designului am folosit un Grid format din 12 coloane. Numărul de coloane se modifică în mod dinamic, în funcție de rezoluția de afișare a dispozitivului astfel:

pentru lățime de afișare mai mare de 980 px – 12 coloane

pentru lățime de afișare între 780 px și 980 px – 8 coloane

pentru lățime de afișare între 480 și 780 px – 4 coloane

pentru lățime de afișare până la 480 px – 2 coloane

Din punct de vedere al regulilor privind afișarea elementelor dependent de rezoluția ecranului, pe acestea le-am definit doar în etape de implementare a funcționalității întrucât astfel am putut să observ și să testez în timp real impactul pe care îl prezenta afișarea sau eliminarea unor elemente de layout în funcție de rezoluția de afișare.

Designul nou al paginilor din site se poate vizualiza în Anexele 1-4.

9.2. Definirea elementelor structurale ale designului site-ului

9.2.1. Structura Primei pagini a site-ului

Fig 22. Zonele principale de pe Prima pagină a site-ului.
Imaginea poate fi vizualizată în dimensiune mai mare în Anexa 5.

Cu excepția zonei 2, toate zonele de pe prima pagină se vor folosi și în celelalte pagini.

În pagina de Categorie și de afișare a articolelor pe bază de cuvinte cheie folosesc afișarea articolelor ca și în Zona 4, păstrând zona laterală ilustrată în Zona 5. Ordinea de afișae a zonelor este diferită de la o secțiune la alta, în funcție de obiectivul fiecărei secțiuni.

Widget-urile afișate în Zona 5, afișează conținut dependent de context. Astfel într-o pagină de Categorie, în acestea se vor afișa articole din categorie respectivă. De exemplu în categoria “Descoperă România” se afișează in widget-ul “Cele mai citite” articolele cele mai citite din ultimele 30 de zile din categoria “Descoperă România”. Această modalitate de afișare în funcție de context mărește șansa de a determina vizitatorul să navigheze mai departe în site (cross-site linking) și astfel să se crească traficul lunar.

9.3. Definire structură de directoare și librării utilizate

Din punct de vedere al structurii proiectului, avem următoarea organizare a fișierelor proiectului:

9.4. Structura claselor care vor implementa toate funcțiile de afișare a articolelor

Din punct de vedere al afișării articolelor și al generării secțiunilor site-ului am apelat la o implementare bazată pe principiul Programării Orientate pe Obiecte. Clasele descrise mai jos au fost apoi implementate folosind limbajul de programare web PHP.

9.4.1. Clasa ARTICLES

Prin intermediul acestei clase se implementează toate afișările articolelor din site. Constructorul clasei inițializează toate constantele și variabilele de context necesare pentru afișarea informațiilor. În funcție de anumiți parametri de tip GET se verifică care este secțiunea curentă – categorie, detaliu articol etc. – și se configurează variabilele clasei care apoi vor afecta afișarea informațiilor în metodele clasei.

Diagrama UML a clasei este:

Această clasă este folosită în scripturile article-category.php (se afișează toate articolele dintr-o anumită categorie), article-detail.php (se afișează detaliile unui articol), article-gallery.php (se afișează galeriile foto), article-type.php (se afișează toate articolele aparținând unui anumit tip – Galerie foto, Galerie Video, Jurnale de călătorie, Interviuri, etc.). La instanțierea obiectului, constructorul clasei inițializează principalele variabile ținînd cont de contextul de execuție :

function __construct(){

global $s_page, $mysql, $array_article_type_title;

$this->url = $_GET['__URL__'];

$this->s_page = $s_page;

$this->page_no = (isset($_GET['__PAGE__'])

&& ($_GET['__PAGE__']>0))?$_GET['__PAGE__']:1;

//verific daca am parametrul pentru CATEGORIE

if(isset($_GET['__CAT__']) && ($_GET['__CAT__'] > 0)){

//scot infomatia categoriei

$q_cat = 'SELECT `bfcid`, `title`, `meta_title`,

`meta_description`, `meta_keywords`,

`meta_description`, `url_key`

FROM `'.DB_PREFIX.'category`

WHERE

`bfcid` = "'.$mysql->clean($_GET['__CAT__']).'"

AND `flag_status` = "1"

LIMIT 0,1;';

$r_cat = $mysql->select($q_cat);

if($r_cat->num_rows){

$row_cat = $r_cat->fetch_assoc();

$this->category = array_map('stripslashes', $row_cat);

}else{

//Categorie inexistenta, redirectez spre pagina 404

header('Location:'.HOST.'404.php');

exit();

}

}

//verific daca sunt in pagina de detaliu articol

if(($s_page == 'article-detail.php')

&& isset($_GET['__URL__']) && ($_GET['__URL__'] != '')){

//scot infomratia articolului

$q_art = 'SELECT art.*,

aut.`author_name`, aut.`autor_desc`,

aut.`author_img`, aut.`url_key` as `author_url_key`,

aut.`date_last_update` as `author_date_last_update`,

cat.`title` as `cat_title`, cat.`url_key` as`cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

INNER JOIN `'.DB_PREFIX.'articles_authors` aut

ON aut.`bfaaid` = art.`bfaaid` AND aut.`flag_status`="1"

WHERE

art.`flag_status` = "1"

'.((!isset($_GET['preview']))?'AND

art.`date_publish` <= "'.time().'" ':'').'

AND art.`url_key` =

"'.$mysql>clean($_GET['__URL__']).'"

LIMIT 0,1;';

$r_art = $mysql->select($q_art);

if($r_art->num_rows){

$row_art = $r_art->fetch_assoc();

$this->article = array_map('stripslashes', $row_art);

$this->category = array(

'bfcid' => $row_art['bfcid'],

'title' => $row_art['cat_title'],

'cat_url_key' => $row_art['cat_url_key']

);

}else{

//Articolul nu exista, redirectez spre pagina404

header('Location:'.HOST.'404.php');

exit();

}

}

//verific daca suntem intr-o pagina de TIP ARTICOL

if($s_page == 'article-type.php'){

if(isset($_GET['__TYPE__']) && ($_GET['__TYPE__'] > 0)

&& ($array_article_type_title[$_GET['__TYPE__']] != '')){

$this->article_type = $_GET['__TYPE__'];

}else{

//nu exista tipul de articol, redirectez spre pagina 404

header('Location:'.HOST.'404.php');

exit();

}

}

//initializez tipul de reclama care se va afisa

if(count($this->category) > 0){

define('ADVERTISING_PAGE_CAT', $this->category['bfcid']);

}else{

define('ADVERTISING_PAGE_CAT', '999');

}

//initializez variabilele utilizate pentru paginare in anumite sectiuni

switch($s_page){

case('article-category.php'):

$this->page_url = $this->category['url_key'].'-[%page%]';

break;

case('index.php'):

$this->page_url = 'articole-ghiduri-turistice-[%page%]';

break;

case('article-gallery.php'):

$this->page_url = 'poze-deosebite-din-calatoriile-noastre-[%page%]';

break;

case('article-type.php'):

if($_GET['__TYPE__'] == 12){

$this->page_url = 'descopera-locuri-incredibile-din-lume-[%page%]';

}elseif($_GET['__TYPE__'] == 5){

$this->page_url = 'interviuri-despre-calatorii-[%page%]';

}

break;

}

//generez META tag-urile pentru pagina

$this->generateMeta();

}

Metoda getArticles() este cea care extrage din baza de date articolele dependent de secțiunea curentă determinată de parametrul section. Metoda getArticles() este apelată din celelalte metode ale clasei astfel încât există un singur loc în care creez interogările la baza de date, lucru care ușurează extinderea funcționalității in viitor. Metoda getArticles() este de tip private, deci poate fi folosită doar de metodele clasei.

private function getArticles($section, $page_articles, $page_no = 1, $article_type = 0){

global $mysql;

$articles = array();

switch ($section){

case('gallery'):

case('box-type'):

//articole pentru boxurile laterale dreapta

//construiesc interogare SQL pentru extragerea articolelor

$q_articles = 'SELECT art.`bfaid`, art.`title`, art.`article_image`,art.`url_key`,art.`date_publish`,

art.`date_last_update`, art.`article_type`,

art.`short_desc`,

aut.`author_name`, aut.`author_img`,

aut.`url_key` as `author_url_key`,

aut.`date_last_update` as `author_date_last_update`,

cat.`title` as `cat_title`, cat.`url_key` as

`cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid`

AND cat.`flag_status` = "1"

INNER JOIN `'.DB_PREFIX.'articles_authors` aut

ON aut.`bfaaid` = art.`bfaaid`

AND aut.`flag_status` = "1"

AND aut.`flag_author_type` = "0"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND art.`article_type` = "'.

$mysql- >clean($article_type).'"

AND art.`bfaid` NOT IN ("'.implode('","',

$this->articles_id).'")

ORDER BY RAND()

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('gallery-list'):

//articolele din GALERII FOTO

//calculez numarul total de articole, pentru paginare

$q_articles = 'SELECT

COUNT(img.`imgid`) as `total_articles`, img.`bfaid`

FROM `'.DB_PREFIX.'articles_images` img

INNER JOIN `'.DB_PREFIX.'articles` art ON

img.`bfaid` = art.`bfaid` AND art.`flag_status` = "1"

WHERE

img.`flag_status`="1"

AND art.`date_publish` <= "'.time().'"

GROUP BY

img.`bfaid`

HAVING

`total_articles`>= "16"

;';

$r_page = $mysql->select($q_articles);

if($r_page->num_rows){

//initializez parametrii pentru paginare

$row_total = $r_page->fetch_assoc();

$this->total_articles = $r_page->num_rows;

$this->total_pages = ceil($this->total_articles/

$page_articles);

$this->page_articles = $page_articles;

}

//construiesc interogare SQL pentru extragerea articolelor

$q_articles = 'SELECT COUNT(img.`imgid`) as `nr_img`,

art.`bfaid`, art.`title`,art.`article_image`,

art.`url_key`,art.`date_publish`,art.`date_last_update`,

art.`article_type`, art.`short_desc`

FROM `'.DB_PREFIX.'articles_images` img

INNER JOIN `'.DB_PREFIX.'articles` art ON

img.`bfaid` = art.`bfaid` AND art.`flag_status` = "1"

WHERE

img.`flag_status`="1"

AND art.`date_publish` <= "'.time().'"

GROUP BY img.`bfaid`

HAVING

`nr_img`>= "16"

ORDER BY

art.`date_publish` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('slider'):

//slider articole, prima pagina

//construiesc interogare SQL pentru extragerea articolelor

$q_articles = 'SELECT art.`bfaid`,

art.`title`,art.`article_image`,

art.`url_key`,art.`date_publish`,art.`date_last_update`,

art.`article_type`, art.`slider_home_image`,

cat.`title` as `cat_title`, cat.`url_key` as

`cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND art.`slider_home_image` != ""

ORDER BY

art.`date_publish` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('new'):

//carusel articole noi

//construiesc interogare SQL pentru extragerea articolelor

$q_articles = 'SELECT art.`bfaid`,

art.`title`,art.`article_image`,

art.`url_key`,art.`date_publish`,art.`date_last_update`,

art.`article_type`, cat.`title` as `cat_title`,

cat.`url_key` as `cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

ORDER BY

art.`date_publish` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('team_articles'):

//articole pentru boxul lateral dreapta ECHIPA

//construiesc interogare SQL pentru extragerea articolelor

$q_articles = 'SELECT aut.`bfaaid`, art.`bfaid`, art.`title`,

art.`article_image`,art.`url_key`,art.`date_publish`,

art.`date_last_update`, art.`article_type`,

aut.`author_name`, aut.`author_img`,

aut.`url_key` as `author_url_key`,

aut.`date_last_update` as `author_date_last_update`,

cat.`title` as `cat_title`, cat.`url_key` as

`cat_url_key`

FROM `'.DB_PREFIX.'articles_authors` aut

INNER JOIN `'.DB_PREFIX.'articles` art

ON aut.`bfaaid` = art.`bfaaid` AND art.`flag_status`= "1"

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

aut.`flag_author_type` = "0"

AND aut.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND aut.`bfaaid` NOT IN ("1", "19")

GROUP BY

aut.`bfaaid`

ORDER BY

aut.`field_display_order`, art.`date_publish` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('most_read'):

//articolele cele mai citite

//construiesc interogare SQL pentru extragerea articolelor

$q_articles = 'SELECT art.`bfaid`,

art.`title`,art.`article_image`,

art.`url_key`,art.`date_publish`,art.`date_last_update`,

art.`article_type`,

cat.`title` as `cat_title`, cat.`url_key` as

`cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` >= "'.strtotime('-60days').'"

AND `read_count` > 0

AND art.`bfaid` NOT IN ("'.

implode('","', $this->articles_id).'")

'.(($this->category['bfcid'] > 0)?

' AND art.`bfcid` = "'.$mysql->clean(

$this->category['bfcid']).'"':'').'

ORDER BY

art.`read_count` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('article-type'):

//articolele de un anumit TIP

//calculez numarul de articole, pentru paginare

$q_articles = 'SELECT COUNT(art.`bfaid`) as `total_articles`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND art.`article_type` = "'.$mysql->clean(

$this->article_type).'"

;';

$r_page = $mysql->select($q_articles);

if($r_page->num_rows){

//initializez parametrii pentru paginare

$row_total = $r_page->fetch_assoc();

$this->total_articles = $row_total['total_articles'];

$this->total_pages = ceil($this->total_articles /

$page_articles);

$this->page_articles = $page_articles;

}

//construiesc interogare SQL pentru extragerea articolelor $q_articles = 'SELECT art.`bfaid`,

art.`title`,art.`article_image`,

art.`url_key`,art.`date_publish`,art.`date_last_update`,

art.`article_type`, art.`short_desc`,

cat.`title` as `cat_title`, cat.`url_key` as

`cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status`=“1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND art.`article_type` = "'.$mysql->clean(

$this->article_type).'"

ORDER BY

art.`date_publish` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

case('category'):

case('home'):

//articolele dintr-o categorie

//calculez numarul de articole, pentru paginare

$q_articles = 'SELECT COUNT(art.`bfaid`) as `total_articles`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND art.`bfaid` NOT IN ("'.implode('","',

$this->articles_id).'")

'.(($this->category['bfcid'] > 0)?'

AND art.`bfcid` = "'.$mysql->clean(

$this->category['bfcid']).'"':'').'

;';

$r_page = $mysql->select($q_articles);

if($r_page->num_rows){

//initializez parametrii pentru paginare

$row_total = $r_page->fetch_assoc();

$this->total_articles = $row_total['total_articles'];

$this->total_pages = ceil($this->total_articles /

$page_articles);

$this->page_articles = $page_articles;

}

//construiesc interogare SQL pentru extragerea articolelor $q_articles = 'SELECT art.`bfaid`,

art.`title`,art.`article_image`,

art.`url_key`,art.`date_publish`,art.`date_last_update`,

art.`article_type`, art.`short_desc`,

cat.`title` as `cat_title`, cat.`url_key` as

`cat_url_key`

FROM `'.DB_PREFIX.'articles` art

INNER JOIN `'.DB_PREFIX.'category` cat

ON art.`bfcid` = cat.`bfcid` AND cat.`flag_status` = "1"

WHERE

art.`flag_status` = "1"

AND art.`date_publish` <= "'.time().'"

AND art.`bfaid` NOT IN ("'.implode('","',

$this->articles_id).'")

'.(($this->category['bfcid'] > 0)?

'AND art.`bfcid` = "'.$mysql->clean(

$this->category['bfcid']).'"':'').'

ORDER BY

art.`date_publish` DESC

LIMIT '.(($page_no-1)*$page_articles).','.$page_articles.';';

break;

}

$r_articles = $mysql->select($q_articles);

if($r_articles->num_rows){

while($row_article = $r_articles->fetch_assoc()){

$row_article = array_map('stripslashes', $row_article);

$articles[] = $row_article;

}

}

return $articles;

}

Metodele care au ca și prefix display apelează metoda getArticles() și apoi prelucrează setul de articole primite astfel încât să se afișeze conform design-ului. Funcțiile întorc direct codul HTML necesar afișării pe site.

De exemplu, metoda displayListArticles() generează cpdul HTML pentru afișarea articolele în modul listă în cadrul unei categorii:

public function displayListArticles($section, $title, $page_articles){

global $mysql, $array_article_type, $s_page;

$html_code = '';

$articles = $this->getArticles($section, $page_articles, $this->page_no);

if(count($articles)){

$html_code .= '<div class="panel">';

if($title != ''){

if(!(($s_page == "index.php") && ($this->page_no > 1))){

$html_code .= '<div class="p-title">

<h2>'.$title.'</h2>

</div>';

}

}

$html_code .= '<div class="blog-list style-1">';

foreach($articles as $row){

$html_code .= '<div class="item">

<div class="item-header">

<a href="'.HOST.ARTICLE_URL_PREFIX.$row['url_key'].'" title="'.$row['title'].'"><img src="'.Functions::getCdndPath($row['article_image'], 'medium').'?cache='.$row['date_last_update'].'" alt="" class="item-photo" /></a>

<a href="'.HOST.ARTICLE_URL_PREFIX.$row['url_key'].'" title="'.$row['title'].'" class="category-identifier"><i class="fa '.$array_article_type[$row['article_type']].'"></i></a>

</div>

<div class="item-content">

<a href="'.HOST.$row['cat_url_key'].'" title="'.$row['cat_title'].'" class="category-link">'.$row['cat_title'].'</a>

<h3><a href="'.HOST.ARTICLE_URL_PREFIX.$row['url_key'].'" title="'.$row['title'].'">'.$row['title'].'</a></h3>

'.$row['short_desc'].'

</div>

<div class="item-footer">

<span class="right">

<a href="'.HOST.ARTICLE_URL_PREFIX.$row['url_key'].'"><i

class="fa fa-clock-o"></i> '.date(DATE_FORMAT, $row['date_publish']).'</a>

</span>

</div>

</div>';

}

$html_code .= '</div>

</div>

';

$html_code .= $this->displayPagination();

}

return $html_code;

}

La fiecare execuție a scriptului PHP aferent paginii curente se inițializează un singur obiect al clasei ARTICLES. Metoda destructor a clasei eliberează resursele folosite la inițializare.

9.4.2. Clasa ADVERTISING

Prin intermediul acestei clase se afișează elementele aferente zonelor de publicitate de pe site. În funcție de contextul de afișare (zona) și de secțiunea site-ului

Diagrama UML a clasei este :

În metoda constructor a clasei se extrag din baza de date toate elementele aferente zonelor de publicitate secțiunii curente. Prin intermediul metodei displayBanner se generează codul HTML aferent fiecărei zone de publicitate.

La fiecare execuție a scriptului PHP aferent paginii curente se inițializează un singur obiect al clasei ADVERTISING. Metoda destructor a clasei eliberează resursele folosite la inițializare.

9.4.3. Clasa FUNCTIONS

Această clasă conține metode public statice care sunt apelate în site. Toate metodele implementate de această clasă au funcții de procesare generală. Nu se inițializează nici un obiect pentru această clasă.

Diagrama UML aferentă clasei este :

9.4.4. Clasa MYSQL

Pentru a putea separa modalitatea de conectare și interogare la baza de date de platforma sau librăriile standard PHP existente pe server, am construit o clasă prin intermediul căreia se realizează toate operațiile cu baza de date.

Metodele din clasa MYSQL implementează funcționalitatea folosind librăria standar PHP mysqli.

Constructorul clasei inițializează conexiunea la baza de date:

function __construct($host = MYSQL_SERVER, $user = MYSQL_USER, $pass = MYSQL_PASS, $db = MYSQL_DB) {

$mysqli = new mysqli($host, $user, $pass, $db);

if (mysqli_connect_errno()) {

printf("Conexiunea nu a putut fi realizata: %s\n",

mysqli_connect_error());

exit();

}

if ( defined('MYSQL_CHARSET') ) {

$mysqli->query('SET NAMES "' . MYSQL_CHARSET . '"');

}

$this->CONNECTION = $mysqli;

}

Destructorul clasei eliberează conexiunea existentă:

function __destruct() {

if( $this->CONNECTION ) {

$this->CONNECTION->close();

}

$this->CONNECTION = false;

}

9.5. Implementarea designului – HTML și CSS

Interfața web a site-ului am asamblat-o folosind HTML5 și CSS3.

Pentru o optimizare semantică a site-ului pentru motoare de căutare (SEO) am folosit tag-uri specifice HTML5 : header, footer, menu, item.

În ceea ce privește modul de afișare am folosit reguli specifice CSS3 dar am definit și reguli pentru compatibilitatea cu browserele mai vechi care nu au implementat standardul CSS3.

Pentru implementarea designului fluid am folosit media query-uri pentru afișarea diferită când lățimea dimensiunii ecranului se schimbă definind următoarele puncte de interogare:

/* Dispozitive mobile (portrait si landscape) –––– */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Reguli CSS */

}

/* Dispozitive mobile (landscape) –––– */

@media only screen

and (min-width : 321px) {

/* Reguli CSS */

}

/* Dispozitive mobile (portrait) –––– */

@media only screen

and (max-width : 320px) {

/* Reguli CSS */

}

/* Tablete / iPads (portrait si landscape) –––– */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Reguli CSS */

}

/* Tablete / iPads (landscape) –––– */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Reguli CSS */

}

/* Tablete / iPads (portrait) –––– */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Reguli CSS */

}

/* Calculatoare de tip desktop si laptop –––– */

@media only screen

and (min-width : 1224px) {

/* Reguli CSS */

}

/* Ecrane mari > 21” –––– */

@media only screen

and (min-width : 1824px) {

/* Reguli CSS */

}

/* Dispozitive mobile cu ecran < 3.2” –––– */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Reguli CSS */

}

Pentru aceste intervale, am definit reguli specifice care afișează mai multe aspecte privind afișarea site-ului: se ascunde/afișează anumite zone, se modifică dimensiunea anumitor elemente, se modifică dimensiunea de afișare a textelor, etc..

Pentru a detecta abilitățile browserului și elementele privind ecranul am folosit librătia de javascript numită Modernizr [15]. Prin intermediul acestei librării se detectează ușor suportul browserului privind funcționalitățile aferente HTML5 și CSS3, și astfel se pot implementa clase CSS particulare care asigură compatibilitatea și cu aceste browsere.

Pentru browserele mai vechi (în special Internet Explorer versiunea 7 și 8) am aplicat principiul “beautiful degradation”. Pe baza acestui principiu, anumite funcționalități create cu ajutorul unor elemente specifice HTML5 și CSS3 care nu sutn suportate de browser, vor fi implementate mai simplu sau chiar eliminate. De exemplu în cazul unui efect de animație aplicat unei imagini și implementat cu CSS3, într-o versiune mai veche de browser acest efect va fi eliminat de tot și vizitatorul va vedea poza simplu, fără animație.

9.6. Testarea designului în browsere multiple și pe rezoluții diferite

După implementarea designului și funcționalității întregului site, ultima etapă este cea de verificare și testare a funcționalității site-ului.

Testarea afișării și a funcționalității am realizat-o pe mai multe browsere – Internet Explorer 8, Internet Explorer 9, Internet Explorer 10, Mozilla Firefox 2.x, Mozilla Firefox 20+, Google Chrome, Safari 5.x, Opera 21.x. Fiecare browser are propriile particularități privind afișarea corectă a regulilor CSS ceea ce determină scrierea unor reguli particulare.

Pe lângă vizualizarea în browsere diferite, am testat modul de afișare pe dispozitive cu ecrane de dimensiuni diferite: telefon Apple iPhone 4S, telefon Apple iPhone 5, laptop Apple MacBook Air 13”, tabletă Apple iPad 2, tabletă Samsung Galaxy tab 10”, laptop HP Probook 15”, laptop Hp Probook 17”. Astfel am putut verifica dacă site-ul își modifică bine afișarea în funcție de dimensiunea ecranului pe care se vizualizează.

Cea mai mare provocare când se face etapa de testare este verificarea continuă ca anumite corecții făcute pentru unul din browsere să nu genereze probleme în alte browser și astfel să fie necesare corecții încontinuu. Pentru a putea testa modul de afișare a site-ului în browsere diferite și a face corecțiile în timp real ușor, am folosit un program numit Ghostlab [16] . Cu ajutorul acestuia se poate vizualiza într-un mod sincronizat un site în cadrul mai multor ferestre de browsere diferite și atunci când se face orice modificare paginile sunt încărcate simultan. Astfel se poate vizualiza în timp real cum arată site-ul în toate browserele deodată. Un alt beneficiu este că pe lângă browserele de pe stația de lucru se pot conecta printr-o conexiune de tip WI-FI și dispozitive mobile – telefoane și tablete.

Pe lângă testarea efectivă a modului de afișare a site-ului în toate browserele și dispozitivele menționate, am verificat și partea legată de ușurința de navigare în site. Prin aceste teste am verificat dacă din punctul de vedere al vizitatorului, navigarea în site este intuitivă și evidentă. Deasemenea, pe dispozitivele mobile am verificat dacă elementele de navigație – link-uri și butoane – sunt ușor de accesat și au dimensiuni care facilitează apăsarea lor.

După finalizarea etapei de testare am realizat și ultima operație necesară optimizării : am comprimat toate librăriile de CSS și Javascript. Prin această operație am micșorat (minified) dimensiunea fișierelor prin eliminarea spațiilor și a rândurilor libere și astfel am obținut câte un fișier de .CSS și .JS mult mai mic ca și dimensiune. Faptul că dimensiunea fișierelor este mai mică determină un timp de încărcare mai mic pentru site.

9.7. Lansarea online a noii versiuni

După finalizarea testării am lansat site-ul online la data de 20.05.2014.

Întrucât am păstrat toate elementele privind navigația (URL-uri) și imaginile, nu a trebuit să fac nici o operație deosebită pentru lansarea online a site-ului.

10. Idei de extindere a funcționalității site-ului în viitor

Din punct de vedere al funcționalității, site-ul poate fi optimizat în continuare pentru a îmbunătății afișarea pe diferite dispozitive și pentru a îmbunătății navigația în site (usability).

O primă metodă de îmbunătățire a site-ului este folosirea de imagini adaptate pentru ecrane cu rezoluție mărită (ecran Retina). Acest lucru impune extinderea funcțioalității panoului de administrare a site-ului astfel încât să poată fi încărcate cele două tipuri de imagine (la rezoluție de 72 dpi și la rezoluție de 150 dpi). La afișarea articolelor, în funcție de parametrii ecranului se va afișa imaginea la rezoluție de 72 dpi sau cea cu rezoluție ridicată.

Un alt aspect care trebuie îmbunătățit la site este legat de modul în care un vizitator poate descoperi conținutul mai ușor. De exemplu, posibilitatea de navigare folosind o logică legată de destinații. Astfel dacă un vizitator caută idei pentru o vacanță în Asia, el să poată accesa categoria “Orașele lumii” și apoi să selecteze Asia și apoi să poată alege un oraș din lista de orașe pentru care există articole. Pentru a implementa această metodă de navigare contextuală trebuie extins meniul principal al site-ului și trebuie grupate o parte din cuvintele cheie ale site-ului după criterii georgrafice.

O altă îmbunătățire care este necesară este posibilitatea de a distribui pe diverse rețele sociale – Facebook, pinterest, Google+ etc. – a imaginilor din galeriile foto asociate articolelor. Întrucât acum acestea sunt afișate prin intermediul unui plugin de Javascript, acesta nu permite distribuirea directă a unei imagini. Această problemă poate fi rezolvată dacă fiecare imagine din cadrul unei galerii foto ar avea un URL unic și astfel ar putea să fie distribuită ușor pe diferite site-uri. Distribuirea de imagini pe diferite site-uri ar aduce inevitabil o creștere a traficului site-ului și respectiv a îmbunătățirii poziționării pe motoarele de căutare.

BIBLIOGRAFIE

Banga Cameron, Weinhold Josh (2014), Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps (Usability)

Beaird Jason (2010), The Principles of Beautiful Web Design

Carver Matthew (2014), The Responsive Web, Manning Publications

Firdaus Thoriq (2013), Responsive Web Design by Example

Fisher Andrew (2013), Jump Start Responsive Web Design

Frain Ben (2012), Responsive Web Design with HTML5 and CSS3

Gasston Peter (2013), The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

Gasston Peter (2013), Responsive Web Design with jQuery

Halvorson Kristina, Rach Melissa (2012), Content Strategy for the Web, 2nd Edition

Hay Stephen (2013), Responsive Design Workflow, New Riders

Jackson Jamal, Graveris Dainis, Burns Michael John (2012), Responsive Web Site Design, Quick Guide How To Get Your Site Ready For Every Device And Browser

Kadlec Tim (2012), Implementing Responsive Design: Building sites for an anywhere, everywhere web (Voices That Matter)

Kyrnin Jennifer (2014), Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself , Sams Publishing

LaGrone Benjamin (2013), HTML5 and CSS3 Responsive Web Design Cookbook

Levin Michal (2014), Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences across Devices

MacDonald Matthew (2013), HTML5: The Missing Manual

Marcotte Ethan (2011), Responsive Web Design (Brief Books for People Who Make Websites, No. 4), A Book Apart

McFarland David Sawyer (2012), CSS3: The Missing Manual

Peterson Clarissa (2014), Learning Responsive Web Design: A Beginner's Guide

Smashing Magazine (2014), Responsive Web Design, Vol. 2 (Smashing eBooks)

Smashing Magazine (2013), Responsive Web Design: Getting The New Baseline In Web Design Right (Smashing eBooks)

Smashing Magazine (2012), Responsive Design (Smashing eBook Series)

Stefanov Stoyan (2012), Web Performance Daybook Volume 2

[1] ComScore, 2013 Mobile Future in Focus, http://www.comscore.com/Insights/Presentations_and_Whitepapers/2013/2013_Mobile_Future_in_Focus

[2] Rata de penetrare a internetului mobil de mare viteză a ajuns la 41%

http://www.ancom.org.ro/rata-de-penetrare-a-internetului-mobil-de-mare-viteza-a-ajuns-la-41_5142

[3] Raport de date statistice privind serviciile de comunicații electronice, semestrul II 2013

https://statistica.ancom.org.ro:8000/sscpds/public/files/81

[4] Our Mobile Planet Romania mai 2013, Google Inc.

http://services.google.com/fh/files/misc/omp-2013-ro-local.pdf

[5] EUROPEAN COMISSION – INFORMATION PROVIDERS GUIDE

http://ec.europa.eu/ipg/index_en.htm

[6] OPEAN COMISSION – INFORMATION PROVIDERS GUIDE

http://ec.europa.eu/ipg/design/general_rules/screen_layout/index_en.htm

[7] A Dao of Web Design

A Dao of Web Design

[8] Building Smartphone-Optimized Websites

https://developers.google.com/webmasters/smartphone-sites/details

[9] Responsive Web Design

Responsive Web Design

[10] Apple.com – MacBook pro

https://www.apple.com/macbook-pro/features-retina/

[11] Google Think Insights on Mobile

http://www.thinkwithgoogle.com/

[12] Recommendations for building smartphone-optimized websites

http://googlewebmastercentral.blogspot.ch/2012/06/recommendations-for-building-smartphone.html

[13] Google PageSpeed Developers

https://developers.google.com/speed/pagespeed/

[14] Google Analytics

http://www.google.com/analytics/

[15] Modernizr

http://modernizr.com/

[16] Ghostlab

http://vanamco.com/ghostlab/

BIBLIOGRAFIE

Banga Cameron, Weinhold Josh (2014), Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps (Usability)

Beaird Jason (2010), The Principles of Beautiful Web Design

Carver Matthew (2014), The Responsive Web, Manning Publications

Firdaus Thoriq (2013), Responsive Web Design by Example

Fisher Andrew (2013), Jump Start Responsive Web Design

Frain Ben (2012), Responsive Web Design with HTML5 and CSS3

Gasston Peter (2013), The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

Gasston Peter (2013), Responsive Web Design with jQuery

Halvorson Kristina, Rach Melissa (2012), Content Strategy for the Web, 2nd Edition

Hay Stephen (2013), Responsive Design Workflow, New Riders

Jackson Jamal, Graveris Dainis, Burns Michael John (2012), Responsive Web Site Design, Quick Guide How To Get Your Site Ready For Every Device And Browser

Kadlec Tim (2012), Implementing Responsive Design: Building sites for an anywhere, everywhere web (Voices That Matter)

Kyrnin Jennifer (2014), Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself , Sams Publishing

LaGrone Benjamin (2013), HTML5 and CSS3 Responsive Web Design Cookbook

Levin Michal (2014), Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences across Devices

MacDonald Matthew (2013), HTML5: The Missing Manual

Marcotte Ethan (2011), Responsive Web Design (Brief Books for People Who Make Websites, No. 4), A Book Apart

McFarland David Sawyer (2012), CSS3: The Missing Manual

Peterson Clarissa (2014), Learning Responsive Web Design: A Beginner's Guide

Smashing Magazine (2014), Responsive Web Design, Vol. 2 (Smashing eBooks)

Smashing Magazine (2013), Responsive Web Design: Getting The New Baseline In Web Design Right (Smashing eBooks)

Smashing Magazine (2012), Responsive Design (Smashing eBook Series)

Stefanov Stoyan (2012), Web Performance Daybook Volume 2

[1] ComScore, 2013 Mobile Future in Focus, http://www.comscore.com/Insights/Presentations_and_Whitepapers/2013/2013_Mobile_Future_in_Focus

[2] Rata de penetrare a internetului mobil de mare viteză a ajuns la 41%

http://www.ancom.org.ro/rata-de-penetrare-a-internetului-mobil-de-mare-viteza-a-ajuns-la-41_5142

[3] Raport de date statistice privind serviciile de comunicații electronice, semestrul II 2013

https://statistica.ancom.org.ro:8000/sscpds/public/files/81

[4] Our Mobile Planet Romania mai 2013, Google Inc.

http://services.google.com/fh/files/misc/omp-2013-ro-local.pdf

[5] EUROPEAN COMISSION – INFORMATION PROVIDERS GUIDE

http://ec.europa.eu/ipg/index_en.htm

[6] OPEAN COMISSION – INFORMATION PROVIDERS GUIDE

http://ec.europa.eu/ipg/design/general_rules/screen_layout/index_en.htm

[7] A Dao of Web Design

A Dao of Web Design

[8] Building Smartphone-Optimized Websites

https://developers.google.com/webmasters/smartphone-sites/details

[9] Responsive Web Design

Responsive Web Design

[10] Apple.com – MacBook pro

https://www.apple.com/macbook-pro/features-retina/

[11] Google Think Insights on Mobile

http://www.thinkwithgoogle.com/

[12] Recommendations for building smartphone-optimized websites

http://googlewebmastercentral.blogspot.ch/2012/06/recommendations-for-building-smartphone.html

[13] Google PageSpeed Developers

https://developers.google.com/speed/pagespeed/

[14] Google Analytics

http://www.google.com/analytics/

[15] Modernizr

http://modernizr.com/

[16] Ghostlab

http://vanamco.com/ghostlab/