Бывало ли так, что вы открывали какие-то сайты на смартфоне или планшете? Если у вас есть какое-нибудь мобильное устройство, то, скорее всего вы уже замечали, что те сайты, которые замечательно смотрятся на обычном экране настольного компьютера или ноутбука, бывает совершенно невозможно просматривать на маленьком экране смартфона. Мало того, что сайт долго загружается, для его просмотра приходится постоянно приближать и передвигать содержимое, что очень неудобно. Для того, чтобы решить эту проблему, есть два разных подхода, о которых и пойдет речь в данной статье. Это мобильные версии существующих сайтов, или использование так называемой адаптивной верстки.
Сейчас, когда мобильные устройства становятся обычным делом, перед владельцами сайтов остро встает необходимость адаптации своих веб-ресурсов для просмотра на экране мобильных телефонов, планшетов и прочих высокотехнологичных гаджетов. Если этого не сделать, то, разумеется, ничего страшного не произойдет. Просто посетители сайта, которые пытаются открыть его на своем планшете и заметив, в каком виде он начинает открываться, скорее всего покинут ваш сайт и продолжат поиски нужной информации на других ресурсах.
Проблема заключается лишь в том, что чем дальше, тем больше людей просматривают сайты именно с мобильных устройств. Это ведь очень удобно: сидишь, например, в метро, или в очереди на прием к врачу, или на скучной лекции в институте, и чтобы как-то скоротать время пролистываешь страницу за страницей в интернете на экране своего планшета.
Естественно, задерживаешься на тех страницах, где читать удобнее. А удобнее там, где не надо постоянно увеличивать масштаб, чтобы разглядеть мелкие картинки. Одним словом мобильные сайты в данном случае имеют гораздо больше шансов на успех, чем обычные.
Если посмотреть в отчеты системы Google Adsense? которая позволяет зарабатывать на своем сайте за счет размещения контекстной рекламы, то примерно 20% всех посетителей зашли на мои сайты и кликнули по рекламе именно с мобильных устройств:
Таким образом, если бы я просто отмахнулся от проблемы, то по меньшей мере недобрал бы 20% заработка на сайтах. Но самое интересное, что данное соотношение постоянно увеличивается именно в сторону мобильных устройств. То есть, чем дольше я бы тянул резину с адаптацией своих сайтов, тем больше денег я терял бы. Со временем я начал бы недополучать 30% заработка, затем 40%. Поговаривают, что в не таком уж далеком будущем больше половины посетителей будут приходить на сайты именно с мобильных устройств.
Так что пока мои конкуренты раздумывают как решить эту проблему (а некоторые даже вообще не знают, что проблема в принципе существует), я изучил варианты ее решения и готов поделиться своими выводами со всеми, кто не хочет дожидаться, пока его обойдут более смышленые коллеги.
Вариант А. Оставить все как есть и не заморачиваться
Это отличное решение для тех, кто имеет сайт "для галочки". Например, возьмем какую-нибудь школу или детский садик. Сейчас у них у всех обязательно должен быть свой сайт. То, как они порой выглядят, лучше не комментировать. Это типичные сайты для галочки, которые сделаны за ночь до очередной проверки силами какого-нибудь родителя или ученика старших классов. Вот полюбуйтесь:
Думаю, что этот сайт явно никто особо не смотрит. Думаю, что администратору и владельцу данного ресурса не стоит даже задумываться о том, чтобы позволить владельцам мобильных устройств комфортно просматривать содержимое. Думаю, его вообще мало кто смотрит.
Вариант Б. Мобильная версия сайта
Буквально неделю назад (апрель 2014) я поддался соблазну и купил специальный скрипт (программу), который может создать специальную облегченную мобильную версию сайта. Там может быть достаточно минималистское оформление, присутствовать определенный набор материалов, касающейся темы сайта, могут быть фотографии, даже небольшие таблицы и диаграммы. Имеется главное меню, через которое можно открыть любой материал на сайте. И самое интересное, на мобильном сайте есть специальная кнопка "позвонить", нажав на которую посетитель совершает телефонный звонок владельцу сайта чтобы задать интересующие вопросы лично. Ведь мобильные сайты в большинстве своем открывают на смартфонах, а это значит, что можно действительно сразу сделать телефонный звонок.
Посмотрите как выглядит обычный сайт и его мобильная версия:
На мобильном сайте, как видите, только основное, как бы выжимка из информации с основного сайта. Никаких украшений, мельтешений, анимации. Все исключительно по делу.
Создание мобильной версии сайта на купленной мной платформе - задача не для новичка. Хотя автор разработки говорит, что любой человек, знакомый с компьютером, вполне с этим справится, на деле очень неплохо, чтобы человек имел хотя бы базовые навыки сайтостроения, HTML-верстки, имел представление о взаимодействии с хостингом по FTP.
Правда, большая часть этой информации дается в видеоуроках, которые поставляются вместе с самим скриптом, однако, думаю, новичка ждет не один полный "снос" мобильного сайта и его повторное создание с самого начала. Более того, в процессе работы могут "выползти" проблемы, над которыми задумался сам автор скрипта после обращения к нему по горячей линии.
Надо сказать, что его консультации все же привели к тому, что мой мобильный сайт заработал и стал автоматически отображаться вместо основного, если он открывается с мобильного устройства. Отчасти проблемы были также вызваны тем, что я просматривал учебный курс не так внимательно как следовало бы, перепрыгивал через "понятные" фрагменты видеоуроков. В результате иногда приходилось возвращаться, поскольку нюансы существуют в любом деле.
Так или иначе в течение одного дня я действительно создал мобильную версию своего сайта с видеокурсами edu-nn.ru. Если вы хотите посмотреть на оригинал и его мобильную копию, можете открыть основной сайт по адресу http://edu-nn.ru и его мобильную версию по адресу http://m.edu-nn.ru . Выглядят они совершенно по разному, хотя можно было подобрать цвета так, чтобы была некоторая преемственность этих двух продуктов. Тем не менее, в мобильной версии сайта есть все то, что необходимо для того чтобы заинтересовать потенциального клиента и перенаправить его на уже обычный сайт, где можно просмотреть бесплатные уроки и оплатить понравившийся курс.
Достоинства мобильной версии сайта
Мобильные версии сайтов - безусловно отличное решение для захвата мобильного трафика. Чем больше народу купит себе планшеты и начнет использовать их для просмотра сайтов в интернете, тем большую важность приобретает мобильный сайт.
Он очень быстро загружается. Например, на моем планшете подключен доступ к интернету на самой низкой скорости (я специально сделал так, чтобы тестировать свои сайты). Но даже при этом мобильный сайт появляется на экране и готов к просмотру в считанные секунды.
Его удобно просматривать даже на маленьком экранчике телефона: размер шрифта подобран так, чтобы с чтением не было затруднений.
Мобильный сайт можно поместить на тот же хостинг, что и основной - специальный хостинг покупать не нужно.
Теоретически на мобильном сайте может быть все то же самое, что и на основном: текст, картинки, видео, диалоговые формы, формы оплаты и т.д. Практически картинки приходится сильно уменьшать, а видео может идти с перерывами, если скорость интернета на мобильном устройстве невелика.
Недостатки мобильной версии сайта
Все было бы хорошо, но есть тут и своя ложка дегтя.
Во-первых: создание мобильного сайта - это отдельная процедура, за которую приходится отдельно платить, если вы не занимаетесь им сами.
Во-вторых: если вы добавите на основной сайт какую-то новую информацию, то на мобильной версии она автоматически не отобразится. Придется выполнять специальное действие для того, чтобы добавить новость и в мобильную версию. Конечно, иногда игра стоит свеч, но любая дополнительная работа обычно очень напрягает.
В-третьих: в мобильных сайтах как правило не реализуется иерархическое меню. То есть, перечисление типов вашей продукции или услуг будет находится прямо в главном меню мобильного сайта. Если позиций много, то становится очень неудобно работать.
И наконец, при создании мобильной версии сайта придется обязательно пожертвовать чем-то из содержимого основного сайта, чтобы не перегрузить мобильный информацией. Нельзя сделать мобильный сайт, состоящий из 500 страниц. Это будет жутко неудобно, очень дорого в производстве и поддержке.
Вывод о мобильных версиях сайтов
Как видите, создание мобильной версии сайта не является панецеей для привлечения пользователей с планшетами и смартфонами. Это, пожалуй, хорошо сработает для небольших компаний, ориентированных на продажу какого-то нишевого продукта (например, только ортопедические матрацы или только изделия из меда) или такой же обособленной услуги (например, создание анатомических кресел для автомобилей или установка пластиковых окон).
Для крупных сайтов, содержащих множество категорий, расширенные описания продуктов и услуг, для новостных порталов, блогов мобильная версия сайта себя вряд ли оправдает. Здесь нужно что-то другое.
Вариант В. Адаптивная верстка сайтов
Эта тенденция появилась еще в 2012 году. Свое бурное развитие она переживала в 2013 и сейчас, когда за окном 2018 год, стала самой удачной альтернативой мобильным версиям сайтов, которые появились гораздо раньше.
Суть адаптивного сайта заключается в том, что за счет подстройки верстки страниц, сокрытия некоторых наиболее массивных в плане трафика элементов оформления сайт нормально отображается и на экране большого компьютера и на маленьком экране мобильного устройства. Чтобы посмотреть адаптивный дизайн сайта в действии, не нужно ходить куда-то очень далеко. Тот сайт, который вы сейчас читаете, тоже построен по принципу адаптивной верстки.
Проведите эксперимент: откройте главную страницу сайта на большом экране настольного компьютера, а потом сверните окно браузера, чтобы оно стало узким, как у мобильного телефона. Вы увидите, что в какой-то момент, когда ширина экрана стала недостаточной, верстка из трехколоночной превратилась в двух, а потом в одноколоночную. Получилась одна очень высокая колонка, ее еще называют "шахта", которую можно легко прокручивать на экране мобильного устройства, и в которой можно посмотреть все анонсы статей на главной странице.
При этом мистическим образом уменьшилась ширина картинок таким образом, чтобы они не "вылезали" в невидимую область, а вписывались в новую ширину колонок. А главное меню в верхней части сайта превратилось в кнопку, нажав на которую вы можете выбрать какой-либо раздел или конкретный материал.
Для того, чтобы сделать адаптивный сайт, не нужно никаких специальных программ. В моем случае он реализован на CMS Joomla 3 (бесплатно) и покупном адаптивном шаблоне JLV Versus ($49).
Достоинства адаптивной верстки сайта
Это один сайт, а не два разных (основной и мобильный). Достаточно внести в него какие-то изменения и они будут видны на всех устройствах. Вам не придется дважды выполнять работу по добавлению одной и той же новой статьи на два сайта.
Универсальность верстки, отсутствие привязки к какому-то конкретному разрешению экрана. Сайт автоматически подстраивается, чтобы занять всю ширину экрана мобильного устройства независимо от типа его ориентации (горизонтальной или вертикальной).
Полнофункциональный сайт на мобильном устройстве. На вашем основном сайте могут быть такие интерактивные элементы, как диалоговые и платежные формы, голосования, онлайн-тесты и т.д. Все это будет исправно работать на любом устройстве, на котором просматривается сайт.
Недостатки адаптивной верстки сайта
Большее время загрузки, чем у мобильной версии. Мобильная версия изначально создается для небольших экранов, отсюда достаточно компактные картинки, отсутствие излишеств в коде самого сайта. На обычных сайтах, включая и адаптивные, картинки довольно объемные, что сразу накладывает отпечаток на время загрузки сайта.
Интерфейс более приспособлен к управлению мышью, чем пальцем на экране. В мобильных сайтах изначально сделан упор на так называемый "пальцевый интерфейс". Все элементы управления достаточно крупные и стоят обособленно, чтобы посетитель случайно не ткнул не в ту кнопку.
В заключении хотелось бы упомянуть, что я старался не перегружать вас специальными техническими терминами, не вдавался в глубину нюансов разработки обоих вариантов. Моей целью был показ двух разных подходов к созданию мобильных сайтов, а также намек на то, что если у вас есть сайт, то вам очень скоро придется сделать нелегкий выбор, по какому пути пойти.
Совсем напоследок приглашаю вас к сотрудничеству по созданию и поддержке сайта вашей компании. Он будет удобным, современным и, конечно же, адаптивным. Теперь вы знаете, что это такое.
Телефон для связи 8 (831) 415-32-06, или Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра..
