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

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

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

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

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

В этой части я расскажу вам что лучше адаптивная верстка или мобильная версия сайта.

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

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

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

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

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

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

Адаптивная верстка и любое разрешение экрана

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

Не каждый верстальщик, да и владелец сайта имеет под рукой гаджеты с разными разрешениями экрана, для тестирования сайта на адаптивность. Иметь под рукой различные устройства, при этом каждое из них должно отличаться от другого разрешением экрана, не стоит. Т.к. есть различные сервисы или расширения для браузеров, для тестирования верстки на адаптивность. Например, есть расширение для браузера Google Chrome, оно называется Window Resizer . Расширение имитирует отображение сайта на различных экранах.

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

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

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

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

Тестирование адаптивной верстки

В данной части статьи, я расскажу вам как тестируется адаптивная верстка.

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

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

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

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

Адаптивная верстка и примеры к ней, нагляднее расскажут вам в чем она заключается.

Уроки по адаптивной верстке сайта

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

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

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

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

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

Что такое Media Queries в адаптивной верстке?

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

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

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

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

@media (max-width: 1010px) and (min-width: 992px)

Оформление css кода при адаптивной верстке

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

Допустим, вы выбрали некое разрешение экрана в плагине Window Resizer. При этом окно браузера изменилось – это означает, что такое окно браузера будет на другом гаджете, отличном от вашего. При этом появилась горизонтальная полоса прокрутки, чего быть не должно. Вам стоит сделать так, чтобы эта полоса прокрутки пропала, а при этом вся необходимая информация осталась. Для этого стоит убрать некоторые блоки или изменить порядок блоков, увеличить/уменьшить масштаб нужных вам элементов сайта. И это повторить для всех нужных вам разрешений экрана, тогда ваш сайт будет иметь адаптивность.

Например, нам нужно сделать адаптированную верстку для экрана с шириной 780 пикселей. Для этого пишем такой код в файле стилей @media (max-width: 780px ), в нем указываем необходимые свойства. Кто хочет файл с css стилями для данного запроса, может написать в отдельном файле и подключить его к главному стилевому файлу. Пример записи стилей для экрана в 780 пикселей:

@media (max-width: 780px) {

.text1 {

  float: none;

  width: 100%;

  margin: 0 0 5px 0;

  overflow: hidden;

}

.text2, .text3 {

  width: 49%;

}

.text_image {

  height: 100px;

  padding-top: 72px;

}

img {

  width: 100px;

  min-height: 100px;

  border-radius: 10px;

}

}

Написав код для одного разрешения, можно переходить к другому разрешению, а именно 650 пикселей. Опять воспользуемся уже известным нам плагином для браузера и выставим ширину окна браузера 650 пикселей. На сайте снова что-то «съехало». Пишем медиа запрос так @media (max-width: 650px) и уже в теле этого запроса пишем css свойства чтобы поправить, то что съехало. Опять масштабируем, «ставим» блоки на свои места. Продемонстрирую код для максимальной ширины экрана в 660 пикселей. 

@media (max-width: 660px) {

.logo {

  float: none;

}

.menu {

  float: left;

  width: 100%;

}

.text1, .text2, .text3 {

  float: none;

  width: 100%;

  margin: 0 0 5px 0;

  overflow: hidden;

}

.text_image {

  float: none;

  width: 80%;

  height: 100px;

  padding-top: 72px;

  margin-bottom: 5px;

}

img {

  float: none;

  width: 50%;

  min-height: 100px;

  border-radius: 10px;

}}

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

@media (max-width: 510px) {

.wrapper_text {

  margin-top: 50px;

  width: 100%;

  float: left;

}

.text_image {

  border: 1px solid #000000;

  height: 250px;

  width: 50%;

  padding-top: 222px;

  font-size: 14px;

  float: left;

}

img {

  float: right;

  width: 40%;

  min-height: 360px;

  border-radius: 50px;

}

.content {

  width: 100%;

  float: left;

}

.wrapper {

  margin-top: 5px;

  float: left;

  width: 100%;

}

.text1, .text2, .text3 {

  padding-top: 72px;

  height: 100px;

  width: 30%;

  float: left;

  border: 1px solid #000000;

}}

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

@media (max-width: 400px) {

.all {

  width: 80%;

  border: 1px solid #000000;

  max-width: 960px;

  overflow: hidden;

}

.logo {

  float: left;

  border: 1px solid #000000;

  height: 100px;

  width: 200px;

  line-height: 7;

  font-size: 14px;

}

.menu {

  float: right;

  border: 1px solid #000000;

  height: 50px;

  width: 60%;

}

ul {

  margin: 0;

}

li {

  list-style: none;

  float: left;

  width: 24%;

  height: 50px;

  margin-top: 14px;

  margin-left: 1%;

}}

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

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

https://www.google.ru/webmasters/tools/mobile-friendly/

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

Поисковая система Google говорит, что нужно разрешить доступ к различным файлам в файле robots.txt. Таким как, файлы стилей, различным плагинам для шаблонов (если вы делаете адаптивную верстку сайта работающего на cms), скриптам, а также картинкам используемых для оформления вашего сайта. Ниже приведена часть файла robots.txt открывающая доступ к необходимым файлам для Google:

User-agent: *

Allow: /wp-content/themes/*.css

Allow: /wp-content/plugins/*.css

Allow: /wp-content/uploads/*.css

Allow: /wp-content/themes/*.js

Allow: /wp-content/plugins/*.js

Allow: /wp-content/plugins/*.gif

Allow: /wp-content/uploads/*.js

Allow: /wp-includes/css/

Allow: /wp-includes/js/

Allow: /wp-includes/images/

Allow: /wp-content/themes/*.jpg

Allow: /wp-content/themes/*.png

psd-макет для адаптивной верстки

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

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

Разрешения экранов под которые стоит адаптивно верстать

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

  • Смартфоны начиная с ширины экрана в 320 пикселей (самые маленькое разрешение);
  • Планшетные компьютеры;
  • Компьютеры и ноутбуки с обычным монитором;
  • Компьютеры и ноутбуки с широкоформатным монитором в 1980 пикселей и больше;

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

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

Автор: Артемьев Сергей – пользователь данного форума

This site is using SEO Baclinks plugin created by InfoMotru.ro and Locco.Ro










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

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