Марахтанов Алексей

Преподавание

• Мультимедиа-технологии
• Методы анализа данных
• Web-проектирование
  • Доклады студентов
• Текстовые процессоры
• Количественные методы
• Историческая информатика
• Электронный бизнес
• Web-технологии в туристическом бизнесе

Новости

• Стажировка в ИТ-компании (2017)
  ООО «Интернет-бизнес-системы» объявляет конкурс для студентов ИТ-специальностей на прохождение стажировки по направлению HTML-верстка.
• "Web-проектирование - 2015" - следующее занятие
  Следующее занятие по спецкурсу по выбору "Web-проектирование" состоится в пятницу, 2 октября 2015, в 11-30. Аудитория будет сообщена дополнительно.

Все новости

Ссылки

• Петрозаводский государственный университет (ПетрГУ)
• Региональный центр новых информационных технологий (РЦ НИТ)
• Кафедра теории вероятностей и анализа данных (ТВИАД)
• "Интернет-бизнес-системы" - Малое инновационное предприятие Петрозаводского государственного университета
• Интернет-компания "Инноза": разработка сайтов в Петрозаводске

Наземные экосистемы таежной зоны | Учебное пособие

0	Версия для печати

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

Выполнил: Кивикангас Э.А.
Гр. 22304

Около 5% всех пользователей интернета используют для выхода в интернет мобильное устройство. И эта цифра с развитием мобильных технологий неуклонно растет из года в год.

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

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

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

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

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

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

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

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

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

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

3) Юзабилити

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

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

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

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

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

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

1) Прочная основа хорошего мобильного (и не только) сайта — в четкой семантической разметке. То, без чего можно обойтись на обычном сайте, может создать проблемы при использовании его мобильной версии. Грамотная валидная верстка по стандартам W3C поможет обеспечить правильное отображение сайта практически любым браузером, а это в свою очередь произведет на посетителей сайта самое благоприятное впечатление.

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

Учитывая, что мобильные браузеры не всегда отображают текст, отформатированный с помощью css адекватно, стоит уделить больше внимания заголовкам. Мобильные браузеры редко отображают текст так, как вам хочется, но теги h1, h2, h3 и т.д. помогают структурировать текст страницы для удобства пользователей.

Даже если мобильный браузер корректно отображает страницу, содержащую блоки контента с обтеканием (со свойством float), вряд ли она будет хорошо смотреться на маленьком экране: текстовые блоки или наедут друг на друга, или вытянутся длинным неудобным столбиком.. Как правило, наилучшим решением в таких случаях становится отказ от "плавающего" текста в пользу обычного, фиксированного.

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

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

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

Wikipedia (http://mobile.wikipedia.org), Google (Mail + Reader + Translate + Search) и Yandex (Деньги + Маркет) (http://www.yandex.ru/m/), в контакте (http://0.vkontakte.ru/ или http://m.vkontakte.ru/), facebook (http://m.facebook.com/), flickr (http://m.flickr.com/ )

Поиск по сайту

Пользовательского поиска