Az első dolog, amit a legtöbb tervező megfontolja, amikor weblapjukat építik, az a felbontás , amelyet tervezni kell. Ami ez valóban számít, el kell döntenie, milyen szélesnek kell lennie a tervezésnek. Már nincs olyan dolog, mint a szabványos weboldal szélessége.
Miért fontolja meg a felbontást?
1995-ben a szabványos 640x480 felbontású monitorok voltak a legnagyobb és legjobb monitorok. Ez azt jelentette, hogy a webes tervezők arra törekedtek, hogy a webes böngészőkben jól nézett oldalakat 12 hüvelykes és 14 hüvelykes monitoron maximalizálják.
Ezekben a napokban a 640x480 felbontás kevesebb mint 1 százalékot tesz ki a legtöbb webhelyforgalomban. Az emberek sokkal nagyobb felbontású számítógépeket használnak, mint például a 1366x768, az 1600x900 és az 5120x2880. Sok esetben egy 1366x768 felbontású képernyő tervezése működik.
A webes tervezés történetében olyan helyen vagyunk, ahol nem kell aggódnunk a felbontás miatt. A legtöbb ember nagyméretű, széles képernyős monitorokkal rendelkezik, és nem növelik a böngészőablakot. Tehát ha úgy dönt, hogy egy olyan oldalt tervez, amely legfeljebb 1366 képpont széles, akkor az oldal valószínűleg jól néz ki a legtöbb böngészőablakban, még nagyobb felbontású nagyméretű monitorokon is.
Böngésző szélessége
Mielőtt elmész gondolkodni "rendben, 1366 képpontnyi oldalamra teszem az oldalamat", még több van ehhez a történethez. Egy gyakran figyelmen kívül hagyott probléma, amikor eldönti a weboldal szélességét, hogy az ügyfelek mennyire tartják meg a böngészőiket. Pontosabban, teljes képernyős méretekkel maximalizálják-e a böngészőiket, vagy kisebb méretűek, mint a teljes képernyő?
Egy olyan informális felmérés során, amely a vállalati szabványos 1024x768-as felbontású laptopot használta, kettő mindegyiket maximálisan kihasználta. A többiek különféle méretű ablakokat nyitottak különböző okokból. Ez azt mutatja, hogy ha a cég intranetjét 1024 képpontos méretűre tervezi, akkor a felhasználók 85 százaléka vízszintesen kell görgetnie az egész oldal megtekintéséhez.
Miután figyelembe veszi azokat a felhasználókat, akik maximalizálják vagy nem, gondolkozzanak a böngésző határain. Minden webböngészőnek van egy görgetősávja és az oldalak határai, amelyek a rendelkezésre álló tárterületet 800-ról körülbelül 740 képpontra vagy kevesebbre csökkentik 800x600-as felbontásban és 980 képponton a maximalizált ablakokon 1024x768-as felbontásban. Ezt úgynevezett böngésző "króm", és el tudja távolítani a használható területet az oldalak tervezéséhez.
Fix vagy folyékony szélességű oldalak
A tényleges numerikus szélesség nem az egyetlen dolog, amit gondolnod kell a weboldal szélességének megtervezésekor. Azt is el kell döntenie, hogy van-e rögzített szélessége vagy folyadékszélessége . Más szavakkal, a szélességet egy meghatározott számra (fix) vagy egy százalékra (folyadékra) kell beállítani?
Rögzített szélesség
A fix szélességű oldalak pontosan olyanok, mint a hangjuk. A szélesség egy adott számmal van rögzítve, és nem változik meg, milyen nagy vagy kicsi a böngésző. Ez jó lehet, ha a tervrajzodnak pontosan ugyanolyannak kell lennie, függetlenül attól, hogy az olvasók böngészői milyen szélesek vagy szűkek, de ez a módszer nem veszi figyelembe az olvasóit. A böngészőkkel szűkebb embereknek vízszintesen kell görgetniük, és a széles böngészővel rendelkező emberek nagy mennyiségű üres helyet kapnak a képernyőn.
Fix szélességű oldalak létrehozásához egyszerűen használjon meghatározott pixelszámokat az oldalosztások szélességéhez.
Folyadékszélesség
A folyékony szélességű oldalak (néha úgynevezett rugalmas szélességű oldalak) a szélességtől függően eltérőek lehetnek. Ez lehetővé teszi olyan oldalak tervezését, amelyek nagyobb hangsúlyt fektetnek ügyfeleire. A folyadékszélesség oldalakkal kapcsolatos probléma az, hogy nehéz lehet olvasni. Ha egy szövegsor szkennelési hossza hosszabb, mint 10-12 szó, vagy kevesebb, mint 4-5 szó, nehezen olvasható. Ez azt jelenti, hogy a nagy vagy kis böngészőablakos olvasóknak problémái vannak.
Rugalmas szélességű oldalak létrehozásához egyszerűen használjon százalékokat vagy ems- t az oldalosztások szélességéhez. Ismerje meg a CSS max-width tulajdonságát is. Ez a tulajdonság lehetővé teszi, hogy szélességet állítson be százalékok között, de korlátozza azt úgy, hogy ne olyan nagy legyen, hogy az emberek nem tudják olvasni.
És a győztes: CSS Media Queries
A legjobb megoldás ezekben a napokban a CSS média lekérdezések és a reaktív kialakítás használata olyan oldal létrehozásához, amely igazodik a böngésző szélességéhez. A reagáló webes tervezés ugyanazt a tartalmat használja, ha olyan weboldalt hoz létre, amely 5120 képpontos felbontásban vagy 320 képpont széles sávban működik. A különböző méretű oldalak eltérőek, de ugyanazt a tartalmat tartalmazzák. A CSS3 médiakérdezésével minden fogadó eszköz a lekérdezést méretével válaszolja meg, és a stíluslap az adott mérethez igazodik.