А пока мёд растворяется в чашечке липового чая, меня вдруг посетила мысль, а не написать ли немного о мобильных версиях, интерфейсах, отзывчивом дизайне и прочих мобильных радостях так, чтобы было понятно.

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

Респонсив дизайн или мобильная версия?

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

Выдача в поиске, клиенты и снова выдача

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

Во-вторых, банально клиенту удобнее, он проведет больше времени на сайте и возможно он захочет стать вашим клиентом. И это опять скажется на выдаче в поиске. Так как поисковики в свою очередь, опять же умеют и знают интересен ли ваш сайт и сколько времени на нем проводят и опять же поднимут или опустят вас в выдаче, в зависимости от…

Как понять есть ли респонсив дизайн?

Если ли подобный дизайн у сайта или нет можно видеть просто меняя размеры окна браузера. Ну или просто откройте свой сайт на мобильном, планшете и десктопе и сравните. Есть отличия или нет. Если нет, то вы теряете клиентов.

Что делать если нет?

Прямо скажем, это не идеальная ситуация. Если у вас есть графические баннеры, вместо фона + текст. Если у вас какие-то тексты не тексты, а опять же картинки. То это создаст некоторые затруднения. Непродуманная верстка опять же создаст проблемы. Вы можете испытывать проблемы с поиском разработчика под эту работу в зависимости от того на чем написан ваш сайт и в каком состоянии. То есть да, отчасти затруднения могут возникнуть.
Хорошая новость в том, что да, респонсив можно сделать постфактум. Это может быть будет не настолько прекрасный и продуманный интерфейс, как если бы его делали изначально таким, но однако же, часто это вполне реально.

Стоит ли закладывать его в самом начале?

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

К чему это применимо?

Ко всем сайтам. Коммерческим в особенности. Интернет-магазинам. Каталогам. Интерфейсам. Игровым. Бытовым. Всем.

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

Подытожим. Если вы собираетесь сделать сайт, респонсив дизайн — это очень важная деталь. Не единственная, но важная. Если вы уже сделали сайт, то обратите внимание на то, есть ли у вас подобный механизм. И если нет, то лучше исправить.

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

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

Адаптивный дизайн и верстка Адаптивный дизайн и верстка Адаптивный дизайн и версткаАдаптивный дизайн и верстка