Адаптивная верстка, статика, резина, в чем разница? | Создание и разработка сайтов
14 февраля 2015 в 12:00 Автор: Nikita_Sp в категории Статьи о CSSВ современном мире все больше и больше места персональные компьютеры, и даже ноутбуки уступают мобильным устройствам: мобильным телефонам, планшетам, нетбукам. Что это значит для владельцев сайтов? Необходимо адаптировать свой сайт под все эти устройства!
При создании современного сайта каждый разработчик должен это учитывать! Что такое адаптивный дизайн, резиновая верстка, статика и в чем отличие, в чем преимущества адаптивной верстки, и зачем ее делать? Давайте разбираться!
Сегодня, каждый из бизнесменов и предпринимателей понимает всю ту силу и все те возможности интернета, которые позволяют расширить бизнес и увеличить продажи. За последние несколько лет очень многие перенесли свой бизнес в интернет, частично либо полностью.
Но технологии не стоят на месте, и все больше и больше людей пользуются мобильными устройствами для поиска информации в сети. Люди заходят в социальные сети, ищут информацию о событиях города, о местах, покупают товары, и все это пользуясь мобильными гаджетами!
Раньше, при создании сайта учитывалась только кроссбразуерность (способность сайта открываться во всех браузерах корректно), но сегодня каждому разработчику необходимо помнить что кроме браузеров есть еще и мобильные устройства и стараться максимально адаптировать под них разрабатываемый сайт.
Статический дизайн сайта — это самая простая, с точки зрения разработки версия верстки. Все элементы вне зависимости от разрешения экрана устройства, размера окна браузера будут расположены в одном и том же месте без сдвигов или изменений.
Такой сайт безболезненно откроется на любом устройстве, будет работать корректно, но не все элементы управления (ссылки, кнопки) будут удобны для взаимодействия пользователем. Такой сайт необходимо «зумить» (увеличивать/уменьшать масштаб), скроллить и ловить искомый элемент.
Резиновый дизайн сайта
, позволяет создать сайт, который будет тянуться в зависимости от окна браузера и от разрешения экрана, соответственно. При создании резиновой верстки присутствуют определенные сложности, связанные с необходимостью высчитывать проценты высоты, ширины и др. параметров блоков.Также для более корректного отображения при создании такого сайта разработчик может использовать JavaScript для более точного позиционирования элементов. Данный вид сайтов достаточно интересный, однако сегодня его вытесняет адаптивный дизайн сайтов.
Адаптивный дизайн сайтов — это дизайн, который рассчитан на корректное отображение на всевозможных устройствах, начиная от персональных компьютеров с FullHD разрешением мониторов, заканчивая мобильными устройствами с минимальным разрешением.
Преимуществом и ключевым отличием от резиновой верстки является изменение форм и стилей отображения элементов. Элементы располагают в удобном для пользователя месте с учетом того, что устройство имеет маленький экран, делают ссылки и кнопки более удобными для взаимодействия с ними, например, увеличивая их или меняя положение.
Некоторые владельцы интернет магазинов создают отдельную мобильную версию сайта, которую размещают на поддомене «m» и создают редирект (переадресацию) для мобильных устройств с основного домена example.com на m.example.com. К сожалению, на данный момент я затрудняюсь ответить в чем преимущество такого решения, но если вы знаете — пишите в комментариях — найдем истину вместе!
Однако, наличие адаптивной версии сайта — это не обязательный атрибут для каждого ресурса, т.к. каждый ресурс имеет свою специфику, и прежде чем вы решите создавать сайт с адаптивным дизайном, проведите анализ статистики по посещению подобных ресурсов на предмет процентного соотношения посещений с мобильных устройств к посещениям с персональных компьютеров или ноутбуков.
Таким образом, мы видим, что сегодня, при создании сайта, желательно иметь адаптивный дизайн (мобильную версию), и подойти к ее разработке очень тщательно и с умом, т.к. от качества подхода и разработки зависит удобство использования посетителем вашего ресурса, а ведь удобство клиента — это ваши деньги.
Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла — поставь +1 и нажми «Мне нравится»!
Отзывчивый и Резиновый дизайн landing page. Отличия!
Всем привет. Сегодня хочу поговорить с вами о таких понятиях как адаптивная, фиксированная, резиновая и отзывчивая верстка. Многие путают некоторые из понятии, поэтому хочу разобрать данный вопрос.
Ну и еще в группе в вк об этом написали, за что большое спасибо. Прям идея для целой серии статей.
Так что, если хотите помочь или просто о чем-то почитать на блоге, пишите туда, буду стараться рассматривать ваши вопросы на блоге 🙂
Фиксированная верстка
Итак, все мы знакомы с фиксированной версткой. Это когда значения ширины, высоты, шрифтов и других элементов задаются жестко в пикселях и не изменяются с изменениям размеров окна браузера. В таком случае, у пользователя появляется горизонтальный scroll, который всех так раздражает.
До сих пор это преобладающий тип верстки, но стремительно вымирающий. Конечно, найдутся не согласные, готовые поспорить, но в плане лендингов — это действительно так.
Резиновая верстка
Этот тип верстки тоже используется все реже и реже. Да, здесь значения задаются в относительных единицах (процентах) и контент подстраивается под любой размер экрана. Но по большому счету, сайт будет хорошо смотреться и читаться только на ограниченном количестве довольно крупных разрешений. А на мобильном все будет слишком мелко.
Здесь просто пропорционально уменьшается контент, а структура не меняется. У меня на картинке с пропорциями проблемы, но думаю суть понять можно:
Адаптивная верстка и Отзывчивая верстка
Адаптивная и Отзывчивая верстка очень похожи, но каждая из них имеет свои особенность. Адаптивная верстка базируется на использовании пикселей и медиа запросах, а отзывчивая исключительно в относительных единицах и медиа запросах.
Кроме того, в адаптивном дизайне элементы могут, скрываться и заменяться другими. А в отзывчивом дизайне, назначение и функции элементов не меняются с изменением разрешения окна браузера.
Некоторые говорят, что при адаптивной верстке дизайн, при изменении окна браузера, как бы прыгает по контрольным точкам, которые заданы медиа запросами, но я считаю, что если верстал не лентяй, то он спокойно учтет все разрешения.
Например, максимальная ширина экрана была 1170px, тогда мы просто начинаем уменьшать окно браузера и смотреть, в какой момент наш дизайн начинает рушится, тогда добавляем медиа запрос с нужным разрешением, прописываем нужные стили и двигаемся дальше, вплоть до 320px. Ничего сложного… Вопрос мотивации 🙂
Если попытаться как-то обобщить, то я бы сделал это так:
Отзывчивая верстка — это такая верстка, при которой сайт разрабатывается таким образом, чтобы обеспечить наиболее простое его использование не зависимо от устройства и разрешения экрана, с минимумом ресайзов, медиа запросов, и дополнительного кода, без внесения особых изменений в первоначальный макет. Все уменьшается пропорционально (в разумных пределах), а когда становится неудобным для восприятия, то подстраивается наилучшим образом. Так вижу это я.
Но на практике часто приходится использовать смешанную верстку. Так как придерживаться одного стиля (Адаптивного или отзывчивого) достаточно тяжело. Но при необходимости можно. Важно понимать, что при использовании исключительно отзывчивого дизайна, придется использовать svg графику, так как на разрешении свыше 2000 пикселей ваши png иконки будут смотреться плачевно. Да и глупо грузить изображения, которые готовились под большое разрешение, на устройствах с экраном 800 пикселей.
Мне никогда не приходилось делать сайт используя исключительно отзывчивую верстку, считаю это очень трудоемким процессом, с множеством нюансов. В большинстве же случаев в ТЗ присылают макет ограниченной ширины (1170 — 1200 px), от которого и «пляшем». Постепенно подстраивая дизайн под меньшие разрешения. Я обычно использую медиа запросы+%+ когда нужно — px;
Если вам интересна тема адаптивного дизайна, то подписывайтесь на обновления. Скоро мы поговорим подробнее о медиа запросах, адаптивных картинках, шрифтах и других интересных вещах. А на сегодня — все. Надеюсь удалось вас заинтересовать. Жду ваших комментарий и поправок. Пока!
Адаптивный или фиксированный дизайн сайта
Один из самых распространённых вопросов при разработке сайта — выбор вёрстки будущего проекта.
Существует два основных направления, не рассматривая устаревшие варианты и те варианты, которые бы мы не рекомендовали по многим причинам — различные “резиновые” вёрстки, мобильные версии, приложения и прочее:
- адаптивный дизайн,
- фиксированый дизайн.
У каждого направления есть свои плюсы и минусы, но для начала нужно разобраться, что из себя представляет каждый из вариантов.
Прежде, чем рассматривать их в отдельности, предлагаем ознакомиться с распределением разрешений экранов на некоторых из наших проектов за 2016-ый год. Цифры реальны, поэтому по этим графикам вы, возможно, сможете сделать вывод для себя уже сейчас.
В качестве интересного бонуса: распределение брендов телефонов по всем вышеприведённым сайтам.
- Смартфоны Apple — 35%
- Смартфоны Samsung — 20%
- Смартфоны Lenovo — 5%
- Смартфоны Sony — 4%
- Смартфоны Nokia — 3%
- Все остальные — 33%
Самый популярный вариант вёрстки, при котором разрабатывается макет сайта фиксированной ширины (отсюда и название). Ширина, как правило, ~1200 пикселей. На данный момент, эта ширина является наиболее популярной по той причине, что обеспечивает нормальное отображение на большинстве устройств.
Вот так будет выглядеть стандартный фиксированный дизайн сайта на всех устройствах:
Объяснение технологии фиксированной вёрстки
Алгоритм простой — рисуется макет шириной 1200px, к примеру, далее этот макет располагается ровно по середине экрана, по бокам добавляются неиспользуемые полосы.
Вся проблема в том, что ширина этих полос будет зависеть от разрешения пользователя, который будет смотреть сайт. На ноутбуке с разрешением 1366px полосы составят всего 83px с каждой стороны (из 1366 вычитаем 1200 и делим результат пополам). При разрешении fullhd (1920x1080px) полосы будут уже более заметными и составят уже 360px.
Мобильные устройства научились масштабировать сайты, поэтому, скорее всего, на телефоне вы увидите такую картину:
Смотрится ровно также, как на большом экране, но проблема в том, что для того, чтобы попасть по ссылке меню, необходимо увеличить машстаб отображения браузера.
Более сложный в исполнении вариант, при котором рисуется не один макет, а 3 макета различного разрешения. Наиболее часто используемая схема: 320 | 768 | 1200. Таким образом, дизайнер вручную определяет, как будет смотреться сайт на всех возможных разрешениях.
Вот так будет выглядеть стандартный адаптивный дизайн сайта на всех устройствах:
Объяснение технологии адаптивной вёрстки
Разрабатывается сетка и определяется, как ведёт себя каждый отдельный блок в различных разрешениях. Учитываются особенности устройств. К примеру, для телефонов и планшетов увеличиваются размеры ссылок и текста, чтобы не было необходимости увеличивать масштаб браузера для клика в нужную область.
Также, для мобильных устройств разрабатывается отдельное меню для быстрого доступа в разделы сайта.
Каждый из вариантов имеет право на существование, каждый из них имеет свои плюсы и минусы.
Основные преимущества и недостатки каждого варианта:
Фиксированный дизайн
- Высокая скорость разработки сайта;
- Неудобство использования на мобильных устройствах;
- Небольшая стоимость разработки проекта;
- Устаревшая технология, прежде всего, по мнению поисковых систем;
- Простое и недорогое дальнейшее ведение,
- Неиспользуемые полосы по бокам на больших дисплеях.
- Поддержка и добавление новых страниц.
Адаптивный дизайн
- Лояльность со стороны поисковых систем;
- Удобное использование;
- Красивое отображение на всех типах устройств: от телефонов до ПК.
- Более высокая стоимость разработки;
- Длительный процесс разработки;
- Сложность дальнейшей доработки.
Преимущества адаптивного и резинового сайтов
Посетители заходят на сайт не только с компьютеров, но и с других устройств: смартфонов, планшетов, игровых приставок и даже телевизоров. Один и тот же сайт в разных браузерах может отображаться по разному, не говоря уже о разных устройствах, на которых некоторые веб-ресурсы могут вообще отображаться некорректно. По этому вопросу отображения сайтов на различных устройствах должно уделяться значительное внимание, т.к. далеко не все посетители просматривают страницы исключительно с компьютера.
Большинство браузеров сегодня отображают сайты практически одинаково. Один и тот же ресурс, вероятно, будет выглядеть одинаково в браузере Google Chrome и, скажем, Opera. Но вот просматривая сайт на мобильном устройстве, можно иногда заметить существенные различия. Это значит, что перед вами, скорее всего, адаптивный сайт.
Чем отличается адаптивный сайт от резинового?
- Под «резиновым» сайтом часто подразумевается обычный веб-ресурс, который на различных устройствах отображается одинаково. Такой сайт просто масштабируется под размеры конкретного экрана, оставаясь при этом неизменным. Если диагональ экрана невелика, то можно увеличить масштаб страницы для комфортного просмотра.
- Адаптивный сайт, напротив, подстраивается под конкретное устройство не просто масштабируясь, а меняя свой интерфейс и, иногда, информационную составляющую. Таким образом адаптивный сайт более удобен при просмотре, нежели обычный.
Разумеется разработка адаптивного сайта стоит несколько дороже, чем обычного. Но при этом заказчик не всегда понимает разницу между этими двумя видами сайтом. В этом случае он заказывает разработку именно адаптивного сайта, т.к. считает, что обычный ресурс будет отображаться на экране мобильного устройства некорректно, что является заблуждением. В большинстве случаев требуется разработка именно резинового сайта, который прекрасно отображается на всех мобильных устройствах.
И адаптивный и резиновый сайт одинаково хорошо отображаются на компьютерах с разными браузерами и операционными системами, будь то Windows, MAC OS или Linux. И те и другие сайты также хорошо отображаются на смартфонах и планшетах. Разница лишь в том, что обычный сайт отображается как есть, а адаптивный подстраивается под экран конкретного устройства. Возникает закономерный вопрос: «Для чего тогда вообще нужны адаптивные сайты, если обычные также хорошо отображаются на мобильных устройствах?»
Когда возникает необходимость в разработке адаптивных веб-ресурсов?
Адаптивные сайты часто разрабатываются тогда, когда значительная часть аудитории будет заходить на ресурс с мобильных устройств. Это могут быть какие-нибудь музыкальные порталы, посвященные мобильным приложениям сайты, некоторые интернет-магазины. В последнем случае разработчики нередко убирают с мобильной версии ненужную информацию, оставляя самое важное. Например, адаптивный сайт может не содержать информацию об истории компании, но всегда должен показывать контактные данные т.к. высока вероятность, что посетитель может позвонить со смартфона, с помощью которого он просматривает страницы ресурса. Поэтому к разработке адаптивного сайта часто предъявляются особые требования, из-за чего она и обходится дороже.
Существуют определенные правила, которые следует соблюдать при разработке адаптивного веб-ресурса. Прежде всего они касаются изображений. Рисунки и фотографии следует подбирать для страниц сайта таким образом, чтобы даже на небольшом экране они сохраняли свою информативность. И, конечно же, предпочтение стоит отдавать изображениям в высоком разрешении, адаптировав их для быстрой загрузки. Но это уже касается всех сайтов, не только адаптивных.
Следующее, на что стоит обратить внимание — это навигация. Поиск необходимой информации на сайте должен быть одинаково удобным как на компьютере, так и на мобильном устройстве. Это же касается и просмотра страниц. Если посетитель будет испытывать малейшее неудобство, он просто уйдет на конкурирующий ресурс.
Небольшой экран мобильного устройства не позволяет уместить всю необходимую информацию, поэтому приходится от чего-то отказываться. Если же оставить весь контент на сайте без изменений, то это может негативно сказаться на информативности ресурса т.к. посетитель просто не сможет найти то, что его интересует, в таком большом объеме информации.
Важно также уделить внимание оформлению информации. Сайт должен заинтриговать посетителя, заставить его остаться подольше на этом ресурсе и вернуться сюда в будущем. Можно ознакомиться с сайтами конкурентов, но только для вдохновения. Важно выделиться и привлечь посетителей чем-то необычным и запоминающимся. Но это тоже касается, в общем то, всех сайтов, а не только адаптивных.
Нужны ли вообще адаптивные сайты?
Отношение к адаптивным сайтам у многих интернет-пользователей и разработчиков веб-ресурсов двоякое. С одной стороны качественные адаптивные сайты заметно лучше воспринимаются с экранов мобильных устройств, нежели обычные. Такие интернет-ресурсы часто отличаются удобством навигации и просмотра страниц на планшетах и смартфонах.
С другой стороны многие путаются, когда привычный сайт выглядит на компьютере и, скажем, на смартфоне по-разному. Посетитель может просто не найти интересующую его информацию или элемент управления, в то время как обычные резиновые сайты остаются неизменными на всех устройствах. Поэтому при создании адаптивного сайта его интерфейс необходимо тщательно продумать и протестировать, иначе у постоянных посетителей могут возникнуть трудности с просмотром страниц.
Технология создания адаптивных сайтов открывает широкие возможности перед веб-разработчиками. Но эта технология должна использоваться только там, где она действительно необходима. В большинстве же случаев всем требованиям заказчика будет прекрасно отвечать обычный резиновый сайт.