Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save anonymous/d1b303085f7ce4cf7d9574c98ded04a5 to your computer and use it in GitHub Desktop.
Save anonymous/d1b303085f7ce4cf7d9574c98ded04a5 to your computer and use it in GitHub Desktop.
Как оптимизировать сайт для мобильных устройств html

Как оптимизировать сайт для мобильных устройств html



7 способов оптимизации сайта под мобильные браузеры.
3 способа быстро адаптировать сайт под мобильные устройства
Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

В этой статье мы поговорим с Вами об оптимизации страниц блога для мобильных устройств. Эта проблема сегодня, я уверена, волнует многих блоггеров. С 21 апреля года компания Google начала отдавать предпочтение в своей поисковой выдаче сайтам, адаптированным под мобильные устройства. Поэтому я не осталась равнодушна к судьбе моих сайтов и приняла решение исправить все недостатки отображения страниц моих сайтов на тех же смартфонах. После диагностики своих блогов на сервисе Google Webmaster Tools инструменты для веб-мастеров , в своем профиле я получила результаты анализа на совместимость их с мобильными устройствами. И вот что я увидела…. Ну, тут все понятно. Уверена, она Вам очень понравится и пригодится в работе с блогом. На зеркале своего блога я до этого вообще ничего не делала для оптимизации сайта под разные мобильные гаджеты. Вот Гугл и возмутился…. Было обнаружено правда три ошибки. Но их нужно было как-то решать. Свои рекомендации Яндекс выдал мне в таком виде. Самым простым и быстрым решением этой проблемы была установка на мой блог WordPress специального плагина, который без дополнительных настроек помогал бы сайту корректно отображаться в первую очередь на смартфонах. Скачать его дистрибутив Вы можете на официальном сайте WordPress: После загрузки и активации плагина на сервер в меню слева в Амин-панели Вашего блога появится кнопка WPtouch. Нажмите на нее и выберите Настройки. Появится страница с настройками по умолчанию. Ничего не меняйте, оставьте все как есть. Но если Вам потребуются более расширенные настройки сайта для мобильных устройств, то Вы можете обновить плагин до Pro-версии. Но это уже платная услуга. Тарифы сами видите какие…: Двум моим блогам настройки ПО УМОЛЧАНИЮ вполне помогли. Проверив оба сайта на специальных сервисах я успокоилась. Там было все ОК! Если с Вашим сайтом все хорошо, то Google выдаст такую надпись. Внизу этой страницы я скачала zip-архив с рекомендациями по исправлению небольших косяков на моем сайте. Внутри архива Google было три папки с изображениями, текстовым файлом со ссылками на не оптимизированные страницы и папка с файлами js. Будет время-разберусь с всем этим хозяйством. Главное- мои посты на смартфонах читать МОЖНО и вполне удобно. Этот сервис часто используют для полного Анализа сайтов. Что касается совместимости с мобильными устройствами, сервис выдал мне подробнейший отчет. Как видно на скриншоте, с моим блогом все чики-пики кроме табуляций, лишних пробелов и переносов в html-кодах. Это и не удивительно, что-то же должно быть не так. Тем более, что я обожаю ковыряться в кодах и модернизировать свой блог. Думаю, что это не критичные погрешности. И нужно ее как-то решать. Как и где прописывать этот метатег я не знала. Пришлось перелопатить кучу сайтов по сео оптимизации и техническим моментам блоггинга, пока я не нашла то, что мне было нужно. Давайте разберемся теперь с этим метатегом. Для чего Google и Yandex так упорно требуют его присутствие в html-коде нашего сайта. Мета-тег viewport был введен компанией Apple для корректировки отображения страниц сайта на мобильных устройствах. Чтобы выполнить рекомендацию Гугла зайдите в свою Админку WordPress, в меню слева нажмите на Внешний вид, затем на Редактор. Главную суть темы я Вам передала, есть повод теперь поразмышлять над своей ситуацией. И конечно же, по традиции — подпишитесь на новости этого блога , если он Вас зацепил. Число посетителей с мобильных устройств растёт неуклонно и такая тенденция будет продолжаться. По этой причине, чтобы не заморачиваться с дополнительными правками кода или плагином WPtouch, лучше сразу выбрать шаблон оптимизированный под мобильные устройства. Все новые шаблоны, кстати, создаются именно такими. Про viewport ты верно подметила — этот тег необходим для адаптивного сайта. Знаю не по наслышке, так-как вручную переводил несколько своих рукописных сайтов на адаптивный дизайн. Зато получил удовольствие от результата. А ещё сейчас делают даже проще. При разработке сайта берут уже готовый bootstrap. Если буду ещё что-то ручками писать, то так и поступлю. А то свои сайты пока переписывал под адаптивный дизайн — сочинил свой css для них с нуля… Но повторюсь, мне это было интересно. Для владельцев блогов на WordPress посоветовал бы просто сменить шаблон на более современный адаптивный…. Саша, в своем посте я просто написала о своем небольшом опыте и высказала свое видение темы. Да, действительно в наше прогрессивное время приходится подгонять свои блоги под мобильные версии, так как кругом море людей с мобилами в руках. Это наш век…от этого никуда не спрячешься. И хочется, чтобы люди читали тебя не только дома со стационаров, но и в метро, в транспорте, используя подручные гаджеты. В своем посте я описала те ошибки, которые видны через разные сервисы. Может быть кому-то это будет полезно. Вот ты пишешь об оптимизации страниц для мобильных устройств, а ты знала, что украшения нового года на твоем блоге закрывают практически пол экрана контента на мобильном устройстве!!! Мне было даже тяжело писать этот комментарий, так как не видел поле для сообщения. Обрати внимание на это дело. Зайди на сайт с телефона и впечатлись сама. Ты знаешь, я как раз об этом и написала в своем посте…ты видимо не заметил один мой скрин, на котром я красным написала о тяжелом новогоднем скрипте, который закрывает всего лишь четвертую часть экрана-верхнюю часть шапки моего блога и все. А весь мой текстовый контент и видео видны превосходно. Гуглу лично все понравилось, несмотря на все эти новогодние мотни вверху сайта…Но ведь хочется же вас чем-то порадовать, поднять хотя бы чуточку вам настроение. Новый год уже стоит на пороге! Я права, мой хороший?.. Через пару дней ждите от меня крутую статью по оформлению блога к Новому Году! Да, Елена, ты порадовала меня праздничным настроение и это главное Кстати, сейчас гирлянда закрывает меньшую часть экрана, чем раньше. Ты что то сделала, поменяла? Тебе же понравилось быть на моем блоге? А это самое главное-чтобы гостям приятно было. А гирлянду я вообще не трогала, как висела эта новогодняя мотня, так и висит. И закрывает она только вверху шапку чуточку и все. А тексты видно отлично! А как, кстати, тебе мой ПЕТУХ под нарядной ёлочкой справа в сайдбаре сайта? Ну да…закачал плагин, активировал его и усё. Гугл счастлив, Яшка доволен и у тебя нет никаких проблем с адаптацией под мобилы. Я предпочитаю адаптивный дизайн. Сейчас уже не помню где точно, но на каком то форуме уж очень негативно отзывались по поводу описанного вами плагина. Сам правда не пользовался им так что не знаю. Как то использовал модуль плагина Jetpack для формирования мобильной версии сайта, в принципе справлялся довольно неплохо. Виталий, в своей статье я провела анализ одного из своих сайтов, причем в разных сервисах. И везде получила разные результаты. Но все это ответы спeциалистов, которые занимаются вплотную этой темой. Главное, что я получила в итоге- это вполне корректное отображение всего моего контента сайта, в том числе и виджетов в правом сайдбаре. На смартфонах моем и мужа наш сайт смотрится и читается великолепно! Хотела вам еще фотки скинуть с двух наших смартфонов, чтобы было еще нагляднее. Потом передумала…и так картинок выше крыши в посте. Благо, что объем дискового пространства на моем сервере огромный-можно что угодно теперь и сколько угодно теперь там размещать медиа файлов. А плагин сделал свою работу на 5 с плюсом, спасибо ему. Гоша доволен, Яша тоже. А про плагин Jetpack почитаю, спaсибо вам! Email не будет опубликован обязательно. Вы можете использовать эти теги: Если Желаете, то Добавьте Изображение JPEG. После получения доступа Вы узнаете фишки сео-оптимизации видео, способы продвижения их в ТОП и секреты раскрутки Вашего личного Бренда на YouTube! Узнайте все подробности об этой Чудо-Системе из моей рассылки. КУПИ МЕНЯ всего за рублей! И размещай свои партнерские ссылки во всех социальных сетях БЕЗ ПРОБЛЕМ! Главная Блог Мои статьи Обо мне Обратная связь. Приветствую Вас, мой Друг! Расскажите о ней своим друзьям! Подпишитесь На Обновления Этого Блога! Правильная оптимизация статей на блоге-залог успешного продвижения в топ. Как запретить индексацию сайта и для чего это нужно? Сео оптимизация изображений или как угодить поисковым роботам. Нажмите, чтобы отменить ответ. Этот БЛОГ читает весь мир! Лайфхак к Международному Женскому Дню 8 марта! Lety Shops вместе с AliExpress экономит Ваши деньги! Как быстро похудеть к 8 марта с помощью японской диеты 14 дн Приветствую Вас, мои дорогие читатели! Как сделать и сохранить резервную копию бэкап своего канал Предположим, что Вы заядлый видеоблоггер…. Единицы измерений для интернет пользователя Инструкция партнеру — в ПОДАРОК! Хотите спрятать любые свои Партнерские Ссылки - ПРЯТАТЕЛЬ ССЫЛОК PRO Вам поможет! Блог о SEO 1.


А133 иваново расписание сеансов
Энтузиастов 30 с вднх как доехать
Чанишева трудове право підручник
Новости холостяк 5 россия
Как стать ниндзя фото
Слоеное тестос сыром рецептс фото
Перевод денег на карточку без комиссии
Составьте схему или таблицу по материалам параграфа
14 days science for girls перевод
Образец искового заявления аренда
Инструкции по применению средств индивидуальной защиты
Чемпионат мира по футболу расписание матчей 2014
Из скольких разделов состоит
Приказ минздрава рф 329от 16.06 2017
Видео которые можно сделать шпагат с растяжкой
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment