Разработка мобильной версии сайта

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

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

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

mobile-divide

Для начала необходимо объяснить определённые термины, чтобы у вас не возникло проблем с пониманием изложенного в статье:

Адаптивный дизайн — это специальный дизайн сайтов, который обеспечивает корректное отображение сайта на различных устройствах, и динамически подстраивающийся под заданные размеры окна браузера. Такой дизайн имеет специальную вёрстку, благодаря которой сайт будет корректно отображаться на различных размерах экрана. У такого дизайна вес сохраняется таким же большим, как и у оригинала, но и функционал и контент будет таким же как у оригинала.

Мобильная версия сайта – это полноценный проект, со специальным дизайном и оптимизированным контентом. Задача дизайнера перенести важнейшие принципы вашей идеи сайта на небольшой экран и всего одной колонки. Имеют сокращённый контент, с удалением второстепенных блоков. Предполагается полное изменение структуры и функционала, оставляя лишь стилистическое оформление и частично элементы с содержанием, для того чтобы пользователь знал, что находится на том же сайте.c0fe571a3d9354bd4fc4d4a4362c84b2

 Две основные причины, почему необходимо иметь мобильную версию сайта или адаптивный дизайн:

1. Неадаптированные под мобильные устройства сайты с 2015 года не попадают в топы Яндекс и Google. Стоит отметить, что это только при поиске с мобильных устройств, на планшеты, десктопы, стационары не распространяется. Но это так же крайне серьёзно. Почему поисковые системы пошли на это? Ответ прост, причина в том, что полноценные версии некорректно отображаются на большинстве мобильных устройствах из-за скриптов с высоким потреблением ресурсов, из-за которых увеличится время загрузки.

2. Увеличивается количество людей, которые выходят в интернет с мобильных устройств. Следовательно, для посещаемости вашего сайта с мобильных устройств, необходимо иметь адаптированный сайт, на котором снижен трафик и более понятная информация без лишних деталей. Насчёт явных преимуществ от создания мобильной версии сайта – это увеличение мобильных пользователей сайта, а следовательно, увеличение трафика. Так же вы затронете прослойку людей с жизнью «на бегу», а это, как правило, самая финансово-активная прослойка населения.

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

1. Снижение графической составляющей, чтобы сделать сайт более лёгким;

2. Упрощённый визуальный доступ к элементам навигации, для удобства использования с мобильных устройств с маленьким экраном;

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

4. Оптимизировать кнопки и ссылки под размер экранов мобильных устройств, это необходимо из-за низкой точности у сенсорных устройств, попасть мышкой в элемент 10х10 пикселей не трудно, даже если рядом есть такие же, но это невыполнимый подвиг на сенсорном экране, так же нет функции «при наведении»;

5. Уменьшить «вес» сайта или же использовать технологии постепенной подгрузки страницы Lazy Load (ленивая загрузка). Ленивая загрузка подразумевает под собой подгрузку дополнительных данных по необходимости, а вместо них ставится маркер, указывающий, что данные есть, просто не подгружены. А лучше использовать оба варианта одновременно, в большинство мобильных устройств имеют довольно медленный интернет и на прожорливые сайты желание заходить резко уменьшается;

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

7. Оставлять пустые пространства просто необходимо, это даст более приятный вид сайту, а так же при переходе по ссылкам снизит вероятность случайно активировать не ту ссылку на сенсорном телефоне;

8. Автоматический переход на мобильную версию сайта, при заходе с мобильного устройства на полную версию. При этом важно добавить кнопку/ссылку переход на полную версию;

9. Экономьте место, вёрстка в одну колонку, не используйте чрезмерно широкие элементы, такие вещи как таблицы картинки флеш-элементы должны подстраиваться по ширине экрана (в идеале) или же быть самой распространённой ширины мобильных устройств.

T_handЕсли вы ещё только задумываетесь о создании вашего сайта в сети интернет, то более разумно будет выбирать студии для разработки, которые сразу создают адаптивные сайты. Такой выбор позволит вам сократить расходы на этом этапе. Если же вы рассчитываете, что большая часть вашей аудитории будет с мобильных устройств, то всё-таки будет лучше создать отдельно мобильную версию с перенаправлением с главного сайта. Делать так будет дороже, что бесспорно, но это позволит более точно регулировать контент на мобильной версии сайта, отсекая не нужные части с полной версии.

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