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

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

Решить эту проблему поможет создание мобильной версии сайта — с её помощью ресурс станет более удобным. Зачем нужна мобильная версия сайта и чему нужно уделить внимание при её разработке?

Зачем нужна мобильная версия сайта?

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

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

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