Salutări, aș dori să vă cer câteva recomandări pentru best practices în privința UI-urilor Responsive, eu unul am avut decât odată de a face cu acest lucru , având un proiect personal , făcut în Vue3 vanilla, făcând tot responsive-ul în vanilla css pentru fiecare media query(5 query-uri per pagina), care m-a făcut să-mi pierd interesul față de proiect =)))
Acum m-am pus să învâț NextJS cu TailwindCSS, și aș dori niște recomandări pe care să le țin minte.
Mersi și spor la cod !
Eu unul nu as mai folosi nicio librarie pentru Responsive UI avand in vedere ca toate pe care le-am folosit pana acum m-au dezamagit si m-au facut sa imi pierd mai mult timpul decat sa scot adevarate rezultate.
Ca rule of thumb eu incerc din start sa fac design-ul sa mearga pentru toate rezolutiile (de obicei doar un flex-box e destul). Daca trebuie ceva aprofundat imi definesc propriile mele breakpoint-uri (aka: pentru un anumit range de latime iti definesti un max-width al continutului care sa fie strict mai mic decat orice valoare in acel range). Exceptie este breakpoint-ul pentru mobile, unde faci latimea continutui egala cu marimea ecranului (ecranul de la telefon si asa e mic). Aprox 3-4 breakpoint-uri de obicei imi ajunge.
Asta iti face viata mai usoara deoarece ai doar 3-4 rezolutii exacte ale continutului pentru care trebuie sa stilizezi (+mobile sa mearga pe un minim de ~320-360px)
Implementarea… depinde:
Dar ideea este simplă: Be like water.
Dacă ești la început mai degrabă aș recomanda să începi cu pași mici și pe măsură ce asimilezi logica, extinzi numărul de device-uri suportate și/sau funcționalitatea. Dacă logica nu-ți permite, refactorizezi.
Astfel treci dintr-o mini-arhitectură în alta și înveți. Altfel… Și ChatGPT știe să construiască generic responsive design.