Flamio.ru

Работа и деньги
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Мобильная версия сайта как сделать

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

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

Первым делом, Вы должны понять, что мобильный Интернет уступает по скорости стационарному во много раз, плюс из-за небольшого экрана просмотр страниц так же не удобен. Я уже молчу про тех, кто пытается выйти в Интернет через 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.

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

Читать еще:  Битрикс24 интеграция с сайтом на битрикс

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

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

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

Она выглядит вот так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Читать еще:  Где создать сайт визитку

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

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

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

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

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

    Читать еще:  Длинный скриншот сайта

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

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

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

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

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Adblock
    detector