Адаптивная верстка не работает

Десять проблем адаптивного дизайна и их решения

Это перевод статьи Кирилла Стрельченкова «10 Responsive Design Problems and Fixes».

Благодаря адаптивным сайтам, быстро подстраивающимся под любое устройство и размер экрана, интернет меняется, чтобы предоставить пользователю наилучший опыт. Начиная с межнациональных корпораций, таких, как Sony, Microsoft и Nokia, и заканчивая мировыми техническими знаменитостями (Salesforce) и онлайн-гигантами для путешествий (Expedia), серьёзные игроки поворачиваются к адаптивному веб-дизайну, чтобы идти в ногу с современными тенденциями и достичь ещё более широкой аудитории.

Но создание адаптивных сайтов содержит в себе недостатки. Значимость сайта для пользователя становится важнее, чем когда-либо. Эстетика уходит на задний план, в то время как воцаряется производительность. Проблема заключается в том, что производительность не может быть оценена в Photoshop, и должны быть использованы новые методы, чтобы осуществить дизайнерские задумки. Здесь обозначены 10 проблем, связанных с созданием адаптивных сайтов, вместе с десятью возможными решениями.

1. Более проблематичный этап визуализации

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

Решение: существует два подхода для адаптивных макетов. Первый состоит в создании прототипа десктопной версии главной страницы и также всех остальных страниц сайта, а потом в адаптации их под размеры и разрешения экранов большинства планшетов и мобильных устройств. Другой подход состоит в использовании бумаги и общении с клиентом, чтобы продемонстрировать макеты и то, как они будут перетекать на разных размерах экрана. Проектирование в браузере и работа с HTML и CSS прототипами начинается на ранней стадии. Создание системы компонентов и понимание того, как они могут быть перекомпонованы под разные конфигурации, заменяет создание каркасов на каждую отдельную страницу и состояние. Выбор метода обычно диктуется сложностью сайта.

2. Навигация

До адаптивного дизайна каждый пользователь знал, где находилась навигация. Несмотря на то что сегодня три полоски у левой верхней границы чаще всего представляют собой навигационную кнопку, многие пользователи до сих пор трудно ориентируются в меню, особенно когда дело доходит до сайтов со сложной структурой. Сегодня вся концепция навигации должна быть пересмотрена.

Решение: дизайнеры должны тратить больше времени, пытаясь сделать навигацию интуитивно понятной и очевидной. Изучение содержимого сайта и его информационной структуры, и понимание того, как и для чего пользователи просматривают сайт — это единственный способ сделать уникальное навигационное решение. Кроме того, тестирование навигации на максимально возможном числе устройств поможет разработчикам сделать его правильно.

3. Качество фоновых изображений и иконок

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

Решение: отложенная загрузка изображений может помочь оптимизировать рендеринг страницы и уменьшить число HTTP-запросов, откладывая загрузку изображений, которые не предназначены для этого типа устройства или экрана. Создание масштабируемых и готовых к ретине иконок может также помочь пользователю получать удовольствие от сайта, не потеряв при этом в качестве.

4. Отображение данных на маленьких экранах

Отображение таблиц с данными (например, расписание авиарейсов) на маленьких экранах — настоящая проблема.

Решение: адаптивные таблицы — лучший вариант на текущий момент. Существуют также другие методы: отказ от сеток в макетах и создание меньших таблиц, из-за которых не будет появляться горизонтальной прокрутки; построение из таблиц более компактных круговых диаграмм; замена таблиц на меньшую версию со ссылкой на полный вариант; скрытие менее важных элементов на маленьких экранах и вывод выпадающего меню с доступом к полной версии; разноцветные таблицы, где цвета используются заместо столбцов; и даже поворот таблицы набок, чтобы она поместилась.

5. Быстрая загрузка на всех устройствах

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

Решение: постепенная загрузка, которая позволяет загружать только то, что нужно пользователю. Правило следующее: первым загружается контент, затем улучшения, a потом всё остальное. Используя подход «сначала мобильные», для пользователей, привыкших к большому числу контента, дизайнеры должны оставить только те элементы, которые необходимы. Распространение мобильных устройств опережает настольные компьютеры, поэтому постепенная загрузка — это решение. Благодаря использованию средств автоматизации для масштабирования и кэширования изображений, последующие изменения на сайте становятся проще. Из-за того, что соединение пользователя может быть неидеальным, производительность очень важна.

6. Длительные этапы дизайна, разработки и тестирования

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

Решение: проблема уже содержит в себе решение. Несмотря на то что адаптивные сайты могут потребовать больше времени на создание, они лучше подходят для постепенного изменения. Вместо капитальной переделки, которая стоит дороже и дольше по времени, адаптивные сайты могут развиваться шаг за шагом, сокращая владельцам в конечном счёте много времени и затрат.

7. Скрытие и удаление содержимого

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

Решение: тщательное планирование с самого начала, что позволит определить, как расположить контент так, чтобы разработчикам не приходилось что-либо скрывать. Цель состоит в том, чтобы оптимизировать всё, насколько это возможно: удалить ненужные элементы на ранних этапах проектирования и сфокусироваться на основной структуре сайта без добавления всякой мишуры. Сейчас не время для украшения, а момент для расстановки приоритетов и необходимых сокращений. Всегда хорошо дать пользователю возможность получить доступ к полной версии сайта, если он этого захочет.

8. Перевод фиксированных сайтов в адаптивные

Существует большая дилемма: менять ли менее гибкий код фиксированной вёрстки или оставить как есть и по-прежнему обеспечивать приемлемую производительность?

Решение: процесс преобразования сложный, но для простых сайтов это возможно и легко было сделано в прошлом. Выбор чаще всего заключается в изменении стилей и шаблонов или начале создания с нуля. Если у вас большой сложный сайт, то создание новой версии — лучший вариант, чем вообще не делать изменения.

9. Старые версии Internet Explorer не поддерживают CSS3 медиавыражения

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

Решение: хорошая практика — беспокоиться о пользователях Internet Explorer и предлагать им удобное решение. Используя JavaScript, опытный разработчик может легко изменить расположение на странице в зависимости от размеров окна браузера. Для поддержки оригинальных макетов решением является использование полифилов, то есть части кода обеспечивающей технологии, которые, как ожидает разработчик, браузер должен предоставлять изначально. Другим решением может быть подключение отдельных стилей для IE с простым оформлением. Можно вообще ничего не делать, если это выглядит допустимо. Всё зависит от потребностей конечного пользователя.

10. Не все понимают, зачем им использовать адаптивный дизайн

Процесс работы с клиентами не всегда упорядоченный и структурированный, и методологии адаптивного дизайна всё ещё уточняются и тестируются. Решения проблем редко высечены на камне, что может создать неопределённость и путаницу для клиентов.

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

Заключение

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

Источник

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Решение 3 основных проблем в Адаптивной верстке

Сейчас мы решим 3 проблемы, которые рано или поздно начинают достигать начинающего веб-разработчика при попытках адаптировать сверстанный им сайт.

Как исправить выезжающий текст?

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

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

Часто новички только изучая CSS начинают использовать такие свойства как height и max-height забывая о том, что при уменьшении экрана, контент, находящийся внутри блоков с такими свойствами начинает сжиматься и выходить в нижнюю часть блока (особенно это касается любого текста). Это как сжимать воздушный шар. Мы сжимаем шарик, давление внутри увеличивается и воздух давит на другие его части тем самым расширяя его в другом направлении. Тоже самое и происходит с текстом. Сжимая блок, он уменьшает пространство текста, а текст начинает уходит вниз, пробивая фиксированную высоту своего блока.

Решение. Избавьтесь от фиксированной высоты блоков при адаптации верстки! Для этого просто уберите значения height и max-height в блоках где задумывается их увеличение за счет текста внутри них. Из названий этих свойств видно, что они дают ограничения по высоте блока, а значит если текст достигнет их предела, он будет выходить за него. Не используйте значения height и max-height где нет в них никакой потребности. При адаптации вашей верстки у вас возникнут проблемы на этой почве.

Прежде всего нужно понимать для чего используется max-height и height свойства. Их используют чаще для блоков, которые играют роль контейнеров для фиксированного по объему контента. Этот контент не задумывается увеличиваться в объеме на столько, чтобы это как-то влияло на размер блока. Поэтому либо используйте max-height аккуратно либо откажитесь от них во время верстки резиновых блоков. Ведь как сказал один мудрый верстальщик: «Фиксированная высота блоков это заряженный дробовик, который уже смотрит вам в колено».

Как исправить масштабирование заднего фона?

Проблема. Картинка заднего фона не адаптируется под размер своего блока.

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

Решение. Добавить к блоку в котором стоит наш фон такую часть кода:

А теперь поясняю. Правило background-size: cover говорит браузеру, что размер картинки фона нужно наложить на всю площадь ее родителя при этом пропорционально растягивая её. Этим правилом мы фиксим проблему с ненужным для нас дублированием картинки фона, что превращает весь фон в страшную матрицу картинок при неестественном изменении размера родителя.

Строка кода background-position: center, в свою очередь, размещает картинку фона по центру своего родителя. Здесь ничего объяснять не нужно, это и так довольно легко для понимания.

ВАЖНО! Если вы таким способом делаете фон для какой либо секции или блока на сайте, который априори имеет больший размер картинки своего фона, эта картинка будет иметь ухудшенное разрешение. Это связано с тем, что те свойства, которые мы прописываем к фону заставляют картинку изменять свой размер пропорционально размеру своего родительского блока. Вообщем, просто запомните, что не стоит ставить картинку, например 800×600 фоном для блока размером 1920×1080. Люди увидевшие это будут лишены всяческого чувства сострадания по отношению к вам, когда вас встретят в 10 часов вечера на улице возле вашего дома с ломом в руках.

Как убрать горизонтальную прокрутку?

Проблема. На меньших экранах сайта появляется горизонтальная прокрутка хотя все елементы адаптированы исправно и не вылазят за пределы своих блоков.

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

Решение. Необходимо добавить селектору body свойство overflow-x: hidden. В коде это выглядит так:

После этого, горизонтальная прокрутка будет отключена на всей странице сайта. Однако, учтите, что это свойство не воспринимают некоторые стандартные мобильные браузеры, в особенности, браузер Safari на IOS устройствах.

Источник