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

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

Мы рады представить на ваш суд мобильную версию нашей системы учета финансов.

Вместе с ростом мобильного интернета растёт и необходимость оптимизации скорости работы мобильных сайтов. Даже самые современные смартфоны на Android, iOS, WebOS, BlackBerry OS и др. обладают процессорами с частотой не более 1Ghz, а скорости 3G можно считать достаточно медленными (скорость загрузки в 3 раза меньше DSL).

Мобильные устройства унаследовали проблемы “больших” машин: от количества http-запросов до эффективности работы JavaScript.

Особенности мобильных устройств

Кроме того, что они часто помещаются в карман и их легче потерять, существует несколько ключевых отличий мобильных устройств по отношению к десктопам:

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

Описание применимо только к компьютерам с установленной Mac OS X.

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

Для «больших» браузеров существует FireBug, Developer Tools, встроенные в браузер, и т.п., но часто нужно запустить отладку мобильного сайта не в браузере с переключенным User Agent, а в эмуляторе iOS…

Google несколько недель назад представил свой сервис Go Mo, смысл которого заключается в облегчении работы web-мастера по тестированию вида сайта на мобильных браузерах.

В догонку к этому Google провел вебинар «Making Mobile-Friendly Websites: Best Practices in Action», материалы которого теперь доступны в интернете. Они представляют собой довольно длинную презентацию (почти 50 минут), в которой перечислены "...10 лучших практик по созданию мобильных сайтов". Откровенно говоря, ничего нового в советах специалистов Google нет, поэтому, на мой взгляд, основная ценность материала заключается в его систематизации, наличии блестяще иллюстрированных примеров и лаконичности изложения.

Видео презентации (на английском, конечно, и звук не радует особо)



То же самое доступно и в PDF-варианте здесь.

Представляю вашему вниманию перевод статьи под названием "A Study of Trends in Mobile Design" от Alexander Dawson. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Цель этой статьи — рассказать вам о методах, которые используются на самых популярных сайтах для того, чтобы предоставить пользователям мобильных устройств удобное и (надеемся) полезное взаимодействие. Среди проанализированных сайтов много известных компаний, например Facebook и Amazon. Мы приготовили для вас настоящий экскурс в мир мобильного веб-дизайна, со статистикой и по-настоящему интересными открытиями.

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

Помогите посетителям найти самый интересный контент на сайте, и они станут вашими преданными поклонниками. Чтобы сделать это было легче, мы создали новый инструмент, который объединяет в себе функции социальной сети Google+ и Google Поиска.

Например, посетителям сайта Forbes теперь гораздо проще найти другие статьи интересующего колумниста c этого веб-ресурса благодаря программе поддержки авторов. Кроме того, мобильные рекомендации контента позволяют узнать, какие материалы пользуются популярностью в Google+ (получают много +1 и активно распространяются пользователями). При подборе рекомендаций система учитывает, какую страницу просматривает посетитель в данный момент. Этот сервис ненавязчив и не мешает просматривать сайт в браузере на мобильном устройстве.

Посмотрите, как это работает на примере мобильного сайта Forbes:

Привет, Хабр!

В прошлом году NetCat и CMS Magazine провели совместное исследование – «Практика разработки мобильных сайтов», в этом году мы решили продолжить данную работу и подготовили следующее исследование, с помощью которого попытались отследить динамику «мобильного» сектора рынка веб-разработки.

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

Автор курса — замечательный профессионал, мама веб-маркетинга и просто хорошая женщина — Deltina Hay.

Приветствую всех! В данном материале я хочу отразить своё мнение относительно того, каким могла бы стать мобильная версия сервиса «Яндекс. Видео», которая на протяжении длительного времени почему-то находится в весьма удручающем состоянии. Не работает даже присутствующая часть функционала, не говоря уже о более широких возможностях старшей версии или аналогичных ресурсов. Описанный мной вариант (для WP) — подходит мне и может отличаться от Вашего взгляда, поэтому будет любопытно узнать мнение коллег.

Прежде чем перейти непосредственно к самому интерфейсу, хотел бы рассмотреть несколько сценариев использования текущего сервиса (упрощённо) и то, как их можно оптимизировать. Отдельно отмечу, что я использую Windows Phone, поэтому в условиях опираюсь на данный девайс, хотя сервис идентичен вне зависимости от платформы.

Мы проанализировали мобильные версии ТОП-20 интернет-магазинов России по 44 факторам. Получили адскую таблицу из единиц и нулей, чуть не растворились к ней, но собрались с силами и описали, как и чем «достают» покупателя в топовом сегменте мобильного e-Commerce.