Добрый день, сегодня речь пойдет на тему адаптивная верстка сайта. Почему она так необходима и должна присутствовать на каждом сайте, чем отличается мобильная верстка от адаптивной. Многие до сих пор путают или не понимают в чем заключается такой вариант верстки и чем он отличается, например, от мобильной версии сайта.
Несколько лет назад, а точнее до первого выхода в мир сенсорного телефона от компании Apple, данный вопрос не стоял так критично. Может я конечно ошибся по годам, но примерное время уточнил (судя по репликам авторов книг). Потом пошли планшеты, новые модели сенсорных телефонов и количество разрешений экрана стало резко увеличиваться. После этого у владельцев сайтов появилась новая проблема.
Кто еще до сих пор не знает, начиная с 21 апреля 2015 года Гугл вводит новые методы ранжирования сайтов, в основе которого лежит адаптивный дизайн сайта. Если ваш сайт не имеет адаптивного дизайна, ваш ресурс будет понижаться в выдаче поисковой системы. Вот оно чудо мобильных устройств.
Ваш сайт должен одинаково смотреться на всех устройствах. Полностью на всех! от мобильного телефона до самого большого разрешения монитора. С большими мониторами в основном проблем нет, там и так все понятно, но вот с планшетами и мобильными появилась проблема. Сайты не совсем корректно отображаются на маленьких экранах, что причиняет много неудобств для пользователя.
На мониторе страничка сайта должна смотреться в одном формате, на планшете в другом и на телефоне в третьем. В добавок к этому, никакой горизонтальной линии прокрутки быть не должно. Сайт должен сам подстраиваться под экран устройства Именно в этом и есть вся прелесть адаптивной верстки сайта.
О чем вообще идет речь, адаптивная верстка что это такое. На вашем сайте должен быть ЕДИНЫЙ адаптивный дизайн, в котором используется ОДИН код с корректировкой по размеру экрана. Переключатель на мобильную версию уже не проходит, это не правильно. Можно открыть руководство от Гугла и прочитать информацию более детально.
Пользователь, который открыл ваш сайт, не должен ничего увеличивать или уменьшать. Такие случаи обычно напрягают людей, им становится не удобно и они хотят побыстрее закрыть ваш сайт. Такие случаи не будут единичными, что очень плохо может отобразиться на поведенческих факторах блога или сайта. Тот же пример касается текста, который посетитель будет читать. Верстка должна менять свой масштаб, чтоб при просмотре текста не было горизонтальной линии прокрутки.
Как лично я считаю, адаптивный дизайн лучше чем мобильная версия сайта. Второй вариант кстати обойдется вам намного дороже, чем первый. Благодаря адаптивности вы сами можете принять решение, что пользователь будет видеть перед глазами используя планшет и какой вариант отображения сайта будет на мобильных телефонах.
Что такое адаптивная верстка
Конечно не каждый из нас имеет под рукой монитор, планшет и телефон. Чтоб проверить ваш сайт на адаптацию, иметь в наличии все виды устройств не обязательно. Если вы используете браузер Google Chrome, можете установить себе расширение, которое называется Window Resizer . С его помощью можно быстро проверить большинство вариантов вашего адаптивного дизайна.
Сверху вашего браузера должна появиться кнопка, при нажатии на которую перед вами откроются все возможные варианты просмотра экрана. Рекомендую пройтись по всем пунктам. Выбираете и потом проверяете как все смотрится на вашем сайте.
Скажу еще раз, никакой горизонтальной линии прокрутки быть НЕ ДОЛЖНО. Все должно адаптироваться под любое разрешение экрана. Откройте главную страницу, ваши статьи, и еще несколько дополнительных страниц.
Как показывает опыт, придраться можно практически к каждому сайту. У одних криво отображается логотип, у других очень узкое поле с комментариями и так далее. Особенно напрягают сайты, на которых с телефона просто не реально оставить комментарий. Так и хочется закрыть его и больше никогда не открывать. А это минус один комментарий, а таких как я, точно не один человек найдется.
Вот именно для нормального отображения всех страниц и не только для них, на всех устройствах должна быть сделана адаптивная верстка вашего сайта. Все разделы, все блоки с комментариями, все страницы, шапка сайта, подвал сайта и особое внимание нужно оставить для вашего меню.
Примеры верстки
Приведу небольшой пример адаптивного сайта, данный вариант я нашел спонтанно методом научного тыка через поиск. Я не смотрел что это за шаблон и где он его взял, сейчас вопрос в другом. Мне такой вариант очень понравится, все в своем стиле. На мониторе сайт смотрится в одном виде, на айфоне совсем в другом.
Конечно вы можете купить себе подходящий шаблон и это избавит вас от многих дополнительных проблем, но нужно все обязательно проверить. Если вы в дальнейшем находите кривую верстку, нужно будет делать поправки самому или пользоваться услугами верстальщика.
В этом примере адаптивного сайта все находится на своем месте, все ровно и красиво. Сверху идет меню, которое открывается при нажатии пальца, далее идет описание блога, поиск по сайту, рубрики и подписка на обновления. Ниже уже начинается список новостей. Красота...реально все продумано.
Примеры адаптивных сайтов вы можете найти сами. Открываете любой блог и пользуетесь дополнительным расширением для браузера. Таким образом можно выбрать любой пример, который вам понравился и уже с ним обратиться к верстальщику. Он проведет все необходимые работы и ваш сайт обретет новое лицо.
Уроки по изучению адаптивности сайта
Если вы не владеете особыми знаниями в верстке сайтов, я скажу вам сразу, у вас ничего не получится. Именно так, без знаний свойство и значений в CSS, вы ничего сами не сделаете. Для начала нужно пройти некоторые основные уроки, выучить свойства, которые используются при верстке страниц.
На моем блоге есть целый раздел, который я посвятил . Я только недавно начал его заполнять, в дальнейшем планирую так же продолжить над этим работать. Кто хочет получать новые уроки почтой, рекомендую подписаться. Из них можно будет узнать:
- Как самому сделать адаптивную верстку.
- Что такое медиа запросы.
- Как правильно использовать медиа запросы.
- Как сделать адаптивное меню.
- Как сделать адаптивную галерею.
- И многое другое.
Если вы надумали вникнуть в данную тему и хотите попробовать ее изучить, для начала вполне подойдут уроки из книги Бена Фрейна, которая называется Html5 и CSS3 Разработка сайтов для любых браузеров и устройств. В ней вы узнаете все про адаптивный дизайн, благодаря чему сайты будут показываться красиво на всех устройствах. Очень хорошая книга, в которой идет описание всего процесса от А до Я.
Что такое Media Queries ?
Media Queries — это медиа запросы, которые используются при адаптивной верстке сайта. Именно про них идет речь в книге Бена Фрейна. Если сказать простыми словами, это код, в который помещаются CSS стили для заданного разрешения экрана. Таким образом подгоняются все возможные варианты дизайна.
С помощью медиа запросов можно указать минимальную и максимальную ширину окна браузера. В добавок к этому можно добавить все, что вы захотите по оформлению страницы или наоборот изменить. Например вместо трех колонок сделать одну, убрать лишние блоки на странице, сократить меню, изменить шапку сайта, добавить больше информации в футер сайта. Самое главное, чтоб ваш сайт был удобный и приятный на самых маленьких размерах экрана.
Сколько таких возможных вариантов можно сделать, зависит уже от вас. Не стоит так буквально воспринимать слова и пользоваться медиа запросами для всех возможных вариантов. Выберите несколько самых используемых.
@media (max-width: 1010px) and (min-width: 992px)
Пример адаптивной верстки
Например у нас есть некий участок страницы, который при открытии на маленьком расширении экрана нам нужно уменьшить и подогнать под экран телефона или планшета. В таком случае нужно подогнать все блоки, текст и остальной контент под заданные расширения экрана. Воспользовавшись плагином для браузера можно наблюдать за всеми изменениями.
Создаем новый файл со стилями (подключаем его к главной странице) или добавляем в уже существующий файл медиа запросы. @media (max-width: 770px) — максимальная ширина экрана 770 пикселей. И добавляем в этот контейнер все необходимые изменения, которые нужны для данной ширины экрана.
@media (max-width: 770px) { body, html { overflow-x:hidden; min-height: 960px; background-size: 100%; } #mail_bg_horizontal div { left: 274px; position: relative; top: 40px; width: 340px; } #mail_bg_horizontal .module_subscribe figure { padding-top: 46px; } #footer_menu { display: none; } #header {background-size: 100%; padding-top: 48%;} #logo-site { top: -60px; font-size: 7vw; width:100%; margin: 10px;} #logo-site span{display:inline-block; padding-left:10px;} #slogan{ top: -77px; font-size: 3vw; margin: 10px;}
@ media (max - width : 770px ) { body , html { overflow - x : hidden ; min - height : 960px ; background - size : 100 % ; #mail_bg_horizontal div { left : 274px ; position : relative ; top : 40px ; width : 340px ; #mail_bg_horizontal .module_subscribe figure { padding - top : 46px ; #footer_menu { display : none ; #header {background-size: 100%; padding-top: 48%;} #logo-site span{display:inline-block; padding-left:10px;} |
Теперь идем дальше, максимум 770 пикселей прошли, переходим к более меньшей ширине. @media (max-width: 650px) — добавляем все изменения, которые нужны для расширения 650 пикселей. Все происходит так же само, только уже для максимальной ширины 650 пикелей. Все необходимые изменения добавляются в один общий контейнер по данному медиа запросу.
@media (max-width: 650px) { #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 20px; width: 545px; } border: medium none; height: 28px; left: 93px; position: relative; top: -12px; width: 159px; } #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float: none; width: 100%; margin-left: 0; text-align: center; }}
@ media (max - width : 650px ) { #related_posts { padding - top : 20px ; width : 545px ; #mail_bg_horizontal .module_subscribe button { border : medium none ; height : 28px ; left : 93px ; position : relative ; top : - 12px ; width : 159px ; #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float : none ; width : 100 % ; margin - left : 0 ; text - align : center ; |
После этого переход к следующей ширине, например 500 пикселей. Вносим в этот контейнер все необходимые свойства, которые должны помещаться в экран под максимальную ширину 500 пикселей. @media (max-width: 500px).
@media (max-width: 500px) { body > #content > .wrapper .navigation > .next { background: rgba(0, 0, 0, 0) url("images/bow_right.png") no-repeat scroll 0 0; display: none; float: left; height: 30px; margin-left: 1px; margin-top: -4px; width: 34px; } #mail_bg_horizontal .module_subscribe button { border: medium none; height: 28px; left: 96px; position: relative; top: -12px; width: 159px;}}
@ media (max - width : 500px ) { body > #content > .wrapper .navigation > .next { background : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - repeat scroll 0 0 ; display : none ; float : left ; height : 30px ; margin - left : 1px ; margin - top : - 4px ; width : 34px ; #mail_bg_horizontal .module_subscribe button { border : medium none ; height : 28px ; left : 96px ; position : relative ; top : - 12px ; width : 159px ; } } |
В конце еще уменьшаем ширину в медиа запросе к 400 пикселям. В этом контейнере указываем все необходимые изменения по заданной ширине. @media (max-width: 400px). После каждого добавления проверяем, что получается. В любой момент можно изменить и внести свои корректировки в файл со стилями.
@media (max-width: 400px) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 1px; width: 255px; }}
@ media (max - width : 400px ) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border - bottom : 1px solid #ccc; border - top : 1px solid #ccc; padding - top : 1px ; width : 255px ; |
Даже если вы все сделали правильно, обязательно проверьте ваши результаты в специальном сервисе, проходит ваш сайт мобильную версию или нет. Проверка удобства просмотра на мобильных устройствах . Укажите адрес вашего сайта и посмотрите, что вам ответит Гугл. С большой вероятностью сервис может вам написать, что ваш ресурс не прошел проверку.
После обновления, Гугл рекомендует открывать доступ к css файлам, файлам плагинов, темы, скриптов и картинок для робота, только после этого вы сможете удачно пройти проверку.Для этого необходимо в файле robots.txt открыть все пути к необходимым файлам, чтоб робот их увидел. Вот пример с моего robots.txt:
/ wp - content / themes / * . jpg
Allow : / wp - content / themes / * . png
Был интересный случай, когда я делал адаптивную верстку сайта в начале 2015 года. Заказчик воспринял все слова очень серьезно и захотел адаптивный дизайн под все разрешения экрана, которые я ему показал в дополнении Хрома. Я не стал спорить с желанием заказчика и подогнал ему полностью под все возможные варианты. Хозяин — Барин, заплатил правда в два раза больше.
Адаптивный дизайн psd файла
Если вы захотели заказать себе новый уникальный дизайн, не совсем обязательно, но желательно иметь при себе psd макет ваших желаний. В PSD файле будет полностью готовый дизайн под мобильные устройства и планшеты. Верстальщик будет видеть и понимать, что вы хотите от него. Если вы не можете сами нарисовать psd макет. обратитесь к профессионалам или на биржу по фрилансу. На бирже вы найдете много желающих для такой работы и за небольшое вознаграждение. Не нужно будет рисовать полностью с нуля готовый макет, адаптивный дизайн много усилий не потребует.
Как будет отображаться меню сайта, что за ним будет идти и так далее. Иногда сделать реализацию некоторых блоков бывает не совсем просто, обидно будет, если ваша работа пройдет впустую. Напомню еще раз, обратитесь к тем, кто знает и понимает свою работу.
Требования к PSD макету
Перед тем, как заказывать макет у дизайнера, для начала определитель, что вы хотите видеть на нем. Чтоб в дальнейшем не корректировать уже проделанную работу, решите для себя что и где будет находиться. Где у вас будет меню блога, где будет находиться поиск по сайту (нужен ли он вообще в вашем варианте). Как можно заметить по другим, многие жертвуют своим сайд баром. В итоге на телефоне отрывается блок с меню, поиском и списком ваших записей. На данный момент это самый такой используемый вариант.
Конечно вы не понимаете ничего в отступах, границах...что и как должно быть по стандартам в макете (вам это и не нужно), но на некоторые вещи обязательно обратите внимание. Это поможет вам сориентироваться перед составлением ТЗ для дизайнера.
- Макет должен быть в формате PSD (само собой).
- Каждый элемент в дизайне должен быть в отдельном слое.
- Не нагружайте много фотографий.
- Не используйте много шрифтов.
- Используйте стандартные шрифты.
- Все только самое необходимое.
- Ничего лишнего.
- Сделайте себе выпадающее меню.
Самые частые разрешения экрана
Как я описывал ранее, не стоит подгонять сайт полностью под все разрешения экранов. Достаточно выбрать самые частые, которые пользуются спросом. Конечно, все зависит от ваших пожеланий... что хотите, то и чудите). Попробую привести несколько примеров, в которых указаны самые распространенные варианты дисплеев (Минимальная ширина и максимальная ширина). На самом деле нужно учитывать не только указанные варианты, их немного больше.
- Смартфоны портрет и ландшафт (минимум 320 px — максимум 480 px);
- Планшеты портрет и ландшафт (минимум 768 px — максимум 1024 px);
- Компьютеры и ноутбуки (минимум 768 px — максимум 1024 px);
- Компьютеры и ноутбуки (минимум 1824 px);
После всего этого, на выходе будет нормальная адаптивная верстка сайта. Страницы будут нормально смотреться на самых маленьких экранах. Все страницы будут масштабируемыми и кроссбраузерными, они не будут криво смотреться на планшетах и телефонах.
Благодаря вставки некоторых частей кода, верстка будет отображаться нормально на всех браузерах, включая вечно проблемный IE. И не имеет никого значения какой у вас движок, джумла или вордпресс. Кстати, делать адаптивную версткусайта на движке WordPress для меня лично одно удовольствие.
Для того, чтобы верстка вашего сайта хорошо смотрелась на Iphone или на планшетах - ее на)до адаптировать под эти устройства и важно делать это качественно...
Адаптивная верстка сайта (иногда ее еще называют mobile-friendly) - ПОДРОБНО и по шагам как на уроке:
Обратите внимание: что у Яндекса и Google - есть свои инструменты, при помощи которых вы можете проверить сайт на адаптивность. У Яндекса в новой версии Вебмастера он находится так: инструменты - проверка мобильных страниц.
Если вы хотите знать как сделать адаптивный дизайн сайта - то об этом будет написано ниже и подробно в примерах, НО, если у вас нет навыков работы с css - то будет сложнее. Или это может сделать ваш программист или вебмастер.
Отзывчивый дизайн сайта - предполагает задание ширины окна страницы и ширину колонок и сайдбаров в %, в адаптиве - в px.
Обратите внимание: если у вас популярный движок вашего сайта, типа wordpress, то у них нет "головной боли" с адаптивным дизайном - все там делается парой кликов мыши - просто устанавливается и активируется плагин и ВСЕ). Например для WP - использовал WPtouch - очень хорош, но, если есть штатный программист - то лучше делать индивидуально этот момент.
Нужно понять, что в основном при адаптивной верстке часто манипулируют: шириной (width элемента: max-width и min-width), float (обтеканием, его убирают по мере уменьшения ширины окна), font-size (меняют высотку букв).
1) Вначале нужно прописать специальный метатег для разных типов девайсов:
2) Адаптив параметров страницы (ширины и высоты):
Container {
width: 800px
max-width: 90%;
}
В данном случае задается фиксированная ширина контейнера, но она не должна быть более 90% от ширины окна и это очень удобно - тогда сайт сам будет подстраиваться под размер окна.
3) Css адаптивна верстка для картинок всего сайта :
img { max-width: 100% ;
height: auto;
}
Тут мы показываем, что размер картинки : максимум его ширины должен быть не более 100% ока - таким образом картинка сама подстраивается под размер телефона или другого гаджета. Вот такой вот простой метод - адаптивный дизайн картинок.
4) Адаптивная верстка текста сайта : в данном случае манипуляции происходят с высотой шрифта: font-size и другими параметрами.
Break-word { word-wrap: break-word; }
Этот CSS предназначен для расстановки переноса, если есть длинные не переносимые слова.
Есть много ошибок по размеру шрифта: Яндекс любит писать - Размер текста слишком мал для чтения на мобильных устройствах - для этого делаем так:
body {font-size: 16px} - это позволит избежать этой ошибки, а уже для тега p и для ссылок нужно отдельно проставить. Именно из-за того, что в теге body стоит font-size: 12 или 14 px - именно поэтому выходит эта ошибка! И выйдет вот такой вердикт:
5) Адаптация 3 колоночного дизайна или 2 колоночной верстки - в этом нет ничего сложного, если все сделано на div - ах то обычно нужно отменить обтекание, то есть выставить float в none и блоки опустятся вниз.
6) Адаптив CSS для видео (с Хабра):
Video {
position: relative;
padding-bottom: 56.25% ;
height: 0 ;
overflow: hidden;
} .video iframe ,
.video object ,
.video embed {
position: absolute;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
}
Media Queries - медиа запросы
Для создания адаптивного диза часто используют media запросы (они задают правила исходя из размеров экрана по ширине - исходя из разрешения экрана).
Вот заготовочка media queries - под какие разрешения делать адаптивный дизайн:
@media only screen and (max-width: 1200px) {
@media only screen and (max-width: 992px) {
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 480px) {
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
/**/
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
/**/
}
/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
/**/
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
/**/
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
/**/
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
/**/
}
Но можно и избежать медиа запросов, задавая ширину колонок и блоков сразу в процентах.
При медиа запросах начинаем сверху: все что сделали допустим для max-width: 768 будет срабатывать и при 480.
Какие бывают проблемы при адаптации сайтов для мобильных устройств
Например Яндекс может такое выдать - Есть горизонтальная прокрутка :
Это у вас что-то с padding или margin - обнулите их для родительских селекторов (блоков) и будет вам счастье.
И в конце Яндекс Вебмастер показывает такое:
Тоже делал 4 часа, в первый раз всегда сложно! Но далее, уже за пару часиков можно делать! И отправляем в вебмастер на перепроверку, чтобы побыстрее - важно для SEO .
А вообще, сегодня многие используют готовые заготовки - Бутстрап и мучений практически нет -
Чем более популярными становятся мобильные устройства, тем сильнее ощущается дискомфорт при скроллинге большинства сайтов. Именно поэтому, начиная с 2012 года, веб-мастерами стало использоваться решение, делающее просмотр ресурсов на экранах с небольшим разрешением более комфортным, - адаптивная вёрстка.
Современная тенденция
Сегодня около пяти миллиардов людей на Земле используют мобильные телефоны, при этом треть из них имеют смартфоны. Поэтому мобильный трафик приобретает всё большее значение для владельцев сайтов. Вероятно, такой источник посетителей со временем будет только расти.
Поисковые системы оперативно прореагировали на такую тенденцию. Большие корпорации "Яндекс" и Google внесли существенные изменения в свои алгоритмы ранжирования сайтов в поисковой выдаче с учётом наличия адаптивной вёрстки и дизайна. Проще говоря, веб-ресурсы, оптимизированные для мобильных телефонов, смартфонов и планшетов, будут иметь некоторое преимущество перед своими конкурентами.
Определение адаптивной вёрстки
Адаптивная вёрстка - метод создания каркаса веб-страницы, автоматически меняющей расположение блоков в соответствии с устройства, на котором она просматривается. То есть при таком подходе создаются отдельные стили для самых разных разрешений. Такой эффект достигается особым написанием CSS-файлов.
Раньше проблема решалась несколько иначе. Разработчикам приходилось совершать гораздо больше «телодвижений», создавая вёрстку и дизайн основной версии сайта и то же самое делая для мобильной. В зависимости от экрана устройства, на котором просматривался интернет-проект с имеющейся мобильной платформой, запускалась подходящая версия сайта.
Такой подход во многом себя не оправдывал, и большинство веб-мастеров так и не взялись за версии. Теперь на смену такому порядку пришла адаптивная вёрстка. Создавая каркас сайта при помощи такой технологии, веб-мастер концентрирует все свои усилия на создании одной версии проекта, а посетители могут с одинаковым уровнем комфорта просматривать его как на большом экране компьютера, так и на мобильном телефоне, смартфоне или планшете.
Достоинства адаптивного макета
Какие достоинства имеет адаптивная вёрстка сайтов? Ранее было отмечено, что плюсом является корректное отображение всех блоков страницы на любом устройстве. Также положительным аспектом такого подхода в создании шаблона можно назвать скорость реализации изменений. Что это значит?
При наличии у сайта двух платформ внесённые в вёрстку изменения нужно было сначала реализовать в рабочей версии, а после - в мобильной. Если правки в коде были довольно существенными, то процесс внесения таких изменений мог сильно затянуться. При адаптивной вёрстке работа над сайтом ведётся в одном файле. Изменения, внесённые в макет веб-страницы, будут одинаково скоро отображаться как в рабочей версии, так и в мобильной.
Минусом такого подхода некоторые веб-мастера называют сложность его реализации. Но с появлением CSS 3 создать шаблон адаптивной вёрстки стало совсем просто. Даже не самые опытные веб-мастера могут сделать свой сайт удобным для просмотра на мобильных устройствах.
Принципы и особенности адаптивной вёрстки
Какие принципы лежат в основе метода адаптивной вёрстки в веб-дизайне?
Использование «резинового» типа макета.
- «Резиновые» изображения.
Использование медиазапросов (media-queries).
Необходимость думать о мобильных устройствах с самого начала создания вёрстки.
Из этих основополагающих принципов такого метода создания шаблона вытекают следующие особенности адаптивной вёрстки:
1. Проектирование и создание дизайна сайта с учётом работы на всём спектре разрешений: от мобильных до широкоформатных дисплеев.
2. Вёрстка с помощью каскадных таблиц стилей с использованием технологии медиазапросов, появившейся в CSS 3.
3. Программирование на стороне как клиента, так и сервера для передачи мобильным устройствам изображения меньшего объёма и разрешения.
Важный аспект, с учётом которого создаётся адаптивная вёрстка, - разрешения матрицы популярных электронных устройств. Такой подход в разработке дизайна сделает просмотр веб-страниц на любом экране весьма комфортным. Но как узнать, какие из них стоит включать в стили?
С чего начать вёрстку адаптивного макета?
Большинство сайтов сделаны так, что на экранах смартфонов и планшетов появляются полосы прокрутки, которые не столь удобны для сёрфинга, а дизайн и вёрстка многих интернет-проектов просто «плывут». На сайтах, созданных для обучения веб-дизайну, собраны самые разные разрешения экранов различных устройств, под которые стоит верстать страницы своего сайта.
Адаптивная вёрстка, примеры которой можно встретить довольно часто, имеет массу достоинств. Что следует помнить при таком подходе к созданию макета страниц?
Приступив к работе над шаблоном, важно периодически тестировать, насколько удачно отображается контент и блоки макета на разных экранах. Для этого порой достаточно просто изменить ширину окна браузера. Файл со стилями получает медиазапрос и меняет расположение блоков, внося существенные изменения. Хорошим инструментом для тестирования шаблона адаптивной вёрстки могут стать сайты, имитирующие экраны мобильных устройств разных моделей. Такие сервисы позволят внимательно рассмотреть и оценить, как смотрится дизайн на дисплеях самых разных мобильных устройств.
Хотя технология такого адаптивного макета не столь проста, её освоение принесёт плоды уже очень скоро.
Для начала разберемся, что такое адаптивная верстка? Это такая верстка, при которой сайт отлично отображается на различных устройствах: компьютерах, планшетах, смартфонах.
Пример адаптивной верстки: один и тот же сайт, выглядит интуитивно-понятно на любых устройствах.
Сайт с адаптивным дизайном не теряет в функционале и удобстве пользования (юзабилити) для посетителей. Именно посетители - тот ценный ресурс, ради которого делается сайт, будь то магазин, блог или корпоративный сайт. Важно не только привлечь потенциальных клиентов, но и довести их до цели (покупка, регистрация). Адаптивный дизайн решает эту задачу.
Доля мобильного трафика как в мире, так и в России растет стремительными темпами. С каждым месяцем все больше пользователей просматривают сайты через мобильные устройства. Ведь это легко: пока едешь с работы домой, стоишь в очереди, просто гуляешь - телефон всегда под рукой.
Проблема . Обычный сайт тоже можно просмотреть через телефон, но он теряет всю читабельность, удобство, его нужно постоянно пролистывать, растягивать, приближать. Все это вызывает дискомфорт, шанс, что потенциальный клиент что-то закажет, значительно снижается.
Решение . Заказать сайт с адаптивной версткой, который подстраивается под каждое устройство. Такое решение делает его использование удобным и акцентирует внимание на значимых элементах.
Пример стандартного сайта:
- Попасть пальцем по пунктам довольно проблематично;
- Нужно все время двигать вправо-влево, чтобы просматривать страницу.
Пример сайта с адаптивной версткой:
- Перемещаемся только сверху вниз по экрану;
- Нет необходимости изменять масштаб;
- Все видно и логично понятно.
Как работает. Механизм
В адаптивной верстке применяются современные технологии, благодаря которым все элементы делаются плавающими. Т. е. они могут менять свой размер и расположение на странице сайта в зависимости от размера экрана и устройства с которого их просматривают.
Чем меньше экран - тем более концентрировано подается информация. На смартфонах и планшетах скрывают второстепенные элементы (меню сворачивают, фоновые изображения убирают). В верхней части экрана остаются самые важные элементы управления, менее значимые блоки опускаются вниз.
Вторым важным моментом является увеличение элементов управления. Ссылки и кнопки становятся крупнее, чтобы по ним легко можно было нажать пальцем. На обычных сайтах можно долго пытаться попасть по ссылке, здесь это исключено.
Стоит отметить отсутствие горизонтальной прокрутки. Для продолжения чтения контента достаточно только листать вниз. Сбиться невозможно.
Особенности
Используя данную технологию, дизайн сайта отличается следующими моментами:
- Минималистичный дизайн;
- Отсутствие больших фоновых изображений;
- Не используем Flash (Flash не совместима с мобильными устройствами);
- Количество визуальных элементов минимально, акцент только на главном;
- Меню имеет небольшую вложенность.
Вывод
Анализируя динамику роста мобильных устройств в интернет-трафике напрашивается вывод, что через 1-2 года более 90% активных пользователей интернета будут использовать мобильные устройства. Кто-то как второй гаджет для выхода в интернет, помимо ноутбука и компьютера, треть - как основной. Оставлять без внимания такую огромную, и что главное, еще пустую, нишу - огромное упущение.
Если раньше была популярна фраза «Если вас нет в интернете - вас нет в бизнесе», то сейчас она становится актуальна по отношению к адаптивной верстке.
Адаптивные сайты
С появлением мобильных устройств: планшетов и смартфонов, умение делать адаптивную вёрстку веб-страниц стало очень востребованным.
Это означает, что сайт должен нормально просматриваться на любых устройствах. Ну, а уж, если не точно так же, как он отображается на стационарном компьютере, то близко к этому. Главное, чтоб с ним было удобно работать: просматривать, искать что-либо, нажимать на кнопки, и т.д..
Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3. Изучил его.
** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **
Новое в HTML5 и CSS3
Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .
Верстал в кодировке «ANSI» , и с полной служебной записью: «HTML 4.01 Transitional» , вместо положенной по правилам HTML5:
Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .
Новый атрибут формы у тэгов input «placeholder» (подсказка) в браузере IE8 НЕ сработал. В остальных — работает .
Аналогично. Новый атрибут «типа» у тэгов input type=»email» срабатывает только в современных браузерах.
Атрибут «value» использовал по-прежнему для внесения значений в формы.
Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head
вносится строчка кода:
Такая запись говорит браузеру (**так объясняется в курсе!), чтобы он правильно масштабировал
контент страницы под используемое устройство
.
Хотя, на самом деле, такая запись браузеру
ровным счётом ничего не говорит
. Это «обращение» к поисковикам.
А вот они уже о-о-очень «ревностно» относятся к наличию/отсутствию подобной записи в тэге head
, особенно в последнее время. Проверено!
Однако, нужно сказать, что современные браузеры мобильных устройств , похоже, научились всё же читать «чужие письма».
**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и … … … . И тут же быстро убрал!
Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал «жуть», т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .
Новый атрибут для тэгов img «srcset» в испытываемой версии «HTML 4.01» не работает!
Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!
Примеры записей в таблице CSS
Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.
Свойство background-size: cover; лучше НЕ использовать . Рисунки «режутся», т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.
И напротив!
Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для «центровых » рисунков. Оно их великолепно масштабирует под любой размер монитора.
Аналогично.
Это же свойство background-size: contain; сработало ОТЛИЧНО и для «боковых » рисунков, т.е. левых/правых. Пробовал!
Боковые рисунки выводил через тэги span
, прописав им float: left или right, но ГЛАВНОЕ!
Главное
, что выводил рисунок, как фоновый на 2 символа неразрывного пробела
, дав тексту размер, равный высоте фонового рисунка
(**
уменьшив размер текста, рисунок уменьшается пропорционально, без искажений).
Схемы вывода ниже.
<— это 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) {
width:200px;}}
Вообще-то, код медиа-запроса должен выглядеть по-другому.
@media (max-width:900px) {
.subscribe input, .subscribe input {
width:200px;}}
*Prim. Используя фиксированную ширину, лучше указать её максимальный размер.
Оптимальным для фиксированной ширины считается размер 1200px±
Эти «медиа-запросы» мне напомнили конструкцию if (условие) {выполнить} из языков: PHP и JavaScript . Ими мы перестраиваем стили сайта в зависимости от размеров экранов.
Справка
Для корректной работы со шрифтами, советуют указывать их размеры не в «px», а в «em», и ещё сами шрифты брать из так называемых «безопасных шрифтовых стеков CSS» .
Сделал в фотошоп специальный рисунок, из которого можно узнать, какие именно шрифты относятся к «безопасным» , а главное — почему(?!):
Правда, нужно сказать, что такой перевод довольно «условен», хотя в мини-курсе об этом — ни слова!
Узнать подробно о существующих единицах измерения и, как они переводятся друг в друга, можно в отличной статье из приложенного архива.
Проба единиц для адаптивной вёрстки
Попробовал. Некоторые размеры шрифтов прописывал через эти единицы. Работает! Но мне привычнее иметь дело с пикселями. Вот ими и пользовался при вёрстке этой страницы.
Тем более что пиксели, на мой взгляд, идеально подходят для адаптивной вёрстки, поскольку они «завязаны» именно на размеры и разрешение мониторов используемых устройств.
Другими словами, размер пикселя у каждого устройства будет свой, и, если не «дёргаться» от одной единицы к другой, а всё выражать в одних единицах измерения, результат будет положительным!
Что, собственно, Вы и видите на своём устройстве, просматривая эту страницу.
Для нешрифтовых элементов:
картинок, размеров блоков, советуют вычислять
, и использовать проценты «%», а это уже иная техника подсчётов — в зависимости от размеров «блока-родителя»
.
Короче — «геморрой жуткий».
Поэтому, потренировавшись немного на этой, пробной странице, «плюнул» на всякие адаптивные вёрстки, и стал верстать обычным, привычным для меня способом. Надоело!
Ну, а если серьёзно, то написал об этом в заключении страницы.
Кому адаптивность всё ж таки нужна, следует обратить внимание на инструменты, уже встроенные в браузеры.
Полезные инструменты веб-разработки
Для разработки адаптивной вёрстки, в браузере Firefox есть отличные(!) инструменты.
Такая вкладка открывается, при нажатии клавиши F12
Кнопка «адаптивный дизайн» позволяет просмотреть, как страница будет выглядеть в разных размерах мониторов, и при их разной ориентации (вертикально/горизонтально).
Подробно, как пользоваться кнопкой этого инструмента, объясняется в упомянутом мини-курсе.
Правда, хочу сказать, что сам предпочитаю проверять
сделанное на реальных устройствах
, что исключает «причуды» браузеров.
Кнопка, конечно, безусловно, очень полезная, и очень помогает, но … … …
Тем же, у кого нет такой возможности проверять свои веб-страницы, могу посоветовать интересный ресурс для проверки адаптивности: «Quirktools» (откроется в новом окне).
Нужно помнить!
Он показывает лишь страницы, уже загруженные в интернет
.
Кроме того — его сервер очень часто «падает» (т.е. недоступен).
А вообще, верный признакправильной адаптивной вёрстки — отсутствие нижнего скролла.
Последнее, что нужно обязательно знать: на реальных мобильных устройствах сайты выглядят по-другому, не так, как их показывают различные сервисы проверки.
Заключение, выводы
Как уже писал, потренировавшись немного здесь, на этой странице, «плюнул» на адаптивность, и стал верстать обычным способом. И это вовсе не случайно!
Во-первых:
в разы возрастает сложность вёрстки, а вместе с этим и размер CSS-кода.
Чем такое плохо, подробно здесь: «Создание сайтов»
(в новом окне).
Во-вторых:
и без «адаптивных премудростей» можно делать сайты, нормально отображающиеся на мобильных устройствах, для чего им нужно дать больше фиксированной
ширины.
Пример: «Личная страничка»
(откроется в новом окне).
В-третьих: вытекает из предыдущего, т.к. контент фиксированной страницы не будет «размазываться» по всему монитору, если на сайт зайдут на компьютере с большим дисплеем.
В-четвёртых: часто вижу сайты, лишь считающиеся адаптивными , а у самих контент обрезается так, что приходится их вид уменьшать в 2-3 раза!
В-пятых: вытекает из четвёртого пункта. Так, какая разница(?!) , что мои неадаптивные странички на смартфонах приходится раздвигать пальцами до нужного размера. Да, и то! Исключительно ради удобства просмотра. Контент-то целёхонек!
Да, кстати, для моего сайта смартфоны и не критичны. Поскольку, более 97% посетителей приходят на него с нормальных компьютеров и планшетов, и менее 3% со смартфонов .
Можно ещё продолжить этот «траурный список», но, думаю, хватит. Вполне достаточно рассказал о причинах, почему мне надоела адаптивная вёрстка, которую изучил , но применять НЕ собираюсь.
А зачем?!
Зачем делать сложнее то, что можно проще?! Без всяких «шаманских адаптивных плясок».
Вывод — незачем!
Такой вывод я сделал для себя из всего вышесказанного. В конце концов, абсолютно на любом устройстве: будь то нормальный компьютер, планшет, либо смартфон, сайт просматривать можно!
Если же что-то плохо видно, можно и пальчиками раздвинуть. Ничего страшненького! Современные электронные устройства умные! Они позволяют масштабировать видимость экрана монитора.
К тому же, стараться «угнаться» в коде (постоянно его увеличивая) за всеми возможными размерами существующих устройств — УТОПИЯ!
К примеру, на днях мой племянник показывал своё новое приобретение. Часы-смартфон
, размером чуть больше спичечной коробочки.
И, что?!
Бросаться теперь «сломя голову» писать код под габариты спичечного коробочка?! А потом появится (а может, и уже появился) компьютерик размером с брошку. И, что?!
Снова код изменять?! Да, ну на фиг, такие «сайты-заморочки» делать! Проще … …
Собственно, весь мой ресурс предназначен для тех, кто хочет научиться делать простые сайты, и делать их с удовольствием, а не искать себе «головную боль» . Вот, как-то так … …
Начинаем осваивать адаптивную верстку
Впрочем, это моё личное мнение. Кому всё же непременно хочется этим заниматься, пусть смотрит дальше.
Важное дополнение
Для желающих лучше разобраться в разных типах вёрсток, очень рекомендую сначала (прежде, чем изучать мини-курс) скачать, и почитать две хорошие, интересные статьи: «Адаптивная вёрстка или мобильная версия» и «Адаптивный дизайн» .
Статьи в архиве.
И кроме этого!
Обязательно почитайте статью и из нижнего приложенного архива.
Почему обязательно?!
Её я составил, используя материалы из книги по веб-дизайну известного в Рунете дизайнера, и слова автора книги о мобильных версиях сайта резко отличаются от того, что Вы могли читать в предыдущем архиве.
Но самое главное(!) — по другой причине.
Она здесь.
А, заполнив эту форму, можно получить интересный обучающий видео-курс адаптивной вёрстки.
*P.S. Не беспокойтесь! Меня подписчики никоим образом не интересуют, и никаких подтверждений не потребуется. Поэтому можно поставить в поля формы любые данные. Да, и вообще, мне был интересен другой момент, в создании таких форм запроса.
Одностраничный учебный сайт по мини-курсу адаптивной вёрстки 2016г.
Все права защищены. Copyright 2009 — Коротеев Владимир.
Фиксированная, резиновая и адаптивная верстка сайта
Сегодня нам хотелось бы поговорить о верстке сайтов в целом и обсудить, какие на самом деле бывают ее условные типы, а какие следует считать на самом деле несуществующими. Хотелось бы коротко обсудить саму технологию верстки и какие языки программирования для нее используются, а так же остановиться на обсуждении трех основных типов верстки - фиксированная, резиновая и адаптивная.
Что такое верстка сайта (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 раза. Таких частных случаев с каждым днем становится все меньше и меньше, поэтому ошибочно полагать, что адаптивная верстка активно развивается. Убежденных в этом мы смеем разочаровать - она изживает себя и пропадет так же внезапно, как когда-то появилась, благодаря чрезвычайно заботливым верстальщикам.
HTML-верстка
Главная / Программирование / CSS / Разрешения экранов для адаптивной верстки
Разрешения экранов для адаптивной верстки
viewport — говорим с мобильным браузером и настраиваем изменение размера экрана
До того как вы начнете верстать под мобильную версию стоит вставить в шаблон сайта(в html код) строку с viewport. Эта строка вставляется в head, её задача объяснить мобильному браузеру как себя вести и как отображать сайт для вашего пользователя, к примеру данное решение растянет мобильный экран на 970 пикселей.
А данное решение позволит экрану быть адаптивным и удобно скроильться
Работаем с компьютера
Для того чтобы просмотреть сайт в мобильной версии в 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) {}
Адаптивный дизайн — разрешения для планшетов
Большинство планшетов способны поворачивать изображение при смене ориентации экрана с книжной на альбомную и наоборот, поэтому для каждого стандартного разрешения потребуется два различных дизайна: по большей стороне и по меньшей в качестве горизонтали.
600×800, 800×600
Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A
768х1024, 1024×768
Apple iPad mini, Acer Iconia Tab
768×1366, 1366×768
ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire
800х1280, 1280×800
Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet
1080×1920, 1920×1080
Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700
1536×2048, 2048×1536
1600×2560, 2560×1600
ASUS Transformer Pad, Samsung Galaxy Tab Pro
Адаптивная верстка — разрешения для смартфонов
240х320, 320х240
Nokia 225, Nokia Asha 230, Nokia 220, Samsung Galaxy Pocket, Samsung GT-C3590, HTC WildFire, HTC Touch2
320х480, 480х320
Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3
480х800, 800х480
Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500
540х960, 960х540
Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia
640х1136, 1136х640
Apple iPhone 4, Apple iPhone 5
720х1280, 1280х720
Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact
750х1334, 1334×750
1080х1920, 1920х1080
Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8
1440х2560, 2560х1440
LG G3, Samsung Galaxy S6
Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации.
При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, 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 уровня сложности. Ниже представлена примерная оценка каждого из уровней.
Уровни сложности верстки:
- Верстка макета первого уровня сложности занимает в среднем 4 часа, т.е. его стоимость оценивается в $100.
Что такое адаптивная верстка
Макет такого уровня, как правило, имеет стандартную прямоугольную структуру: шапка, информационная часть, футер. Подобные макеты используются для блогов и сайтов визиток.
- На верстку макета второго уровня сложности нужно потратить около 8 часов, следовательно, верстка будет стоить $200. Сайты такого уровня имеют более сложную структуру. Используется jQuery, спрайты и другие технологии для украшения и быстродействия сайтов. К этой категории можно отнести верстку интернет-магазинов и блогов.
- Макет третьего уровня сложности, с множеством мелких графических элементов, использованием jQuery, применением нестандартных решений будет занимать 12 рабочих часов. Верстка макета такого уровня оценивается в $300. К этой категории можно отнести некоторые корпоративные сайты и интернет-магазины.
- К четвертому уровню сложности относится адаптивная верстка. На адаптивную верстку нужно потратить наибольшее количество времени, около 20-ти часов. Верстка адаптивных сайтов наиболее трудоемкая и ее стоимость начинается с 500$. Сложность адаптивной верстки заключается в том, что она учитывает особенности не только компьютеров, но и смартфонов, и планшетов. У верстальщика появляется намного большая ответсвенность перед заказчиком, потому что сайт должен одинаково хорошо смотреться на всех устройствах. Для того, чтобы на планшете и телефоне верстка смотрелась так, как хочет заказчик, дизайн должен быть выполнен отдельно для каждого устройства. По умолчанию, адаптивная верстка будет тестироваться на iPhone и iPad.
Внутренние страницы
Дизайн макета для внутренних страниц, как правило, не значительно отличается от дизайна главной страницы. Затраты по времени на верстку одной внутренней страницы будут составлять от одного до трех часов. Соответственно стоимость внутренних страниц будет равняться от 25$ до 75$.
Предоплата
После того, как мы оговорили сроки и стоимость верстки, я готов приступить к работе. Предоплата в 50% c Вашей стороны будет доказательством вашей заинтересованности в сотрудничестве со мной. С постоянными заказчиками работаю без предоплаты, по факту выполнения работы! В оговоренный срок я высылаю Вам готовую верстку на тестирование. После ее утверждения, Вы оплачиваете работу в полном объеме.
Способы оплаты
Оплату можно производить удобным для Вас способом:
Бесплатная верстка
Я всегда открыт для интересных предложений со стороны заказчика. Сайты известных российских и зарубежных брендов готов делать бесплатно! Одно условие — грамотный, красивый дизайн, работа с которым будет приносить удовольствие.
Техническое задание
Перед тем, как приступить к верстке, необходимо подготовить техническое задание (ТЗ) по проекту. В ТЗ необходимо указать: технические требования по верстке, сроки исполнения, особые требования заказчика. Если Вам сложно подготовить ТЗ самостоятельно, я помогу это сделать, задав интересующие меня вопросы. Наличие дизайн-макета является обязательным требованием для составления ТЗ.