Prestanite koristiti točke prekida uređaja

Vizualizacija sićušnog segmenta veličina prikaza

Stalno ga vidim. Dizajneri i programeri podjednako postavljaju prijelomne točke prema svom omiljenom uređaju. Kada ćemo naučiti iz svojih prošlih pogrešaka?

Kad je došao web, nastavili smo se širine od 640 piksela. Zatim nekoliko godina kasnije, kada su na tržište došli veći monitori, smjestili smo se na 960 piksela. Više se nismo brinuli o ljudima s manjim monitorima.

Tada su prolazile još godine. Rođen je mobilni web. Ili još preciznije, mogli bismo konzumirati web stranice na našim telefonima, za koje se čini da imaju male ekrane. Izašlo je milijun preglednika. Izašlo je milijun uređaja. A preglednici su nam uputili medije.

Otprilike u ovo vrijeme odlučili smo koristiti 320 piksela za mobitel. Zašto? Jer mnogo nas je imalo iPhone, a to je bila njegova širina u portretu.

I onda. I onda. I onda.

Zatim pejzažni način rada. Zatim tablet (to je još uvijek mobilno, zar ne?). Zatim radna površina. Tada velika radna površina poput gromoglasnih ekrana super veličine ili kako god se još zove. (Ne gurim to jer znate na što mislim). Zatim TV. Zatim ručni sat i onda ...

Shvatili ste poantu. Web nije ispis. Web je web i nemamo pojma koji ekran veličine imaju naši korisnici. To jednostavno ne možemo kontrolirati. Čak i ako možemo, širenje uređaja znači da je projektiranje za njih beskorisno.

Ali postoji nekoliko stvari koje znamo. Znamo svoj brend i sučelje. I što je još važnije, znamo naš sadržaj. Sadržaj nisu samo odlomci teksta. To su stvari koje se u nečemu drže ili uključuju.

Uvijek bismo trebali započeti sa sadržajem. Bez sadržaja dizajn nije besmislen. Dizajniramo kako bismo pomogli korisnicima da konzumira sadržaj. Ne koristimo sadržaj kako bismo pomogli korisnicima da uživaju u našim dizajnovima.

Često započinjemo dizajn s kutijom. I onda unutra stavljamo manje kutije. Zatim ćemo kasnije ispuniti ove okvire stvarnim sadržajem.

Kao što Frank Chimero lijepo objašnjava u zrnu Weba, ovo je samo najgore što možemo učiniti.

Kako uopće možemo nešto dizajnirati dok ne saznamo što je sadržaj?

Bila sam svjedok dizajnera kako završavaju makete i zamolim rezidencijalnog dizajnera sadržaja da sadržaj prilagodi. Možda ih čak zamolite da skrate sadržaj prilagođen korisniku kako bi bili sigurni da se ne prekriva i tako dalje. Može pomoći dizajneru. Korisniku ne pomaže

A kad provjere svoj dizajn na pejzažu ili na uređaju koji nemaju u svom vlasništvu, zaspu se. Ono što oni smatraju kontrolom, doista je nepotrebno ograničenje njihovog dizajna na poznati skup veličina uređaja.

Umjesto toga, trebali bismo dopustiti da nam sadržaj bude vodič. Trebali bismo postaviti prekid kada i ako sadržaj to zahtijeva. Možemo ih nazvati točke prekida sadržaja ili ono što Frank naziva točkama ponovnog sastavljanja.

Uzmimo za primjer obrazac za pretplatu na MaintainableCSS. Uzimajući prvi pristup na malenom zaslonu pod vodstvom sadržaja, gumb se nalazi ispod tekstnog okvira. A kad ima sobe, sjede jedni pored drugih.

Odgovorni obrazac za pretplatu na temelju bodova prekida sadržaja

Medijski upit koristi prijelomnu vrijednost od 36em. Zašto? Jer tada postoji prilika za ponovno sastavljanje sadržaja. Kontrola gumba i teksta gubi svoju prednost kada postanu stvarno široki na većim ekranima. Pa to možemo popraviti.

A odnosi se samo na obrazac za pretplatu. Ne postoji pravilo pokrivača koje kaže da 36em znači "veliko". Točka prekida odražava potrebu predmetnog modula i sadržaja.

Tehnički je to samo medijski upit. Ali ono što ga izdvaja je način razmišljanja i pristup. Dizajn podržava sadržaj. Ne obrnuto.

To je razlog zašto CSS okviri uzrokuju probleme nepotrebnim ograničavanjem našeg sadržaja da se uklopi u unaprijed definiranu mrežu. Kako CSS okvir može znati kakav je naš sadržaj? Ne može

Izraz mobilni prvo nas potiče da razmišljamo u smislu uređaja. Ali web nije skup uređaja. Web je kontinuitet beskraja. To je najbolja rečenica koju sam ikad napisao.

Oprosti zbog korištenja žargona. Što to znači je ovo. Apsolutno nema smisla pokušavati utvrditi veličinu određenog uređaja kako bi se zatim definirala šifrirana odzivna mreža.

U najboljem slučaju ograničava, a u najgorem slučaju izaziva probleme.

Umjesto toga, neka sadržaj bude vaš vodič. Ako i kada se pokvari, možemo ga ponovno sastaviti s potrebnom točkom sadržaja.

Odgovarajući dizajn oslobađa nas od okova dizajniranja na temelju uređaja, na što je nemoguće doći. Sadržajne točke prekida pružaju ljudima bolje iskustvo bez obzira na veličinu uređaja koji imaju.

To je kraj Ali, ako vam se svidio ovaj članak, pretplatite se na moju privatnu poštu. Ovakav članak šaljem otprilike jednom mjesečno ravno u vašu mapu. To je dobar način za nastavak razgovora.