Ответ
Адаптивный веб-дизайн для мобильной SEO стратегии Опции темы
Старый 30.10.2014, 21:59
  #1
Tallulah
 
Регистрация: 23.07.2014
Сообщений: 74

Адаптивный веб-дизайн для мобильной SEO стратегии
Если вы какое-то время работали в области веб-дизайна, то, наверняка, вам знаком такой термин, как «адаптивный дизайн» или «адаптивный веб-дизайн» (RWD).

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

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

Что такое адаптивный веб-дизайн (RWD)?

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





Почему RWD так важен?

Если вы считаете, что SEO является важным фактором, который помогает вам выделить ваш сайт на фоне конкурентов, то я назову вам причины, почему адаптивный дизайн имеет такое значение.

Легко читать

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

Легко индексировать

RWD любят и поощряют большинство поисковых систем, например, Google. Это объясняется тем, что веб-сайты, на которых принят адаптивный дизайн имеют только один URL и одну и ту же HTML-разметку. Это делает индексацию, поиск и управление контентом намного проще и эффективней.

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

Легко делиться

Сегодня поделиться статьей, информацией, графикой и другими материалами намного проще благодаря социальным медиа платформам, как Facebook, Twitter, Google Plus, Linkedin и так далее. Таким образом, для того чтобы получить максимальные преимущества от социального шаринга крайне необходим адаптивный веб-дизайн сайта. Благодаря такому дизайну посетителям будет намного проще поделиться контентом и ссылками, которые есть на едином сайте, чем контентом, который располагается на отдельной, мобильной версии.

Легко контролировать

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

Управление одним сайтом и проведение только одной SEO кампании оказывается намного проще. И это главное преимущество адаптивного веб-сайта, по сравнению с отдельной мобильной версией сайта.

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

Я предполагаю, что вы уже владеете некоторыми базовыми знаниями CSS3 и HTML.

Базовые концепты CSS3 и HTML обсуждались в статье «Создаем свою первую веб-страницу с HTML и CSS».

Приступим!

Создаем резиновую верстку макета

Резиновая сетка по определению является гибкой и адаптивной к ширине экрана.

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

(Цель/Контекст) Х 100% = Результат


Например, предположим, что у вас есть дизайн с шириной 1 000 пикселей, это и есть контекст в нашей формуле. Наш целевой элемент – это боковая панель с шириной 300 пикселей. Получается, что ширина боковой панели будет 30%, правильно? Это соответствует нашей формуле, так как 300 разделить на 1 000 равно 0.3, а 0.3 умножить на 100% получается 30%. Вот такой математический расчет:





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

Медиазапросы

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

Для этого сначала нам нужно создать точки останова

Точки останова

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

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

Разные значения величин ширины, о которых мы здесь сказали (480, 768 и так далее), обычно и являются точками останова в адаптивном дизайне.

Как именно создать точки останова?

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

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

Вообще, ограничений в количестве точек доступа нет, это только ваше решение.

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

Мобильные устройства или компьютер: что вначале?

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

Сначала мобильные устройства





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

Вот базовая структура стиля для такого подхода:

/* place styles for mobile and basic styles for all devices here */
body{
	/* properties for body here  */
	
	}
/* medium display only */
@media (min-width:481px) and (max-width:768px){
	body{
		/* properties that only apply to tablets */
		}
	}
/* large display only */
@media (min-width:769px){
	body{
		/* properties that only apply to desktops */
		}
	}
Сначала компьютеры





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

Вот базовая структура стиля при таком подходе:

/* place styles for desktop and basic styles for all devices here  */
body{
	/* properties for body here  */
	
	}
/* smartphone display only */
@media (max-width:480px) {
	body{
		/* properties that only apply to smartphones */
		}
	}
/* tablet display only */
@media (max-width:768px){
	body{
		/* properties that only apply to tablets */
		}
	}
Как добавлять медиазапросы внутри таблицы стилей?

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

Встроить медиазапрос в таблицу стилей напрямую

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

/* embed the media query in the style sheet */
/* tablet display only */
@media (max-width:768px){
	body{
		/* properties that only apply to tablets */
		}
	.style1{
		/* class name style1 properties are placed here */
		}
	.style2{
		/* class name style2 properties are placed here */
	}
}
Ссылка на другую таблицу стилей

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

/* link to a new style sheet using media queries */
<link rel ="stylesheet" type = "text/css" media="(only screen and max-width: 768px)" href="tablet-device.css" />
Директива @Import

Директива @Import позволяет вам включать дополнительные внешние таблицы стилей внутри внутренней или внешней таблицы стилей. Вы также можете применять директиву @Import с медиазапросом. Как и в примере выше, вы можете добавить следующий код, чтобы включить внешнюю таблицу стилей под названием tablet-device.css:

/* use the @import directive */
@import url(css/tablet-device.css) (max-width:768px);

Инструменты для адаптивного веб-дизайна

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

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

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

Foundation

Foundation от ZURB – это один из самых продвинутых адаптивных фронтэнд фреймоворков в мире, аккуратный и простой. В нем есть две главные характеристики: базовый дизайн для мобильных и адаптивный дизайн. Эти характеристики позволяют вам создавать адаптивный веб-дизайн быстро и эффективно, при этом вам не придется переделывать проект с самого начала.

Для работы с Foundation у вас должны быть базовые знания:

• HTML
• CSS
Sass

Bootstrap

Bootstrap был разработан командой Twitter, и это еще один фреймворк с базовым мобильным дизайном. Он считается одним их лучших CSS фреймворков для создания адаптивного веб-дизайна.

Для работы с Bootstrap у вас должны быть базовые знания:

• HTML
• CSS
Less

Dreamweaver CS6/CC

Adobe Dreamweaver CS6/CC имеет новую опцию, которая называется «резиновая сетка для верстки». Благодаря этой опции дизайнеры могут визуально управлять версткой страницы для разных размеров экрана. Вы можете использовать структуру сетки, модифицировать ее и затем вставлять области страницы в сетку.

Вывод

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

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отслеживаем адаптивный дизайн с Google Analytics annasty Сервисы 0 14.10.2014 11:06
B2B контент-маркетинг: документация стратегии luxurious Магазины 0 07.10.2014 18:12
5 плагинов для мобильной версии WordPress сайта Tallulah Сервисы 0 25.09.2014 11:35
Простые шаги к правильной мобильной оптимизации 0pium Mobile 0 14.04.2013 13:09
Мануал по работе с мобильной CMS JohnCms alex.sakov Хостинг 0 05.11.2012 16:49

Метки
css, html, адаптивный дизайн, верстка, фреймоворки


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 23:44. Часовой пояс GMT +3.