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

различные версии сайта

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

Скачать исходники для статьи можно ниже

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

широкоформатная версия сайта

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

Перед тем как начать создавать мобильную и широкоформатную версию сайта стоит упомянуть об очень полезном онлайн сервисе, позволяющем просмотреть ваш сайт в разных разрешениях экрана (мобильном, стандартном, широкоформатном и т.д.) — это Screenfly:

«quirktools.com/screenfly/»

онлайн сервис

Недавно писал статью про Онлайн сервис Google – PageSpeed Insights – ускоряем загрузку сайта — и при анализе своего сайта «дядя Google» дал моему сайту — 60 баллов из 100 — ссылаясь на мелкий шрифт текста, мелкий размер активных элементов и область просмотра — думаю это тоже в какой-то мере влияет на ранжирование позиции в поисковике…

Еще в комментариях был вопрос - А как сделать эти кнопочки прозрачными (плавающие кнопки социальных сетей)? Просто когда с телефона на сайт заходишь они мешают. Спасибо!

Поэтому и мобильная версия сайта, также очень важна!

Создаем мобильную, широкоформатную версию сайта без плагинов:

В большинстве сегодняшних wordpress тем используется следующая простая технология создания мобильной и другой версии сайта — в файле стилей (style.css) добавляется следующий тег:


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

...

}

Вышеуказанны код означает, что для дисплеев с максимальным разрешением экрана в 320px использовать следующие стили оформления.

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

Отличный пример использования данного метода можно увидеть в стандартной теме wordpress, например, Twenty Fourteen (в ней уже сделан акцент на широкоформатные экраны), вот кусок кода её файла стилей:

@media screen and (max-width: 400px) {
	.list-view .site-content .post-thumbnail {
		background: none;
		width: auto;
		z-index: 2;
	}

...
@media screen and (min-width: 810px) {
	.attachment .entry-attachment .attachment {
		margin-right: -168px;
		margin-left: -168px;
		max-width: 810px;
	}
...
@media screen and (min-width: 846px) {
	.content-area,
	.content-sidebar {
		padding-top: 72px;
	}
...
@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 182px;
	}
...
@media screen and (min-width: 1040px) {
	.site-content .has-post-thumbnail .entry-header {
		margin-top: -48px;
	}
...

@media screen and (min-width: 1080px) {
	.search-box .search-field {
		width: 324px;
	}

...

@media screen and (min-width: 1110px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (min-width: 1218px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		margin-right: 54px;
	}
...

@media screen and (min-width: 1260px) {
	.site-content blockquote.alignleft,
	.site-content blockquote.alignright {
		width: -webkit-calc(50% + 18px);
		width:         calc(50% + 18px);
	}

...

Как видите тема учитывает разрешения от 400px до 1260px.

Для примера, можете добавить в файл стилей своего сайта (style.css) код для окрашивания ссылок на вашем сайте в красный цвет для разрешения экрана не более 641px в ширину:

@media screen and (max-width: 641px) {
   
	a {
	color: #fe0321;
	}
}

Далее смотрим с помощью онлайн сервиса «quirktools.com/screenfly/» на результат работы кода.

А теперь рассмотрим интересные wordpress плагины для создания мобильной, широкоформатной версии сайта:

1. WPtap Mobile Detector

Плагин достаточно давно не обновлялся: 2010-5-26
Загрузок: 46,150
Сайт плагина: “wordpress.org/plugins/wptap-mobile-detector/”

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

2. JetPack
Последнее обновление: 2014-5-22
Загрузок: 10,572,485
Сайт плагина: «wordpress.org/plugins/jetpack/»

3. WPtouch
Последнее обновление: 2014-6-5
Загрузок: 5,510,676
Сайт плагина: «wordpress.org/plugins/wptouch/»

4. WordPress Mobile Pack
Последнее обновление: 2014-6-11
Загрузок: 572,616
Сайт плагина: «wordpress.org/plugins/wordpress-mobile-pack/»

5. WP Mobile Edition
Последнее обновление:2014-5-16
Загрузок: 40,671
Сайт плагина: «wordpress.org/plugins/wp-mobile-edition/»

6. Wapple Architect Mobile Plugin
Последнее обновление: 2013-9-4
Загрузок: 112,319
Сайт плагина: «wordpress.org/plugins/wapple-architect/»

7. MobilePress
Последнее обновление:2013-8-9
Загрузок: 217,085
Сайт плагина: «wordpress.org/plugins/mobilepress/»

8. Duda Mobile Website Builder
Последнее обновление:2014-6-10
Загрузок: 84,773
Сайт плагина: «wordpress.org/plugins/mobile-website-builder-for-wordpress-by-dudamobile/»

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

  1. Olunka

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>