Заявка на услуги DST
Наш специалист свяжется с вами, обсудит оптимальную стратегию сотрудничества,
поможет сформировать бизнес требования и рассчитает стоимость услуг.
Адаптивный дизайн сайта
Адаптивный дизайн. Почему это важно?
До недавнего времени у многих компаний было две версии сайта – основная и мобильная. Они отличались и Ip-адресом и внешним видом, а зачастую страдало содержание. Веб-мастера создавали вариант для мобильного устройства по упрощенной версии. Это не всегда оправдывало ожидания заказчика. Сегодня на помощь дизайнерам приходит АДАПТИВНАЯ ВЕРСТКА.
Она дает возможность сделать ваш ресурс более интеллектуально понятным для посетителей. Причем становится неважным, с какого именно гаджета заходит человек. Где бы он ни открыл страницу, он не увидит пустых пробелов слева и справа, у него не будет проблем с навигацией.
Адаптивный дизайн. Что это?
Прежде всего, это способ выразить уважение посетителя ресурса. Суть подобного явления заключается в переработке страниц таким образом, чтобы у пользователей на всех устройствах была единая версия без ущерба для информационного наполнения. Как только загружается страница, сайт распознает тип гаджета, размер экрана и автоматически подстраивается под все параметры.
Выделяют следующие варианты адаптивной верстки:
Масштабирование управляющих элементов и кнопок. Экстерьер сайта при этом не меняется
Применение различных образцов макетов
Перемещение кнопок управления вниз
Использование «резинового» адаптивного дизайна
Но можно быть уверенным в одном: пользователи на любых устройствах увидят ваш сайт в неизменном и функциональном виде. Кроме того, отпадает необходимость изменять имя домена (пусть это всего лишь буква M).
Продвижение сайта с адаптивным дизайном
Как мы сказали выше, подавляющее большинство юзеров выходят в Интернет с мобильных гаджетов. Этому способствует ритм жизни мегаполиса и повсеместное распространение сети. Кроме того, есть фактор, про который обычно забывают: люди предпочитают совершать покупки, общаться, обмениваться файлами в рабочее время с личных телефонов, а не с рабочих стационарных компьютеров.
Поэтому сегодня адаптивная верстка – лучшее решение. Такие сайты занимают более высокие позиции в поисковой выдаче. Этому есть объяснения:
Адаптивная верстка позитивно оценивается поисковыми системами. У компании Google есть официальная рекомендация использовать адаптивный дизайн. Это делает более комфортным получение информации. При запросах в первую очередь будут предлагаться адаптивные сайты.
Остается один ip-адрес. Если у вашего сайта две версии: основная и мобильная, то трафик посещаемости поисковики будут считать отдельно. Это, в свою очередь, снижает ценность вашего сайта, и со временем вы начнете терять свои позиции. Поможет адаптивная верстка.
Вероятность «дублирования контента» сводится к минимуму. Информация вынужденно повторяется на двух версиях сайта. К сожалению, этого не избежать. Но поисковые системы устроены таким образом, что копирование одного и того же контента плохо влияет на позиции сайта в целом. Адаптивный дизайн убирает данное противоречие.
Уменьшается число отказов. Всем известно, что многие мобильные версии сайтов сделаны по облегченному варианту. Это значит, что пользователь может не найти ту информацию или товар, за которым пришел. Отсутствие адаптивной версии заставляет вашего потенциального покупателя переключаться на полную (что не всегда удобно на маленьком экране) или уйти к вашим конкурентам. Оба варианта поисковиками считаются как отказ, и это не может не сказываться на рейтингах вашего основного сайта. Кроме того, напомним, что изначально не все будут устанавливать мобильную версию.
Адаптивная верстка – один из самых эффективных способов сохранить своих пользователей и позиции в поисковой выдаче. Клиенты обязательно оценят корректную подачу информации и удобство. А вы сможете увидеть, как выросло количество посещений, уменьшилось число отказов. Адаптивный дизайн – грамотное вложение средств, которое обязательно окупится.
Если у вас есть вопросы о том как оптимизировать сайт под мобильные устройства, просто спросите специалистов DST Global (dstglobal.ru) в чате или оставьте комментарий ниже.
Адаптивный дизайн сайта
Напишите нам прямо сейчас, наши специалисты расскажут об услугах и ответят на все ваши вопросы.
Комментарии
Вам может быть интересно
Тема адаптивности сегодня как никогда актуальна, поскольку многие пользователи часто сталкиваются с проблемой невозможности использовать сайты с разных устройств. Если раньше веб-ресурсы создавались д...
JavaScript входит в число самых популярных языков программирования, а фронтенд-р...
Достаточно большое количество задач в верстке сейч...
Семантическая разметка сайта (микроразметка) – это...
Интернет меняется с каждым днем. Сегодня пользоват...
Новые комментарии
Выберите наиболее подходящую схему интеграции для нужд вашей организации, учитыв...
Спасибо за отзыв, а что думаете насчет выбора правильного интеграционного паттер...
Интеграция приложений может быть реализована с помощью различных подходов, кажды...
Обычный адаптив
Название говорит само за себя. Это чистый адаптивный дизайн, который меняет отображение на разных экранах с помощью CSS media queries.
HTML на всех устройствах единый, а за отображение элементов отвечают CSS-стили. Дополнительно возможно использовать JavaScript, который может менять отображение и поведение страницы в зависимости от устройства. Подход mobile first подразумевает использование именно этой технологии: вы проектируете, верстаете сначала для мобильных, а затем добавляете стили для декстопов.
Как реализовать: согласитесь с mobile first подходом, прочитайте книгу Responsive Web Design и начинайте процесс создания нового сайта (или редизайна) с ширины экрана айфона — 320 px. Когда у вас будет готова вёрстка для этой ширины, добавьте media query для следующей ширины экрана (допустим, 768 px) и так далее, пока не будете удовлетворены результатом.
Кому-то хватает двух брейкпоинтов: для смартфонов и десктопов. Кто-то хочет предусмотреть и планшеты вплоть до разного отображения в вертикальном и горизонтальном положении. Если вы используете JS, то эти файлы также загрузятся для всех пользователей, а уже внутри JavaScript возможно выполнять различные функции в зависимости от устройства.
Динамический JS
В этой конфигурации (Dynamically-served JavaScript) все устройства загружают одинаковый HTML-код, который содержит ссылку на внешний JS файл. В зависимости от юзер-агента JS файл выполняет ту или иную функцию, то есть работает динамически. Например, если устройство — смартфон, то выполнится функция изменения порядка блоков в HTML-коде или удаления неиспользуемого в мобильной версии контента.
Этот подход мы используем в eskimobi при адаптации сайтов. Мы выбрали именно его, поскольку он позволяет получить контроль над DOM-ом сайта ещё до этапа рендеринга в браузере. Благодаря этому подходу вы можете полностью менять отображение декстопного сайта на мобильном устройстве при сохранении оригинального HTML. Более подробно все преимущества подхода динамического JS описаны здесь.
Как реализовать: изучите документацию библиотеки mobify.js, которая позволяет манипулировать DOM-ом сайта в зависимости от юзер-агента или обратитесь ко мне за консультацией.
Динамический показ
Плагин
В зависимости от CMS принцип работы может отличаться, но на практике плагин — это детектор мобильных устройств, который заменяет шаблон темы на специально адаптированную версию. Контент при этом может быть единый, либо отличаться — всё зависит от настроек, которые вы установите. Это, пожалуй, самое популярное решение ввиду простоты его применения.
Как реализовать: если у вас Wordpress, установите WP touch или Mobile Pack или Mobile Edition. Попробуйте каждый, чтобы найти самый удобный и подходящий вариант.
Для других CMS есть другие плагины, но суть сводится к тому, чтобы максимально облегчить процесс мобилизации, сделав минимум усилий. Мобильный сайт будет открываться на субдомене (m.site.ru) или без редиректа, всё зависит от настроек.
Разные URL
В эту группу включены решения, которые не используют единый HTML основной версии сайта. Это позволяет получить больший контроль над видом и функционалом мобильной версии, но в некоторых случаях может вызвать сложности при внедрении и поддержке.
Отдельная CMS
Отдельный сайт со своей системой управления (если у вас DST Platform то она уже сразу в коробке поддерживает мобильные решения), оптимизированный только для мобильных устройств. Сокрушительный минус решения в том, что это ещё один сайт, который нужно отдельно обновлять. Но для кого-то это будет подходящим решением для создания мобильного UX.
Как реализовать: создайте поддомен m.site.ru и разместите там систему управления для мобильного сайта. Учтите, что это сайт только для мобильных устройств, поэтому все стили и контент должны быть оптимизированы именно для смартфонов.
Когда сайт будет готов, включите определение мобильных устройств и перенаправление на другой домен. Вот готовое решение для этой задачи, просто скачайте версию в нужном языке программирования и вставьте в шаблон основного сайта сразу после . Замените последнюю строку редиректа на адрес вашего мобильного сайта.
API
Это оболочка, которая получает контент основного сайта по API и отображает в совершенно другом дизайне мобильную версию. Такой метод использует крупные проекты — «Фейсбук», «Твиттер», «ВКонтакте» и все, кому нужен полный контроль над мобильной версией с сохранением единого контента.
Это самый сложный способ реализации и поддержки, его используют только те, кто точно понимает, что хочет получить в итоге.
Как реализовать: нет единого рецепта, но порядок действий в любом случае начинается с проектирования и дизайна мобильной версии. После того, как вы определите важный контент, можно думать над тем, как его синхронизировать с основным сайтом с помощью API.
Конструктор
Самый простой способ получить мобильную версию сайта. Конструктор анализирует структуру основного сайта, расположение меню, цветовую схему и контент. После этого формирует уникальный шаблон, который вы можете настроить по своему усмотрению.
Прелесть решения в том, что удобный drag and drop интерфейс конструктора позволяет с лёгкостью управлять внешним видом мобильной версии и добавлять такие уникальные элементы, как гео-локация, click-to-call для звонка в одно нажатие, интерактивные галереи и многое другое.
Как реализовать: просто скармливаете конструктору адрес своего сайта и через пару секунд… получаете готовый мобильный сайт и синхронизированный контент. Для завершения установки потребуется лишь установить одну строчку кода в head основного сайта и оплатить подписку.
Правильный выбор
Выбор технологии зависит от исходных данных: если у вас уже есть сайт и вы с минимальными усилиями хотите сделать его мобильным, используйте плагин для вашей CMS или конструктор.
Если вы планируете редизайн или создаёте новый сайт, используйте адаптивный дизайн.
Если вы не планируете создавать новый сайт в ближайшее время и вам важно быстро получить качественную полнофункциональную мобильную версию, изучите подход «Динамический JS».
Будете работать с подрядчиком? Независимо от выбранной технологии, перед началом сотрудничества убедитесь, что исполнитель хорош и способен решить вашу задачу:
1. Изучите портфолио мобильных сайтов (желательно не менее 10). Именно сайтов, а не одностраничных лендингов. Обязательно посетите все сайты из портфолио. Если какой-то из сайтов недоступен, вероятно подрядчик вводит вас в заблуждение и преувеличивает свои заслуги. Обратите внимание на скорость работы и дизайн сайтов из портфолио. Много ли там практических ошибок? (Смотрите ниже раздел о ошибках дизайна.)
2. Попросите подрядчика рассказать о способах адаптации, которые ему известны. Почему он использует тот или иной способ, аргументы «за и против».
3. Зафиксируйте в договоре сроки создания мобильного сайта и предусмотрите штрафные санкции в случае просрочки. При этом старайтесь всегда быстро предоставлять обратную связь, если она требуется исполнителю для продолжения работы.
4. Оговорите формат и условия дальнейшей технической поддержки. Начало работы с мобильной аудиторией — это ответственный шаг и, вероятно, новый для вас. Важно, чтобы поддержка оказывалась вовремя и не вносила хаос в ваши устоявшиеся процессы. Однако, успех внедрения и развития мобильной версии будет зависеть и от того, насколько хорошо вы усвоили подход mobile first.