Grafikai tervek ellenőrzése

Minden grafikai tervet ellenőrizni kell, és csak akkor szabad elkezdeni rajtuk dolgozni, ha minden szabálynak megfelel, vagy az eltérések egyeztetve vannak a megrendelővel.

Amennyiben egy már létező weblapba kell egy új landing oldalt létrehozni, akkor az új oldal terveit a régi oldallal is össze kell hasonlítani.

Ez a dokumentum folyamatosan bővül, amikor egy újabb ellenőrizendő tétel felmerül.

Alap esetben Bootstrap 5-höz (vagy olyan legacy weblap esetén, ahol már Bootstrap 4-ben vannak elkészült komponensek, Bootstrap 4-hez) igazodva ellenőrzünk, ettől egyes projektekben eltérhetünk, ha az előre meg van beszélve.

A itt felsorolt dolgokat kell ellenőrizni, egy tervnek minden ellenőrzésen át kell menni ahhoz, hogy elfogadjuk és el lehessen kezdeni a sitebuild folyamatot.

Egymást blokkoló ellenőrzések

Egyes ellenőrzéseken ha nem megy át a terv, akkor másik ellenőrzéseket felesleges elkezdeni.

Például:

• Ha a "Grid rendszer" nem felel meg, akkor:
  • A "Térközök"-et felesleges ellenőrizni.
• Ha a "Kapott grafikai elemek"-ből hiányzik pl mobil vagy desktop nézet terv, akkor:
  • A "Mobil - Desktop wireframe egyezése" nem ellenőrizhető.
• Ha a kapott design tervek nem a "Képernyő méretek, töréspontok" szerinti méretekben lettek megkapva, akkor:
  • A "Konténer méretek" és "Térközök" nem ellenőrizhetőek.

Grafikai ellenőrzés végeredménye

Egy olyan dokumentáció kell készüljön, amibe bekerülnek a megrendelő által átadott grafikai terveken elvégzett - az alábbi dokumentumban részletezett - ellenőrzések eredményei.

A dokumentumban minden bonyolultabb hiba esetén ki kell részletezni, hogy:

• miért hiba
• mi az alternatív - helyes - megoldás
• a két lehetőségnek mik a pro/kontra érvei.

A dokumentumban minden ellenőrzés egy pontot kap:

• 0: értelmezhetetlen
  • nem olyan képernyő méret, amire szükség van
    • pl 360px helyett 320px
  • hiányzik róla valamilyen fontos, összetett blokk
    • pl valameliyk méreten nem látszik, hogy hogy kell kinéznie egy űrlapnak, vagy tartalom ajánlónak
• 1: megrendelő nélkül nem tudjuk megoldani
  • hiányzik grafikai elem (például kép) a tervről, vagy a kapott anyagból
  • nem oldható meg bootstrap kompatibilisen, egyeztetni kell
• 2: hibás, de meg tudjuk a megrendelő nélkül oldani
  • például minimális, pár pixeles térköz probléma van
• 3: nincs hiba

Az ellenőrzéseket képernyő méretenként csináljuk (lásd a "Képernyő méretek, töréspontok" fejezetet).

Minden ellenőrzés kap egy pontot, ezekből végül számolunk egy átlagot, és átalakítjuk százalékos formára (ahol 0 pont a 0%, 3 pont a 100%).

Az egymást blokkoló ellenőrzések során akkor blokkol be egy ellenőrzés egy másikat, ha a blokkoló 0 vagy 1 pontot kapott. Ebben az esetben minden egyéb, blokkolt ellenőrzés pontja automatikusan 0.

Komponensek, mutációk és vízszintes elrendezés

Amennyiben azonos, vagy nagyon hasonló funkciójú, de grafikailag eltérő komponensek vannak, azokat egyeztetni kell, hogy lehet-e egy grafikával használni, hogy ne kelljen dupla kódokat csinálni.

Amennyiben ugyanannak a komponensnek készül egy grafikai mutációja, az nem jó, ezt is egyeztetni kell, hogy mi az oka.

Amennyiben egy olyan új színkód jelenik meg a terven, amit addig nem használt a weblap, egyeztetni kell, hogy

• új színt vezetünk be a palettába
• a legközelebbi, hasonló, már a palettán lévő színt használjuk
• lecseréljük mindenhol egy már a palettán lévő színt az újra

Amennyiben egy új betűtípus jelenik meg a terven, azt is egyeztetni kell, főleg akkor, ha csak 1-2 elem használja (pl header-ök, vagy gombok), hogy megéri-e a SEO kárára egy újabb font fájlt behívni az oldalon.

Amennyiben nem standard méretű, vagy sor magasságú szöveg van valahol, azt szintén egyeztetni kell, és ezeket is komponensként, illetve utility CSS class-ként kell kezelni és megvalósítani.

A komponensek (vagy alkomponensek, pl gombok, dobozok, stb) elrendezésénél és darabszámánál ellenőrizni kell, hogy meg lehet-e a 12-es grid rendszerrel valósítani?

Például egymás mellé 5 vagy 7 dobozt nem lehet kirakni úgy, hogy teljes szélességben kitöltse a helyet, de egyes esetekben úgy igen, hogy két oldalt van egy kis térköz.

5 elem esetén egy-egy elem 2 grid helyet kap, és két oldalt lesz 1-1 grid-nyi üres hely. 7 elem esetén egy-egy elem 1 grid helyet kap, és két oldalt lesz 2,5-2,5 grid-nyi üres hely.

Mivel már ez is kompromisszumos megoldás, de látszódni fog, hogy az adott komponens nem illeszkedik teljesen a grid rendszerre, így el kell kerülni.

Kapott grafikai elemek

A kapott terv tömörítetlen PNG formátumban van-e, vagy Figma, esetleg egyéb, Webb & Flow és megrendelő által is elfogadott tervező szoftverben készült, ami megosztható Webb & Flow-val?

Megkaptuk a mobil és desktop nézeteket is, vagy egyelőre csak mobil vagy csak desktop nézet van, de lesz a másik is?

Amennyiben vannak olyan elemek, amiknek a színe nem határozható meg egyértelműen az antialias miatt (pl 1-2 pixel széles vonalak, kis méretű szövegek), azoknak a színkódját megkaptuk-e?

A terveken szereplő képek, ikonok és egyéb grafikai elemek benne vannak-e a fájl csomagban kivágva? Az ikonok lehetőleg vagy átlátszó PNG vagy SVG formátumban vannak-e?

Ha nem kaptunk kivágva képeket és/vagy ikonokat, akkor a forrásfájl, amit kaptunk (pl.: Figma) alkalmas arra, hogy könnyen kiexportálható (utólagos kép manipulációt - beleértve a levágást és az átméretezést - nem igénylő) legyen belőle a html/css-ben közvetlenül használható képi anyag (átlátszó PNG, vagy SVG) ?

Böngésző kompatibilitás

Meg van szabva, hogy mely böngészőkkel kell kompatibilis legyen az oldal? (Pl.: régi IE támogatottság is szükséges, vagy elég a legújabb 3 verziójú Chrome és Firefox)

Meta

Megkaptuk a favicont?

Kaptunk social meta image képeket (og:image)?

Szöveg

Header-ek

Egyértelmű, hogy mely oldalon mely címek milyen szintű (H1-6) header-ek?

Webfont

A font ami ki van jelölve elérhető webfontként?

Ingyenes a webfont, vagy megvette a megrendelő?

Példa szöveg

A design terv példa szövegezése megfelelő az elkészült sitebuild demozásához?

Van olyan példa szöveg, ami inkonzisztens, és működésben többféleképpen értelmezhető (pl: breadcrumb navigációban nem 1:1-ben vannak leképezve a cikk címei a navigációban megjelenő szöveggel)

Wireframe

A kapott grafikai vagy wireframe terveken minden elemnek minden állapota látható-e?

Például popup-ok, lenyíló menük, interaktív elemek, stb)

100%-os grafikai lefedettség

Vannak olyan elemek, amik implikálnak egyéb olyan aloldalakat, amikről nem készült grafikai terv? Pl.:

• footer link → privacy policy oldal
• keresés mező → keresési eredmények oldal
• contact form → "köszönjük a megkeresést" oldal

Van olyan dolog, ami nyilvánvalóan szükséges lenne, de hiányzik? Pl.: webshop esetén megrendelés gomb.

Interakció

Amennyiben vannak interaktív elemek (valamilyen eseményre grafikailag megváltozó elemek, pl lenyíló menük, gomb/link hover állapotok), azoknak a működése specifikálva van-e?

Van egyedi megrendelői igény, hogy ne Javascript-el legyenek megvalósítva pl a lenyíló menük, slider-ek, stb.., hanem CSS-el?

Animációk

Amennyiben vannak animált elemek, azokra van-e működő példa, vagy érthető leírás mellékelve az elvárt működésről?

Hibaoldalak

404 hibaoldalra van grafikai terv?

Képernyő méretek, töréspontok

A tervek a Bootstrap által meghatározott töréspontokat használja-e?

Meg van -e határozva, hogy kell-e foglalkozni az xxs, illetve az xxl mérettel?

A lenti táblázatokban a dőlt betűvel szedett sorokkal csak akkor foglalkozunk, ha arra igény van, és előre meg van beszélve.

A vastaggal szedett szélességekre kérünk design terveket.

xxs 420px, illetve az egyedileg kért egyéb szélességek esetén ha van egyedi törés probléma, azt egyedileg kell kezelni, de nem kell feltétlenül teljes plusz grafikai tervet készíteni.

Bootstrap 5

Bootstrap 5 töréspont dokumentáció

Név	Töréspontok	Képernyőméret teszteléshez
xxs	.. 499px	360px és 420px
xs (portrait phones)	500px .. 575px	550px
sm	576px .. 767px	640px
md	768px .. 991px	800px
lg	992px .. 1199px	1024px
xl	1200px .. 1399px	1280px
xxl	1400px ..	1440px és egyedi megállapodás, ha kell

Bootstrap 4

Bootstrap 4 töréspont dokumentáció

Név	Töréspontok	Képernyőméret teszteléshez
xxs	.. 499px	360px és 420px
xs (portrait phones)	500px .. 575px	550px
sm	576px .. 767px	640px
md	768px .. 991px	800px
lg	992px .. 1199px	1024px
xl	1200px ..	1280px
xxl	egyedi megállapodás	egyedi megállapodás

Konténer méretek

Az egyes töréspontok esetén a konténer méret be van-e tartva?

Bootstrap 5

Bootstrap 5 konténer dokumentáció

Név	Konténer szélesség
xxs	100%
xs	100%
sm	540px
md	720px
lg	960px
xl	1140px
xxl	1320px

Bootstrap 4

Bootstrap 4 konténer dokumentáció

Név	Konténer szélesség
xxs	100%
xs	100%
sm	540px
md	720px
lg	960px
xl	1140px
xxl	egyedi megállapodás, lehetőleg a többi konténer méret arányait tartva. Preferált a Bootstrap 5 által definiált 1320px szélesség

Grid rendszer

12-es grid rendszert használ-e a terv, vagy legalábbis leképezhető-e 12-es grid rendszerre?

Bootstrap 5 grid rendszer dokumentáció

Bootstrap 4 grid rendszer dokumentáció

Térközök

Tartva vannak-e a Bootstrap által meghatározott térközök, vagy ha egyedi térközök vannak, akkor azok egységesek-e mindenhol?

Bootstrap 5

Bootstrap 5 grid rendszer dokumentáció

• Oszlopok között
  • 2x12px, azaz 2x0.75rem
  • az oszlop mindkét oldalán 12px-12px, tehát az első oszlop előtt és az utolsó oszlop után 12px a távolság a szülő elem széléhez képest, két oszlop között pedig 24px
  • lehet két oszlop között 0 a távolság, de akkor az az egész sor összes oszlopára igaz, nem oszloponként állítható
• Komponensekben
  • az alap 16px (1rem)
  • ezek többszörösei (0.25-ös skálával a törtek is) elfogadottak.
  • például a 0.25rem (4px) elfogadott, de a 0.3125rem (5px) nem.

Bootstrap 4

Bootstrap 4 grid rendszer dokumentáció

• szlopok között
  • 2x15px
  • az oszlop mindkét oldalán 15px-15px, tehát az első oszlop előtt és az utolsó oszlop után 15px a távolság a szülő elem széléhez képest, két oszlop között pedig 30px
  • lehet két oszlop között 0 a távolság, de akkor az az egész sor összes oszlopára igaz, nem oszloponként állítható
• Komponensekben
  • az alap 16px (1rem)
  • ezek többszörösei (0.25-ös skálával a törtek is) elfogadottak.
  • például a 0.25rem (4px) elfogadott, de a 0.3125rem (5px) nem.

Popup / modal méretek

A modal-ok szélessége egyezik a Bootstrap standard méreteihez?

Meg lehet valósítani a modal-t valamelyik standard mérettel?

Modal méret	Szélesség
Small	300px
Normal	500px
Large	800px
Extra Large	1140px
Teljes szélességű	100%, meg kell határozni, hogy melyik méreteken kell ezt használni. Bootstrap 4 esetén ez mindenképpen egyedileg fejlesztendő

Bootstrap 5 modal dokumentáció

Bootstrap 4 modal dokumentáció

Mobil - Desktop wireframe egyezése

A mobil és a desktop nézeteket meg lehet-e valósítani ugyanazzal a html kóddal, kizárólag css fejlesztéssel (pl.: flexbox sorrend módosítással van, hogy valami nem oldható meg)?

Minimális-e az olyan komponensek mennyisége, illetve a feltételezhető DOM mérete, amik csak bizonyos méretekben jelennek meg?