Разработка адаптивных сайтов: Создание и разработка адаптивных сайтов, мобильных версий. Заказать адаптивный дизайн сайта в Москве

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

Три основных компонента адаптивного веб-дизайна:

• Гибкая сетка
• Гибкий текст и изображения
• Медиа-запросы

Я объясню каждый далее.

Сетка является важным элементом для создания адаптивного макета.

Теперь в сетках нет ничего нового.

Веб-дизайнеры с самого начала использовали сетки для создания веб-сайтов.Однако в прошлом эти сетки были фиксированной ширины и не подходили для поддержки гибкого макета веб-сайта.

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

Наиболее распространенные размеры экрана для адаптивного дизайна:

Большой рабочий стол
1220 пикселей и более

Рабочий стол
960 — 1219 пикселей

Планшет (портрет)
768 — 959 пикселей

Мобильный (широкий)
480 — 767 пикселей

Мобильный
479 пикселей и менее

Благодаря плавной сетке пользователям будет удобнее работать на любом экране, на котором они просматривают ваш адаптивный веб-сайт.

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

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

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

Это код, который обеспечивает гибкость макета на адаптивных веб-сайтах.Медиа-запросы указывают CSS, который будет применяться соответствующим образом, в зависимости от точки останова устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. Д.).

Медиа-запросы позволяют создавать несколько макетов дизайна, использующих одну и ту же HTML-кодированную веб-страницу.

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

Взгляните:

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

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

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

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

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

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

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

Это может быть так же просто, как ответить на следующие вопросы:

• Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах?
• Почему вы предпочитаете один сайт по сравнению с другими, которые могут предоставлять аналогичные услуги?
• Что вы предпочитаете — мобильную или настольную?

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

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

Ознакомьтесь с некоторыми из этих примеров адаптивного дизайна веб-сайтов.

Slack

Stripe

Корнельский университет

Средний

Мы знаем, что Google требуются следующие оптимизированные элементы для эффективного использования мобильных устройств. отзывчивый веб-дизайн:

• Текст в удобочитаемом размере, без необходимости масштабирования
• Контент, который соответствует экрану устройства, без необходимости горизонтальной прокрутки
• Ссылки и кнопки, которые достаточно разнесены, так что нажатие не сложно
• Разумное время загрузки страниц
• Flash не используется! (надеюсь, большинство из вас спросит: «Что такое Flash?»)

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

Вы можете легко проверить, реагирует ли ваш веб-сайт, воспользовавшись полезным инструментом Google.

Пройдите тест на отзывчивость Google прямо сейчас, чтобы узнать, где находится ваш сайт. Проверьте свой сайт

Вы получили зеленый свет? Отлично, ваш сайт прошел тест на отзывчивость Google.Возможно, вы уже знаете, почему адаптивный дизайн важен для пользователей вашего сайта.

Видите большие красные крестики? Начните делать шаги в направлении онлайн-стратегии, которая включает в себя оптимизированный опыт для мобильных пользователей. Помните, что изменения в Google и адаптивном дизайне пока не коснутся планшетов, но с адаптивным веб-дизайном вы будете впереди всех, когда они это сделают!

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

Эта статья отвечает на вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: гибкая сетка, гибкий текст и изображения и медиа-запросы.

Помните о важности адаптивного веб-дизайна для вашего бизнеса. Это поможет вам:

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

Google привлекает 96% мобильного поискового трафика и рекомендует адаптивный дизайн как лучшую практику.Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает увеличить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего веб-сайта.

Увеличение трафика приводит к лучшему привлечению потенциальных клиентов, увеличению количества конверсий и увеличению продаж — три основные причины, по которым вам нужен адаптивный веб-дизайн!

Можете ли вы рассказать о других причинах важности адаптивного дизайна?

Поделитесь своими комментариями ниже!

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

Если вам понравилась эта статья, поделитесь, пожалуйста!

Адаптивный веб-дизайн: основные советы и подходы

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

Что такое адаптивный дизайн?

Проще говоря, адаптивный веб-дизайн (RWD) — это подход, который позволяет дизайну и коду реагировать на размер экрана устройства. Это означает, что это дает вам оптимальные впечатления от просмотра, смотрите ли вы на 4-дюймовый мобильный телефон Android, iPad mini или 40-дюймовый кинотеатр.

Сравните, как выглядит наш сайт при статическом и фактическом адаптивном дизайне :

Лучшие адаптивные веб-сайты в основном используют плавные сетки , , гибкие изображения , и CSS стили , чтобы изменить дизайн сайта и отобразить его в соответствии с шириной браузера.Конечная цель дизайнеров должна заключаться в том, чтобы легко адаптировать UI и UX дизайна веб-сайта для разных устройств и платформ.

Почему так важен адаптивный дизайн?

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

Основным ключом к адаптивному веб-дизайну является знание своей аудитории и того, какое устройство они используют для просмотра вашего веб-сайта. Какая доля вашего текущего трафика составляет для настольных ПК, планшетов и мобильных устройств? Приблизительно 56 процентов трафика на веб-сайтах в США сейчас поступает с мобильных устройств. Сегодня насчитывается около 2,6 миллиарда пользователей смартфонов и к 2020 году, а к 2020 году их число может превысить 6 миллиардов . Мобильный дизайн никогда не был так важен.

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

Не любите дизайн для Интернета? Не волнуйтесь, каждый в отрасли ведет постоянную борьбу за адаптацию дизайна для всех версий браузеров, а также аппаратных устройств.Лучший ответ — просто протестировать свой сайт на как можно большем количестве новых и старых устройств. (И наймите супер-гуру-разработчика!)

Для каких размеров веб-сайта мне следует разрабатывать?

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

Вы можете узнать, какие браузеры и размеры веб-страниц наиболее популярны для вашего сайта, просмотрев Google Analytics. Итак, с бесконечными комбинациями размеров браузеров и устройств, как вообще можно адаптировать дизайн, не теряя рассудка?

Попробуйте создать как минимум 3 макета

–

Адаптивный дизайн веб-сайта должен иметь как минимум 3 макета для разной ширины браузера. Конкретные цифры, которые мы приводим, — это то, что мы сейчас используем в 99designs, но не жесткие правила.

• Маленький: до 600 пикселей. Так контент будет выглядеть на большинстве телефонов.

• Средний: 600–900 пикселей. Так контент будет выглядеть на большинстве планшетов, некоторых больших телефонах и небольших компьютерах типа нетбуков.

• Большое: более 900 пикселей. Так контент будет выглядеть на большинстве персональных компьютеров.

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

О чем подумать

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

• Не создавайте для новейшего мобильного устройства с экраном определенного размера. Вместо этого создайте свой сайт вокруг вашего контента. Как макет и элементы будут работать на рабочем столе и как эти же элементы будут адаптироваться друг к другу на мобильном устройстве?

• Вовлеченность: иерархия макета очень важна, особенно на мобильных устройствах. Часто лучше меньше, да лучше! Мобильный интерфейс по сравнению с настольным компьютером гораздо более сфокусирован с ограниченным пространством, поэтому способ, которым пользователи читают и перемещаются по вашему сайту, должен быть действительно четким, чтобы донести ваше ключевое сообщение и понять, о чем сайт.Также подумайте о главном действии на странице. Если ключевая цель — заставить людей нажимать кнопку «связаться с нами», не прячьте ее внизу страницы под блоками текста. Адаптируйте свой контент и дизайн к этому опыту.

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

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

• Жесты открывают новые возможности для дизайна. Людям нравится читать руками и взаимодействовать с контентом — это расширяет возможности пользователя.На мобильных телефонах и планшетах пользователи могут масштабировать или перемещать изображения по экрану пальцем. Взаимодействие сильно влияет на дизайн. Например, если у вас есть галерея изображений, постарайтесь не использовать стандартную карусель (маленькие точки), чтобы люди циклически просматривали каждое изображение. Подумайте о размере пальца человека и о том, как это превратить в полезное решение для пользовательского интерфейса. Согласно Apple: удобный минимальный размер нажимаемых элементов пользовательского интерфейса составляет 44 x 44 пикселей . Этот предел часто нарушается, и реальный предел оценки составляет около 25 пикселей.Сложный дизайн рабочего стола должен иметь возможность адаптироваться к простому интуитивно понятному интерфейсу для небольшого мобильного экрана. Всегда помните об этом при проектировании для разных устройств. Дизайн должен быть гибким, чтобы пользователям было удобнее работать на всех устройствах. Тесное сотрудничество с разработчиком, чтобы понять, какие возможности на небольших экранах повлияют на процесс проектирования.

• Разработайте как минимум 3 версии для браузеров разной ширины. Мы используем менее 600 пикселей, 600–900 пикселей, 900 пикселей +.Между этими ширинами ваш контент может свободно масштабироваться, или вы можете сохранить 3 фиксированных макета. Наличие 3 (или более) фиксированных макетов и добавление полей при необходимости обычно легче спроектировать и реализовать, чем плавное масштабирование. Однако жидкостное масштабирование может улучшить работу на большем количестве устройств.

Инструменты и ресурсы

• Ваш веб-браузер может показаться очевидным инструментом для использования, но это наиболее эффективный ресурс для предварительного просмотра ваших дизайнов в Интернете.Установите несколько разных браузеров, чтобы получать хорошие отзывы. Затем начните изменять размер окон браузера.

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

• Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях, а не на заданных пикселях. Например, ширина контента на экране рабочего стола может составлять 930 пикселей, но вы хотите, чтобы дизайн был уменьшен до 320 пикселей на мобильных устройствах.Чтобы преобразовать это в масштабируемую цифру, результат получается 320/930 = 34,4%. Когда вы примените это к размеру мобильного экрана, элементы в макете дизайна будут изменять размер по отношению друг к другу. Нам нравится One% CSS Grid.

• Медиа-запросы — это тип кода, который будет внедрен на ваш сайт, когда он будет построен. Это важно в вашем коде, потому что он задает условия, при которых дизайн волшебным образом адаптируется к размеру экрана.Например. «Когда размер экрана равен 480 пикселей или меньше, переходите к макету дизайна планшета». Попробуйте прямо сейчас, просто перетащив окно браузера меньше (если вы находитесь на рабочем столе). Вы увидите, что размер содержимого автоматически изменяется в соответствии с различными точками останова дизайна на экране.

• Другие ресурсы для начала:

Я уверен, что вы уже знаете все об адаптивном дизайне, верно ?!

–

Не волнуйтесь, это универсальная задача дизайна для всех, кто работает в веб-индустрии.Лучшее, что вы можете сделать, — это быть в курсе последних лучших практик UI / UX, создавать дизайн вокруг вашего контента, сохранять гибкость ваших изображений, всегда учитывать вашу навигацию и помнить, что взаимодействие с пользователем является ключевым.

Каковы ваши лучшие советы по адаптивному дизайну?

–

Нужен адаптивный веб-сайт, разработанный для вашего бизнеса?

Наше глобальное сообщество профессиональных графических дизайнеров может это сделать!

Основы адаптивного веб-дизайна

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

12 февраля 2019 г. • Обновлено 14 мая 2020 г.

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

Отзывчивый веб-дизайн, первоначально определенный Итаном Маркоттом в A List Apart, отвечает потребностям пользователей и устройств, которые они используют. Компоновка меняется в зависимости от размера и возможностей устройства.Например, на телефоне пользователи будут видеть контент, отображаемый в виде одного столбца; планшет может отображать одно и то же содержимое в двух столбцах.

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

Установите область просмотра #

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

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

   
  
  
… 
    
 … 
  
… 
  

Использование значения мета-области просмотра width = device-width указывает странице на соответствие ширине экрана в аппаратно-независимых пикселях.Пиксель, независимый от устройства (или плотности), является представлением одного пикселя, который на экране с высокой плотностью может состоять из множества физических пикселей. Это позволяет переформатировать содержимое страницы для соответствия разным размерам экрана, независимо от того, отображается ли она на маленьком мобильном телефоне или на большом настольном мониторе.

Некоторые браузеры поддерживают постоянную ширину страницы при повороте в альбомный режим и увеличивают масштаб, а не перекомпоновку, чтобы заполнить экран. Добавление значения initial-scale = 1 инструктирует браузеры устанавливать соотношение 1: 1 между пикселями CSS и пикселями, независимыми от устройства, независимо от ориентации устройства, и позволяет странице использовать всю ширину альбомной ориентации.

Осторожно : Чтобы старые браузеры могли правильно анализировать атрибуты, используйте запятую для разделения атрибутов.

Отсутствует тег с шириной или начальным масштабом Аудит Lighthouse может помочь вам автоматизировать процесс проверки правильности использования метатега области просмотра в ваших HTML-документах .

Обеспечьте доступность области просмотра #

Помимо установки начального масштаба , вы также можете установить следующие атрибуты в области просмотра:

• минимальный масштаб
• максимальный масштаб
• пользователь -scalable

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

Размер содержимого в соответствии с окном просмотра #

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

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

Контент имеет неправильный размер для области просмотра. Аудит Lighthouse может помочь вам автоматизировать процесс обнаружения переполненного контента.

Images #

Изображение имеет фиксированные размеры, и если оно больше, чем область просмотра, появится полоса прокрутки.Распространенный способ решения этой проблемы — присвоить всем изображениям максимальную ширину из 100% . Это приведет к уменьшению изображения до размера имеющегося в нем пространства, если размер области просмотра будет меньше, чем изображение. Однако, поскольку max-width , а не width составляет 100% , изображение не будет растягиваться больше, чем его естественный размер. Как правило, безопасно добавлять в таблицу стилей следующее, чтобы у вас никогда не было проблем с изображениями, вызывающими полосу прокрутки.

  img {
 max-width: 100%; 
 дисплей: блочный; 
}  

Добавьте размеры изображения в элемент img #

При использовании max-width: 100% вы переопределяете естественные размеры изображения, однако вы все равно должны использовать ширину , и высоту . в вашем теге . Это связано с тем, что современные браузеры будут использовать эту информацию для резервирования места для изображения перед его загрузкой, это поможет избежать сдвигов макета при загрузке содержимого.

Layout #

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

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

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

Современные методы компоновки CSS, такие как Flexbox, Grid Layout и Multicol, значительно упрощают создание этих гибких сеток.

Flexbox #

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

  .items {
 дисплей: гибкий; 
 justify-content: space-between; 
}  

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

Подробнее о Flexbox.

CSS Grid Layout #

CSS Grid Layout позволяет легко создавать гибкие сетки. Если мы рассмотрим предыдущий пример с плавающей точкой, вместо того, чтобы создавать наши столбцы с процентами, мы могли бы использовать макет сетки и единицу fr , которая представляет часть доступного пространства в контейнере.

 . Контейнер {
 дисплей: сетка; 
 сетка-шаблон-столбцы: 1fr 3fr; 
}  

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

Подробнее о CSS Grid Layout

Multiple-column layout #

Для некоторых типов макета вы можете использовать Multiple-column Layout (Multicol), который может создавать гибкое количество столбцов со свойством column-width .В демонстрации ниже вы можете видеть, что столбцы добавляются, если есть место для другого столбца 200 пикселей .

Подробнее о Multicol

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

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

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

   
  
 < head> 
… 
    
… 
  
…  

В качестве альтернативы вы можете включить стили печати в свою основную таблицу стилей с помощью медиа-запроса:

  @media print {
}  

Также можно включить отдельные таблицы стилей в ваш основной файл CSS, используя синтаксис @import , @import url (print.css) печать; , однако это использование не рекомендуется по соображениям производительности. Дополнительные сведения см. В разделе Избегайте импорта CSS.

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

Медиа-запросы на основе размера области просмотра #

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

• ширина ( минимальная ширина , максимальная ширина )
• высота ( минимальная высота , максимальная высота )
• ориентация
• соотношение сторон

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

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

Медиа-запросы на основе возможностей устройства #

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

• hover
• pointer
• any-hover
• any-pointer

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

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

Использование

Функции с любым наведением и с любым указателем проверяют, есть ли у пользователя возможность навести указатель мыши или использовать этот тип указателя, даже если он это не основной способ их взаимодействия со своим устройством. Будьте очень осторожны при их использовании. Принуждение пользователя переключаться на мышь, когда он использует свой сенсорный экран, не очень удобно! Однако с любым наведением и с любым указателем могут быть полезны, если важно выяснить, какое устройство имеет пользователь.Например, ноутбук с сенсорным экраном и трекпадом должен соответствовать грубым и точным указателям в дополнение к способности зависать.

Как выбрать точки останова #

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

Выберите основные точки останова, начав с малого, а затем продолжив работу #

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

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

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

Чтобы вставить точку останова на 600 пикселей , создайте два медиа-запроса в конце вашего CSS для компонента: один для использования, когда размер браузера 600 пикселей, и ниже, и один, когда он шире, чем 600 пикселей .

  @media (max-width: 600px) {
} 
 
 @media (min-width: 601px) {
 
} 
  

Наконец, проведите рефакторинг CSS. Внутри медиа-запроса для max-width из 600px добавьте CSS, который предназначен только для маленьких экранов.Внутри медиа-запроса для min-width из 601px добавьте CSS для больших экранов.

Выбирать второстепенные точки останова при необходимости #

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

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

  @media (min-width: 360px) {
 body {
 font-size: 1.0em; 
} 
} 
 @media (min-width: 500px) {
 .seven-day-fc .temp-low, 
 .seven-day-fc .temp-high {
 display: inline-block; 
 ширина: 45%; 
} 
 
.seven-day-fc .seven-day-temp {
 маржа слева: 5%; 
} 
 
 .seven-day-fc .icon {
 width: 64px; 
 высота: 64 пикс. 
} 
} 
  

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

  @media (min-width: 700px) {
 .weather-прогноз {
 width: 700px; 
} 
}  

Оптимизация текста для чтения #

Классическая теория читабельности предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке).Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, подумайте о добавлении точки останова.

Давайте подробнее рассмотрим приведенный выше пример сообщения в блоге. На небольших экранах шрифт Roboto с номером 1em отлично работает, давая 10 слов в строке, но на больших экранах требуется точка останова. В этом случае, если ширина браузера больше 575 пикселей , идеальная ширина содержимого составляет 550 пикселей .

  @media (min-width: 575px) {
 article {
 width: 550px; 
 левое поле: авто; 
 поле справа: авто; 
} 
}  

Избегайте простого скрытия содержимого #

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

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

Чтобы просмотреть страницу с разными точками останова:

Откройте DevTools и включите режим устройства.По умолчанию он открывается в адаптивном режиме.

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

Щелкните одну из полос, чтобы просмотреть страницу, пока этот медиа-запрос активен. Щелкните правой кнопкой мыши панель, чтобы перейти к определению медиа-запроса.

Чего следует ожидать клиентам при создании адаптивного веб-сайта

Что такое действительно индивидуальный веб-сайт? Сайт написан с нуля.Пользовательские веб-сайты, которые часто начинаются как «каркас», план навигационных элементов, дают нам полную свободу действий, чтобы быть полностью брендированными и уникальными по дизайну и функциям. Создание настраиваемого веб-сайта требует тщательного планирования, при котором дизайнеры и разработчики работают в тесном сотрудничестве, чтобы обеспечить беспроблемный пользовательский интерфейс.

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

Понимание процесса веб-дизайна

Четкое понимание процесса веб-дизайна даст вам возможность стать образованным партнером в дизайне вашего веб-сайта.

Содержание

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

Дизайн

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

Развитие

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

Будьте реалистичны в отношении проектирования и времени разработки

При разработке веб-сайта, который полностью настраивается и реагирует на все размеры экрана, дизайнеры должны учитывать как минимум 3 основных точки останова — настольный компьютер, планшет и мобильный телефон. Помимо времени разработки, разработчикам потребуется написать код, который изменяет дизайн веб-сайта (размер, макет и контент) в зависимости от устройства, а также время для тестирования трех точек останова в разных браузерах и устройствах.

Начать сбор контента сейчас

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

Планируйте сосредоточиться на иерархии контента

При планировании адаптивного веб-сайта важно определить, какой контент важен для мобильных устройств, а какой нет. Думайте, прежде всего, для мобильных устройств. Что ищет ваша аудитория, когда они переходят на ваш веб-сайт со своего мобильного устройства, а не со своего настольного компьютера? Их потребности и интересы часто различны. Мобильные пользователи часто ориентированы на достижение цели. Они находятся на вашем сайте с определенной целью — будь то поиск вашей контактной страницы или получение расценок.Таким образом, размещение номера телефона компании на переднем плане и по центру может иметь важное значение на мобильных устройствах, но не обязательно на настольных компьютерах.

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

Будьте готовы к отдельным конструкциям для мобильных

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

Получите дизайн прямо перед тем, как можно будет начинать кодирование.

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

Запланируйте две недели тестирования и контроля качества перед запуском.

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

После того, как все усвоят ввод контента, запланируйте протестировать веб-сайт на как можно большем количестве устройств (например, iPad, iPhone, Android и т. Д.) И браузеров (т. Е. Chrome, Firefox, Safari и т. Д.). Выделите две недели на этот этап тестирования и обеспечения качества.

Очистите кеш, если что-то выглядит неправильно

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

Важно для потенциальных клиентов, клиентов и талантов

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

Как создать адаптивный веб-сайт для мобильных устройств

Создавать или не создавать мобильный сайт; этот вопрос находится в центре многих дискуссий. Однако есть и другой вариант: адаптивный веб-дизайн. Когда, почему и как следует разрабатывать адаптивный веб-сайт?

В связи с тем, что к 2015 году количество пользователей мобильного Интернета в США превзойдет количество пользователей настольных компьютеров, планшеты становятся все более популярными и даже при росте использования ТВ-интернета, компаниям важно обеспечивать удобство работы всех своих посетителей, независимо от того, на каком устройстве они находятся. поехали.Как адаптивный дизайн помогает нам в этом? Что ж, позволив нам создать одно решение для веб-сайта, гибкое для экранов разной ширины. Он использует гибкие сетки и умные стили, чтобы представить одно и то же содержимое пользователю, но отображает это содержимое в формате, соответствующем ширине устройства. Ознакомьтесь с этим руководством для начинающих по адаптивному веб-дизайну, чтобы получить более подробное введение.

Почему вы должны создавать адаптивный сайт?

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

Так почему вы решили создать веб-сайт таким образом?

Вы начинаете с нуля

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

Вы хотите снизить затраты

Надежные адаптивные решения требуют дополнительного времени на проектирование и интерфейсную разработку, но не слишком сильно влияют на разработку приложений. На разработку адаптивного сайта может уйти примерно на 20–30 процентов больше времени, но это все же быстрее, чем создание дополнительного мобильного сайта или приложения. Подобная разработка сайта также означает, что вам нужно только разрабатывать, управлять и поддерживать один сайт, так что это также может снизить эти затраты.

Вы хотите, чтобы он работал, даже когда будут выпущены новые устройства

Мобильный сайт должен уметь распознавать устройство пользователя; при выпуске новых устройств сайт нужно обновлять. Поскольку адаптивное решение распознает только ширину браузера, никаких новых обновлений делать не нужно. Это означает, что он более перспективный и масштабируемый.

Процесс

Давайте поговорим о процессе создания адаптивного веб-сайта на примере веб-сайта отеля.В сентябре прошлого года компания Equator выпустила новый веб-сайт Macdonald Hotels. Macdonald Hotels — это британская гостиничная сеть, состоящая из 47 отелей и курортов в Великобритании и Испании. Мы создали для них новый сайт, который включал новую структуру сайта, обширное содержание отелей и новую систему бронирования. Вот шаги, которые мы прошли, а также некоторые соображения, которые следует учитывать при разработке адаптивного веб-сайта.

Это ключевые шаги:

• Исследование / определение объема работ: Понимание дополнительных требований к адаптивному сайту
• Каркас: Сеточные структуры и макеты для сайта с учетом разной ширины экрана
• Внешний вид: Соображения стиля
• Создание сайта: Проблемы с HTML и CSS

Исследования и предварительные исследования

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

• Какие разные цели будут преследовать пользователя на разных устройствах?

  Подобные вопросы становятся все более излишними. Раньше мы предполагали, что мобильные пользователи ориентированы на выполнение задач, например Я хочу узнать адрес отеля; Я хочу что-нибудь быстро забронировать. Но теперь люди на любом устройстве с такой же вероятностью будут неторопливо просматривать Интернет, как и им нужно быстро выполнить задачу.Тем не менее, об этом стоит подумать, поскольку подобный подход к целям пользователей может помочь вам расставить приоритеты для контента сайта, независимо от того, какое устройство использует посетитель.

• Какие технические соображения нам необходимо сделать для функциональности и содержания?

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

Каркас

Логику, лежащую в основе изменения стилей, может быть немного сложно определить, и магия этого действительно проявится в сборке сайта, но нам нужен способ начать определять различные этапы ширины макета. Мы выбираем 3 варианта ширины экрана: рабочий стол, iPad и iPhone. Мы посчитали, что это соответствует нашим требованиям, но для своего проекта вы должны подумать о том, какие значения ширины важны для вас — возможно, вам даже придется взглянуть на экран с большей шириной для использования телевизора в Интернете.

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

• Начало работы

  Сначала определите структуру сетки для каждой ширины ключа. Мы создали 3 страницы для ширины экрана 1024 пикселей (рабочий стол), 768 пикселей (портрет iPad), 320 пикселей (портрет iPhone), затем нам нужно было определить структуру сетки для каждой из этих ширины.

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

• Создание главного шаблона

  При создании каждого каркаса вам нужно подумать о столбцах и о том, как компоненты в них будут адаптироваться по мере уменьшения ширины страницы & mdashe.грамм. что происходит, когда у вас меньше места? Если у вас четыре столбца с контентом? Когда вы переходите на трехколоночную ширину? Между дизайнером и разработчиком интерфейса всегда должно быть постоянное общение, чтобы ответить на любые вопросы о том, что вы можете делать с компонентами визуально и в CSS.

• Начиная с домашней страницы

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

• Основная навигация

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

  Другие компоненты заголовка выровнены по правому краю и будут просто сдвигаться по мере уменьшения ширины страницы.

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

• Нижний колонтитул

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

• Прочие компоненты

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

• Протестируйте прямо сейчас

  Как только вы создали свой первый каркас, сразу же протестируйте его на соответствующем устройстве. Легко разместить изображение на простой веб-странице и посмотреть, как оно выглядит и ощущается при прокрутке вниз. Это позволит вам заранее узнать, работает ли ваш каркас. Такое тестирование очень быстро дало нам понять, что работает, а что не работает.Если вы посмотрите на этот каркас, вы быстро увидите наш первый выпуск.

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

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

Внешний вид и ощущения

Нет необходимости создавать визуальные эффекты для каждого каркаса. Основная цель — охватить все стили, которые потребуются для создания HTML и CSS. Будет немного пересечения для каркасов и визуальных элементов, некоторые стили потребуются для мобильных устройств, где не было необходимости в начальном каркасе.

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

• Размышляя о шрифте: Убедитесь, что ваш размер шрифта будет читаемым на каждом устройстве. На мобильном устройстве они должны быть намного больше, чтобы их можно было читать.

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

Создание сайта

Создание HTML и CSS — это самостоятельная задача, поэтому я не буду вдаваться в подробности, но вот несколько вещей, о которых стоит подумать.

• Влияние размеров изображения: Сайт должен будет загружать полноразмерные изображения, даже если CSS уменьшает их размер, поэтому старайтесь сохранять размеры изображений как можно меньшими.Однако могут быть некоторые изящные уловки JavaScript, чтобы сделать сайт более плавным. На этом сайте мы изначально загрузили изображение наименьшего размера, а затем использовали JavaScript, чтобы решить, нужно ли тогда изображение большего размера.

• Использование расширенного CSS:
  Важно, чтобы клиент поддерживал идею использования расширенных стилей CSS, позволяя стилям сайта ухудшаться по мере того, как это происходит с возможностями браузера. Это позволяет сократить время загрузки сайта.

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

Стоит взглянуть на взгляд нашего фронтенд-разработчика Джейми Бойда на фронтенд-разработку веб-сайта Macdonald Hotels для обеспечения адаптивного дизайна.

Так что все это значит?

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

Мы все так много узнали в этом проекте о разработке адаптивного веб-сайта. Нам повезло с клиентом, который, как и мы, стремился создать что-то новое и инновационное, и благодаря этому мы создали сайт, которым все гордимся.

Изображение на домашней странице UX Booth с сайта needoptic на Flickr.

Супер-руководство универсального дизайна и специальных возможностей

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