+7 (911) 199-29-48

Разработка мобильных и веб-приложений
 Более 50 проектов в 10 странах, 8 лет на рынке
  Под ключ: бизнес-анализ, дизайн, продвижение
   Наши клиенты - и стартапы, и корпорации
    Воплощать ваши идеи в жизнь - наша работа!

Создание мобильных веб-сайтов

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

Маленький экран смартфона

Экран смартфона редко бывает шире, чем 5-7 сантиметров (2-3 дюйма), а в горизонтальную ориентацию пользователи поворачивают смартфон неохотно. Поэтому для мобильного сайта действуют несколько другие стили и правила, чем для Desktop-сайта.

Меню-"гамбургер"

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

Верстка в один столбец

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

Плейсхолдеры

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

Тач-скрин

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

Тач-скрин очень удобен для действий типа "прокрутка", "смахивание", а также "перенос" (Drag and Drop). Интересным примером дизайна, экономящего место на экране, является удаление элемента списка переносом на иконку корзины. Таким способом множество одинаковых кнопок "удалить" заменяется всего одной иконкой.

Содержимое мобильной версии

Уместить все содержимое вашего веб-сайта на маленьком экране мобильного телефона очень сложно. Поэтому в мобильной версии можно скрывать второстепенные детали интерфейса, а вспомогательный контент – перенести на отдельные страницы. Для определения, какое содержимое сайта является основным, а какое второстепенным,

анализируйте поведение пользователя.

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

Никакого флеша!

Рекламные ролики или анимация, использующие технологию Adobe Flash, не будут показываться на экране iPhone или iPad. Поэтому в мобильной версии необходимо избегать такого рода содержимого, заменяя его, например, эффектами JavaScript или анимированным GIF изображением.

Реализация мобильного веб-сайта

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

Если вы заказываете мобильный веб-сайт на отдельном домене – фактически это отдельный проект, который требует создания сайта практически "с нуля", даже при наличии рабочей его версии для компьютеров. Однако часто такой способ является единственным вариантом, если "широкоэкранный" сайт сложно или невозможно изменить.

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

Готовы реализовать свою идею?

Для реализации своих идей по созданию или доработке мобильных веб-сайтов, обратитесь к нам через форму обратной связи. Наши специалисты имеют большой опыт создания мобильных веб-сайтов и приложений для Android и iOS, поэтому мы с радостью проконсультируем вас.

 

Подать заявку

Нашим решениям доверяют

Новости

10.04.2017

Предлагаем консультации и разработку ПО для стартапов в сфере Интернета вещей.

17.03.2017

При заказе Персонального СМС Сервера - бесплатное подключение к базе данных, сайту или Excel-таблице! 

02.03.2017

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

27.01.2017

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

23.09.2016

Предоставляем услуги разработки кастомной прошивки Android: замену загрузочного логотипа и анимации, изменение дизайна системных приложений, установку "неудаляемых" приложений.