Основные преимущества и недостатки адаптивного дизайна вебсайта
К основным преимуществам отзывчивого дизайна относятся следующие характеристики:
- Удобство. Гибкий веб-сайт, которым можно пользоваться со всех типов электронных устройств, повышая удобство работы в Интернете.
- Простая, быстрая и недорогая разработка и поддержка.
- Наличие всех страниц адаптивной версии сайта на одном URL, что устраняет ряд проблем с оптимизацией для поисковых систем.
- Привлекательный внешний вид, сохранение дизайна и структуры сайта на любом электронном устройстве.
- Экономическая выгода. Поскольку число пользователей мобильного интернета продолжает расти, сайты с адаптивным дизайном становятся все более посещаемыми. Это позволяет эффективно продвигать продукцию или услуги компании-владельца и тем самым добиваться увеличения прибыли.
- Легкость продвижения SEO сайта. Неадаптируемые интернет-ресурсы значительно ниже ранжируются в результатах поиска Google при использовании мобильных устройств. Адаптивность сайта играет огромную роль в его рейтинге в поисковых системах. Если он удобен для Google и правильно оптимизирован, то после выхода на первые позиции он привлечет большое количество новых посетителей и поможет увеличить доход компании.
- Повышение лояльности целевой аудитории. Пользователи мобильного интернета, выбирая между двумя разными сайтами, относящимися к одной нише, предпочитают тот, который адаптирован к используемым ими устройствам.
К недостаткам отзывчивого дизайна относятся медленная загрузка интернет-ресурсов и отсутствие некоторых технических и графических элементов.
Отсутствие возможности перелинковки страницы.
Сначала мобильные
Медиазапросы называют “сначала мобильные”. Стандартная процедура заключается в использовании стилей, оптимизированных для небольших экранов, в качестве стилей сайта по умолчанию, а затем с помощью медиазапросов добавлять стили по мере увеличения размера экрана.
Идея мобильных устройств заключается в том, что пользователям не нужно загружать стили для настольных компьютеров, поскольку они обычно используют больший экран. Трафик здесь расходуется впустую. Для всех пользователей, которые ищут отзывчивый сайт, трафик является ценным.
Элементы дизайна “mobile first” не ограничиваются только возможностями мобильных пользователей. В скором времени большинство подключений к Интернету будет осуществляться на портативных устройствах. При этом предполагается создать значительный мобильный опыт.
Контрольные точки для медиа-запросов могли бы выглядеть так, если бы они разрабатывались с учетом принципа “mobile first”.
/* Сперва стили по умолчанию, затем медиа-запросы */
@media screen and (min-width: 400px) {...}
@media screen and (min-width: 600px) {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}
В частности, медиазапросы могут предотвратить загрузку бессмысленных ресурсов. Хорошо бы исключить тени, градиенты и трансформации из стилей для мобильных устройств. Они создают большую нагрузку и даже сокращают срок службы батареи при чрезмерном использовании.
/* Стили по умолчанию */
body {
background: #ddd;
}
/* Стили для больших устройств */
@media screen and (min-width: 800px) {
body {
background-image: url("bg.png") 50% 50% no-repeat;
}
}
Agile и водопад глазами заказчика
Чтобы убедить заказчика в чем-то, вы должны придерживаться одной и той же точки зрения. Давайте попробуем составить сравнительную таблицу, не вдаваясь во все подробности agile-методологии (позже я приведу несколько полезных ссылок).
Процесс разработки
Всего в каскадной модели существует пять отдельных этапов. Предпроектное исследование (в результате которого составляется ТЗ и смета проекта), создание технического задания и разработка проекта – это обычные этапы.
После каждой итерации гибкая модель дает нам условно готовый проект (“предварительная структура участка с черновым дизайном”, “голый участок с черновым интерьером”), который можно использовать в качестве отправной точки для дополнительной работы, дополнительной детализации или переоценки более ранних этапов.
Написание длинного, всеобъемлющего ТЗ представляет собой проектирование в каскадной модели. Четкое понимание целевой аудитории, желаемых результатов и отправной точки заказчика – это все, что требуется в модели agile. Требования к дизайну или общее описание функциональности соответствующего документа (ТЗ) служат примерной структурой проекта.
В каскадной модели клиент участвует три-четыре раза: при выборе подрядчика, во время проектирования и в процессе проектирования. При использовании гибкой модели клиент должен быть готов к тому, что его будут привлекать раз в неделю для координации и обсуждения. У заказчиков, которые “ленивы” или “заняты”, могут возникнуть проблемы с профессионалами.
Когда речь идет о сроках и стоимости проекта, ни подрядчик, ни заказчик не знают даты его завершения. Кроме того, иногда существует каскадная модель.
Height и width
Определение высоты или ширины области просмотра устройства и браузера – одна из самых популярных медиафункций. С помощью медиафункций можно найти следующие числа: height, hold и device-width.
Высота области рендеринга – окна браузера – является основой для функций высоты и ширины. Высота устройства вывода, которая может быть больше, чем сама область рендеринга, является основой для функций device-height и device-width. Эти медиафункции могут иметь любое значение, как абсолютное, так и относительное.
@media all and (min-width: 320px) and (max-width: 780px) {...}
Наиболее часто используемые функции в отзывчивом дизайне – это min-width и max-width. Не увязая в специфике устройств, они позволяют одинаково создавать сайты для компьютеров и мобильных устройств.
Использование префиксов min и max
Для медиафункций можно использовать префиксы min и max. Если префикс max обозначает значение меньше, чем, то префикс min обозначает значение больше или равно. Префиксы mine и min помогают избежать несовместимости со стандартным синтаксисом HTML.
Адаптивная вёрстка
Что отличает резиновый, адаптивный и отзывчивый макияж от мягкого макияжа и как их следует применять?
Вместо того, чтобы разрабатывать три разных общих подхода, давайте разберемся с вариациями.
В те времена, когда еще не было мобильного интернета, доступ в интернет можно было получить только на настольных компьютерах с крошечными экранами, оптимизированными под браузер Internet Explorer 5 с разрешением 1024 на 768! Сайты тогда гордо заявляли: “Мы гордимся своим статусом”. Но время шло, и экраны становились все больше, нужно было что-то делать. Тогда все, что оставалось, – это резиновые таблицы со списком 50% в одной колонке. Не думаю, что вы поняли, к чему я клоню.
Прорезиненная верстка – это когда верстка и каждая из ее составных частей устанавливается на эластичный процент, а не на фиксированную ширину. в соответствии с шириной. В вебе высота задается нечасто. Она адаптируется к содержимому сайта, поэтому резина автоматически определяется содержимым страницы? – втайне надеялся, что верстальщики из 2000-х сделают ее еще лучше. Трудно поверить, что когда-то это была новаторская концепция, двигавшая общество вперед.
Резиновая раскладка все еще существует, но таблицы раскладки исчезли. Если у вас есть поплавки, которые растягиваются, делайте импровизированные рифы. Сетки можно использовать! – Это все еще резиновая верстка. Однако, если ширина внешнего контейнера фиксирована, это уже исправление. Но все же это немного другое исправление. Вообще говоря, крайне важно, чтобы площадка двигалась в тандеме с окном. а не торчала в виде кирпича где-то у края окна.
Задача состояла в том, чтобы как-то адаптироваться, как только появилась возможность подключиться к Интернету и появились первые мобильные браузеры. Это уже не помогало; стили необходимо было пересмотреть. Метод адаптивной верстки, разработанный Марком де Доббельштайном, был одним из первых в 2006 году. По предложению Марка, новые классы должны добавляться в окно при каждой его загрузке или изменении размера. Через два года в Safari должны появиться медиавыражения.
Книги “Адаптивный веб-дизайн” Аарона Густавсона и “Отзывчивый дизайн” Итана Маркотта были опубликованы в то время, когда стало ясно, что и как адаптировать под мобильные браузеры и медиавыражения. Идеи Маркоффа были включены в стратегии Аарона и Итана, но они использовали более современные методы.
Аарон предложил адаптировать веб-сайты к возможностям оборудования и браузеров. Прогрессивно развивающийся ненавязчивый JavaScript был важным компонентом этой философии. Хотя привязка к определенным разрешениям – это не совсем то, о чем писал Аарон, сейчас это признано ключевой проблемой. Стили чередуются между точками останова, оставляя вас в неведении относительно того, что находится между ними.
Три пункта возглавляют список Итана: медиа-выражения, гибкие изображения и резиновая верстка. Все размеры и отступы должны быть указаны в процентах с бессмысленными дробями, предлагает Итан. Этот подход отличается плавным изменением сайта и отсутствием акцента на конкретных устройствах или типах контента. Для его описания используется фраза “наша резиновая верстка”.
В своей книге “Mobile First” Итан развивает новую идею. Он предлагает изменить стратегию на противоположную, начав с мобильной версии, поскольку до сих пор настольная версия была отправной точкой для изменения макета. Почему так происходит? Почему проще сделать что-то сложное, чем сделать что-то простое? Подумайте об этом! Кроме того, нет соблазна скрыть сложное и исключить мобильных пользователей.
Теперь вы это понимаете? Здесь у нас отзывчивый и адаптивный. Угу. Потому что существует несоответствие между принципами веб-дизайна и методами адаптивной верстки, и потому что все эти методы хорошо работают вместе. Этот термин достаточно инклюзивный, чтобы охватить все дополнительные методы.
Да, а также дискретная адаптация от предыдущих размеров устройств. Современные размеры делают жесткое переключение между размерами и опору только на один размер крайне болезненной ошибкой. Несмотря на это, вы можете свободно создавать модификации для желаемых разрешений в полностью резиновом макете.
Что теперь делать с макетом? Все просто! Сначала нужно создать макет для мобильных устройств, который будет хорошо работать на компактных устройствах. И вы начинаете использовать это дополнительное пространство для улучшения пользовательского интерфейса по мере увеличения размера экрана или окна. Появляется боковая колонка, затем еще одна, и так далее. Когда вы достигаете экрана самого дорогого телефона, медиавыражения не меняют свои стили, когда они нужны для содержания сайта и пользовательского интерфейса. На семинарах по продвинутой верстке и интенсивах мы учим вас именно этому.
Контент, медиавыражения и другие аспекты веб-дизайна требуют большого внимания. Сегодня мы открыли для себя подход, который существует только один. Давайте обсудим остальные.
.
Ваши проблемы — это проблемы заказчика
Мы вынуждены покупать одно (время наших сотрудников) и продавать другое, когда платим “за результат”. Нам нужно найти решение проблемы неправильной конвертации одной вещи в другую за счет клиента, как я уже говорил.
Для разработчиков каскадная модель может привести к проблемам. Например, проект может быть отложен из-за ошибки клиента. Кроме того, из-за масштаба проекта отсутствие ожидаемого платежа может привести к дефициту бюджета. На мотивацию сотрудников отсутствие своевременных выплат по долгу, скорее всего, не повлияет. А вот на клиента повлияет.
Несоответствие между результатом и ожиданиями клиента – еще одна проблема каскадной модели. При передаче проекта было много разговоров на эту тему:
Это что? Но мы действовали в соответствии с ТЗ, которое вы подписали. Я пытался переварить ваш птичий язык на протяжении 100 страниц, но не смог. – Хорошо! Вы заплатили деньги, и заплатите их потом. Мы переделаем все бесплатно.
Цифровой стороне разрешается совершать ошибки, потому что заказчик будет терпеливым и надежным партнером. Agile значительно снижает вероятность возникновения проблем с безопасностью.
Заказчики и разработчики будут помогать друг другу в решении проблем проекта, если между двумя сторонами существуют равноправные отношения сотрудничества (включая доверие, что мы будем делать то же самое для них).
Демонстрация медиа-запросов
Мы можем переписать ранее созданные гибкие макеты с помощью медиазапросов. Когда ширина на маленьких экранах становится бессмысленной, это одна из самых частых проблем в демонстрациях. Отключив float и изменив, можно добавить медиазапросы для видовых экранов, ширина которых меньше 420 пикселей.
@media all and (max-width: 420px) {
section, aside {
float: none;
width: auto;
}
}
Диаграмма 4.02. Без освещения в СМИ и без некоторых СМИ рамки становятся слишком ограниченными. Возможно, всего реального в этом мире слишком много.
Диаграмма 4.03. Мы изменяем ширину и убираем плавающий элемент. Теперь они заполняют всю ширину экрана, предоставляя уже присутствующему содержимому больше места.
Определение контрольных точек
Не стоит писать контрольные точки в медиазапросах на основе стандартных размеров области просмотра устройства, таких как 320px, 480px и 768px.
Независимо от устройства, при создании отзывчивого сайта следует использовать различные размеры области просмотра. Только когда сайт начинает рассыпаться, выглядеть странно или мешает опыт, вводятся контрольные точки.
Кроме того, постоянно появляются новые гаджеты и решения. Приходится постоянно бороться с этими изменениями.
Как сделать адаптивный дизайн сайта под все разрешения экрана
Цель отзывчивого дизайна – предоставить возможность выбора. Ваш выбор будет зависеть от вашего финансового положения и уровня владения CSS/HTML.
- Если у вас нет возможности и склонности вникать в тонкости верстки, но финансы позволяют найти специализированную компанию или фрилансера, который адаптирует ваш шаблон под разные устройства или сделает новый, это будет лучшим вариантом.
- Найдите подходящий дизайн, который уже был сделан самостоятельноНа сегодняшний день подавляющее большинство дизайнеров стараются адаптировать свои шаблоны для мобильных устройств. Этот способ подходит тем, кто не зациклен на эксклюзивном шаблоне, или тем, кто настолько хорошо разбирается в теме, что может внести собственные изменения в код, сделав шаблон уникальным.
- Используйте фреймворкиФреймворки – это, по сути, основа для шаблона, его базовых файлов и блоков сетки. Фреймворки популярны среди дизайнеров, потому что они просты в использовании и экономят время, поскольку готовая основа шаблона позволяет не увязнуть в рутине. Для тех, кто умеет работать с фреймворками, использование их для создания адаптивного веб-дизайна – хороший вариант.
Дизайн также можно создавать и редактировать без помощи таких программ, как toolkit или theviewport.
Используйте мета-тег viewport для указания способа изменения размера и отображения размера страницы. На сайтах это указывается в явном виде. Для устройств, отвечающих требованиям csS, элементы мета-тега viewport могут указывать ширину экрана.
Мета-тег viewport пишется так:
Рекомендуется записывать следующие слова:
Помимо перечисленных, элементы мета-тегов могут иметь дополнительные параметры и атрибуты.
Какую роль вообще играет разработка? медиа-запросы для CSS3. Они включают условие, которое может быть true или false (принтеры, смартфоны и планшеты), тип медиа.
На веб-сайтах для смартфонов, планшетов и настольных компьютеров эти запросы генерируют большое количество изображений. Они поддерживаются всеми современными браузерами.
Записано следующим образом:
В адаптивном дизайне часто используются такие характеристики средств массовой информации, как:
Дополнительные характеристики включают цвет, ширину устройства, высоту, ориентацию, портрет, разрешение и др.
Точки останова (breakpoints) – это еще одно название медиафункций.
Контрольные точки не обязательно должны быть привязаны к определенному разрешению дисплея. Учитывая, что они могут быть изготовлены с разными значениями параметров, что приводит к неправильным или визуально неполноценным макетам;
Логические операторы – это еще один синтаксис для медиазапросов:.
После всех основных стилей CSS в самом конце файла стилей пишутся медиа-запросы.
Ленивый заказчик — враг agile
Я не имею в виду только природную лень.
Идеальный
Заказчик — это тот, кто:
Вы вряд ли сможете сотрудничать с заказчиком по гибкой методологии, если заказчик не соблюдает эти требования или если он “ленив”. Скажите мне, положа руку на сердце, с каким количеством “ленивых” заказчиков вы сталкивались в последнее время. Это большая проблема, как я убедился на собственном опыте.
Клиенты, которые ленивы, помимо всего прочего, очень тревожны. Я позаботился об этом:
- Невозможно планировать сроки для большого проекта, так как разработчики всегда их превышают
- В процессе работы часто возникают новые интересные идеи, которые противоречат первоначальным требованиям
- Видение клиентом задач может измениться в течение нескольких месяцев работы над проектом, а разработчик может не получить эту информацию
- Самый изысканный интерфейс на реальных данных не всегда так же красив и практичен, как в прототипе
- Дизайнеры очень редко “доходят до задачи” так, как ее видит клиент (и это не всегда вина дизайнеров), и они вынуждены
Согласны ли вы с этим? Подумайте о том, чтобы рассказать все это клиенту. Вы бы пришли к выводу, что эта компания нанимает много очень непрофессиональных людей. Клиент, скорее всего, выберет компанию, которая не предоставляет услуги Agile.
Логические операторы в медиа-запросах
Вы можете строить сильные выражения с помощью логических операторов. В медиазапросах можно использовать одну из трех категорий логических операторов.
Вы можете добавить дополнительное условие и гарантировать, что браузер или устройство выполнит либо a, b, либо tte [1], используя логический оператор and в медиазапросе. “Вам нужно выбрать один из ответов на вопрос о том, как работает компьютер”, – говорится в сообщении. The Verge со ссылкой на сайт Gizmochina Publishing Live News of the Worlds сообщает, что это может быть поиск по ключевым словам с помощью специализированного приложения Google Checker Cloud от Microsoft Security Network Inc. Все медиафайлы в приведенном ниже примере имеют ширину от 800 до 1024 пикселей.
@media all and (min-width: 800px) and (max-width: 1024px) {...}
Запрос с единственным ответом отрицается логическим оператором not. В данном случае фраза относится к любому гаджету без цветного экрана. Черно-белые или цветные экраны также могут быть монохромными.
@media not screen and (color) {...}
Алгоритм HTML4 не поддерживается браузерами, использующими только логический оператор. Приведенное ниже выражение выбирает только портретно-ориентированные экраны на устройствах с поддержкой медиа-запросов.
@media only screen and (orientation: portrait) {...}
Примеры качественного адаптивного дизайна сайта в рунете
Хотя многие специалисты в области электронных СМИ отдают предпочтение мобильным сайтам, некоторые до сих пор не задумываются о том, как они могут быть полезны пользователям смартфонов. Среди них выделяется издание “Коммерсантъ”.
На главной странице адаптивного сайта новости представлены как в кратком, так и в подробном формате. Лучший вариант для просмотра на мобильных устройствах, вероятно, не этот.
Адаптивный дизайн новостного сайта является успешным. На планшетах, телефонах или настольной версии портал работает безупречно. Для самых последних итераций новостей есть возможность предварительного просмотра.
Meduza делает ставку на новости, поскольку уверена, что именно так люди читают их чаще всего – на своих телефонах и смартфонах. Адаптивный сайт информационного портала представляет собой, по сути, длинную ленту новостей с небольшими вкраплениями из других рубрик. И вы можете найти больше, нажав “Меню”.
Пользователи, которые заходят на страницу со стационарного компьютера, по-прежнему могут пользоваться адаптивным сайтом Сбербанка. При размещении информационных функций учитываются пожелания мобильных пользователей.
В шапке сайта есть ссылка на Сбербанк Онлайн. Здесь же указаны контакты колл-центра, а также расположение ближайших отделений и банкоматов (контакты службы поддержки клиентов по-прежнему дублируются в первом свитке), а также есть “Меню”, из которого можно выбрать нужную задачу.
Альфа-Банк больше напоминает мобильную посадочную страницу, с которой можно выбрать нужную услугу. На первый взгляд, тяжелой картинки нет.
Однако загрузка страниц занимает некоторое время, а при выборе некоторых операций происходит автоматическое перенаправление на полную версию сайта.
На сайте банка “Тинькофф” есть баннер в адаптивной версии. Он занимает значительную часть экрана и побуждает глубже изучить ресурс, чтобы узнать больше о предложении.
В целом сайт очень похож на западные аналоги, где в качестве пояснений используются красивые картинки, а не длинные тексты.
Это отличный пример веб-сайта с услугами. Кстати, на первой прокрутке экрана страницы Aviasales можно отобразить их все сразу. Банкам, с другой стороны, трудно уместить на экране каждую опцию по отдельности, потому что существует так много вариантов для разных типов клиентов. Охотники за скидками могут получить доступ к функции расширенного поиска, нажав кнопку “Меню”, если им потребуется более подробная информация. Вы можете прочитать отзывы о бизнесе, проведя пальцем вверх.
На сайте “М. Видео” основной акцент сделан на продажах и популярных категориях товаров. Именно таким и должен быть интернет-магазин. Удивительно, но в разделе “Магазины” нет номера телефона или другой контактной информации о пользователе.
Большая форма поиска и конкурентные преимущества продавца – первое, что вы видите, попав на Wikimart. После этого следуют предложения зарегистрироваться на ресурсе или войти в личный кабинет, а также скидки и акции.
Для этих заведений доступна базовая программа, но нет телефона. Еще один момент: в самом низу страницы есть раздел “Покупателям”, а также информация о доставке и оплате.
На домашней странице Мегафона клиенты могут воспользоваться различными услугами, включая пополнение счета, обучение мобильному интернету и информацию о роуминге. При покупке планшета или смартфона все еще хуже.
Адаптивная версия Яндекса уютнее, чем версия сайта. На одной странице она предлагает почти все сервисы Яндекса, некоторые из которых весьма привлекательны. Только если пользователи не устанут перелистывать страницы.
Сайт как изобретение
Клиенты отказываются оплачивать эту процедуру. В результате ваши программисты могут вести себя невежливо, работать в две смены и пропускать лишние часы; вы также можете обмануть клиента, взимая плату за дополнительное время.
Мы разрабатываем новый продукт, и это ключевой момент. Несомненно, существуют проекты, очень похожие на наш. Но нам было бы сложно оценить трудоемкость проекта, если бы мы его не завершили! И, как человек, руководивший веб-студией более десяти лет, я могу подтвердить, что возможность повторного использования собственной работы – большая редкость.
Поэтому предварительную стоимость крупного проекта мы можем оценить либо с потолка, либо используя знания о “проектах-больше всего похожих” (это не проект), а то и больше. Если нам повезет, мы сможем завершить проект быстрее и за меньшие деньги, выгодно для клиента.
Из этого следует, что если мы хотим изобрести что-то новое и продемонстрировать необходимость оплаты процесса.
Часто задаваемые вопросы про адаптивный дизайн сайта
В Интернете есть тонна информации об отзывчивом дизайне веб-сайтов для начинающих. В этой статье мы рассмотрим некоторые из наиболее сложных вопросов.
В отзывчивом дизайне используются чистые HTML и CSS. Размер экрана устройства пользователя определяется системой CSS.
Можно ввести правило, запрещающее появление боковой панели на экранах с размером экрана менее 320 пикселей. Или (на широкоформатном мониторе) размер шрифта основного текста будет увеличен до 15 пикселей.
На сайте может использоваться отзывчивый дизайн.
Нет, это не сложно. Веб-сайт необходимо открыть в любом браузере с указанным размером. После использования адаптивного дизайна внешний вид веб-страницы изменился.
Да, скорее всего. Медиа-запросы из HTML5 и CSS3 используются в адаптивном дизайне; старые версии IE их не поддерживают. Однако вы можете преодолеть эту проблему, используя JavaScript, respond.js и другие инструменты модернизации, которые могут модифицировать CSS3 и HTML5 для IE6 и более ранних версий.
В первую очередь следует учитывать формат размещаемых материалов, поскольку широкие блоки – например, баннер шириной 320 пикселей – не помещаются на экране телефона шириной 350 пикселей.
Предпочтительнее использовать обычные прямоугольные блоки (например, 300 x 250), поскольку они также адаптируются к экранам мобильных телефонов.
Необходимо установить следующие параметры медиаразрешения CSS3: