Cauta rapid aici ↑

Ponturi pentru crearea unei pagini web pentru orice dispozitiv

Crearea unei pagini ce va avea un numar minim de pixeli si un numar maxim de pixeli pe latime

De cele mai multe ori ne vom intalni cu o astfel de situatie in momentele in care vrem ca design-ul pagini noastre sa se ajusteze pe orice dispozitiv mobil in mod portret ori landscape. Aria de desfasurare pe latime in mod portret pentru dispozitivele mobile este cuprinsa intre 320 pixeli si 414 pixeli. Aceasta arie cuprinde Iphone 4 si merge pana la Iphone 6 Plus in mod portret. Tot in aceasta arie vom avea inclus si dispozitivele Samsung, indiferent de latimea pe care o au acestea in mod portret (asta daca nu a aparut intre timp un Samsung care are o latime mai mare).

Un segment important dintre cei care folosesc telefoanele inteligente nu au in dotare un telefon inteligent care sa le permita sa se incadreze in aceasata arie de desfasurare despre care am vorbit mai sus si din acest motiv acestia au in dotare un telefon care are o latime in mod portret incepand de la 240 pixeli. Cei de la Google ne recomanda sa ne adresam si acestora.

Modalitatea prin care vom face ca pagina noastra sa se ajusteze automat pe latime in mod portret dar si in mod landscape se poate realiza cu ajutorul a trei proprietatii obligatorii si una optionala dar indicata aplicate pe elementul parinte, element care contine tot ce se vede in pagina. De cele mai multe ori acesta este un DIV cu clasa CSS container.

Proprietatile width, min-width si max-width le vom folosi pentru a ne atinge scopul propus. Proprietatea width va primi valoarea 100%, proprietatea min-width va primi valoarea 320px, proprietatea max-width va primi valoarea 414px. In mod landscape vom avea o alta arie de desfasurare in pixeli si aceasta este cuprinsa intre 415 pixeli si 736 pixeli. Puteti testa si verifica in simulatorul pentru dispozitive mobile si nu numai in browser-ul Chrome folosind comanda Ctrl + Shift + I sau click dreapta, apoi click stanga pe Inspect element in meniul aparut. Dupa aceea apasati iconita ce imita un telefon mobil in coltul din standa sus a ferestrei nou aparute. Acolo aveti o multime de optiuni in care sa va testati paginile web pe mai multe tipuri de dispozitive.

Simulatorul din Chrome nu este perfect, insa este cel mai performat de pana acum iar cei de la Google il updateaza frecvent cu alte dispozitive pentru simulat.

Revin la ideea anterioara in care v-am prezentat proprietatile width, min-width si max-width si valorile pe care sa le folositi. Pe langa aceste proprietati aplicate pe elementul parinte in fisierul extern CSS va trebui sa folosim si proprietatea margin cu valoarea auto pentru ca elementul parinte sa fie centrat in momentul in care se depaseste la teste aria de desfasurare in pixeli.

Un alt aspect important este legat de proprietatea width. Dupa cum am spus mai sus, aceasta va avea ca valoare valoarea 100%. Putem sa folosim o valoare mai mare de 100%, valoare pe care niciodata nu v-o recomand dar putem sa folosim si o valoare mai mica de 100%, valoare pe care v-o recomand si asta pentru ca in acest caz vom intalni un efect foarte frumos si interesant. O valoare mai mica de 100%, sa zicem 95%, va face ca elementul DIV parinte sa aibe 95% latime din aria de desfasurare in pixeli data de valorile ce sunt in proprietatile min-width si max-width si in acest caz este obligatoriu sa folosim si proprietatea margin cu valoarea auto.

Acest principiu il putem folosi pe orice arie de pixeli, indiferent de dispozitiv, fie ca este o tableta, laptop ori desktop. Un ultim aspect este legat de elementele copil, div-urile sau ce tag-uri a-ti folosit, elemente care va trebui sa aibe valoarea pe latime de 100%, mai ales daca vorbim despre un header, section, article sau un footer. Totul depinde de ce arie pe latime va adresati. Pe dispozitivele mobile fiecare element este asezat in pagina cel mai adesea unul sub celalant, pe alte dispozitive cu latime mai mare in pixeli si cu o arie mai mare de desfasurare, putem folosi si valori in pixeli si nu numai.

Diferente intre browserele Safari si Chrome pe dispozitivele mobile la interpretarea evenimetului hover din CSS si interpretarea culori unui text

Personal nu am o afinitate pentru Iphone de nici-un fel, ba chiar mai mult, pot spune ca nu imi place ca cei de la Apple nu se ocupa si de dezvoltarea in amanuntit a browser-ului Safari. Acest browser este lasat de izbeliste si sunt convins ca in ceea ce priveste UX (user experience) pentru vizitatorii unei pagini web, noi programatori pe partea de client (browser) trebuie sa facem eforturi separate pentru a-i creea vizitatorului o experienta de navigare in paginile noastre cat mai placuta.

Cu siguranta cei mai multi dintre voi stiti cum sa realizati un meniu din CSS care sa apara in momentul evenimentului hover din CSS. Scopul acestui meniu este sa functioneze si in momentul cand JavaScript este dezactivat din browser. Pe dispozitivele mobile acest eveniment este transformat, convertit la evenimentul click, cel putin pe toate dispozitivele unde ruleaza browser-ul Chrome si vedem pagina. Browser-ul Safari nu converteste acest eveniment din CSS si in cazul acesta va trebui sa ne folosim de evenimentul click din JavaScript. Un mare minus pentru Safari. Daca nu existau Iphon-urile, cu siguranta acest browser era unul de care auzeai in manualele de istorie ale Internetului. Doar utilizatori de MAC-uri si Iphone tin acest browser in viata.

In cazul culori unui text, proprietatea CSS color nu functioneaza asa cum ne-am dori si pe Safari, cel mai adesea daca vrem sa suprascriem setarea de baza a culori textului data in tag-ul body sau in elementul parinte din care textul face parte. Pentru a putea realiza acest lucru trebuie sa ne folosim de o alta proprietate CSS, care este mai puternica, si aceasta este text-fill-color caruia ii putem da aceleasi valori ca si proprietatii color.