Адаптивные сайты
С появлением мобильных устройств: планшетов и смартфонов, умение делать адаптивную вёрстку веб-страниц
стало очень востребованным.
Это означает, что сайт должен нормально просматриваться на любых устройствах. Ну, а уж, если не точно так же, как он
отображается на стационарном компьютере, то близко к этому. Главное, чтоб с ним было удобно работать:
просматривать, искать что-либо, нажимать на кнопки, и т.д..
Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе 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"> </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 - Коротеев Владимир.
