Блог Eлены Изотовой
Как продавать свои знания и опыт в интернете,
зарабатывая на этом больше, чем твой начальник?

Зачем нужен адаптивный дизайн и как его создать

Автор: / Дата: в 20:07
Блог Eлены Изотовой

Зачем нужен адаптивный дизайн и как его создать

Здравствуйте мои дорогие гости и постоянные подписчики. Многие из вас уже смогли создать свой интернет-ресурс, изучая мои постоянные обзоры. Однако на свой электронный ящик я получаю письма с просьбами о помощи в настройке мобильной версии сайта. В связи с этим я решила собрать имеющиеся у меня знания и поведать всем о том, что такое адаптивный дизайн, как сделать его самостоятельно и почему стоит остановиться на нем.

Мой блог был создан с целью помощи начинающим владельцам сайтов. В связи с этим не стесняйтесь, а присоединяйтесь к числу довольных читателей, чтобы ежедневно получать информацию, полезную для любого интернет-предпринимателя.

Хотите сделать свой сайт лучше, чтобы увеличить поток новых посетителей, следовательно, повысить свой доход, тогда запомните одно правило: «Читайте мои обзоры и применяйте полученные знания на практике».

Пожалуй, это было небольшое лирическое отступление, но я не хочу растягивать его. Давайте начнем погружаться в мир управления сайтами, CMS, HTML и искать пути получения желаемого в обход этих страшных букв.

Что за дизайн такой – адаптивный

Раз вы решили прочитать представленный обзор, значит, заметили тенденцию усовершенствования портативной электроники. И это правда, ведь производители не стоят на месте, над их продукцией ежедневно трудится огромное количество аналитиков, разработчиков и т.д. В связи с этим современному человеку стало проще приобрести смартфон, нежели ноутбук. Почему это произошло?

На рынке современной техники можно заметить сотовые телефоны и планшеты различных размеров и функциональности. Многие из них практически заменяют стационарный компьютер. Тогда напрашивается вывод: «Если не видно разницы, можно приобрести мобильное устройство и использовать его по назначению в любое время». Логично?

Таким образом, человек, стараясь экономить свои драгоценные ресурсы практически полностью переходит на мобильное устройство. Но, вот не задача – не все сайты удобно просматривать. Одни долго грузятся, другие приходится постоянно пролистывать, а это так тормозит рабочий процесс. Вы согласны?

Вот такие жалобы стали получать популярные поисковые системы. И что им оставалось делать? Пришлось обязать всех владельцев интернет-ресурсов предоставить своим пользователям адаптивный дизайн или мобильную версию сайта. Чтобы это подействовало, Яндекс и Гугл внесли изменения в работу своих роботов и с конца 2015 года, они стали пропускать в список выдачи только платформы и одностраничники, соответствующие выдвинутым требованиям.

Вот здесь и возникает вопрос: «А что подразумевается под адаптивным дизайном»? Это своеобразный макет вашего интернет-ресурса, заточенного не под определенное разрешение экрана устройства, используемого для его изучения, а может свободно подстраиваться под различные. Другими словами, это дизайн сайта, обеспечивающий корректное отображение размещенного материала на любых устройствах.

Кто-то может сказать: «Зачем мне делать адаптивный дизайн, если я могу создать мобильную версию и использовать ее»? Давайте разберемся:

  1. Мобильная версия предназначена для просмотра на устройствах, имеющих малое разрешение, следовательно, открыть такой сайт на компьютере будет проблематично. Возможно, вам и получится его просмотреть, но придется постоянно производить дополнительные манипуляции (увеличивать шрифт).
  2. Если вы создаете мобильную версию, то адрес вашего интернет-ресурса изменится (добавится вставка mobile), а это не совсем удобно.
  3. Мобильная версия – своеобразный отдельный ресурс, за которым вам придется отдельно следить, следовательно, это двойная работа. Почему? Чтобы не перегружать сайт и сделать его легкооткрывемым, вам придется произвести чистку материала (произвести сокрытие блоков дополнительных моментов, оставив ключевые, и предложить возможность посещения полной версии сайта).
  4. Ваш стандартный сайт не будет открываться на мобильных устройствах, поэтому может снизиться показатель посещаемости.

 

Что касается адаптивного дизайна, то:

  • вам не нужно менять url своего сайта;
  • достаточно произвести небольшую корректировку в настройках макета;
  • не нужно добавлять себе работу по администрации сразу двух ресурсов, ведь вы просто изменили параметры отображаемого макета;
  • ваш ресурс откроется на любом устройстве (за исключением кнопочного телефона, не имеющего доступа к интернету);
  • блоки вашего контента легко перемещаются и подстраиваются под экран, на котором происходит изучение интернет-ресурса;
  • изображения легко трансформируются, не теряя своего качества (это позволяет экономить интернет-трафик ваших посетителей);
  • вы не потеряете своих клиентов только потому, что они стали использовать планшеты и смартфоны, наоборот, сможете приумножить их количество, следовательно, повысить свой доход.

 

Как вы поняли, адаптивный дизайн имеет ряд преимуществ над мобильной версией сайта. Поэтому, если вы хотите улучшить показатели своего сайта, то выбирайте такой макет и не перегружайте себя ненужной работой.

Этапы создания макета адаптивного дизайна

Тем, кто уже имеет свой сайт, достаточно внести корректировки в готовый макет (изменить его длину). Как сделать это? Вы сможете узнать из моего предыдущего обзора (вставить ссылку на статью про адаптивный дизайн) или читайте ниже. Я же поделюсь этапами разработки адаптивного макета с нуля.

  1. Обязательно создайте резервную копию уже имеющегося макета.
  2. Теперь нужно, это решить, под какие разрешения делать макет. Анализ используемых мобильных устройств позволили выявить эти показатели: 320 px, 480 px, 768 px, 1024 px, 1280 px (они зависят от размеров экранов). Естественно, если ваш макет ведет себя отлично на определенных промежутках, то не стоит так досконально его настраивать.
  3. Далее, создается модульная сетка, позволяющая распределить имеющиеся блоки на сайте и сделать их доступными для пользователей мобильных устройств.
  4. В имеющееся тело макета вставляется специальный метатег viewport. Чтобы у вас не возникало вопросов, я покажу как в каком виде его нужно вставлять (это полезно для всех тех, кто незнаком с html).

Вот так выглядит команда: <meta name=viewport content=«width=device-width, initial-scale=1.0»>, где: Width – возможность растягивания макета на ширину используемого экрана, а атрибуты 1.0 – подразумевают масштабирование вашего творения в соответствии с 1:1.

  1. После этого необходимо произвести указание параметров media queries (запросы). Вот как это выглядит:

@media screen and (max-width: 1000px) {

. class {

свойство: значение;

}

}

Где @media screen – тип запроса (распознавание устройства), max-width: 1000px – характеристика, ниже которой будет происходить растягивание макета. Обратите внимание — вот на что: ширина должна указываться в процентах. Тогда вы получите то, о чем мечтали. Если с этими настройками возникли вопросы, то обратитесь к обзору «Как сделать адаптивный макет сайта» (поставьте ссылку), там все расписано подробно.

  1. Осталось совсем немного – произвести проверку работоспособности выполненных изменений. Как это сделать? Открыть в браузере свой сайт и произвести уменьшение экрана (так вашему взору предстанет ваш ресурс «глазами посетителя»).

Пожалуй, это все, что я хотела рассказать вам об адаптивном дизайне сайта. Если у вас остались вопросы, то вы можете смело задавать их мне, заполнив форму для комментариев. Помните о том, что этот интернет-ресурс был создан с целью помощи начинающим интернет-пользователям, осуществлять свои задумки.

Вы также можете поделиться полученными знаниями со своими друзьями в социальных сетях. Для этого достаточно кликнуть по клавишам с соответствующим названием, размещенными прямо под обзором. Спустя пару секунд, ваши подписчики смогут получить доступ к этой информации. Несложно, правда?

На этом все. Пришло время сказать вам: «До свидания». Но я дополню, что буду рада вновь встретиться с вами на просторах своего блога.

С уважением, Елена Изотова.

1 звезда2 звезды3 звезды4 звезды5 звезд (1 голосов, средний: 5,00 из 5)
Загрузка...
Добавить комментарий
Имя*
Mail*
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: