как повысить SEO-оптимизацию сайта
Что такое SEO-оптимизация сайта простыми словами - Timeweb
SEO-оптимизация – это совокупность процессов, позволяющих улучшить сайт для его ранжирования в поисковых системах. Такой метод поможет привлечь большое ...
мобильной версткой
Еще один стыдный момент для некоторых особо одаренных верстальщиков и владельцев сайтов. Многие до сих пор не сделали мобильную верстку. Вероятность, что к вам на сайт придут с компьютера, не настолько превышает вероятность появления посетителей с мобильных устройств. Поэтому нельзя пренебрегать <anchor>мобильной версткой</anchor>. Поисковым роботам мобильная верстка тоже нравится. Если уж пользователей не цените, то хоть на чувства роботов не плюйте.
Стоит ли переходить на адаптивный дизайн сайта? – База знаний Timeweb Community
Стоит ли переходить на адаптивный дизайн сайта? – База знаний Timeweb Community


[![](/ru/community/bundles/app/img/main-banner/banner-craftum-sale-sm.webp)](https://craftum.com?utm_source=community&utm_medium=banner&utm_campaign=for_sale)

Реклама ООО Таймвэб

[![](/ru/community/bundles/app/img/main-banner/banner-craftum-business-internet-sm.webp)](https://craftum.com?utm_source=community&utm_medium=banner&utm_campaign=no_internet)

Реклама ООО Таймвэб

[![](/ru/community/bundles/app/img/main-banner/banner-craftum-create-site-sm.webp)](https://craftum.com?utm_source=community&utm_medium=banner&utm_campaign=new_site)

Реклама ООО Таймвэб

[![](/bundles/app/dist/img/cm-logo.svg)](https://timeweb.com/ru/community/)

- [Вопросы](/ru/community/questions)
- [Маркетплейс](/ru/community/marketplace)

[![](/bundles/app/dist/img/logo-timeweb.png)](https://timeweb.com/ru/?utm_source=site&utm_medium=banner&utm_campaign=community)

![](/bundles/app/dist/img/timekarma-icon.svg)10[Войти](/ru/community/login)

Все темыНовостиРазработкаАдминистрированиеДизайнМаркетингБизнесГеймингЛичный опытМнение рынка

- [Все темы](https://timeweb.com/ru/community/)
- [Новости](/ru/community/articles/topic/news)
- [Разработка](/ru/community/articles/topic/razrabotka)
- [Администрирование](/ru/community/articles/topic/administrirovanie)
- [Дизайн](/ru/community/articles/topic/dizayn)
- [Маркетинг](/ru/community/articles/topic/marketing)
- [Бизнес](/ru/community/articles/topic/biznes)
- [Гейминг](/ru/community/articles/topic/geyming)
- [Личный опыт](/ru/community/articles/topic/lichnyy-opyt)
- [Мнение рынка](/ru/community/articles/topic/mnenie-rynka)
- [Быть в IT](/ru/community/articles/topic/byt-v-it)

[Задать вопрос](/ru/community/login) [Написать статью](/ru/community/login)

[Задать вопрос](/ru/community/questions/add) [Написать статью](/ru/community/articles/add)

![Timeweb](/ru/community/bundles/app/img/community-avatar-06.svg)

[Евгений](/ru/community/user/1755)

04 сен в 2017

10K


# Стоит ли переходить на адаптивный дизайн сайта?

3 комментария

![Адаптивный дизайн сайта](/ru/community/article/41/41134a74e7578607d225b56394554ad3.jpg)

[Дизайн](/ru/community/articles/topic/dizayn) [#Веб-дизайн](https://timeweb.com/ru/community/search/tag/articles/veb-dizayn) [#Оптимизация](https://timeweb.com/ru/community/search/tag/articles/optimizaciya) [#SEO](https://timeweb.com/ru/community/search/tag/articles/seo)

10 мин. чтения

Пользователи интернета – это уже давно не только те, кто сидит в сети с компьютера.

Вы задумывались об остальных пользователях? О тех, кто выходит онлайн с мобильных телефонов и планшетов?

## Определение

**Адаптивный дизайн** – это дизайн сайта, который будет автоматически адаптироваться под размеры экрана того устройства, с которого пользователь вышел в сеть. По-английски его называют Adaptive Web Design либо Responsive Web Design (отзывчивый дизайн, термин впервые был использован в мае 2010 года; адаптивный дизайн – более полное, общее и используемое название).

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

[![Шаблоны для сайта](/media/default/0001/01/18f2a633ce88faf3d6a02c5c2dba4f6b3861b893.png)](https://timeweb.com/ru/templateshop/catalog/?order=price_and_popularity&freeInstallation=1&priceStart=&priceEnd=)

Важно подчеркнуть – сайт будет **удобно** смотреть на устройствах всех форматов: то есть на экране мобильного вам не придется расширять области, чтобы нажать на кнопку, прочитать что-то и т.д. На экране сохраняется весь контент, который корректно масштабируется на большом и на маленьком экране.

Это относительно новая тенденция в создании сайтов, однако сейчас отсутствие у сайта адаптивной верстки (или хотя бы мобильной версии) уже является показателем некачественного сайта.

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

![Адаптивная верстка](/media/default/0001/01/02855e3128269f944bb0df14dd9bca84fff8cb09.jpeg)

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей


[Подписаться](https://t.me/twcommunity)

## Почему это хорошо

Адаптивный дизайн предполагает один домен (против наличия поддомена для мобильной версии), один код сайта (против отдельного написания мобильной версии сайта) и одно наполнение. Можно выделить следующие преимущества адаптивного сайта:

1. **Гибкость**: контент сохраняется на экране, но меняет свое расположение в зависимости от разрешения экрана;
2. **Производительность**: сайт доступен пользователю на любом устройстве, и ему будет комфортно его просматривать;
3. **Сокращение времени на разработку**: адаптивный дизайн экономит время и средства, необходимые для разработки сайта; не нужно создавать две версии сайта – десктопную и мобильную;
4. **Оптимизация**: у вас будет один сайт с адаптивным дизайном, и продвигать нужно будет тоже только его (против десктопной и мобильной версий сайта, если вы разрабатываете версии сразу для двух устройств).

## Почему это плохо

Есть у адаптивного дизайна и противники, которые считают, что вариант разработки такой версии сайта далеко не самый удачный. Их основные аргументы:

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

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

![Мобильная версия сайта](/media/default/0001/01/10e339288660599dca3610c055c55c3c042e5e12.png)Кстати, будет несправедливо не выделить тут заодно и **минусы мобильной версии сайта** (по сравнению с адаптивным дизайном). Это:

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

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

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

Вернемся к адаптивному дизайну.

![Пример адаптивки](/media/default/0001/01/bc764b4c41b05f0a53c11914304e487594ca253f.png)

## Принципы адаптивной верстки

1. Mobile first. В первую очередь идет проектирование сайта для мобильных устройств.
2. В разработке применяется гибкий (flexible) дизайн на основе сетки.
3. Также применяются гибкие изображения.
4. Идет работа с медиазапросами.
5. Применяется принцип постепенного улучшения.

Если вы решили перейти на сайт с адаптивной версткой (или сделать новый), то вам будет полезно узнать о том, какие макеты существуют.

## Типы макетов

1. Резиновый – при уменьшении размера экрана блоки просто сжимаются; на мобильном устройстве могут выстраиваться в одну длинную ленту.
2. Перенос блоков – при уменьшении разрешения экрана блоки переносятся в нижнюю часть экрана.
3. Несколько макетов – для каждого разрешения экрана создается свой макет. Наиболее удобный и в то же время трудоемкий способ.
4. Масштабирование сайта – если у вас несложный сайт (например, лендинг), то его можно просто масштабировать.
5. Панели – дополнительное меню, похожее на те, которые используются в мобильных приложениях.

## Вывод

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

Выбирайте готовые шаблоны для своего сайта в нашем магазине шаблонов: [https://timeweb.com/ru/templateshop/catalog](https://timeweb.com/ru/templateshop/catalog)

[#Веб-дизайн](https://timeweb.com/ru/community/search/tag/articles/veb-dizayn) [#Оптимизация](https://timeweb.com/ru/community/search/tag/articles/optimizaciya) [#SEO](https://timeweb.com/ru/community/search/tag/articles/seo)

![](/ru/community/topic/f4/f487ed017387a0343db4f170c3a07f7f.jpg)

[Дизайн](/ru/community/articles/topic/dizayn)

Подборки, инструкции и советы от дизайнеров для дизайнеров.


Поделитесь постом с друзьями

### Комментарии

![](/ru/community/bundles/app/img/community-avatar-05.svg)

[Степан Мазур](/ru/community/user/536) +82![](/ru/community/rank/c3/c3fcd6dd95ebd4245a5875329d8e9855.svg)

06 сен в 2017

Ответить

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


![](/ru/community/bundles/app/img/community-avatar-05.svg)

[Михаил](/ru/community/user/29124) 0![](/ru/community/rank/ed/ed85259ad5ac239e734750ac8b171eef.svg)

11 окт в 2017

Ответить

1) Версия сайта должна быть одна (полезно в рамках SEO. Крупные компании знают почему) - адаптивной. Особенно если сайт создаётся после этого комментария.

2) Всем моим счастливым клиентам удобнее было смотреть сайт НЕ адаптивный. НО

3) поисковики ставят плюс адаптивности, так что мнение пользователей не учитывается особо.

Небольшой сайт, сделанный правильно \- всегда можно привести в адаптивный вид. Переделка нужна, только если всё совсем было плохо сделано изначально. (что крайне редко)

Цена. За 2-4 тысячи клиентские (свои) сайты переделываю под адаптив. Поисковики рады. При этом сайт остаётся почти идентичным (как до адптивности) при просмотре с компьютера.


![](/ru/community/bundles/app/img/community-avatar-02.svg)

[Елена Золотухина](/ru/community/user/55126) +3![](/ru/community/rank/ed/ed85259ad5ac239e734750ac8b171eef.svg)

02 июля в 2023

Ответить

Кто-то еще сомневается? Есть, конечно, как вариант, сделать 2 версии - для мобильных и для компьютеров, но оно того не стоит. Лучше сразу сделать и один раз сайт с адаптивным дизайном. Сама видела, как крупные конторы так делали сначала, а потом сами на адаптив перешли.


#### Рекомендуем

[Топ-20 лучших платных и бесплатных онлайн-курсов по веб-дизайну](/ru/community/articles/top-20-luchshih-platnyh-i-besplatnyh-onlayn-kursov-po-veb-dizaynu#interesting)

27 дек в 2023

4065

0

![Топ-20 лучших платных и бесплатных онлайн-курсов по веб-дизайну](/ru/community/article/d9/d9cfb4c2e7605d75918034735142c8b6_thumb.jpg)

[Такие разные дизайнеры: 5 сфер, в которых можно себя реализовать](/ru/community/articles/takie-raznye-dizaynery-5-sfer-v-kotoryh-mozhno-sebya-realizovat#interesting)

26 июля в 2023

14249

0

![Такие разные дизайнеры: 5 сфер, в которых можно себя реализовать](/ru/community/article/41/41e609a84cbbadf2dfbe974998bd62bc_thumb.jpg)

[Что такое теория цвета и как она работает в маркетинге](/ru/community/articles/chto-takoe-teoriya-cveta-i-kak-ona-rabotaet-v-marketinge#interesting)

25 янв в 2023

6716

1

![Что такое теория цвета и как она работает в маркетинге](/ru/community/article/81/81d43d01615fa5fc6914f46d1d12334d_thumb.jpg)

[Что такое моушн-дизайн](/ru/community/articles/chto-takoe-moushn-dizayn#interesting)

21 сен в 2022

11244

0

![Что такое моушн-дизайн](/ru/community/article/44/446f77015ae44d28e3ef3ae096a89f8a_thumb.jpg)

[5 способов визуализации данных на лендинге](/ru/community/articles/5-sposobov-vizualizacii-dannyh-na-lendinge#interesting)

02 сен в 2022

5367

0

![5 способов визуализации данных на лендинге](/ru/community/article/75/75afca3cca90c8eb22b4a8c8d99dbe24_thumb.jpg)

Комьюнити теперь в Телеграм!

Подпишитесь, чтобы следить за новостями IT-индустрии


[Подписаться](https://t.me/twcommunity)

#### У нас пишут эксперты

С помощью соцсетей

Забыли пароль?

Запомнить меня

Войти

У меня нет аккаунтаЗарегистрироваться

С помощью соцсетей

Я ознакомлен(а) [с политикой](https://timeweb.com/ru/community/documents/personal_data.pdf), [офертой](https://timeweb.com/ru/community/documents/offer_for_the_community.pdf) и даю [согласие](https://timeweb.com/ru/community/documents/consent_to_the_processing_of_PD_Timesweb.pdf) на обработку персональных данных

Зарегистрироваться

У меня уже есть аккаунтВойти

Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.

Вернуться ко входу

Пожалуйста, укажите email вашего аккаунта

Восстановить

Вернуться ко входу

Ваш баланс 10 ТК

1 ТК = 1 ₽

О том, как заработать и потратить Таймкарму, читайте [в этой статье](https://timeweb.com/ru/community/articles/reyting-rangi-i-taymkarma)

Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте


Зарегистрироваться