Az adaptív webhelytervezés egy kényelmes rendszer ugyanazon webhely különböző típusú eszközökön való online megjelenítéséhez. Egyszerűen fogalmazva, ez egy weboldal megtekintésének lehetősége laptopon, okostelefonon és egyéb kütyüben.
A webes reszponzivitás azóta elengedhetetlenné vált, amióta az emberek különféle formátumú internet-kompatibilis kütyükkel rendelkeznek. Cégek, webáruházak, de még csak informatív oldalak is igyekeznek közönségük kedvében járni, ehhez minden lehetséges módon alkalmazkodva. A reszponzív kialakítás megoldja a kényelem problémáját, ezért nélkülözhetetlen munkadarab.
A reszponzív webdizájn jellemzői
A tervezés kényelmét több fő kritérium jellemzi.
- Méret. A reszponzív weboldal dizájnnak kisebb eltéréseket kell mutatnia az oldal különböző eszközökön való megjelenítése során, így a megtekintett képek, szövegek és egyéb elemek méretének meg kell egyeznie maguknak az eszközöknek a méretével. Ehhez a webfejlesztők úgy alakítják át a dizájnt, hogy annak több nézetű változata legyen.
- Tartalom adaptációja. Az old alt kitöltő anyagok (képek, videókés egyéb multimédiás elemek) is meg kell felelniük a szükséges képernyőfelbontásoknak a megjelenítés minőségének elvesztése nélkül.
- Rugalmas tervezés. Olyan elemek bevonása a fejlesztésbe, amelyek lehetővé teszik a webhely kialakításának gyors módosítását, amikor megváltoztatja a megtekintett webold alt. Például a felhasználó felfelé és lefelé görgeti az old alt, navigál a különböző szakaszokon, vagy módosítja a képernyő helyzetét függőlegesről vízszintesre és fordítva.
- Eszközök egyszerűsítése a jobb használhatóság érdekében.
- A lényegtelen blokkok elrejtése a kisebb képernyőkön.
Alapok
A webhelykészítés egyértelműen a programozási nyelvekhez kapcsolódik, mert egyszerűen nem megy nélkülük. A HTML és CSS használatával a böngésző felismeri az objektumok (szövegek, illusztrációk, videók) összetételét és sorrendjét – így jön létre az oldal.
A CSS felelős a színekért, a stílusokért, a méretekért, a betűtípusokért, az igazításokért, a kitöltésért, a háttérelemekért, a formákért stb. A HTML felelős a webhely általános tartalmáért és szerkezetéért. Így egy webes erőforrás a két legfontosabb leírási módszer összesítéséből épül fel.
A CSS viszont nélkülözhetetlen tervezési eszköz. A HTML-nél jobb funkciók széles készletével rendelkezik:
- Konzisztens tervezést biztosít több oldalon, a webhely megjelenését, és vezérli a HTML-dokumentumok megjelenítését.
- Lehetőséget ad a tervezés és a tartalom egyidejű elkészítésére.
- Több stílust és lehetőséget alkalmazmegtekintés különböző eszközökön.
- Bonyolult tervezési döntéseket hoz.
- Nagy sebesség jellemzi.
Webhely létrehozásához ismernie kell néhány alapfogalmat.
A CSS-választót a tulajdonságokat és a formázási beállításokat meghatározó stílus neve jelöli. Megmondja a böngészőnek, hogy a tulajdonságok melyik elemre vonatkoznak.
Az ingatlan szerkezeti egység. Meghatározza a külső paramétereket (méret, hely, szín, forma stb.), és egy meghatározott kódban fejezi ki.
Van egy sor meghatározott CSS-tulajdonság, amely egyetlen objektumot ír le megjelenésében és elhelyezkedésében.
Ezek az elemek együtt a következő sémát alkotják:
Selector { property1: value; tulajdonság2; érték }.
Elrendezési méretek és felbontások
A tervezés fejlesztése az elrendezés Photoshopban vagy más grafikus programokban történő elkészítésével kezdődik. A kényelem érdekében a moduláris rács speciális jelöléseit vezetik be a vászonba, és speciális behúzásokat figyelnek meg. Így a webdesigner megmutatja az elrendezéstervezőnek a leendő webhely felépítésének és a webelemek helyes elrendezésének elveit.
Reszponzív webdesign felbontások és méretek a fő eszköztípusokhoz:
- Ez a kialakítás megfelel a mobilengedéllyel történő munkakezdés elvének. Az okostelefon elrendezése 460 × 960 px méretben készült.
- A táblagép elrendezésének mérete 768 × 1024.
- A notebook mérete 1280 × 802.
- A számítógép mérete 1600 × 992.
A webhely mobil verziójábana lehető legegyszerűsíteni kell, az összes fő funkció megtartása mellett. Ha az elrendezést egy online áruházhoz készítik, a használat minden egyszerűsítésével rendelkeznie kell fő leírással, termékkatalógussal, rendelési lehetőséggel, bevásárlókosárral stb. - minden szükséges elemmel a teljes értékű működéshez, mint a teljes formátumú megtekintésnél PC-n. A mobil verzió kényelme, hogy itt elkerülheti a felesleges oldalakat, így időt takaríthat meg a betöltés során.
Az adaptív tartalomban a html kód használatával elrejthet néhány olyan elemet, amelyekre nincs igazán szükség. Például nagy felbontásban a webhely megjelenít egy termékkártyát a leírással, az árral, a szállítási információkkal és a „Kosárhoz” való hozzáadási lehetőséggel. Mobilfelbontásban a folyamat leegyszerűsödik egy fényképre, egy árra és egy vásárlás gombra.
A reszponzív tervezés közepes és minimális felbontásának figyelembe kell vennie a felhasználó általi könnyű olvasást és megtekintést.
Elrendezés
Az adaptív tervezési elrendezés célja egy rugalmas elrendezés, vagy ahogy szokták mondani: "gumisablon" létrehozása. A lényeg nem egy számjegyű oldalméretekben van, hanem a sablon arányos tömöríthetőségében, hogy minden eszközön könnyen megtekinthesse.
Főleg CSS-re épül. A fejlesztés során meghatározásra kerülnek a képernyőméretek ellenőrzési pontjai. Így a fennmaradó objektumok szélessége meghatározásra kerül. Ehhez az oldal szélességét a css max-width tulajdonsága állítja be, ezektől a kritériumoktól függően a többi elem mérete százalékban kerül kiválasztásra. Például a blokk mérete a főoldalonoldal 600 képpont, az oldalsáv blokk (webhely oldalsáv) szélessége pedig 400 képpont, a tartalom szélessége 60%, az oldalsáv szélessége 40%.
Többféle reszponzív elrendezés létezik. Mindegyik egyedileg kerül kiválasztásra, a jellemzőktől és a felépítéstől függően.
Megtekintések:
- Egy olyan elrendezéstípus, amely lehetővé teszi a blokkok becsomagolását, ha a képernyő felbontása csökken. A többoszlopos webhelyeken a további blokkok a képernyő aljára kerülnek.
- Ha minden engedélyhez külön mintát dolgoznak ki. Az ilyen típusú reszponzív kialakítás hosszabb időt vesz igénybe, de a leginkább olvasható.
- Egyszerű kialakítás, amelynek célja az összes elem méretezése. Nem rugalmas.
- A paneltípus kényelmesen használható mobilalkalmazásokban, amikor a képernyő helyzetének megváltoztatásakor további funkciók jelennek meg.
A reszponzív rétegek létrehozása csak egy része a munkának. Az adaptív képek egy külön eset, amelynek megvannak a maga problémái és megoldási módjai.
Egyetlen képnek világosan kell megjelennie különböző képernyőfelbontásoknál. Itt van egy probléma - hogyan biztosítható, hogy a kép mindig ugyanaz maradjon, függetlenül a felbontás változásától. Ebben az esetben egy egyszerű CSS-kód megadása nem elegendő.
Példa: img {max-width: 250px;} - itt olyan módszert kell alkalmazni, amelyben a képet tartalmazó tároló mérete korlátozott, és nem maga a kép. Valahogy így fog kinézni: div img {max-width: 250px;}. Ez a módszer megoldja a problémátkisméretű képek elrendezése, de nem alkalmas nagyméretű illusztrációkhoz.
Ezért sok fejlesztő előnyben részesíti a javascript nyelvek használatát, amelyek lehetővé teszik bármilyen kép adaptálását a szerver túlterhelése nélkül. A Javascript számos alternatív szkriptet kínál.
A reszponzív elrendezés előnyei és hátrányai
Pozitívumok:
- Mentsd el az összes elem helyét. Ez akkor kényelmes, ha a felhasználó hozzászokott a webhely teljes verziójához.
- Domainok és címek mentése.
- Teljes testreszabás más engedélyformátumokhoz.
Negatívok:
- A funkcionális rugalmasság elveszett
- Bármilyen informatív túlterhelés tele van egy webes erőforrás hosszú elindításával, ami sok felhasználót arra kényszerít, hogy gyorsabban váltson.
Webhely készítés
A webhely szerkezete több részre és blokkra van felosztva. Hagyományosan az elrendezés a webhely felső részéből (fejléc), logóból, menüből, tartalomblokkból és a webhely utolsó részéből (például részletes elérhetőségekből) áll. Lássuk, hogyan készítsünk reszponzív webold alt egy egyszerű sablonból.
Kiegészítő címkék az íráshoz:
- wrapper - címke, amely az összes sablonelemet egyesíti;
- header h1 - logó;
- header – fejléc a menühöz és más fontos elemekhez;
- tartalom - blokk;
- colLeft - tartalom mérete;
- colRight - oldalsáv (oldalsó oszlop);
- lábléc – a webhely utolsó része;
- média képernyő - készletekkívánt felbontás.
Webhely írásakor ezek az elemek eltérő sorrendben mozoghatnak, az igénytől függően. Például nagy felbontás esetén a menü függőlegesen is megjelenhet. A mobil verzióban az elrendezés úgy építhető fel, hogy a menü vízszintes helyzetben csúszik ki.
- nézetablak - egy címke, amely lehetővé teszi a szöveg méretének elmentését a terv kisebb változatában. A. címkék között található
- max-width – a webhely optimalizálása, hogy elkerülje a nyúlást 1000 képpont feletti felbontásnál.
Az elrendezés megvalósítása során a jQuery könyvtár sokat segít, ha módosítani kell a blokkok stílusát és szerkezetét.
Mi a különbség a reszponzív és a mobil design között
A teljes megértés érdekében nézzünk meg néhány szemléltető példát, mivel a két fogalom összetévesztése nem ritka.
Meg kell értenie, hogy a mobil verzió az elsődleges webhely analógja egy aldomainnel. Az oldal külső megjelenése teljesen megismétli a stílust és a funkcionalitást, ugyanakkor szerkezete és tartalma eltérhet a fő verziótól, mivel a verzió a szükséges elemekre van levágva.
A reszponzív kialakítás minden eszközfelbontáshoz optimális. Méretezhető, és a megtekintési körülményektől függetlenül megfelelően jelenít meg.
Ez az oldal két különböző bemutatása, amelyek körül fáradhatatlanul dúlnak a viták, hogy melyik a jobb. Meg kell jegyezni, hogy még nem született határozott döntés. Valaki dicséri ezt a dizájnt, rámutatva a divatirányzatra és sok előnyére. A mobil verziónak számos olyan előnye is van, amelyekkel a reszponzív dizájn nem rendelkezik. Ezért először is meg kell értenie az alapvető szükségleteket.
Előnyök
Miben jobb a reszponzív dizájn, mint a mobil?
Sokoldalúság. Korunkban, a piac ilyen rohamos növekedése mellett egyszerűen szükséges az információkat más módon, a fogyasztók kívánságait kielégítő módon közölni. A reszponzív tervezés megoldja ezt a problémát.
Hatékony promóció a keresőmotorokban. Amit nem lehet az adaptív eszköz fő előnyeinek tulajdonítani. A keresőmotorok inkább reszponzív webhelyeket kínálnak a felhasználóknak.
Használhatóság. A reszponzív dizájnt általában a legjobb tervezési megoldások szerint alakítják ki, ami szép ajándék a felhasználók vizuális észlelésének.
Könnyű és egyszerűség a projekt megvalósításában és használatában egyaránt.
Jó konverziós arány. Mivel az adaptív kialakítással több lehetőség nyílik a megjelenítésre, maga az átalakítás növekszik.
Gazdaság. Viszonylag olcsóbb, mint egy külön mobil verzió létrehozása és reklámozása.
A mobilverzió előnyei és hátrányai
A reszponzív mobiltervezés létrehozása sokoldalúságot és következetességet igényel. Mindenekelőtt ajánlatos részletesen kiírni a feladatkört, ami természetesen segít elkerülni a felesleges munkát és időt takarít meg, valamint figyelembe veszi annak a szervernek a tulajdonságait, amelyen az old alt tárolni fogják..
A mobilreszponzív tervezésnek vannak bizonyos előnyei és hátrányai is.
Előnyök:
- Ha van kész oldala, akkor nincs szükség a mobilverzió dizájnjának fejlesztésére a semmiből. Csak néhány változtatást lehet végrehajtani, ezzel felszabadítva ezt az elrendezést a szükségtelen funkcióktól.
- Mindenféle egyszerűsítés miatt a mobil verzió letöltéskor gyorsabbnak számít.
- A felhasználó minden tartalomban a legfontosabb információt látja.
- Gyors megvalósítás. Vannak olyan beépülő modulok, amelyekkel mobiladaptációt valósíthat meg, még akkor is, ha nem ismeri a címkéket és kódokat.
- A keresőmotorok választása az adaptív verziókat részesíti előnyben, mert ezek elemzése kevesebb időt vesz igénybe.
Hátrányok:
- Nem minden mobilverzió egyezik a mobileszközök felbontásával. Az oldal természetesen megnyílik, de a képernyő felbontása nem mindig egyezik az elrendezéssel. Néha egy jól megtervezett okostelefon-kialakítás másképp néz ki, ha táblagépként nyitják meg.
- A mobilverziókhoz külön fizetős domain szükséges.
- Van néhány kisebb probléma a tartalom közzétételével. Ha több verzió van egyszerre, akkor a tartalmat egyszerre kell minden formátumhoz igazítani. Az új anyagok beküldése a főoldalon és a mobil verzióra másolása lopásnak minősül. A probléma elkerülése érdekében előfordulhat, hogy bizonyítania kell az erőforrások kapcsolatát.
Végrehajtási módszerek
Fő megvalósítási módszerek:
- Az elrendezések és az elrendezés tervének elkészítése után a rendszer betölti a kívánt méretre aüzemeltetői webhely és a fő kód. Ez egy klasszikus módszer, amelyet közepes és kis verziók (táblagépek, okostelefonok stb.) készítésekor használnak.
- A BootStrap az adaptációs eszközök egyszerű és áttekinthető készlete. Alkalmas változatok létrehozására céloldalhoz és más nem túl bonyolult webes projektekhez. Jó lehetőséget ad sok különböző stílus alkalmazására az interfész funkciókban.
- A Responsive Grid System sokoldalú eszközök népszerű készlete. Könnyen alkalmazható és nem igényel mély ismereteket. Sokféle infografikát tartalmaz.
- GUMBY – rugalmas válaszkészséggel és kiváló szerszámokkal büszkélkedő CSS-keretrendszer.
- Cookie-k – lehetővé teszik reszponzív képek megvalósítását. Automatikusan kíséri a böngésző által kért fájlokat.
- Az ExpressionEngine egy másik módja a reszponzív képek létrehozásának. Meghatározza, hogy az eszköz mobil-e, és képes-e a képeket a kívánt felbontásra módosítani.
- ProtoFluid – Gyors prototípuskészítést biztosít. Mindenféle eszközhöz alkalmas.
