Actual Web

 
 
Подписаться на RSS канал Добавить в друзья в Живом Журнале
 

Проект компании
АйПартнер
iPartner — интернет-компания
Adverkka.ru

 
 

 

Страницы

 

В Живом Журнале

 
 
 
 

Архивы

 
 
 
 
 
2 Дек 2009

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3) Юзабилити

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

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

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

Примеры:

Digg

Digg

http://m.digg.com/

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

Brightkite

Brightkite

Brightkite

Brightkite

http://i.brightkite.com

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

Taptu

Taptu

Taptu

Taptu

http://www.taptu.mobi/

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

YellowPages

YellowPages

YellowPages

YellowPages

http://m.yellowpages.com/

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

Amazon.com

Amazon.com

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

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

Mailchimp

Mailchimp

http://m.mailchimp.com/

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

Viget

Viget

http://i.viget.com/

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

Bank of America

Bank of America

http://bofa.mobi/

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

Facebook

Facebook

Facebook

Facebook

http://m.facebook.com/

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

Singlehop

Singlehop

Singlehop

Singlehop

http://singlehop.mobi/

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

Coosh

Coosh

http://coosh.com/iphone/

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

Webdesigner Depot

Webdesigner Depot

http://m.webdesignerdepot.com/

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

Matt Bango

Matt Bango

http://mattbangophotography.mobify.me

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

NikeLab

NikeLab

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

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

Flickr

Flickr

Flickr

Flickr

http://m.flickr.com/

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

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

Be Sociable, Share!

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

  1. Хороший пример мобильного интернет-магазина одежды
  2. Мобильная(iphone) версия сайта CBS News
  3. Мобильный веб-сайт Bud Light
  4. Иллюстрации в веб-дизайне: 10 восхитительных примеров!
  5. Мобильный интернет-магазин buy.com
  6. Мобильный интернет-магазин женской одежды и аксессуаров
  7. KMART — мобильный интернет магазин

Метки: , , , , , , , , , , , , , , , , , , , ,

 

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

 

Комментариев нет.

RSS-лента комментариев к этой записи. TrackBack URL

Оставить комментарий