Главная > Web-дизайн > Советы разработчикам компактных дизайнов веб-сайтов

Советы разработчикам компактных дизайнов веб-сайтов


26 апреля 2012, 12:00. Разместил: Design FactoRy
Построение шаблонов веб-сайтов, специально предназначенных для устройств мобильной связи, может потребовать массы дополнительных усилий. HTML- и CSS-технологии шагнули далеко вперёд, но мороки со стандартами и прочими препонами, в которых приходится искать лазейки, по-прежнему хватает. А стремительно растущее разнообразие мобильных устройств уже обусловило появление большего, чем когда бы то ни было количества платформ.

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

Советы разработчикам компактных дизайнов веб-сайтов
(источник изображения)

Рациональная функциональность

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

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

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

Советы разработчикам компактных дизайнов веб-сайтов

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

Умеренность в использовании изображений

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

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

Советы разработчикам компактных дизайнов веб-сайтов
(источник изображения)

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

Мета-тег порта просмотра

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

<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

Наличие полноформатной версии

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

Советы разработчикам компактных дизайнов веб-сайтов
(источник изображения)

И среди посетителей вашего веб-сайта из числа владельцев смартфонов могут найтись противники "облегчённых" мобильных версий. По возможности, стоит всегда предоставлять пользователям доступ к полным версиям веб-сайтов через ссылки, как правило, расположенные внизу страницы. То есть, вам, наверное, придётся настроить мобильный шаблон в подкаталоге вашего веб-сервера. Структура вашей URL-ссылки может быть примерно такой: http://m.domain.com/ или http://www.domain.com/mobile/.

Упрощение цветовой схемы

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

Однако, не забывайте, что напрягать ваших посетителей вам не следует. Экраны мобильных устройств гораздо мельче мониторов стационарных ПК и даже ноутбуков, на них особо не развернёшься. Постарайтесь ужать вашу цветовую схему до 3-4 беспроигрышных вариантов в качестве "базовых". Расширяя её за счёт других оттенков, вы рискуете смешать в кучу заголовки, абзацы, ссылки, фрагменты кода и замещающие надписи.

Проектирование на базе jQuery Mobile

В jQuery часто видят не более чем библиотеку javascript-эффектов с расширенными возможностями. На самом же деле это целый каркас для построения зрелищной анимации и структур взаимодействия между компонентами страницы. А проект jQuery Mobile, как раз отмечающий важное событие - официальный выпуск своей версии 1.0, является ещё более значимым достижением.

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

Советы разработчикам компактных дизайнов веб-сайтов

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

Заключение

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

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