Az első dolog, amit a legtöbb tervező figyelembe vesz, amikor elkészíti weboldalát, az az, amit felbontás megtervezni. Ez valójában annak eldöntése, hogy milyen szélesnek kell lennie a tervezésnek. Már nincs olyan, hogy szabványos webhelyszélesség.
Miért érdemes megfontolni a felbontást
1995-ben a szabványos 640 pixel x 480 pixel monitorok voltak a rendelkezésre álló legnagyobb és legjobb monitorok. Ez azt jelentette, hogy a webtervezők arra összpontosítottak, hogy a webböngészőkben jól kinéző oldalakat maximalizálják egy 12–14 hüvelykes monitoron ekkora felbontással.
Napjainkban a 640 x 480 felbontás a legtöbb webhely forgalmának kevesebb mint 1 százalékát teszi ki. Az emberek sokkal nagyobb felbontású számítógépeket használnak, ideértve az 1366 x 768, az 1600 a 900 és az 5120 x 2880 felbontást. Sok esetben működik az 1366 x 768 felbontású képernyő megtervezése.
Todya, a legtöbb ember nagy, széles képernyős monitorokkal rendelkezik, és nem maximalizálják a böngészőablakot. Tehát, ha úgy dönt, hogy egy olyan oldalt tervez, amelynek szélessége nem haladja meg az 1366 pixelt, akkor valószínűleg a legtöbb böngészőablakban is jól fog kinézni az oldal, még a nagyobb felbontású, nagy monitorokon is.
Böngésző szélessége
A weboldal szélességének eldöntésekor gyakran figyelmen kívül hagyják azt a problémát, hogy az ügyfelek mekkora méretben tartják böngészőjüket. Pontosabban: teljes képernyős méretben maximalizálják böngészőjüket, vagy kisebbek maradnak, mint a teljes képernyő?
Miután elszámolt olyan ügyfelekkel, akik maximalizálják vagy nem, gondoljon a böngésző határaira. Minden webböngésző gördítősávot használ, és az oldalakat szegélyezi, amelyek 800-ról kb 740 pixel vagy kevesebb 800x600-os felbontáson és kb. 980 pixel maximalizált ablakokon 1024x768-nál állásfoglalások. Ezt hívják böngészőnek króm és elveheti az oldaltervezéséhez használható helyet.
Fix vagy folyékony szélességű oldalak
Nem csak a tényleges numerikus szélességre kell gondolnia, amikor megtervezi a webhely szélességét. Azt is el kell döntenie, hogy rendelkezik-e a rögzített szélesség vagy folyadék szélesség. Más szavakkal: a szélességet egy meghatározott számra (rögzített) vagy egy százalékra (folyékony) állítja be?
Rögzített szélesség
A rögzített szélességű oldalak pontosan olyanok, mint amilyennek hangzanak. A szélesség egy adott számra van rögzítve, és nem változik, függetlenül attól, hogy mekkora vagy kicsi a böngésző. Ez a megközelítés jó lehet, ha szüksége van a tervezésére, hogy pontosan ugyanúgy nézzen ki, függetlenül attól, hogy milyen széles vagy keskeny az olvasói böngésző, de ez a módszer nem veszi figyelembe az olvasókat. Az Ön tervénél keskenyebb böngészővel rendelkező embereknek vízszintesen kell görgetniük, a széles böngészővel rendelkező embereknek pedig nagy mennyiségű üres hely lesz a képernyőn.
Fix szélességű oldalak létrehozásához használjon meghatározott pixelszámokat az oldalfelosztás szélességéhez.
Folyékony szélesség
Folyékony szélességű oldalak (néha hívják őket rugalmas szélességű oldalak) szélessége a böngésző ablakának szélességétől függ. Ez a stratégia olyan terveket hoz létre, amelyek jobban az ügyfelekre koncentrálnak. A folyékony szélességű oldalak problémája az, hogy nehezen olvashatók. Ha a szkennelés hossza 10–12 szónál hosszabb, vagy 4–5 szónál rövidebb szövegsorozat nehéz lehet elolvasni. Ez azt jelenti, hogy a nagy vagy kicsi böngészőablakokkal rendelkező olvasóknak gondjaik vannak.
Rugalmas szélességű oldalak létrehozásához használja a százalékokat vagy ems az oldalfelosztás szélességéhez. Ismerkedjen meg a CSS-szel max szélesség ingatlan. Ez a tulajdonság lehetővé teszi a szélesség százalékos megadását, de aztán korlátozza, hogy ne legyen olyan nagy, hogy az emberek ne olvashassák.
CSS média lekérdezések
A legjobb megoldás manapság az, hogy CSS média lekérdezéseket és adaptív dizájnt használva létrehoz egy olyan oldalt, amely igazodik az azt megtekintő böngésző szélességéhez. A reszponzív webdizájn ugyanazt a tartalmat használja olyan weboldal létrehozásához, amely akkor is működik, ha 5120 vagy 320 képpont szélességgel nézi meg. A különböző méretű oldalak másképp néznek ki, de ugyanazt a tartalmat tartalmazzák. A CSS3 média lekérdezésével minden fogadó eszköz méretével válaszol a lekérdezésre, és a stíluslap igazodik az adott mérethez.