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

Пример адаптивной верстки: один и тот же сайт, выглядит интуитивно-понятно на любых устройствах.

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

Для чего нужна адаптивная верстка?

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

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

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

Пример стандартного сайта:

1. Попасть пальцем по пунктам довольно проблематично;
2. Нужно все время двигать вправо-влево, чтобы просматривать страницу.

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

1. Перемещаемся только сверху вниз по экрану;
2. Нет необходимости изменять масштаб;
3. Все видно и логично понятно.

Как работает. Механизм

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

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

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

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

Особенности

Используя данную технологию, дизайн сайта отличается следующими моментами:

• Минималистичный дизайн;
• Отсутствие больших фоновых изображений;
• Не используем Flash (Flash не совместима с мобильными устройствами);
• Количество визуальных элементов минимально, акцент только на главном;
• Меню имеет небольшую вложенность.

Вывод

Анализируя динамику роста мобильных устройств в интернет-трафике напрашивается вывод, что через 1-2 года более 90% активных пользователей интернета будут использовать мобильные устройства. Кто-то как второй гаджет для выхода в интернет, помимо ноутбука и компьютера, треть – как основной. Оставлять без внимания такую огромную, и что главное, еще пустую, нишу – огромное упущение.

Если раньше была популярна фраза «Если вас нет в интернете – вас нет в бизнесе», то сейчас она становится актуальна по отношению к адаптивной верстке.

Адаптивные сайты

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

Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3.   Изучил его.
      ** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **

Новое в HTML5 и CSS3

Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3.

Пробую!

Верстал в кодировке «ANSI», и с полной служебной записью: «HTML 4.01 Transitional», вместо положенной по правилам HTML5:<!DOCTYPE html>

Новые тэги: header, section, article не использовал.  Оказалось, достаточно блочной вёрстки, как обычно на тэгах div.

Новый атрибут формы у тэгов input«placeholder» (подсказка) в браузере IE8НЕ сработал. В остальных — работает.

Аналогично.  Новый атрибут «типа» у тэгов input  type=»email» срабатывает только в современных браузерах.

Атрибут «value» использовал по-прежнему для внесения значений в формы.

Самое главное!  Сначала сайт верстается на обычном мониторе, а уже потом в тэг head вносится строчка кода:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Такая запись говорит браузеру (**так объясняется в курсе!), чтобы он правильно масштабировал контент страницы под используемое устройство.
Хотя, на самом деле, такая запись браузеруровным счётом ничего не говорит.  Это «обращение» к поисковикам.
А вот они уже о-о-очень «ревностно» относятся к наличию/отсутствию подобной записи в тэге head, особенно в последнее время.  Проверено!

Однако, нужно сказать, что современные браузеры мобильных устройств, похоже, научились всё же читать «чужие письма».

**К примеру.  Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и … … … . И тут же быстро убрал!

Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал «жуть», т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла.

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

* * *

Новый атрибут для тэгов img«srcset» в испытываемой версии «HTML 4.01»  не работает!

* * *

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

Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал.  Испытания же!

Примеры записей в таблице CSS

Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.

Свойство background-size: cover; лучше НЕ использовать. Рисунки «режутся», т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.

И напротив!

Свойство background-size: contain; работает ОТЛИЧНО!  Во всех браузерах! Оптимально для «центровых» рисунков. Оно их великолепно масштабирует под любой размер монитора.

Аналогично.

Это же свойство background-size: contain; сработало ОТЛИЧНО и для «боковых» рисунков, т.е. левых/правых. Пробовал!

Боковые рисунки выводил через тэги span, прописав им float: left или right, но ГЛАВНОЕ!
Главное, что выводил рисунок, как фоновый на 2 символа неразрывного пробела, дав тексту размер, равный высоте фонового рисунка(** уменьшив размер текста, рисунок уменьшается пропорционально, без искажений).

Схемы вывода ниже.

<span id=»proba8″>&nbsp; &nbsp;</span>   <— это HTML

span#proba8 {   <— здесь CSS
background: url(images/proba8.jpg) no-repeat;
float: left;
font-size: 240px;
background-size: contain;
margin: 0 20px;
padding-bottom: 0;
}

Пробный рисунок, выводимый по данной выше схеме, имел реальный размер 210х240px.

 Он хорошо адаптировался, и полностью отображался на мониторе с разрешением 120х150.

Всё работает!   НО!

Проверив использование такой схемы вывода на своём «Полигоне», обнаружил появление значительных пустот до и после рисунков, при просмотре страницы на смартфоне. Особенно это было заметно при вертикальном просмотре.  Даже!
Даже несмотря на то, что в правилах CSS ей было прописано: верхние/нижние отступы убрать!

Именно поэтому, все боковые рисунки для данной страницы выводил обычным способом, без всяких адаптивных «вывертов».

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

Правда, в этом случае боковые картинки выводятся чересчур большими, что не очень соответствует их центральным (адаптированным) «коллегам», но … … … .
Тут уж каждый сам выбирает, что лучше.   Я предпочёл из «двух зол» выбрать самое простое.

* * *

**И последнее.   Файл «обнуления» стилей «reset.css» к этой странице не подключал. Для таких простых сайтов он не нужен.  Да, и … … не люблю я его.  Пропи-и-сываешь потом всё заново.

Ну, а серьёзно — скорость загрузки. Каждый дополнительный файл — это обращение к серверу.

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

Теперь несколько строк об адаптации.

Сначала привёл пример записи кода для уменьшения двух полей ввода (имя и е-мейл) в тэгах формы до размеров в 200px (в случае их просмотра на мобильных устройствах) так, как это давалось в мини-курсе.   Странная запись!

media screen and (max-width:900px) {
    .subscribe input[type=»text»], .subscribe input[type=»email»] {
    width:200px;}}

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

@media (max-width:900px) {
    .subscribe input[type=»text»], .subscribe input[type=»email»] {
    width:200px;}}

И так далее. Неоднократно! Со всеми нужными размерами элементов, под все размеры мониторов, предполагаемых устройств просмотра.

*Prim.  Используя фиксированную ширину, лучше указать её максимальный размер.

Оптимальным для фиксированной ширины считается размер 1200px±

Эти «медиа-запросы» мне напомнили конструкцию if (условие) {выполнить} из языков: PHP и JavaScript.   Ими мы перестраиваем стили сайта в зависимости от размеров экранов.

Справка

Для корректной работы со шрифтами, советуют указывать их размеры не в «px», а в «em», и ещё сами шрифты брать из так называемых «безопасных шрифтовых стеков CSS».

Сделал в фотошоп специальный рисунок, из которого можно узнать, какие именно шрифты относятся к «безопасным», а главное — почему(?!):

Как эти, рекомендуемые единицы, соотнести к пикселю, видно ниже.

1em = 16px

Правда, нужно сказать, что такой перевод довольно «условен», хотя в мини-курсе об этом — ни слова!

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

Проба единиц для адаптивной вёрстки

Попробовал.  Некоторые размеры шрифтов прописывал через эти единицы. Работает!    Но мне привычнее иметь дело с пикселями. Вот ими и пользовался при вёрстке этой страницы.

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

Другими словами, размер пикселя у каждого устройства будет свой, и, если не «дёргаться» от одной единицы к другой, а всё выражать в одних единицах измерения, результат будет положительным!

Что, собственно, Вы и видите на своём устройстве, просматривая эту страницу.

Идём дальше.

Для нешрифтовых элементов: картинок, размеров блоков, советуют вычислять, и использовать проценты «%», а это уже иная техника подсчётов — в зависимости от размеров «блока-родителя».
Короче — «геморрой жуткий».

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

Ну, а если серьёзно, то написал об этом в заключении страницы.

Кому адаптивность всё ж таки нужна, следует обратить внимание на инструменты, уже встроенные в браузеры.

Полезные инструменты веб-разработки

Для разработки адаптивной вёрстки, в браузере Firefox есть отличные(!) инструменты.

Такая вкладка открывается, при нажатии клавиши F12

Кнопка «адаптивный дизайн» позволяет просмотреть, как страница будет выглядеть в разных размерах мониторов, и при их разной ориентации (вертикально/горизонтально).

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

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

Тем же, у кого нет такой возможности проверять свои веб-страницы, могу посоветовать интересный ресурс для проверки адаптивности: «Quirktools»(откроется в новом окне).

**НО!

  Нужно помнить!
Он показывает лишь страницы, уже загруженные в интернет.
Кроме того — его сервер очень часто «падает» (т.е. недоступен).

А вообще, верный признакправильной адаптивной вёрстки — отсутствие нижнего скролла.

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

Заключение, выводы

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

Во-первых: в разы возрастает сложность вёрстки, а вместе с этим и размер CSS-кода.
Чем такое плохо, подробно здесь: «Создание сайтов»(в новом окне).

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

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

В-четвёртых: часто вижу сайты, лишь считающиеся адаптивными, а у самих контент обрезается так, что приходится их вид уменьшать в 2-3 раза!

В-пятых: вытекает из четвёртого пункта. Так, какая разница(?!), что мои неадаптивные странички на смартфонах приходится раздвигать пальцами до нужного размера.  Да, и то!  Исключительно ради удобства просмотра. Контент-то целёхонек!

Да, кстати, для моего сайта смартфоны и не критичны. Поскольку, более 97% посетителей приходят на него с нормальных компьютеров и планшетов, и менее 3% со смартфонов.

* * *

Можно ещё продолжить этот «траурный список», но, думаю, хватит. Вполне достаточно рассказал о причинах, почему мне надоела адаптивная вёрстка, которую изучил, но применять НЕ собираюсь.

А зачем?!

Зачем делать сложнее то, что можно проще?!  Без всяких «шаманских адаптивных плясок».

Вывод —незачем!

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

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

К тому же, стараться «угнаться» в коде (постоянно его увеличивая) за всеми возможными размерами существующих устройств — УТОПИЯ!

К примеру, на днях мой племянник показывал своё новое приобретение. Часы-смартфон, размером чуть больше спичечной коробочки.
И, что?!
Бросаться теперь «сломя голову» писать код под габариты спичечного коробочка?! А потом появится (а может, и уже появился) компьютерик размером с брошку.   И, что?!
Снова код изменять?!   Да, ну на фиг, такие «сайты-заморочки» делать!  Проще … …

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

Начинаем осваивать адаптивную верстку

…

Впрочем, это моё личное мнение. Кому всё же непременно хочется этим заниматься, пусть смотрит дальше.

Важное дополнение

Для желающих лучше разобраться в разных типах вёрсток, очень рекомендую сначала (прежде, чем изучать мини-курс) скачать, и почитать две хорошие, интересные статьи: «Адаптивная вёрстка или мобильная версия»   и   «Адаптивный дизайн».

Статьи в архиве.

И кроме этого!

Обязательно почитайте статью и из нижнего приложенного архива.

Почему обязательно?!

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

Короче, добавил такую статью «для подумать». Так можно сказать.

Но самое главное(!) — по другой причине.

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

Она здесь.

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

Фиксированная, резиновая и адаптивная верстка сайта

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

Что такое верстка сайта (html верстка)

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

Для того, чтобы сверстать нарисованный макет, который, кстати говоря, чаще всего предоставляется в формате PSD и рисуется в Фотошопе, нужно знать специально для этого предназначенный язык разметки HTML — HyperText Markup Language, который состоит из специальных, так называемых, тегов, описывающих расположение элементов на странице. Хороший верстальщик, оценив взглядом макет, который еще представляет собой обычную статичную картинку, сразу мысленно разбивает эту картинку на составные части и уже заранее знает, какими тегами они будут описаны в документе и какой тип верстки больше всего подойдет применительно к конкретному случаю. С этого и начинается «оживление» макета. Прежде всего, нужно пораскинуть мозгами, а потом уже открывать «блокнот» и браться за дело.

Более того, помимо языка разметки HTML существует и дополнение — CSS, которое необходимо для описания стилей элементов и придания им законченного вида, в то время как HTML лишь грубо описывает расположение этих самых элементов на странице. Конечно можно и в HTML запихнуть некоторые стили и расширенные атрибуты тегов и добиться тем самым определенных результатов, но тогда верстка не будет отвечать стандартам W3C (которые не являются панацеей, а лишь рекомендациями, кстати говоря), код страницы будет нечитаемым, поисковые системы так же не будут от этого в восторге (им придется разбирать много мусора в коде), да и вообще это моветон и сейчас мало кто так делает. CSS — Cascading Style Sheets (каскадные таблицы стилей) нельзя считать отдельным языком программирования, но с натягом можно назвать условным языком, описывающем стили элементов на странице. Несомненно, в нем, как и везде, есть свои тонкости и секреты, которые нужно знать для того, чтобы быть хорошим верстальщиком сайтов.

Основные типы верстки сайтов

Все разделения верстки про признакам тегов, которые используются в теле документа мы считаем слишком условными и не думаем, что табличная верстка на самом деле существует, равным счетом так же как и блочная. Хотя многие ошибочно так полагают и трубят об этом вовсю, копируя статьи друг у друга, не вдумываясь и понимая о чем говорят. Дело в том, что в верстке могут использоваться как таблицы, так и слои (блоки), поэтому нет смысла проводить четкую грань между этими элементами. Что это за такой сайт, в котором для верстки использовались только одни таблицы? Неужели кто-то думает, что такое бывает и в сайте с таблицами не использовалось ни одного блочного элемента? Начнем с того, что тег

как раз-таки и является блочным элементом, который используется для выделения абзацев текста. А если на сайте нет текста и нет абзацев, то это не сайт, а черт знает что. То же самое можно сказать и про блочную верстку. А как насчет того, чтобы вставить таблицу с ценами или прочей информацией? Более того, довольно частой проблемой в верстке является невозможность выровнять элемент по вертикальной оси, если он находится внутри блочного элемента и имеет непостоянную высоту. В таких случаях используется ячейка таблицы, в которой, в отличие от слоя, работает CSS свойство vertical-align: middle;.

Вывод: табличной и блочной верстки не существует!

А что же касается типов верстки, которые действительно существуют, но все равно являются довольно условными, то можно выделить 3 основных типа:

Фиксированная верстка

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

Резиновая верстка

Резиновая верстка отличается от фиксированной тем, что ширина сайта заранее не известна и варьируется, в зависимости от ширины экрана пользователя. Стоит отметить, что резиновая верстка не всегда означает заполнение экрана на все 100%, некоторые полагают это ошибочно. На самом деле, бывает так, что указана какая-то минимальная ширина сайта и максимальная и, в зависимости от разрешения экрана, сайт растягивается или сжимается, но до определенного размера, а затем останавливается. Такой эффект с легкостью достигается свойствами min-width и max-width, которые применяются к главному контейнеру, содержащему в себе все элементы сайта.

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

Адаптивная верстка сайта примеры с наглядной демонстрацией

Довольно часто можно видеть плавающие элементы, количество которых на строке может меняться в большую или меньшую сторону, опять же, в зависимости от размера экрана пользователя. Например, на маленьком экране 3 товара в строке, а на очень большом — 6, а между ними идут промежуточные значения для средних экранов — 4 и 5. Плавающие элементы обычно реализуются при помощи свойства float или присвоения блочному элементу свойства display: inline-block;, что делает его наполовину блочным и наполовину встроенным, благодаря чему перенос на новую строку не осуществляется.

Адаптивная верстка

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

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

Главная / Программирование / CSS / Разрешения экранов для адаптивной верстки

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

viewport — говорим с мобильным браузером и настраиваем изменение размера экрана

До того как вы начнете верстать под мобильную версию стоит вставить в шаблон сайта(в html код) строку с viewport. Эта строка вставляется в head, её задача объяснить мобильному браузеру как себя вести и как отображать сайт для вашего пользователя, к примеру данное решение растянет мобильный экран на 970 пикселей.

<meta content=»width=970″ name=»viewport» />

А данное решение позволит экрану быть адаптивным и удобно скроильться

<meta name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes»/>

Работаем с компьютера

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

Ориентироваться нужно на оба расширения экрана как на вертикальное так и на горизонтальное. Повернуть экран можно стрелочкой сбоку.

Начиная с 800 пикселей ширина может быть меньше так как в некоторых операционных системах есть возможность разместить панель слева от основного экрана. Учитывая это стоит верстать так чтобы по краям оставались поля.

Адаптивная верста без заморочек

/*Mobile*/
@media only screen and (max-width: 320px)
{}
/*Mobile 2*/
@media only screen and (min-width: 321px) and (max-width: 480px)
{}

При разработке сайта учитывайте восприятие сайта гуглом, проверить этот параметр можно тут: https://search.google.com/search-console/mobile-friendly,https://testmysite.withgoogle.com/intl/ru-ru/,https://developers.google.com/speed/pagespeed/insights/.

Адаптивная верстка: плюсы и минусы

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

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

Смартфоны
@media only screen and (min-width : 320px) and (max-width : 479px) {}

Смартфоны 2
@media only screen and (min-width : 480px) and (max-width : 767px) {}

Планшеты
@media only screen and (min-width : 768px) and (max-width : 1023px) {}

Настольные компьютеры и ноутбуки
@media only screen and (min-width : 1024px) and (max-width : 1223px) {}

Настольные компьютеры и ноутбуки 2
@media only screen and (min-width : 1223px) and (max-width : 1823px) {}

Большие экраны
@media only screen and (min-width : 1824px) {}

Адаптивный дизайн — разрешения для планшетов

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

Адаптивная верстка — разрешения для смартфонов

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

При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.

рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 — 480×800, iPhone 3 — 480×320):

Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.

Стоимость

Стоимость верстки рассчитывается из расчета $25 за 1 час работы. Преимущество по проектам отдаются интересным, перспективным, профессиональным, известным и узнаваемым сайтам. Окончательную оценку по проекту можно дать только после просмотра макета и согласования технического задания по нему. Условно верстку макетов можно разделить на 4 уровня сложности. Ниже представлена примерная оценка каждого из уровней.

Уровни сложности верстки:

1. Верстка макета первого уровня сложности занимает в среднем 4 часа, т.е. его стоимость оценивается в $100.

   Что такое адаптивная верстка

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

2. На верстку макета второго уровня сложности нужно потратить около 8 часов, следовательно, верстка будет стоить $200. Сайты такого уровня имеют более сложную структуру. Используется jQuery, спрайты и другие технологии для украшения и быстродействия сайтов. К этой категории можно отнести верстку интернет-магазинов и блогов.
3. Макет третьего уровня сложности, с множеством мелких графических элементов, использованием jQuery, применением нестандартных решений будет занимать 12 рабочих часов. Верстка макета такого уровня оценивается в $300. К этой категории можно отнести некоторые корпоративные сайты и интернет-магазины.
4. К четвертому уровню сложности относится адаптивная верстка. На адаптивную верстку нужно потратить наибольшее количество времени, около 20-ти часов. Верстка адаптивных сайтов наиболее трудоемкая и ее стоимость начинается с 500$. Сложность адаптивной верстки заключается в том, что она учитывает особенности не только компьютеров, но и смартфонов, и планшетов. У верстальщика появляется намного большая ответсвенность перед заказчиком, потому что сайт должен одинаково хорошо смотреться на всех устройствах. Для того, чтобы на планшете и телефоне верстка смотрелась так, как хочет заказчик, дизайн должен быть выполнен отдельно для каждого устройства. По умолчанию, адаптивная верстка будет тестироваться на iPhone и iPad.

Внутренние страницы

Дизайн макета для внутренних страниц, как правило, не значительно отличается от дизайна главной страницы. Затраты по времени на верстку одной внутренней страницы будут составлять от одного до трех часов. Соответственно стоимость внутренних страниц будет равняться от 25$ до 75$.

Предоплата

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

Способы оплаты

Оплату можно производить удобным для Вас способом:

Бесплатная верстка

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

Техническое задание

Перед тем, как приступить к верстке, необходимо подготовить техническое задание (ТЗ) по проекту. В ТЗ необходимо указать: технические требования по верстке, сроки исполнения, особые требования заказчика. Если Вам сложно подготовить ТЗ самостоятельно, я помогу это сделать, задав интересующие меня вопросы. Наличие дизайн-макета является обязательным требованием для составления ТЗ.