Komplexní průvodce opravami Responsive Problémy s designem v roce 2023

Většina webových stránek používá responsive design jej používají nesprávně, což vede k problémům. Obecný přístup k responsive design je líný, a pokud zvolíte tento přístup, některé z vašich responsive stránky budou fungovat naprosto bezchybně a mnoho z nich ne. Pro ty, kteří fungují perfektně, to bude pravděpodobně otázka štěstí.

Pojem responsive design je jednoduchý, ale právě jeho jednoduchost vede lidi k tomu, že tak snadno chybují. Designéři s letitými zkušenostmi si zvykli navrhovat pro desktop, a tak obvykle plánují návrh na základě a desktop rozložení.

Desktop rozvržení se liší od rozvržení tabletu a rozvržení pro mobily, protože jsou obvykle vícesloupcová, obvykle obsahují velké množství prázdného místa a všechno je prostě „velké“, pro lepší slovo. Li responsive Při použití návrhových technik se předpokládá, že toto vícesloupcové rozložení se rozloží do jednoho sloupce.

Jestli je to všechno tvoje responsive design skutečně funguje, když je zobrazen na mobilním zařízení, můžete mít problém. Jak velký problém závisí na vašem přístupu, ale dobří designéři se starají o dobré UX. Ještě více se starají o špatné UX. Pokud má váš web špatné UX a chcete být dobrým designérem, musíte to napravit.

Tento problém se sbalením vícesloupcového rozložení do jednoho sloupce spočívá v tom, že nefunguje na proporcionálním základě. Pokud musíte něco zmenšit vodorovně a neprovedete žádné další změny, zjevně se to roztáhne vertikálně.

Nalijte vodu z krátké tukové sklenice do vysoké tenké a voda získá tvar vysoké tenké sklenice, přičemž objem vody zůstane přesně stejný. Návrháři musí pochopit, že u webových stránek potřebujeme, aby se objem změnil. Obvykle není dobrý nápad měnit tvar, ale zachovat obsah přesně stejný. Něco musí dát.

Někdo, kdo skutečně získal titul designér, pochopí, že to představuje problém, který je třeba vyřešit, a co designéři ve skutečnosti dělají, je najít řešení problémů. Proto je pro vás perfektní práce najít nejlepší způsob, jak doručit základní obsah webu, aniž byste z uživatelského prostředí udělali frustrující posouvání. Zde je několik věcí, které stojí za zvážení při rozebírání a desktop design do mobilního designu:

1. „Mobile First“ je blbost

Promiň, ale je. Všichni to papouškují, ale jako koncept to není příliš užitečné, protože pokud skutečně navrhnete „nejprve mobil“, bude to děsivé zkoušet to škálovat zpět na desktop design, pokud nezůstanete u rozvržení čistě jednoho sloupce úplně nahoru.

Nejlepším přístupem je fyzicky navrhnout alespoň tři (a až 11) různých rozložení. Mezi minimální, které můžete zvážit, patří:

• Desktop
• Krajina Mobil
• Portrét Mobil

Pokud chcete být trochu důkladnější, měli byste také zvážit:

• Krajina Tablet
• Tablet na výšku

A úplný seznam, pokud chcete být úplně kompletní, by byl:

• Obrovský Desktop
• Obyčejný Desktop
• Velký tablet na šířku
• Velký portrétní tablet
• Malý tablet na šířku
• Malý portrétní tablet
• Velká krajina Mobil
• Velký portrét Mobil
• Malá krajina Mobil
• Malý portrét Mobil
• Drobné / Nositelné

S tolika různými možnostmi je zřejmé, proč je líný „univerzální“ přístup tak lákavý, ale je také zřejmé, proč existuje tolik způsobů, jak jej zničit.

2. Zkroťte to rozlehlé zápatí stránky

Projekt desktop design obsahuje jednu z těch obrovských zápatí stránek se spoustou interních odkazů? Skvělé, to se bude pravděpodobně velmi hodit desktop. Na mobilu to vypadá směšně a je to víc než jen otravné doteky. Pro každý bod přerušení můžete navrhnout zcela odlišné zápatí stránky. Stačí tyto odkazy v zápatí zpřístupnit v modálním dialogu a všichni vyhrají.

3. Přijměte některé drobné vtípky na obskurních zařízeních

Pokud konkrétní zařízení není běžné, pak to není tak špatné, pokud je v designu pár vtípků, které se objeví pouze při prohlížení na tomto zařízení. Čím je zařízení oblíbenější, tím více se budete muset snažit zbavit se všech výstředností, které se na něm objevují.

4. Můžete skrýt obsah, který nepřispívá k hlavnímu sdělení

Nejdůležitější částí webu je hlavní sdělení. Ano, na některých stránkách je nejdůležitější reklama a existují pouze proto, aby tuto reklamu doručovaly, ale pokud si musíte vybrat mezi zobrazením hlavního sdělení nebo zobrazením reklamy, vyberte sdělení. Google vás bude spíše považovat za persona non grata pokud skryjete základní obsah a poté zobrazíte spoustu reklam. Je to proto, že tento základní obsah je tím, na základě čeho vás Google indexoval, a když se tento obsah nezobrazuje, Google to považuje za klamavé.

Navíc věci, jako jsou obrázky, které jsou čistě dekorativní nebo estetické, ale které významně nepřispívají k hlavnímu sdělení, jsou kandidáty na redukci nebo úplné skrytí.

Někteří lidé navrhovali, že skrývání obsahu je „potrestání“ mobilních uživatelů, ale to je trochu absurdní představa. Realita je taková, že obsah skrýváte, protože je tam proto, aby vylepšil desktop zkušenosti, ale nepřispívá dostatečně k základnímu sdělení webu, aby to bylo nutné

5. Můžete použít alternativní pozadí

Nedávno jsem dostal směšný úkol, kdy majitel webu zaplatil za konkrétní pozadí a chtěl, aby byl veškerý obsah přizpůsoben tomuto pozadí. Body odrážek musely obsahovat velmi přesný počet znaků, celkový počet řádků musel být přesný a tak dále.

To je rozhodně špatná praxe ve webdesignu, protože byste měli nikdy navrhnout obsah tak, aby odpovídal rozvržení. Rozložení by mělo vždy být navržen tak, aby obsah podržel. Pokud z nějakého důvodu rozložení nemůže pojmout obsah, pak by se mělo přepracovat rozložení, nikoli obsah. Je docela možné použít různá pozadí pro různá zařízení. Jste návrhář. Použij svou představivost.

Obsah je životodárnou krví webu a jeho úprava nebo omezení na základě omezení rozvržení je jasným znakem amatérskosti ze strany vlastníka webu a znakem toho, že rozvržení bylo na začátku špatně navrženo. místo. Držte se svých zásad, protože ten klient bude mít potíže, pokud se podvolíte.

Zákazník má vždy pravdu, kromě případů, kdy je tento zákazník klientem webdesignu. Klienti málokdy vědí, co je pro ně nejlepší, a je důležité prosadit se jako webdesignér, který ví, jak klientovi dodat ten správný výsledek. jinýwise riskujete vytvoření dalšího webu ohavnost.

6. Ručně ovládejte pořadí sbalení (nebo se vyhněte prostorovým odkazům v obsahu)

To je složitý problém. Pořadí sbalení webu závisí na pořadí, ve kterém jsou divy naskládány. Musíte poskládat své divy ve správném pořadí, aby se sbalily ve správném pořadí.

Jedním z problémů, který pochází z tvůrců webových stránek WYSIWYG drag-n-drop, je to, že nemůžete normálně diktovat, v jakém pořadí se budou divy skládat, a ve velmi vzácných případech, kdy to můžete udělat, vaše tvrdá práce skončí pokaždé. provedete nejmenší úpravu a budete se muset vrátit a znovu nabourat zdrojový kód.

Pokud neovládáte pořadí sbalení, tento obrázek jasně vysvětluje, co se může pokazit. Také byste se měli vyvarovat prostorových odkazů (jako „ve sloupci vlevo“), protože na mobilu může být cokoliv, co bylo vlevo nebo vpravo, posunuto nahoru nebo dolů, Plus pokud čtenáře přimějete, aby si myslel, že je dost důležité, aby posouval, aby viděl, pak se bude muset znovu posouvat zpět, a to není skvělé.

7. Možná budete potřebovat různé velikosti písma pro různá rozvržení

Je snadné ovládat velikost písma pomocí CSS a můžete nastavit různé velikosti písma a dokonce i různé obličeje písem (pokud budou vypadat lépe) pro konkrétní velikosti zobrazení. Velikost zobrazení můžete zjistit pomocí dotazů na média CSS a poté upravit velikost písma nebo řez písma tak, aby byly na hodnotách, které by obsah zobrazovaly s maximální výhodou na typu zařízení, na které cílíte.

8. Nejlepší je použít responsive obrazy

Všechny obrázky by měly být responsive kdykoli je to možné. To s sebou přináší, že se někdy mohou detaily obrázku ztratit, pokud je příliš zmenšen. Řešením tohoto problému je zpřístupnit obrázek kliknutím, aby si uživatel mohl prohlédnout zvětšenou verzi obrázku odděleně od obsahu. Normální způsob, jak toho dosáhnout, je prostřednictvím modálního dialogového okna.

obrázek v záhlaví se svolením Artur Martynowski