Как да си направим адаптивен дизайн на сайта и какво е

Знаете ли как потребителите да виждат вашия сайт за мобилни устройства? За щастие, за да се провери има отлично обслужване - responsinator.com

Какво да се прави? Изходна две: да оставите всичко както си е и да гледа как други проекти заобиколят твой в резултатите от търсенето, или да направите сайта си дизайн адаптивна.

Какво е адаптивен дизайн

Отначало аз не виждам разликата между адаптивно и "каучук" оформление, където блокови размери варират в зависимост от ширината на екрана. Въпреки това, има разлика.

Адаптивен дизайн не е просто простира или се свива в широчина, той се адаптира към размера на екрана, понякога напълно се променя стила на блоковете.

Най-простият пример: района съдържание се простира по цялата ширина на екрана, а страничната лента или прехвърля надолу или дори да изчезне от страницата. Или меню от обичайната хоризонталата се превръща в падащия списък.

Как да си направим адаптивен дизайн за вашия сайт

В зависимост от вашия бюджет и CSS / HTML познания могат да бъдат няколко.

Поръчайте адаптивно оформление на свободна практика

Най-верни, по мое мнение, опция, а той е най-непопулярните. Защото забавно не е евтино. И все пак, ако ресурсите позволяват, и няма никакво желание да се разберат тънкостите на оформлението, по-добре е да се намери студио или на свободна практика, която се адаптира своя шаблон за мобилни устройства или да направите нова. И как да се провери работата му върху устройства с различни резолюции, вече знаете - responsinator.com да помогне.

Намери готовия дизайн

Напоследък почти всички дизайнери се опитват да адаптират своите шаблони за мобилни устройства. Можете да търсите в завършен дизайн, например, тук:

• www.templatemonster.com - един от най-популярните колекции на платени шаблони за различни CMS и прости HTML-страници.
• www.templatemo.com - много безплатни опции за модерен дизайн.

Тази опция е за тези, които не упражнява изключителен дизайн и е в състояние да направят свои собствени промени в кода, така че да се направи шаблон уникален.

използване на рамки

Рамка (рамка) - можете да кажете рамките на шаблона, нейните основни файлове и блокове на окото. Дизайнерите ги обичат За тяхно удобство и икономия на време, тъй като тя е готова да "риба" шаблон Ви позволява да не се губи време в рутина. Ако сте запознати с рамката, да ги използвате за създаване на адаптивен дизайн - перфектното решение.

Огромен списък с адаптивни рамки за всеки вкус може да бъде намерена на Хабре. Но повечето от тях са доста сложно да се използва и е трудно да се мащабира. Поради това, тези, които обичат минимализъм, препоръчвам друг списък на адаптивните рамки белодробни Beloweb.ru. В същото време външния вид на блога, има много полезна "vkusnyashek" за дизайнери и уеб дизайнери.

Уверете се, самото оформление

Този метод е за тези, които не търсят лесни начини и иска да подреди нещата сами по себе си. В действителност, за да направите вашия шаблон адаптивна, ще трябва да използвате две неща:

Прозорецът за мета тагове
Кое определя типа на устройството, от което един посетител дошъл на сайта и да зададете правилната ширина на екрана. Трябва само да копирате кода в главата на вашия сайт.

правило @media
Благодарение на които можем да предпише различни стилове за едни и същи единици в CSS-файл. Тя изглежда така:

В този пример #left блок има ширина от 600 пиксела и е разположен в ляво на ширината на блок #right на 400 пиксела. Но ако разделителната способност на дисплея е по-малка от 1010 пиксела, премахваме опаковка от двете единици и да ги простират до 98% от ширината на екрана.

И така, вие трябва да предписват правила при следните размери на екрани:

Пълен списък на разрешения могат да бъдат намерени на responsinator.com или докладва Yandeks.Metriki за вашия сайт (раздел Технологии / резолюция на дисплея). С две думи, тези, които са запознати с оформлението на сайта, няма да е трудно да се разбере на този въпрос.

Но ако не сте напълно уверени в своите способности, препоръчвам курс Mihaila Русакова HTML5 и CSS3 с нула до Гуру.

Знаеш ли, аз рядко се позовавате на платени курсове (защото никога не съм се препоръча нещо, което никога не се използва), но това е наистина най-добрият материал за обучение на оформлението на всичко, което някога съм се види. Това е благодарение на Майкъл шаблон на моя блог е вече не само се адаптират към различните резолюции на екрана, това е по-лесно за предишната версия и по-добре оптимизиран за търсачките.

Един добър намек ... :-) и препоръчва услуга.
Разбираемо е, разбира се, че се нуждаем пригодена за мобилни устройства дизайн, но както ти правилно посочи тя струва много пари ... предполагам. Ако се съди по факта, че имате дизайн се е променило, вече сте натрупали опит. Без много разкриване на тайни, не казвай на каква цена гама от това удоволствие ще струва?

Кай, бих удоволствието да предложи своята помощ, но се страхувам, че ще бъде трудно да се адаптират шаблон. Твърде сложно го структура. Освен това, можете да се опитате да направите дизайн на базата на стандартния шаблон, сега те имат всичко е адаптивна WP.

Да, имам сложен модел. Но смятам да промените по-късно. Вече е необходимо ...
mozgovat необходимо. :-)

Някъде по fralanse за адаптиране на дизайна ще се 3000-4000r. По-изгодно е да се промени шаблона на адаптивна, благославяйки ги готов за мнозина.

Адаптивен дизайн - сега е най-болезнен въпрос.
На другия ден, направих проверка на търговски обект, те повече от 1000 души на ден бързам от мобилните си устройства, те са в тази Traff Direkte купите за чудовищното пари - и не адаптивни оформление. И ФИГ знае как да се римейк на сайта - необходимо е да се разгледа спешно за добър специалист в адаптивната оформление, което не е достатъчно.

Тези магазини - хиляди, който закупи мобилен Traff, но тя не се интересуват, че използваемостта е адекватен.

Погледнете вашия сайт от мобилен, всичко е наред. Що се отнася до блога Борисов, той има мобилна версия. Не е адаптивна, а именно мобилни. Това е още по-добре.

За да създадете сайт с адаптивен дизайн с ясна семантичен налагане използване ара. Аз бих препоръчал.