Responsive Web Design este o latură a designului web care se concentrează asupra adaptării site-urilor pentru utilizatorii care navighează folosind dispozitivele mobile. Indiferent de natura device-urilor, smartphone-uri sau tablete, indiferent de rezoluţia folosită şi indiferent de conţinutul site-urilor navigate, responsive design-ul are menirea de a adapta conţinutul şi a-l oferii în condiţii optime pentru ca experienţa vizitatorilor să fie una la fel de placută ca şi în cazul navigării de pe un computer sau laptop. Mai multe amănunte despre Responsive Web Design puteţi citi şi în guest postul scris pe blogul lui Marius, unde puteţi vedea şi un infografic interesant din care am decupat şi imaginea care ilustrează acest articol … pentru că o imagine = o mie de cuvinte :).
Termenul de responsive web design capătă o notorietate tot mai mare, şi cred că anul 2013 va fi anul de cotitură, anul în care adaptarea site-urilor la responsive design va fi cam obligatorie. Evoluţia acestui segment al web designului a coincis cu evoluţia tehnologică, apariţia unor device-uri performante dar compacte precum telefoanele din gama smartphone sau tabletele de ultima generaţie, obligând practic creatorii de site-uri şi template-uri să se adapteze noilor cerinţe.
Aşa cum era de aşteptat, nici segmentul temelor WordPress nu a fost neglijat de către web designeri, fiind cunoscut faptul că WordPress deţine cea mai mare cotă de piaţă în rândul site-urilor create folosind CMS-uri gratuite. Principalii furnizori de teme pentru pentru platforma WordPress s-au adaptat acestor inovaţii şi au început transformarea sau realizarea unor teme wordpress responsive, folosind tehnici moderne (HTML5 şi CS3) pentru a adapta şi a optimiza conţinutul pentru vizitatorii care folosesc diferite device-uri mobile.
Spre exemplu, autorul temei Big City (numarul 16 în enumerarea de mai jos) – (MNKY Studio) – a adaptat designul clasic şi a transformat-o într-o temă de tip responsive. Din păcate cel care a realizat tema mea actuală, mi-a răspuns că nu are de gând să facă această adaptare şi uite aşa am început să prospectez piaţa în căutarea unei noi teme pentru blog. Cred că Skyali (autorul temei actuale) a ales să nu se complice pentru că în afară de transformarea designului într-unul de tip responsive ar mai fi avut de corectat şi alte deficienţe.
În clipa de faţă temele wordpress responsive trebuie să fie capabile să fie navigate de pe orice tip de device mobil, inclusiv de pe tabletele cu diagonala display-ului mai mult decât generoasă şi cu rezoluţii de vârf, de multe ori similare cu cele de pe un monitor clasic. Mai mult de atât, orice temă wordpress responsive are capacitatea de a fi folosită chiar şi pe monitoare sau televizoare gigant , fară ca rezoluţia imaginilor să fie afectată, fără să întâmpinăm probleme referitoare la optimizarea conţinutului şi fără să avem probleme la viteza de navigare.
Când am cumpărat tema actuală nu am analizat suficient de atent funcţionalităţile temei pentru că mi-a plăcut foarte mult designul şi am făcut greşeala de a nu citi comentariile despre ea … poate şi pentru că am crezut că o temă încadrată în categoria Premium şi aprobată pentru vânzare pe un mare site de profil, nu poate să prezinte disfuncţionalităţi. În comentarii erau evidenţiate câteva aspecte negative dar, ca întotdeauna, se vede că graba a stricat treaba.
Pentru a vă face o idee în privinţa a ceea ce înseamnă o temă wordpress responsive, am selectat câteva teme ce au fost create şi adaptate în mod special pentru folosirea de pe orice tip de device, de la un laptop, telefon mobil sau tabletă până la televizoarele din gama smart tv. Puteţi să vă convingeţi în privinţa calităţii tehnicii de responsive design accesând aceste teme cu ajutorul unor device-uri diferite pentru a putea compara experienţa de navigare.
Un alt aspect important îl reprezintă faptul că în clipa de faţă, se găsesc teme wordpress responsive pentru realizarea oricărui tip de site, de la un blog personal până la realizarea unui site de prezentare/portofoliu sau chiar a unui magazin online (folosindu-vă de pluginurile specifice e-commerce-ului) dar aici am selectat teme orientate spre blogging. Ordinea în care apar aceste exemple de teme responsive este aleatoare dar după cum poate stiţi din acest blogpost, îmi caut o noua temă pentru blog aşa că aştept să-mi spuneţi în comentarii care din ele vă place sau chiar să-mi recomandaţi altele … să nu uit … deşi am fost tentat de idee, nu am pus linkuri de afiliat.
1. Karma – Clean and Modern WordPress Theme – 100% Responsive and Mobile-ready
2. Avada | Responsive Multi-Purpose Theme –
3. Awake – Powerful Professional WordPress Theme
4. Gonzo – Clean, Responsive WP Magazine
5. Inovado – ultra responsive, retina-ready WordPress Theme – screen preview
6. Şi aici o variantă gratuită – iFeature 5 „is the World’s first Touch Friendly Responsive Drag & Drop WordPress Theme”
7. O implementare interesantă a conceptului de web design responsive am vazut la blogul lui Robin Molnar.
8. Asteria – is a clean, simple & modern Responsive Business/Corporate WordPress Theme.
9. Intuition– is a clean, simple & modern Responsive Business/Corporate WordPress Theme.
10. innoVative – Responsive WordPress Theme – is a powerful minimalistic business/corporate/portfolio & blog responsive premium WordPress theme jam-packed with features.
11. Canvas – Fully responsive design
12. Definition – is a clean and clear theme for everyone who loves producing content.
13. Volcano – is a super-duper customizable, flexiblle, responsive
WordPress theme for your Blog, Magazine or News website.
14. Supreme – is a revolutionary Retina Responsive Magazine/Blog theme.
15. TrustMe – is a Responsive WordPress Theme, best suited for
Magazines, News and Blog websites.
16. Big City 3.0 – has seriously improved backend and framweork and it is now responsive.
17. O alta tema interesanta este BoxLine, tema recomandata de Gabriel Goga în acest guest post.
Beneficiile acestei tehnici de web design cu siguranţă nu vor putea fi neglijate în viitorul apropiat şi cred că vom vedea o evoluţie rapidă a temelor wordpress responsive în blogosfera românească şi astfel vom avea mai multe bloguri pe care să ne facă placere să navigăm indiferent de device-ul folosit.
Cu ajutorul vostru sper să-mi pot alege mai uşor viitoarea temă pentru blog şi pentru a nu vă influenţa în niciun fel recomandările, nu o să vă spun spre ce se îndreaptă preferinţele mele în materie de teme wordpress responsive.
un articol destul de complect multumim pentru acest articol care mai lumineaza pe cei care folosesc wordpress .
cel mai mult pt responsive design este sa ai cum sa testezi ceea ce faci…eu unu nu detin nici tableta nici smartphone ceea ce ma impiedica sa lucrez pe teme responsive. daca aveti nevoie de ajutor vorbim
Multumesc pentru oferta.
N-am wordpress, nici domeniu dar mi s-a parut interesant ce-ai scris aici. Dupa parerea mea, insa, majoritatea acestor teme sunt greu de accesat, de urmarit, fiind prea aglomerate. Eu una le vad nu foarte potrivite pentru un blog. Pe majoritatea. Mi-au placut totusi cateva: Big City, Canvas, Supreme, Volcano… exact in aceasta ordine de preferinte. Ele par mai potrivite pentru un blog. In opinia mea si dupa gustul meu. 🙂
Sunt curioasa ce-ti vei alege.
Dupa cum am zis si in articol nu vreau sa influentez recomandarile voastre asa ca nu o sa zic care-mi place mie.
Nu astept sa spui acum, asta am inteles foarte clar. 🙂
Astept sa vad ce-ti vei alege cand vei pune in practica.
Cu siguranta va fi anul de cotitura, pentru ca in acest an (sper) CSS3 va functiona corespunzator de toate browserele ceea ce inseamna ca se poate folosi Media Queries pentru redimensionarea si ajustarea pentru orice rezolutie. Daca inainte faceam 2 site-uri separate http://www.site.ro pentru desktop si http://www.m.site.ro pentru mobil, acum nu mai este nevoie sa ne batem capul!
Pentru ca spunea cineva mai sus ca nu poate sa testeze pe diferite rezolutii, recomand: http://quirktools.com/screenfly/ si pentru a afla in ce browsere sunt valabile anumite proprietatii CSS3: http://caniuse.com/
Karma o am eu, ti-o pot da gratis cu licenta daca vrei, insa nu e chiar asa usor de configurat. Plus de asta, se potriveste mai degraba la siteuri de firme, corportaii, etc.
Am si genul de tema in sitlul Avada, dar cu slider si mai mare. E frumoasa, dar am testat-o mai demult si se incarca greu chiar si fara un plugin chir. Dupa cum vezi, inclusiv in varianta demo se misca cu „nano secunda” 🙂 mai incet decat o tema clean.
Imi place si cred ca se potriveste cu blogul tau Boxline, Big City, Trust.me sau Canvas.
Interesant! 😀
Imi permit o completare pentru ca nu inteleg de ce dar se creaza o confuzie enorma in ceea ce priveste temele responsive!
Tema responsive nu inseamna ca nu mai e nevoie de o versiune pentru mobil(fie el si smartphone) pentru ca pur si simplu nu face altceva decat sa adapteze designul unui site la rezolutii diferite de laptop, desktop si tableta! Smartphone-ul sau mobilul nu intra in discutie atunci cand vorbim de responsive pentru ca o astfel de tema face mai mult rau decat bine, marind foarte mult timpii de incarcare ai site-ului vizualizat de pe mobil! Da, se poate vorbi de o adaptare pentru rezolutia smartphone-ului dar repet, asta nu inseamna ca e tocmai bine, pentru ca logic vorbind, de pe mobil vei solicita si primi de fapt o versiune de desktop a site-ului si in loc sa descarci 100 kb cat are o versiune obisnuita de mobil, descarci de fapt 1,50 Mb cat are de fapt o versiune medie de desktop a unui site!
Scoatem din discutie navigarea extrem de anevoiasa pe care o presupune explorarea de pe mobil a unui site cu tema responsive si fara versiune de mobil, pentru ca sa zicem aici parerile ar fi impartite tinandu-se cont de capacitatea fiecarui terminal si de rezolutia ecranului sau!
Eu zic asa, daca temele astea responsive ar fi fost chiar inlocuitorul perfect atunci site-urile mari ar fi renuntat de mult la versiunile pentru mobil, insa lucrurile nu stau tocmai asa!
Responsive inseamna doar adaptare la rezolutie, pur si simplu, insa nu inseamna deloc comprimare si micsorarea cantitatii efective de kb livrati spre browser!
In incheiere, raspund si la intrebare : -Volcano! 🙂
O alta completare: -ambele sisteme de operare(majore) de pe smartphone, ma refer la Apple si Android, au in functiile browserelor posibilitatea de a alege in primul rand ce versiune sa fie livrata, mobil sau desktop, dar mai ales, si e un lucru de tinut minte, in versiunea de desktop pe care o livreaza pur si simplu adapteaza site-ul la rezolutia ecranului, cu alte cuvinte ofera ”resolution responsive function”, de unde rezulta ca o tema responsive e de fapt un moft sau mai bine zis un mod de a cataloga noile templateuri scrise in html5 si css3! 🙂
Pai eu zic ca site-urile mari nu renunta la varianta de mobil din interese pur comerciale.
Acum incepem sa vorbim de 4G adica de viteze pe care acum cativa ani nu le aveam nici pe cablu asa ca nu cred ca in viitorul apropiat marimea in kb sau Mb va mai fi o piedica in calea unei noi experiente de navigare de pe smartphone.
Poate viteza va creste, dar costurile vor scadea? Pana se vor mai modifica preturile din piata, pana vor aparea modele si mai performante de smartphone….pana….pana atunci va aparea webdesign-ul scris in HTML 6 iar web-ul semantic va fi gata implementat! Tehnologia e in continua schimbare, software-ul la fel, ceea ce azi e hitech maine va fi depasit, de asta zic ca un site trebuie adaptat nevoilor de moment ale cititorilor/vizitatorilor, tocmai de asta in mai toate softurile de monitorizare a traficului sunt statistici referitoare la browsere, OS etc…!
wow e foarte interesant….imi plac efectele pt smartphones si tablete
in Ro, numarul cititorilor de bloguri de pe mobil este inca unul foarte mic. Internetul 3g e scump, wireless nu este peste tot…
eu, de exemplu, folosesc o tema html5 non-responsive care are latimea mica, astfel incat sa se integreze bine chiar si la un notebook sau tableta. pe mobil nu se vede bine, dar cum ziceam… prea putini intra de pe mobil.
Temele responsive se adaptează după rezoluţia ecranului sau după dimensiunea în cm a acestuia? Din ce ştiu, răspunsul corect este prima variantă. Iar în acest caz ele au rost doar câtă vreme pe piaţă (mai) există telefoane/tablete cu rezoluţii mici. Adică nu prea mult timp, deoarece ecranele de tip retina display, cu peste 1500-2000 de pixeli pe latură, devin tot mai răspândite. Inclusiv pe telefoane. Caz în care, dpdv al rezoluţiei o temă adaptivă se va întinde ca pe cel mai mare monitor…
Dacă n-am greşit în raţionamentul de mai sus, deduc că tot versiunea de mobil este calea de mers pentru cei care vor să ofere o experienţă adaptată ecranului mic, tema responsivă nefiind de prea mare ajutor.
Awake , asta mi-ar placea mie….
Il incerc azi si pe telefon, sa vad cum se deschide 🙂
Încearcă Montezuma, e free – o vezi în acțiune aici http://edfagaras.ro
Gonzo nu mi-a plăcut nici mie, eu am Elite Pro Responsive Theme
Va mai trece o perioada pana cand fenomenul responsive va avea efecte vizibile in Ro, dar e bine sa ne pregatim. In clipa de fata, pretul ridicat pentru netul 3g, lipsa wi-fi-ului din multe orase si mentalitatea ne tin departe de navigarea de pe telefon/tablete. In Ro, navigarea de pe un device mobil este echivalentul cu navigarea pe Facebook si cam atat.
Ador efectele de pe smartphones, mi-ar placea si mie sa am dar acum trebuie sa schimb telefonul.
Nu cred ca trebuie sa ne abatem asupra temelor contra cost deoarece daca intri in sectiunea de personalizare blog si dai la cautare teme dupa cuvantul „responsive” vei gasi si variante free destul de bune