Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
C 2007 года очень быстро растёт количество используемых в мире смартфонов. В числе прочих причин резкого скачка популярности несколько лет назад покупателей привлекла способность этих устройств отображать сайты так, как они выглядели на экранах компьютеров. Но, купив смартфон и начав им пользоваться, люди отмечали, что для чтения отдельных блоков текста на относительно небольшом экране приходилось постоянно масштабировать страницу. Плюс к тому, многие элементы управления сайтов оказалось неудобно использовать. Это происходило потому, что страницы не были рассчитаны на управление с помощью прикосновений к экрану и зачастую требовали компьютерную мышь или другой манипулятор. Для решения этих проблем начали появляться отдельные версии сайтов, предназначенные исключительно для устройств с маленьким экраном. При этом пользователям оказалось не нужно знать адреса мобильных сайтов. Вместо этого сервер считывает информацию об устройстве из обращённого к нему запроса и определяет, какую версию предпочтительнее отдать посетителю.
Вскоре многим стало понятно, что разработка отдельной мобильной версии — это долго и дорого в поддержке. Кроме того, это противоречит идеологии веба, который подразумевает, что размеченный документ универсален и может быть прочитан практически на любом устройстве вывода. Для решения возникшего противоречия в CSS был добавлен стандарт Media Queries. Появились новые возможности по определению особенностей устройства, в частности появилась возможность применять различное оформление страницы для произвольных размеров окна.
Теперь посетители сайтов обладают множеством разных устройств, начиная с мобильных телефонов и заканчивая телевизорами. Удобная мобильная версия сайта позволяет достичь следующих преимуществ:
Адаптивная вёрстка заключается в динамическом изменении CSS-стилей при различных размерах окна браузера. Часто учитывается именно ширина окна. Хороший пример адаптивной вёрстки можно увидеть на smashingmagazine.com, где страница адаптируется под пять интервалов окна браузера, каждый раз сохраняя максимальный комфорт для чтения.
Существует два подхода к реализации адаптивной вёрстки:
Мы остановимся на втором подходе, когда у вас уже есть обычный сайт для настольного компьютера, который необходимо адаптировать под мобильные устройства.
Для проверки результатов нашей работы можно просто изменять размеры окна браузера. Но есть специально предназначенные для этого инструменты — например, эмуляция в инспекторе компонентов Chromium:
В качестве примера возьмём сайт Yandex Data Factory, демонстрирующий технологии автоматической модерации изображений, — imagemoderation.yandexdatafactory.com. Изначально он был свёрстан под большие экраны, но однажды потребовалась и мобильная версия. Давайте рассмотрим, какие у этого сайта были проблемы на мобильных устройствах и шаг за шагом устраним их.
1. Проблема: мелкие элементы управления и плохо различимый текст
Если открыть любой сайт для настольного компьютера на мобильном телефоне, сложно не обратить внимание на неудобный интерфейс с массой плохо различимых мелких элементов. Попав на такой сайт, человек сразу увеличивает масштаб страницы.
Давайте сразу зададим комфортный масштаб, для этого достаточно добавить один тег в :
Мы изменили viewport браузера — видимую область страницы, размеры которой изменяются при масштабировании окна браузера. Мы поменяли ширину и первоначальный масштаб viewport.
Без мета-тега страница обрезалась по ширине стандартной величины viewport браузера:
После мы добавили мета-тег, устанавливающий ширину видимой области страницы в оптимальное значение, определённое производителем устройства:
Основные свойства мета-тега viewport:
В стандарте CSS есть черновик, описывающий специальное правило @viewport, которое на сегодняшний день почти не поддерживается браузерами. Мета-тег с аналогичной функциональностью был придуман в Apple и сегодня поддерживается всеми современными мобильными браузерами, поэтому на практике используем его.
2. Проблема: не все элементы помещаются на экране, появилась горизонтальная прокрутка
Теперь наша страница имеет комфортный масштаб, но некоторые элементы перестали помещаться на экране, из-за чего появляется горизонтальная прокрутка. Просматривать такой сайт неудобно.
Дело в том, что для мобильной вёрстки нельзя задавать элементам большую фиксированную ширину.
Лучше использовать свойство max-width вместо width :
Теперь содержимое растягивается по ширине экрана, а на большом экране компьютера ширина ограничена прежним значением.
3. Проблема: слишком крупный текст на мобильном экране
Текст на странице уже хорошо различим и полностью влезает в экран, но для комфортного восприятия информации осталось уменьшить шрифт заголовка. Рассмотрим два способа реализации.
3.1. Media Queries
Используя эту тактику для других элементов на странице, можно добиться красивых результатов:
Основные типы носителей:
Наиболее часто используемые медиа-функции:
При использовании медиа-выражений сразу возникает вопрос — какие интервалы ширин и высот использовать? К ответу на на него лучше подходить индивидуально по каждому элементу сайта, плавно изменяя размеры окна браузера. Когда вёрстка начнёт выглядеть неприемлемо, это и будет сигналом к необходимости использования медиа-выражений.
Медиа-выражения хорошо поддерживаются браузерами и предоставляют широкие возможности по определению параметров используемого устройства. Подробнее ознакомиться с ними можно в справочнике.
3.2. Media Queries + Rem
Единица размера rem хорошо поддерживается современными браузерами.
Такой подход менее гибок, чем указание размеров для каждого отдельного элемента, но зато с ним мы можем изменять размеры всех элементов одновременно.
4. Проблема: узкие элементы горизонтального списка
Сейчас наша страница неплохо выглядит на мобильном экране, но ещё есть над чем поработать. Горизонтальные списки, которые хорошо выглядят на экране настольного компьютера, становится неудобно читать на вертикальном экране мобильного устройства. Оптимальное решение — трансформировать горизонтальные списки в вертикальные. Давайте рассмотрим несколько способов сделать это.
4.1. Min-width
Добавив минимальную ширину для элемента списка, мы уже получим неплохой результат:
Однако, у этого способа есть недостатки: элементы списка не растягиваются на всю доступную ширину и указание минимальной ширины может вызвать лишнюю горизонтальную полосу прокрутки.
4.2. Flexbox
Есть другое, более универсальное решение — раскладка с помощью Flexbox. Эта возможность CSS хорошо подходит, поскольку у нас есть отдельный компонент на странице, состоящий из контейнера и элементов:
Сейчас список уже выглядит достаточно хорошо, но есть ещё идея — расположить иконки каждого элемента слева от текста, так, чтобы они использовались в качестве маркеров. Важно, что такая раскладка должна быть только на мобильных экранах:
Flexbox может показаться сложным, но в действительности он открывает широчайшие возможности. Используя только CSS-стили, мы можем изменить порядок следования блоков! И наконец-то, в CSS можно легко задекларировать вертикальное центрирование.
Лучший способ разобраться с Flexbox — начать его использовать, а поможет в этом полное руководство и шпаргалка.
Покрытие поддержки Flexbox в современных браузерах достаточно хорошее, за исключением IE11, где есть баги реализации стандарта.
5. Проблема: фотографии некрасиво вписываются в экран
Финальный штрих — немного поработаем с графикой. Красивые изображения на сайте — это очень здорово, но если у нас есть фотографии, которые неудобно смотреть, весь эффект пропадает.
Так на мобильном экране будет выглядеть большая картинка без каких-либо стилей:
Благодаря новой единице размера vh (viewport height) мы можем легко установить высоту картинки, равную высоте экрана:
Теперь давайте впишем картинку в экран по ширине:
Из-за ограничения максимальной ширины изображение исказилось, сплющившись по ширине. Это можно исправить с помощью нового свойства object-fit :
В итоге красиво вписать картинку в мобильный экран можно всего тремя свойствами:
Новые единицы размеров в CSS:
Свойство object-fit позволяет легко управлять масштабом и соотношением сторон изображений, но при этом обязательно должны быть заданы как ширина, так и высота. Можно сказать, что это свойство является неким аналогом свойства background-size, только для обычных изображений, а не фоновых. Поддержка современными браузерами также на высоте, за исключением IE11 и Edge13.
Заключение и полезные ссылки
Мы рассмотрели ряд практических техник, которые помогут быстро сделать обычный сайт адаптивным под любые размеры экрана. Адаптивная вёрстка — это удобно, как для пользователя, так и для разработчика, который со временем станет смотреть на дизайн сразу с точки зрения экранов различных размеров. Такой подход лёгок в поддержке и выглядит достойно даже в сравнении с отдельной мобильной версией.
Существует ряд инструментов, облегчающих задачу построения адаптивных раскладок. Они вводят единые соглашения написания кода, что может быть полезно в средних и больших командах. Наиболее популярные из них:
Адаптивная верстка сайта: быть или не быть?
Учитывая разнообразие цифровых гаджетов, с помощью которых можно выйти в интернет, адаптивный дизайн представляет собой не просто модный тренд, а является незаменимым инструментом для увеличения экономической эффективности любого онлайн сервиса. Он предоставляет возможность пользователям комфортно заходить и ориентироваться на веб-странице, независимо от того, открыта она на большом мониторе компьютера или мини экране смартфона. Без него современное продвижение в сети является малоэффективным и непродуктивным.
И это отлично понимаются профессиональные разработчики, которые перевели деятельность на фриланс. Для них подобная удаленная работа очень актуальна, ведь в сети существует достаточное количество страниц, требующих обновления. Именно к ним обращаются владельцы web-ресурсов в надежде на современное обновление.
⭐ Адаптивная верстка: что это и зачем?
Это положительно отражается не только на трафике веб-портала, но и заметно улучшает его позиции в поисковой выдаче. Также к ее преимуществам можно отнести существенную экономию денег заказчика, ведь, по сути, создается только один ресурс, который корректно отображается на большинстве девайсах. При этом лояльность пользователей по отношению к такому порталу значительно повышается, потому что они могут посещать его со своих любимых устройств. И все эти преимущества влекут за собой повышение конверсии. К тому же, подобным веб-сервисом удобно управлять и отслеживать производительность, а также другие аналитические данные.
Еще один факт в его пользу заключается в том, что около 60% запросов в Гугл делается со смартфонов. И это заставляет задуматься.
Как создать гибкий дизайн: основные технологии
Чтобы подробно вникнуть, как работает адаптивная верстка, нужно разобраться в нюансах ее создания. Здесь важно уделить особое внимание размещению блоков и определению их степени важности. Особенности проектирования делают их “плавающими”, что обеспечивает им легкое подстраивание под ширину окна. На небольших экранах главные элементы меняют объемы и расположение, а лишние блоки отсеиваются. И очень важно выстроить правильную иерархию всех компонентов и контента.
Данный фреймворк очень прост в эксплуатации и не требует глубоких знаний веб-дизайна. Он работает на разных системах управления. К тому же, он находится в свободном доступе, что также экономит затраты при разработке портала.
Естественно это не простая работа, поэтому доверять ее стоит исключительно профессионалам. И не обязательно студии или интернет-агентству. Среди фрилансеров тоже много первоклассных специалистов, которые создадут достойный веб-ресурс, отлично функционирующий на разных гаджетах.
Пользовательское тестирование подстраивающихся сайтов
Самым доступным подобным сервисом выступает Google Mobile-Friendly Test. Он невероятно прост в использовании и обладает достаточным опционом для отображения возможных ошибок и багов. Также к популярным бесплатным инструментам диагностики относятся такие сервисы, как Responsiator, XRespond иScreenfly.
Каждый из них имеет особый набор достоинств и отличий, поэтому в идеале стоит воспользоваться их помощью в комплексе. В последствии можно остановиться на нескольких платформах, и выявлять баги быстро и профессионально.
Проведение кросс-браузерной диагностики обеспечивает интернет детищу долгий жизненный цикл и широкое внимание потребителей, потому что он будет корректно отображаться, независимо от конфигураций машины и сервера. Осуществлять проверку можно при помощи онлайн эмуляторов.
⭐ Является ли ваш веб-ресурс Mobile-Friendly?
Работая на перспективу, Google еще несколько лет назад запустил алгоритм под названием Mobile-Friendly, который оценивает, насколько сайты “дружелюбны” к мини-гаджетам. Сегодня уже ни у кого не вызывает сомнения факт, что поиск в интернете осуществляется в большинстве случаев со смартфонов, а не лэптопов. И для того, чтобы веб-ресурс оставался в топе, необходимо учитывать эти изменения.
Если ваша веб-площадка оказалась не готовой к новым правилам игры в интернете, в ваших силах исправить эту ситуацию. Вы можете заказать у специалиста новый подстраивающийся шаблон для вашего ресурса или отдельную мини версию. Сравнивайте и выбирайте
Преимущества и недочеты адаптива и мобильной версии
Легка в реализации
Не требует создания нового URL
Имеет высокий уровень юзабилити
Имеет лучшие позиции в поисковой выдаче
Проста в редактировании и внесении изменений
Дешевле по разработке и продвижению
Обладает функцией перехода на основную версию
Не удобна для просмотра на планшетах
Более трудоемка при внесении изменений
Не практична в плане SEO-оптимизации
Дороже по стоимости разработки
Окончательное решение относительно выбора для своего онлайн проекта лучше принимать совместно с веб-разработчиками и другими специалистами. Чаще всего выгоден адаптив, но существуют случаи, когда мобильная версия более актуальна.
⭐ Чем адаптив лучше обычной web-конструкции?
Чтобы окончательно понять, почему следует использовать гибкую верстку для решения бизнес задач в интернете, нужно посмотреть, как объект будет выглядеть с ней и без нее на мобильных устройствах. В первом случае, все элементы подстроятся под размеры экрана. Увидеть их можно при помощи вертикальной прокрутки.
А вот во втором случае часть объектов останется вне обзора посетителя. Кроме того, некоторое блоки могут “съехать”, а текст стать нечитабельным. Всё это затрудняет просмотр страниц и поиск нужной информации, что приводит отказу от дальнейшего взаимодействия с порталом со стороны юзеров.
При меняющемся шаблоне в зависимости от размера меняются все составляющие:
При этом компоновка на отельных устройствах выглядит по-разному. Меняется не только их вид, но и размеры, место положения и способ отображения.
Отзывчивый, резиновый и адаптивный дизайн: особенности и отличия
Приняв решение адаптировать свой интернет проект под компактные гаджеты, вы можете пойти одним из трех возможных путей.
Выбирать между ними рекомендуется, исходя из целей проекта, а также финансовых возможностей. Но если ваша интернет площадка не подстраивается, значит, автоматически устарела.
Как заказать разработку пластичного сайта у фрилансера?
Разработка гибкого шаблона представляет интересный, но трудоемкий процесс. От того, насколько правильно он будет выполнен, зависит функционирование веб-ресурса и его привлекательность в глазах пользователей. По этой причине, для его создания следует тщательно подбирать исполнителя. Такого легко найти на фриланс-бирже.
Не все веб-дизайнеры могут работать с адаптивом. Для этого требуются знания особых технологий, а также время на кропотливый труд с обязательным тестированием. Чтобы найти действительно подходящего специалиста, достаточно посмотреть на портфолио его аналогичных работ, а также почитать отзывы других заказчиков.
Важно понимать, что оплата труда freelancer будет зависеть от объема и сложности проекта. Перед началом сотрудничества следует подробно обговорить нюансы будущего веб-ресурса, чтобы рационально оценить стоимость его разработки. В любом случае, если вам требуется адаптивная верстка, фрилансер выполнит ее дешевле, чем отдельная студия. Работа на дому ничем не отличается от офисной, поэтому не стоит бояться доверять удаленщикам.
Настоящий профи обязательно изучит бренд и ваши потребности, задаст уточняющие вопросы. Исходя из этой информации, он предложит идеи о размещении элементов дизайна так, чтобы получить высокую конверсию. Также он порекомендует подходящую систему управления сайтом или предложит свой вариант.
Фрилансер будет заинтересован качественным результатом так же как и вы. И это можно понять уже по первому диалогу в рамках сотрудничества. Найти достойного специалиста бывает нелегко, но реально. На бирже фриланса так точно.
Стоит ли адаптировать свой онлайн ресурс?
Согласно исследованиям, уже через год до 70% коммерческих сделок будет осуществляться со смартфонов. Если вы являетесь активным участником e-commerce, значит уже сейчас нужно подстраиваться под потребности целевой аудитории. А если учитывать новые алгоритмы Гугл, то еще вчера.
И это уже не модная тенденция, а реальное средство повышения конверсии и увеличения экономической эффективности сайта. Если его не использовать, то можно оказаться на самом дне всемирной сети, оставшись без посетителей.
Адаптивная верстка сайта: гайд для начинающих
Интернет-трафик, потребляемый мобильными устройствами, увеличивается день ото дня, пользователи нуждаются в сайтах с удобным интерфейсом. Именно адаптивная верстка сайта помогает удовлетворить данную потребность, так как позволяет автоматически подстраивать веб-страницы под параметры гаджетов.
Из этой статьи вы узнаете:
Адаптивная верстка сайта – что это такое
Адаптивная верстка сайта, или mobile-friendly, заключается в выполнении определенных функций, направленных на создание веб-страницы, способной подстроиться под любое разрешение экрана.
На заре своей деятельности верстальщики создавали несколько вариантов веб-страниц, чтобы сайт мог отображаться на устройствах с разным разрешением окна (это продолжалось вплоть до 2010 года). Позже для решения данных задач стали применять JavaScript (специализированный язык программирования).
Сегодня адаптивная верстка сайта проводится путем использования каскадных таблиц CCS3 и языка разметки HTML5.
Зачем вам адаптивный дизайн сайта
В Интернет можно выходить при помощи устройств с разным разрешением экрана
Современные люди пользуются множеством различных устройств и для решения бытовых вопросов, и для выхода в Интернет. Естественно, что один и тот же ресурс должен хорошо смотреться и правильно отображаться на гаджетах с разным размером и разрешением экрана. Пользователь не должен ощущать неудобства при использовании того или иного устройства.
Рост интернет-трафика, потребляемого мобильными устройствами, популярность различных гаджетов
Популярность мобильных устройств, с помощью которых можно выйти в Интернет, вполне объяснима и вряд ли кто-то поспорит с этим фактом. Такое положение дел просто нельзя игнорировать, так как эти пользователи составляют значительную часть вашей аудитории.
Если вы хотите сохранить численность посетителей сайта, то необходимо учитывать их интересы и потребности. Вам надо сделать все возможное, чтобы пользование ресурсом не вызывало дискомфорта, в противном случае, они уйдут к «более удобным» конкурентам.
Рекомендуемые статьи по данной теме:
Экстренная информация
Если вы специализируетесь на предоставлении экстренной/новостной информации, то может возникнуть ситуация, когда она понадобиться пользователю «здесь» и «сейчас», а ничего, кроме смартфона, у него под рукой просто нет. Следовательно, ваша задача: обеспечить ему такую возможность.
Чем адаптивная верстка сайта лучше мобильного приложения
Мобильные приложения, сайты, использующие мобильные версии и предназначенные специально для мобильных устройств – неплохое решение проблемы, однако у них есть свои «минусы».
Чем адаптивная верстка сайта лучше мобильного приложения? Тем, что верстка подразумевает использование одного адреса ресурса и единую систему его управления и наполнения, а приложение – нет.
Конечно, адаптивному дизайну тоже присущи некоторые негативные моменты. Среди ключевых стоит отметить недостаток специалистов и соответствующих знаний, так как данная технология относительно нова.
Основы адаптивной верстки сайта
Первым этапом адаптивной верстки сайта является проектирование. В процессе работы дизайнерам необходимо грамотно передать суть и главные идеи, используя относительно маленький экран и всего одну колонку.
Если возникает необходимость, то сокращаются информационные блоки, остается только самые важные данные. Гайд для начинающих может включать следующее:
Адаптивные макеты могут быть следующих типов:
Данный тип просто реализовать, он не вызывает особых трудностей у пользователя. Ключевые блоки сайта сжимаются, пока не достигнут размера экрана мобильного устройства. Если сжатие применить невозможно, то блоки располагают друг за другом в виде ленты.
Этот способ подходит для сайта с большим количеством колонок. Расположение сайдбаров (дополнительных блоков) меняется в зависимости от ширины экрана: экран уменьшается – сайдбары перемещаются вниз макета.
Это достаточно трудоемкий способ, который заключается в том, что каждому разрешению экрана соответствует свой, специально разработанный макет. Однако он облегчает ознакомление с сайтом, но сложность работы снижает популярность его применения.
Способ, наиболее подходящий для простых сайтов. Верстальщик просто масштабирует изображение и типографику. Данный способ сложно назвать популярным из-за отсутствия гибкости.
Данный способ перешел из мобильных приложений, в которых дополнительное меню может появляться при любом положении экрана. Сегодня этот способ не очень популярен, так как мобильная навигация на веб-сайте непривычна и не совсем понятна пользователю.
Ни один из макетов нельзя назвать универсальным. Помните, что все зависит от реализовываемого проекта, способ должен соответствовать его возможностям и удовлетворять его потребности.
Как сделать адаптивную верстку сайта
Перед тем как ответить на вопрос: «Как делается адаптивная верстка сайта?», необходимо иметь представление о том, какие технологии для этого используются. Сегодня это HTML5 и CSS3.
Технология CSS3 является новым поколением каскадных таблиц. С ее помощью создаются правила, согласно которым на экране пользователя будут отображаться элементы страницы.
При помощи этой технологии можно задать следующие параметры: размер элемента при определенном разрешении экрана, процент занимаемого пространства (например, 100 % рабочего пространства) и т.д.
После появления CSS3 у верстальщиков появилась возможность создания разных классов, которые будут соответствовать определенному разрешению экрана (правило «media queries»).
Людям, планирующим использовать третье поколение каскадных таблиц (CSS3), стоит принять во внимание, что размеры объектов указываются в процентном соотношении (в отличие от CSS2, где размер указывается в пикселях).
HTML5 используется для указания местоположения конкретных элементов, то есть для разметки страницы. Классы, созданные путем применения CSS3-технологии, указываются в параметрах тегов HTML, чтобы выводимые объекты могли подстроиться под разрешение.
Адаптивная верстка сайта начинается с создания простого изображения, которое растянется по размеру экрана.
Ничего сложного: просто создали контейнер для «упаковки» картинки.