Orelspa.ru

Деньги в онлайне
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

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

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly. В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс.Вебмастер и Google Developers.

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам

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

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

Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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

Рис. 2. Пример адаптивной верстки

1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип ;
кнопку для показа/скрытия главного меню

3. Блок с кратким содержанием статьи

Анонс статей обернём элементом :

4. Боковая колонка

5. Нижний колонтитул

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

6. Общие CSS-стили

Общие стили, сброс стилей браузера по умолчанию:

7. Стили для шапки и её содержимого

8. Стили для блока с основным содержимым

9. Стили для боковой колонки

10. Стили для нижнего колонтитула

Подвал сайта разделим на три равных столбца:

11. Медиа-запросы

12. Скрипт для мобильного меню

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню — от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом

Основы адаптивного веб — дизайна (Responsive). Или как сделать простой шаблон адаптивным.

Здравствуйте, дорогие читатели блога. Сегодня я с Вам хотел бы поговорить об основах адаптивного дизайна (responsive), а так же разложить по полочкам один из примеров, который я подготовил.

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

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

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

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

Немного теории (Основы)

Как известно, что весь веб дизайн большую часть строится на CSS, в CSS задаётся практически все правила отображения сайта в различных браузерах. Соответственно и адаптивный веб — дизайн не исключение. Самое главное это стандартное правило media queries, в которых и задаются все новые классы под желаемое разрешение экрана. Но и конечно же стандартная CSS вёрстка не много изменилась. Самое большое изменение это использование процентов а не пикселей в ширине объектов.

Читать еще:  Как узнать посещаемость чужого сайта онлайн

Например: Размер блока главного контента на странице был равен 600px, а ширина блока сайдбара 400px. В адаптивном дизайне данные значения нужно прописывать в процентах. Исходя из этого у нас получится ширина контента 60%, а ширина сайдбара 40% Надеюсь, что суть Вы уловили.

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

max-width и width: если ширина сайта равна width:1000px то при уменьшении окна браузера будет появляться горизонтальная полоса прокрутки, другими словами сайт просто не будет влазить в окно. И его придётся горизонтально прокручивать чтобы увидеть весь сайт. Но если мы поставим width:100% Сайт растянется на всю ширину монитора. На малых разрешениях такой способ будет смотреться нормально, а вот на мониторах с большим разрешением сайт очень сильно растянется и будет совершенно не читабельным. Таким образом если Вы хотите чтобы сайт остался шириной в 1000px, но к тому же чтобы не появлялась горизонтальная полоса прокрутки, нужно применить max-width.

Вот что у нас было:

А вот что стало

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

min-width и width: Тут совершенно всё наоборот, если в первом случае мы избавлялись от горизонтальной полосы прокрутки, то тут мы её возвращаем. Другими словами, если резиновый блок шириной в 100% при уменьшении разрешения будет подстраиваться под окно браузера, чем меньше окно тем и меньше сам блок. min-width может установить значение ширины блока после которого он перестанет уменьшаться. Например, если установить min-width: 200px; то блок при достижении данной ширины перестанет уменьшаться, таким образом будет появляться горизонтальная полоса прокрутки в окне браузера.

Практика

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

Данный шаблон состоит из трёх блоков — это шапка сайта, главный контент и сайдбар. Таким образом у меня получились блоки к которым я присвоил соответствующие ID CSS:

Шапка сайта — #headerInner

Главный контент — #colLeft

Как проверить?

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

Ну а сейчас давайте посмотрим и разметку html, она довольно проста:

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

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

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

Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

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


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

  1. просто менять размер экрана браузера,
  2. расположить справа панель инспектора компонентов и менять ее ширину,
  3. использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.
Что используют для оптимизации сайта под мобильные устройства?

Метатег viewport

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

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

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

Пример
Основные свойства метатега
widthШирина видимой области. Рекомендуемое значение: device-width.
heightВысота видимой области. Рекомендуемое значение: device-height.
initial-scaleПервоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1.
minimum-scaleМинимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы.
maximum-scaleМаксимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы.
user-scalableРазрешает или запрещает возможность масштабирования страницы. Принимает значение true или false.

Контент шире экрана – часто возникающая проблема, как только задан viewport.

Читать еще:  Шаблон спортивного сайта

Это происходит, если каким-то элементам задана большая фиксированная ширина.

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

Пример

Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries.

Медиа-запрос начинается с правила @media, после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all), логического оператора (and) и медиа-функции (max-width: 360px).

Типы носителей
allВсе типы.
printПринтеры и другие печатающие устройства.
screenЭкран монитора.
speechРечевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
Устаревшие, хотя и корректные типы, которые не дают результата
brailleУстройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossedПринтеры, использующие для печати систему Брайля.
handheldНаладонники, смартфоны, устройства с малой шириной экрана.
projectionПроекторы.
ttyУстройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tvТелевизоры.
Логические операторы
andЛогическое И. Указывается для объединения нескольких условий.
notЛогическое НЕ. Указывается для отрицания условия. Оператор not оценивается в запросе последним.
onlyКлючевое слово для старых браузеров, не поддерживающих медиа-запросы и считающих only типом носителя. Но так как такого типа не существует, то весь стиль целиком игнорируется. Современные браузеры воспринимают медиа-запрос с only и без only одинаково.
,Логическое ИЛИ. Перечисление нескольких условий через запятую означает, что если хотя бы одно условие выполняется, то стиль будет применён.
Основные медиа-функции
width
(min-width, max-width)
Ширина окна браузера.
device-width
(min-device-width, max-device-width)
Ширина экрана устройства.
height
(min-height, max-height)
Высота окна браузера.
device-height
(min-device-height, max-device-height)
Высота экрана устройства.
orientationОриентация устройства. Принимает значения portrait (портретная), если ширина меньше высоты или landscape (альбомная), если ширина больше высоты.
Пример

Задан размер заголовка:

На большом экране компьютера такой заголовок смотрится нормально, но для вертикального экрана смартфона он слишком крупный. Для экранов, ширина которых меньше или равна 360px, можно уменьшить размер шрифта с помощью медиа-запроса:

Новые единицы размеров (vw, vh, rem)

vw1% от ширины окна браузера (viewport).
vh1% от высоты окна браузера (viewport).

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример

Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример

Flexbox

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

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

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример

В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

На узком экране список станет вертикальным:

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

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

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

10 лучших сайтов с адаптивной версткой

Время чтения: 6 минут Нет времени читать? Нет времени?

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

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

Адаптивный дизайн: за и против

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

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

Читать еще:  Узнать количество посетителей чужого сайта

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

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

Пример № 1. Sales Force

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

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

Пример № 2. Nixon

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

  • Простота меню. На экране планшета элементы навигации не отличаются от десктопных. А когда вы заходите на сайт с помощью смартфона, то доступ меню осуществляется с помощью навигационного элемента.
  • Удачные визуальные решения. Фото часов привлекают внимание и вызывают желание ознакомиться с товаром.
  • Наличие четкого призыва к действию на всех страницах. Например, на главной пользователь видит призыв подписаться на рассылку.
  • Высокая скорость загрузки сайта.

Пример № 3. Everlane

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

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

Пример № 4. Adobe

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

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

Пример № 5. Huffington Post

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

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

Пример № 6. Chili’s

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

Пример № 7. Hubspot

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

Кнопки меню практически сливаются с фоном страницы. Это сделано, чтобы не отвлекать посетителя от коммерческого предложения. Однако если вы нуждаетесь в дополнительной информации, то легко найдете навигационные инструменты.

Пример № 8. Burton

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

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

Пример № 9. IFC

На экране смартфона сайт IFC кажется удобным и простым. Блок навигации позволяет попасть в нужный раздел ресурса. Благодаря фото внимание пользователя привлекается к нужным разделам.

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

Пример № 10. Dadaab Stories

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

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

Ссылка на основную публикацию
Adblock
detector