Un ghid cuprinzător pentru remediere Responsive Probleme de design în 2023

Cele mai multe site-uri care folosesc responsive design-ul îl folosesc incorect, ceea ce duce la probleme. Abordarea generală a responsive designul este unul leneș, iar dacă adoptați această abordare, o parte dintre dvs responsive site-urile vor funcționa absolut impecabil, iar multe dintre ele nu vor funcționa. Pentru cei care funcționează perfect, probabil că se va reduce la o chestiune de noroc.

Conceptul de responsive designul este simplu, dar simplitatea sa este ceea ce îi determină pe oameni să facă greșeli atât de ușor. Designerii cu ani de experiență s-au obișnuit să proiecteze pentru desktop, și astfel ei vor planifica de obicei un design bazat pe un desktop aspect.

Desktop Aspectele diferă de cele pentru tablete și cele pentru dispozitive mobile, deoarece sunt în mod normal cu mai multe coloane, includ în mod normal cantități uriașe de spațiu alb și totul este doar „mare”, în lipsa unui cuvânt mai bun. Dacă responsive sunt utilizate tehnici de proiectare, acest aspect cu mai multe coloane ar trebui să se descompună într-o singură coloană.

Dacă asta e tot al tău responsive designul face de fapt atunci când este vizualizat pe un dispozitiv mobil, este posibil să aveți o problemă. Cât de mult o problemă depinde de atitudinea ta, dar designerilor buni le pasă de UX bun. Le pasă și mai mult de UX prost. Dacă site-ul tău are UX prost și vrei să fii un designer bun, atunci trebuie să-l repari.

Această problemă cu restrângerea unui aspect cu mai multe coloane într-o singură coloană este că nu funcționează în mod proporțional. Dacă trebuie să micșorezi ceva pe orizontală și nu faci alte modificări, evident că se va extinde pe verticală.

Se toarnă apă dintr-un pahar scurt de grăsime într-un pahar subțire înalt, iar apa ia forma paharului înalt subțire, în timp ce volumul de apă rămâne exact același. Ceea ce trebuie să înțeleagă designerii este că, cu un site web, avem nevoie de volum pentru a ne schimba. În mod normal, nu este o idee bună să schimbi forma, dar să păstrezi conținutul exact aceeași. Ceva trebuie să dea.

Cineva care a câștigat cu adevărat titlul de designer va înțelege că aceasta reprezintă o problemă de rezolvat și ceea ce fac de fapt designerii este să găsească soluții pentru probleme. Prin urmare, este locul perfect pentru tine să găsești cea mai bună modalitate de a livra conținutul de bază al site-ului fără a transforma experiența utilizatorului într-un festival de defilare frustrant. Iată câteva dintre lucrurile care merită luate în considerare atunci când defalcă un desktop design într-un design mobil:

1. „Mobile First” este un idiot

Îmi pare rău, dar este. Toată lumea pare asta, dar ca concept nu este foarte util, deoarece dacă proiectați cu adevărat „în primul rând mobil”, atunci va fi de coșmar să încercați să-l măriți la un desktop design, cu excepția cazului în care rămâneți cu un aspect cu o singură coloană până în sus.

Cea mai bună abordare este de a proiecta fizic cel puțin trei (și până la 11) machete diferite. Cele minime pe care le puteți lua în considerare includ:

• Desktop
• Peisaj mobil
• Portret mobil

Dacă doriți să fiți un pic mai amănunțit, ar trebui să luați în considerare și:

• Tabletă peisaj
• Tabletă portret

Și lista completă, dacă doriți să fiți complet completă, ar fi:

• Mare Desktop
• Obișnuit Desktop
• Tabletă mare peisaj
• Tabletă mare portret
• Tabletă mică peisaj
• Tabletă portret mică
• Mobile peisaj mare
• Portret mare pe mobil
• Mic Landscape Mobile
• Portret mic mobil
• Micut / Portabil

Cu atâtea posibilități diferite, este evident de ce o abordare leneșă „unică pentru toți” este atât de tentantă, dar este, de asemenea, evident de ce există atât de multe modalități de a o ruina.

2. Îmblânziți subsolul paginii

desktop designul include unul dintre acele subsoluri uriașe de pagină, cu o mulțime de link-uri interne? Grozav, probabil că va fi foarte util pe un desktop. Pe un mobil, arată ridicol și este mai mult decât o atingere enervantă. Puteți crea subsoluri de pagină complet diferite pentru fiecare punct de întrerupere a dispozitivului. Doar faceți acele linkuri de subsol disponibile într-un dialog modal și toată lumea câștigă.

3. Acceptați câteva ciudățenii minore pe dispozitivele obscure

Dacă un anumit dispozitiv nu este obișnuit, atunci nu este atât de rău dacă există câteva ciudățenii în design care apar doar atunci când vizualizați pe acel dispozitiv. Cu cât este mai popular un dispozitiv, cu atât va trebui să lucrați mai mult pentru a scăpa de orice ciudățenii care apar pe el.

4. Puteți ascunde conținut care nu contribuie la mesajul de bază

Cea mai importantă parte a unui site este mesajul de bază. Da, pe unele site-uri, cea mai importantă parte este publicitatea și acestea există doar pentru a livra acea publicitate, dar dacă trebuie să alegeți între afișarea mesajului de bază sau afișarea publicității, alegeți mesajul. Este mai probabil ca Google să te considere ca fiind persoană neacceptată dacă ascundeți conținutul de bază și apoi difuzați o grămadă de reclame. Se datorează faptului că conținutul de bază este ceea ce Google v-a indexat pe baza dvs. și, atunci când acel conținut nu este afișat, Google consideră că acesta este înșelător.

În plus, lucruri precum imaginile care sunt pur decorative sau estetice, dar care nu contribuie semnificativ la mesajul de bază, sunt candidați la reducere sau ascundere totală.

Unii oameni au propus că ascunderea conținutului „pedepsește” utilizatorii de telefonie mobilă, dar aceasta este o noțiune puțin absurdă. Realitatea este că ascundeți conținutul pentru că este acolo pentru a îmbunătăți desktop experiență, dar nu contribuie suficient la mesajul de bază al site-ului pentru ca acesta să fie necesar

5. Puteți utiliza fundaluri alternative

Recent, mi s-a dat o misiune ridicolă în care proprietarul site-ului plătise pentru un anumit background și dorea ca întregul conținut să fie adaptat pentru a se potrivi cu acel background. Punctele glonț trebuie să fie un număr foarte exact de caractere, numărul total de linii trebuie să fie exact și așa mai departe.

Aceasta este cu siguranță o practică proastă în designul web, pentru că ar trebui nu proiectați conținut pentru a se potrivi unui aspect Aspectul ar trebui mereu să fie conceput pentru a conține conținutul. Dacă, dintr-un anumit motiv, aspectul nu poate conține conținutul, atunci aspectul ar trebui reproiectat, nu conținutul. Este foarte posibil să folosiți fundaluri diferite pentru diferite dispozitive. Ești designer. Foloseste-ti imaginatia.

Conținutul este sângele de viață al unui site web și modificarea sau restricționarea acestuia pe baza constrângerilor unui aspect este un semn clar al amatorismului din partea proprietarului site-ului și un semn că aspectul a fost prost conceput în prima loc. Respectați principiile dvs., deoarece clientul respectiv va avea probleme dacă vă veți înțelege.

Clientul are întotdeauna dreptate, cu excepția cazului în care clientul respectiv este un client de web design. Clienții știu rareori ce este mai bine pentru ei și este important să te afirmi ca un web designer care știe să ofere rezultatul potrivit pentru client. Altewise riști să creezi încă un site web urâciune.

6. Controlați manual ordinea de colaps (sau evitați referințele spațiale din conținut)

Aceasta este o problemă complexă. Ordinea de restrângere a unui site depinde de ordinea în care sunt stivuite divurile. Trebuie să vă stivați div-urile în ordinea corectă, astfel încât acestea să se prăbușească în ordinea corectă.

Una dintre problemele care vin de la constructorii de site-uri web drag-n-drop WYSIWYG este că în mod normal nu poți dicta în ce ordine sunt încorporate divs-urile și, în cazurile foarte rare în care poți face asta, munca ta se anulează de fiecare dată faceți cea mai mică editare și va trebui să vă întoarceți și să hackerați din nou codul sursă.

Dacă nu controlați ordinea de restrângere, imaginea asta explică clar ce poate merge prost. De asemenea, ar trebui să evitați să faceți referințe spațiale (cum ar fi „în coloana din stânga”), deoarece pe un mobil, orice era în stânga sau în dreapta poate fi mutat în sus sau în jos, la care se adauga dacă îl faci pe cititor să creadă că este suficient de important să derulezi pentru a vedea, atunci va trebui să deruleze din nou înapoi, iar asta nu e grozav.

7. Este posibil să aveți nevoie de diferite dimensiuni de font pentru diferite machete

Este ușor să controlați dimensiunea fontului cu CSS și puteți seta diferite dimensiuni ale fontului și chiar fețe diferite ale fontului (dacă vor arăta mai bine) pentru anumite dimensiuni de afișare. Puteți găsi dimensiunea afișajului cu interogări media CSS și apoi modificați dimensiunea fontului sau fața fontului pentru a fi la valori care să afișeze conținutul cu avantaj maxim pe tipul de dispozitiv pe care îl vizați.

8. Cel mai bine este să folosești responsive imagini

Toate imaginile ar trebui să fie responsive ori de câte ori este posibil. Acest lucru aduce cu sine că, uneori, detaliile unei imagini se pot pierde dacă este redusă prea mult. O soluție la această problemă este să faceți clic pe imagine, astfel încât utilizatorul să poată vizualiza o versiune mărită a imaginii separat de conținut. Modul normal de a face acest lucru este printr-o casetă de dialog modală.

imaginea antetului prin amabilitatea Artur Martynowski