Katcerina.ru

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

Как сделать адаптивный сайт

Основы адаптивного веб — дизайна (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, она довольно проста:

Адаптивная верстка: что это и как использовать

    Переводы , 24 августа 2018 в 21:10

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

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

Регулировка разрешения экрана

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

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Читать еще:  Прямые ссылки на сайт

Частичное решение: делаем все гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

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

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

1 – 30 апреля , беcплатно

На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

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

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

Еще один способ: отзывчивые изображения

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

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc :

Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Интересная фича для iPhone

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

Для решения данной проблемы используется тег meta :

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл со стилями или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.

Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

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

Медиазапросы CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

Также значения медиазапросов можно комбинировать:

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

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

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

display: none используется для объектов, которые нужно спрятать.

Вот наша разметка:

Читать еще:  Сайт агрегатор товаров

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

Теперь прячем колонки и показываем ссылки:

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

Как сделать сайт адаптивным: советы

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

Что это такое

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

Несколько лет назад специалистам в этой сфере приходилось создавать несколько версий веб-страниц, чтобы ресурс мог нормально отображаться на ‘ktrnhjyys[ гаджетах с разными характеристиками окон. Именно так работали верстальщики вплоть до 2010 года. Затем представление о том, как сделать сайт адаптивным кардинально поменялось. Тогда для выполнения этой функции использовался специальный язык программирования – JavaScript.

Как сделать сайт адаптивным на все экраны мобильных устройств сегодня? Сейчас верстка осуществляется посредством применения таблиц CCS3, а также специального языка HTML5.

Зачем необходим адаптивный сайт

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

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

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

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

  • Мобильное приложение должно обязательно соответствовать разновидности операционной системы. А для этого приходится потратить не только время, но и деньги.
  • Программа требует загрузки. Для использования приложения его, конечно же, следует установить. Разумеется, пользователь может это сделать, но только при условии, что оно ему нужно будет часто. Если же такой необходимости у него не будет, то, скорее всего, он от этой затеи откажется. В результате вы потеряете значительную часть своей аудитории.

Почему стоит отказаться от приложений

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

Как сделать адаптивный дизайн сайта

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

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

  • mobile first – проектирование для электронных гаджетов;
  • flexible images – использование гибких картинок;
  • grid-based layout – применение гибких макетов, основанных на сетке;
  • media queries – обработка медиа-запросов.

Как сделать сайт адаптивным? Для этого можно воспользоваться несколькими разновидностями макетов.

  • Резиновый. Такой вид легко реализовывать, он редко вызывает трудности даже у новичков. Основные блоки ресурса сдавливаются до тех пор, пока не подойдут для размеров мобильных экранов. Если же сжатие оказывается невозможным, то они размещаются в форме ленты.
  • Перемещение блоков. Такая методика безупречно подходит для ресурсов со множеством колонок. Размещение дополнительных блоков меняется с учетом габаритов экрана. Если дисплей уменьшается, сайдбары смещаются в нижнюю часть.
  • Переключение макетов. Это довольно-таки трудоемкая методика, которая подразумевает использование для каждого разрешения экрана специального созданного макета. Такой способ в разы облегчает изучение сайта, однако сложность работы делает его невостребованным.
  • Элементарная верстка. Методика, безупречно подходящая для простых ресурсов. Дизайнер попросту масштабирует картинки и типографику. Хотя такой способ нельзя назвать востребованным на фоне отсутствия гибкости.
  • Панели. Эта методика пришла из мобильных программ, в которых вспомогательное меню может появиться при любом положении дисплея. Сейчас этот способ тоже не сильно популярен, поскольку мобильная навигация на сайте не всегда понятна пользователям.
Читать еще:  Продвижение шаблонных сайтов

Ни один из описанных макетов нельзя назвать универсальным. Как сделать сайт адаптивным? В первую очередь необходимо подобрать подходящий макет, в зависимости от проекта. Он должен полностью соответствовать возможностям ресурса и удовлетворять все потребности.

Как сделать адаптивную верстку сайта

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

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

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

Итак, как сделать адаптивный дизайн сайта с html? Начать нужно с разработки простой картинки, которая затем растянется.

Таким образом создается оболочка для обработки изображения.

А как сделать сайт адаптивным с CSS? Задайте такие параметры:

Затем по ширине div задайте ширину картинки img.

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

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

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

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. 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, который мы ранее добавили в разметку страницы перед закрывающим тегом

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