A webhelyfejlesztési technológia nagyon sokrétű folyamat. Ennek ellenére minden szakasza két fő összetevőre osztható - a funkcionális és a külső héjra. Illetve, ahogy az a webmestereknél megszokott, back-end, illetve front-end. Azok, akik webfejlesztő stúdióktól rendelik meg weboldalaikat, gyakran naivan azt hiszik, hogy érdemes csak a funkcionalitásra koncentrálni, és ez lesz a helyes döntés. De ez nagyon-nagyon ritka esetekben igaz, általában a béta tesztelési szakaszban lévő induló projektekre. Ellenkező esetben a grafikai tervezésnek és a felhasználói felületnek egyszerűen meg kell felelnie a webfejlesztési szabványoknak, és kényelmesnek kell lennie.
Az első sarokkő, amellyel a felülettervező vagy tervező szembesül, a webhely elrendezésének szélessége. Végül is ehhez interfészeket kell rajzolni. Pusztán intuitív módon két megközelítés merül fel – vagy készítsen külön elrendezést minden egyes népszerű képernyőfelbontáshoz, vagy hozzon létre egy webhely verziót az összes kijelzőhöz. És mindkét lehetőség rossz lesz, de először a dolgok.
A webhely szabványos szélessége képpontokbana Runet számára
Az adaptív elrendezés kidolgozása előtt tömegjelenség volt egy ezer pixel szélességű oldal kialakítása. Ezt a figurát egy egyszerű okból választották ki - hogy a webhely bármilyen képernyőhöz illeszkedjen. És ennek megvan a maga logikája, de tegyük fel, hogy az embernek még mindig van legalább egy HD monitorja az asztalon. Ebben az esetben az elrendezés egy apró csíknak tűnik a képernyő közepén, ahol minden egy kupacban van összeragadva, az oldalakon pedig egy hatalmas kihasználatlan hely van. Most tegyük fel, hogy egy személy egy 800 képpontos széles képernyővel rendelkező táblagépen éri el webhelyét, és a beállításokban be van jelölve a „Teljes webhely megjelenítése” lehetőség. Ebben az esetben az Ön webhelye is hibásan jelenik meg, mivel egyszerűen nem fér bele a képernyőbe.
Ezekből a megfontolásokból arra a következtetésre juthatunk, hogy a fix szélesség az elrendezéshez biztosan nem megfelelő számunkra, és más utat kell keresnünk. Elemezzük egy külön elrendezés ötletét minden képernyőszélességhez.
Elrendezések minden alkalomra
Ha stratégiaként azt választotta, hogy a piacon lévő összes képernyőmérethez hozzon létre elrendezést, akkor az Ön webhelye lesz a legegyedibb az egész Interneten. Hiszen ma egyszerűen lehetetlen lefedni az eszközök teljes skáláját, megpróbálva minden opcióhoz finomhangolni. De ha a monitorok és készülékek képernyőinek legnépszerűbb felbontásaira összpontosít, akkor az ötlet nem rossz. Egyetlen hátránya a pénzügyi költségek. Végül is, ha egy interfész tervező, egy tervező és egy kódoló 5-6 alkalommal kénytelen ugyanazt a munkát elvégezni, a projekt költségearánytalanul magasabb, mint az eredetileg tervezett ár.
Ezért csak egyoldalas oldalak büszkélkedhetnek a különféle képernyőkre való változatok bőségével, amelyek célja egy termék eladása, és az biztos, hogy jól csinálják. Nos, ha nem egy ilyen célponttal rendelkezik, hanem egy többoldalas webhely, akkor érdemes továbbgondolnia.
Legnépszerűbb webhelyméretek
A két véglet közötti kompromisszum az elrendezés három vagy négy képernyőmérethez való megjelenítése. Ezek között kell lennie a mobileszközök elrendezésének. A többit kis, közepes és nagy asztali képernyőkhöz kell igazítani. Hogyan válasszuk ki a webhely szélességét? Az alábbiakban bemutatjuk a HotLog szolgáltatás 2017. májusi statisztikáit, amely megmutatja a különböző készülékek képernyőfelbontásainak népszerűségének megoszlását, valamint ennek a mutatónak a dinamikáját.
A táblázatból megtudhatja, hogyan határozhatja meg a használni kívánt oldal méretét. Ezen túlmenően arra a következtetésre juthatunk, hogy ma a legelterjedtebb formátum az 1366 x 768 pixeles képernyő. Az ilyen képernyőket olcsó laptopokba telepítik, így népszerűségük természetes. A következő legnépszerűbb a Full HD monitor, amely a videók, játékok, így a weboldalak elrendezésének aranystandardja. A táblázat további részében a mobileszközök 360 x 640 pixeles felbontását, valamint az asztali és mobil képernyők különféle lehetőségeit láthatjuk utána.
Elrendezés tervezése
SzóvalA statisztikák elemzése után megállapíthatjuk, hogy az optimális oldalszélességnek 4 változata van:
- Laptop verzió 1366 képpont szélességgel.
- Full HD verzió.
- 800 képpont széles elrendezés kis asztali monitorokon való megjelenítéshez.
- A webhely mobil verziója – 360 képpont széles.
Tegyük fel, hogy eldöntöttük, hogy milyen méretet használjunk a webhely generált forrásához. De egy ilyen projekt még mindig költséges lenne. Nézzünk tehát további lehetőségeket, ezúttal rögzített szélesség használata nélkül.
Az elrendezés rugalmassá tétele
Létezik egy alternatív megközelítés, amikor csak a minimális képernyőmérethez érdemes alkalmazkodni, és maguk az oldalméretek is százalékosan lesznek beállítva. Ugyanakkor az olyan interfész elemek, mint a menük, gombok, logó abszolút értékben állíthatók be, a képpontban kifejezett képernyőszélesség minimális méretére fókuszálva. A tartalommal rendelkező blokkok éppen ellenkezőleg, a képernyőterület szélességének megadott százaléka szerint megnyúlnak. Ez a megközelítés lehetővé teszi, hogy többé ne tekintse a webhelyek méretét korlátozónak a tervező számára, és ügyesen legyőzze ezt az árnyalatot.
Mi az aranymetszés, és hogyan alkalmazható a weboldal elrendezésére?
Még a reneszánsz korában is sok építész és művész igyekezett tökéletes formát és arányt adni alkotásainak. Az ilyen arány értékeivel kapcsolatos kérdésekre a válaszokért minden tudomány királynőjéhez, a matematikához fordultak.
Az ókor óta feltalálták azt az arányt, amelyet szemünk a legtermészetesebbnek és legelegánsabbnak érzékel,mert a természetben mindenütt jelen van. Az ilyen arány képletének felfedezője egy Phidias nevű tehetséges ókori görög építész volt. Kiszámította, hogy ha az arány nagyobb része a kisebbhez kapcsolódik, mint az egész a nagyobbhoz, akkor ez az arány fog a legjobban kinézni. De ez a helyzet akkor, ha aszimmetrikusan szeretné felosztani az objektumot. Ezt az arányt később aranymetszetnek nevezték, ami még mindig nem becsüli túl jelentőségét a kultúra világtörténetében.
Vissza a webdesignhoz
Nagyon egyszerű – az aranymetszés segítségével olyan oldalakat tervezhet, amelyek a lehető legkellemesebbek lesznek az emberi szem számára. Az aranymetszés képlet definíciója szerint számolva az 1-es irracionális számot kapjuk, 6180339887 …, de a kényelem kedvéért használhatunk kerekített 1, 62 értéket is. Ez azt jelenti, hogy oldalunk blokkjai 62-esek legyenek. % és 38%-a az egésznek, függetlenül attól, hogy milyen méretű a generált forrás az Ön által használt webhelyhez. Ezen a diagramon láthat egy példát:
Használjon új technológiákat
A modern weboldal-elrendezési technológiák lehetővé teszik a tervező és tervező gondolatának pontos közvetítését, így most merészebb ötletek megvalósítását engedheti meg magának, mint az internetes technológiák hajnalán. Többé nem kell alaposan gondolkodnia azon, hogy mekkora legyen a webhely. Az olyan dolgok megjelenésével, mint a blokk adaptív elrendezés, a tartalom és a betűtípusok dinamikus betöltése, a webhelyfejlesztés sokkal kellemesebbé vált. Végül is ezek a technológiák azokkevesebb korlátozás, bár még mindig érvényben vannak. De mint tudod, korlátok nélkül nem lenne művészet. Azt javasoljuk, hogy egy igazán kreatív tervezési megközelítést alkalmazzon – az aranymetszés. Ezzel hatékonyan és szépen kitöltheti a munkaterületet, függetlenül attól, hogy milyen webhelyméreteket állít be a sablonokban.
Hogyan lehet növelni a webhely munkaterületét
Jó esély van arra, hogy nem lesz elég helye ahhoz, hogy a felhasználói felület összes elemét elférjen egy kis elrendezésben. Ebben az esetben el kell kezdenie kreatívan vagy még kreatívabban gondolkodni, mint korábban.
Maximálisan szabadítson fel helyet a webhelyen, ha elrejti a navigációt a felugró menüben. Logikus, hogy ezt a megközelítést nem csak mobileszközökön, hanem asztali számítógépeken is alkalmazzuk. Végül is a felhasználónak nem kell állandóan azt néznie, hogy milyen címsorok találhatók a webhelyén – a tartalomért jött. És tiszteletben kell tartani a felhasználó kívánságait.
A menü elrejtésének jó módja a következő elrendezés (az alábbi kép).
A piros terület felső sarkában egy kereszt látható, amelyre kattintva a menü egy kis ikonba rejtőzik, így a felhasználó egyedül marad a weboldal tartalmával.
Azonban ez nem kötelező, elhagyhatja a navigációt, amely mindig látható lesz. De gyönyörű dizájnelemet is készíthet belőle, nem csak az oldalon található népszerű linkek listáját. Használjon intuitív ikonokat a szöveges hivatkozások mellett vagy akár helyett. ez ugyanazlehetővé teszi webhelye számára, hogy hatékonyabban használja ki a képernyőterületet a felhasználó eszközén.
A legjobb webhely reszponzív
Ha nem tudja, melyik elrendezést válassza az oldalhoz, akkor minden egyszerű az Ön számára. Ha szeretné megtakarítani a fejlesztési költségeket, és ugyanakkor ne veszítse el közönségét egyes eszközök rossz elrendezése miatt, használjon reszponzív tervezést.
A reszponzív dizájn olyan kialakítás, amely egyformán jól néz ki különböző eszközökön. Ez a megközelítés lehetővé teszi, hogy webhelye érthető és kényelmes legyen még laptopon, táblagépen vagy okostelefonon is. Ez a hatás a képernyő munkaterületének szélességének automatikus megváltoztatásával érhető el. A reszponzív stíluslapok használatával a lehető legjobb döntést hozza meg.
Mi a különbség a reszponzív tervezés és a webhelyverziók között
A reszponzív kialakítás abban különbözik az oldal mobil verziójától, hogy az utóbbi esetben a felhasználó az asztalitól eltérő html kódot kap. Ez hátrány a szerver teljesítmény-optimalizálása, valamint a keresőoptimalizálás szempontjából. Ezenkívül nehezebbé válik a webhely különböző verzióira vonatkozó statisztikák kiszámítása. Az adaptív megközelítésnek nincsenek ilyen hátrányai.
A különböző eszközök reakcióképességét a megadott szélesség százalékos elrendezésével vagy blokkoknak a rendelkezésre álló helyre való áthelyezésével érik el (okostelefonon függőleges síkban ahelyettvízszintes az asztalon), vagy egyedi elrendezések létrehozása a különböző képernyőkhöz.
Tudjon meg többet a reszponzív tervezésről és fejlesztésről oktatóanyagainkban.
