Этот сайт использует файлы cookie. Продолжая использовать сайт, вы даёте своё согласие на работу с этими файлами.
РУБРИКИ
УСЛУГИ
БЛОГ
Как стать любимым клиентом рекламного агентства
Если мы скажем, что одинаково любим всех клиентов, мы солжем...
Удалить нельзя ответить: как работать с комментариями в соцсетях
Где поставить запятую и нужно ли? Без лишних слов. Погружаемся в типологию комментариев...
Как рассказывать про работу завода в соц. сетях, чтобы подписывались не только сотрудники
Рассказываем, как мы с нуля мы вышли на охват в 50 000 человек, заменили корпоративное СМИ и потеряли 3 авторов...
ПОДПИШИТЕСЬ
Адаптивная верстка или мобильная версия сайта: достоинства и недостатки
Помните свои эмоции, когда со смартфона кликали на сайт с нужным товаром, а на нем кнопка «купить» уезжала на три экрана в сторону и даже не обещала вернуться? А что, если и ваш сайт выглядит так же криво? Сегодня расскажем, как такого не допустить и какую верстку выбрать.
Содержание
Адаптивная верстка и ее отличия от мобильной версии
Вот так выглядит раздел кейсов на нашем сайте на iPhone 5/5S/SE. На других моделях тоже всё красиво.
А теперь о том, чем отличается адаптивная верстка от мобильной версии и какой вариант выбрать.
Что такое адаптивный дизайн
Адаптивный дизайн — это html-верстка, которая подстраивается под популярные разрешения экранов. Сайт, который открывается с ноутбука, планшета или смартфона, — это один и тот же ресурс, с тем же URL в браузерной строке, движком и функционалом. Но адаптивная верстка изменяет размер и расстановку блоков на экране при изменении размеров и вида дисплея.
Плюсы:
- Простой и относительно недорогой в реализации вариант, удобный для отображения контента разного вида.
- Каждая страница имеет один URL, а если на нее заходят с устройств с разным разрешением экрана, то посетителя не перенаправляют на другой адрес, что происходит в мобильной версии.
- Нет дополнительных проблем при SEO-продвижении сайта — не нужно создавать дубли контента, как для мобильной версии.
Минусы:
- Не всегда занимает весь экран, оставляя свободные места по ширине.
- Не экономит трафик пользователя, так как доступен весь функционал основной версии.
Подвид адаптивного дизайна — респонсив-верстка
У адаптива есть более сложный вариант в исполнении — респонсив-верстка. Реализовать этот вариант дороже, но сайт всегда будет отображаться строго по ширине любого экрана.
Плюсы:
- Сайт отображается корректно на любом гаджете.
- Заполняется весь экран по ширине, независимо от устройства.
Минусы:
- Мало исполнителей, которые реализуют подобное качественно. При доработках и изменениях могут возникнуть сложности, если нужно искать нового программера или верстальщика.
- Ест много трафика.
Общая проблема адаптивного дизайна: иногда косяки программистов приводят к тому, что пользователь не находит нужную информацию. Например, страницу контактов или схему проезда. Просто не может пройти квест из нагромождения информации и графики, которые в десктопной версии смотрятся уместно.
Поэтому адаптивный дизайн требует профессиональной верстки и не менее грамотного тестирования.
Поэтому адаптивный дизайн требует профессиональной верстки и не менее грамотного тестирования.
Мобильная версия
По сути это отдельный сайт, со своей CMS (движком), версткой и функционалом, который чаще размещают на поддомене (адрес тогда может выглядеть так: m.site.ru) или в папке (адрес вида site.ru/m/).
Разрабатывается специально для просмотра с мобильных устройств. Юзер заходит с айфона и автоматически перенаправляется на этот сайт номер два, с приставкой m или mobi. Версия, в сравнении с основной, часто имеет урезанный функционал.
Пример мобильной версии с реализацией в корневой папке:
Для наполнения мобильной версии приходится создавать дубль контента, который размещается на основном сайте, только показывать его по-другому, с учетом разрешения экрана разных мобильных устройств.
Разрабатывается специально для просмотра с мобильных устройств. Юзер заходит с айфона и автоматически перенаправляется на этот сайт номер два, с приставкой m или mobi. Версия, в сравнении с основной, часто имеет урезанный функционал.
Пример мобильной версии с реализацией в корневой папке:
Для наполнения мобильной версии приходится создавать дубль контента, который размещается на основном сайте, только показывать его по-другому, с учетом разрешения экрана разных мобильных устройств.
Плюсы:
- Нет строгих рамок для разработчика, можно реализовать почти все варианты отображения, которые захочет заказчик. Дизайн мобильных версий упрощен, код и скрипты минимизированы для быстрой загрузки.
- Удобство и минимизация рисков при доработках или изменениях в коде. Это отдельный сайт с изолированной CMS, можно вносить правки без опасения, что расползутся блоки десктопного варианта или перестанут отрабатывать какие-то скрипты. Этот плюс могут оценить программисты сложных нагруженных движков.
Минусы:
- Один и тот же контент придется размещать и в десктопной, и в мобильной версии. В случае, например, крупного новостного ресурса или портала с частыми обновлениями это дополнительные временные и финансовые затраты на двойное размещение контента или на разработку вариантов его синхронизации.
- Дубли контента могут создавать сложности для продвижения в поисковиках и проблемы с ранжированием.
- Часто сайт компании выглядит в десктопной и мобильной версии как два разных ресурса, возникает проблема для задач маркетинга в вопросах узнаваемости — особенно это актуально для популярных брендов. Поэтому для разработки мобильных версий под разные устройства нужно найти хорошего дизайнера.
Так что лучше — адаптивный дизайн или мобильная версия?
Так ставить вопрос нельзя. Правильнее — какой вариант выбрать для конкретного сайта и его задач.
Если это личный блог, визитка компании или небольшой интернет-магазин — оптимальный вариант по срокам реализации, цене и результату — адаптивная верстка.
На небольшие недочеты в виде пустых полей на некоторых устройствах можно закрыть глаза.
Хочется идеального отображения и готовы заплатить больше — тогда ищите специалиста, который сделает респонсив-верстку.
А если это крупный новостной ресурс, маркетплейс или любой другой сайт со сложным функционалом, подойдет мобильная версия. Но это разработка нового движка, и часто более сложная, несмотря на простоту внешнего отображения контента. Уложить максимум функционала в мини-упаковку, без багов, с хорошим интерфейсом, который полюбят посетители, — задача не для новичков.
Не можете решить, какой вариант подойдет вам?
Мы более 10 лет занимаемся разработкой сайтов и с радостью поможем вам выбрать и реализовать оптимальную версию.
Если это личный блог, визитка компании или небольшой интернет-магазин — оптимальный вариант по срокам реализации, цене и результату — адаптивная верстка.
На небольшие недочеты в виде пустых полей на некоторых устройствах можно закрыть глаза.
Хочется идеального отображения и готовы заплатить больше — тогда ищите специалиста, который сделает респонсив-верстку.
А если это крупный новостной ресурс, маркетплейс или любой другой сайт со сложным функционалом, подойдет мобильная версия. Но это разработка нового движка, и часто более сложная, несмотря на простоту внешнего отображения контента. Уложить максимум функционала в мини-упаковку, без багов, с хорошим интерфейсом, который полюбят посетители, — задача не для новичков.
Не можете решить, какой вариант подойдет вам?
Мы более 10 лет занимаемся разработкой сайтов и с радостью поможем вам выбрать и реализовать оптимальную версию.
Читайте также
Услуги
Заявка
РАССЧИТАТЬ СТОИМОСТЬ
Расскажите о вашем проекте. Что хотите сделать, что уже сделали, что получилось или не получилось.
Мы открыты для партнерства. Присылайте ваши предложения.
Мы открыты для партнерства. Присылайте ваши предложения.
No1
КЕЙСЫ
100+ довольных клиентов, 1400+ реализованных проектов
СМОТРЕТЬ ВСЕ КЕЙСЫ
СМОТРЕТЬ ВСЕ КЕЙСЫ
#
С
%
\
М
(
*
:
О
~
=
^
|
Т
?
/
+
$
"
Р
&
;
~
]
8
%
Е
7
/
:
(
0
$
-
Т
?
#
"
6
%
:
!
4
Ь
(
;
#
5
"
/
%
+
3
В
0
*
&
1
?
\
~
0
)
$
С
/
9
%
#
:
^
;
7
*
+
<
Е
/
9
2
>
|
%
&
@
/
\
1
$
К
?
~
(
]
\
#
7
^
!
4
-
=
3
Е
%
*
&
+
)
~
?
0
/
-
^
:
\
2
Й
&
/
3
=
y
*
#
>
5
?
<
[
x
)
+
C
;
/
*
:
#
%
=
[
x
+
s
)
7
&
2
<
Ы
КЕЙС SMM
АЗБУКА ВКУСА
+600 % рост ER
+5000 % рост подписчиков
КЕЙС SMM
FAMILIA
+800 % вовлеченность
+3000 % посетителей
КЕЙС ORM
ЖИЛОЙ КОМПЛЕКС
+70 % рост рейтингов
+500 % количество заявок
КЕЙС SMM, ORM
WEBBANKIR
+1200 % рост заявок на займы
+2000 % рост ER
КЕЙС РАЗРАБОТКА
ОС МИК ЦЕНТР +
+100 % рост трафика
+1500 % рост конверсии
КЕЙС КОНТЕКСТ, ТАРГЕТ
БРИТАНСКИЙ КОЛЛЕДЖ
+3000 лидов
+5000 подписчиков
TEXT 2
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
TEXT 3
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
TEXT 4
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
TEXT 5
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
TEXT 6
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
oiholi olijoi joi jpoohj b uihfu ib fif uipuihnui huihnpiuih hiphni hj
No2
НАШИ КЛИЕНТЫ
500+ реализованных проектов
