Компьютерликбез теперь Адаптивный!

Свершилось, Друзья!

Наконец-то!

Со второй попытки удалось реализовать качественную мобильную версию Компьютерликбеза!

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

Кто не видел, так и быть, покажу один из скриншотов:

Классно, правда?)))

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

Впрочем, я не буду сегодня распространяться об актуальности мобильной версии, тем более что я об этом уже говорил вот в этой статье. Кстати, прочитав ее, вы также узнаете о том, что первую попытку создания мобильной версии я уже предпринимал, пытаясь «отделаться» бесплатным плагином для движка, но этот вариант мне не понравился. А раз не понравился мне, то естественно не понравится и Вам, Уважаемый Читатель, правда?

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

Отдельная мобильная версия (мобильный сайт)

Во-первых, при этом варианте нужно отрисовывать новый (легкий, урезанный и упрощенный) дизайн самого сайта.

Во-вторых, «с нуля» верстать мобильный сайт.

В-третьих, как правило, такие версии устанавливаются на поддомены или субдомены третьего уровня (наподобие бесплатных блогплатформ) и имеют приставку типа: m.computerlikbez.ru или mobile.computerlikbez.ru. О доменах третьего уровня я рассказывал здесь.

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

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

Четвертый недостаток «вытекает» из третьего – поддомен или субдомен. Видите, что название сайта другое?

Отлично!

Недостатки мобильного сайта

Те, кто сам занимается SEO-оптимизацией и продвижением своих проектов сразу поймут, что:

— Нужно ставить редиректы в файле .htaccess, прописывая каждую мобильную операционную систему и мобильный браузер;

— Вопрос, который для меня до сих пор остается открытым (может быть Вы подскажете ответ на него) – как нужно продвигать сайт с основным доменом и поддоменом? Понятно, что редиректы будут работать, но вот как это скажется на внешней ссылочной массе?

Представьте, что на Ваш поддомен типа m. кто-то поставил ссылку на «жирном» и трастовом ресурсе – куда будет передаваться и распределяться вес и траст? И еще – как быть с дублями?

Спасибо Саше Борисову, обратил внимание на еще один момент – когда десктопный (с компьютера) пользователь переходит по подобной ссылке с другого сайта, вполне возможно, что он увидит, как раз эту урезанную мобильную версию сайта. А это не есть хорошо. Подробнее об этой штуке, на примере, чуть ниже…

— Ограничения (не всегда и не везде является недостатком) – когда создается отдельная мобильная версия, то как я говорил, ее делают урезанной и упрощенной, убирают какие-то элементы, скрывают какие-то области и так далее.

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

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

Преимущества мобильного сайта

Такое ощущение, что я в пух и прах «разнес» отдельный мобильный сайт))) Это потому что у меня другой вариант))). Шутка, конечно. Есть у мобильного сайта и свои серьезные и важные преимущества:

• Легкость редактирования – когда мы вносим какие-то изменения на мобильном сайте, то они никак не отражаются на основной версии.

Почему это преимущество, расскажу чуть ниже…

• Удобство для читателя, посетителя, пользователя. Опять же, мобильный сайт значительно упрощен, поэтому пользователю будет проще на нем ориентироваться.

• Скорость загрузки (пожалуй, один из самых ключевых и важнейших плюсов) – мобильные сайты, в большинстве своем, буквально «летают». Это важно для пользователей, у которых медленный Интернет (GPRS или слабый 3G).

• Выбор (не особо, может быть, и важное, но достоинство) – на мобильном сайте, обычно, можно переключиться на основную версию.

Это был вариант с отдельным мобильным сайтом. Теперь поговорим о такой штуке как Адаптивный Дизайн, который, собственно и реализован на Компьютерликбезе.

Адаптивный Дизайн

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

Если Вы сейчас читаете эту статью с компьютера, то тоже можете увидеть работу Адаптива. Сверните окно браузера, нажав на квадратик, попробуйте ухватить правую сторону окна браузера и поперемещайте вправо-влево.

Ну как? Получается?)))

Преимущества Адаптива

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

А вот так на мобильных телефонах:

Один домен – не нужны редиректы, не возникает вопросов по продвижению и внешним ссылкам (двигаем как двигали и не заморачиваемся). Сюда же можно отнести простоту запоминаемости самого домена – без всяких m. и mobile.

Удобство реализации (относится скорее к разработчикам-программистам) – не нужно писать код «с нуля» и верстать с нового дизайна, что значительно упрощает и удешевляет работу программиста. А это уже значит, что не нужно заказывать новый дизайн и ограничиться одной лишь версткой.

Это были достоинства Адаптива, теперь «разнесем» его недостатки, потому, как и таковые имеются. Причем довольно существенные.

Недостатки Адаптива

• Загрузка. Да, Друзья, Адаптивы «тяжелые», потому как это почти полноценные версии десктопных сайтов.

• Даже не знаю, как назвать… «Тупиковость», что ли? Дело в том, что когда у нас есть отдельный мобильный сайт и нам в нем что-то не нравится, то мы его можем смело отключить. С Адаптивом этот фокус не пройдет. Если сама по себе верстка неудобная, то латать тут что-то бесполезно, проще идти делать новый дизайн и заново его верстать.

• Разные задачи. Как я говорил выше, мобильные пользователи отличаются от десктопных. И если на Адаптиве трудное юзабилити (удобство и понятность для пользователя), то тут тоже ничего не поделаешь – пользователи будут уходить. На мобильном же сайте все можно поправить, не касаясь основной версии.

RESS — Responsive Web Design и Server Side Components

Третья, так скажем, гибридная версия сочетает в себе положительные моменты и Адаптива и мобильного сайта.

Как так получается?

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

Чтобы Вам было проще понять суть этого варианта, скажу так: пользователь Android будет видеть одну версию, пользователь iOS — другую, пользователь Windows Phone – третью, а десктопы вообще четвертую.

Но это уже, как говорится, совершенно другой уровень…

Мобильное Приложение

Ну и четвертая вещь, которую стоит упомянуть в сегодняшней статье – это Приложение. Оно, конечно, может быть, и не относится к мобильным версиям сайтов…

Хотя у соц.сетей ведь есть свои приложения, правда? А соц.сети – это тоже сайты.

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

Вот вроде бы и все, Друзья, что я хотел Вам сегодня рассказать…

Ах, да…

Так почему же я выбрал Адаптив?

Исходя из всего вышеизложенного, перед тем как заказывать мобильную версию, я сделал такие выводы:

• Приложение мне не нужно (пока что). У меня ведь контентный проект. То есть сайт познавательной и новостной направленности. Здесь можно что-то почитать, посмотреть какое-то видео, решить ту или иную компьютерную проблему. Никаких, особо «тяжелых» действий (я имею ввиду калькуляторы цен как у магазинов, какие-то он-лайн услуги) нет.

Все действия – это комментирование, подписка на рассылку, «гуляние» по сайту являются простыми.

• Вариант №3 (RESS), который я назвал «гибридом» мне тоже не нужен. Пусть все пользователи видят одинаковый контент как есть. Я не магазин, которому важны маркетинговые исследования по различным User-Agent’ам и все что мне нужно я увижу в статистике, прежде всего в вебвизоре и карте кликов Яндекс Метрики.

• Мобильный сайт – вещь хорошая. Но я так и не смог более — менее внятно ответить, прежде всего себе, на вопросы по SEO и продвижению. Да, и как я говорил выше, о том, что на десктопах может вылазить мобильный сайт, покажу Вам как это выглядит. Например, если я перехожу по ссылке, из той же Яндекс Метрики, такого вида m.ok.ru/kompyuterlikbez, то увижу вот такую штуку

Это, по сути, и есть мобильная версия Одноклассников.

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

• Пообщался с ребятами – программистами как в онлайне, так и в оффлайне на предмет того, что же лучше: мобильный сайт или Адаптив? Большинство из них высказалось в пользу Адаптива.

Именно эти четыре довода и привели меня к выбору Адаптива.

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

На сегодня все, Друзья. А вы что думаете об Адаптивном Дизайне? Ну и поздравляю Вас с Первым днем Весны! Ура!