De când a apărut moda asta cu responsive, a apărut și problema imaginilor sau a filmelor afișabile pe toate rezoluțiile. Îți prezint o soluție foarte simplă ce funcționează cu succes pe orice browser. ORICE browser!

max-width

Un mod eficient de a te asigura că imaginile nu vor depăși ecranul este de a adăuga img { max-width:100; height:auto } în CSS. În acest fel, orice imagine va putea fi maximum cât containerul ei. Sunt foarte puține cazurile în care nu ai nevoie de această regulă, iar eu o adaug imediat după css reset.

Filme

Soluția asta am testat-o la zeci de proiecte și funcționează cam așa: poziționezi absolut filmul într-un div cu înălțime zero. Este mai ușor de arătat decât de explicat:

.embed {
  position:relative;
  height:0;
  overflow:hidden;
  padding-top:56%;
}

.embed > * {
  position:absolute;
  left:0;
  top:0;
}

.embed > *,
.embed iframe,
.embed video {
  width:100%;
  height:100%;
}

Demo

Nu pentru că are o bază destul de zdravănă în Java. Nici pentru că aplicațiile se scriu tot în Java. Nu, e o chestie mult mai interesantă, cercetată în amănunt de cei de la OpenSignal.

2015-08-10@34_56

Ce vezi mai sus reprezintă dimensiunile ecranelor folosite pe dispozitivele cu Android. Trist și îngrijorător este că nici Windows Phone nu se simte prea bine și tind să cred că se află cam în aceeași situație, diferența fiind în numărul efectiv de utilizatori.

Dar ce este cel mai îngrijorător și greu de înțeles pentru mine este următorul grafic:

2015-08-10@37_39

Nu, nu sunt rezoluțiile tuturor dispozitivelor. Fiecare pătrățică înseamnă un dispozitiv cu Android. În total sunt 24000 dispozitive distincte. Uite-te la câte are Samsung și întreabă-te care este scopul dacă toate arată (aproximativ) la fel și oferă aceleași caracteristici (vorbesc, evident, de aceeași gamă de preț). De exemplu, diferențele dintre aceste trei telefoane sunt, în mare parte, de ordin vizual. Doar că unul e de 4.3, altul de 4.8 și altul 5.25 inch, toate având rezoluții diferite. Motivul? Aș zice că ori le e teamă de canibalizare ori  vor să ofere cât mai multe dispozitive în ideea să prindă cât mai mulți clienți. Așteptăm un oficial Samsung să ne spună :)

Iar asta se simte în experiența finală a utilizatorului. Dacă deschizi review-urile unei aplicații din Google Play vei observa că, în loc să se discute despre funcționalitățile aplicației respective, ai comentarii de genul „merge pe nexus” sau „nu merge pe galaxy”. Sigur, nu orice aplicație, dar sunt multe de acest fel.

Ce e de făcut?

Cred că deja este prea târziu pentru a se mai face ceva. Cam asta e situația în care ne aflăm, iar un dezvoltator trebuie să țină cont că aplicația lor are șansa de a rula pe cel puțin 24.000 de dispozitive.

Nu știu dacă are rost să mă iau și de cele șase-șapte versiuni de Android…

Câteva cuvinte despre CDN-uri

Dorin se tot minunează de web-ul modern, cel de 5MB/pagină. Eu i-am lăsat un comentariu în care am menționat, în treacăt, că problema nu este la furnizorii de internet ci la cei ce fac site-uri.

Așa că, înainte de un test de usability m-am gândit să fac și unul de performanță, poate-poate mă ascultă cineva. Majoritatea au fost mult prea ocupați să își laude vânzările record sau să se plângă că le-au luat serverele foc de black friday și iaca au trecut doi ani de atunci. Situația stă aproape la fel de frumos: Evomag are 4MB, Elefant are peste 16MB (!!!!!!!!!!!!!!!!!!), Domo a urcat la 3.6MB, Emag a rămas la 3MB. Abia aștept Black Friday anul ăsta, să-i văd cum iar se plâng și să lase impresia că știi, lor le pasă de utilizatori. HA HA HA.

Îți vine să crezi sau nu, Evomag încă încarcă două versiuni de jQuery UI. Dar chiar și cu o singură versiune, sunt curios la ce le folosește toată biblioteca… Și ca și cum n-ar fi suficient, nici nu sunt încărcate de pe un CDN public.

Și am ajuns la chestia care contează în acest post: CDN-urile.

Un CDN bun ar trebui să îndeplinească două condiții extrem de importante: să fie public și să fie aproape.

Ce înseamnă să fie public? Înseamnă că toate bibliotecile ar trebui să fie incluse de pe un cdn de genul ăsta. Deoarece succesul unui astfel de CDN constă – în primul rând – de frecvența cu care este utilizat de oameni și se reduce la un singur lucru: caching. Altfel spus, dacă jQuery este încărcat din același CDN atât pe Emag și pe Evomag, vizitatorul va descărca jQuery o singură dată (căci se păstrează în cache). Orice bibliotecă publică folosești o încarci de pe un astfel de CDN public.

A doua chestiune este distanța de la CDN la utilizator. În România, această distanță este neglijabilă, dar dacă ai un CDN în State ai o problemă de fizică. Pentru că vezi tu, datele au o limită de viteză: viteza luminii. Și chiar dacă datele se transferă ușor, există cealaltă problemă, de negociere a transferului. Adică browserul tău trimite un request către CDN și până îți răspunde CDN-ul că fișierul există și că se pregătește să-l trimită trec câteva milisecunde bune. Cam câte?

Să presupunem că avem un CDN în Sydney, Australia. Știind că din Constanța până în Sydney sunt 15.000km și că viteza luminii este de 300.000km/s, avem minimum 100ms pierdute doar pe vorbăraia dintre browser și server, fără a se transfera mare lucru. Iar timpul ăsta este în condiții ideale, în realitate s-ar putea să fie ceva mai mult (routere, switch-uri etc)

Ce nu înțeleg eu este de ce nu există încă vreo firmă de hosting din România care oferă un CDN public (parcă Akamai și MaxCDN au servere pe aproape, dar nu știu dacă e vreunul în România)


Probabil ești tentat să crezi că dimensiunea paginii desktop este mai puțin importantă, că deh, doar avem una dintre cele mai bune conexiuni la internet din lume! În plus, varianta mobilă este mică, deci totul este ok.

Dar ia gândește-te că dispozitivele ce au conexiune mobilă sunt destul de comune, iar aici nu intră doar telefoanele! Tabletele cu conexiune 3g sunt rezonabil de ieftine și, cu toate astea, abonamentele și cartelele de telefonie au incluse un număr de MB sau chiar GB ce pot fi consumați la o simplă sesiune de shopping.

Există routere în care se poate înfige o cartelă 3G/4G și se pot folosi ca atare. Traficul ăla este lent și scump și nimănui nu-i pasă de asta!

Ce se mai pierde din vedere este și faptul că o conexiune mobilă joacă după alte reguli decât una fixă. Are semnal? Cât de aproape este de o antenă? Cât de „încărcată” este antena? Șamd. Latența 3G este de ~200ms. La fel ca și în cazul distanței până la CDN, ăsta înseamnă timp în care nu se transferă date iar browserul doar așteaptă confirmarea de la server că totul e în regulă.

Ce se întâmplă dacă JS-ul nu se încarcă? Păi Emag nu mai are meniu funcțional, pe Elefant este imposibil să faci o comandă de un produs iar Evomag nu afișează site-ul deloc (pagină albă). Te provoc la o sesiune de browsing când ești în tren Constanța-București unde sunt distanțe generoase în care singura conexiune disponibilă este GPRS.

Nu vă pedepsiți clienții!

Sunt convins că nu se va schimba vreodată (sau prea curând) ceva din asta. Evomag a avut un redesign relativ recent; Emag are schimbări constante, la fel și Elefant, dar evită să umble la performanță.

windows apple dropbox facebook twitter