itthon > Windows 10 > Stílusok az adaptív elrendezéshez. Adaptív elrendezés: leckék vagy egyenesen csatába? Nehéz elsajátítani az adaptív elrendezést?


Stílusok az adaptív elrendezéshez. Adaptív elrendezés: leckék vagy egyenesen csatába? Nehéz elsajátítani az adaptív elrendezést?




Ahhoz, hogy az oldal elrendezése jól nézzen ki iPhone-on vagy táblagépen, ezekhez az eszközökhöz kell igazítani, és fontos, hogy ezt hatékonyan tegyük...

Adaptív weboldal elrendezés (néha mobilbarátnak is nevezik) – RÉSZLETES és lépésről lépésre, mint a leckében:

Kérjük, vegye figyelembe: a Yandexnek és a Google-nak saját eszközei vannak, amelyekkel ellenőrizheti a webhely alkalmazkodóképességét. A Yandex Webmaster új verziójában ez így található: eszközök - mobil oldalak ellenőrzése.

Ha szeretné tudni, hogyan készítsen reszponzív weboldaltervezést, akkor ezt alább és a példákban részletesen leírjuk, DE, ha nincs jártassága a css-sel való munkavégzésben, akkor ez nehezebb lesz. Vagy a programozója vagy webmestere megteheti ezt.

Reszponzív webhelytervezés - az oldalablak szélességének, valamint az oszlopok és oldalsávok szélességének %-ban, adaptívban - px-ben történő megadásával.

Kérjük, vegye figyelembe: ha van egy népszerű motorja az oldala számára, például a wordpress, akkor nem fáj a feje az adaptív kialakításnak - ott minden néhány egérkattintással megtörténik - a beépülő modult egyszerűen telepítik és aktiválják, és ennyi. MINDEN). Például a WP-hez - WPtouch-ot használtam - nagyon jó, de ha teljes munkaidős programozója van, akkor jobb, ha ezt a pillanatot egyénileg csinálja.

Meg kell értened, hogy alapvetően az adaptív elrendezésnél a következőket gyakran manipulálják: szélesség (az elem szélessége: max-width és min-width), float (burkolt, az ablak szélességének csökkenésével eltávolítják), betűtípus -méret (a betűk magassága megváltozik).

1) Először egy speciális metacímkét kell írnia a különböző típusú eszközökhöz:

2) Adaptív oldalparaméterek (szélesség és magasság):

Tároló (
szélesség: 800 képpont
maximális szélesség: 90%;
}

Ebben az esetben egy rögzített tartályszélesség van beállítva, de ez nem lehet több, mint az ablak szélességének 90% -a, és ez nagyon kényelmes - akkor maga a webhely alkalmazkodik az ablak méretéhez.

3) Css adaptív elrendezés a teljes webhely képeihez:

img (max. szélesség: 100%;
magasság: auto;
}

Itt megmutatjuk, hogy a kép mérete: maximális szélessége nem lehet nagyobb a szem 100%-ánál – így maga a kép igazodik a telefon vagy egyéb kütyü méretéhez. Itt van egy ilyen egyszerű módszer - adaptív képtervezés.

4) A weboldal szövegének adaptív elrendezése: ebben az esetben manipulációk történnek a betűmagassággal: betűmérettel és egyéb paraméterekkel.

Törőszó ( szótördelés: törőszó; )

Ezt a CSS-t hosszú elválasztás nélküli szavak elválasztására tervezték.

Sok hiba van a betűméretben: A Yandex szeret írni - A szöveg mérete túl kicsi a mobileszközökön való olvasáshoz - ehhez ezt tesszük:

body (font-size: 16px) - ezzel elkerülhető ez a hiba, és a p címkét és a hivatkozásokat külön kell elhelyezni. Pontosan azért fordul elő ez a hiba, mert a body címke font-size: 12 vagy 14 px értéket tartalmaz! És ez az ítélet:

5) 3 oszlopos kialakítás vagy 2 oszlopos elrendezés adaptálása - ebben nincs semmi bonyolult, ha mindent div-en csinálnak - ó, akkor általában meg kell szakítani a burkolást, vagyis a float-ot none-ra állítani, és a blokkok menj le.

6) Adaptív CSS videóhoz (a Habrtól):



Videó (
pozíció: relatív;
párnázott alsó rész: 56,25% ;
magasság: 0 ;
túlcsordulás: rejtett;
) .video iframe ,
.video objektum
.video beágyazás (
pozíció: abszolút;
felső: 0 ;
balra: 0 ;
szélesség: 100% ;
magasság: 100% ;
}

Médialekérdezések – médialekérdezések

Az adaptív kialakítás létrehozásához gyakran használnak médialekérdezéseket (ezek a képernyő szélessége alapján állítanak fel szabályokat - a képernyő felbontása alapján).

Íme egy példa a médialekérdezésekre – milyen felbontásokat kell használni az adaptív tervezéshez:


@media csak képernyő és (max. szélesség: 1200 képpont) (


@media only képernyő és (max. szélesség: 992px) (

/* Kis eszközök, táblagépek */
@media only képernyő és (max. szélesség: 768px) (


@media csak képernyő és (max. szélesség: 480 képpont) (

/* Egyedi, iPhone Retina */
@media csak képernyő és (max. szélesség: 320 képpont) (
/**/
}

/*========== Mobil első módszer ===========*/

/* Egyedi, iPhone Retina */
@media csak képernyő és (min-szélesség: 320 képpont) (
/**/
}

/* Extra kisméretű készülékek, telefonok */
@media csak képernyő és (min-szélesség: 480 képpont) (
/**/
}

/* Kis eszközök, táblagépek */
@media only képernyő és (min-szélesség: 768px) (
/**/
}

/* Közepes eszközök, asztali számítógépek */
@media csak képernyő és (min-szélesség: 992px) (
/**/
}

/* Nagy eszközök, széles képernyők */
@media csak képernyő és (min-szélesség: 1200 képpont) (
/**/
}

De elkerülheti a médialekérdezéseket is, ha az oszlopok és blokkok szélességét százalékban állítja be.

A médialekérdezéseknél felülről kezdjük: minden, amit tettünk, elfogadható a maximális szélességnél: a 768 480-nál is működni fog.

Milyen problémák merülnek fel a webhelyek mobileszközökre való adaptálásakor?

Például a Yandex megmutathatja ezt - Vízszintes görgetés van:

Van valami kitöltéssel vagy margóval – állítsa vissza nullára a szülőválasztókhoz (blokkokhoz), és boldog lesz.

És a végén a Yandex Webmester ezt mutatja:

Én is 4 órát csináltam, az első alkalom mindig nehéz! De akkor pár óra alatt megteheti! És elküldjük a webmesternek újbóli ellenőrzésre, hogy gyorsabb legyen – ez a SEO szempontjából fontos.

Általában ma sokan használnak kész sablonokat - Bootstrap, és gyakorlatilag nincs fájdalom -

Új könyvet adtunk ki, a Közösségi média tartalommarketingje: Hogyan juthat el követői fejébe, és szerelmeskedhet velük márkájával.

Ezt a technológiát különösen aktívan használják annak biztosítására, hogy a webhely egyformán jelenjen meg különböző típusú eszközökön: számítógépeken/laptopokon és okostelefonokon/táblagépeken különböző kijelzőmérettel.

Ma egy reszponzív webhely készül a HTML5 jelölőnyelv és a CCS3 lépcsőzetes stíluslapok használatával. De amíg a megfelelő technológiák nem váltak szabványossá az összes népszerű böngészőben, a JavaScript programozási nyelvet használták a megfelelő célokra. Már korábban is (2010 előtt) több verziót kellett készíteniük ugyanabból az oldalból, de eltérő jelöléssel, hogy az általuk fejlesztett oldal helyesen jelenjen meg a különböző képernyőkön.

Miért van szüksége adaptív oldalelrendezésre?

Egészen a közelmúltig sok webhely felkeresésekor láthatott egy csúszkát a böngésző alján, amely vízszintesen görgette az oldalt. Ez történt például akkor, ha az internetböngésző ablaka nem volt maximalizálva, hogy kitöltse a teljes képernyőt, hanem viszonylag kis területet foglalt el. Ez akkor is szinte mindig látható volt, amikor a kép megjelenítésére szolgáló képernyő felbontása 800 x 600, vagy még inkább 640 x 480 pixel volt.

Ma még a mobileszközök tulajdonosai is ritkán találkoznak ezzel. Ennek oka pedig nem csak abban rejlik, hogy a modern kijelzők felbontása HD vagy annál magasabb, hanem abban is, hogy az adaptív oldalelrendezés mára szinte szabványossá vált.

Miért és mikor jelent meg a reszponzív dizájn?

A 21. század második évtizedének elejére égető szükség volt olyan technológiák létrehozására, amelyek lehetővé teszik univerzális weboldalak fejlesztését. Az adaptív tervezés létrehozását és fejlesztését kiváltó fő előfeltételek a következők voltak:

  • új felhasználók tömeges beáramlása az internetre;
  • sok különböző képernyőfelbontású eszköz megjelenése;
  • nyomást gyakoroltak a keresőmotorok, amelyek szankciókat kezdtek alkalmazni azokkal az oldalakkal szemben, amelyeken az oldalak több változata is azonos tartalmú.

Az első alkotó hivatalosan is Ethan Marcotte webdizájner. 2010 közepén publikált egy anyagot, amelyben olyan technológiáról beszélt, amelynek meg kellene oldania a weboldalak normál megjelenítésének problémáját különböző munkaterület-felbontású böngészőkben.

Egy idő után egy másik és jól ismert podcaster kiegészítéseket kínált azokhoz a koncepciókhoz, amelyekről kollégája beszélt.

Mivel és hogyan jön létre az adaptív elrendezés?

Mielőtt elkezdenénk megvizsgálni az adaptív elrendezés elkészítésének kérdését, röviden meg kell vizsgálnunk a főbb használt technológiákat. Most kettő van belőlük: HTML5 és CSS3. Egészen a közelmúltig HTML4 és CSS2 volt használatos, de ahhoz, hogy univerzális dizájnt hozzunk létre velük, JavaScriptet is kellett használni.

A CSS3 a Cascading Style Sheets következő generációja. Ennek a technológiának az a célja, hogy szabályokat hozzon létre az oldalelemek megjelenítéséhez a felhasználó böngészőjében. Használatával megadhatja például, hogy egy elemnek mekkora méretűnek kell lennie egy bizonyos felhasználói képernyőfelbontás mellett, vagy beállíthat egy szabályt, hogy mindig egy bizonyos százalékos helyet foglaljon el (100% - kitöltve a teljes munkaterületet böngésző).

A harmadik generációban jelent meg a „médialekérdezések” szabály, amellyel az elrendezéstervező minden egyes felbontáshoz külön osztályokat hozhat létre.

Nagyon fontos szempont!

Annak a személynek, aki a CSS3 használatát tervezi reszponzív tervezéshez, tudnia kell, hogy a CSS2-vel ellentétben a Cascading Style Sheets harmadik generációja százalékokat használ pixelek helyett az objektumok méretének meghatározásához.

Ami a HTML5-öt illeti, ez az oldal közvetlen megjelölésére szolgál, azaz jelzi, hogy bizonyos elemeket hol kell elhelyezni. Annak érdekében, hogy az objektumok alkalmazkodjanak a felbontáshoz, a CSS3 segítségével előre elkészített osztályokat a HTML-címkék paraméterei között kell megadni.

Egy egyszerű példa az adaptív elrendezésre

Az adaptív elrendezés megértéséhez a példáknak a lehető legegyszerűbbeknek kell lenniük. Ezért mérlegelünk egy lehetőséget, amelyben az elkészített kép automatikusan a böngésző munkaterületének felbontásához igazodik.

Először a HTML használatával magát az elemet helyezzük el az oldalon:

A DIV címke azt jelzi, hogy minden, ami benne van, egy külön blokk. Ha sok ilyen blokk van egy oldalon, akkor a "class" attribútum kerül megadásra. Erre azért van szükség, hogy a böngésző megértse, melyik szabályt kell alkalmazni egy adott blokkra.

Most meg kell alkotnia magát a szabályt, az ún

CSS-tároló:

Div (szélesség: 100%; szövegigazítás: középre; ) div img(wight: 100%; magasság: automatikus; )

Ebben a kódban az adaptív elrendezés engedélyei vannak beállítva. Konkrétan kimondja, hogy a szélességnek mindig a webböngésző munkaterülete szélességének 100%-ának kell lennie, miközben a magasság beállítása automatikusan történik.

Az adaptív elrendezés ellenőrzése

Vannak speciális eszközök az adaptív elrendezés ellenőrzésére. Például a GoogleChrome böngészőben megnyomhatja az „F12” billentyűt, majd a megnyíló panelen rákattinthat az okostelefon és táblagép képét ábrázoló ikonra. A művelet után több további panel jelenik meg, amelyekben meg kell adnia a kívánt felbontást.

Még egyszerűbbé is tehető. Annak ellenőrzéséhez, hogy a reszponzív kialakítás működik-e, tartsa lenyomva a CTRL billentyűt, majd kattintson a „+” vagy „-” gombra. E művelet után az oldal ennek megfelelően növekedjen vagy csökkenjen, de az az elem, amelyre alkalmazkodó elrendezést alkalmazunk, megtartja az arányait (vagy csináljon mást, amit a szabályok tartalmaznak).

Eszközök, amelyek megkönnyítik a reszponzív tervezést

Az adaptív tervezés elrendezése meglehetősen munkaigényes feladat. Ezért az összes ilyen eljárás végrehajtási idejének csökkentése érdekében jobb speciális eszközök használata. Az egyik ilyen a jól ismert Bootstrap* keretrendszer.

Ez a HTML- és CSS-eszközkészlet például nagyszámú előre elkészített osztályt tartalmaz, amelyeket felhasználhat a tervezés során. Dinamikusakat is tartalmaz, amelyek minden szabálynak és szabványnak megfelelően lehetővé teszik az adaptív elemek létrehozását.

A használat megkezdéséhez először közvetlenül magáról a CSS3-ról és a HTML5-ről kell ismereteket szereznie, majd tanulmányoznia kell a keretrendszer jellemzőit. Azonban, miután megértette a vele való munkavégzés legtöbb bonyolultságát, a későbbiekben jelentősen csökkentheti az adaptív webhelytervezés kidolgozásának idejét.

*A Bootstrap egy nyílt forráskódú szoftver, amelyet a Twitter Inc. fejlesztett ki. Ingyenesen terjesztik, és széles közösséggel rendelkezik, akiktől mindig lehet tanácsot kérni.

Üdvözlök minden HeavenWeb blog olvasót. Ma a blogon adok egy példát az úgynevezett adaptív elrendezésre, és példaként bemutatom, hogyan lehet egyszerű elrendezést létrehozni, figyelembe véve a különböző képernyőfelbontásokhoz való alkalmazkodást.

Egyszerűen fogalmazva, az adaptív vagy „reszponzív” elrendezés olyan blokkok és elemek elrendezését jelenti, amely alkalmazkodik annak az eszköznek a képernyőjének méretéhez és felbontásához, amellyel az oldalt megnyitják.

A táblaszámítógépek és okostelefonok növekvő népszerűségével a webmestereknek új formátumokat kell támogatniuk a webhelyek megjelenítéséhez, és ennek megfelelően új képernyőfelbontásokat kell alkalmazniuk, amelyekben ezek a webhelyek megnyílnak.

A legkritikusabb érték a böngészőablak szélessége. A minimum a legtakarékosabb okostelefonokon 240-360 képpont, de a legtöbb esetben még mindig 480 px és magasabb. Ez pedig több mint fele akkora, mint a szabványos, 1024 pixel széles monitoroké.

Egy másik fontos szempont a nagy, nagy felbontású monitorok, amelyekről sem szabad megfeledkezni. A webmester célja, hogy az oldalt a felbontáshoz igazítsa, és elkerülje a vízszintes görgetést bármely képernyőn.

Ez CSS médialekérdezésekkel, valamint olyan stílustulajdonságokkal érhető el, amelyek meghatározott határokon belül korlátozzák a minimális és maximális szélességet és magasságot.

De jobb, ha mindent példával mutatunk be. Készítsünk egy egyszerű adaptív elrendezést minimális elemekkel, a kész példa megjelenését láthatjuk a bemutató oldalon:

Tehát az alkalmazkodóképességére vonatkozó követelményeink a következők:

  • A fő rész szélességét nagy felbontás mellett kell nyújtani, de egy bizonyos mértékig, mert a túl hosszú sorokat nem kényelmes elolvasni.
  • Ahogy a böngésző szélessége csökken, a képeknek arányosan zsugorodniuk kell, hogy a terület határain belül maradjanak.
  • 700 pixelnél kisebb szélesség esetén (minimum - álló tájolású HD képernyővel rendelkező táblagép vagy okostelefon) az alsó három blokknak egymás után kell sorakoznia, és a fő blokk szélességének 100% -át el kell foglalnia.
  • Ebben az esetben a bal oldalsávnak keskeny sávba kell esnie, felszabadítva a helyet a fő rész számára.
  • Adjon meg egy gombot, amelyre megérintve nyitható és bezárható az oldalsáv, amelynek most a fő blokk felett kell lennie, előugró menü formájában.

Kezdjük. Létrehoztam egy index.html fájlt, valamint css és images mappákat, ahová a stílusfájlt, illetve az elrendezésből kivágott képeket helyeztem el.

A HTML fájlban két gyökértárolót fogunk létrehozni a bal oldali menühöz és a fő részhez. A .left_side-ban elhelyezünk némi jelölést a logóhoz, a közösségi linkekhez és egy számozatlan menülistához.

A jobb oldali fő blokkban az egyes bejegyzéseket egy div-vel burkoljuk a .text_block osztályba, hozzáadunk helyőrző szöveget a Yandex abstracts eszközéből, és például képeket.

Adjunk hozzá három .footer_block blokkot az aljára, és csomagoljuk be őket egy közös .footerbe. Adjunk hozzá H2, H3 címsorokat a cikkekhez, és ennek eredményeként ehhez hasonló jelölést kapunk:

Példa az adaptív elrendezésre. Heaven Web - blog webmesterek számára. Blog a webfejlesztésről

  • itthon
  • Elrendezés
  • Jquery
  • Drupal
  • Egyéb
  • Kapcsolatok
Rendkívüli elhelyezési terv: módszertan és jellemzők

Íme a szöveg a Yandex abstracts-ból...

Még egy kis szöveg képekkel

Első cím

Ezzel egy időben a márkaépítés megszervezi a szublimált felmérést, figyelembe véve a korábbi médiakampányok eredményeit.

Második cím

A Maslow-piramis szerkezete alapján az értékesítési vezetés racionalizálja az észlelés elvét, megnyerve piaci részesedését.

Harmadik cím

Az életszínvonal emelése, amint az a fentiekből következik, a költségektől függetlenül fejleszti az imázs kialakulását.

Ügyeljen a 6. sorra. A helyzet az, hogy a mobil eszközök méretezik a weboldalakat a kényelmes megtekintés érdekében, de erre nincs szükségünk. Ezzel a meta bejegyzéssel tiltjuk az oldalméretezést.

Most térjünk át a CSS stílusokra. Tervezzük meg a bal oldali blokkot:

Left_side( háttér: #1d282b; szélesség: 300px; pozíció: rögzített; bal: 0; felső: 0; magasság: 100%; z-index: 5; ) .logo_text( padding: 20px 10px; color:#ffffff; font- méret: 24px; font-family: myPTNarrow: center .logo_text a( display: inline-block; ). magasság: 24px; text-align: display: block : 30px; line-height: 30px ) .left_menu li a( display: block; line-height: 30px; font-size: myPTNarrow ; color:#ffffff; text-decoration: none; padding- bal: 60px; .left_menu li a:hover( background: #343e41; ) .social_img( text-align: center; ) .social_img a( display: inline block; margin: 0 10px; height: 30px; overflow: hidden ) . social_img a:hover( átlátszatlanság: 0,7; ) .tw_icon( background: url("../images/social.png") bal felső no-repeat; ) .go_icon( background: url("../images/social.png") jobb felső no-repeat; ) .left_swap( display: none;/* Alapértelmezés szerint a blokk nem látható, akkor jelenik meg, ha a médialekérdezés aktiválva van

Itt a container.left_side számára a következő pozíciót adtuk meg: fix. Ez a tulajdonság lehetővé teszi, hogy a blokk mindig a bal oldalon maradjon (balra: 0; felül: 0; és magasság: 100%;), és ne görgessen a fő tartalommal. Annak biztosítására, hogy a blokk ne fedjen át semmivel, adjon hozzá z-indexet: 5.

Mivel a bal oldali blokk szélessége 300 pixel, ezért a középső blokk (.wrapper) bal szélétől - padding-bal: 300px - belső padding kell, hogy legyen, hogy ne „essen” a bal oldali menü alá.

A központi blokk általános kódja:

Burkolat (pozíció: relatív; háttér: #ffffff; minimális magasság: 200%; minimális szélesség: 400 képpont; maximális szélesség: 1200 képpont; kitöltés balra: 300 képpont; jobb oldali kitöltés: 0 képpont; doboz árnyéka: 0 0 10 képpont rgba (0,0,0,0.2 ; sormagasság: 24px; háttér: url(../images/hr.png") bal alsó ismétlés-x (kijelző: 0 auto 40px; ; ) .auto_img( kijelző: blokk; max-szélesség: 100%; margó: 0 auto 24px; )

A legfontosabb itt a blokk szélességének kialakítása. A .wrapper esetén tulajdonságokat adunk meg

Minimális szélesség: 480 képpont; maximális szélesség: 1200 képpont;

Vagyis amikor a képernyő szélessége nő, a blokk a tartalommal együtt 1200 pixelre bővül, majd a bal oldalon marad, a jobb oldalon pedig csak egy háttér lesz. Ha csökkenti, 400 képpontra csökken, ha erősebb, akkor megjelenik a vízszintes görgetés.

A központi blokkon belüli képeknek .auto_img osztályúaknak kell lenniük. Ha nem illeszkednek a szélességbe, akkor arányosan zsugorodnak, és a tartály szélességének 100% -ával egyenlőek lesznek.

Ezután nézzük meg a CSS médialekérdezéseket. Minden ilyen kérés így néz ki. Először a @media fejléc jelenik meg, majd megjelenik az eszköz típusa, amelyre alkalmazni szeretné a kérés css kódját. Normál színes képernyőnél ez a képernyő szó (vagy gyakrabban írják az összeset, vagyis minden eszközre). A feltételek és paraméterek ezután zárójelben vannak megadva.

Amire most kíváncsiak vagyunk, az a max-device-width feltétel, amely azt írja elő, hogy a következő szabályok csak akkor lesznek érvényesek, ha a böngésző maximális szélessége kisebb, mint a kettőspont után megadott bizonyos érték.

Vagyis az egyik feltételünk így fog kinézni:

@media képernyő és (max-width:800px)( .left_side( display: none; ) .left_swap( display: block; ) .wrapper( padding-left: 50px; ) )

A kapcsos kapcsos zárójelben már beírtuk a szükséges CSS szabályokat, vagyis elrejtjük a bal oldali menüt és megjelenítjük a korábban elrejtett segéd szűk bal blokkot - .left_swap.

Adjunk hozzá még egy feltételt az alsó vízszintes blokkok függőleges sorba helyezéséhez.

@média képernyő és (max-width:720px)( .footer_block( kijelző: blokk; szélesség: 96%; ) )

Azok. Az elemek megszűnnek inline lenni és blokk alapúvá válnak, aminek következtében egymás után sorakoznak fel. A szélesség: 96% tulajdonsággal a szélességüket maximálisra növeljük (nem 100%-ra, mivel megtartjuk a párnázást - belső margókat).

Itt abból indultam ki, hogy a HD tabletek és okostelefonok felbontása álló tájolásban általában 800 pixel, így az alábbiakban mindennél a menüblokk el van rejtve.

Valójában a CSS médialekérdezések összetettebbé tehetők, ha egyszerre több feltételt adunk hozzá a és operátorok használatával. Nemcsak a képernyő szélességét, hanem magasságát, tájolását, a támogatott színek számát és egyéb paramétereket is meghatározhatja.

Végül a jQuery segítségével nyissa meg a bal oldali menüt az összecsukott keskeny bal oldali blokkra kattintva – on.left_swap. Például így:

JQuery(function($) ( $(.left_swap").click(function ()( $(".bal_side").toggle(); return false; )); ))

Itt minden rendkívül egyszerű, egy kattintást feldolgozunk a blokkon, és a menüvel megjelenítjük vagy elrejtjük a blokkot. A kód valószínűleg túl egyszerű, és javítható, de példaként megteszi.

Így egy reszponzív weboldal elrendezésére néztünk egy példát, és a kapott eredmény a szokásos módon megtekinthető a bemutató oldalon. Próbálja meg növelni vagy csökkenteni a böngészőablak szélességét, és figyelje meg a blokkok viselkedését.

PS: Az utóbbi időben sok spam volt a blogon a hozzászólások között, nem mindig van időm törölni, de továbbra is minden hozzászólásodat alaposan elolvasom, és megpróbálok válaszolni.

Két fő tévhit létezik a reszponzív weboldal tervezésről. Vannak, akik úgy gondolják, hogy ez egyszerűen a webhely csökkentett megjelenítése, amelyben az elemek tömörítve vannak. Mások kitartóan egyenlőségjelet tesznek a reszponzív dizájn és a webhely mobil verziója között. Ebben a cikkben kipontozzuk az i-t, és elmondjuk, hogy is van ez valójában.

Mi az adaptív elrendezés

Az adaptív egy olyan elrendezés, amelyben a webhely helyesen jelenik meg a különböző eszközökön, mivel az elemek dinamikusan alkalmazkodnak a különböző képernyőfelbontásokhoz.

Egyszerűen fogalmazva, a reszponzivitás a blokkok dinamikus halmozása, nem pedig a webhely kisebb változata.

Nem számít, hogy a felhasználó melyik eszközről éri el a webhelyet: számítógépről, táblagépről vagy telefonról - ugyanolyan kényelmes lesz a használata, és a szükséges funkciók teljes mértékben megmaradnak.

Miért van szükség adaptív elrendezésre?

Ma már nem kell kutatásokat és statisztikákat keresnie annak bizonyításához, hogy az emberek milyen gyakran érik el az internetet táblagépről és mobiltelefonról. Ez a valóság mindenhol körülvesz bennünket: tömegközlekedésben, kávézókban, sorokban - az emberek szívesen töltik az idejüket az internetezéssel, és maga is tudja, milyen kényelmes. A pizza kiválasztásához és megrendeléséhez senki nem megy először haza, hogy a számítógéphez jusson, hanem gyorsan felmegy a webhelyre a telefonjáról, miközben más dolgokat is csinál. Amikor megérkezik a vásárlás ötlete, a legegyszerűbb módja az, hogy azonnal felkeresi az internetet, összehasonlítja a versengő üzletek ajánlatait, és késedelem nélkül megrendeli a terméket. És számtalan ilyen példa van!

Az alkalmazkodóképesség egy modern weboldal egyik fontos és kötelező feltétele.
Ha az oldal csak számítógépről jelenik meg helyesen, akkor táblagépről vagy telefonról való megtekintéskor nehéz navigálni, a blokkok nem skálázódnak, nehéz rátenni az ujját a kívánt linkre - ennek eredményeként a felhasználó ingerült, nem tudja végrehajtani a célműveletet, és időt pazarol azzal, hogy megértse a ferde megjelenítést, és elhagyja az erőforrást. Aztán soha többé nem tér vissza hozzá. És megy a versenytársakhoz.

Éppen ezért az adaptív weboldal megrendelése nem szeszély, hanem az eladások szintjét közvetlenül befolyásoló feltétel.

Hogyan működik egy reszponzív weboldal?

Könnyű felismerni a nem reagáló webhelyet – táblagépről vagy telefonról nézegetve csak a terület egy részét fogja látni, a látható területet balra és jobbra kell mozgatnia, nagyítania kell, hogy olvasható legyen a betűtípus, és kicsinyítsen hogy megtalálja a kívánt részt vagy jelentkezési lapot.

A reszponzív elrendezésű weboldal a képernyő szélességétől függően alkalmazkodik az eszközhöz. Az oldalon minden elem alkalmazkodik: változik a méretük, megjelennek/eltűnnek egyes segédtartalmak és díszítőelemek. Ugyanakkor a blokkokat úgy rendezik át, hogy az kényelmes legyen a felhasználó számára - a hangsúly a jelentős információkon van, és a nem fontos adatokat eltávolítják vagy minimalizálják.

Általános szabály, hogy minél kisebb a képernyő szélessége, annál koncentráltabb az információ megjelenítése, és annál kevesebb blokkról van szó. Ugyanakkor a felhasználónak nem kell módosítania a léptéket: minden egyszerű és világos még egy kis képernyőn is.

A reszponzív oldalak másik jellemzője: a jelentős elemek nagyítása, hogy a felhasználó könnyedén megnyomhassa az ujjával a képernyőn lévő gombot, vagy kövesse a hivatkozást. Az oldal átalakítása közvetlenül ettől függ, ezért fontos, hogy az adaptív tervezést felhasználóbaráttá tegyük.

Fontos tények, amelyeket tudnia kell a reszponzív webhelyekről

1. A reszponzív weboldal és a mobil verzió nem ugyanaz.

Amikor reszponzív webhelyről beszélünk, akkor azt értjük, hogy ez egy webhely különböző eszközökhöz. Ez a legfontosabb különbség a webhely mobil verziójához képest. A mobil verzió egy különálló teljes értékű weboldal, amely saját funkcionalitással, saját elrendezéssel és gyakran saját tartalommal rendelkezik. A mobil verziót úgy alakítottuk ki, hogy a felhasználók kényelmesen érjék el az oldalt mobil eszközökről: mi az, ami számukra nagyon fontos az asztali verzióból, illetve mi az, ami felesleges és könnyen törölhető.

2. A funkcionalitás minden eszközön ugyanaz.

Itt minden világos: mivel csak egy oldal van, a képességei ugyanazok, függetlenül attól, hogy a felhasználók milyen eszközzel érik el az oldalt.

3. A reszponzív tervezésnek vannak korlátai.

Elsősorban a tartalom eredeti szerkezetének megőrzéséhez kapcsolódnak a képernyőméret megváltoztatásakor. Az adaptív verzióban gyakran elhagyjuk a csúszkát és a nagyméretű háttérképeket, amelyek az asztali verzióban vannak, és nem használunk Flash-t. Általában a legjobb megoldást ajánljuk.

De az is előfordul, hogy a tervről abban a változatban állapodnak meg, amelyhez az ügyfél ragaszkodik, de a kész elrendezés kényelmetlennek bizonyul. Ezután minden változtatás felár ellenében történik, mivel szigorúan a műszaki előírásoknak megfelelően dolgozunk.

4. Az alkalmazkodóképesség lehet teljes vagy részleges.

Teljes alkalmazkodóképesség – mobil eszközöktől asztali számítógépekig, részleges – például táblagépről vagy laptopról asztali számítógépre. A reszponzív dizájn fejlesztésekor általában azokra az eszközökre helyezik a hangsúlyt, amelyekről a kliens a legnagyobb forgalmat generálja.

5. Nem minden webhely profitál a teljesen reszponzív tervezésből.

Az olyan összetett funkcionalitású és/vagy tartalommal rendelkező webhelyek esetében, amelyek észleléséhez elegendő képernyőterületre van szükség, a teljes alkalmazkodóképesség gyakran káros. Jobb, ha kiválasztunk egy listát azokról az eszközökről, amelyeken a funkcionalitás teljes lesz, és készíteni egy részleges adaptálhatóságú verziót, a többihez pedig egy csökkentett funkcionalitású mobilverziót, amely képes teljes képernyős verzióra váltani. .

6. A böngészők közötti kompatibilitás felelős az azonos megjelenítésért a különböző böngészőkben.

Feltétlenül tüntesse fel ezt a tételt a műszaki leírásban, ha Önnek fontos, hogy a webhely ugyanazt jelenítse meg a különböző böngészőkben. Ellenkező esetben a böngészők régebbi verzióiban a webhely hibákat és olvashatatlan betűtípusokat jeleníthet meg. Ez pedig egyenes út a célközönség elvesztéséhez.

Amit tudnia kell, ha adaptív elrendezést szeretne rendelni

A "Technologies of Success" cég szolgáltatásokat nyújt adaptív webhely-elrendezés létrehozásához. Jobb, ha a fő oldal fejlesztésének szakaszában gondoskodik az adaptív tervezésről, és írja le a műszaki leírásban. De ha .psd formátumú kész dizájnnal érkezik hozzánk, mi is tudunk segíteni. CorelDraw-ban készült layoutok tördelését nem vállaljuk - ebben az esetben azt ajánljuk az ügyfeleknek, hogy először készítsék el a tervet, majd csak azután az elrendezést.

A helyszín sajátosságainak és a műszaki specifikációk ismerete nélkül lehetetlen meghatározni az elrendezés időzítését.

Egy reszponzív vállalati webhely elrendezése átlagosan 15 napot vesz igénybe, a reszponzív online áruház tervezési ideje közvetlenül függ a webhely összetettségétől.

Soha nem helyezzük át az elrendezést a következő szakaszba - a programozásba - mindaddig, amíg a megrendelő nem ellenőrizte az oldal adaptálhatóságát és minden elemének a műszaki előírásoknak megfelelő megfelelő működését.

Még mindig vannak kérdései: vagy mobil verzió? Hívja az ingyenesen hívható 8 800 775-17-11 számot, vagy hagyja meg a számát és mi visszahívjuk és mindent elmondunk.

Sziasztok!

Amikor megjelent az adaptív elrendezés elve, számomra rémálomnak bizonyult, amiből még mindig nem tudok kiheverni, olyan fájdalom – elvégre minden felbontáshoz gyakorlatilag át kell rendezni az elrendezést, új kódot írni, sok olyan kódot kapsz, amelyet nehezebb karbantartani. Értsük ezt a fájdalmat "kódentrópiaként"

Nemrég lehetőséget kaptam egy mobilalkalmazás elrendezésének elkészítésére, és úgy döntöttem, hogy végre megpróbálom leküzdeni ezt a fájdalmat, széppé és tömörsé tenni - rem használata. Számomra ez tűnt a legegyszerűbb megoldásnak, a mobil böngészők 100%-a támogatja ezt az egységet. A lényeg az, hogy a html tag-hez több soros médialekérdezést írunk, csak az alapvető betűméreteket jelölve pixelben, annak arányában, hogy az elrendezésünk hogyan nézzen ki különböző felbontásokban, a többi elrendezés médialekérdezés nélküli része pedig úgy van elrendezve. szokásos, csak mi használunk pixeleket rem helyett. Ez a technika könnyen méretezhető, és az alapbetűmérettől függően módosítja az elrendezést.
A kód minimalizálása és az adaptív elrendezés ily módon történő egyszerűsége egyszerűen kolosszális!

Ennek a módszernek egyetlen hátránya volt: folyamatosan újra kellett számolni a psd elrendezés képpontjait rem-re, de gyorsan megoldottam ezt a problémát - írtam egy speciális függvényt, és úgy raktam ki, mint korábban pixelben, az előfeldolgozó maga fordította le rem.

De! A fő poén az, hogy ezzel a módszerrel terveztem egy adaptív mobilalkalmazást, ahol a design ugyanaz volt.

Amikor visszatértem az adaptívhoz normál oldalakhoz- visszatért belém a fájdalom még erősebb, mint korábban, mert általában 3-6 különböző mintánk van:
1) Nagy asztali 1600-1920 pixel
2) Kis desktop/laptop ~1100-1400 pixel
3) Régi Monica/táblagép - 768-1024 pixel
4) Tablet alatti/nagyobb okostelefon ~600 pixel
5) Okostelefon 300-480
6) Régi okostelefon 250 pixel.

Persze túloztam, de legalább három elrendezést mindenképpen meg kell csinálni.

Tehát itt van az 1. kérdés és a legfontosabb: hogyan lehet minimalizálni az adaptív elrendezést és szépíteni a kódot? Hogyan csökkenthető az ún a kód entrópiája? Van valami klassz megközelítés/technika?

Megnéztem a menő webstúdiók különböző oldalait, hogy ott megtaláljam a választ, és láttam, hogy mindenki véletlenül, vagyis általában zavarás nélkül.
Az egyetlen dolog, amit láttam, az az, hogy valamiért vannak, akik a szokásos pixelek helyett em-et és százalékot használnak a betűtípusokhoz. Úgy tűnik, hogy a szöveg skálázására szolgál, bár nem világos, hogy ez hogyan csökkenti az adaptáció kódját, véleményem szerint csak bonyolít mindent - számításokat kell végezni a szülőblokk betűméretétől és valószínűleg az előfeldolgozóktól függően nem fog segíteni... Nem tudom, miért kell aggódnod a betűméretek em-egységben történő beállításával, a rem-problémák még mindig nem tűntek el sehova... Lehet, hogy rossz tördelő vagyok... A legmakacsabb oldalak margóhoz és más doboz méretű tulajdonságokhoz használták...
2. kérdés:
Mi értelme van használni őket?
És most a 3. kérdés:
Valóban nincs egységes módszertan, tényleg minden olyan rossz az elrendezésben, hogy mindenki azt csinál, amit akar? Vagy láttam sikertelen példákat (bár a themeforest legnépszerűbb témái és a legjobb webstúdiók oldalai között keresgéltem)?