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

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

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

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

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

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

Вы хотите удержать расходы на низком уровне

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

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

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

Процесс

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

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

Исследования и возможности

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

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

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

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

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

Прототип

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

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

Во-первых, определите структуру сетки для каждой ключевой ширины. Мы создали 3 страницы для экранов шириной 1024 пикселей (рабочий стол), 768 пикселей (IPad, вертикальный режим), 320 пикселей (iPhone , вертикальный режим). Затем нам было необходимо определить структуру сетки для каждого из этих размеров.
Очень простая структура сетки с одинаковой шириной колонок на каждом шаблоне облегчит планирование размещения содержания при изменении ширины.

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

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

Начиная с главной страницы

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

Главная навигация

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

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

Футер

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

Другие компоненты

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

Тестируйте сразу

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

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

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

Внешний вид

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

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

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

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

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

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

via

Читателям также нравится:

Обратите внимание!

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