Мобильная версия сайта

Около 5% всех пользователей интернета используют для выхода в интернет мобильное устройство. И эта цифра с развитием мобильных технологий неуклонно растет из года в год. В наши дни большинство сайтов совсем не пригодны к мобильному сёрфингу: слишком долгая загрузка, исковерканный малым экраном устройства дизайн и другие неприятные моменты. Тем не менее, к радости посетителей, изо дня в день тысячи людей выпускают адаптированные версии своих сайтов. Красивые и быстрые. И пусть идея создания мобильной версии не пугает вас - оно того стоит.

Читать полностью...
 
Технологии интернет-рекламы

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

Читать полностью...
 

Создание сайтов, Львов. Редизайн сайта. Разработка интернет-магазина. Веб-дизайн во Львове. Раскрутка сайта в Google, Yandex. Разработка сайта Львов. Создать сайт

Мобильная версия сайта

Около 5% всех пользователей интернета используют для выхода в интернет мобильное устройство. И эта цифра с развитием мобильных технологий неуклонно растет из года в год. В наши дни большинство сайтов совсем не пригодны к мобильному сёрфингу: слишком долгая загрузка, исковерканный малым экраном устройства дизайн и другие неприятные моменты. Тем не менее, к радости посетителей, изо дня в день тысячи людей выпускают адаптированные версии своих сайтов. Красивые и быстрые. И пусть идея создания мобильной версии не пугает вас - оно того стоит.

Причины создания мобильных версий

Разумеется, некоторые современные мобильные браузеры позволяют просматривать и обычные, неадаптированные сайты на экране мобильного устройства, однако все же большинство пользователей предпочитают использовать специальные мобильные версии сайта - совместимые с iPhone, Android, Blackberry, Nokia, WAP и IMode телефонами.

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

Типы мобильных версий

Идентичная основной версии сайта
Данный тип предусматривает создание мобильной версии, которая повторяет структуру основного сайта полностью, либо ее некоторые элементы. В данном случае мобильная версия создается для адаптации основного сайта под просмотр на мобильных устройствах.

Независимая мобильная версия

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


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

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

1) Совместимость
Сайт должен нормально отображаться в наиболее распространенных экранах. Наиболее популярным на сегодняшний день является размер 240х320. Размеры больше, вроде 480х320 (iPhone), становятся всё более популярными, так как появляются новые модели устройств с большими дисплеями и большими разрешениями. Если вы разрабатываете сайт для мобильных устройств, убедитесь, что сайт корректно отображается на экранах наиболее популярных размеров.
Сайт должен поддерживать xhtml. Старайтесь избегать использования JavaScript, но если придется — не используйте его в критичных элементах, таких, как навигация и ссылки.
2) Контент должен быть оптимизирован
Картинки должны быть уменьшены в размере, как в габаритах так и в килобайтах, для того чтобы они быстро загружались и соответствовали большинству популярным размерам экранов.
3) Юзабилити
Сайт должен быть удобным в использовании. Многие мобильные сайты используют такую навигацию, что ориентация на сайте превращается в кошмар.
4) Хороший дизайн
Дизайн — очень важен. Хороший мобильный дизайн не только должен выглядеть хорошо, но и не должен казаться тесным. Навигация должна быть простой, а сайт должен загружаться быстро.

Варианты создания мобильных версий

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

Несколько советов по поводу создания мобильной версии сайта

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

1) Прочная основа хорошего мобильного (и не только) сайта — в четкой семантической разметке. То, без чего можно обойтись на обычном сайте, может создать проблемы при использовании его мобильной версии. Грамотная валидная верстка по стандартам W3C поможет обеспечить правильное отображение сайта практически любым браузером, а это в свою очередь произведет на посетителей сайта самое благоприятное впечатление.
2) Разделяйте контент и css-дизайн
Помимо семантически верной верстки, требуется также сделать контент, т.е. текст сайта, независимым от оформления, т.е. элементов дизайна сайта, создаваемых с помощью графики и таблиц стилей (css). Посетители мобильных сайтов, в отличие от пользователей настольных компьютеров, почти наверняка для экономии трафика будут просматривать страницы с отключенной графикой и CSS . Самое главное для таких посетителей – иметь доступ к контенту и ссылкам: оформление уходит на второй план. Сайт с четкой разметкой, где текст структурирован с помощью html-тэгов и хорошо читается без css, имеет все шансы на успех.
3) Прописывайте Alt -атрибуты для изображений
Наверняка не все пользователи захотят просматривать картинки, поэтому очень важны Alt -теги. Понятно, что они должны использоваться в любом случае, но для мобильных версий сайтов это особенно актуально. Обязательно прописывай Alt для основного логотипа компании (если название сайта словами не прописано) и подписывай кнопки навигации, если уж случилась на тебя такая проруха, что ссылки на разделы сайта у тебя
4) Обозначайте элементы форм текстовыми метками
Как и Alt -атрибуты, текстовые метки элементов форм делают сайт более удобным для посетителей его мобильной версии. Представьте, как можно использовать форму, не зная, что и где нужно напечатать или отметить. Простые вещи, вроде Alt -атрибутов и текстовых меток поля формы очень полезны в этом отношении.
5) Позаботьтесь о заголовках
Учитывая, что мобильные браузеры не всегда отображают текст, отформатированный с помощью css адекватно, стоит уделить больше внимания заголовкам. Мобильные браузеры редко отображают текст так, как вам хочется, но теги h1, h2, h3 и т.д. помогают структурировать текст страницы для удобства пользователей.
6) Не используйте плавающие блоки
Даже если мобильный браузер корректно отображает страницу, содержащую блоки контента с обтеканием (со свойством float), вряд ли она будет хорошо смотреться на маленьком экране: текстовые блоки или наедут друг на друга, или вытянутся длинным неудобным столбиком.. Как правило, наилучшим решением в таких случаях становится отказ от "плавающего" текста в пользу обычного, фиксированного.
7) Уменьшайте поля и отступы
Почти наверняка у мобильной версии вашего сайта значения отступов должны быть меньшие, чем на основном сайте. Конечно, все зависит от того, насколько велики они в данный момент. Помни: очень большие отступы в любом случае выглядят ужасно. На маленьком экране хочется сэкономить пространство и по максимуму заполнить его контентом. Сократи поля и отступы до минимума.
8) Уделяйте внимание навигации
У большинства веб-сайтов главное меню находится на самом верху страницы. Это работает и на мобильных версиях сайтов, но число пунктов там, как правило, сокращается. Оставьте только самые необходимые ссылки и по возможности обеспечьте пользователям легкий доступ к остальным пунктам навигации.
9) Создавайте цветовой контраст
Экраны мобильных телефонов не могут обеспечить такое же качество изображений, как у мониторов настольных ПК и ноутбуков, поэтому позаботься о том, чтобы цвета текста и фона были достаточно контрастными.

 
Понравилась статья? Не поленитесь - поделитесь с друзьями и подругами :)
Создание сайтов, интернет-магазинов - веб-студия «Sanao»


/

Наши работы

заказать создание сайта

Правила корпоративного сайту

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

Читать полностью...
 
Просування сайту в соціальних мережах

Социальные сети за несколько лет существования стали самыми популярными сайтами в интернете. Facebook, Twitter и Linkedin в США и Западной Европе, а Вконтакте и Одноклассники в СНГ – это площадки с миллионами активных пользователей. Эти социальные сети позволяют найти одноклассников, друзей, родственников, бывших коллег по работе. Естественно, чем больше людей в социальной сети, тем больше шанс найти старого приятеля или коллегу.

Читать полностью...