Amit tavaly publikáltam a demo változatban webáruházamat, ezzel kapcsolatban összefoglalva írom. Úgy csináltam egy olyan tervezési folyamatot ami a Google AMP technológia felhasználása esetén kelleni fog, ami kijavítja a felhasználói elégedettséget a felhasználók és a termékek között, a használhatóság, a hozzáférhetőség és az növelne az élményeit.
Akár szokásos HTML, akár AMP HTML esetén nagyjából ugyanazok alapok
- Legyen hasznosak
- Legyen könnyű kezelhetőség
- Legyen megfelelő esztétikai és letisztult felületek
- Legyen könnyen kereshető és hozzáférhetőség
- Legyen egyéni és egységes színkódos arculat
- Legyen tiszta kontraszt
- Legyen alap navigáció
- Legyen megfelelő tipográfia (betűtípus, betűméret)
Google AMP szabályok elvárásai szerint tervezése, minden ami alaphoz kelleni fog
Először így terveztem az a dolgot, hogy olyanok pluginok legyenek, amiket támogat a Google AMP szabályok szerint és szígorúan Design szabásnál 50kbtye legyen a limitje.
Aztán minden korosztályok és minden látássérültek / szemüvegesek számára legyen könnyen használható.
Pluszban előre figyeltem, hogy a PageSpeed vizsgálaton, mindketten, azaz mobilon és desktopon minimum 90 pontok felettiek legyenek.
Web.dev eszközhöz megfeleléshez is tervezni szükséges
Érdemes megvizsgálni és ezek szerint tovább folyamatosan finomítgatni a reszponzív látványtervet / drótvázat, hogy jobban megfeleljen a Google elvárásai szerint.
Az én demóm alapján részletes info, hogy miért és mire jutottam tervezni:
Minden alapok ami webfejlesztés projekthez kelleni fog:
Gyorsabb megtalálhatóság, letisztultabb megjelenések, megfelelő betűméretet, betűtípusokat és színkódokat kiválasztani. Mert csak ez így segítségével az egyszerűbb elrendezés megkönnyíti, hogy végre lehet hajtani a kívánt művelet, illetve az új egyszerűsített navigációval hamarabb eljuthat oda, ahova szeretne.
1280px-t adtam meg az oldal szélességet, hogy nem szükséges teljesen, mint 1920px-t megadni, hisz túl nagy, sokaknak nincs kedve túl balra vagy jobbra nézni a dolgokat a “pszichológiai szerint” és kizárólag csak a középre, ezért 1280 px felbontásnál nagyobb monitorok alatt látszani fog, hogy középre lett igazítva, azaz bal/jobb oldalon már külső fehér vonalak, mint margók.
Ennek köszönhetően képek méretezésnél kisebb kilóbájt mérete miatt gyorsabban be fog tölteni az oldal sebességét.
0 Megjegyzések