Мобильная адаптация сайта

Назрела еще партия вопросов.

Когда  Анна поинтересовалась мобильной адаптацией сайта в предыдущей статье (в комментариях), я решила глянуть свой сайт через телефон. Телефоны не люблю, поэтому давно не заходила через него. Раньше все хорошо отображалось, размер уменьшался сам.  Но прошло время, что-то, видимо, слетело, стал отражаться частями. Можно, конечно, собрать в одно окно, но людям будет лень  тыцкать.

Исходя из этого, назрела проблема с – сделать снова адаптацию под мобильные.

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

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

Я так поняла, математику считать надоест точно. Че-то не хочется совсем че-то считать. Подумала, это на потом оставлю. Пошла искать плагины, хотя я не любитель их.

Плагин для мобильной версии

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

Почитала мнения и остановилась на двух: Jetpack и Mobilpack.

Скачала оба, но решила начать с первого.

plagin-mobilnaya-versija

Чтобы мобильная версия сайта плагин мой не забраковала, решила почитать о нем еще больше. Красиво было написано, как все просто настраивается.

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

 

Получилось ли поставить на телефон мобильную версию и адаптировать сайт? К счастью, да.

 Адаптативный дизайн популярен

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

glavnaya-mobil

Так что же плагин?

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

mob-versiya

Хочу отметить, телефон действительно открывает сайт, можно прочитать его контент-блок, сайдбаров нет. Есть  меню списком, где содержатся карта сайта и страницы. Это лучше, чем адаптация, я думаю. Это новая  (мобильная) версия сайта. Текст виден, он большой.

plagin-mobil

Минусы:
  • Цвет дизайна синий (насчет возможности менять, не знаю. Надо почитать).
  • Нет рекламных баннеров от адсенса
  • Партнерские рекламы внизу
  • Нет рубрик и других элементов навигации
 Плюсы
  • Это мобильная версия
  • Есть карта сайта
  • Есть строка поиска по сайту
  • Прочитался виджет лучших комментариев, ушел вниз
  • Скорость загрузки неплохая
  • Размер шрифта читаемый

 Буду ли я менять плагин

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

В принципе, мне бы тему сменить. Не идут обновления к ней. Это плохо. Но я ее обожаю. Очень удобная, все перерисовано и поменяно на мой вкус.  И времени нет для серьезных работ.  Будем ждать скучной зимы.)

 Вопросы  посетителям:

  1. Стоит ли у вас мобильная версия или адаптация к мобильным устройствам?
  2. Как вы относитесь в данном вопросе к использованию плагинов?
  3. Если используете, то какими  почему?
  4. Знаете ли вы о плагине Jetpack? Как он вам?
  5. Может, вы используете Mobilpack?
  6. На какие темы вы хотите почитать статьи в моем блоге еще?

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

На главную

Комментарии 38

  • Ольга, с большим интересом и вниманием прочитала вашу запись. Как здорово, когда человек всё понимает и может проанализировать и сравнить. Если вам показалось, что плагин не просто устанавливается, то я могу представить, что будет со мной при этом!!!! Я пыталась установить плагин WPtouch Mobile Plugin. Установила, настроила, но он оказался несовместим с каким-то моим плагином. Вот я его деактивировала. Поэтому мобильной версии у меня нет. Плагинов у меня много, так как я не умею работать с кодом блога. Да и говорят при этом, что если придётся менять тему, то всё полетит и надо будет наново ставить все коды.Этот вариант не для меня.О ваших плагинах не слышала. Меня интересует вопрос простой: как сделать отступы текста от картинок? Возможно, есть какой-то код, который нужно вставлять перед картинкой, чтобы не лазить в коде блога. Раньше Вордпресс имел такую функцию, как устанавливать отступы текста от картинок, а вот в версии 4.9.8 такой функции уже нет, а это плохо.С уважением, Анна.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    На самом деле этот плагин очень некорретно отображает админку, записи. Можно его отключать, писать текст, потом включать. Но если не удастся настроить, я сменю его позже. У меня тоже бывают конфликты плагинов, также некоторые ложатся после обновления версии вп. И бывало такое, что конфликты мешали полноценно работать и приходилось удалять. Насчет кода, особенно функций, если там накосячить, сайт ляжет или станет отображать с ошибками. Если ляжет, невозможно станет зайти в админку.Тогда остается только хостинг. Но вообще плагин, делающий резервные копии, обязателен. У меня есть один, сам периодически на почту скидывает базы, а есть тот, что можно в нужное время сделать копию, потом можно отключать. Просто мне приходилось откаты делать. Даже вот обновление вп быстрее проходит. чем темы. Могут быть несовместимости. Да и с новыми версиями плагинов.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    Отступы картинок задаются в таблице стилей. Вообще сайт состоит всегда их этой таблицы и html.Это обязательные компоненты. Если накосячить в таблице,это исправимо. Есть у нас здесь еще файлы php. Это язык, там косячить опасно. Язык нужен для запуска различных автоматизированных процессов. Это очень похоже на математику. Только там очень строго с написанием, нельзя отступы делать лишние, пропускать знаки, заменять скобки. Иногда в вп используют еще элементы джава-скриптов, особенно в виджетах. Это различная анимарованная фигня еще. Джава-скрипты умеют выбрасывать окна, которые обычно бесят. Часто люди слишком много мигающей хрени ставят, что аж раздражает. А вот в виджетах норм. Если очень хочется сделать что-то страшное в функциях,нужно обязательно сделать резервную и потом очень четко по инструкции, следить за всеми точками с запятыми и ковычками. Там нельзя ниче путать. Если нарисована одна прямая ковычка, значит. она именно такой должна быть, не наклоненая. не две, не после пробела. Ну и тому подобное. Лучше вообще туда не лазить. А в таблицу можно спокойно лезть. Просто сначала все нужно посмотреть не изнутри, а через просмотр элемента. Когда станет ясно, что все норм, можно идти в редакторе это делать. И ничего не случится. Я со своего компа, конечно, знаю, как изменить отступы. Но фищка в том. что с другого компа это может выглядеть иначе. раз я это обнаружила с ноута. Но попробовать можно. конечно, позишен поменять на релятив и отступы другие поставить. Но я не уверена. что прям везде-везде это круто будет отражаться. Т.к. это, наверное, только программисты могут сказать уверенно.

    [Ответить]

  • Как то пробовал установить Jetpack ничего не получилось и не смог разобраться больше попыток не предпринимал, мой сайт отображается на телефонах и планшетах посчитал что-то совершенствовать это лишнее

    [Ответить]

    Quetzal

    Quetzal Ответила:

    Ну мой перестал отображаться че-то. Может, че слетело при обновлениях.

    [Ответить]

  • Плагин это хорошо, но только плохо, что дизайн полностью отличается. Я где=то читал, что поисковым системам не нравиться когда сайт выглядит по-разному на разных устройствах. А может в плагине можно изменить цвет. Нужно просто найти в файлах код заданого цвета и заменить его на другой.

    [Ответить]

    Quetzal

    Quetzal Ответила:

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

    [Ответить]

    Quetzal

    Quetzal Ответила:

    Я не могу отправить коммент в вашей форме. пишут ошибку.

    [Ответить]

  • После этой статьи, намеренно прочла одну из ваших статей с телефона. Все отражается хорошо, мне показалось не очень удобным, что заголовки статей некликабельны. Когда открываешь с телефона, “читать далее” становится очень мелкого шрифта, еще может опуститься ниже экрана, а заголовок остается хорошо видимым. Начала кликать на него, а он никак не хочет открывать статью, я догадалась опуститься и поискать кликабельную точку. Не уверена, что это сделает простой обыватель. Но это не относится к плагину.
    Оставила комментарий к статье про учительскую деятельность с телефона. Запоминаемость комментатора работает отлично. Шрифт текста увеличивается – это удобно для глаз. Не без казусов, но это не относится к функционалу сайта, телефон решил сам подправить слово. Единственный момент, который стоит рассмотреть – окошко с “отправить комментарий” не остается внизу. Т.е. написала, а кнопка отправления посередине текста.
    Уже когда отправила коммент, появилась надпись “читать в упрощенной версии”. В ней все открылось большего текста – удобно, но нет окна для оставления комментариев.
    А что говорит PageSpeed Insights от Google о вашей мобильной версии?

    [Ответить]

    Quetzal

    Quetzal Ответила:

    У меня заголовки некликабельны всегда. Они открываются через тег далее. Я сняла давно кликабельность с тайтл, дескрипшен и заголовков статей. Но, вероятно. далее отображается некорректно. Судя по вашему ответу, работа этой версии 50% от нормальной. Это еще раз доказывает, что данный плагин-не лучший выбор. Форма комментариев на этом сайте хорошо справляется, в телефоне печалька значит. Это плохо. PageSpeed Insights от Google – надо будет проверить.

    [Ответить]

  • Ольга, здравствуйте! Спасибо,что ответили на мои вопросы. Теперь я буду работать со специалистом. Сама я с моими проблемами не справлюсь. Пусть это всё делают профи.С текстом я поработаю. Я не буду больше загружать вас своими проблемами, на этом этапе остановимся.Вам желаю всего доброго и светлого. С уважением, Анна.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    Надеюсь, все получится. Заходите. ) Потом посмотрю на изменения. Думаю. спец классно все сделает.

    [Ответить]

  • Ольга, добрый день! Я тоже надеюсь на это, но это, как мне сказали уже, очень длительный процесс.А пока пусть всё остаётся так, как есть. С уважением, Анна.

    [Ответить]

    Quetzal

    Quetzal Ответила:

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

    [Ответить]

  • Да, я это тоже знаю, поэтому стараюсь быть очень острожной в этих вопросах. Хочу вас поздравить, вы у меня на блоге стали победителем в топ комментаторах, у вас теперь рядом с вашим фото имеется награда – медаль победителя, с чем я вас искренне поздравляю. Понимаю, что это мелочь,но думаю,что приятно себя видеть в таком качестве.С уважением, Анна.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    О, неожиданно, пойду отскриню страницу на память. Я всегда все интересное скриню. В принципе, я многое храню на дисках.У меня есть даже разные старые версии сайтов скрины.

    [Ответить]

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

    [Ответить]

    Quetzal

    Quetzal Ответила:

    Да, анализаторы доказывают, большой процент очень.

    [Ответить]

  • Почему именно адаптивность, а не отдельное мобильное приложение или же отдельная моб версия?

    [Ответить]

    Quetzal

    Quetzal Ответила:

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

    [Ответить]

    Quetzal

    Quetzal Ответила:

    Че-то аваст  сдурел вдруг от захода на ваш сайт

    [Ответить]

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

    Поэтому лучше полностью сменить тему на новую. В репозитории вордпресса есть много бесплатных тем. Я так использую Basic.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    з0аголовки не кликабельны не из-за шаблона, я сама их такими сделала. Моя устарела, знаю. Но я уверена. что все слетит. Да и тоже потом устареет. Да и думаю, нафига вообще тема. Я хочу конкретно мой вот этот дизайн, структуру. Перенести бы и все. я все думаю, если бы взять их код. но стили свои к нему сделать, может. было бы мне комфортнее. Но это в будущем, когда дойдет очередь. Верхнее меню у меня работает. Надо соцопрос значит, что у других. А что за ссылки? А базик тож устареет, потом снова менять. Но да, я уже так не лоханулась бы и сделала б сразу дочернюю, чтоб не переделывать. Я просто как представлю, сколько работы на переделку. Хотя с другой стороны полезно, практика вбивает в память инфу.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    хотя точняк меню не работает. Это наверное из-за цветка розового.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    точно, цвет-это клипарт. Он стоит поверху. и закрывает собой кнопки по индексу. Проверила только что. Снимаю его площадь-работает.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    изменила положение цветка. высоту.работает.

    [Ответить]

    Сергей Ответила:

    Не работает меню все равно.
    Поставь нормальную новую тему. А дальше ее потом подгонишь под себя один раз и все. Темы обновляются в репозитории. Главное сразу дочернюю сделать и настроить вид. И все нормально будет.

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

    [Ответить]

    Quetzal

    Quetzal Ответила:

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

    [Ответить]

    Quetzal

    Quetzal Ответила:

    да не стандартная была и обновлялась раньше, просто ей много лет. Уже на ее забил болт разработчик, видимо. Гуд монинг тема. Я не думаю, что в ней уязвимости.Хотя вп в принципе на это дело слаб. Мне кажется,защита сильно зависит от хостинга. Если его не пробьют, то все норм.Мне нужна тема с широким центром и минимум полей или без них.но с сайдбарами.

    [Ответить]

    Сергей Ответила:

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

    [Ответить]

    Quetzal

    Quetzal Ответила:

    боюсь, что в новом xhtm я не буду врубать. )))

    [Ответить]

    Сергей Ответила:

    А тебе и не нужно будет ничего врубать.))) За тебя все уже сделали сами разработчики темы. Поэтому переходи и не бойся.

    В общем, ждем от тебя новой обновки. Различные оправдания не принимаются.))

    Quetzal

    Quetzal Ответила:

    А сертификат слетит или нет? Я, конечно, рада за арзработчиков, но я  знаю, что хана всему моему, останется только стандарт. А так как всех изменений я не помню то косячно будет, пока не обнаружу все места , где нужно что-то менять.Всяким метатегам хана будет. статистике. Постраничной навигации или карте сайта наверное. Но я начну уже на выходных делать, у меня тут планы есть, как раз статья новая готовится обзорная.

    Quetzal

    Quetzal Ответила:

    Перебрала 5 тем, половина дичь, нет навигации,нет стилей никаких. Твой базик наиболее адекватна, единственное, граватар косячно становится, нужно менять тогда мне там в двух классах, я посмотрела. Но это нормально. Но самый красивый вариант-это если релятив поставить ему. Не нравится, что тема отправляет сама текста под кат. Мне нужно вручную. Не знаю, как убрать, разве что весь класс.Пока посмотреть нужно. Создать дочернюю. Времени седня не хватило, на рыбалке долго были. Но в целом она неплохая. Уберу ковычки с цитат. Карта сайта стоит. Метатеги и статистики ставить придется.Может, цвет другой. Шрифт поменяю точно.

    [Ответить]

  • Мобильная адаптация очень удобна, но насколько я заметила, не все адаптированые сайты работают корректно. Попадаются сайты, где и вовсе некликабельна кнопка “далее” и комментарии. То есть на первый взгляд всё хорошо, но прочесть статью полностью или почитать/оставить комментарии возможности нет.

    У меня Jetpack. Ничего особенного, но довольно удобно и глазу приятно. Кстати, после адаптации я даже не заметила, что не отображается капча. Просит ввести капчу, а саму её не показывает. Спасибо добрым людям, что написали, а то я долго бы удивлялась отсутствию комментариев.

    [Ответить]

    Quetzal

    Quetzal Ответила:

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

    [Ответить]

  • У меня сайт самописный. Пару лет назад остро встал вопрос об адаптации сайта под мобильные устройства, так как с каждым годом посетителей с мобильных устройств все больше. на сегодня их около 50%.

    [Ответить]

    Quetzal

    Quetzal Ответила:

    по нашим статистикам их процент еще выше, большинство сидит через мобилы.Так что пишите мобильную версию.

    [Ответить]

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.