Мобильный веб-дизайн, как отрасль, постоянно растет и развивается, требуя от разработчиков и других специалистов непрерывной адаптации и совершенствования навыков.
В последние несколько лет, одним из крупнейших изменений стало увеличение количества интернет пользователей, использующих сеть с мобильных устройств. Как результат, спрос на разработчиков мобильных приложений и сайтов вырос, как никогда.
Разработка веб-сайтов для мобильных устройств приводит к некоторым уникальным, совершенно новым для разработчика, ситуациям и проблемам, и вопрос уже требует рассмотрения не только от разработчика, но и других специалистов, например, дизайнеров. В этой статье мы рассмотрим текущие тенденции в веб-дизайне и проблемы, которые являются актуальными на данный момент. Кроме того, в этой статье мы предлагаем множество полезных ссылок на источники, которые вас заинтересуют, если вы намерены развиваться в сфере мобильного веб-дизайна.
Мобильный Веб-дизайн: Тенденции 2009
1. Простые опции
Одна из самых интригующих тенденций в мобильном веб-дизайне текущего года — это уменьшение опций, которые доступны для посетителей. Главная страница мобильной версии сайта Digg, например, содержит только десять простых заголовок и ссылок, переходы по ссылкам и несколько только самых основных параметров навигации. Когда речь заходит о мобильных веб-сайтах, простота является ключевым приемом. Из-за недостатка места на экране и медленного подключения к Интернету, пользователям важно иметь перед глазами только все самое актуальное.
Часто сайты содержат слишком большое количество страниц, некоторые из них совершенно не нужны и не популярны среди пользователей. Простота всегда привлекает, кроме того, простые сайты всегда удобны в использование.
2. Белое пространство
Белое пространство является важной частью любого дизайна, но иногда дизайнеры превышают необходимую меру. Белое пространство становится еще более необходимым в дизайне мобильных приложений, из-за небольшого размера экрана мобильного устройства.
Когда вы будете просматривать те сайты, которые мы использовали в этой статье, в качестве примеров, или любые другие сайты со своего мобильного устройства, вы заметите, что оптимально небольшое количество белого пространство делает пользовательский интерфейс более удобным и приятным в использование.
3. Отсутствие картинок
С тех пор как высокоскоростное подключение к сети с мобильных устройств стало все более популярным, дизайнеры получили свободу в использование большого количество изображений. Любой средний пользователь, заходя на сайт с стационарного компьютера или ноутбука, хочет видеть визуально привлекательный сайт, и, как результат, картинки активно используются в создании привлекательного дизайна. Однако, когда речь заходит о мобильном дизайне, большое количество изображений больше вредит, чем приносит пользы.
В настоящее время скорость мобильного интернета очень сильно варьируется в зависимости от самого мобильного устройства, точки доступа, тарифных планов и множества других условий. Очевидный минус большого количество изображений на сайте — это медленная скорость загрузки, а также из-за небольшого размера мобильного экрана, большое количество изображений может закрывать необходимый другой контент. Именно поэтому часто можно увидеть веб-сайты для мобильных устройств с маленьким количеством изображений.
Возможно, когда у пользователей появится возможность перейти на мобильный устройства с большим размером экрана и лучшей скоростью доступа в сеть, эта ситуация изменится. Однако, поскольку огромное количество пользователей использует мобильные устройства с небольшим размером экрана и маленькой скоростью, многие мобильные версии сайтов по — прежнему избегают большого количества изображений.
4. Поддомены вместо мобильных или отдельных доменов
Когда мобильные домены первого уровня стали доступны, вокруг них было много шума. Да, некоторые компании используют мобильные домены для своих мобильных версий оригинального сайта, но большинство компаний использует поддомены.
Вы часто можете увидеть мобильные сайты с такими адресами, как mobile.example.com, m.example.com, example.com/mobile, example.com /m. Вот некоторые реальные примеры m.twitter.com mobile.washingtonpost.com и netflix.com/mobile/. Конечно, есть и исключения из этой тенденции, но, все же поддоменов больше.
5. Приоритетный контент
Если внимательно смотреть на контент мобильных сайтов, то можно заметить, что на них расположен только самый приоритетный контент. Конечно, на сайте обычно располагают только актуальный для пользователей контент, но часть содержания обычных сайтов является коммерческой, например, баннерная реклама. В то время когда, реклама является признанной частью всей сети, многие мобильные сайты до сих пор не содержат ни одного коммерческого баннера, а только контент, важный для пользователей, а не для владельца сайта.
Например, мобильная версия сайта Onion. Как и большинство новостных сайтов, TheOnion.com предлагают пользователям новостную ленту (хотя многие из этих новостей являются скрытой рекламой). Мобильная версия сайта рекламы не содержит:
Другой пример приоритетного для пользователей контента можно увидеть на сайте Best Buy’ mobile website. Логика здесь в том, что посетители, которые заходят на сайт с помощью мобильного устройства, скорее всего, ищут что-то конкретное. Например, самый близкий к ним магазин. Редко, когда посетители сайта с мобильного устройства заходят просто полистать сайт.
Общие проблемы разработки сайтов и приложений для мобильных устройств
Конечно, веб-дизайн для мобильных устройств — это совсем уникальные проблемы, с которыми разработчики и дизайнеры сталкиваются в процессе работы, и которые не встречаются в разработке сайтов для стационарных компьютеров. Среди них:
1. Разнообразие размеров экрана мобильного устройства
Несмотря на то, веб-дизайнеры привыкли иметь дело с различными размерами экрана мобильных устройств, мобильный дизайн ставит этот вопрос немного иначе. Большинство дизайнеров знакомы с проблемами, которые возникают из-за различных разрешений экрана монитора. Но суть этой проблемы в мобильной дизайне состоит в том, что мобильные технологии постоянно меняются, и как следствие, меняются и размеры экранов мобильных устройств. К счастью для дизайнеров, современные мобильные устройства, как правило, имеют большие экраны и более высокое разрешение, чем несколько лет назад, но, большое количество пользователей все еще используют старые модели телефонов.
В сети есть две отличные статьи на тему размеров экранов мобильных устройств, они вышли в апреле 2008 года: “Тренды в размерах экранов мобильных устройств“, а вторая называется “Еще немного о размерах экрана мобильных устройств”. Результаты исследования, которые приводятся в этих статьях, говорят о том, что размер экрана равный 240 х 320 (QVGA) должен стать стандартным для мобильных экранов в ближайшем будущем. Многие новые мобильные телефоны и смартфоны имеют большие размеры экранов, но более мелкие экраны уже в прошлом.
Приведенный ниже график показывает выводы доклада. С ростом популярности iPhone и его конкурентов, цифры говорят о росте количество экранов больших размеров.
Другие интересные подробности, касающиеся тенденции роста размера мобильного экрана читайте в обеих статьях.
2.Отсутствие понимания
Одна из самых больших проблем, с которой сталкиваются многие дизайнеры, это страх перед использованием нового. Многие дизайнеры работавшие только с браузерами стационарных компьютеров, не знают, с чего начать в работе с мобильными устройствами. Еще одной причиной для этого является то, что эти два вида браузеров ведут себя совершенно по — разному. В данной статье мы постараемся рассказать вам о том, чем же отличаются браузеры стационарных компьютеров, от мобильных браузеров.
3.Быстрые изменения
Как и любая другая новейшая отрасль, мобильные технологии постоянно меняются и развиваются. Конечно, если вы хотите стать успешным разработчиком для мобильных устройств, вы должны быть постоянно в курсе того, что нового происходит в индустрии.
4.Тестирование
Одна из самых серьезных проблем в разработке для мобильных телефонов — это постоянно увеличивающейся спектр телефонов и других мобильных устройств, которые используют пользователи. Когда разрабатывается сайт для стационарного компьютера, возникают вопросы тестирования для различного разрешения экрана, разных видов браузеров и других важных факторов. Когда вы разрабатываете продукт для мобильных устройств, то вы не сможете заранее предсказать те условия, в которых клиент будет пользоваться вашим продуктом.
Конечно, некоторые условия и факторы вы можете предсказать и протестировать в них свой мобильный продукт. Еще одним немаловажным фактом является то, что простота мобильного сайта значительно упрощает его тестирование. При правильной разработке и тщательном процессе тестирования, вы можете быть уверены, что ваш сайт будет отображаться на большинстве мобильных устройств.
В конце этой статьи, вы найдете ссылки на ряд полезных ресурсов для тестирования, о некоторых из них мы бы хотели рассказать в этом разделе. Во-первых, это Web Developer Toolbar, у этого инструмента есть несколько очень полезных функций для тестирования веб-сайтов для мобильных устройств. Так как CSS и изображения не могут быть включены, когда пользователь заходит на сайт с мобильного устройства, вы можете использовать панель инструментов для отключения обоих и посмотреть, как сайт будет выглядеть глазами мобильного пользователя. Хотя этот инструмент не в точности повторит процесс посещения вашего сайта мобильным пользователем, он поможет вам выявить некоторые ошибки.
Другой полезный ресурс для тестирование называется Opera browser. В панели инструментов, перейдите во вкладку “View” и выберите “ Малый экран”. Сайт будет отображать в очень узком окне, имитируя просмотр с экрана мобильного устройства. Кроме этого, вы можете использовать Opera WebDev Toolbar для просмотра страниц, нажав на “Display”. Во время просмотра страницы в небольшом экране с отключенным CSS, вы сможете получить представление о том, как мобильные пользователи вашего сайта видят и используют его. На следующем рисунке показана страница Smashing Magazine без стилей в небольшом окне.
5. Выбрать самое важное
Если сайты должны содержать только то, что является наиболее существенным для пользователей, владелец сайта или дизайнер должен определить, какой же контент является самым важным. Это может показаться довольно простой задачей, но если контент сайта состоит из текста, изображений и даже видео, решить, что важно, а что нет, уже не так просто. Другая сторона этого вопроса выглядит следующим образом: а что делает пользователь мобильного устройства, когда заходит на ваш сайт? Сколько времен …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров