Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Как проверить адаптивный дизайн сайта

Автор: в категории Статьи о CSS 1 комментарий

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

Адаптивный дизайн в разработке сайтов

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

Если раньше для поддержки мобильных устройств владельцам сайтов предлагалось разработать отдельный проект для мобильных устройств, например на поддомене m.example.com, то сегодня все решается благодаря адаптивной верстке, использование которой стало возможно, с внедрением media query (rules) в CSS3.

Данные медиа запросы/правила — это определенный набор стилей, которые написаны специально под мобильное устройство, имеющее определенный размер (разрешение) экрана. Принцип правил следующий: если устройство имеет размер экрана, подходящее под описанные верстальщиком условия, то применяются соответствующие символы.

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

Как же все таки проверить сайт на наличие адаптивной верстки? Все проще чем кажется: достаточно просто изменить размер окна бразуера и проверить как сайт себя поведет. Пример адаптивной верстки вы изображен на анимированном рисунке ниже (для просмотра кликните по изображению).

Пример адаптивной верстки

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

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

Вот например на этом сайте мобильная версия «включается» поздно, и кнопка «Contact» закрывает собой пункты меню. В данном случае, было бы уместно дописать еще десяток строк CSS-кода для решения данной проблемы (для просмотра кликните по изображению). (сайты были найдены случайным образом, автор не пытается обидеть или оскорбить владельцев или разработчиков сайтов, представленных ниже в виде наглядных примеров)

Слишком поздно сайт переходит на мобильную версию

В следующем примере вообще решили избавится от прокрутки (скроллов), в связи с чем абсолютно невозможно будет пользоваться сайтом на устройствах с маленьким разрешением экрана (для просмотра кликните по изображению):

Без скроллов

Следующий пример «адаптивности» — сайт вроде адаптивный, но скрол есть, текст вылазит, элементы залазят друг на друга, образуя такую себе кашу (для просмотра кликните по изображению).

Адаптивность со скроллом

Адаптивность со скроллом и кашей

Почему нельзя проработать адаптивность для всех размеров? Почему только мобильные, совсем маленькие устройства? (для просмотра кликните по изображению)

Только маленькое разрешение экрана

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

comments powered by HyperComments

Не забудь подписаться на группы в социальных сетях, чтобы всегда быть вкурсе последних событий!

Maksim Gordienko
2015-06-13 19:25:40
Немного добавлю полезностей. Так как одним из факторов ранжирования в Google является удобство просмотра на мобильных устройствах - важно, чтобы ваша адаптивка проходила тесты от Google. Собственно, есть специальный инструмент: //www.google.com/webmasters/tools/mobile-friendly/?hl=ru - вводим адрес сайта, получаем информацию. Если все ок - то вы молодцы. Нет - можно попробовать устранить проблемы, указанные в отчете "Удобство для пользователей". Чаще всего ошибки возникают если в robots.txt закрыты для индексации папки с файлами стилей и js. И еще один сервис, который позволяет довольно точно смотреть: а как выглядит сайт на том или ином устройстве, в том или ином положении смартфона/планшета: http://responsive.is/nikita-sp.com.ua (в URL просто поменяйте адрес сайта). P.S. если ваши страницы сильно отличаются по дизайну / функциональным элементам / чему-то еще - проверяйте каждую сущность (карточка товара; каталог; информационную страницу и т.п.) на адаптивность не только инструментом, но и глазами. Это позволит выявить проблемы и сэкономить деньги!
Вверх!

Меню блога

Категории блога

Облако тегов