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

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

Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе 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% со смартфонов.

* * *

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

А зачем?!

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

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

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

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

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

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

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

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

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

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

Статьи в архиве. Адаптивность и мобильность

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

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

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

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

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

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

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

Она здесь. Статья по материалам книги

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

*P.S. Не беспокойтесь!   Меня подписчики никоим образом не интересуют, и никаких подтверждений не потребуется. Поэтому можно поставить в поля формы любые данные. Да, и вообще, мне был интересен другой момент, в создании таких форм запроса.

ВВЕРХ

Одностраничный учебный сайт по мини-курсу адаптивной вёрстки 2016г.

Учебные сайты


Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru