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

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

Как это работает?

Вместо создания одной интернет-страницы в 800 пикселей по горизонтали, станицы адаптивного сайта составлены из элементов, которые располагаются в зависимости от ширины браузерного окна. Эти элементы определяют размер экрана при помощи медиа-запросов CSS.

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

Адаптивный дизайн

На более широком экране эти элементы могут развернуться в стороны:

Адаптивный дизайн на больших мониторах

На узком экране они располагаются в столбик:

Адаптивный дизайн на смартфонах

Вот реальный пример адаптивного сайта созданного в нашей веб-студии:

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

 

Как видите, если экран маленький, элементы располагаются иначе. Вы можете перейти на сайт funkynails.ru и поэкспериментировать с размерами окна браузера.

Ещё пример — delonaroda.ru

На полноразмерной странице есть два уровня навигации вверху. Основной контент располагается в середине, но все пространство экрана используется максимально эффективно, используется вся ширина экрана десктопа.

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

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

Версия сайта для планшета:

delonaroda-2

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

Версия сайта для смартфона:

delonaroda-3

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

Чем адаптивный дизайн полезен для SEO продвижения?

Теперь вы знаете, что адаптивный дизайн — хорошая идея, которая поможет свести к минимуму заботы по созданию и поддержанию контента. Но как это помогает в плане SEO?

Адаптируемся под пользователя

Если пользователи переходят из поиска на ваш сайт и сразу же возвращаются на страницу с результатами поиска, Google и Яндекс делают пометку, что ваш сайт, возможно, не лучший выбор для этого поискового запроса! Сейчас мобильным интернет пользуется большинство людей, потому, что это более доступно. Если ваш сайт хорошо смотрится на мобильных устройствах — % покинувших ваш сайт людей будет гораздо меньше!

Ранжирование в мобильном поиске выше

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

Результаты

Первые наши клиенты перешедшие на адаптивный веб-дизайн увеличили количество посещений в месяц более чем в три раза:

Переход на адаптивный дизайн повлиял на позиции сайта

Это достаточно высокий показатель! Переход сайта svobodnoe-taxi.ru на адаптивный дизайн, также повлиял и на конверсию. Такие результаты показывают, что при правильном использовании адаптивный веб-дизайн может оказывать потрясающее действие.

Минусы адаптивного дизайна — время переделки

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

Многие дизайнеры разработают один дизайн сайта для смартфонов, один для планшетов и один для десктопов, а потом заставят сайт переключаться на один из этих стандартных размеров. Но бывают маленькие и большие смартфоны, планшеты бывают размеров от Kindle Fire до 10” Samsung Galaxy Tab, а мониторы десктопов могут достигать 30”. Адаптивный дизайн — это скорее изменение элементов на странице по мере увеличения количества пикселей, чем просто переключение с одного дизайна на другой. Как говорит дизайнер Стивен Хэй: «Начните с экрана маленького размера, затем растягивайте его, пока все не начнет выглядеть отвратительно. Вот теперь пора вставить контрольную точку!».

Кросс-браузерность

Вспомните старые добрые времена, когда все жаловались, что приходится тестировать сайт на IE и еще на Firefox. А теперь у нас есть:

Десктоп:

  • IE9 для Windows 7
  • IE10 для Windows 8 (без Flash)
  • Firefox
  • Chrome
  • Safari

Планшет/смартфон:

  • Safari
  • Браузер Android по умолчанию
  • Chrome beta
  • Dolphin
  • Opera
  • Firefox

И это только самые популярные. Вам придется протестировать их все на разных разрешениях экрана.

Адаптивный дизайн того стоит!

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

А вы хотите перейти на адаптивный дизайн? Мы будем рады помочь вам!