Front end - cum cosntruiesc un site ergonomic pentru mobil?

pentru ca nu am mai lucrat de cam multa vreme front-end…
si pentru ca am nevoie de o interfata mobile + desktop friendly pentru un mic proiect personal…

am nevoie sa stiu… cum stiu ca am o interfata corect construita pentru mobil.

ma intereseaza sa adun (eventual in urma unor indicatii primite de la voi) o lista de lucruri pe care trebuie sa le bifez (si prioritatea lor) pentru a obtine o interfata care sa mearga bine (ergonomica, seo ready, fast loading, etc) atat pe desktop cat si pe mobil.

nu conteaza ce e in backend… important e ca in front o sa ajunga niste html + css + ceva js…
si eu as vrea sa le pot aranja pe astea din front cat mai “corect”.

apreciez orice indiciu.
tks.

Vrei un site pentru mobil sau pentru ecrane mici? Chiar dacă se suprapun, nu-s neapărat sinonime.

  1. touch area mare peste tot. Nu toți sunt dive cu degețele de barbie, unii utilizatori au cârnați în loc de degete;
  2. cât mai puține drag & drop de precizie (e.g. range slider). Mie mi se pare incredibil de greu de nimerit ceva de genul ăsta, mereu scap câțiva px când ridic cârnatudegetul.

În afară de astea, restul țin de common sense: fonturi ajustate corespunzător, toleranță la diferite dimensiuni de ecran.

practic, vreau sa livrez informatie catre toti cei care o cauta, indiferent de tipul de ecran pe care il au in fata.
interactiunea userului e la nivelul de search in meniul si site, completat un formular, cel mult pus in cos 2 chestii.

cat despre subiectul din 2016…
ma interesa sa fiu oarecu si la zi cu practica…
eu m-am oprit cu front pe la bootstrap…
ma gandesc ca acum ar fi de preferat un css-grid?

Cand interesul tau e sa livrezi informatie, as spune ca e mai important procesul de UX decat ce tehnologie sa folosesti pe front-end.

Daca iti doresti sa obtii un conversion rate cat mai mare, parerea mea e ca nu ai cum sa obtii cea mai buna versiune a website-ului folosindu-te de un grid fara sa faci cateva modificari custom pentru restul rezolutiilor.
Folosesti un grid fluid atunci cand nu esti interesat de o versiune super optimizata in acest scop pentru mobil si tableta.
Cand vine vorba de conversion rate, pozitia elementelor are un alt grad de importanta de la web la mobile.

Spui ca te-ai oprit la front-end cu bootstrap ca si cum asta ar fi un lucru rau. Inainte de a veni altii sa iti recomande Tailwind, daca poti sa iti implementezi designul folosind bootstrap, atunci fa-o.
E mult mai important procesul de UX si cum iti proiectezi website-ul decat ce anume folosesti pentru a il implementa.

2 Likes

de acord.
de asta incercam sa identific si tehnic care ar fi bunele practici de implementare.

pe langa asta mai imi doresc sa fie si seo ready
si sa pot adauga relativ usor si unelte diverse de monitorizare si a/b testing (tip crazyegg - referinta pt cei care care erau in domeniu acum mai bine de un deceniu :slight_smile: - sry, dar sunt vechi)

acum… nu ma astept sa imi dea cineva un checklist sau un rezumat cu pasii de urmat pt a scrie front,
dar ma gandeam ca exista ceva siteuri / forumuri / tutoriale video / etc care sa trateze in special probleme de front (prefarabil pt programtori avansati, dar punctand si probleme de beginer in front)
si as aprecia orice referinta catre ceva ce ar semana cu un index / cuprins al unui “potential curs complet de front”.

alternativa e sa il intreb pe google si sa adun singur raspunsurile pentru “cursul de front”, dar fara ajutor de la cei cu experienta or sa imi lipseasca raspunsurile la intrebarile pe care nu stiu ca le am (decat prea tarziu) si de fapt cred ca asta incercam sa intreb aici si nu prea mi-a iesit.

cauti responsive sau adaptive design? Guide to responsive web design in 2022 | Opensense Labs

sau cum se face ux-ul in 2022 regardless?

primul meu gand a fost catre responsive si cred ca asta e ce imi trebuie.
adaptive e prea mult pentru proiectul meu,
iar ux-ul sa zicem ca e oarecum in lucru deja si aici deja am resursele si experienta / ghidajul necesare.

imi lispeste partea in care eu as implementa interfata cu bune practici din 2022 si nu din 2015.

practic ai de ales un css framework cu care sa iti faci treaba, daca bine inteleg

  • bootstrap still rulez the market, un update de cunostinte (sa poti mentine) si apoi un shopping dupa o tema gata facuta pot accelera multe
  • tailwind e controversial, polarizeaza oamenii, pt mine asta inseamna pas pt ca poate fi nevoie sa mentina altcineva
  • eu prefer bulma, e aprox locul 3 in piața de css frameworks, vine fara nimic js, e super mic si rapid de facut layouturi complexe
  • material ui ai incercat sa sapi un pic sa vezi daca ti se potriveste? mai pe romaneste o sa fie react in spate?
  • the sky is the limit, dar uite aici macar grupate
1 Like

tks, asta ajuta mult