<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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/

Ответить

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