15 примеров хорошего мобильного веб-сайта

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

Удивительно, но в сети очень мало сайтов, у которых есть мобильные версии. Хотя некоторые большие сайты имеют такие версии, но это не является нормой — большинство сайтов на сегодняшний день не рассчитаны для мобильных устройств.

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

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

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

Что делает хороший мобильный веб сайт действительно хорошим мобильным веб сайтом?

1) Совместимость.

Сайт должен нормально отображаться в наиболее распространенных экранах. Наиболее популярным на сегодняшний день является размер 240х320. Размеры больше, вроде 480х320 (iPhone), становятся всё более популярными, так как появляются новые модели устройств с большими дисплеями и большими разрешениями. Если вы разрабатываете сайт для мобильных устройств, убедитесь, что сайт корректно отображается на экранах наиболее популярных размеров.

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

2) Контент должен быть оптимизирован.

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

3) Юзабилити

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

4) Хороший дизайн.

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

Примеры:

http://m.digg.com/

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

http://i.brightkite.com

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

http://www.taptu.mobi/

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

http://m.yellowpages.com/

Великолепное использование цвета для оживления дизайна и продвижения бренда. Хорошее использование пространства.

http://www.amazon.com/gp/aw/h.html

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

http://m.mailchimp.com/

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

http://i.viget.com/

Хороший пример сайта с насыщенным содержанием и в тоже время с не стесняющим дизайном.

http://bofa.mobi/

Хороший дизайн, ясная навигация.

http://m.facebook.com/

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

http://singlehop.mobi/

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

http://coosh.com/iphone/

Дизайн разработан только для iPhone, но является ярким примером смешения богатого дизайна и юзабилити.

http://m.webdesignerdepot.com/

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

http://mattbangophotography.mobify.me

Правильное использование цвета, пространства и больших фотографий.

http://www.nike.com/nikelab/i/app.html#en_GB/home

Сайт сделан для пользователей iPhone, Отличный пример с богатым пользовательским интерфесом.

http://m.flickr.com/

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

Мы перевели для вас статью «15 Beautiful Examples of Mobile Website Design Done Right«

Вас может заинтересовать и:

1. Мобильный интернет-магазин OVERSTOCK|com
2. ТОП 20: лучший дизайн электронных магазинов
3. KMART — мобильный интернет магазин
4. Лучшие посты — 10’06
5. Хороший пример мобильного интернет-магазина одежды
6. Мобильный интернет-магазин одежды Forever 21
7. Мобильный интернет-магазин женской одежды и аксессуаров