Блог Дмитрия Волотко Подпишись на обновления!

Делаем мобильную версию блога очень быстро и легко

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


Начнём с того, как я хотел поступить:

      Есть несколько очень мобильных (читай лёгких) тем под WP, есть плагины, которые позволяют переключать тему на «мобильную».

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

      Написать простенький скрипт, который будет дёргать из БД всё что мне нужно.

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

      Не волноваться на эту тему, и попросту предложить читателям читать меня через RSS, либо через Google.

      Это банально некрасиво, так ведь?

Если первые два способа требуют много времени, то третий просто ужасен и он по умолчанию даже не обсуждается, так как я люблю своих читателей :)

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

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

Что же умеет делать сервис, о котором я вам рассказываю? Очень много, просто очень много. Я пройдусь по пунктам меню. Которые меня заинтересовали, и кратко их опишу. Остальное вы запросто посмотрите сами.

Custom Domain
Вы можете использовать мобильную версию вашего блога на отдельном домене, просто поиграв с CNAME в DNS настройках. Правда это занимает, почему-то, 48 часов. Когда-нибудь я обязательно сделаю так, а сейчас мне лениво выкидывать 770 рублей в год на absolvo.mobi. Или где-то это можно “оформить” дешевле?


Design Your Mobile Site

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

Custom Logo
Если у вас есть логотип, то используйте его, ограничения до 500кб на закачиваемую картинку. Я обошёлся, хотя логотип у меня есть – фавиконка в большом размере – найти бы её теперь только.


Editing Homepage

Можно на главной странице оставить ваш текст, к примеру с контактами или описанием. А можно и на всех страницах — это делается выставлением галочки Show on every page?

Add an RSS Feed

Дело в том, что этот сервис, помимо прямого назначения, можно юзать как мобильную читалку RSS лент. Добавляйте их, редактируйте и конечно же, читайте. Я пока не пробывал, но Хабр, пару блогов и новостная линейка уже забита – в понедельник, по пути на работу, проверим.

Comment Widget
Если включить эту опцию, то комментарии будут оставляться на площадке сервиса, а к вам в блог будут приходить трекбеки, если ваш блог умеет работать с ними (WP умеет, к примеру).


Click to Call Link

Очень удобная опция — нажал-позвонил. В топе странице появляется ссылка на «позвонить хозяину», текст, разумеется, вы можете указать сами. Правда я не уверен, что она работает с не WM и Apple телефонами, хотя должно всё работать, по сути.


Automatic Redirect

На мой взгляд спорная опция. Вам выдаётся код, который вы внедряете на свой блог (точнее в header) и при обращении на какую-либо страницу с мобильного телефона (проверяется HTTP_USER_AGENT) идёт редирект на мобильную версию блога.

Visitor Count Chicklet
Счётчик посещений мобильной версии блога. Внешне — копия feedburner’a — висит у меня в статистике, на индекс решил не выносить. Хвастать, надеюсь пока, нечем :)

Mobile Badge
Кнопки сервиса. Не очень много и все не очень симпатичные.

QR Code
К сожалению, для нашей страны пока не очень актуально. Хотя задумываюсь себе майку с ним отпечатать. :) А вдруг девчонки? ©

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

Monetize
На мобильной версии можно и подзаработать, к примеру на Google AdSense или на AdMob (я уже догадываюсь, что будет пользоватся в Рунете большей популярностью).

iPhone Settings
Можете подготовить свою версию персонально для iPhone. На самом iPhone выглядит довольно вкусно :) Главное, должны быть картинки в самом тексте – так будет выглядеть ещё лучше.

Site Demographics
Если вы решили подзаработать на мобильной версии блога, то укажите вашу целевую аудиторию — помогите самому себе заработать деньги. Откуда вы её узнаете, как это понятно, сервису не интересно.

И последнее, не считая настройки аккаунта и прочих самых обыкновенных разделов — это превью – absolvo.mofuse.mobi/ – это превью моего блога — мне кажется оно вполне годится для работы с ним.

Хотя сервис и американский, но проблем с русским языком нет никаких, но интерфейс весь англоязычный.

Чуть не забыл довольно важную деталь — на вашем блоге, или сайте, должен быть RSS поток. Именно с ним работает этот сервис. Чуть не забыл дать вам ссылку на этот сервис – mofuse.com.

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

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

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

Так же можно почитать:



# 8 November 2008 в 3:21

Социальная сеть для блоггеров sloger.net

Делаем мобильную версию блога очень быстро и легко…

Всем уже давно понятно, что от мобильников никуда не деться, и как следствие, никуда не деться от того, что ваш блог будут читать с экрана м…

# 8 November 2008 в 4:04

showblogs.ru

Делаем мобильную версию блога очень быстро и легко…

Всем уже давно понятно, что от мобильников никуда не деться, и как следствие, никуда не деться от того, что ваш блог будут читать с экрана м…

# 8 November 2008 в 4:38

Сергей Блогов

Интересный сервис, завел уже себе мобильную версию для блога :)
Небольшая поправка по домену, не обязательно платить 770 р. за отдельный домен, хотя бы потому что его можно зарегить в другой зоне, например .ком, мало того, как я понял, можно сделать на поддомене, например mobi.domain.ru, помойму это даже лучше чем отдельный домен.

# 8 November 2008 в 5:14

Мобильный блог » Делаем мобильную версию блога очень быстро и легко

[...] Более подробно можно ознакомиться по этой ссылке [...]

# 8 November 2008 в 7:03

Делаем мобильную версию блога очень быстро и легко | News.Virtual-Lab.Ru

[...] Далее… (Еще не оценили)  Загрузка … [...]

# 8 November 2008 в 10:00

vvsh

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

# 8 November 2008 в 11:26

Сергей М.

Есть вообще два варианта – CSS под мобильные устройства (куча лишнего хтмл, чтобы не загромождал экран, можно и в дисплей:ноне, но это – загружать лишний код) и отдельный домен. Моби, конечно, регистрить совсем не надо – проще взять поддомен m.absolvo.ru или pda.absolvo.ru, например. И для айФона легко сделать отдельный, а eeePC и прочие субноуты вообще и обычную скушают.

А в этой мобильной версии комментариев к записи нет, к сожалению.

# 8 November 2008 в 11:50

Волотко Дмитрий

@Сергей Блогов, вы правы, может домен третьего уровня это и решение.

# 8 November 2008 в 11:50

Волотко Дмитрий

@vvsh, я блог мог написать – лень и недостаток времени, тут ничего не поделать.

# 8 November 2008 в 11:53

Волотко Дмитрий

@Сергей М., да, можно стилями – но это ещё больше кода, чем в варианта один, в самом начале поста :)
А комментарии можно и оставить и почитать – к примеру комментарии этого поста тут.

# 8 November 2008 в 12:08

Сергей М.

Хм, комментарии не заметил.

Код, кстати, тоже не сильно увеличится – достаточно в линках, подключающих CSS добавлять медиа-тип (media=”"). Хотя можно вообще и прямо в CSS делать – но это действительно увеличит код.

Для мобил и карманников – это Handheld.

С айФоном тоже решение вроде есть – либо специальный iPhoneOrientation, либо еще проще:

link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”css/iphone.css”

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

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

# 8 November 2008 в 12:11

Волотко Дмитрий

@Сергей М., по поводу only screen and (max-device-width: 480px) не знал, пасиба :)
Смотри, у тебя на блоге, если рулить только стилями, что ты будешь делать с баннерами ротирующимися?

# 8 November 2008 в 12:18

Сергей М.

display:none :). Или смещу их для айфона в самый низ.

Но я, как всегда, скажу – все нужно к месту. Скажем, для моего бложека проще написать мобильную версию (или воспользоваться твоим вариантом). А для блогуна, да и для твоего блога (если подужать код) – проще воспользоваться дополнительным CSS.

Впрочем, мне не до мобильной версии – я наконец добрался до reset.css. Чувствую себя невеждой :)

# 8 November 2008 в 12:23

Волотко Дмитрий

@Сергей М., display:none – это лишний трафик на картинки, которые даже не покажутся пользователю :)

# 8 November 2008 в 12:27

Сергей М.

Ну, это уже кривость поисковиков. В случае, если большинство картинок оформления используются в CSS как background, то – уже экономия, которая покроет эти картинки. Да и фиг с ним, с чужим трафиком :)

# 8 November 2008 в 12:35

Сергей М.

тьфу, браузеров, конечно же. Хотя и по стандартам – а, вдруг, включат js’ом.

# 8 November 2008 в 12:44

vvsh

Тупой сервис, у меня ник vvsh, а я не могу ввести мение 6 символов.

# 8 November 2008 в 13:03

Волотко Дмитрий

@Сергей М., чужой трафик – это важно :)

# 8 November 2008 в 13:03

Волотко Дмитрий

@vvsh, меня это тоже удивило и раздосадовало.

# 8 November 2008 в 13:11

vvsh

Придется создать vvsh-ru, дим создай плиз поддомен pda

# 8 November 2008 в 13:57

vvsh

Да уж, не очень нравиться мне он…
p.s. Дим, я те послал письмо на почту.

# 8 November 2008 в 21:27

Волотко Дмитрий

@vvsh, не дам.

# 9 November 2008 в 23:57

Блог заядлого интЕрнетчика ™ » Blog Archive » Мобильные браузеры

[...] он рассмотрел способы, которые позволяют сделать мобильную версию блога. Надо сказать, что тема эта очень актуальная. …И [...]

# 10 November 2008 в 8:44

Alexx

Мне понравилось, хорошая статья. Вопрос – а для обычных сайтов (у которых есть RSS) тоже можно что-то подобное сделать, или там все сложенее?

# 10 November 2008 в 8:48

Волотко Дмитрий

@Alexx, если есть RSS – то полностью аналогично! Только, к примеру, Хабр читать неудобно, куски кода не выделяются – и из них получается каша.

# 10 November 2008 в 9:06

Alexx

Ясно… Но там же кроме RSS есть и обычный контент (статический) с ним все нормально будет?

# 10 November 2008 в 9:09

invest

за мобильниками будущее, так что надо пообдумывать о будущем та блогов.

# 10 November 2008 в 9:14

Волотко Дмитрий

@Alexx, нельзя однозначно ответить. Попробуйте, в самом начале можно просто превью посмотреть, без регистрации.

# 10 November 2008 в 12:09

Рыболов

На одном сайте года 1,5 назад сделал мобильную версию форума – по началу практически никто не пользовался (3-5 человек в день). На днях глянул статистику – пользуется более 40 человек в сутки! Я думаю скоро эта цифра заметно вырастет.

# 10 November 2008 в 12:26

Волотко Дмитрий

@Рыболов, здорово! Надеюсь мой счётчик будет так же расти! :)

# 10 November 2008 в 22:43

Волотко Дмитрий

@Августа, и с удобно клавиатурой :)

# 10 November 2008 в 22:44

Волотко Дмитрий

@Евгений, ну смотря какой тематики блог. Если нет кусков кода, видео с ютуба или кучи картинок – то вполне нормально )

# 10 November 2008 в 22:44

Волотко Дмитрий

@Владимир, всё верно :)

# 11 November 2008 в 14:30

Сергей М.

Во, копался в Хабре, нашел по теме статейку – http://habrahabr.ru/blogs/wordpress/37192/

# 11 November 2008 в 17:01

Волотко Дмитрий

@Сергей М., да, я читал эту заметку. она мне не шибко нравится, откровенно сказать.

# 11 November 2008 в 17:47

Денежный

Спасибо за сервис, попробую. Одновременно поумалось, что для чтения с мобильника и тексты должны быть короче, что-ли… :)

# 11 November 2008 в 17:58

Kykerman

что мобил версия – эт хорошо…… кому интересно, тот и с мобили смотреть блог будет…

# 11 November 2008 в 18:33

Волотко Дмитрий

@Денежный, необязательно короче, должно быть удобное форматирование для чтения :)

# 11 November 2008 в 18:34

Волотко Дмитрий

@Kykerman, ну в общем да :))

# 11 November 2008 в 22:19

Volk

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

# 12 November 2008 в 9:09

Алекс

Спасибо, попробую и для своего блога сделать.

# 12 November 2008 в 19:47

Волотко Дмитрий

@Volk, а ссылку потом киньте – посмотрим как это выглядит :)

# 12 November 2008 в 19:47

Волотко Дмитрий

@Алекс, пожалуйста!

# 12 November 2008 в 20:54

AlexShop

А можно сделать в мобильной версии только анонсы, а потом посетитель если его заинтересует тема “придет по нормальному” ведь как ни крути монетизация в обычном инете интересней (:

# 12 November 2008 в 22:57

Волотко Дмитрий

@AlexShop, это издевательство над пользователем – может он физически не сможет открыть нормальную страницу?

# 13 November 2008 в 14:59

bowmen

Мне кажеться создание подобных вариантов не очень перспективно. Хотя Для своего сайта я бы сделал.

# 13 November 2008 в 20:26

Волотко Дмитрий

@bowmen, неперспективно отводить несколько часов на разработку такой версии, а потратить 15 ми нут и забыть – это вполне нормально.

# 16 November 2008 в 18:08

Jacob

Как по мне, то с мобильника удобнее всего в RSS читать

# 18 November 2008 в 1:00

Волотко Дмитрий

@Jacob, тоже имеет право на жизнь!

# 18 November 2008 в 1:01

Волотко Дмитрий

@Арнольд Мачо, я на это надеюсь!

# 18 November 2008 в 1:01

Волотко Дмитрий

@d1omax, я вообще только один сервис рассматривал ))

# 18 November 2008 в 1:01

Волотко Дмитрий

@shred, спасибо )))

# 21 November 2008 в 20:06

Мобильник

Как раз неделю назад думал как сделать для своего блога мобильную версию, а тут такой ползеный обзор, спасибо! Буду пробовать, внес в закладки.

# 22 November 2008 в 11:21

xsid

А не проще ли сделать чтото типа шаблона для мобильников, по типу, как это сделано для PDA?(я имею ввиду плагин wp-pda)

# 22 November 2008 в 20:28

Волотко Дмитрий

@xsid, а если не WP?

# 25 November 2008 в 23:50

Mauzer

Я так и не понял, зачем QR Code?
И это самое, адсенс нормально относится к рекламе на мобильных версиях? А то там сложно вообще рекламу от просто ссылки отличить, подозреваю что ЦТР слишком высокий может быть…

# 25 November 2008 в 23:56

Волотко Дмитрий

@Mauzer, как адсенс относится я не знаю, к сожалению :)
QR – распечатали на майку, вас сфоткали и уже читаю ваш блог с мобильника через Оперу, дома синхронизировали. Только это за бугром – у нас не аллё, естественно.

# 4 December 2008 в 10:24

Юляша

Я бы не сказала, что создать мобильную версию очень просто. С певого раза не получилось.

# 5 December 2008 в 20:10

DeVicer

Классно! Думаю, что обязательно надо делать мобильную версию. По крайней мере – не помешает. Спасибо!

# 12 December 2008 в 14:52

Дмитрий

Спасибо за пост, надо себе тоже так сделать.

# 25 December 2008 в 19:46

Влад

Ну мобильная версия эт хорошо, но это не главное, тем более тратить время( , а вообще скоро наверное и себе склепаю на второй блог) Так что сенк за пост)))

# 30 December 2008 в 20:20

Capable

Не понимаю, а почему бы не поставить стандартный WP плагин для мобил?

# 13 January 2009 в 1:08

Блогер

спасибо, класс, ща и себе сделаю!

# 22 January 2009 в 17:04

BG

Мобильники наступают! Спасибо за ссылку и особенно за разъяснения, ибо английский далеко не родной..

# 31 January 2009 в 3:46

Xag

Кстати есть плагин для WordPress который автоматом делает PDA версию.
Вот если бы этими PDA можно было нормально пользоваться – вот скажите мне когда в нашей Атсталой стране будет 3G (не только в пределах МКАДА).

# 31 January 2009 в 16:16

Дарья

У меня времени нет на создание подобных версий своего блога, но идея хорошая, буду иметь в виду.

# 18 March 2009 в 0:33

Dofollow

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

# 5 April 2009 в 21:59

chatoff

Интересно мне очень, сам автор-то читает комментарии к этому сообщению. Или мы тут сами для себя пишем?

# 18 June 2009 в 0:44

ephoto

Спасибо за рекомендованный сервис. Иногда хочется быстро показать свой блог, и мобильная версия очень будет кстати. На iPhone действительно красиво выглядит.

# 14 May 2010 в 17:32

Romashkin

А вот это очень интересная тема для вордпресса. Мобильный траф – тоже траф…

# 6 November 2010 в 11:39

Vladowner

Сейчас активно развивается рынок коммуникаторов и смартфонов с большими дисплеями, на которых просмотр обычных версий сайта довольно адекватен.



* Должны быть заполнены.
Из-за дикого спама, и нежелания ставить капчу оставлять ссылку у комментария вообще нельзя. Точно так же нельзя оставлять ссылки в теле комментария.