Hogyan készítsünk egy adaptív design a helyén, és mi az,

Tudja, hogy a felhasználók láthatják a helyszínen mobil-barát? Szerencsére, hogy ellenőrizze van egy kiváló szolgáltatás - responsinator.com

Mit kell tenni? Nyomtató két: hagyni mindent, ahogy van, és nézni, ahogy más projektek megkerülni a tiéd a keresési eredményeket, illetve, hogy a webhely tervezési adaptív.

Mi reagáló tervezés

Eleinte nem láttam a különbséget adaptív és a „gumi” elrendezés, ahol a blokk mérete változhat attól függően, hogy a szélessége a képernyőn. Van azonban egy különbség.

Az adaptív tervezés nem csak nyúlik, vagy zsugorodik, szélessége pedig alkalmazkodik a képernyő mérete, néha teljesen megváltoztatja a stílus a blokkokat.

A legegyszerűbb példa: a tartalmi terület teljes egészére kiterjed szélessége a képernyő, és az oldalsáv, vagy át lefelé, vagy akár eltűnnek az oldalról. Vagy menü a szokásos vízszintes alakul legördülő listából.

Hogyan készítsünk egy reagáló design webhely

Attól függően, hogy a költségvetés és a CSS / HTML tudást lehet több.

Rendelje adaptív elrendezése a szabadúszó

A legtöbb helyes, véleményem szerint, egy lehetőség, és ő a legnagyobb népszerűtlen. Mivel fun nem olcsó. És mégis, ha források lehetővé teszik, és nincs vágy, hogy megértsék a bonyolult az elrendezés, akkor jobb, ha talál egy stúdióban vagy szabadúszóként, amely alkalmazkodik a sablon mobileszközök vagy, hogy egy újat. És hogyan kell ellenőrizni munkájáért eszközök különböző felbontású, akkor már tudom - responsinator.com segíteni.

Keresse meg a kész design

Mostanában szinte minden a tervezők igyekeznek alkalmazkodni a sablonokat a mobil eszközök. Kereshetünk a kész design, például itt:

• www.templatemonster.com - az egyik legnépszerűbb gyűjteménye fizetett sablonok különböző CMS és egyszerű HTML-oldalak.
• www.templatemo.com - Sok ingyenes lehetőségeket a modern design.

Ez a lehetőség azok számára, akik nem folytat olyan exkluzív design és képes arra, hogy saját változtatásokat a kódot, így, hogy egy sablon egyedi.

használat keretek

A keret (keret) - meg tudja mondani a sablon keret, az alapvető fájlokat és blokkok háló. A tervezők szeretik őket a kényelem és időmegtakarítás, mert kész a „hal” sablon lehetővé teszi, hogy nem vesztegeti az idejét a rutin. Ha ismeri a keret, használja őket, hogy hozzon létre reagáló design - a tökéletes megoldás.

Egy hatalmas listát adaptív keretek minden íze megtalálható ügyéről. De a legtöbbjük meglehetősen bonyolult a használata, nehezen megvalósítható. Ezért azok, akik szeretik a minimalizmus, azt javasoljuk, egy másik listát a Lung adaptív keretek Beloweb.ru. Ugyanakkor nézd meg a blog, van egy csomó hasznos „vkusnyashek” a tervezők és webes tervezők.

Állítsa be az elrendezést magát

Ez a módszer azok számára, akik nem keresnek egyszerű módon, és azt akarja rendezni a dolgokat a saját. Tény, hogy a sablon adaptív, akkor kell használni a két dolgot:

Viewport meta tag
Amely meghatározza az eszköz típusát, ahonnan a látogató érkezett a helyszínre, és állítsa be a helyes szélessége a képernyő. Csak másolja be a kódot a feje a webhelyen.

@media szabály
Amelynek köszönhetően tudjuk felírni különböző stílusokat ugyanazon egységek egy css-fájlt. Úgy néz ki, mint ez:

Ebben a példában #left blokk szélessége 600 pixel és van elhelyezve a bal oldalon a blokk #right szélessége 400 pixel. De ha a kijelző felbontása kisebb, mint 1010 pixel, távolítsa el a csomagolást a két egység, és nyújtsd őket 98% a képernyő szélességét.

És így meg kell szabályokat írnak elő a következő méretben kapható:

A engedélyek teljes listáját megtalálható responsinator.com vagy jelentse Yandeks.Metriki webhely (Section Technology / kijelző felbontása). Röviden, azok számára, akik ismerik az elrendezés a weboldal, nem lesz nehéz megérteni ezt a kérdést.

De ha nem teljesen biztos a saját képességeit, ajánlom a tanfolyam Mihaila Rusakova HTML5 és CSS3 Zero Guru.

Tudod, én ritkán adnak utalást fizetett tanfolyamok (mert soha ajánlani valamit, hogy ő soha nem használt), de ez tényleg a legjobb képzési anyag az elrendezés minden, amit valaha is látni. Ez köszönhető Michael sablon blogom mostantól nem csak alkalmazkodnak a különböző képernyőfelbontás, könnyebbé vált a korábbi verziót, és jobban optimalizált keresőmotorok.

Egy jó tipp ... :-) és az ajánlott szolgáltatást.
Magától értetődik természetesen, hogy szükségünk van kialakítva a mobil eszközök tervezése, de ahogy helyesen rámutatott, hogy sokba kerül a pénz ... azt hiszem. Ítélve az a tény, hogy van egy design változott, akkor már szereztek tapasztalatot. Nem sok közzététele titkok, ne mondd, hogy milyen árkategóriában ennek az élvezetnek fog kerülni?

Kai, azt örömmel nyújt segítséget, de attól tartok, nehéz lesz alkalmazkodni a sablon. Túl bonyolult ez szerkezet. Azt is megteheti, próbálja meg, hogy a tervezés alapján az alapértelmezett sablon, ezek most már minden adaptív WP.

Igen, van egy bonyolult mintát. De azt tervezem, hogy később megváltoztathat. Már van szükség ...
mozgovat szükség. :-)

Valahol fralanse kiigazítására a tervezési fog 3000-4000r. Jövedelmezőbb változtatni a sablont adaptív, megáldja őket kész sok.

Az adaptív tervezés - most a legfájdalmasabb kérdés.
A minap volt egy audit egy kereskedelmi oldal, akkor több mint 1000 ember egy nap rohan a mobil készülékek, ők ebben a forgalomban Direkte vásárolni a hatalmas pénzt - és nem adaptív elrendezése. Ábra és tudja, hogyan kell remake az oldalon - meg kell sürgősen keressen egy jó szakember adaptív elrendezés, ami nem elég.

Ezek a boltok - több ezer, aki megvásárolja a mobil forgalomban, de ez nem érdekli, hogy a használhatóság volt megfelelő.

Nézd meg a weboldal a mobil, minden rendben van. Ami a blog Borisov, van egy mobil változata. Nem adaptív, vagyis a mobil. Ez még jobb.

Ahhoz, hogy hozzon létre egy reagáló design site egyértelmű szemantikai bevezetését segítségével ara. Azt javaslom.