Приветствую, мои уважаемые читатели блога. На связи Галиулин Руслан. Сегодня будем говорить про мобильные версии сайтов которые должен иметь каждый сайт или блог чтобы продвинуться в ТОП поисковых систем. В статье дам коды стилей и готовые примеры верстки страниц, которые сможете скачать к себе на компьютер.

Если Ваш сайт до сих пор не мобилен, рекомендую воспользоваться моими советами или обратиться к профессионалам - http://www.Mobile-version.ru которые сделают все по стандартам поисковых систем. По этой же ссылке можно и проверить свой сайт на мобильность.

В 2013 году Google начал давление на вебмастеров (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html ), убеждая в необходимости создания облегченных модификаций сайтов, а с 2015 года мобильность стала одним из аспектов ранжирования (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ). Не отстает и Яндекс, создавший специальный алгоритм «Владивосток», учитывающий пригодность сайта для просмотра с телефонов.

Mobile Friendly сегодня - это не просто забота о посетителях, а непременное условие продвижения.

Когда сайт создается с нуля, применяют подход Mobile First. Но у большинства в наличии старые рабочие проекты. Главный вопрос, который в таких ситуациях вызывает мобильная версия сайта - как сделать ее, не испортив имеющийся шаблон?

Есть три подхода:

• Отдельный адрес и макет - размещается на поддомене вида m.site.ru. Перенаправление происходит посредством серверного редиректа по юзер-агенту.
• Адаптивный дизайн - url и html остаются теми же, что и в настольном формате, но в CSS медиа-запросами отдаются правила для разных экранов.
• RESS - респонсивный дизайн, адрес остается прежним, но сервер посылает наборы стилей в зависимости от того, какой тип оборудования запрашивает страницу.

Для владельцев старых проектов оптимальный выбор - использование адаптивной верстки. Как это сделать своими руками и без использования небезопасных плагинов, рассмотрим пошагово.

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

Дальнейшие действия потребуют уверенных базовых знаний html и css или умения быстро гуглить непонятные вещи.

Информация для новичков: в CSS слова перед фигурными скобками означают конкретные куски html файла, за отображение которых они отвечают. Пишутся чаще с точкой или решеткой - #место {свойство: значение;}.

Шаг 1. Снимаем ограничения.

Владельцы резиновых макетов могут пропустить этот шаг. Остальным придется потрудиться.

Width - ищем в коде крупные участки с жестко заданным отображением. Если параметр указан в пикселях или пунктах - нужно сменить его значение на проценты, em и прочие единицы, восприимчивые к окружению. Часто главный контейнер или область контента имеет фиксированный width - в большинстве случаев ограничения снимаются его заменой на max-width.

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

img {

Max-width: 100%;

Height: auto;

Таблицы - полную адаптивность задать не получится, но можно сделать страницы с ними пригодными для мобильных устройств, добавив этот код:

table {

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Обтекания - задаются свойством float. Установка этого параметра позволит блокам перемещаться в зависимости от параметров окна, подстраиваясь под элементы с устойчивой позицией или в рамках родительских контейнеров. Стандартные div-элементы по умолчанию переводятся каждый на новую строку. Например, разместив в контейнере 1000 px div-блоки по 200 px, можно увидеть такую картину.

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

Шаг 2. Планирование реорганизации контента.

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

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

Шаг 3. Удобство.

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

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

Сенсоры: пальцы не так точны, как мышка, оставьте им достаточно места. Пространство вокруг ссылок и иных активных элементов должно составлять не менее 28 х 28 пикселей.

Помогайте своим посетителям определить активное пространство - отступы, выделения, смена цвета и прочие вещи, которые можно задать для касаний, прописывайте псевдокласс hover для ссылок и кнопок.

Реализация Media Queries с примерами

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

Media queries - логические выражения, обращение к ним подразумевает ответ с параметром true или false. Если результат запроса true, то есть, юзер-агент или размеры устройства соответствуют заданному типу носителя, то автоматически применяются правила стиля, указанные внутри media-блока.

Медиа запросы можно назначать по параметрам:

• ширина и высота окна браузера;
• ширина и высота устройства;
• ориентация - ландшафтный или портретный режим;
• разрешение экрана.

Актуальный список аргументов доступен в официальной спецификации.

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

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

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

Для исправления убираем фиксированные рамки, прописав в стили шаблона:

@media only screen and (max-width: 1000px) {

Nav { width: 100%; }

Теперь если ширина экрана юзера составляет менее 1000 px, то width меню будет равен 100% его размера. Основная версия шаблона при этом выглядит, как прежде. Замена свойства убрала нижнюю полосу прокрутки при сжатии экрана.

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

Дописываем в тот же самый медиаквери:

Block { width: 35%;}

Как узнать оптимальные размеры для блоков своего сайта? Считать вручную или взять за основу любую готовую сетку - fluid grid. Можно ориентироваться на имеющиеся стандарты: в двухколоночных макетах при ширине окна 980-1050px обертка принимается за 95%, контент - 60% и на сайдбар оставляют 30%. Оставшееся пространство уходит на формирование бордюров и margin для аккуратности.

Впрочем, можно применить box-sizing для контента, чтобы не высчитывать каждый раз пиксели, а работать по общим габаритам.

Переходим к заданию отображения на экранах с меньшим разрешением:

@media only screen and (max-width: 600px) {

Block {

Float:none;

Width:85%;

Margin: 1em auto;

Если экран менее 600 px, то наши блоки должны встать в одну колонку - убираем обтекания, задаем новые отступы, оцентровываем и меняем ширину. Чаще ставится 100%, но если это по каким-то причинам неудобно, устанавливаем свой размер.

Так задавать можно не только габариты блоков контента, но и их отображение. Например, запретить показ крупных элементов, заменив их на любые удобные.

Продемонстрируем возможности на примере смены цветов и отображений.

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

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

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

Объявить @media правила можно в любом месте внутри существующей таблицы стилей или создать отдельную для этих деклараций, а затем импортировать ее в основной CSS с помощью @import-правила.

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

Медиаквери понимают все современные браузеры, но это не сработает в IE 8 и ниже. Проблема решается обращением к старым IE посредством условных комментариев. Их нужно прописывать в коде шаблона, а не в CSS.

Сам скрипт доступен на гитхабе (https://github.com/scottjehl/Respond ), добавляет в старые IE поддержку минимальных и максимальных габаритов и медиаквери.

Еще одна проблема - адаптивный дизайн подразумевает использование Html5, который опять же непонятен старым браузерам. Лечится хаком:

Document.createElement("header");

Document.createElement("nav");

Document.createElement("section");

Document.createElement("article");

Document.createElement("aside");

Document.createElement("footer");

Код прописывается в html, дополнительно в CSS устанавливается блочное отображение созданных элементов:

header, nav, section, article, aside, footer {display:block;}

Сразу же затронем вопрос - как сделать, чтобы некоторые скрипты отображались лишь при заданных параметрах экрана. Если стоит jquery, в код шаблона потребуется добавить простенький скрипт. Цифры меняются на необходимые. Читается так: если ширина окна превышает 980 пикселей, к странице применяется скрипт, указанный в пути. Можно задать несколько, синтаксис пишется по аналогии через точку с запятой внутри фигурных скобок.

If ($(document).width() > 980) {

$.getScript("путь к скрипту");

Еще один момент - как мобильный браузер айфона должен обрабатывать отдаваемый контент, разрешено ли его увеличение. Для этого в head прописывается инициальная шкала:

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

Если сайт переверстывается на локальном сервере, корректность можно определить в ami.responsivedesign.is . Владельцам денвера для верного отображения потребуется сменить кодировку на utf-8, отредактировав серверный файл httpd.conf.

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

Дополнительно шаблон тестируется https://developers.google.com/speed/pagespeed/insights/ или в спецформе https://www.google.com/webmasters/tools/mobile-friendly , а также в вебмастерских.

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

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

Ниже нажав на одну из кнопочек вы сможете скачать 2 примера страницы свертанной в данном уроке и уже просто работать с готовыми страницами и копировать код.

С уважением, Галиулин Руслан.

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

ВКонтакте мобильная версия

Кроме экономии трафика, облегченный вариант сайта помогает “разгрузить” работу ПК со слабыми характеристиками. Чтобы зайти на мобильную версию ВК через ПК, достаточно набрать адрес в формате https://m.vk.com/ , а не https://vk.com/. Перед нами появляется упрощенный (в сравнении с полной компьютерной версией) интерфейс. Есть необходимые поля для ввода телефона или e-mail, использующихся в качестве логина, и пароля. Никакой лишней информации, никаких картинок.

Поля для ввода учетных данных

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

В мобильной версии VK через компьютер можно:

• переписываться с друзьями;
• просматривать видеозаписи;
• знакомиться с новыми комментариями и ответами в разделе “Уведомления”;
• читать информацию в группах;
• прослушивать музыку и многое другое.

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

Но это не единственный способ доступа к мобильной версии ВК через компьютер.

Вход в мобильную версию ВК на компьютере через Google Chrome

Если пользователь для работы в интернете предпочитает браузер Google Chrome и желает просматривать ВК в мобильной версии, то можно применить инструменты разработчика. Открываются они следующими способами:

• клавишей F12;
• сочетанием кнопок Ctrl + Shift + I;
• входом в меню (три вертикальные точки в правом верхнем углу сайта), затем “Дополнительные инструменты” и “Инструменты разработчика”.

Потом нужно одновременно нажать Ctrl + Shift + M либо кликнуть по иконке Toggle device toolbar.

Открываем Toggle device toolbar

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

Отображение страницы как на экране телефона

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

Выбираем гаджет

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

Выбираем гаджет

Этого мало? Внизу списка есть кнопка Edit (редактировать), при нажатии на которую открывается перечень различных мобильных устройств. Ставим галочки напротив нужных нам моделей смартфонов, айфонов, планшетов, чем добавляем их в основной список для последующего выбора.

Устанавливаем масштаб страницы и другие значения

После названий гаджетов и параметров разрешения экрана видим zoom – масштаб выставляется в пределах 50–150% (после нажатия на стрелочку рядом с установленным значением). В следующей вкладке мобильную страницу ВК можно отключить от интернета (режим offline) и заново подключить (online). И, наконец, нажимая на значок вращения, мы поворачиваем открытое окно сайта так, как нам удобно – в вертикальное либо горизонтальное положение.

Управляем отображаемой областью

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

Такой же способ отображения мобильной версии ВК на компьютере можно применить и в Яндекс.Браузере. Есть только одно отличие – в вызове инструментов разработчика из главного меню. Необходимо зайти в него (три горизонтальные полоски в правом верхнем углу страницы), затем “Дополнительно”→”Дополнительные инструменты”→”Инструменты разработчика”. Кнопка F12 и сочетание клавиш Ctrl + Shift + I работают так же, как и в Google Chrome.

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

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

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

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

Есть мнение, что самый лучший дизайн - тот, который максимально хорошо и удобно смотрится на большинстве устройств в неизменном для глаза виде. По крайней мере, я к этому стремился.

В итоге, пользуясь самым распространенным мобильным браузером под Android - Google Chrome и видя явно «урезанную» внешне страницу какого-либо сайта, мне постоянно приходилось ставить в «Настройках» галочку «Полная версия». Сделать такую настройку постоянной оказалось в Chrome невозможно. Для некоторых сайтов показ «полной версии» запоминается, для других - нет, для третьих (например, МТС) вообще не срабатывает. В определенный момент с меня этого хватило. Пришлось искать альтернативу.

К сожалению, мой любимый настольный Mozilla Firefox , в котором так удобно работать на ПК с исходным кодом, в мобильном варианте меня огорчил - не понравилось масштабирование шрифтов, а система отключения «мобильных версий» в нем аналогична Chrome и не постоянна.

Браузер Opera для Android. Скачав его на свой смартфон, я, наконец, решил данную проблему. Прежде всего, речь идет не об Opera Mini, которая пусть и сжимает трафик, но крайне убога в своей реализации, т.к. не понимает многие скрипты и стили, искажая привычный дизайн современных сайтов. Мы говорим о полной версии мобильной Opera. Для желающих экономить трафик и сжимать картинки - в ней тоже есть режим «Турбо» (Opera Turbo), так что просто активируйте его в «Настройках». Там же вы найдете и нужный нам пункт:

User agent: «Мобильное устройство» или «Настольный компьютер».

По умолчанию стоит «Мобильное устройство». Выбираем «Настольный компьютер».

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

К счастью, браузер Opera меня устроил и в других отношениях: удобная настройка «Вид приложения» - «Телефон», «Классика» или «Планшет» настраивает отображение дополнительных кнопок и меню. Шрифты масштабируются как надо, странички выглядят опрятно и читаемо.

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

Один тап и все готово.

Статьи с пометкой «ФИШКА» включают короткие рецепты для активации малоизвестных функций в операционных системах iOS, OS X и в гаджетах Apple. Если вы уже знали об этом – мы с гордостью вручаем вам виртуальную медаль «продвинутого пользователя». Давайте подарим возможность получить такую награду и другим читателям;)

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

Одна из проблем, с которой сталкивается активный пользователь iPhone – открытие веб-страниц в мобильной версии верстки. В браузере Safari для перехода в полноразмерную версию предусмотрена два варианта:

Долго? Согласен! И есть прекрасная альтернатива этому способу :

2 способ. Быстрый:

Открыв веб-страницу браузере Safari, тапните по значку Обновить и не отпускайте палец в течение нескольких секунд.

Откроется всплывающее меню с предложением перейти в Полную версию сайта .

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

Для включения мобильной версии сайта закройте текущую вкладку со страницей и перейдите по ее адресу повторно.

сайт Один тап и все готово. Статьи с пометкой «ФИШКА» включают короткие рецепты для активации малоизвестных функций в операционных системах iOS, OS X и в гаджетах Apple. Если вы уже знали об этом – мы с гордостью вручаем вам виртуальную медаль «продвинутого пользователя». Давайте подарим возможность получить такую награду и другим читателям;) Мобильная операционная система iOS...