Адаптивный дизайн сегодня рассматривается как современный стиль интернет-страниц, способный обеспечить комфортный просмотр текстового и медиа содержания вэб-страницы в любом браузере на разнообразных устройствах, как стационарного (ПК, телевизоры, холодильники), так и мобильного характера (смартфоны, планшеты).
Создавая интернет сайт с адаптивным дизайном преследуется цель создать некую универсальность сайта для всех пользователей, но особенно отдается предпочтение удобству мобильного просмотра, поскольку современные интернет-пользователи большую часть времени серфят интернет с помощью смартфонов и планшетов.
Для примера можно взять страницы регистратора доменных имен Ник Юэй (NIC.UA), который также предоставляет качественные услуги по размещению сайтов и других интернет-проектов.
Каждая страница сайта компании адаптирована для комфортного просмотра и получения информации с помощью любого устройчтва способного выводить изображение на экран. Адаптивный дизайн, внедренный на страницах NIC.UA, показывает как меняется расположение основных элементов сайта в завимимости от устройства:
Монитор 23 дюйма
Планшет 9,7 дюйма
Смартфон 4 дюйма
Необходимость создавать интернет-проекты согласно концепции адаптивного дизайна появилась не сразу. К этому привело появление на рынке множества устройств, которые стал использоваться для выхода в интернет, а также ужесточение требований лидеров поискового рынка к сайтам про комфортность отображения содержания страниц для мобильных устройств (принцип «Mobile first»).
Адаптивный и чувствительный дизайн сайта
Современный веб-дизайн должен включать в себя чувствительные элементы, которые автоматически подстраиваются под ширину окна браузера. Когда экран устройства или ширина браузера уменьшается, дизайн меняется, чтобы создать такой вид сайта, который лучше подходит для меньшего экрана. Изображения сжимаются, колонки, которые были расположены горизонтально могут располагаться вертикально одна под другой, а меню может измениться на стандартный для мобильных устройств значок.
Одна из разновидностей чувствительного дизайна - адаптивный дизайн, который определяет тип устройства, с которого посещается страница и обеспечивает оптимизированную функциональность специально для небольших устройств. Такой дизайн требует дополнительных усилий в программном коде, чтобы воспроизвести правильное поведение работы сайта для пользователей с различными устройствами.
К примеру, в адаптивных шаблонах компании RocketTheme, применяются CSS классы, скрывают или отражают элементы страницы, в зависимости от используемого устройства. Например, с помощью класса hidden-phone модуль или виджет будет скрываемым, когда пользователь использует устройство с браузером шириной 480px или меньше. Это позволяет скрыть виджеты и модули, которые плохо отражаются на мобильном устройстве.
Все хотят, чтобы дизайн сайта для мобильных устройств был приятным и современным, при этом не жертвуя дизайном для больших экранов. Для этого в программном обеспечении современных сайтов существуют механизмы динамического построения структуры сайта, в зависимости от конкретного устройства.
Атрибуты форм ввода и адаптивный дизайн
Поля ввода, в которых пользователь должен внести конкретную информацию, такую как имя, адрес электронной почты или пароль, могут быть проблематичными для мобильных пользователей, когда не установлены элементы авто замены (autocorrect) или автоматического перевода первого символа слова в верхний регистр (autocapitalize).
Если вы хотите немного облегчить работу пользователя, используйте преимущества атрибутов для полей ввода. Например, установка autocapitalize=words делает заглавной первую букву каждого слова. В полях, где нужно ввести настоящие имя и фамилия пользователя, это будет автоматически заменять первые буквы этих слов, что облегчит работу для пользователя.
Отключение автокоррекции является еще одной хорошей практикой, когда запрашивается такая информация, как имена и адреса электронной почты, которые не часто включают слова, у словаря автокоррекции. Это позволяет избежать раздражающей ложной авто замены, которая стала общим разочарованием для пользователей в последнее время.