Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн - это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.
1. Видео (демо) Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:
Video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
2. Максимальная и минимальная ширина (демо) Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div"а - 800 пикселей при возможности, но не более 90% ширины:Container { width: 800px; max-width: 90%; }
Так же можно масштабировать изображение:
img {
max-width: 100%;
height: auto;
}
Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:
@media \0screen { img { width: auto; /* for ie 8 */ } }
Min-width - противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:
5. Перенос слов (демо)
При помощи CSS можно переносить непереносимые текстовые конструкции:.break-word { word-wrap: break-word; }
Для тех кто еще не слышал о таком термине как адаптивная верстка могу сказать что такую верстку можно назвать человеческим языком послушной. Этот вид верстки подстраивается под все возможные экраны устройств с которых пришел ваш посетитель, а в последнее время их мягко говоря полно (нетбуки, планшеты, iphone, устройства на основе Android …). У всех этих устройств есть особенность, они работают с разными экранами, но некоторые и них даже перестраивают отдельные элементы, так например iphone очень не кстати, вашему дизайну делает свои кнопки и поля форм на вашем сайте.
Адаптивная верстка — с чего начатьПоговорим по порядку с чего начать делать адаптивную верстку и какие сложности могут быть при этом.
Что использовать для верстки:
Думаю не ошибусь если, скажу что начинать надо с изучения простого определения браузера при помощи CSS3. То есть чтобы вы могли строить разные стили для разных экранов устройств, а ваш дизайн при сужении окна браузера менялся так, чтобы посетителям сайта было удобно с ним работать.
Вот собственно эти стили их вам будет достаточно для начала:
Адаптивный css для верстки сайта
/* Для больших экранов */ @media (min-width: 1200px) { ... } /* Для некоторых нетбуков и планшетов (таблеток) */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Для планшетов и некоторых телефонов */ @media (max-width: 767px) { ... } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @media (max-width: 480px) { ... }
/* Для больших экранов */ @ media (min - width : 1200px ) { . . . } /* Для некоторых нетбуков и планшетов (таблеток) */ @ media (min - width : 768px ) and (max - width : 979px ) { . . . } /* Для планшетов и некоторых телефонов */ @ media (max - width : 767px ) { . . . } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @ media (max - width : 480px ) { . . . } |
С помощью приведенного выше кода вы сможете выставить настройки отдельных блоков и стилизовать их под разные экраны устройств, но кроме этого необходимо, чтобы и устройства понимали, что ваш сайт сделан для них. В этом может нам помочь код viewport .
viewport - для мобильных устройств
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" > |
Приведенный выше код не даст пользователю увеличивать или уменьшать ваш сайт как ему хочется, это за него должны делать стили о которых мы говорили выше.
Бонус в пользу адаптивных сайтовПоисковые системы уже намного лучше распознают адаптивные сайты и меняют выдачу под них. То есть ваш сайт, сделанный по правилам адаптивной верстки, скорее всего, будет выше для тех, кто ищет информацию с мобильных устройств, чем простые и скучные сайты которые нужно уменьшать и увеличивать на экране, чтобы на них прочесть хоть что-то. Такой вывод пришел ко мне из опыта разработки сайта для юридической компании и анализа его статистики. Google и Yandex любят удобные сайты, но учитывая, что такие сайты стоят в 3 — 4 раза дороже , не каждый может себе позволить заказать адаптивный дизайн и разработку под этот дизайн. Стоимость обусловлена тем что нужно рисовать дизайн под 3-4 устройства и верстать также под разные устройства, а такие CSS фреймворки как Bootstrap далеко не всегда могут решить все поставленные задачи которые на придумывал клиент).
Поговорим немного о BootstrapПервое что хотелось сказать о Bootstrap , не ищите документации нигде кроме официального сайта, у них там документация насколько хорошо описана, что врядли кто сможет лучше и по шагам расписать все возможности этого мега-фреймворка. Скорость верстки увеличивается в разы, но только в том случаи если клиенту нужен простой сайт без выдумок. Но когда сайт делается по всем требования клиента, иногда лучше этот фреймворк оставить и начать делать все просто вручную. Фреймворк отлично подойдет для тех, кто хочет научиться делать интерфейсы, например для панелей администратора, где уникальность дизайна не играет большей роли, но надо сделать все удобно. Бэкэнд сайта сделанный на bootstrap получается очень удобным и лаконичным, очень советую.
Тексты в адаптивной версткеДля того чтобы сайт смотрелся хорошо на всех экранах недостаточно только перестраивать блоки, изменять их размер и назначение при помощи css фреймворков и JavaScript , нужно еще и помнить как ведет себя текст на разных экранах. Если на маленьком экране телефона в 480 пикселей текст хорошо смотрится на 12 пикселях, то на большем экране этот текст нужно увеличивать, так как на больших мониторах никто не смотрит на текст впритык, а читают его издалека. Недолго покопавшись в Интернет, я нашел отличную отличный плагин написанный на jqery. Называется плагин FitText и находится . Все, что вам надо сделать, это подключить плагин и вызвать его для нужных элементов страницы.
Пример использования fittext
$("#fittext1").fitText(); $("#fittext2").fitText(1.5); $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: "75px" });
$ ("#fittext1" ) . fitText () ; $ ("#fittext2" ) . fitText (1.5 ) ; $ ("#fittext3" ) . fitText (1.1 , { minFontSize : 50 , maxFontSize : "75px" } ) ;
|
У плагина есть одна особенность, он работает только с блочными элементами (block, block-inline).
Проблемы при адаптивной верстке:Пока на этом сложности больше не замечал, но если знаете пишите буду проверять и дописывать. Иногда для отдельных случаев нужно определить тип устройства до загрузки страницы в браузере, в таком случаи советую использовать класс написанный на языке php. Скрипт поможет определять размер экрана посетителя сайта и устройство, с которого тот зашел до загрузки сайта, на стороне сервера. .
Если вам нужно чтобы ваши блоки плавно менялись на сайте, можно использовать анимацию CSS3 в ваших стилях для всех блоков.
Плавная трансформация блоков CSS3
*{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
Webkit - transition : all 0.3s ease ; Moz - transition : all 0.3s ease ; O - transition : all 0.3s ease ; Ms - transition : all 0.3s ease ; transition : all 0.3s ease ; |
Если ваш дизайн не позволяет сделать плавную трансформацию всех элементов на странице, то вы можете просто заменить (*) на (любой дугой элемент) или запретить анимацию для отдельных блоков как в примере ниже.
transition - отмена трансформации
Class-block, .class-block * { /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }
Class - block , . class - block * { /*CSS transitions*/ O - transition - property : none ! important ; Moz - transition - property : none ! important ; |
Верстка сайта - процесс создания структуры сайта, которая является базовым скелетом. Поверх нее накладываются стили оформления, динамические эффекты. Для с...
От Masterweb 20.04.2018 01:00Верстка - это создание структуры и оформление элементов web-страницы. Написанием кода веб-страницы занимается верстальщик или front-end разработчик. Он использует графическую программу для нарезки макетов, редактор кода, дополнительные программы для ускорения процесса.
Что такое версткаКод верстки является скелетом страницы сайта, пишется на языке разметки html. Состоит из логически разбитых на элементы частей страницы - тегов. Каждый из них отвечает за свою область: меню, подвал сайта, медиа, формы, карты, поиск по сайту, время. У них есть атрибуты, с их помощью идентифицируются отдельно взятые элементы. За оформление отвечают каскадные таблицы стилей, а за динамические эффекты - джаваскрипт.
Качественно сделанная верстка одинаково отображается на всех браузерах. Результат определяется проведением ряда тестов. Способность работать на более, чем одной аппаратной платформе, называется кроссплатформенность. Существует несколько подходов реализации верстки, используются различные фреймворки.
Для создания страниц по современным стандартам применяются разные методы адаптивной верстки. Это обеспечивает корректное отображение элементов на всех типах экранов.
Виды макетовСтандарты постоянно совершенствуются, и, как следствие, меняются способы разработки макетов. На данный момент существует 3 основных вида страниц:
- статическая;
- резиновая;
- адаптивная.
Статические макеты представляют собой страницы, которые не способны менять свое оформление. Их дизайн не меняется, а размеры элементов имеют четкое значение.
Адаптивная верстка подразумевает, что элементы сайта будут подстраиваться под размер экрана используемого устройства. При изменении ширины документа происходит перестройка блоков, одни части заменяются другими, некоторые элементы пропадают. Идея адаптивности пришла на смену мобильным версиям сайта, живущих на отдельных поддоменах. Главным принципом создания адаптивности является разработка дизайна под три экрана: компьютера, планшета, смартфона.
При создании резиновой верстки также учитываются изменения размеров экрана и все элементы подстраиваются. Главным отличием от адаптивной является то, что верстка расширяется или сужается под экран на каждом моменте изменений.
Проверить, какой из принципов используется, можно следующим образом. Если при растягивании окна браузера страница растягивается вместе с ним - значит, это резиновая верстка. Когда страница сайта изменяется только в нескольких положениях - значит, это адаптивная.
Размеры для адаптивной версткиДля создания адаптивных макетов используются относительные единицы измерений вместо стандартного статического px. Самые распространенные:
В адаптивной верстке на html em используется для того, чтобы задавать размеры шрифтов и отступов. По умолчанию 1 em равняется 16 пикселям. Соответственно, чтобы задать шрифт для параграфа p размером 32 пикселя, необходимо указать следующие:
Особенностью использования единицы является то, что 1em равняется размеру шрифта своего элемента. То есть 1em принимает различные значения в разных участках кода. Например, в блоке, где размер шрифта равняется 2em (32px), margin в 1em будет равняться 32 пикселям. Но там, где шрифт равняется 1em (16px), padding в 1em будет равняться стандартным 16 пикселям.
Rem - корневой em, который определяется в теге. 1 root-em, в отличие от 1em, равняется одному числу при любых обстоятельствах. Значение меняется только тогда, когда изменения задаются принудительно.
Проценты, как правило, используются для установления ширины блоков или изображений. Независимо от размеров экрана он будет соответствовать указанному значению, например, 80 %.
Медиазапросы
В CSS включена поддержка различных технических параметров устройств. Определяется смартфон с маленьким расширением экрана, указывается стилевое свойство под его значение. Медиазапросы выявляют различия ориентации: портретная и альбомная. Широко применяются для создания адаптивной верстки. Макет подстраиваться под указанное разрешение экрана, меняется структура документа в соответствии с кодом.
Определяемые типы устройств:
- устройства braille и принтеры embossed для слепых;
- обычные принтеры print;
- экран монитора screen;
- речевые синтезаторы speech;
- телевизоры tv.
В значении имени запросов указываются несколько условий. Например, выводить содержимое только для экранов мониторов и только максимальной шириной 600 px. Это выглядит так:
@media screen and (max-width: 600px) { код вывода }.
Адаптивный дизайн строится на использовании медиазапросов. Создается верстка для экранов, у которых минимальная ширина 1200 пикселей, тело кода помещается в @media screen and (max-width: 1200px) { }. Далее создается блок для планшетов @media screen and (min-width: 700px) { } и мобильных устройств @media screen and (max-width: 699px) { }.
Mobile First
По последним показателям, с мобильных устройств и планшетов в интернет заходят намного чаще, чем с компьютеров. Соответственно, мобильный трафик становится более значимым для веб-сайтов. В силу таких особенностей, как маленький размер экрана, пользователи гаджетов предпочитают сайты из первых строчек поисковой выдачи, они тратят меньше времени на поиск информации.
Подход Mobile First предполагает отображение самого важного содержимого, легкий и оптимизированный веб-сайт, отказ от загрузки других ресурсов.
Адаптивная верстка сайта по этой методологии предусматривает изначальное создание страницы для маленьких экранов и последующее добавление элементов так, как того требует дизайн страницы для большого монитора. Несмотря на прозрачность подхода, заказчики и исполнители прилагают большие усилия, чтобы полностью пересмотреть привычный метод разработки сайта.
Bootstrap
Один из популярных фреймворков, который дал простой ответ на вопрос, как сделать адаптивную верстку, - это Twitter Bootstrap. С помощью 12-колоночной сетки бутстрап создаются сайты, которые сразу по умолчанию правильно отображаются на экранах мобильных устройств. В качестве основных инструментов используются:
- заранее заданная ширина колонок, которыми можно определить ширину элементов;
- фиксированные и резиновые компоненты документа;
- встроенные шрифты и классы для них;
- средства оформления таблиц;
- классы оформления в меню, панели инструментов.
Динамические эффекты написаны на jQuery, для описания внешнего вида используется препроцессор SASS, в функционал встроены популярные веб-шрифты. Сайты, разработанные на последней версии bootstrap, не отображаются корректно в редко используемых версиях браузеров, таких как IE8, IE9 и iOS 6. Примечательно, что в качестве размеров шрифтов некоторых элементов используются корневые em. На официальном сайте есть подробные мануалы на английском и русском языке, примеры адаптивной верстки, способы использования встроенных компонентов.
Foundation
Foundation - мощный фреймворк, один из главных конкурентов Twitter Bootstrap. Поддерживает любые размеры сеток, имеет ряд преимуществ, которых не хватает в Bootstrap.
Компоненты отличаются большим набором различных анимационных эффектов, которые могут настраиваться. Для управления стилями используется препроцессор SASS. В списке базовых шаблонах содержатся слайдеры, панели навигации, иконки Social Media.
Размеры задаются значениями, приведенными в таблице.
Еще одна система, которая заслуживает внимания, - это Grid Layout. Представляет собой набор пересекающихся вертикальных и горизонтальных линий. Они образовывают столбцы и строки. Элементы помещаются в сетку, их размеры указываются в соответствии со строками и таблицами. Имеется возможность использовать фиксированные размеры, такие как px, и гибкие - проценты, rem и em.
Сначала grid контейнер нужно объявить.
Для задания ширины строк используется свойство grid-template-columns, а столбцов - grid-template-rows. Размеры могут быть указаны в одном свойстве grid-template-columns. Ширина полос измеряется в единицах fr, которые представляют собой долю доступного пространства в контейнере. Предусматривается возможность использования fx и px в одном свойстве. Например, grid-template-columns: 500px 1fr 2fr.
ЗаключениеПолная практика адаптивной верстки от А до Я включает в себя использование максимального количества способов. Чтобы разобрать с нуля, что такое верстка под все устройства, нужно вручную использовать медиазапросы, просчитывать размеры изображений и шрифтов. После получения соответствующих навыков можно начинать использовать фреймворки.
Улица Киевян, 16 0016 Армения, Ереван +374 11 233 255
Технологии постоянно улучшаются, смартфоны и планшеты становятся более "крутыми", а пользователи мобильными. На данный момент количество аудитории с мобильных устройств превысило пользователей с персональных компьютеров. Не даром это повлекло целое направление сайтов под мобильные устройства.
Например, если открыть обычный сайт (без адаптивной верстки и мобильной версии) через смартфон, то, скорее всего, он откроется в неудобном для пользователя виде. Т.е. контент будет отображен полностью, но будет присутствовать горизонтальная прокрутка, что плохо.
1. Адаптивная верстка сайта - что это такоеАдаптивная верстка сайта - это такая html верстка, в которой в зависимости от размеров окна браузера сайт "трансформируется" в удобной для пользователя вид
Отличия мобильной версии сайта и адаптивнойНе стоит путать мобильную версию сайта и адаптивную верстку сайта. Мобильная версия находится на отдельном поддомене и полностью дублирует контент сайта. Адаптивный сайт содержит те же самые адреса URL страниц, но в зависимости от устройства подгружает разные стили CSS, что позволяет отображать сайт в более удобном виде.
2. SEO оптимизация и адаптивная версткаПоисковые системы на данный момент имеют две разные выдачи (они очень похожи). Одну для пользователей ПК, другую мобильную. Если сайт не оптимизирован под мобильные устройства, то это считается отрицательным фактором и позиции сайта будут понижены на 2-3 (бывает и больше). При этом было бы логично, если бы занижались позиции только мобильной версии, однако практика показывает еще и ухудшение позиций и для основной версии сайта.
Такая несправедливость может быть объяснена тем, что поисковики, скорее всего, суммируют поведенческие факторы с ПК и мобильных устройств. В итоге естественно, если сайт не адаптирован, то его ПФ будут хуже и это тянет за собой вниз основную версию сайта.
3. Как проверить сайт на адаптивностьПроверить сайт на адаптивность можно лишь открывая его в различных браузерах и на меняя ширину экрана. Но делать это со множества различных устройств с разными разрешениями - отнимет крайне много времени. Также вряд ли у Вас есть в наличии десятки смартфонов и планшетов.
В интернете есть гораздо более быстрое и простое решение. Например, можно установить в браузер Google Chrome специальный плагин Window Resizer и с помощью него открывать сайт в самых популярных разрешениях.
Можно просто вручную изменять размеры окна браузера по ширине и смотреть результат. В Firefox или Google Chrome есть адаптивный дизайн браузера нажав Ctrl+Shift+M.
Самое главное условие - это добиться отсутствия горизонтальной прокрутки и отсутствия flash-плагинов на странице.
Google первый внедрил в поисковый алгоритм фактор адаптивности. У него есть специальный бесплатный сервис, который анализирует любой сайт на оптимизацию под мобильные устройства. У Яндекса этот функционал появился чуть позже.
После проверки возможно два варианта. Либо сайт оптимизирован, либо нет:
Например, проверка адаптивности в Google:
Проверка адаптивности в Яндексе:
Сделать адаптивную верстку сайта может только человек, разбирающийся в CSS и html . Мы рассмотрим основные моменты, поскольку единого рецепта нет.
Чтобы сделать адаптивную верстку, нужно создавать таблицы стилей CSS в третьей версии. Разница между 2 и 3 есть, но в данном вопросе очень сильное значение имеет отсутствие абсолютных значений в стилях. Короче говоря, все значения размеров блоков длина, ширина, размеры - все это задается в процентах.
Синтаксис CSS @Media
@media тип_устройства and|not|only (медиа_особенности ){ ... Описание стилей... }Например, напишем условия при которых стили будут работать для устройств с шириной экрана меньше 800px.
@media screen and (max-width : 800px ) { ... стили ... } ПримечаниеСтили надо писать последовательно от большого разрешения к маленькому, то есть сначала общие стили, а потом для «урезанных» размеров, например:
@media only screen and (max-width : 1280px ) { ... } @media only screen and (max-width : 1024px ) { ... } @media only screen and (max-width : 800px ) { ... }В заголовочных тегах необходимо обязательно написать строку:
Мета тег viewport говорит, что ширина экрана равна ширине браузера, а каждый пиксель соответствует одному пикселю на устройстве. Если этого не указать, то адаптивность не получится реализовать.
5. Практичные примеры адаптивной верстки сайта 5.1. Адаптируем очень длинные словаНапример, на странице встретится очень длинное слово и тогда если не установлены свойство overflow , то это может повлечь за собой появление горизонтальной прокрутки. Чтобы этого избежать нужно контенту прописать следующие CSS свойства
.hphns { overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; hyphens : auto ; } 5.2. Адаптивное меню сайтаСайдбар сайта как правило занимает ширину в районе 200-300 пикселей, что занимает почти всю ширину браузера на мобильных устройствах. Поэтому чаще всего делают выпадающие меню с помощью стандартной кнопки в виде трех штрихов (это стало уже классикой).
Реализовать это на сайте можно, но придется немного повозиться со стилями. Давайте рассмотрим все по шагам.
Ситуация, когда у нас есть меню и есть основной контент (я не стал рисовать шапку и футер):
Html код такой структуры может быть примерно таким:
body { margin-left : 10% ; width : 70% ; border : 1px solid #eee ; } #menu { width : 20% ; height : auto ; float : left ; } #content { width : 70% ; height : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ; } Меню Название страницыКонтент страницы
Контент страницы
Контент страницы
Контент страницы
Преобразуется на странице в
Минусом этого способа является то, что на маленьких разрешениях меню будет занимать почти всю область по ширине, а значит появится горизонтальная прокрутка или еще хуже - все блоки могут поплыть.
Модифицируем наш пример следующим образом. Если разрешение экрана меньше 800 пикселей, то меню исчезнет и появится специальная кнопка открыть меню.
Приведем html-код адаптивной верстки с комментариями:
body { margin-left : 10% ; width : 70% ; border : 1px solid #eee ; } #menu { width : 20% ; height : auto ; float : left ; display : block ; } #content { width : 70% ; height : auto ; float : left ; border-left : 1px solid #000 ; padding : 1% ; } #mob_menu { display:none ; } @media only screen and (max-width : 800px ) { #menu { display : none ; } #mob_menu { display : block ; } #content { clear : both ; } } function showmobmenu() { if ( == "block ") { document.getElementById("menu").style.display = "none " } else { document.getElementById("menu").style.display = "block " } } Раскрыть меню ↓ Меню Название страницыКонтент страницы
Контент страницы
Контент страницы
Контент страницы
Уменьшим ширину экрана до 700 пикселей (к примеру). Вот как это выглядит на странице
Есть два главных заблуждения о том, что такое адаптивная верстка сайта. Одни думают, что это просто уменьшенное отображение сайта, при котором элементы сжимаются. Другие настойчиво ставят знак равенства между адаптивным дизайном и мобильной версией сайта. В этой статье мы расставим все точки над i и расскажем, как же оно на самом деле.
Что такое адаптивная версткаАдаптивной называется такая верстка, при которой сайт корректно отображается на различных устройствах благодаря тому, что элементы динамически подстраиваются под различные разрешения экрана.
Проще говоря, адаптивность — это динамическое складывание блоков, а не уменьшенная версия сайта.
Неважно, с какого устройства пользователь зайдет сайт: с компьютера, планшета или телефона — пользоваться им будет одинаково удобно, и необходимый функционал сохранится в полном объеме.
Зачем нужна адаптивная версткаСегодня уже не нужно искать исследования и статистику, чтобы доказать, как часто выходят в Интернет с планшетов и мобильных телефонов. Эта реальность окружает нас повсюду: в общественном транспорте, в кафе, в очередях — люди охотно заполняют время серфингом в Интернете, да и вы сами знаете, насколько это удобно. Чтобы выбрать и заказать пиццу, никто не поедет сначала домой добраться до компьютера, а быстренько зайдет на сайт с телефона, попутно делая другие дела. Когда приходит идея о покупке, проще всего сразу же выйти в сеть, сравнить предложения магазинов-конкурентов и, не откладывая в долгий ящик, оформить заказ товара. И таких примеров можно привести бесчисленное множество!
Адаптивность — одно из важных и обязательных условий для современного сайта.
Если сайт корерктно отображается только с компьютера, то при просмотре с планшета или телефона на нем тяжело ориентироваться, блоки не масштабируются, тяжело попасть пальцем на нужную ссылку — в итоге пользователь раздражается, не может совершить целевое действие, теряет время на попытки разобраться в кривом отображении и уходит с ресурса. А потом уже больше не возвращается на него. И уходит к конкурентам.
Именно поэтому решение заказать адаптивный сайт — не прихоть, а условие, которое напрямую влияет на уровень продаж.
Как работает адаптивный сайтНеадаптивный сайт узнать легко — при просмотре с планшета или телефона вы увидите только часть области, вам придется двигать видимую область влево-вправо, приближать, чтобы шрифт стал читабельным, и отдалять, чтобы найти нужный раздел или форму заявки.
Сайт, имеющий адаптивную верстку, подстраивается под устройство, в зависимости от ширины его экрана. Все элементы на странице адаптируются: меняются их размеры, появляется/исчезает часть вспомогательного контента и декоративных элементов. При этом блоки перестраиваются так, чтобы пользователю было удобно — на значимой информации делается акцент, а второстепенные данные убирают или сворачивают.
Как правило, чем меньше ширина экрана — тем концентрированнее подача информации и тем меньше блоков задействовано. При этом пользователю нет необходимости изменять масштаб: всё просто и понятно даже на небольшом экране.
Еще одна особенность адаптивных сайтов: укрупнение значимых элементов так, чтобы пользователь легко мог попасть пальцем на кнопку на экране или перейти по ссылке. От этого напрямую зависит конверсия сайта, поэтому адаптивный дизайн важно делать user friendly.
Важные факты, которые нужно знать об адаптивных сайтах1. Адаптивный сайт и мобильная версия — это не одно и то же .
Когда мы говорим про адаптивный сайт, то мы имеем в виду, что это один сайт для разных устройств. В этом его ключевое отличие от мобильной версии сайта. Мобильная версия — это отдельный полноценный сайт, у которого свой функционал, своя верстка и зачастую свой контент. Мобильная версия разрабатывается с учетом удобства пользователей, выходящих на сайт с мобильных устройств: что из десктопной версии им очень важно, а что — избыточно и легко может быть удалено.
2. Функционал на всех устройствах один и тот же .
Здесь всё ясно: так как сайт один, то и возможности его одинаковы, независимо от того, с какого устройства пользователи заходят на сайт.
3. У адаптивного дизайна есть ограничения .
Связаны они в первую очередь с сохранением оригинальной структуры контента при изменении размеров экрана. Зачастую в адаптивной версии мы отказываемся от слайдера и больших фоновых изображений, которые есть в десктопной версии, и не используем Flash. Обычно мы рекомендуем оптимальный вариант.
Но бывает и такое, что дизайн согласован в том варианте, на котором настаивает клиент, а уже готовая верстка оказывается неудобной. Тогда все изменения вносятся за дополнительную плату, так как мы работаем четко по ТЗ.
4. Адаптивность может быть полной и частичной .
Полная адаптивность — от мобильных устройств до десктопов, частичная — например, от планшета или ноутбука до десктопа. При разработке адаптивного дизайна обычно делается упор на конкретные устройства, с которых у клиента генерируется больше всего трафика.
5. Не все сайты выигрывают от полностью адаптивного дизайна.
Сайтам со сложным функционалом и/или контентом, требующим достаточного количества экранного пространства для восприятия, полная адаптивность чаще идет во вред. Лучше выделить перечень устройств, на которых функционал будет полным, и сделать для них версию с частичной адаптивностью, а для остальных сделать мобильную версию с урезанным функционалом и возможностью перейти на полноэкранную версию.
6. За идентичность отображения в разных браузерах отвечает кроссбраузерность .
Обязательно указывайте этот пункт в ТЗ, если для вас важно, чтобы в разных браузерах сайт отображался одинаково. В противном случае в старых версиях браузеров сайт может отображаться с ошибками и выдавать нечитабельные шрифты. А это прямой путь к потере целевой аудитории.
Что нужно знать, если вы хотите заказать адаптивную версткуКомпания «Технологии успеха» оказывает услуги по созданию адаптивной верстки сайта. Лучше предусмотреть адаптивный дизайн еще на этапе разработки основного сайта и прописать это в ТЗ. Но если вы придете к нам с готовым дизайном в формате.psd, мы тоже сможем помочь вам. За верстку макетов, сделанных в CorelDraw, мы не беремся — в таком случае мы предлагаем клиентам сначала подготовить дизайн и только потом верстку.
Не зная особенностей сайта и ТЗ, невозможно сориентировать по срокам вёрстки.
Обычно верстка адаптивного корпоративного сайта занимает в среднем 15 дней, срок верстки адаптивного интернет-магазина напрямую зависит от сложности сайта.
Мы никогда не передаем верстку на следующий этап — программирование — пока клиент не проверил адаптивность сайта и корректность работы всех его элементов согласно ТЗ.
Остались вопросы: или мобильную версию? Звоните по бесплатному номеру 8 800 775-17-11 или оставьте свой номер, и мы вам перезвоним и все расскажем.