Criză obișnuită în designul responsiv și cum să le rezolvați

Fără nimic stabilit în bază solidă și elemente de aspect la fel de flexibile ca apa, nici măcar nu este „proiectare” în sensul tradițional. Designul responsive merge cu (și se adaptează) fluxului de dispozitive de pe piață. Toată lumea experimentează și niciodată nu a fost mai minunat să fii web designer.

Există atât de multe practici pentru design responsive încât este greu să te uiți la un singur set și să le numești cele mai bune. Nu putem avea o listă „Ce să facem”. Putem, totuși, să învățăm unul din greșelile celorlalți.

Deci, iată ce am învățat proiectând pentru un web receptiv:

Design pentru publicul dvs. Nu pe tine însuți.

Să presupunem că încercați să ajungeți la un public în mare parte indian, cu un site web super-rapid, proiectat strălucit și cu un UX excelent pentru acești utilizatori de telefonie mobilă. Sunt 1,2 miliarde de oameni acolo; ar trebui să fie o lovitură instantanee, masivă. Cifrele în sine sunt în favoarea ta. Sau ar fi dacă ai fi știut că abia 13% din oamenii de acolo au telefoane inteligente. (Sursa: Google Mobile Planet).

Acesta este doar unul dintre motivele pentru care învățarea și înțelegerea publicului dvs. este crucială.

Diversitatea culturală, vârsta, sexul, profesia, limba, dispozitivele populare etc. pot fi factori foarte importanți care vor face sau distruge marca/site-ul dvs.
E mai ușor decât pare.

Se știe că designerii pierd din vedere pentru cine proiectează.

Deci, dacă nu aveți un arhitect UX la îndemână, veți face bine să cercetați acest lucru singur. În cele din urmă se va reflecta asupra muncii tale, așa că nu ridica din umeri și spune că nu este punctul tău forte.

Pentru numere specifice pentru mobil, utilizați Google Mobile Planet. Întrebați-vă clienții despre publicul lor.

Dacă vă puteți pune în locul publicului dvs., veți putea crea modele intuitive ușor de utilizat. Nu este știință-rachetă, doar psihicul uman de bază.

Un „wireframe” are nevoie de o poveste

Proiectul dvs. de design receptiv va fi incomplet fără interacțiuni. Același lucru este valabil și pentru macheta dvs.

Designul dvs. (probabil) nu va fi un concert de o pagină în care să apară conținut și să nu se întâmple nimic altceva.

Fără interacțiuni, fără stări, fără animații sau efecte: practic, tot ceea ce poate face site-ul tău un succes (sau un eșec, dacă este folosit fără gândire) este eliminat. În timp ce Style Tiles este un clasic din motive întemeiate (așa cum a spus fondatorul său, „Pentru a începe o conversație în jurul designului”), este mult prea simplu pentru a fi sofisticat în termenii designului actual.

INVESTIȚI CEVA TIMP ÎN CREAREA PROTOTIPURILOR INTERACTIVE ALE IDEILOR DVS. COLABORAȚI PE CELE ÎNAINTE DE A ÎNCEPE CU DEZVOLTAREA FRONT-END.

Nu aruncați doar idei. Ai auzit de povestiri?

Spune-le clienților tăi o poveste receptivă, interactivă, cu nimic altceva decât prototipul și intuiția ta.

Utilizați instrumente precum Balsamiq, Axure, UXPin etc. pentru a crea versiuni vizuale ale acelor „povestiri”. Mângâiește-le imaginația cu cuvinte; hrăniți-l cu un prototip bine lucrat.
Va servi pentru a vă simplifica munca de proiectare și dezvoltare pentru mai târziu și vă va oferi o pistă oarecum definită de care să rămâneți. Și ca bonus: primele impresii contează încă. Un prototip bun arată că ești entuziasmat de proiect.

Conținut: în primul rând, vizibil și adaptabil. Mereu

Motivul pentru care deveniți receptiv este pentru ca mesajul dvs. să aibă o acoperire mai largă, fiind accesibil uniform și indiferent de dispozitiv.

Învingeți întregul scop al designului responsive fiind nevoit să vă ascundeți conținutul.

Publicul tău mobil va descărca oricum datele, deci ce rost are să le ascundă? Creați un inventar de elemente de conținut. Identificați ce elemente apar pe toate paginile și care merg pe anumite pagini. De exemplu, butoanele dvs. CTA pot fi pe fiecare pagină sau pe anumite pagini (cum ar fi pagina de destinație, paginile de resurse conexe etc.).

Începi cu a pune mai întâi elementele de conținut, apoi construiești de acolo. Clopotele și fluierele bat la sfârșit.

În primul rând: înțelegeți obiectivele utilizatorilor și ceea ce doresc aceștia de la site, apoi adaptați-vă conținutul pentru un acces ușor pe dispozitivele lor.

În loc să stoarceți un articol de un milion de cuvinte pentru a se potrivi pe o pagină mobilă, oferiți-le utilizatorilor șansa de a citi informațiile fără a derula la nesfârșit. Și scriptingul front-end sau pe server nu este răspunsul (real) pentru asta.

O modalitate bună de a face acest lucru este utilizarea unui rezumat scurt și precis pentru previzualizare .

Lăsați utilizatorul să decidă dacă dorește să deruleze conținutul dvs. pentru restul acestuia. TL; DR este comună în rândul tuturor (chiar și al organizațiilor media, motiv pentru care primim poveștile publicate fără verificarea reală a faptelor și bazate pe nimic altceva decât hype). Așadar, adăugați o secțiune la sfârșitul conținutului și ușurați-l.

În al doilea rând: Oferiți utilizatorilor informații complete în loc de doar o versiune fragmentată a acesteia.

Folosiți coloane și fonturi receptive. Utilizați Zurb Responsive Tables pentru tabelele de date fluide. Comprimați media (utilizați CDN și cache pentru a crește performanța).
Conținutul este mesajul tău. Asigurați-vă că este clar și vizibil, indiferent de dimensiunea dispozitivului.

Bonus: Content-first vă pune în minte ierarhia conținutului, ceea ce face ca proiectarea navigării să fie un proces mai ușor.

Respectați limitările și capacitățile dispozitivului

Când vorbim despre „în primul rând pe mobil” sau „îmbunătățire progresivă”, înțelegem cu adevărat și ne acomodăm pentru cel mai mic minim? Iată o descriere a ceea ce ar trebui să fie „minimul strict”:

• Latimea utilizabila a ecranului: 120 pixeli, minim.
• Suport limbaj de marcare: XHTML Basic 1.1 livrat cu tipul de conținut application/xhtml + xml.
• Codificarea caracterelor: UTF-8
• Suport format de imagine: JPEG, GIF 89a.
• Culori: 256 de culori, minim.
• Suport pentru foi de stil: CSS Level 1, CSS Level 2 @media regula împreună cu dispozitivul portabil și toate tipurile de media
• HTTP: HTTP/1.0 sau mai recent HTTP1.1
• Script: Nu există suport pentru scripting partea client.

Pe baza acestor specificații, nu este dificil să creezi un design funcțional. Problema este extinderea.
Este bine să luați în considerare dimensiunile dispozitivului, dar acesta este doar începutul și nu întregul. Minimizarea și normalizarea scripturilor (performanță și experiență), proiectarea interfețelor curate cu grijă pentru suficiente spații albe (pentru atingere), respectarea conectivității și limitările de încărcare a dispozitivelor (performanță) și testarea mereu riguroasă sunt importante aici.

Vă rugăm să ușurați sarcina

Nu vreau să vorbesc despre asta (avem o mulțime de opinii pe acest subiect), dar nu se poate nega importanța vitezei paginii pentru clasamente mai înalte și o experiență mai bună a utilizatorului.

Mai simplu spus: dacă pagina ta se încarcă lent, nimeni nu se va deranja să aștepte să ajungă din urmă.

O abordare precum mobil-first funcționează foarte bine pentru asta. În îmbunătățirea progresivă, începem cu strictul minim de toate: elemente de UI, caracteristici și faptul că proiectăm pentru cele mai înguste lățimi de bandă dintre toate dispozitivele. Cei care încă condamnă meritele abordării mobile-first vor fi de acord că acest lucru pune în minte performanța și viteza față de orice altceva .

În plus, și nu ar trebui să ți se reamintească faptul că, trebuie să ții sub control dimensiunea suportului.

Așadar, folosiți CDN (fezabil pentru site-uri web cu trafic mediu până la mare) și tehnici de dezvoltare back-end care ușurează în mod specific încărcările paginilor. Utilizați memorarea în cache. Îmbunătățiți performanța percepută (cât de repede „se simte” site-ul pentru utilizator) bifând caseta relevantă înainte de a salva o imagine JPG pentru web.

Păstrați-vă designul suplu și elegant (mai puțin dintre toți clienții și utilizatorii).

TL; DR

Deci, iată ce am învățat proiectând pentru un web receptiv:

• Design pentru un public. Cercetează puțin și folosește Google Mobile Planet (și alte instrumente similare) pentru numere.
• Un Wireframe poate fi adus la viață printr-o poveste. „Prototip” înseamnă versiunea preliminară a unui dispozitiv/sistem. Fă-l ceva care funcționează cu adevărat. Utilizați instrumente interactive de prototipare.
• Faceți conținutul vizibil și adaptabil. Nu ascunde conținutul de pe telefoane mobile când va fi oricum descărcat. Dacă există o postare originală, adăugați un scurt rezumat relevant, care este mai potrivit pentru citirea pe dispozitive mobile.
• Respectați limitările și capacitățile dispozitivului. Dezbaterea cu mouse-ul/atingerea cu degetul deoparte sau dimensiunile deoparte, proiectați pentru specificațiile minime ale dispozitivului utilizat de publicul vizat.
• Acordați atenție performanței. Nu doar pentru o mai bună clasare în căutare, ci și pentru experiență.

Biografia autorului: Lucy Barret este asociată cu HireWPGeeks Ltd. Oferă servicii de conversie HTML în WordPress și are o echipă de dezvoltatori experți care o ajută. De asemenea, este un blogger pasionat și îi place să-și împărtășească cunoștințele cu marea comunitate WordPress. Urmărește-i compania pe rețelele de socializare precum Facebook și Google+.