Заказать обратный звонок
Написать письмо
+7 (495) 278-08-54 Москва
+7 (812) 670-07-40 Санкт-Петербург

Новости

Немного об адаптивных сайтах

Сергей Семенцов

05 ноября 2014

Немного об адаптивных сайтах

Что такое адаптивный сайт? Чем он отличается от обычного сайта? В чем вообще его плюсы?

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

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

Идеи и заказы это конечно хорошо, так как же создать адаптивный сайт?

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

Нет, не все так просто! При всем выше сказанном наложим несколько ограничений на полет фантазии дизайнера, небольших ограничений, но достаточных что бы нам создать адаптивный сайт. Весь дизайн сайта условно будет разделен по вертикали на 12 колонок, которые будут разделять функциональные блоки сайта. Блоки могут состоять из любого числа колонок, и должны будут иметь возможность сжиматься и смещаться относительно друг друга, что в дальнейшем сильно облегчит создание адаптивной верстки данного макета. Что бы понять, что это такое, в данном случае вот уж точно лучше один раз увидеть, что это за блоки такие:

Блочная структура сайта

Вот вверху именно эти 12 колонок, а под ними как они могут быть представлены и объединены на сайте.

Это не сильное ограничение для дизайнера, тем более что эти блоки могут объединяться очень свободно, или даже разбросаны вот так:

Блоки могут располагаться хаотично

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

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

Для упрощения решения поставленной задачи и создания адаптивной верстки макетов, а так же что не менее важно ее унификации, рекомендую использовать бесплатный инструмент - bootstrap 3, в котором уже есть необходимые инструменты и основной из них это сетка с возможностью ее настройки.
Сетку лучше настраивать на 24 колонки, так как это позволит свободней варьировать элементами внутри блоков и в точности выполнить верстку макета.

Главным же ключом к созданию адаптивных шаблонов сайта является стандарт CSS media queries. С помощью media queries можно создать множество правил CSS, которые применяются только когда видимая область браузера находится в рамках определенной ширины или высоты. Например, при создании media query для окон, ширина которых менее 768 пикселей, можно применить набор пользовательских правил CSS, которые автоматически подстраивают элементы страницы, когда страница выводится на узкие окна браузера.

Как правило, достаточно сверстать макет для большого монитора и провести при необходимости корректировку стилей для трех диапазонов разрешений вертикально/горизонтального положения планшета и телефона. Подробно с описанием записи данных media можете ознакомиться в документации к bootstrap, хочу только отметить один важный момент. Фактическая ширина окна браузера width и ширина экрана устройства device-width могут сильно отличаться по своему размеру, что бы не думать об этих отличиях не забудьте установить мета тег

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

блокирующий ширину окна браузера в соответствии с шириной экрана.

После того как макет сверстан, «отработаны» все необходимые скрипты можно приступать к встраиванию верстки в СMS 1С-Bitrix.
Встраивание в СMS адаптивного шаблона не чем не отличается от встраивания фиксированного шаблона, для того кто хорошо знаком с системой администрирования сайта все будет так же просто как всегда.




Остались вопросы по статье?

Оставьте свой контакт и наш менеджер вас проконсультирует.



Решения
B2B портал
349 900 руб.
B2BShop
259 900 руб.
233 910 руб.
11 Отзывов
B2B кабинет
199 900 руб.
179 910 руб.
5 Отзывов
Оригами
39 900 руб.
35 910 руб.
11 Отзывов
SEO умного фильтра
14 990 руб.
13 491 руб.
182 Отзыва
Парсер контента
19 990 руб.
17 991 руб.
129 Отзывов
Сотбит: Мультирегиональность
14 990 руб.
13 491 руб.
37 Отзывов
Мультикорзина
24 990 руб.
22 491 руб.
Коммерческие предложения
39 990 руб.
35 991 руб.
B2BMobile
49 990 руб.
SEO умного поиска
9 990 руб.
8 991 руб.
3 Отзыва
Индивидуальные цены
39 900 руб.
35 910 руб.
Рекламации
39 900 руб.
35 910 руб.
Сотбит: CRM инструменты
4 990 руб.
4 491 руб.
Комплексные отзывы
9 990 руб.
8 991 руб.
3 Отзыва
1С инструменты
9 990 руб.
8 991 руб.
8 Отзывов
Расширенная регистрация
9 990 руб.
8 991 руб.
2 Отзыва
Перекрестные продажи
9 990 руб.
8 991 руб.
2 Отзыва
Микроразметка Schema.org
4 990 руб.
4 491 руб.
OpenGraph
4 990 руб.
4 491 руб.
Сотбит: Проверка контрагента
4 990 руб.
4 491 руб.
1 Отзыв
Быстрая загрузка картинок
4 990 руб.
4 491 руб.
1 Отзыв
Похожие товары
4 990 руб.
4 491 руб.
2 Отзыва
Интеграция с Контур.Эльба
9 990 руб.
8 991 руб.
1 Отзыв
Счет на почту в PDF
4 990 руб.
4 491 руб.
3 Отзыва
Сотбит: REST API
Бесплатно
Заказ по телефону
Бесплатно
Еще решения


Сотбит
Веб интегратор занимается разработкой сайтов на 1С-Битрикс, разработкой типовых решений, входит в ТОП-10 разработчиков для Маркетплейса 1С-Битрикс.
192029
Россия
Ленинградская область
Санкт-Петербург
м. «Петроградская», пр-т Медиков, д. 3-5, лит. А, оф. 211
+7 (812) 670-07-40
sale@sotbit.ru
,
Обратная связь