Верстка

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

Ноябрь 14, 2016Как сделать адаптивный дизайн сайта

Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!

Некоторое время назад я обновил свой блог, создав с нуля полностью тему для wordpress. О том как это произошло я писал в статье » Глобальное обновление и реорганизация моего сайта«. Одна из главных задач при создании нового шаблона — это адаптивная верстка сайта под все разрешения экрана.

Краткий план статьи:

  1. Как сделать адаптивную верстку сайта
  2. Адаптивная верстка CSS media запросы
  3. Самые важные разрешения экрана, при адаптивной верстке
  4. bootstrap адаптивный дизайн
  5. Проверка адаптивности сайта

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

Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная верстка сайта с помощью CSS.

Как сделать адаптивный дизайн сайта

Как сделать адаптивную верстку сайта


Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы


Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

@media screen and (min-width: 1440px) and (max-width: 1599px){     }

Это код означает, что стили заключенные между «{    } » будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

Самые важные разрешения экрана, при адаптивной верстке

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

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

bootstrap адаптивный дизайн


Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

<div class="col-md-8 "></div>
<div class="col-md-4"></div>

Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

<div class="col-md-10 col-md-offset-1  "> </div>

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

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

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


Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

Я для этих целей рекомендую использовать следующий онлайн сервис — http://quirktools.com/screenfly/. Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.

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

 

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

С уважением,
Артем Губтор.

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

Ноябрь 12, 2016Что такое адаптивный дизайн сайта

Уважаемые читатели, добро пожаловать на блог Артема Губтора.

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

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

Адаптивный дизайн сайта это

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

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

Что такое адаптивный дизайн сайта

Зачем нужен адаптивный веб-дизайн?

1)У разных интернет пользователей разные устройства. Люди используют разные гаджеты для выхода в интернет, естественно, что у всех разные экраны, мониторы и их размеры и разрешения. Если дизайн не адаптивный, то он будет удобен только для одной группы пользователей. А кто захочет сидеть на кривом сайте? И как им объяснить, что у их устройств просто не то разрешение, для которого сделан дизайн?

2) Выход в интернет с мобильных устройств. Это уже давно не новость, что трафик с мобильных устройств растет неимоверно. И адаптация сайта к таким гаджетам уже не вопрос предпочтения. Хотите видеть свой ресурс в ТОПе поисковиков, адаптируйте его под мобильники.

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

Отличие адаптивного сайта от мобильной версии (приложения) сайта

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

1) Мобильную версию/приложение нужно создавать отдельно для каждого типа операционной системы. На это нужно выделить дополнительное время и средства.

2) Приложения нужно загружать и устанавливать. Далеко не все пользователи готовы тратить на это свое время и занимать место на своем устройстве. Исключение в этом случае – реально полезные приложения, которые часто используются.

3) Где трафик? Используя приложение, пользователи не посещают ваш сайт, они «посещают» приложение. Получается, что часть ваших посетителей учитываться не будут и поисковики будут думать, что ваш ресурс не такой уж интересный.

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

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

Адаптивный дизайн

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

 

Принципы адаптивного дизайна

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

Этапы создания адаптивного дизайна:

  • Разработка на ранних этапах для мобильных устройств («mobile first»);
  • Использование макета в виде сетки для гибкости (flexible, grid-based layout);
  • Адаптивные картинки (flexible images);
  • Использование медиа запросов в CSS (media queries);
  • Доработка до совершенства.

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

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

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

С уважением,
Артем Губтор.

Верстка сайта что это. Объясняю для новичков

Ноябрь 11, 2016Верстка сайта

Приветствую вас, уважаемые посетители блога Royal-Site.ru

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

Верстка сайта — это красивое, правильное и грамотное расположение всех блоков и элементов сайта.

Верстка сайта что это

Обычно верстальщики работают с уже готовым дизайном. То есть верстальщик и дизайнер — это разные люди, у которых разные задачи.

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

Верстка сайта

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

CSS верстка сайтов

Сейчас для верстки используют такие технологии! Только успевай учится и применять. Но все же как ни крути база для верстки это CSS ( Cascading Style Sheets — каскадные таблицы стилей).

Основа верстки строится на прописывании стилей для каждого элемента сайта. Стили можно прописывать внутри тегов  HTML параметром style=» (тут пишут стили)» . Например:

<div style="width:100%; height:200px; color:#fff;">Это блок с какой то информацией</div>

Но чаще всего, для удобства и быстрой работы сайта, все стили сайта собирают в файле с расширением .CSS и подключают эти внешние стили на страницах сайта между тегами <head></head> таким образом:

<head> <link href="style.css" rel="stylesheet"> </head>

В параметре href=»» нужно указать путь к вашему файлу стилей CSS . Можно также указывать несколько файлов для страницы вот так:

<head> 
<link href="style.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>

Каким образом прописываются стили в файле с расширением .CSS?

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

Указываются эти классы и id так:

<a href="#" class="ssilka"> Ля ля ля</a> 
<a href="#" id="menu-link"> Тополя</a>

Наименования классов и id произвольны, но должны быть прописаны только латинскими буквами и цифрами.

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

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

Для классов это указывается так:

.class-name{ тут прописываются стили}

Для id :

#id-name{тут прописываются стили}

Вот кусок стилей из моего файла style.css

.cod { 
color: #124377;
border-radius: 5px; 
border: 1px solid #A58888; 
background-color: #fff; 
width: auto; 
}
.zayavka{
 width:100%; 
float:left; 
background: #093e43; 
color: #fff; text-align:center;
font-size:150%; padding: 3%;
} 
.zayavka a{
 color: #fff;
 }

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

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

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

Если что то непонятно, пишите в комментариях, спрашивайте, помогу чем смогу.

Ребята, подписывайтесь на новые статьи, чтобы быть в теме новостей блоггинга и веб-мастерства.

С уважением,
Артем Губтор.