Standard méretek oldalak: jellemzők, követelmények és ajánlások

Technológiai fejlesztési weboldalak - egy nagyon sokoldalú folyamat. Mégis minden szakaszában lehet osztani két fő összetevője - a funkcionális és egy külső burkot. Vagy, mint a közepes webmaster Beg End és a Front End volt. Az emberek, akik vásároltak a honlapok webfejlesztés stúdiók, gyakran naivan úgy vélik, hogy szükséges, hogy csak a funkcionális, és ez lesz a helyes döntés. De ez igaz egy nagyon-nagyon ritkán, általában az induló projektek szakaszában béta tesztelés. A többi grafikai tervezés és a felhasználói felület egyszerűen meg kell felelniük az előírásoknak webfejlesztés és kényelmes.

Az első alapköve néző felület tervezője, vagy tervező - a szélessége a webhely elrendezését. Végtére is, meg kell rajzolni interfészek neki. Szemléletesen kétféle megközelítés létezik - vagy hogy külön tagolást minden népszerű képernyőfelbontás, vagy létrehozhat egy változata a helyszínen, az összes térkép. Mindkét lehetőség lenne rossz, de az első dolog az első.

Szabványos szélessége pixelben a helyszínen, amit valaha is szüksége

Kialakulása előtt adaptív elrendezése tömeges jelenség volt a fejlődés egy helyszínen több ezer pixel széles. Ez a szám azért választottuk, egy egyszerű okból -, hogy a helyszínen került bármelyik képernyőn. És van egy bizonyos logika, de tegyük fel, hogy egy személy még legalább HD-monitort az asztalon. Ebben az esetben, az elrendezést úgy tűnik, apró csíkot a képernyő közepén, ahol minden van öntve egy halom, és az oldalán a hatalmas, nem tér. Most tegyük fel, hogy egy személy lépett a honlap egy tablettát egy képernyő 800 pixel széles, és be van jelölve a beállítások „Itt a weboldal a teljes verzió.” Ebben az esetben a honlapon is hibásan jelenik meg, egyszerűen nem fér bele a képernyőn.

Ezekből a megfontolásokból arra lehet következtetni, hogy a rögzített szélességű az elrendezés, csak nem illik, és meg akarja találni egy másik utat. Elemezzük az ötlet egy külön elrendezést minden képernyő szélességét.

Elrendezések minden alkalomra

Ha úgy döntött, mint a stratégia, hogy az elrendezést minden méretben kapható a piacon elérhető, akkor a helyén lesz a legegyedibb az interneten. Elvégre, ma ez egyszerűen lehetetlen, hogy fedezze a teljes körű eszközök egy kísérletet, hogy pontosan beállítását minden lehetőséget. De ha összpontosítani a legnépszerűbb monitor felbontás és képernyő készülékek, az ötlet jó. Az egyetlen hátránya - a pénzügyi költségeket. Végtére is, amikor a tervező felület tervező és kódoló kénytelen lesz 5 vagy 6 alkalommal elvégezni ugyanazt a munkát, a projekt költsége aránytalanul eredetileg ültetett költségvetési áron.

Ezért büszkélkedhet rengeteg verzió a különböző képernyők lehet, kivéve, hogy a telek-odnostranichniki melynek célja - eladni egy terméket, és biztos, hogy jól csinálni. Nos, ha nem egy ilyen Landing, a multi-site, magától értetődik, tovább.

A legnépszerűbb méretű oldalak

A kompromisszum a két véglet között van egy rajz az elrendezés három vagy négy méretben kapható. Közülük az egyik legyen egy elrendezést a mobil eszközök. A többi hozzá kell igazítani a kis, közepes és nagy asztali képernyő. Hogyan válasszuk ki a szélessége az oldalon? Az alábbiakban bemutatunk HotLog szolgáltatás statisztikák május 2017, amely megmutatja nekünk a megoszlása a népszerűsége a különböző képernyő felbontása a készülék, valamint a változás dinamikáját ez a mutató.

A táblázat alapján lehet tanulni, hogyan kell meghatározni a méretét a helyszínen kívánja használni. Ezen kívül azt a következtetést lehet levonni, hogy a leggyakoribb ma a képernyő méret 1366 x 768 pixel. Ezek a képernyők vannak telepítve a költségvetés laptop, így a népszerűsége természetes. A következő legnépszerűbb egy Full HD-monitor, amely az arany standard filmeket, játékokat, és ezért létre webhelyelrendezést. További táblázatban látjuk lehetővé teszi a mobil eszközök 360 x 640 pixel, valamint különböző kiviteli asztali és mobil képernyők utána.

elren-

Tehát, miután elemezte a statisztikát, arra lehet következtetni, hogy az optimális szélessége a helyszínen 4 eltérések:

1. Verzió laptopok 1366 pixel széles.
2. Full HD-változata.
3. 800 képpont széles méretű elrendezés kijelző kis asztali monitorok.
4. Mobile változata az oldalon - 360 pixel széles.

Tegyük fel, hogy úgy döntöttünk, hogy mit szeretne használni a méret generált forráskód az oldalon. De egy ilyen projekt még mindig költséges. Tehát úgy több lehetőség, ezúttal használata nélkül fix szélességű.

Készíts egy rugalmas elrendezési

Van egy másik megközelítés, hogy csak fel kell beállítani a legkisebb méret a képernyő, és a puszta mérete oldalakat fogják kérni százalék. Ebben az esetben a felület elemeit, mint a menük, gombok és logók, lehet meghatározni abszolút összpontosítva minimális mérete a szélessége a képernyő pixel. Blokk tartalmát, épp ellenkezőleg, megnyúlik szerint a megadott százalékát a szélessége a képernyő felületét. Ez a megközelítés lehetővé teszi nem érzékeli a méret a helyszínen korlátait a tervező és a tehetség legyőzni ezt árnyalatot.

Mi az aranymetszés, és hogyan kell használni a weboldalakat, hogy az elrendezés?

Még a reneszánsz sok építészek és művészek próbált adni alkotásait a tökéletes forma és aránya. Választ a kérdésekre a következményei az ilyen arányban fordultak a királynő minden tudomány - matematika.

Amióta a napon az ókor találta az arányban, amelyet a szem érzékeli, mint a legtöbb természetes és elegáns, mert mindenütt a természetben. Discoverer a képlet volt ez az arány egy tehetséges görög építész nevű Phidias. Megállapították, hogy ha a legtöbb arányok olyan csekély, mint egész egy nagyobb, akkor ez az arány már meg is. De ebben az esetben, ha szeretné osztani aszimmetrikusan objektumot. Ez az arány később vált az úgynevezett aranymetszés, hogy még mindig nem túlbecsülni annak jelentőségét, hogy a világ művelődéstörténet.

Térjünk vissza a web design

Ez nagyon egyszerű - segítségével az aranymetszés, akkor design oldalakat, amelyek a leginkább tetsző az emberi szem számára. Számított az alábbi képlet szerint az aranymetszés, azt látjuk, az irracionális szám 1,6180339887 ..., de az egyszerűség kedvéért akkor a kerekített értéke 1,62. Ez azt jelenti, hogy mi az oldal blokkokat kell 62% és 38% az egész, nem számít, hogy milyen méretű generált forráskód az oldalon, amit használ. Példa látható, a következő séma szerint:

Az új technológiák alkalmazása

A modern technológia elrendezése weboldalak lehetővé teszi, hogy pontosan közvetíteni ötleteket a tervező és a tervező, így most megengedheti magának a végrehajtását merészebb ötletek, mint a hajnal az internetes technológia. Többé nem kell sok a puzzle, hogy mit kell tenni a mérete egy oldalon. Az Advent olyan dolgok, mint blokk alkalmazkodó elrendezést, dinamikus terhelés a tartalom és a betűtípusok, weboldal fejlesztés vált sokszor még élvezetesebbé. Végül is, ezek a technológiák kevesebb korlátozást, noha vannak. De mint tudjuk, korlátozás nélkül, nem lenne művészet. Javasoljuk, hogy használjon egy igazán kreatív megközelítése tervezése - az aranymetszés. Vele, akkor képes lesz arra, hogy hatékonyan és szépen kitölti a munkaterület, nem számít, hogy milyen méretű vagy helyek, amit kért a sablonokat.

Hogyan növelhető a munkaterületet

Esélye van, hogy nem lesz elég hely az összes felület elemeit az elrendezés a kis méret. Ebben az esetben meg kell kezdeni gondolkodni kreatív, vagy még több kreatív, mint te előtt.

Maximum szabadítson fel helyet a helyszínen lehetséges, bujkál a navigációs a pop-up menüben. Ez a megközelítés logikus, hogy ne csak a mobil, hanem az asztalon. Végtére is, a felhasználónak nem kell minden alkalommal, hogy nézd meg, mi van fejezetek a webhelyen - eljött a tartalom. A felhasználó szeretné tartani.

Egy példa a jó módja annak, hogy elrejtse a menü a következő elrendezés (az alábbi képen).

A felső sarokban a piros terület, akkor láthatjuk, egy kereszt, kattintson a menü, amely elrejti egy kis ikon, így a felhasználó csak a weboldal tartalmát.

Ez azonban nem kötelező, akkor hagyja a navigációs hogy mindig szem előtt. De lehet, hogy ez egy szép design elem, nem csak a hivatkozások listáját a népszerű site. Az intuitív ikonok mellett szöveges linkeket, vagy akár helyettesítheti azokat. Azt is lehetővé teszi a webhely, hogy hatékonyabb felhasználását képernyő helyet a készüléken.

A legjobb honlap - adaptív

Ha nem tudja, melyiket válassza az elrendezés a helyén, minden csak az Ön számára. Menteni a fejlesztési költségeket és ugyanakkor nem veszíti el a közönség, mert a rossz elrendezés valamilyen eszközt használjon reagáló web design.

Adaptive úgynevezett design, hogy néz különböző eszközökön egyformán jól. Ez a megközelítés lehetővé teszi a webhely, hogy egyértelmű és egyszerű, még egy laptop, legalább a táblán, még a smartphone. Úgy ért ez a hatás annak köszönhető, hogy automatikusan változik a munkaterületet a képernyő szélességét. Adaptív stíluslapok az oldalon, szedi a helyes döntés lehetséges.

Mi különbözteti meg az adaptív tervezés a rendelkezésre álló különböző változatai a honlapon

Az adaptív tervezés eltér a mobil oldalon, hogy az utóbbi esetben a felhasználó kap egy html-kódot, amely eltér az asztalon. Ez hátrányos a szempontból teljesítményének optimalizálása a szerver, valamint a kereső optimalizálás. Ezen túlmenően, annál nehezebb lesz, hogy a statisztikákat szerint különböző változatai a helyszínen. Adaptív megközelítés mentes hiányosságokat.

Az alkalmazkodóképesség a különböző eszközöket annak révén érhető el, hogy az elrendezés szélességét vagy százalékok keresztül szállítási blokkok a rendelkezésre álló hely (a függőleges síkban, hanem a vízszintes okostelefon asztali), vagy az egyes elrendezések létrehozásával különböző képernyőkön.

Akkor többet reagáló tervezése és fejlesztése tudsz könyvekből.