Создание сайта/блога на WordPress — что может быть проще!
Адаптивная верстка или как сделать мобильную версию сайта?
Рубрика: Все для вебмастера

Адаптивная верстка — как сделать мобильную версию сайта?

80 комментариев   

Как я и обещал, пришла пора рассказать Вам, что такое — Адаптивная верстка и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

А зачем вообще все это нужно?!

Ведь жили же, как то раньше и ничего. Ну что тут сказать, интернет меняется, становиться лучше. Поисковые системы делают все возможное для удобства и комфорта пользователей… Здорово, правда :razz:

Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть…

Так же рекомендую к прочтению:

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

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

Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

Так вот, совсем недавно, у меня был отпуск, решил побольше статей написать полезных, реализовать какие-нибудь интересные идеи, в общем провести отпуск с пользой, а не лежать на диване, хотя как хотелось м-м-м….

В один из прекрасных дней мне на электронную почту (впрочем все его получили) пришло такое сообщение:
google-no-mobilИ рухнули мои все планы… Думаю нужно идти в ногу со временем… и понеслось! Первым делом естественно, решил найти в сети какой-нибудь плагин, который сделает все четко и без меня :razz:

Мобильный сайт WordPress с помощью плагинов!

Как оказалось такие плагины существуют и в принципе выполняют свою функцию! Но, проверку Google — на удобство просмотра сайта с мобильного устройства, они не проходят! Уж не знаю почему, но Google упорно отказывается видеть изменения, перепробовал множество вариантов… По этому смысла их использовать нету…

Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

plugins_wptouch

WPtouch Mobile Plugin — Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

Не буду описывать каждый плагин, сами опробуете и определитесь:

  • MobilePress;
  • WordPress Mobile Pack;
  • Duda Mobile Website Builder;
  • WordPress Mobile Pack;
  • WordPress PDA & iPhone;
  • WPmob Lite;
  • WPtap News Press;
  • WP Mobile Detector;
  • WiziApp.

Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон — все хорошо, повторил еще раз или обновил — показывает обычный сайт! Какая то загадка прям :|

Короче меня это не устроило и я продолжил искать лучшее решение!

Затем, решил поручить эту работу специалисту какому-нибудь на бирже фрилансеров, но после долгих раздумий решил научиться адаптивной верстке и сделать все сам! В конце концов я же разработчик сайтов и пришла пора повышать квалификацию…

Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше… Не советую нанимать горе-специалистов, которые берут дешевле — скупой платит дважды! Да и на отзывы обращайте внимание…

Ладно, поехали дальше…

В общем начал я изучать эту тему, сначала теория, затем практика на своем блоге! Ну и в принципе научился, оказалось ничего сложного в этом нет, теперь мой блог адаптивный и подстраивается под любой экран и я рад как слон… Зайдите с любого смартфона ко мне на блог и Вы сами все увидите :razz: Найдете косяк — дайте знать…

Теперь поделюсь полученными знаниями с Вами и расскажу о наиболее важных моментах…

adaptivnaja-verstka-savme

Варианты создания мобильного сайта?

Существует, на сколько мне известно, три направления. Разберем каждую технологию по отдельности, с какими плюсами и минусами мы можем столкнуться?!

Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета. Обычно такую версию используют на поддоменах, например — основной сайт http://savme.ru, а мобильный http://wap.savme.ru или http://mobile.savme.ru. В данном случае используется перенаправление.

Плюсы:

  • Два независимых сайта — возможность менять контент, не затрагивая при этом другой сайт;
  • Скорость загрузки — так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
  • Удобство — навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.

Минусы:

  • Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
  • Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт…
  • Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server Side Components).

Плюсы:

  • Скорость загрузки — возможность удаления разных ненужных скриптов, стилей;
  • Меньший вес страницы — вместо того чтобы скрывать элементы как в адаптивной верстке их можно просто удалить;
  • Навигация — возможность настроить структуру под определенные устройства.

Минусы:

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

Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах…

Плюсы:

  • Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
  • Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.

Минусы:

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

Делаем адаптивную верстку самостоятельно

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

  1. не нужно нарушать целостность основного сайта, блога;
  2. используется один единый контент, одна база данных и так далее;
  3. Лично для меня простота внедрения (потребуются знания html и css).

Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google :razz:

Во первых нужно прописать мета-тег в <head>:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Этим мы сообщаем браузеру, что ширина сайта должна равняться ширине гаджета, устройства, или что у Вас там ;)

Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением…

Вот, начало положено, теперь если мы зайдем через смартфон или еще что, то увидим как выглядит наш сайт! Печалька да?!

Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

@media screen and (min-width:240px) and (max-width:720px) {
тут теги и атрибуты
}

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

И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

  • смартфоны вертикально — от 240 до 340, от 341 до 420;
  • смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
  • планшеты вертикально — от 671 до 800;
  • планшеты горизонтально — от 801 до 1024

Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:


На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей ;)

P.S: Кстати, если Вам надо сделать сайт адаптивным, но Вы уверены что сами не справитесь, да и желания особого нет… То я предлагаю свои услуги! Пишите мне через контакты, все обсудим. Часть моего портфолио:adaptivnaja-verstka-usluga

На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим.


До скорой встречи! Пишите комментарии…

МММ… Хотите научиться качественно верстать сайты и быть востребованным верстальщиком? Ко мне на почту ежедневно приходят заявки — сверстать то, сверстать сё, помогите тут и там =)

Профессия «версталя» — это постоянный доход в интернете, так как Вас будут ценить и обращаться к Вам снова и снова! За одну лишь услугу адаптивной верстки сайта я получаю 5000 рублей и более… Вы тоже так сможете, я уверен!

dvdbigОбучающие курсы от webformyself, на мой взгляд отличное решение для тех, кто хочет научиться верстке сайтов — от начальных азов до адаптивной верстки! В данном курсе вы изучите базовую верстку, резиновую верстку, адаптивную верстку!

Советую пройти все курсы — ведь эти знания в будущем будут приносить постоянный доход! Ознакомиться и пройти обучение… Курс проверен и одобрен savme.ru!

В будущем я сам планирую обучать этому ремеслу, но на данный момент у меня совершенно нет времени на это! По этому, для нетерпеливых, я решил найти достойные альтернативы! А кто хочет обучаться именно у меня, подпишитесь на обновления — я сообщу когда будет набор!


Савельев Владимир Александрович
С уважением, Владимир Савельев

Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее
Продвижение в социальных сетях - сервис SocLike.ru
Прочтите еще:
Обсуждение статьи: 80 комментариев


  1. Ivanovskij 2015-03-16 в 20:21 

    Зашел, проверил. Действительно всё хорошо отображается..
    Молодец, так держать!

    Ответить
    • Владимир Савельев 2015-03-16 в 20:36 

      Привет Олег, как дела? Спасибо еще для планшетов доделать нужно, пока времени нет :roll:

      Ответить
    • Артём 2015-03-17 в 11:38 

      Я недавно письмо получил от гугл( хотя стоит шаблон Борисова :|

      Ответить
      • Владимир 2015-03-17 в 13:54 

        Скорее всего это просто уведомление ;-) Проверь сайт в сервисах выше в статье

  2. Ivanovskij 2015-03-16 в 20:39 

    Привет, хорошо всё. У тебя я вижу тоже всё отлично, блог потихоньку идет в гору! Или же дела не совсем?

    Ответить
    • Владимир 2015-03-16 в 20:42 

      Нет все отлично Олег! Медленно — но верно :razz: Многие статьи уже в ТОпах ПС, хотя блогу ток полгода :roll:

      Ответить
      • Ivanovskij 2015-03-17 в 14:32 

        А почему не отлично??? Потому что блог медленно развивается? Или есть другие проблемы?

      • Владимир 2015-03-17 в 14:54 

        Да нет же наоборот все хорошо :x

      • Ivanovskij 2015-03-18 в 21:22 

        Упс!!! Не правильно прочитал комментарий твой мне :razz: :lol:

      • Владимир 2015-03-18 в 22:29 

        Бывает Олег ничего ;-)

  3. Евгения Куварина 2015-03-16 в 20:50 

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

    Ответить
    • Владимир Савельев 2015-03-16 в 20:56 

      Привет Женя :razz: Да плагины все глючные кучу перепробовал — результат один! Да и подстроить под шаблоны их очень сложно! Лучше сделать адаптивную верстку один раз и все, забыть и наслаждаться :roll:

      Ответить
      • Сергей Грицюк 2015-03-18 в 13:50 

        С шариками хорошо придумал. Нужно взять на заметку ;)

        Я как увидел уведомление от Гугла напротив своего блога, что он не адаптирован для мобильных устройств и будет ранжироваться соответствующим образом для них, сразу же поставил адаптивный шаблон. Хотя, как ни странно, напротив других сайтов в инструментах для вебмастеров от Гугл этого сообщения не было, при этом некоторые из них до сих пор некорректно отображаются на планшетах и мобильниках. И сервис проверки от Гугл mobile friendly это подтверждает. Но почему-то уведомление было только напротив блога.

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

      • Владимир Савельев 2015-03-18 в 14:00 

        Странно я думал всем такое сообщение пришло…оказывается предупредили не всех :o

  4. Александр Борисов 2015-03-16 в 20:51 

    Вова не могу остановиться. Играю в шарики ппц :lol:

    Ответить
    • Владимир Савельев 2015-03-16 в 20:58 

      Да жесткая и заразная игра Саш :razz:

      Ответить
      • Александр Борисов 2015-03-16 в 23:05 

        Выиграл )) Это же надо 2 часа рубиться в шарики :razz:

      • Владимир Савельев 2015-03-16 в 23:07 

        Сколько очков набрал интересно? :roll:

    • Саня Сабегатулин 2015-06-30 в 03:47 

      Ого, какие люди твой блог Вова посещают :smile:

      Ответить
  5. Александр Приколист 2015-03-16 в 21:10 

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

    Сейчас в руки попал премиум шаблон правда переделанный ( шёл в комплекте с курсом по видео сайтам) в котором одним кликом включаешь адаптацию.

    Смотрел запись посещений с мобил в метрике выглядит не плохо, по идее сайд бар уползает в низ а сам пост сужается под размер экрана.

    Ответить
    • Владимир 2015-03-16 в 21:17 

      Да, да, да именно так и работает адаптивная верстка :razz: Сейчас огромный трафик с мобильных устройств и сайт без мобильной версии — это потеря трафика прежде всего!

      Ответить
      • Александр Приколист 2015-03-16 в 21:29 

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

        Кстати на 8 марта рекорд по посещаемости на мир приколов был 15 278 посетителей при обычных 500-700 :smile:

        Кстати а чего это у тебя такие странные графики на странице со статой?

      • Владимир Савельев 2015-03-16 в 22:20 

        Круто! Видимо на 8 марта приколы искали :razz: А что странного в графиках, хм :?:

      • Александр Приколист 2015-03-18 в 23:04 

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

        Ну и дополнительно заказывали поздравления на телефоны :lol:

  6. Иван Бизюк 2015-03-16 в 22:36 

    Привет, а ты здесь проверял? _www.google.com/webmasters/tools/mobile-friendly

    Ответить
    • Владимир Савельев 2015-03-16 в 22:54 

      Да Иван! Все окей! Просто у меня до этого момента был запрет в файле роботс на считывание папки шаблона, вот сервис и не мог прочитать css :roll:

      Ответить
      • Иван Бизюк 2015-03-17 в 09:02 

        Ну все, теперь я спокоен :smile:

      • Владимир 2015-03-17 в 09:05 

        Спасибо за ссылку добавил в статью кстати :razz:

      • Иван Бизюк 2015-03-18 в 16:26 

        Пожалста:) А я, поставил WPtouch, внешне не фонтан конечно, но пока пойдет. Главное гугл одобрямс! Начал ковырять @media screen…. долгое это будет занятие видать :smile:

      • Владимир Савельев 2015-03-18 в 16:28 

        Да работа не сложная, но объемная :razz:

  7. Иван 2015-03-17 в 12:13 

    Я использую у себя плагин Mobile Smart, которым можно установить такую функцию, что при подстройке сайта под некое разрешение экрана, запускается отдельная тема, в моем случае, уже адаптивная… ;-)
    И блог не грузит… :roll:

    Ответить
    • Владимир 2015-03-17 в 13:56 

      Ну если проверку google проходит то окей :razz:

      Ответить
  8. Никита Волков 2015-03-18 в 01:21 

    Блин, офигенно, конечно!) Но я, пожалуй, от греха подальше лучше закажу спецу)) Сам боюсь лезть))

    Ответить
    • Владимир Савельев 2015-03-18 в 12:51 

      И это правильно Никита :razz: Привет кстати куда пропал? :oops:

      Ответить
      • Никита Волков 2015-03-18 в 18:15 

        Согласен))/
        Да я не пропадал) Просто ездил операцию делать в Питер))

      • Владимир 2015-03-18 в 18:37 

        А что случилось? Все нормуль? :?:

  9. Руслан Цвиркун 2015-03-18 в 13:09 

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

    Ответить
    • Владимир Савельев 2015-03-18 в 13:26 

      Причина Руслан в следующем, сервис Google не может прочитать ваши стили и скрипты, из-за этого:
      robots.txt

      Ответить
      • Руслан Цвиркун 2015-03-19 в 10:09 

        И что мне надо сделать теперь?

      • Владимир Савельев 2015-03-19 в 12:05 

        Google советует открыть доступ сейчас к файлам css и JS, для лучшего понимания вашего сайта!

        Через ФТП зайди на сайт найди файл robots.txt и удали в нем эту строчку что я выделил выше.

  10. Александр 2015-03-18 в 13:14 

    Скрин

    ;)

    Ответить
    • Владимир Савельев 2015-03-18 в 13:21 

      А-А-А Саша мой рекорд побил…. :razz: Я отыграюсь

      Ответить
  11. Сергей Грицюк 2015-03-18 в 14:27 

    Ради интереса добавил в pagespeed _https://developers.google.com/speed/pagespeed/insights/
    google.com.ua. И, как ни странно, Скорость — 99 из 100 :) Даже Гугл на 100% себе не соответствует :)

    Владимир, как Вы вставляли игру «Шарики» на свой блог?

    Ответить
  12. Сергей Грицюк 2015-03-18 в 14:29 

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

    Ответить
    • Владимир 2015-03-18 в 15:33 

      Да просто скопируй теги приложения задай им размеры и вставь в пост ;-)

      Ответить
  13. Нина 2015-03-21 в 21:21 

    Мой блог теперь тоже удобно просматривать через мобильный телефон, на днях сделали, смотрю и радуюсь, давно уже хотела мобильную версию :lol:

    Ответить
    • Владимир 2015-03-21 в 22:43 

      Да Нина все прикольно :x Правильно сделала! Только косяк с миниатюрой поста у тя заметил ее не доработали похоже :???: Посмотри через смартфон

      Ответить
      • Нина 2015-03-21 в 23:09 

        Да просто некоторые фото будут занимать слишком много места, поэтому мы так оставили.

      • Владимир Савельев 2015-03-21 в 23:41 

        Нина чет не понял какое место? :?:

    • Сергей Грицюк 2015-04-03 в 02:07 

      Нина, твой блог адаптируется под планшет, а вот под окно браузера на компе не масштабируется.

      Ответить
      • Владимир 2015-04-03 в 10:05 

        У нее похоже используется другая технология

  14. Никита 2015-03-21 в 23:33 

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

    Ответить
    • Владимир Савельев 2015-03-21 в 23:41 

      Да Никита плагины мобильной версии кака :razz:

      Ответить
  15. Нина 2015-03-22 в 00:15 

    Я думала, ты имеешь ввиду, что фотографии постов на главной у меня посередине и маленького размера. Так вроде сморю все нормально :?:

    Ответить
    • Владимир Савельев 2015-03-22 в 00:31 

      Нина в самой статье главное фото большого размера вылезает за рамки, глянь!

      Ответить
      • Нина 2015-03-22 в 20:48 

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

      • Владимир 2015-03-22 в 20:56 

        Не за что :razz: рад помочь!!!

  16. Вероника 2015-03-24 в 17:57 

    Здравствуйте, Владимир!
    Я тоже получила письмо 18 марта, где было сказано, что из 15 страниц моего сайта 27% неудобно просматривать. При этом были конкретные ссылки на неадаптированные 4 страницы. Обнаружила, что все 4 — рисунки.
    Значит ли это, что в целом мой сайт адаптируется и надо поработать с этими рисунками?
    Делала их в PowerPoint как рисунки к статье. Достаточно их просто уменьшить или как? :roll:

    Ответить
    • Владимир Савельев 2015-03-24 в 20:09 

      Вероника за адаптацию фоток отвечает код width:100%; Не знаю как у Вас там… :roll: Сайт вообще не доступен :razz:

      Ответить
    • Владимир Савельев 2015-03-24 в 20:11 

      Покажите эти страницы… :oops:

      Ответить
  17. Алексей 2015-04-29 в 21:52 

    а как быть если один элемент нужно переместить в другое место?
    к примеру Рубрика из правой колонки в шапку сайта?

    Ответить
    • Владимир Савельев 2015-04-30 в 09:19 

      Никак ) Ну если только в колонке скрыть display:none, а в шапке прописать)))

      Ответить
  18. Евгений 2015-06-05 в 22:23 

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

    Ответить
    • Владимир Савельев 2015-06-05 в 22:29 

      Все очень просто нужно открыть доступ в файле роботс! Читай подробнее в этой статье — http://savme.ru/pravilnyj-fajl-robots-txt-dlya-wordpress.html

      Просто в Robots.txt у тебя запрет скорее всего поэтому бот googla и не может толком просканировать твой сайт :roll:

      Ответить
  19. Вячеслав 2015-06-18 в 14:31 

    Использовать плагины для создания мобильной верски это ужасно, лучше уже адоптировать макет с помощью CSS, а если делать новый макет использовать Bootstrap 3 на мобилках этот фреймворк смотрится шикарно)))

    Ответить
  20. Саня Сабегатулин 2015-06-30 в 03:50 

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

    Ответить
  21. Андрей 2015-07-04 в 17:41 

    Доброго времени суток!
    Я работаю в програме адобе дримвивер и программа предлогает своего рода резиновые шаблоны.
    У меня есть свой литературный портал
    _stihok.ru где можно опубликовать произведения
    Его я не стал делать резиновым. У меня вопрос — если я его переделаю в резинку, его не надо будет подстраивать под мабильную версию?

    Ответить
    • Владимир Савельев 2015-07-05 в 08:15 

      Приветствую Андрей! Резиновый сайт и адаптивный сайт — это немного разные вещи… Резиновая верстка одна для любых экранов — сами понимаете разница в разрешениях (смартфон, монитор, планшет) значительна! Если на мониторе все отображаться будет корректно, то на телефоне с диагональю в 4 дюйма — не очень ) Адаптивная же верстка заполняет эти пробелы, то есть на каждое разрешение экрана мы прописываем свои стили, для лучшего отображения!

      Думаю все понятно объяснил?! )))

      Ответить
      • Андрей 2015-07-10 в 08:06 

        Спасибо! Более чем доступно ;-)

  22. zmoe 2015-07-18 в 18:36 

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

    Ответить
  23. Анна 2015-08-16 в 11:52 

    Добрый день! Необходимо адаптировать сайт… можете взяться? прошу связаться со мной по почте.

    Ответить
  24. Тимур 2015-10-22 в 11:10 

    Владимир, а как вы сделали, чтобы шарики отображались только в десктопной версии, а на телефоне не отображались?

    Ответить
    • Владимир Савельев 2015-10-22 в 20:32 

      Очень просто пропишите класс к играм и запретите показ их в мобильной версии с помощью тега — display:none;

      Ответить
  25. Rom4eg 2015-12-24 в 10:38 

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

    Ответить
    • Владимир Савельев 2015-12-24 в 21:47 

      Роман привет! Да все правильно заметил, ставим адаптивный блок, который меняет размер в зависимости от экрана! То есть в обычной версии сайта будет обычный блок на ширину родительского блока… Можете у меня на блоке глянуть как работают они…

      Ответить
  26. Rom4eg 2015-12-25 в 09:54 

    Спасибо, Владимир, будем пробовать…

    Ответить
  27. Александр 2015-12-31 в 01:49 

    Владимир, а вот я кажется уже нашёл один курс по которому ты обучался. Только в этом курсе я так понял идёт речь только о мобильной вёрстке. Ну это тоже очень важный вопрос. Что же занесу этот курс в список видео курсов, которые нужно посмотреть. :grin:

    Ответить
  28. Bonaventura 2016-09-02 в 00:09 

    Если честно, то большинство тех кто владеет сайтами являются исключительно владельцами своих сайтов, и иная сторона их мало касается. То есть они не всегда являются профессиональными экспертами в области кода, языка программирования и так далее. Поэтому мне кажется нужно как-то упрощать для них восприятие данного факта, то есть нужны либо знающие люди, которым можно доверять, либо какие-то вспомогательные программы и утилиты. В пример могу привести mobile-version.ru, где за 2-3 дня для вас сделают работающую мобильную версию сайта. Такие способы всегда экономят время и нервы, это куда проще, конечно же кроме тех случаев, когда вы сами имеете огромный опыт в разработке мобильных версий сайтов.

    Ответить
  29. Vikktor 2016-11-26 в 07:03 

    Тоже хочу мобильную. И о чудо натыкаюсь на эту статью(я не программист-я ветеринар,так что если что сори))))Читаю,делаю по инструкции с ,да мобстраница скривила, и уже думаю совсем чуть чуть и всё,НО вот это @media screen and (min-width:240px) and (max-width:720px) {
    я не нашёл в сайте(админки )ни где!!! Как так? или чудю? помогите пожалуйста!!!!!!!

    Ответить
  30. fx-prog 2016-11-28 в 21:15 

    Интересно.. Гугл сообщает что с мобильной версией все нормально, а вот Яндекс ругается на то, что много мелкого текста.

    Ответить

Добавить комментарий

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Рекомендую покупать шаблоны тут
русские шаблоны для wordpress