Jó napot, ma az adaptív weboldalelrendezésről fogunk beszélni. Miért olyan szükséges, és minden oldalon jelen kell lennie, mi a különbség a mobil és az adaptív elrendezés között. Sokan még mindig összekeverik vagy nem értik, mi ez az elrendezési lehetőség, és miben különbözik például a webhely mobil verziójától.

Néhány évvel ezelőtt, vagy inkább az első belépő a világ egy érintőképernyős telefon alma, ez a kérdés nem volt olyan kritikus. Lehet persze, hogy években tévedtem, de pontosítottam a hozzávetőleges időpontot (a könyvek szerzőinek másolataiból ítélve). Aztán jöttek a tabletek, az új modellek érintő telefonokés a képernyőfelbontások száma drámaian növekedni kezdett. Ezt követően a webhelytulajdonosok új problémába ütköztek.

Aki még nem tudja, 2015. április 21-től a Google új módszereket vezet be az oldalak rangsorolására, amelyek az oldal adaptív kialakításán alapulnak. Ha webhelyének nincs reszponzív kialakítása, az erőforrása lekerül a keresési eredmények között keresőmotor. Ez itt egy csoda mobil eszközök.

Webhelyének minden eszközön ugyanúgy kell kinéznie. Teljesen mindenkinek! mobiltelefonról a nagy felbontású monitor. A nagy monitorokkal alapvetően nincs gond, ott amúgy is minden világos, de a tabletekkel és a mobiltelefonokkal van gond. A webhelyek nem megfelelően jelennek meg a kis képernyőkön, ami sok kellemetlenséget okoz a felhasználónak.

A monitoron a webhely oldalának az egyik formátumban, a táblagépen a másikban, a telefonon pedig a harmadikban kell kinéznie. Ezen kívül ne legyen vízszintes görgetősáv. Az oldalnak alkalmazkodnia kell a készülék képernyőjéhez, ez a szépsége. adaptív elrendezés webhely.

Általában miről kérdéses, adaptív elrendezés mi az. Webhelyének EGY reszponzív kialakításúnak kell lennie EGY kóddal, amely a képernyőhöz illeszkedik. Váltani mobil verzió ez már nem megy, nem helyes. nyitható útmutató a google-bólés olvassa el részletesebben az információkat.

A webhelyét megnyitó felhasználónak nem kell nagyítania vagy kicsinyítenie. Az ilyen esetek általában megerőltetik az embereket, kényelmetlenné válnak, és gyorsan be akarják zárni az oldalt. Az ilyen esetek nem lesznek elszigeteltek, amelyek nagyon rosszul jelenhetnek meg viselkedési tényezők blog vagy weboldal. Ugyanez a példa vonatkozik arra a szövegre is, amelyet a látogató olvasni fog. Az elrendezésnek módosítania kell a léptékét, hogy a szöveg megtekintésekor ne legyen vízszintes görgetővonal.

Személyes véleményem szerint a reszponzív dizájn jobb, mint egy webhely mobil verziója. A második lehetőség egyébként sokkal többe fog kerülni, mint az első. Az alkalmazkodóképességnek köszönhetően Ön maga döntheti el, hogy a felhasználó mit lát a szeme előtt a táblagép használatával, és a webhely melyik verziója jelenik meg a mobiltelefonokon.

Mi az adaptív elrendezés

Természetesen nem mindenkinek van kéznél monitor, tablet és telefon. Ahhoz, hogy ellenőrizze webhelye adaptációját, nem szükséges, hogy minden típusú eszköz rendelkezésre álljon. Ha használ Google böngésző Chrome, telepíthet magának egy bővítményt Ablak átméretező. Ezzel gyorsan tesztelheti a legtöbb reszponzív tervezési lehetőséget.

Egy gombnak meg kell jelennie a böngésző tetején, amikor rákattint, minden lehetséges opciók képernyő megtekintése. Azt javaslom, hogy minden ponton végigmenjen. Válassza ki, majd ellenőrizze, hogy minden hogyan néz ki a webhelyén.

Még egyszer mondom, NEM LEHET vízszintes görgetővonal. Mindennek alkalmazkodnia kell bármilyen képernyőfelbontáshoz. Nyissa meg a főoldalt, a cikkeit és néhány további oldalt.

A tapasztalatok szerint szinte minden webhelyen találhat hibát. Némelyiken ferde logó van, másokon nagyon szűk mező található a megjegyzésekkel stb. Különösen bosszantóak azok az oldalak, amelyeken egyszerűen nem reális megjegyzést hagyni a telefonról. Arra késztet, hogy becsukjam, és soha többé ne nyissam ki. És ez mínusz egy megjegyzés, és határozottan több olyan ember van, mint én.

Ennyi az összes oldal normál megjelenítéséhez, és nem csak nekik, a webhely adaptív elrendezését minden eszközön el kell készíteni. Minden szakasz, minden blokk megjegyzésekkel, minden oldal, a webhely fejléce, lábléce és Speciális figyelem meg kell hagyni az étlapon.

Elrendezési példák

Mondok egy kis példát egy adaptív oldalra, erre a lehetőségre spontán módon, a tudományos piszkálás módszerével találtam rá a kereséssel. Nem néztem, hogy milyen sablon és honnan szerezte, most más a kérdés. Nagyon szeretem ezt a lehetőséget, mindegyik a saját stílusában. A monitoron az oldal egy formában, az iPhone-on teljesen másképp néz ki.

Természetesen vásárolhat magának megfelelő sablont, és ezzel sok további problémát megkímél, de mindent ellenőriznie kell. Ha a jövőben ferde elrendezést talál, akkor magának kell elvégeznie a javításokat, vagy igénybe kell vennie az elrendezéstervező szolgáltatásait.

Ebben a reszponzív webhely példájában minden a helyén van, minden sima és gyönyörű. Felül egy menü jelenik meg, amely az ujj megnyomására nyílik meg, majd itt található a blog leírása, az oldalkeresés, a címsorok és a frissítésekre való feliratkozás. Az alábbiakban a hírek listája található. Szépség... tényleg minden átgondolt.

Ön is találhat példákat adaptív webhelyekre. Nyisson meg bármilyen blogot, és használja további bővítés a böngésző számára. Így kiválaszthat tetszőleges példát, és fordulhat vele az elrendezéstervezőhöz. Ő elvégzi az összes szükséges munkát, és webhelye új arcot kap.

Weboldal reszponzivitás leckék

Ha nem rendelkezik speciális ismeretekkel a weboldal elrendezésében, azonnal szólok, hogy nem fog sikerülni. Így van, a CSS tulajdonságainak és értékeinek ismerete nélkül semmit sem fog tenni. Először át kell mennie néhány alapvető leckén, meg kell tanulnia az oldalak elrendezésénél használt tulajdonságokat.

A blogomon van egy teljes rész, amelynek szenteltem. Nemrég kezdtem el kitölteni, a jövőben is tervezek vele dolgozni. Aki levélben szeretne új leckéket kapni, ajánlom az előfizetést. Tőlük megtudhatod:

1. Hogyan készítsünk saját reszponzív elrendezést.
2. Mik azok a médialekérdezések.
3. A médialekérdezések helyes használata.
4. Hogyan készítsünk reszponzív menüt.
5. Hogyan készítsünk reszponzív galériát.
6. És még sok más.

Ha úgy döntött, hogy elmélyül ebben a témában, és meg akarja próbálni tanulmányozni, akkor Ben Frain Html5 és CSS3 Developing Websites for Any Browsers and Devices című könyvének tanulságai kezdetnek megfelelőek. Ebben mindent megtudhat a reszponzív tervezésről, amelynek köszönhetően a webhelyek minden eszközön gyönyörűen jelennek meg. Nagyon jó könyv, amely leírja a teljes folyamatot A-tól Z-ig.

Mi az a Media Queries?

Médialekérdezések- ezek olyan médialekérdezések, amelyeket a webhely adaptív elrendezésében használnak. Róluk szól Ben Frain könyve. Ha azt mondod egyszerűen, az a kód, amelybe az adott képernyőfelbontáshoz tartozó CSS-stílusok kerülnek. Így minden lehetséges tervezési lehetőség kiigazításra kerül.

A médialekérdezések segítségével megadhatja a böngészőablak minimális és maximális szélességét. Ezen kívül mindent hozzáadhat, amit az oldal kialakításához, vagy fordítva módosítani szeretne. Például három oszlop helyett készítsen egyet, távolítsa el a felesleges blokkokat az oldalon, rövidítse le a menüt, módosítsa a webhely fejlécét, adjon hozzá további információkat a webhely láblécéhez. A legfontosabb dolog az, hogy webhelye kényelmes és kellemes legyen a legkisebb képernyőméreteken.

Önön múlik, hogy a lehetséges lehetőségek közül hányat tehet meg. Nem szabad szó szerint érteni a szavakat, és minden lehetséges opcióhoz médialekérdezéseket kell használni. Válasszon néhányat a leggyakrabban használtak közül.

@media (max. szélesség: 1010 képpont) és (min. szélesség: 992 képpont)

Reszponzív elrendezési példa

Például van az oldalnak egy bizonyos része, amelyet egy kis képernyőbővítményen megnyitva le kell kicsinyítenünk és illesztenünk kell egy telefon vagy tablet képernyőjét. Ebben az esetben az összes blokkot, szöveget és egyéb tartalmat a megadott képernyőbővítményekhez kell illeszteni. A böngészőbővítmény használatával megfigyelheti az összes változást.

Hozzon létre egy új fájlt stílusokkal (csatlakoztassa a kezdőlap), vagy adjon hozzá médialekérdezéseket egy meglévő fájlhoz. @media (max. szélesség: 770 képpont) – A képernyő maximális szélessége 770 képpont. És ehhez a tárolóhoz hozzáadjuk az összes szükséges változtatást, amely egy adott képernyőszélességhez szükséges.

@media (max. szélesség: 770 képpont) ( törzs, html ( túlcsordulás-x: rejtett; minimális magasság: 960 képpont; háttérméret: 100%; ) #mail_bg_horizontal div ( balra: 274 képpont; pozíció: relatív; felül: 40 képpont; szélesség: 340px; ) #mail_bg_horizontal .module_subscribe ábra ( padding-top: 46px; ) #footer_menu ( display: none; ) #header (háttér-méret: 100%; padding-top: 48%;) #logo-site ( top : -60px; betűméret: 7vw; szélesség:100%; margó: 10px;) #logo-site span(display:inline-block; padding-left:10px;) #slogan( felső: -77px; font-size : 3vw; margó: 10px;)

@media (max. szélesség: 770 képpont) ( body , html ( túlcsordulás - x : rejtett ; min - magasság : 960 képpont ; háttér - méret : 100% ; #mail_bg_horizontal div ( balra : 274px ; pozíció : relatív ; felső : 40 képpont ; szélesség: 340 képpont #mail_bg_horizontal .module_subscribe ábra ( padding - top : 46px ; #footer_menu ( kijelző : nincs ; #fejléc (háttér mérete: 100%; kitöltés felső része: 48%;) #logo-site span(display:inline-block; padding-left:10px;)

Most menjünk tovább, lejárt a maximum 770 pixel, megyünk kisebb szélességre. @media (max. szélesség: 650px) - hozzáadjuk az összes változtatást, ami a 650px-es bővítéshez szükséges. Minden ugyanúgy történik, csak maximum 650 pixel szélesség esetén. Az összes szükséges módosítás egyetlen közös tárolóhoz kerül hozzáadásra ehhez a médialekérdezéshez.

@média (max. szélesség: 650 képpont) ( #kapcsolódó_bejegyzések ( szegély-alsó: 1px tömör #cc; szegély felső: 1px tömör #cc; kitöltés felső: 20px; szélesség: 545px; ) szegély: közepes nincs; magasság: 28px ; bal: 93px; pozíció: relatív; felül: -12px; szélesség: 159px; ) #header .wrapper (szélesség: 100%;) #header .wrapper > nav ul > li ( lebegés: nincs; szélesség: 100%; margó -balra: 0; szövegigazítás: középre; ))

@media (max. szélesség: 650 képpont) ( #Kapcsolódó hozzászólások ( padding - top : 20px ; szélesség : 545 képpont ; #mail_bg_horizontal .module_subscribe gomb ( határ : közepes nincs ; magasság : 28px ; balra : 93px ; pozíció : relatív ; felső : - 12px ; szélesség: 159 képpont #header .wrapper ( szélesség: 100%;) #header .wrapper > nav ul > li ( úszó : nincs szélesség: 100% margó - bal : 0 ; szöveg - igazítás : középre ;

Ezt követően az áttérés a következő szélességre, például 500 pixelre. Ehhez a tárolóhoz hozzáadjuk az összes szükséges tulajdonságot, amely elfér a képernyőn legfeljebb 500 pixel szélességben. @media (max. szélesség: 500 képpont).

@media (max. szélesség: 500 képpont) ( törzs > #tartalom > .wrapper .navigation > .next ( háttér: rgba(0, 0, 0, 0) url("images/bow_right.png") no-repeat scroll 0 0; kijelző: nincs; lebegés: bal; magasság: 30 képpont; margó bal: 1 képpont; margó felső: -4 képpont; szélesség: 34 képpont; ) #mail_bg_horizontal .module_subscribe gomb (szegély: közepes nincs; magasság: 28px; bal: 96px ; pozíció: relatív; felül: -12px; szélesség: 159px;))

@media (max. szélesség : 500 képpont ) ( test > #content > .wrapper .navigation > .next ( háttér : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - ismétlés görgetés 0 0 ; kijelző : nincs ; balra lebeg ; magasság: 30 képpont margó - bal : 1px ; margó - felső : - 4 képpont ; szélesség: 34 képpont #mail_bg_horizontal .module_subscribe gomb ( határ : közepes nincs ; magasság : 28px ; balra : 96px ; pozíció : relatív ; felső : - 12px ; szélesség: 159 képpont ) )

A végén a médialekérdezés szélességét is 400 pixelre csökkentjük. Ebben a tárolóban feltüntetjük az összes szükséges változtatást egy adott szélességhez. @media (max. szélesség: 400 képpont). Minden hozzáadás után ellenőrizzük, mi történik. A stílusokkal bármikor módosíthatja és saját maga módosíthatja a fájlt.

@media (max. szélesség: 400px) ( #header (padding-top: 61%;) #mail_bg_horizontal div ( felső: 11px; bal: 37px; szélesség: 174px; betűméret: 13px;) #mail_bg_horizontal (pozíció . module :relative; top:-15px; left:-69px;) #mail_bg_horizontal .module_subscribe gomb ( fent: -10px; balra: 18px;) #mail_bg_horizontal ( magasság: 186px;) #related_posts ( border-down: 1px solid #ccc; felső szegély: 1 képpont tömör #cc; kitöltés felső rész: 1 képpont; szélesség: 255 képpont; ))

@media (max. szélesség: 400 képpont) ( #fejléc (feltöltés: 61%;) #mail_bg_horizontal div ( fent: 11px; balra: 37px; szélesség: 174px; betűméret: 13px;) #mail_bg_horizontal .module_subscribe ( pozíció:relatív; felül: -15px; balra:-69px;) #mail_bg_horizontal .module_subscribe gomb ( fent: -10px; balra: 18px;) #mail_bg_horizontal (magasság: 186 képpont;) #Kapcsolódó hozzászólások ( keret - alsó : 1px tömör #cc; keret - felső : 1px tömör #ccc; padding - top : 1px ; szélesség: 255 képpont

Még ha mindent jól csinált is, mindenképpen ellenőrizze az eredményeket speciális szolgáltatás, függetlenül attól, hogy webhelye megfelel-e a mobil verziónak vagy sem. A használhatóság ellenőrzése mobileszközökön. Adja meg webhelye URL-jét, és nézze meg, mire reagál a Google. Nagy valószínűséggel a szolgáltatás azt írhatja Önnek, hogy az erőforrása nincs ellenőrizve.

A frissítés után a Google azt javasolja, hogy nyissa meg a css fájlokhoz, plugin fájlokhoz, témákhoz, szkriptekhez és képekhez való hozzáférést a robot számára, csak ezt követően tudja sikeresen átmenni a teszten. Ehhez meg kell nyitnia a szükséges fájlok összes elérési útját a a robots.txt fájlt, hogy a robot láthassa azokat. Íme egy példa a robots.txt fájlomból:

/wp-content/themes/*. jpg

Engedélyezés : / wp - content / themes / * . png

Volt egy érdekes eset, amikor 2015 elején adaptív elrendezést készítettem az oldalról. Az ügyfél minden szót nagyon komolyan vett, és adaptív kialakítást akart minden képernyőfelbontáshoz, amelyet a Chrome-bővítményben megmutattam neki. Nem vitatkoztam az ügyfél vágyával, és teljesen az összes lehetséges opcióhoz igazítottam. A tulajdonos - Barin - kétszer annyit fizetett az igazságnak.

Reszponzív kialakítású psd fájl

Ha szeretnél magadnak új egyedi dizájnt rendelni, az nem feltétlenül szükséges, de célszerű, hogy a vágyaid psd elrendezése legyen nálad. BAN BEN PSD fájl Lesz egy teljesen kész dizájn mobileszközökre és táblagépekre. A tervező látni fogja és megérti, hogy mit akar tőle. Ha nem tud magad rajzolni egy psd-elrendezést. forduljon szakemberekhez vagy a szabadúszó tőzsdéhez. A tőzsdén sokakat találsz, akik szeretnének ilyen jellegű munkát végezni és csekély összegért. Nem kell teljesen a semmiből elkészítenie a kész elrendezést, az adaptív tervezés nem igényel sok erőfeszítést.

Hogyan jelenik meg a webhely menüje, mi követi majd, és így tovább. Néha nem egyszerű elkészíteni egyes blokkok megvalósítását, kár lesz, ha a munkája kárba megy. Hadd emlékeztesselek még egyszer, forduljanak azokhoz, akik ismerik és értik a munkájukat.

PSD elrendezési követelmények

Mielőtt elrendezést rendelne egy tervezőtől, először határozza meg, mit szeretne látni rajta. Annak érdekében, hogy a jövőben ne javítsa ki a már elvégzett munkát, döntse el maga, mit és hol helyez el. Hol lesz a blogmenü, hol lesz az oldalkereső (szükség van rá egyáltalán a te verziódban). Ahogy másoktól is látható, sokan feláldozzák az oldalsávjukat. Ennek eredményeként megnyílik a telefonon egy blokk menüvel, kereséssel és a rekordok listájával. Tovább Ebben a pillanatban ez a leggyakrabban használt lehetőség.

Természetesen semmit nem értesz a behúzásokhoz, szegélyekhez... minek és hogyan kell az elrendezésben szereplő szabványok szerint (nincs rá szükség), de néhány dologra mindenképpen figyelj. Ez segít abban, hogy tájékozódjon, mielőtt elkészíti a TOR-t a tervező számára.

1. Az elrendezésnek formátumban kell lennie PSD(magától).
2. A tervezés minden elemének külön rétegen kell lennie.
3. Ne tölts fel túl sok fényképet.
4. Ne használjon túl sok betűtípust.
5. Használjon szabványos betűtípusokat.
6. Minden csak a lényeges.
7. Semmi extra.
8. Készítse el saját legördülő menüjét.

A leggyakoribb képernyőfelbontások

Ahogy korábban leírtam, nem szükséges teljesen testreszabni az oldalt minden képernyőfelbontáshoz. Elég kiválasztani a leggyakoribbakat, amelyekre kereslet van. Természetesen minden az Ön kívánságaitól függ... csináljon, amit akar). Megpróbálok néhány példát hozni a leggyakoribb megjelenítési lehetőségekre (Minimális szélesség és maximális szélesség). Valójában nem csak a feltüntetett lehetőségeket kell figyelembe venni, hanem egy kicsit több is van belőlük.

• Álló és fekvő okostelefonok (minimum 320 px – maximum 480 px);
• Álló és fekvő táblagépek (minimum 768 px – maximum 1024 px);
• Számítógépek és laptopok (minimum 768 px – maximum 1024 px);
• Számítógépek és laptopok (legalább 1824 px);

Mindezek után a kimenet a webhely normál adaptív elrendezése lesz. Az oldalak jól fognak kinézni a legkisebb képernyőkön is. Minden oldal skálázható és áttekinthető lesz, tableteken és telefonokon nem tűnnek ferdének.

A kód egyes részeinek beillesztésének köszönhetően az elrendezés minden böngészőben normálisan fog megjelenni, beleértve a folyamatosan problémás IE-t is. És teljesen mindegy milyen motorod van, a joomla vagy a wordpress. Egyébként nekem személy szerint öröm, hogy adaptív weboldalelrendezést készíthetek a WordPress motoron.

Üdvözlet, alkalmi látogatók és a blogoldal rendszeres olvasói!

Az oldal fennállása alatt többször változtattam a sablonon, sőt a semmiből létrehoztam a sajátomat.
Az új sablon kiválasztásakor az egyik fő feladat az oldal adaptív elrendezése minden képernyőfelbontáshoz.

A cikk rövid vázlata:

Egy korábbi cikkben már írtam, hogy miért van szükség rá. De hogyan lehet elérni ezt az alkalmazkodóképességet?

Erre van különböző utak. Van aki javascriptet használ, van aki mást. De szerintem a legegyszerűbb és A helyes út reagál a CSS-re.

Hogyan készítsünk reszponzív weboldal elrendezést

Először, ha adaptív weboldal-dizájn elkészítését vállaltad, a címkék között illessze be a következő kódot:

Mekkora bolond voltam, hogy ezt nem tettem meg azonnal, amikor megpróbáltam adaptív elrendezést készíteni az oldalról !!!
A mobilböngészők problémája a webhely elrendezésének méretezése, akár adaptív.

Képzeld, rajzolok egy tervet, majd leírom az összes szükséges stílust és kérést, ellenőrzöm az oldal alkalmazkodóképességét különböző felbontásokban. Úgy tűnik, minden jó! De amikor megnyitom a blogomat az okostelefonomon, azt látom, hogy az oldal egyszerűen összezsugorodott. Nem alkalmazkodott a mobileszközhöz, hanem egyszerűen lecsökkentette a betűméretet, képeket stb.

Hogy hogy? Elkezdtem duplán ellenőrizni az összes stílust, hogy jól írtam-e le az osztályokat, ennek eredményeként eljutottam odáig, hogy javascripten keresztül ellenőriztem a böngészőablak szélességét px-ben. Megdöbbentem. Laptopon ellenőrizve 1024px-es eredményt kaptam, és nagyjából ugyanezt az eredményt kaptam, amikor okostelefonon megnyitottam az oldalt!

De ez nem lehet!

Kiderül, ha nem írja elő a fent jelzett kódot, mobil böngésző nem érti, hogy a webhely reszponzívés megpróbálja egyszerűen lecsökkenteni az oldal oldalát, hogy elférjen egy mobiltelefon kis képernyőjén.

Hülyeségem és hozzá nem értésem miatt sok időt veszítettem. De most örökre emlékszem))).

Reszponzív CSS-médialekérdezések

Ahhoz, hogy reagáljon a CSS-re, médialekérdezéseket kell használnia.

Hogy van ez? Igen, nagyon egyszerű. A CSS-fájlba olyan lekérdezéseket kell írnia, mint:

@média képernyő és (min. szélesség: 1440 képpont) és (max. szélesség: 1599 képpont)( )

Ez a kód azt jelenti, hogy a „( ) ” közé zárt stílusok legalább 1440 képpont és legfeljebb 1599 képpont szélességű képernyőkön működnek.

Ez azt jelenti, hogy az oldalelemek azon stílusait, amelyeket a képernyőfelbontástól függően kell adaptálni, minden lehetséges képernyőszélességhez külön kell írni.

A legfontosabb képernyőfelbontások a reszponzív elrendezéshez

• 320 képpont- Mobil eszközök (álló tájolás);
• 480 képpont- Mobil eszközök (fekvő tájolás);
• 600 képpont- Kis tabletták;
• 768 képpont- Táblagépek (álló tájolású);
• 1024 képpont- Táblagépek (fekvő) / Netbookok;
• 1280 képpont vagy több- PC.

Ezekre az engedélyekre kell összpontosítania, és különös figyelmet kell fordítania az adaptív elrendezésben. Ezek a képernyőfelbontások leggyakoribb típusai.

Bootstrap reszponzív kialakítás

Nagyon kényelmes a bootstrap használata adaptív elrendezés létrehozásához. A kényelem az, hogy minden stílus a blokkok, gombok, táblázatok stb. adaptálásához. már regisztrált a bootstpap-ban. Csak azt kell kitalálnia, hogy melyik osztályt melyik elemhez rendelje.

A kezdéshez töltse le a bootstrap legújabb verzióját, és csatlakoztassa a webhelyéhez. Kérjük, vegye figyelembe, hogy a stílusok és szkriptek WordPress-hez kapcsolásának megvannak a maga sajátosságai.

A bootstrap elrendezése abban különbözik, hogy a blokk vagy képernyő szélessége 12 egyenlő részre van osztva. Egy adott osztály blokkhoz való hozzárendelésével pedig beállíthatja a blokk szélességét a kívánt részszámra.

Ez a kialakítás például lehetővé tesz egy széles blokkot a 8 rész szélességű tartalomhoz, egy keskenyet pedig a 4 képernyőrész szélességű oldalsávhoz:

A blokkok szélességét a rendszer automatikusan kiszámítja a képernyő szélességétől függően. És ha mobileszközön nézzük, ezek a blokkok egymás alá tolódnak.

A blokk behúzását az éltől is beállíthatja, ismét a kívánt darabszámmal. Például ez a konstrukció:

Ezzel egy 10 rész széles blokkot hoz létre, amelyet balról a képernyő 1 részével behúz.

Ha rájössz, akkor a bootstrap használata nagyon felgyorsítja a munkát. Sőt, ezek a stílusok határozottan helyesen működnek, és nem lesz semmi ferde az oldalon.

A jövőben tervezek néhány oktatóanyagot közzétenni a bootsrap használatáról. Ezért azt tanácsolom, hogy ne hagyja ki ezt a pillanatot.

Weboldal reszponzivitás ellenőrzése

De felmerül a kérdés: hogyan ellenőrizhető a webhely alkalmazkodóképessége? Itt médialekérdezéseket írt CSS-ben, csatlakoztatta a bootstrapet és használja a szükséges osztályokat. És hogyan ellenőrizheti, hogy a webhely megfelelően alkalmazkodik-e az összes képernyőfelbontáshoz.

Nagyon pontos és fontos ingyenes szolgáltatás, amely tiszteletet és hálát érdemel a webhelyek adaptív elrendezésével foglalkozó webmesterek és elrendezéstervezők részéről.

Nos, hogy tetszik a cikk? Minden tiszta? Ha nem, írd meg kommentben, közösen kitaláljuk.

Igen, egy reszponzív weboldal kialakításához keményen kell dolgozni. De ezeket a munkákat kedvező hozzáállással jutalmazzák a keresőmotorok webhelyéhez, és ami a legfontosabb, a webhely látogatóihoz.

Két fő tévhit létezik a reszponzív webhelyről. Vannak, akik úgy gondolják, hogy ez csak a webhely csökkentett megjelenítése, amelyben az elemek tömörítve vannak. Mások ragaszkodnak ahhoz, hogy a reszponzív dizájnt a webhely mobil változatával egyenlővé tegyék. Ebben a cikkben megjelöljük az i-t, és elmondjuk, hogy is van ez valójában.

Mi az adaptív elrendezés

A reszponzív egy olyan elrendezés, amelyben a webhely helyesen jelenik meg különféle eszközök annak köszönhetően, hogy az elemek dinamikusan alkalmazkodnak különféle engedélyek képernyő.

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 lép be az oldalra: 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 funkcionalitás teljes mértékben megmarad.

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

Ma már nem kell tanulmányokat, statisztikákat keresni annak bizonyítására, hogy milyen gyakran férnek hozzá az internethez tabletről és mobiltelefonok. 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 rendeléséhez senki nem megy először haza, hogy a számítógéphez jusson, hanem gyorsan a helyszínre megy telefonról, közben egyéb dolgokat is csinál. Amikor felvetődik a vásárlás ötlete, a legegyszerűbb, ha azonnal felkeresi az internetet, összehasonlítja a versengő üzletek ajánlatait, és késedelem nélkül megrendeli az árut. És számtalan ilyen példa van!

A reszponzivitás egy modern weboldal egyik fontos és nélkülözhetetlen 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 a navigáció, a blokkok nem skálázódnak, nehéz ujjal eltalálni a kívánt hivatkozást - ennek eredményeként a felhasználó bosszús, nem tudja végrehajtani a célműveletet, időt veszít a ferde megjelenítés kiderítésében, és elhagyja az erőforrást. És akkor ez nem jön vissza neki. É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 webhely

A nem reagáló webhelyeket könnyű felismerni – táblagépről vagy telefonról nézve 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 a betűtípus olvasható legyen, és kicsinyítenie kell hogy megtalálja a kívánt részt vagy jelentkezési lapot.

A reszponzív 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úlyt a jelentős információkra helyezik, és a másodlagos adatokat eltávolítják vagy összecsukjá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 blokk kerül bele. Ugyanakkor a felhasználónak nem kell változtatnia a léptéken: minden egyszerű és érthető még egy kis képernyőn is.

A reszponzív oldalak másik jellemzője a jelentős elemek kinagyítása, így a felhasználó könnyedén megnyomhat egy gombot a képernyőn az ujjával, vagy követhet egy 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 tudnivalók a reszponzív webhelyekről

1. A reszponzív webhely és a mobilverzió nem ugyanaz.

Amikor egy reszponzív webhelyről beszélünk, akkor azt értjük, hogy ez az egyik webhely különböző eszközök. 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ű webhely, 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ényelmét a mobil eszközökről érjék el az oldalt: mi az, ami számukra nagyon fontos az asztali verzióból, illetve mi a redundáns és könnyen eltávolítható.

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

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

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

Elsősorban az eredeti tartalomstruktúra megőrzéséhez kapcsolódnak a képernyő méretének változása esetén. Az adaptív változatban gyakran megtagadjuk a csúszkát és a nagyot háttérképek, amelyek az asztali verzióban vannak, és nem használnak Flash-t. Általában a legjobb megoldást ajánljuk.

De az is előfordul, hogy a tervezésről abban a változatban állapodnak meg, amelyhez az ügyfél ragaszkodik, és a kész elrendezés kényelmetlennek bizonyul. Ezután minden változtatás megtörténik járulékos költség, mivel szigorúan a TOR szerint 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éptől vagy laptoptól asztali számítógépig. A reszponzív tervezés általában arra összpontosít konkrét eszközök amelyből az ügyfél a legnagyobb forgalmat generálja.

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

Azok az összetett funkcionalitású és/vagy tartalommal rendelkező webhelyek, amelyek észleléséhez elegendő képernyőterületre van szükség, nagyobb valószínűséggel rontják a teljes válaszkészséget. 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 megjelenítéshez különböző böngészők megfelel a böngészők közötti kompatibilitásnak.

Feltétlenül adja meg ezt az elemet a TOR-ban, ha Önnek fontos, hogy a webhely azonos módon jelenjen meg a különböző böngészőkben. Ellenkező esetben a böngészők régebbi verzióiban előfordulhat, hogy a webhely hibásan jelenik meg, és olvashatatlan betűtípusokat eredményezhet. 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 a webhely adaptív elrendezésének létrehozásához. Jobb, ha a fő webhely fejlesztésének szakaszában gondoskodik az adaptív tervezésről, és írja be a TOR-ba. 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 ügyfeleinknek, hogy először készítsék el a tervet és csak azután az elrendezést.

Az oldal jellemzőinek és műszaki jellemzőinek ismerete nélkül lehetetlen az elrendezésben tájékozódni.

Egy adaptív vállalati weboldal elrendezése jellemzően átlagosan 15 napot vesz igénybe, az adaptív online áruház elrendezésének időtartama közvetlenül függ a webhely összetettségétől.

Soha nem adjuk át az elrendezést a következő szakasznak - a programozásnak - addig, amíg a kliens nem ellenőrizte az oldal adaptálhatóságát és minden elemének a TOR szerinti helyes működését.

Maradtak a kérdések: vagy mobil verzió? Hívjon ingyenes szám 8 800 775-17-11, vagy hagyja meg a számát és mi visszahívjuk és elmondunk mindent.