În 24 septembrie a avut loc la Bucureşti, în elegantul JW Marriott Grand Hotel, prima ediţie a SmartWeb Confrence 2013, un eveniment dedicat web-designerilor din România şi din Europa de Est, la care revista Today Software Magazine a fost partener media. Prezentările din cadrul conferinţei au acoperit o serie de subiecte aflate într-un trend ascendent în ultima vreme, precum Responsive Web Design, HTML5/CSS3 dar şi care sunt cele mai bune practici de lucru sau tips and tricks. Având în vedere că a fost un eveniment internaţional, întreaga conferinţă s-a desfăşurat în limba engleză.
Cel care a început seria prezentărilor a fost proprietarul și fondatorul nGEN Works, Carl Smith care conduce o echipă neconvenţională ce lucrează cu diferite companii pe care le ajută să iși redefinească identitatea, idealurile și să creeze echipe de dezvoltare solide. Unul dintre lucrurile pe care pune accent foarte mare este continuitatea proiectelor. Sub nicio formă nu este de acord cu oprirea echipelor de dezvoltare înainte de terminarea proiectului. Acest lucru ar scădea moralul lor şi ar încetini progresul în momentul readucerii în lucru a proiectului. Dând un exemplu, el a povestit cum a finanţat terminarea unui proiect în momentul în care clientul nu a mai putut să plătească. În construirea unor echipe, Carl se concentrează mult şi asupra părții de comunicare sau chiar inside jokes. Acest lucru sudează foarte bine relaţiile dintre colegi. O altă schimbare cu care vine foarte des, este aceea prin care dă echipelor posibilitatea de a angaja candidatul pe care îl vor, astfel deciza aceasta nu mai este luată, într-o mare masură, de HR sau manager.
Peter Gasston este un web developer cu o experiență de peste doisprezece ani, acumulată în numeroase agenţii, start-up-uri și corporații, iar în prezent este Creative Technologist la RehabStudio. Este autorul cărților The Book of CSS3 și The Modern Web. În prima parte a prezentării ne-a vorbit despre Shadow DOM şi încapsulare. Pornind de la exemplul unui simplu HTML5 video player, el ne-a arătat cum este creat acesta şi cum putem să îl edităm. Un alt subiect abordat de Peter a fost custom elements; acestea oferă web designer-ilor posibilitatea de a crea noi tipuri de elemente reutilizabile precum butoane de share sau chiar video playere custom. Nişte colecţii foarte bune se pot găsi pe CustomElements.io sauhtml5rocks.com. Prezentarea sa a fost una foarte tehnică şi bazată pe exemple.
După un scurt coffee break, sponsorizat de celebrul site IconFinder.com a urmat prezentarea singurului speaker român din cadrul evenimentului. Clujeanul Radu Chelariu, Art Director în cadrul Busteco Global Brain şi Adobe Certified Expert în Photoshop, ne-a vorbit despre provocările pe care le are zi de zi în relaţia client - designer. În prezentarea sa a fost foarte categoric spunând că, atunci când vine vorba de e-commerce şi despre dorinţa clientului de a genera un profit cât mai mare, nu se poate vorbi de sentimente. Din cauza acestui lucru s-ar putea ca designul viitorului magazin virtual să nu fie pe placul clientului. Practic un design care va genera conversii mai multe, nu trebuie neapărat să arate bine, ci să respecte anumite regului de user experience.El ne-a dezvăluit şi modul prin care poate convinge un client că o anumită modificare e necesară. Pur si simplu îi spune că aceasta îi va aduce mai mulţi bani.
Designer, fotograf și expert UX, Dan Rubin este un speaker obișnuit la conferințe și ateliere de lucru din întreaga lume pe diverse teme legate de web, împărtăşindu-şi experienţa din companii precum MailChimp, Google, Yahoo!, Microsoft sau Meebo. Prezentarea sa a avut în centru un studiu de caz, care ne-a arătat metoda prin care a reuşit să ofere un prototype testing foarte rapid unui client din Statele Unite. Primul pas pe care ne recomandă să îl facem este să găsim lucrurile care funcţionează bine în actualul site. Aceste lucruri nu trebuie schimbate pentru a nu îndepărta utilizatorii. Un alt lucru interesant este faptul că, în acest tip de testare, grupurile mici oferă o valoare foarte mare. În exemplul său, grupul care a testat prototipurile sitului a fost alcătuit din numai 12 persoane (aflate în target bineînțeles). Abordarea sa legată de crearea prototipurilor nu a fost nouă sau ieşită din comun. Pentru a oferi o experienţă cât mai bună persoanelor care participau la test, el a folosit o imagine îmbunătăţită a site-ului clientului (bazată pe un PSD) peste care a adăugat câteva funcţionalităţi esenţiale cu ajutorul HTML/CSS şi Java Script. Acest mod de lucru oferă mai mult decât nişte eventuale wire frames, iar timpul de realizare este aproape la fel de mic.
Jonathan Snook, autor al The Art And Science of CSS şi Accelerated DOM Scripting,a vorbit audienţei despre CSS. Întrebarea care a generat unele discuţii a fost cea referitoare la CSS code review. Se face aşa ceva? Deşi pare un lucru neimportant, pe care aproape nimeni nu îl face, revizuirea şi optimizarea codului CSS este esenţială în acest moment în care toată lumea aleargă după performanţe crescute pe device-uri mobile. Snook a prezentat pe scurt cei trei pași pe care îi recomandă în momentul în care începem să scriem cod CSS. Primul pas ar fi crearea unor categorii (Base, Layout, Module, State etc.) în care să introducem fiecare clasă. Categoria Base s-ar ocupa de CSS reset, spre exemplu, iar categoria Module de butoane, liste, taburi sau elemente reutilizabile. Al doilea pas se referă la naming convention. Numele claselor trebuie să clarifice intenţia lor,la care el mai recomandă și folosirea CamelCase. Al treila pas constă în decuplarea HTML şi CSS prin folosirea child selector(>).
Bruce Lawson, evanghelist pentru Open Web Standards în cadrul Opera, a susţinut o prezentare uşor neconvenţională, prin subiectul abordat. El a exemplificat mai multe moduri prin care putem distruge web-ul sau mai exact cum încearcă anumite site-uri să distrugă web-ul. Printre aceste exemple, care nu sunt de urmat şi nu sunt recomandate, ar fi de amintit aici:
Vasilis Dimos este unul dintre fondatorii Skroutz, o companie ce operează cel mai mare comparator de preţuri din Grecia,a explicat audienţei ce înseamnă cu adevărat responsive. În momentul în care dorim să avem un site responsive trebuie să ne stabilim niște obiective (ex. unul dintre obiectivele Skroutz a fost acela de a avea un timp de încărcare a site-ului în browser sub 2.5 secunde). După stabilirea obiectivelor, toţi membrii echipei vor trebui să contribuie la realizarea acestora, nu doar web designerul. Acesta ar trebui să se ocupe de realizarea unei interfeţe responsive în timp ce programatorii vor trebui să găsească cea mai rapidă şi optimă metodă prin care să implementeze o funcţionalitate.Inginerii de sistem trebuie să găsească şi să aplice soluţiile pentru conexiuni directe între ţările în care site-ul este prezent pentru optimizarea vitezei de încărcare, iar database developeri-i ar trebui să găsească moduri în care să analizeze date foarte mari pentru a oferi utilizatorilor cele mai bune oferte.
Binecunoscutul Vitlay Frideman, co-fondatorul SmashingMagazine.com, unul dintre cele mai bloguri de web-design din lume a susţinut o prezentare despre responsive web design, arătând câteva tehnici mai puțin cunoscute prin care putem micşora timpul de încărcare a paginilor. Când vorbim despre acest timp, ne gândim automat la Java Script. O metodă inedită de îmbunătățire a vitezei este încărcarea funcţionalitaţii JS în momentul în care user-ul este cu pointer-ul mouse-ului în apropierea unui buton care necesită respectiva funcţionalitate.Vitaly a mai prezentat un studiu care arată că existența unui loading bar animat, care nu trebuie să aibă o funcţionalitate reală (ex. să arate în procente încărcarea paginii) poate convinge utilizatorul că pagina s-a încărcat mai repede cu 11%.
Când vine vorba de interfaţă, o propunere interesantă este crearea unor aşa-zise "proficency profiles". Aceste profile înmagazinează date despre recurenţa vizitelor unui utilizator. Avându-le, putem să afişăm utilizatorului care vizitează site-ul zilnic o interfaţă mai simplă şi mai rapid de încărcat. În momentul în care acesta face o pauză de câteva săptămâni, îi putem afişa interfaţa originală din nou (mai complex şi cu mai multe hint-uri) pentru a-l refamiliariza cu site-ul. În cazul optimizării icoanelor dintr-un site Vitaly a sugerat folosirea unui stack SVG (un mod asemănător spriturilor PNG), iar in cazul imaginilor ar opta pentru o librărie JS precum picturefill sau pentru progressive JPEG.
Întreaga conferinţă a fost un succes din punctul meu de vedere. Fiecare speaker a prezentat lucruri concrete şi aplicabile, multe dintre ele noi pentru majoritatea participanţlor. Toate aceste pot confirma faptul că în 2014 vom avea o a doua ediţie a SmartWeb Confrence.
de Dan Suciu
