Website responsive

Doar pt html si css aici. Cu ce sa incep prima data? Sa fac site ul pt telefon si sa il fac responsive pentru desktop/ tableta dupa? Sau sa il construiesc pt desktop si dupa sa il fac responsive pt.  tableta/ telefon si asa mai departE? Cu ce e bine sa incep mai intai?

chiar astazi am citit un articol pe tema asta:
https://dev.to/kevin...he-hard-way-kgb

Flat, on 06 aprilie 2020 - 12:18, said:

Mersi mult. Sunteti web developer?

am fost. nu mai sunt. doar consultanta si "plimbat hartii" cum zic unii  
cand faceam siteuri web nu era decat mobil wap cu ecran de 320x240.. nimeni nu se gandea la mobile

acum paradigma e inversa, statisticile arata ca majoritatea accesarilor unui site, orice site, cu putine exceptii, este de pe dispozitive mobile.
de aceea gandirea designului unui site in stil clasic (template pt ecran de pc) este depasita

simplitatea e mai buna decat supraincarcarea
uite cum arata republica.ro si cum arata hotnews

Traficul de pe mobil l-a depasit pe cel de pe desktop.

Problema e ca nu stiu sa existe inca aplicatii care sa faca constructia unui website mobil la fel de usoara, dar e cum zice ala in articol in privinta dificultatii de a face aceasta trecere de la desktop, necesita si un efort mental.

Instaleaza Android Studio si construieste cu el. Eu lucrez in paralel, construiesc ceva pe desktop si apoi ma uit imediat si la mobil cum arata, daca trebuie sa adaug CSS sau nu, imi incap mai multe chestii pe ecranul de 27" 2560x1440.

Vreau sa imi mentin si traficul desktop, dar si viteza de incarcare pe mobil, e mai mult de lucru. Poti pune rapid o imagine care sa redimensioneze cand e accesata de pe mobil, dar problema e dimensiunea ei. Deci daca vrei performanta pe ambele accesari trebuie sa pui doua sau mai multe imagini, una pentru desktop si restul pentru ce dispozitive mobile vrei sa accesezi, din cauza asta eu nu ma stresez decat pe desktop si am in Android Studio diverse telefoane, dar testez in principal pe Google Pixel 3A la 1080x2220 440dpi Android 9.

Cu greu poti folosi si Developers Tools cu Android Studio, cu rezultate mediocre.

Îți sugerez să începi cu telefonul și să ajustezi codul pe măsură ce crești rezoluția. De ce spun asta, fiindcă o să scrii mai puțin cod spre deosebire de varianta desktop -> mobile unde trebuie să revi asupra design-ului și să îl modifici. Când ai multe funcționalități și proprietăți css pe care vrei să le modifici/ștergi, pe telefon poate să devină complicat așa că mai bine modifici funcționalitățile pe măsură ce avansezi.

Eu am început cu desktop și mi-a luat ceva timp până să înțeleg că e mai benefic prima dată mobile.

Folosește chrome develope tools. Poți selecta telefonul dorit ca să vezi cum arată site-ul/aplicația pe rezoluția respectivă. Poți de asemenea să adaugi tu o rezoluție în funcție de ceea ce ai nevoie.

Așa cum s-a spus mai sus d.p.d.v statistic, accesarea site-urilor e mai mare pe dispozitive mobile spre deosebire de altele.

Găsești pe internet o mulțime de tutoriale gratuite despre responsivitate. La început e mai greu dar cu cât avansezi o să fie mai ușor.

Baftă!

Cred a trecut mai bine de un an jumate de cand am inceput sa merg pe mobile first.
La inceput a fost destul de ciudatel pentru ca toata viata am mers pe desktop first. Am simtit diferenta inca de la primul proiect, development-ul a fost mult mai rapid, iar rezultatele au fost peste masura.

Totusi am intampinat unele probleme "psihologice". Mi-a fost destul de greu sa fac design-ul mobile-first in XD/Figma, idee la care am renuntat intre timp. In prezent fac 3 design-uri pentru acelasi proiect in ordinea urmatoare: desktop, tableta, mobile (uneori chiar si xs-mobile). Asa am o viziune mai buna asupra a ce vreau sa fac.

Daca esti la inceput iti recomand sa inveti sa lucrezi cu SASS/SCSS cat mai repede si o conventie de numire a claselor (de exemplu BEM).
Ca sa iti usurezi munca si mai mult, poti folosi module de live compiling si live server in IDE-ul tau.

Eu folosesc VS Code cu extensiile Live Server si Live Sass Compiler. Practic imi creaza un mediu de lucru in 10 secunde.

Bogdan__26, on 06 aprilie 2020 - 18:23, said:

poate si cu browserul pe laptop.
ii da posibililtatea sa-l conformeze in tot felul de moduri.

Eu pentru design responsive in Visual Code folosesc Tailwind CSS. E un fel de bootstrap mai avansat si foarte usor de utilizat, dupa ce te familiarizezi cu el...

Uite de exemplu cum procedez eu.

- incep sa construiesc site-ul incepand cu rezolutie pentru telefon, de exemplu 320px si pe masura ce avansez la rezolutii mai mari ( de exemplu 480px, 768px, 992px, 1024px, 1200px, 1400px etc ) ajustez design-ul folosind media query. Acest procedeu se numeste " Mobile First", de asemenea poti proceda si invers folosind metoda "Desktop First", in functide de site-ul/aplicatia pe care o dezvolti.  - Iti sugerez prima data sa stii foarte bine css mai ales cum sa folosesti media query si lucrul cu procentele, flexbox, css grid etc si apoi sa folosesti un framework sau o librarie.
- daca vrei sa folosesti un framework ai de ales intre (Bootstrap, Bulma, Material Design), acestea sunt principalele si cele mai des folosite.
- daca vrei sa folosesti o librarie ( Tailwind )
- diferenta dintre librarie si framework este ca cel din urma are anumite clase si functionalitati predefinite spre deosebire de librarie. De exemplu la bootstrap ca sa creezi un card folosesti clasa .card sau pentru un button poti folosi .btn, .btn-primary, spre deosebire de librarie.
- intr-un final foloseste ce stii si ce crezi ca e mai bine pentru proiectul tau, aceste librarii si framework-uri sunt optionale pe care le folosesti pentru a-ti micsora timpul de lucru si de asemenea pentru o mai buna organizare a codului.

Spor la studiu!