<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как сделать мобильную версию сайта

Как сделать мобильную версию сайта

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

Первым делом, Вы должны понять, что мобильный Интернет уступает по скорости стационарному во много раз, плюс из-за небольшого экрана просмотр страниц так же не удобен. Я уже молчу про тех, кто пытается выйти в Интернет через GPRS. Мне это удалось прочувствовать однажды, когда я был далеко в Краснодарском крае, в какой-то глубинке, где телефон по непонятным причинам более-менее (40-50%) ловил только на кладбище. С такой связью можно звонить, но вот Интернет был совершенно некудышным. Поэтому когда мне пришлось там загружать страницы размеров 200-300 КБ, из которых 90% - это ненужная графика, я проклинал создателей этого сайта.

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

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

Что касается ширины страницы, то рекомендую поставить max-width: 620px; у самого верхнего контейнера. Сильнее растягивать не требуется.

Мобильную версию сайта лучше сделать на отдельном поддомене, например, на m.mysite.ru.

Когда Ваш отдельный сайт для мобильных устройств будет готов, надо подумать, как перенаправлять пользователей с мобильными устройствами с сайта mysite.ru на m.mysite.ru. Код для определения браузера можно скачать здесь: http://detectmobilebrowsers.com/.

Скачиваете, например, для PHP. Далее вставляете в index-файл этот код и заменяете там адрес в header() на адрес Вашей мобильной версии сайта.

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

Подведу итог:

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

Это всё, что требуется сделать для того, чтобы была мобильная версия Вашего сайта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (25):

lev_100rus lev_100rus 01.02.2013 16:17:07

Хах! Каждая статья всё лучше и лучше! Спасибо. Эта статься то что нужно! Как раз задался этим вопросом и тут бац и статья) Михаил, вы предсказатель однако

Ответить

sergey322 sergey322 01.04.2015 19:08:25

Отличная статья! А я вот наткнулся на курс как сделать мобильную версию сайта http://infosklad.org/threads/udemy-sozdanie-sajta-dlja-mobilnyx-ustrojstv-v-adobe-muse.8120/ мне очень понравился, рекомендую!

Ответить

daxon71 daxon71 01.02.2013 21:29:43

Я вспомнил как лет таки шесть назад делал на своем школьном сайте мобильную версию сайта, я реализовал яваскриптом, определялось разрешение с экрана у посетителя и перенаправляло на мобильную версию

Ответить

lev_100rus lev_100rus 01.02.2013 22:27:17

А если это планшет? Или вы и это учли?

Ответить

ankalitkin ankalitkin 02.02.2013 13:45:27

Зачем делать перенаправление? Если кому надо, можно дописать буковку m. И в варианте со скриптом с планшета или телефона нельзя принудительно открыть полную версию.

Ответить

evgenij evgenij 17.02.2013 01:46:25

А зачем вообще создавать поддомен или отдельный адрес для мобильной версии? Чем плохо, когда информация о мобильном браузере находится, например, в сессии?

Ответить

Admin Admin 17.02.2013 10:37:58

В панели хостинга создаются поддомены обычно. Хранить это в сессии смысла нет.

Ответить

evgenij evgenij 17.02.2013 22:06:49

Зачем создавать поддомен для мобильной версии? Вот в чем был вопрос. Мы просто меняем тему оформления сайта, если у нас мобильный клиент...

Ответить

Admin Admin 18.02.2013 09:21:14

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

Ответить

roman3451 roman3451 23.06.2013 21:03:04

Я так, и не понял чтоб создать моб. версию сайта - надо всё скопировать с полной.версии сайта например: soft.com все скрипты, статьи,файлы игры музыка и т.д, скопировать в отдельную папку например: m.soft.com - и создать отдельную вёрстку сайта ?

Ответить

Admin Admin 23.06.2013 21:28:24

Можно и скопировать, а можно и действительно сделать большие отличия в функционале.

Ответить

H1gh H1gh 19.02.2015 13:23:29

Повлияет ли это на поисковое продвижение? Нужно ли устанавливать микроразметку на мобилюную версию? Или вообще поддомен закрыть от индексации?

Ответить

SargeP SargeP 30.10.2013 15:06:58

А как ПРИНУДИТЕЛЬНО запустить полную версию сайта с мобильного устройства? На мобильной версии кнопка - перейти на полную версию, но срабатывает скрипт перенеправления и опять - мобильная. Сам сделал :) с мобильного - ссылка на index_full.php без скрипта

Ответить

Admin Admin 30.10.2013 20:53:34

Записать в cookie предпочтение пользователя, и при редиректе на мобильную версию проверять наличие этой cookie. Если она есть, то не переходить на мобильную версию сайта.

Ответить

SargeP SargeP 31.10.2013 00:45:39

Спасибо! Но я не заморачивался с куками - скопировал index.php в index_f.php, из последнего уборал "тот самый" скрипт и в ссылке "полная версия" указал index_f.php. Таким образом index_f.php задействован только при переходе с мобильного устройства на полную версию сайта. Мне кажеться, это самый простой путь.

Ответить

BotaniQue BotaniQue 26.01.2015 01:03:42

Михаил, а можете немного поподробнее описать этот алгоритм переадресаций? Код для определения браузера я поместил в индексной файл, перенаправление происходить на страницу set_version.php. Создал файл set_version.php. Там две кнопки - "мобильная" и "полная" версия, при нажатии на каждую происходит запись соответствующего значения в cookie. Но вот как сделать, чтобы после нажатия кнопки "Полная версия" сделался редирект на индекс? А то получается замкнутый круг - в полной версии срабатывает скрипт определения браузера, и я опять на странице set_version Уже и ставил разные условия в индексном файле, и проверял на значения куки. Но все равно не получается. Буду очень благодарен если Вы поможете мне и напишете кратенький алгоритм и механизм реализации. Спасибо.

Ответить

Vihail Vihail 01.11.2015 10:58:39

А не проще сделать так: Создаешь мобильную версию сайта с кнопкой перехода на полную. Создаешь полную версию сайта с кнопкой перехода на мобильную. И.. создаешь что то вроде мини сайта, который никто не когда не увидит, но в нем ты прописываешь все скрипты для определения браузеров, для поисковой системы, ну и все, что можно найти на твоем сайте. То есть это будет выглядеть так: Когда пользователь находит ваш сайт в поиске и нажимает на ссылку вашего "невидимого" сайта, в котором можно прописать все что угодно для его нахождения в поисковике, то сайт сам определяет с чего зашел пользователь и автоматом перенаправляет его и если пользователю нужно изменить версию сайта, то просто нажмет на кнопку.

Ответить

jon63 jon63 25.04.2015 09:37:16

Скажите у кого есть опыт, а как быть с контентом, если он дублируется с основного сайта на мобильный? Можно ведь санкции получить от ПС. Или нет? Что делать?

Ответить

Sergey SEO Sergey SEO 06.08.2016 16:44:17

Сейчас мобильная версия типа m.site.ru давно не в моде, потому что нужно продвигать практически 2 сайта! Яндекс и Google активно рекомендуют Адаптивную верстку сайта, которая подставляет одинаковый контент для разных экранов в удобной форме. Изображения, которые не несут никакой информации (фон, слайдер из клипартов) можно убрать в мобильной версии. Если пользователю не понравится мобильный дизайн, он может нажать на кнопку "обычная версия" и попасть на привычный сайт. Но загружается всё это гораздо быстрее. + поисковики в выдаче ставят метку "мобильная версия", если со смартфона смотреть. Подставляется только отдельный CCS файл, который определяет экран пользователя и подгружает нужный контент. Если интересно, можно почитать более подробно в сети про адаптивную верстку. По стоимости самое актуальное предложение нашел тут http://www.mobile-version.ru/ Статистика мобильных пользователей растет с каждым днем. А роботы Яндекса и Гугла каждый раз придумывают новые правила ранжирования. Поэтому лучше шагать в ногу со временем и дружить с поисковиками. Они плохого не посоветуют))

Ответить

eskimobi eskimobi 23.09.2016 11:40:36

Спасибо за отличную статью! Есть предложение сделать статью ещё лучше, дополнив другими способами создания мобильной версии, а именно: — Конструктор мобильных сайтов. Подходит для простых сайтов и стоимость от 27 руб/день https://eski.mobi/services/go/ — LITE адаптивный дизайн. Подходит для любых сайтов, стоимость от 10 000 руб., работы выполняет ведущая студия по адаптации в РФ https://eski.mobi/services/lite/

Ответить

IvanKiev IvanKiev 27.12.2016 19:20:59

Михаил статья супер, но боюсь сам не смогу грамотно сделать мобильную версию для нашего сайта http://conceptplus.com.ua/ может посоветуете хорошего (не очень дорогого) специалиста? Пробовал сделать через одного спеца адаптивную версию, но нам явно подсунули что-то не то, сайт с мобильного выглядел не очень, шрифт большой но прокручивать нужно и влево и вправо (вниз вверх - естественно), пришлось вернуть все на место т.е. поисковики так и хотят адаптивную версию под моб. устройства. Спасибо, если кто откликнется.

Ответить

Vova511 Vova511 30.12.2016 15:18:57

Чтобы создать мобильную версию сайта можно использовать множество способов, но я использовал наиболее приемлемый и простой для себя, при том при всем, сайт реально хорошо отображался на смартфон, да сначала подглючивал, но это мой косяк, после того как я его дошаманил, все работало очень хорошо. Я использовал плагины: WPtap News Press, WordPress PDA & iPhone, Duda Mobile Website Builder. У каждого из них есть свои недостатки и преимущества , но зато работают они четко и слажено, если их правильно настроить и иногда контролировать. Все свои сайты я переделывал только благодаря им! А как правильно все сделать и настроить, читайте здесь: http://www.mobile-version.ru/

Ответить

Vova511 Vova511 03.01.2017 01:09:24

Чтобы создать мобильную версию сайта можно использовать множество способов, но я использовал наиболее приемлемый и простой для себя, при том при всем, сайт реально хорошо отображался на смартфон, да сначала подглючивал, но это мой косяк, после того как я его дошаманил, все работало очень хорошо. Я использовал плагины: WPtap News Press, WordPress PDA & iPhone, Duda Mobile Website Builder. У каждого из них есть свои недостатки и преимущества , но зато работают они четко и слажено, если их правильно настроить и иногда контролировать. Все свои сайты я переделывал только благодаря им! А как правильно все сделать и настроить, читайте здесь: http://www.mobile-version.ru/ Вот этот сайт http://webpromote.ru/adaptaciya-sajta-pod-mobilnye-ustrojstva/

Ответить

Наталья90 Наталья90 06.06.2017 01:18:40

Я тоже пыталась адаптировать сайт под мобильное устройство. Предыстория такова, что открыли с мужем интернет-магазин кондиционеров. Но с телефона конечно не удобно смотреть его. Поэтому попробовали сами адаптацию сайта под мобильные устройства. Прочитали много статей, в том числе и эту тоже. Честно- пол ночи сидели..До конца так и не разобрались. Проверяли адаптацию сайта, мучались, не выспались( Конечно расстроились, потому что время было зря потрачено и силы. У нас реклама от гугла. Из-за кривой верстки сайта на компе она помещалась, а вот при просмотре с мобильного не хочет адаптироваться и выходит за левую сторону экрана. Не адаптировались не только картинки, но и видео.((В итоге в интернете нашли вот какую страничку http://www.mobile-version.ru/ Цена приемлемая, срок исполнения вышел всего 2 дня! Сайт после адаптации проходит тесты на мобильность гугла и яндекса. Кстати на самом сайте этой компании очень интересные статьи. Все написано понятно, поэтому мы и заинтересовались. По телефону нам так же отвечали на все вопросы. Весь сайт был сделан не в горизонтальную, а в вертикальную прокрутку. Смотрится теперь сайт на телефоне очень классно! И голову ломать не пришлось и сайт теперь адаптирован и под планшеты и под мобильники)Спасибо!

Ответить

samvel29 samvel29 07.04.2019 10:38:23

Статья бородатая, уже давно поддомены не делают для мобильных версий. Плюс никаких практических рекомендаций, а только теория, типо "Хотите мобильный сайт? Сделайте его мобильным"

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.