Доброго времени суток всем друзьям и читателям – Sozdaiblog.ru!
В этой статье Вы узнаете, как сделать мобильную версию сайта.
Не так давно, я получил письмо от одного из своих читателей. В нём он писал, что ему очень нравится мой блог, он его постоянно читает, но с мобильных устройств осуществлять по нему навигацию не совсем удобно.
Конечно, дословно все его слова я цитировать не буду. Единственное, что дало мне пищу для ума, это последнее предложение:
— Денис, Вам срочно нужна мобильная версия сайта, чтобы не потерять старых и получить новых посетителей!
А ведь действительно, подумал я. Сколько же людей по всему миру используют мобильные средства связи для выхода в Интернет.
И как только я об этом подумал, то сразу решил, что не стоит тратить время на разные статистики. Тут и так всё очевидно. Нужно идти и делать мобильную версию сайта.
Единственное, меня тревожил вопрос, как лучше это сделать. Специально верстать отдельный сайт на поддомене чисто для мобильников, честно говоря, мне было лень. Да и все существующие решения в Интернете меня не впечатляли.
То, что я нашел, оказалось готовым решением от всемирной компании Google.
Оказывается, они уже давно позаботились об этом, разработав бесплатный генератор по созданию мобильных версий сайтов. С помощью этой системы Вы сгенерируете мобильную версию своего сайта минут за пять.
Классно, правда? Лично я в восторге от этого генератора!
Ладно, оставим все эмоции для комментариев, пришло время творить.
Мобильная версия сайта
Для создания мобильной версии сайта переходим по ссылке на сервис — Howtogomo.com.
Последнее время на сервисе наблюдаются изменения. Вот ещё одна ссылка на этот ресурс www.dudamobile.com.
Необходимо пройти регистрацию и приступить к описанным ниже действиям.
Они могут немного отличаться, но смысл тот же.
В специальном поле вписываем адрес своего сайта и нажимаем большую зелёную кнопку:
Далее откроется окно, где Вам на выбор будет предложено несколько вариантов расположения меню и цветовой гаммы мобильной версии Вашего сайта. Все изменения можно наблюдать в режиме реального времени, в окне визуального редактора похожего на мобильный телефон.
Сделав свой выбор, переходим к следующему шагу, нажав синюю кнопку «NEXT»:
Здесь Вы увидите 5 пунктов настроек. Если у Вас есть много свободного времени, то Вы досконально можете изучить каждый из них. Там особенного ничего нет. Изменение цвета шрифта, ссылок, заголовков и т. д. Всё, как в любом графическом редакторе доступно и понятно. Поэтому в отдельности описывать каждый пункт, смысла нет. Опять жмём на уже знакомую кнопку и переходим к дальнейшим действиям:
Во вновь открывшемся окне Вам нужно заполнить небольшую форму. Вписываем в неё свой действующий E-mail и два раза одинаковый пароль (любой). После этого нажимаем на синюю кнопку с надписью «SAVE MY SITE», что в переводе означает «СОХРАНИТЬ МОЙ САЙТ»:
Все настройки будут сохранены, а Вам предоставят ссылку для перенаправления посетителей на мобильную версию Вашего сайта. В принципе на этом этапе Вы можете сохранить полученную ссылку и самостоятельно настроить редирект (как сделать 301 редирект), но если Вы не умеете этого делать, то просто нажимайте на синюю кнопку и переходите к следующему пункту настроек:
Далее всё просто.
В открывшемся окне копируем специальный скрипт и вставляем его перед закрывающим тегом < / head> в файле header.php Вашей активной темы оформления.
Также Вы можете воспользоваться плагином (как установить плагин wordpress). Для этого внизу есть специальное выпадающее меню с инструкциями разных движков и хостингов:
Чтобы посмотреть, как Ваш сайт будет выглядеть на разных мобильных устройствах, достаточно вставить полученную ссылку в адресную строку своего браузера.
Для примера вот Вам моя – Мобильная версия сайта.
А Вы уже сделали мобильную версию своего сайта?
На сегодня это всё. До новых статей…
С уважением, Денис Черников!
- Ltv это простыми словами
- Чистый дисконтированный доход это простыми словами
-
Как отключить микроразметку JSON-структуры в Yoast SEO для WordPress
- Полный чеклист настроек SEO оптимизации в CMS WordPress
-
Роль CMS WordPress в создании корпоративного сайта
-
Ключевые этапы создания контента для блога
-
Бесплатные советы блоггерам новичкам!
-
Эффективная SEO-оптимизация контента на WordPress: стратегии и инструменты
- Портфолио это простыми словами
-
Форма для комментариев в WordPress с Неоновой подсветкой
Очень вовремя, давно искал вариант приемлемый. Спасибо.Просто и понятно.
Пожалуйста, Леонид! Способ действительно очень простой и доступный. Больше всего меня порадовало то, что вообще знания в HTML не нужны. Единственное вставка скрипта в конце, но это мелочи.
У меня стоит плагин, но он в опиании говорил, что только для нескольких видов телефонов. Хотя пока не жаловался никто. Значит, работал неплохо. Но если можно заменить плагин на скрипт — я только за всегда Спасибо!
Пожалуйста, Анастасия! Код всегда лучше плагина, тем более если код такой плёвый.
Леонид, извините пожалуйста, а как сделать наоборот, что бы сайт был не мобильной версией, а как на компьютере?
Добрый день Денис.Хорошая статья, мне понравилась.Конечно нужна мобильная версия для сайта,у меня установлен плагин «Реактивный ранец».Там много функций,статистика посещений хорошая и есть мобильная версия.Вы всё просто показываете,Спасибо.
Всегда пожалуйста, Степан! Я думал о применении плагина для создания мобильной версии сайта, но когда нашёл этот сервис то срезу желание использовать плагин отпало само собой.
Спасибо, Денис! Мне понравился этот бесплатный способ привлечения дополнительного трафика на сайт. Кроме того, это хороший вариант для участия в конкурсах, где требуется скорость получения новостей с блога.
Мой новый пост:6 секретов о женщинах, которые должен знать каждый мужчина + конкурс.
Пожалуйста, Геннадий! Пользуйтесь на здоровье. Кстати, Вы ссылку забыли поставить!
Дорогой Денис, спасибо большое тебе за такую новость! Я всё сделал, но увы ни как немогу найти этот закрывающий тег в файле index.php.
Поэтому установил плагин, но хотелось бы всё таки найти этот тег. Денис, а где именно искать этот файл, я их несколько нашёл у себя?!
Пожалуйста,Vadar! Ищите тег рядом со скриптом «InviteMaster.ru», а точнее на 3 строчки ниже. И отключите блокировку CTRL+U, а то хотел помочь пришлось жабу в браузере отключать чтобы тэг Ваш найти.
Дорогой друг, но ведь этот скрипт у меня находится в файле header.php а не в index.php
Извините, Vadar я немного заработался и в статье допустил ошибку. Сейчас всё исправлю!В действительности это файл «header.php»
Окей родной! Спасибо ещё раз за новость! Напоследок хотел бы ещё спросить, а посетители мобильного сайта уникальными считаются?
Конечно, Vadar! На то они и посетители.
Здорово! Благодарю ещё раз!
Не за что!
Ой, чуть не забыл) Нажимаю на все кнопки, чтобы поделится с друзьями!!!
Спасибо, это в тему!
Хороший удобный сервис,только бесплатная версия дается на год, пользуюсь уже с октября.Очень хорошо для коммерческих сайтов,блоги тоже можно монетизировать , блоками Adsends.
Про год не слышал, но даже если так, можно новый аккаунт открыть и вперёд.
В принципе — Да! На другой email.
Конечно, ни кто ведь это не запретил!
К стати, если не один сайт, их все тоже на разные emailЫ регистрировать надо, в одном аккауте бесплатные функции , н-р вставка кода Adsends,только для одного сайта.
Лучше на разные. Вы слишком далеко заглядываете Людмила. Пока у Вас не наберётся 300-500 уников, забудьте про Adsends и всё остальное.
Так для Adsends не важно сколько уников на сайте (берут и с 2.5 человеками )
Вы думаете я не знаю этого! Да им не важно, но если Вы хотите свой блог угробить, ставьте. Я больше ни кого предупреждать не буду.
Добрый вечер Денис.Прочитал вашу переписку с Vadarom,вот что мне пришло на ящик, куда нужно установить:
Что такое мобильный REDIRECT?
Это простой скрипт вы добавить на рабочий стол сайт, который может сказать, когда кто-то посещает с телефона и автоматически перенаправлять их на ваш мобильный дружественный сайт. Это очень проста в установке переадресации и воспользоваться всеми преимуществами нового мобильного сайта. Просто следуйте этим трем шагам, и вы все готово.
1Вход на сайт хостинг-провайдера (например, godaddy.com )
2Откройте свой сайт файл index.html и вставьте перенаправить код в тег
Здравствуйте, Степан! Так в статье чётко написано в хэдэр.
Это обычный редирект только на мобильную версию сайта.
Кстати, ссылка на Ваш сайт в комментариях не рабочая.
Денис, дорогой, извини что беспокою! Эт опят я) Понимаешь какое дело родной, вчера после того, как вставлял этот код в файл, вроде ничего не было, а шас она у меня в шапке видна! Как будет время, зайди пожалуйста на минутку, тама прям наверху код видна. Вроде она не показывалась вчера и весь день сегодня, а шас вот смотрю и вижу… Может этот код не срабатывает с какими то плагинами или тема не может поддержать? Может такое?
Vadar твоя беде не беда! Я тебя выручу! Ты код не правильный вставил, поэтому оголилась адресная строка!То есть его вообще нет, а стоит одна ссылка. Вы наверное подумали, что так и надо. Нет, нужно скрипт туда ставить, который в последнем шаге дают! Заново поставь и всё будет хоккей!
Вроде тэг тама((
Ещё раз мой коммент посмотрите!
Ничего не понимаю, у меня кроме этого кода ничего не показывается, может заново сделаю
Vadar, всё намного проще. Видимо Вы что-то не поняли и вместо скрипта вставили просто ссылку, которую на предпоследнем этапе дал сервис. Я сейчас просматриваю исходный код главной страницы Вашего сайта и вижу только одну ссылку, а должен быть скрипт, который даёт система на последнем этапе. Внимательней статью изучите, Вы просто видимо пропустили последний шаг.
Я сейчас картинку приклею в статью и Вы сразу всё поймёте!!!
Исправил, Спасибо.
Теперь всё хорошо! Пожалуйста.
Да там всё уже изменилось! не вчерашнее всё это! Вчера всё по другому было!
Что Вы имеете ввиду, Vadar? Что и где изменилось?
Ну в том сайте. Шас показывается два варианта, премиум и бесплатный. Когда выбираешь бесплатный, в шапке что пишется на английском всё время и его невозможно убрать.
Какой-то полтергейст! Я во сейчас ещё один сайт сделал мобильным, всё есть, всё на месте! Не понимаю, что там у Вас происходит!
Вроде и картинка эта тама есть, но вот скрипта никакого нет!
Увы, но у меня действительно чёрт знает что здеся показывает! Во первых, предлогают два вида, бесплатный и премиум. Премиум, как я понял 9 долларов в месяц с коротким ссылком. Ну а в конце, картинка есть(она всегда и была), но вот скрипта у меня не показывает и даже кнопки какой то нет, куда бы нажать, мож покажется. Ну да ладно Денис, оставим я уже замучил вас. Возьму пока плагин, а потом посмотрим.
P.S. Мне вот ток одно интересно, почему вчера эта ссылка и до сегоднящнего вечера кстати, которую я принял за тот код не показывалась, а шась вот выглянула, как месяц спустя месяц)
Кэш наверное не обновляли! Заведите новый почтовый ящик и проделайте заново всю процедуру, это точно поможет.
Денис,как вовремя я нашла ваш сайт, как раз думала над тем, чтобы сделать мобильную версию. Спасибо!
Пожалуйста, Марина! Приходите ещё!
Реально классная штука, а я собирался плагин ставить, который генерирует мобильную версию сайта.
Я тоже хотел плагином воспользоваться, но во время поиска наткнулся на этот сервис. Конечно есть люди которым не нравится, но это их дело. Пусть плагин ставят.
Спасибо за пост. Сделал быстро, давно замечал, что с мобильников и планшетников заходят на сайт. Но когда стала вылетать 404 ошибка на отсутствие картинок apple-touch-icon.png и apple-touch-icon-precomposed.png решил выяснить в чем проблема. Она касалась мобильных приложений. Сделав картинки, а, за одно, и настроил мобильное приложение сайта. Уже сегодня получил отчет за неделю количества посетителей и просмотров с мобильных приложений на e_mail. Советую всем, у кого есть трафик на сайт поставить мобильную версию, добавив данный плагин
Пожалуйста, Алексей! Мне тоже сегодня пришёл подобный отчёт и знаете, он меня порадовал.
Спасибо за статью Денис. Думал ставить мобильную версию сайта плагином. Пока не выбрал каким, а тут эта статья. Нужно обязательно попробовать. Посетители с мобильников у меня есть.
Пожалуйста, Василий! С мобильников последнее время много трафика идёт.
Денис, а где скрипт? Там идет переход на страницу загрузки плагина, скрипта никакого нет.
Василий! В заголовке написано «Temp eMail Script», где Вы там плагин нашли?
Ну, нее все в совершенстве владеют английским
Ну а про плагин Вы где тогда вычитали?))))
Про плагин я узнал когда перешел на последнюю страницу. Думал, что код там находится. Это потом, когда проверял почту, все понял.
Вон оно что! Теперь понятно.
Странно… Денис а у меня почему то скрипт вообще не показывается в 4 шаге и выпадающего меню никакого нет… Есть только предложение установить плагин но я не хочу плагин, хотел скриптом сделать.
В чем причина может быть не подскажешь? Правда я зарегался на том сайте, может в этом причина что я как зарегистрированый пользователь захожу?
Этого я знать не могу, Михаил! Если Вы всё сделали по инструкции, то должно быть всё так, как на слайдах в посте. В чём может быть причина отсутствия скрипта понятия не имею. Проверяйте правильность всех действий. Создайте новый почтовый ящик и укажите его в настройках при редактировании мобильной версии сайта.
Незнаю в чем дело но смена емайла не помогла… Скрипта опять небыло. Короче маяться не стал а тупо скопировал скрипт из присланного письма.
Вставил в хеад пхп- все работает.
Спасибо Денис за хорошую и познавательную статью и вообще за то, что ты есть))) !!!
Пожалуйста, Михаил! Хорошо, что у Вас всё получилось! Заходите, если что!
Выходит, не только у меня, а у многих она не показывалось((
Видимо Да! Но пока не ясно почему?
Пока нет.
Большое спасибо! Отличный сервис! Ни как не мог найти такой классный!
Пожалуйста, Никита! Он действительно на высоте!
У меня тоже на мобильном мой сайт выглядит как обычно. Проверял вчера и сегодня.
Спасибо за хороший пост.
Как раз занимался темой создания мобильной версии сайта.
Пожалуйста, Фёдор! Заходите!
Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is great, let alone the content!. Thanks For Your article about.
Please! Blog'm 1 year old! Come again!
Хороший сервис для сайтов. Тоже планировала создавать мобильную версию, но только для интернет-магазина. Нашла сервис http: //shopinpocket.com.ua/ по созданию мобильной версии сайта за 2 мин. Нужен только xml файл товаров. Сделала — все работает.
Уже не работает. Заходил туда
У меня работает!
Вот ссылка www. howtogomo.com/en-gb/d/ — найдите где можно БЕЗ денег сделать, я вам буду очень благодарен.
Андрей, я делал бесплатно и ещё половина Интернета. Пример я привёл, скрины дал. В комментах Вы читали, люди тоже делали. Поэтому что мне ещё там искать.
Ладно уж. Не первый год в нете, Денис, но там нет.
Нашел замену: wordpress.org/plugins/mobilepress/ — просто и удобно
Бывает, Андрей! Я не буду спорить, но у меня всё работает.
Перешла по ссылке и нигде не нашла нужной кнопочки, чтобы создать мобильный сайт. Есть возможность протестировать вид сайта с моб. телефона, а вот создать нет возможности.
Там сейчас всё изменилось, попробуйте зарегистрироваться на сайте и уже потом искать кнопку создания мобильной версии!
Не получилось ничего.
Пробовала еще ставить плагин WPTouch, но он почему то ничего не меняет, проверяла через мобильный телефон (Opera Mini).
Ну у меня же работает!
Видимо кто то плохим взглядом на сайт посмотрел:)
Спасибо за советы, очень много полезного нашла для себя.
Пожалуйста! Обращайтесь, если возникнут вопросы!
У вас возможно не стыковка с некоторыми плагинами, нужно проверить. Есть еще один — MobilePress — попробуйте его.
Ссылка на сервис не работает поправь
Добавил новую ссылку, пробуйте!
Денис, спасибо большое!!! Решила пролистать ваши старые посты и зашла глянуть, может в комментариях, кто поделился новой похожей ссылочкой А оказывается вы пост дополнили
Пожалуйста, Татьяна!
Да, дополнил. Возникло много вопросов по поводу этого сервиса и я решил разобраться и понять в чём там у них дело.
Здравствуйте, действительно сервис очень удобный и простой. У меня вопрос, а почему изображения не показывает на моей мобильной версии? С права при создании онлайн показывает изменения и мои изображения не отображаются в чем может быть проблема подскажи пожалуйста
Привет, Тимур!
На этот вопрос я не смогу Вам ответить, ведь это не мой сервис а Google.
А почему не отображаются страницы? или каждую страницу нужно по отдельности добавить?
Тимур, это нужно у Гугла спрашивать, они разработчики данного сервиса!
И еще почему не отображаются страницы сайта, помогите пожалуйста в чем мои просчеты как это все исправить?
лучше сделать не мобильную версию, а мобильное приложение для сайта. Вот хороший сервис: http: //www.nic.ru/dns/service/apps.html
Статья интересная, но поисковики не очень любят, когда посетителей перенаправляют с помощью 301 редиректа.
Плагин немного замедляет загрузку, но для поведенческих факторов он будет полезнее.
Поисковики не любят 301 редирект, если он перенаправляет на говносайты, а не на Ваш же сайт в мобильной версии!
Что-то не могу ничего разобраться — первая ссылка выводит на главную страницу Гугла, а вторая — периодически зависает, не дает никак пройти все этапы… То ли мой интернет «тупит», то ли антивирусник шалит… Не понятно, что сделать… Надо, наверное, завтра попробовать?..
Да вроде всё работало!
Интересно получилось. Кое-как я все-таки добилась того, чтобы сайт там «загрузился». Но сам скрипт мне не показался… Не было его и в письме от них… Написала им в техподдержку, мне ответили и прислали код… Сделала, как вы описывали — редирект нормальный.
Забавно, я тоже оказалась в числе тех, кто не увидел сразу скрипт на сайте…
Вот только меня немного смущает, что там (в мобильной версии) не все посты показываются на главной… То ли они не все ещё проиндексировались, то ли что…
В любом случае, спасибо вам, Денис. Для «чайников» вы бесконечно полезно и понятно пишете!
Пожалуйста, рад что у Вас всё получилось и Вы добились своего! Обращайтесь если что!
Здравствуйте, у меня тоже скрипта нет, подскажите, пожалуйста, как связаться с техподдержкой там? Я не могу её найти. Или может там скрипт универсальный, только ссылку с адресом своего сайта вставить и заработает?
Спасибо, уже не надо отвечать. Сама как то нашла, связалась, получила код, вставила и всё получилось!
Отлично, я рад!
Да Денис, так быстро прошел год, что и не заметил честно говоря. Стареем друг, стареем. Эт я вот к чему дорогой. Прикинь, мне сегодня пришло письмо, мол сегодня если не обновишься, то все, хана тебе А там за год почти 100 баксов просят!
Вот и я зашел снова к тебе на эту статью и узнать что и как. Оказывается можно заново все регистрировать на другую почту, а я эт момент пропустил. Спасибо еще раз!
Да Вадар, годы летят, их даже не замечаешь! Единственное, что заметно, так это прибавление седых волос на голове! Кстати, мне ещё не приходило такое письмо!
Как пользователь терпеть не могу мобильные сайты. Ужасно бесит, когда автоматически перенаправляет. Знакомые со мной солидарны.
Добрый день, Денис! Прочла Вашу статью, сделала все как здесь написано. Одно не могу понять, не нашла на сайте скрипта, который нужно вставить в шаблон. Возможно Вы сможете мне подсказать. Спасибо!
Там сейчас всё поменялось, нужно искать! Сам сейчас с ходу не скажу!
Денис, мне понравился Ваш сайт. Я только начинаю вести свой блог. Многое не понимаю. У меня такой вопрос: как удалить счетчик liveinternet с блога. Теперь не могу найти код. Значок счетчика есть на каждой странице блога. liveinternet перестал отвечать на запрос, я не могу узнать статистику. Возможно, Вы мне подскажите, что-нибудь полезное. Спасибо.
Привет, Анна! Счётчик все устанавливают в подвал блога, за него отвечает файл темы footer.php, найдите там код счётчика и удалите!
Добрый день, Денис! Подскажите, пожалуйста, как узнать код счетчика, где он может быть прописан? Спасибо, успеха Вам.
Здравствуйте, Анна! Обычно он в подвале сайта!
http: //mobile.dudamobile.com/site/pokemoney
нужно что бы с телефона вводили m.pokemoney.ru и переходилось на мобильную версию,как такое провернуть?
Ставьте редиректы!
Добрый день, Денис. Интересно, но картинка счетчика, каким то образом пропала со страниц сайта. Теперь вопрос другой. Нужно вставить код redirect в index.html, Где найти этот файл? Я уже все излазила, не могу найти. Подскажите, пожалуйста, спасибо.
Да, файл ищу на хостинге. Но там есть только index.рhp, но нет никаких index.html.Где его искать? Где он находится?
Практически все редиректы прописываются в Htaccess, который находится в корневой папке! Он и будет index.рhp, у нас же блоги динамические, а не статика!
Привет, Денис. Давно у тебя не был… Кстати я пришел на эту статью из картинок Гугла. Так что трафик с картинок тоже бывает))) За решение по мобильной версии большое спасибо, а то я все никак не мог «подружить» плагин WPTouch со старыми мобильными ОС типа Simbyan
Привет, Руслан! Действительно, давненько не наведывался!))) Рад что этот способ тебе пригодился!
сдраствуйте я хочу что бы свой сайт был мобильным помогите
Используйте это приложение или верстайте под моб. устройства!
я не понемаю эту страницу
Перечитайте!
Хорошая статья, но у меня на созданной мобильной версии сайта, после того как жмешь на раздел или на саму статью, вместо текста статьи сначала идет весь правый сайдбар и только пролистывая вниз, под ним уже текст самой статье… В настройках там все облазил и ничего не понял что сделать…У вас на мобильнойверсии как и нужно сразу статья …Может вы подскажите что можно сделать вот мобильная версия моего сайта http:// mobile.dudamobile.com/site/nachnivsesnachalo Спасибо
Здравствуйте, Андрей! Я ничего не делал, у меня сразу всё работало нормально! Поэтом даже не знаю что тут подсказать, возможно дело в шаблоне!
А я сам себе сделал мобильную версию блога. Хотя долго искал, но сделал и без плагина. Можете посмотреть мой блог через мобильные устройства.blogozapis.ru
Я не люблю всякие плагины, а мобильные версии с плагинами такая лажа и нагрузка на блог. Зато я понял как делать мобильные версии без плагина.
Можно и без плагина сделать, просто адаптивный дизайн! Но это не каждый может, а это уже готовое решение!
и как ты сделал без плагина мобильную версию Евгений? можешь сказать?
Денис, а ваш сайт то не адаптирован под мобильники.
Этот нет!
Добрый день!
Подскажите, пожалуйста, как убрать рекламу в бесплатной версии или как скачать исходник полученного на DudaMobile сайта и залить его на сервер?
Юзабилити-тест SAP Mobile Platform, который предлагал разработку адаптивного дизайна моего сайта. Честно говоря, я был приятно удивлен результатами. За считанные минуты мой сайт стал удобным и интуитивно понятным для мобильных пользователей. Теперь все мои читатели могут без проблем переходить по страницам блога и находить нужную им информацию на своих смартфонах и планшетах. Я очень благодарен SAP Mobile Platform за такое полезное решение и рекомендую его всем владельцам сайтов, желающим привлечь больше мобильной аудитории.