Как сделать сайт адаптивным на все экраны: Как адаптировать сайт под разные разрешения экрана: инструменты, гайды

Leave a Comment / Адаптив / By /

Содержание

Основы адаптивного дизайна / Хабр

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

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

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

Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

max-width и width

Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.

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

Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.

Было

width: 1000px;

Стало

width: 100%;
max-width: 1000px;
min-width и width

Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).

Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).

  • Шапка — #headerInner
  • Основной контент — #colLeft
  • Боковая колонка — #colRight

Проверить адаптивность шаблона можно с помощью масштабирования окна (см. скриншот).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Адаптивный шаблон</title>
</head>
<body>
<div>
  <div>
     <a href="http://bifot.ru/blog/">Логотип</a>
  </div>
</div>
<!-- начало wrapper -->
<div>
   <div>
       <div>
          <div>
              <div>
                   <h2>Основной контент</h2>
                   <p>Здесь будет находится основной контент страницы</p>
              </div>
          </div><!-- конец colLeft -->
          <!-- начало colRight -->
          <div>
              <div>
                   <h2>Текст сайтбара</h2>
                   <p>Содержимое сайтбара</p>
              </div>
          </div><!-- конец colRight -->
       </div><!-- конец content -->
   </div><!-- конец middle -->
</div><!-- конец wrapper -->
</body>
</html>

CSS

* {
 margin: 0;
 padding: 0;
}
 
body {
 width: 100%;
 height: 100%;
 color:#333;
 background: url(images/body. png) 0px 0px repeat;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
}
 
h2 {
 font-size:30px;
 font-weight:normal;
 padding:0px 0 0px;
 line-height:100%;
 font-style:italic;
}
 
a {
 color: #cd5252;
 text-decoration:none;
}
 
a:hover {
 color:#963c3c;
 text-decoration: none;
}
 
/* -------------------------------
 Структура
 ----------------------------------*/
 
/* -------------------------------
 Ширина сайта в 1000px
 ----------------------------------*/
 
#wrapper {
 margin-top:40px;
 border:0px solid #000;
 width: 100%;
 max-width:1000px;
 margin: 0 auto;
 height: auto !important;
}
 
/* -------------------------------
 Шапка сайта
 ----------------------------------*/
 
#headerInner {
 border: 0px solid #000;
 background: #d04942;
 position:relative;
 width:100%;
 max-width:1000px;
 height:100px;
 margin:0 auto;
 margin-top:0px;
}
 
.text {
 margin:15px;
 
}
 
/* -------------------------------
 Главный контент
 ----------------------------------*/
 
#content #colLeft {
 
border: 0px solid #000;
 float:left;
 width:67%;
 margin-right:0px;
 background: #85c9cf;
}
 
/* -------------------------------
 Сайтбар сайта
 ----------------------------------*/
 
#content #colRight {
 position:relative;
 margin-left:30px;
 float:left;
 width:30%;
 border: 0px solid #1FA2E1;
 background: #7a9e0e;
}
 
#middle:after {
 content: '.
 
 
 ';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
 
/*----------------------------
 Логотип
 ------------------------------*/
 
.logo {
 position:absolute;
 left:0px;
 top:40px;
}
 
.logo a {
 margin-left:30px;
 font-size:30px;
 color:#96b551;
}

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

У шапки ширина все таже — 1000 пикселей. У основного контента (#colLeft) ширина 67%, а у правой колонки — 30%. Отступ между ними 30 пикселей (3%)

.

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

@media screen and (min-width:200px) and (max-width:1024px) {
}

Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.

1024 пикселя

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

Вот, что необходимо прописать в CSS

@media screen and (min-width:100px) and (max-width:1024px) {
/* размер блока, где находятся главный контент и сайтбар*/
body #wrapper {
 margin-top:40px;
 width: 90%;
 margin: 0 auto;
}
/* размер шапки сайта*/
body #headerInner {
 width:90%;
 margin:0 auto;
}
 
/* размер главного контента*/
#wrapper #content #colLeft {
 width:67%;
}
 
/* размер сайтбара*/
 
#wrapper #content #colRight {
 margin-left:3%;
 width:30%;
}
} /* скобка, закрывающая тег @media screen

Шапка сайта (#headerInner) имеет новый размер в 90%. Стоит отметить, что для шапки мы не используем max-width, ибо он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90%. Ширина и сайтбара, и основного контента остаются неизменными, изменился лишь отступ у сайтбара (3%). Это используется для того, чтобы при уменьшение окна сайтбар не «падал» вниз.

768px

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

@media screen and (min-width:100px) and (max-width:768px) {
 #wrapper #colLeft {
  float:none;
  width:100%;
  margin-right:0px;
 }
 #wrapper #colRight {
  margin-left:0px;
  margin-top:25px;
  float:none;
  width:100%;
 }
}

Для блока основного контента (#colLeft) мы указали ширину 100%, чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

Для того, чтобы картинки также сужались нужно использовать этот код

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* для ie8 */
}

html — Как сделать сайт адаптивным для одинакового разрешения экрана, но разного размера?

Задать вопрос

Вопрос задан

Изменён 5 лет 10 месяцев назад

Просмотрен 294 раза

Доброго времени суток, есть 2 монитора, один с диагональю 23 и разрешением 1920×1080, на нем я и делаю сайт, и отталкиваюсь от него, создавая адаптивность для разрешений поменьше, используя стандартное средство браузеров для проверки адаптивности, к примеру когда я проверяю разрешение 1366×768 и создаю для этого разрешения стили, то все нормально, однако стоит открыть сайт на ноутбуке с разрешением 1366×768 дизайн немного отличается от того, что показывает инструмент браузера для того же разрешения, к примеру, если в инструменте для 1366 все ровно, то на ноуте с тем же разрешением немного все плывет вниз, как с этим быть ? И второй момент, есть маленький ноут с диагональю 15 и разрешением 1920×1080, и так все стили по умолчанию, которые и делались под это разрешение — плывут, но на мониторе с тем же разрешением все нормально, как сделать стили для одного разрешения но разного размера устройств ?

  • html
  • css
  • bootstrap
  • адаптивная-верстка

Сложно будет добиться «идентичности» на разных устройствах. Начните с добавления <meta name="viewport" content="width=device-width, initial-scale=1"> (в head)своего сайта. Опять же если не вникать в проблемы кроссбраузерности. Можно попробовать отказаться от размеров в px а перейти на em/rem или же вообще на vw/vh

Если я правильно понимаю вопрос то в стилях нужно использовать относительные размеры в em/rem. Хотя лично у меня возникали при этом проблемы связанные с плотностью пикселей на разных устройствах (dpi) — на мониторе одно, на реальном устройстве все уезжает.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

10 лучших практик адаптивного веб-дизайна

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

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

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

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

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

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

10 лучших практик адаптивного веб-дизайна

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

1. Обратите внимание на навигацию

Адаптивный веб-дизайн оказывает огромное влияние на навигацию по сайту. Давайте взглянем на веб-сайт Microsoft 2007 года:

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

Теперь рассмотрим веб-сайт Microsoft в 2022 году:

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

‍

Когда сайт Microsoft переносится на мобильное устройство, реклама оптимизируется для размера экрана, а навигация превращается в меню-гамбургер для простоты использования.

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

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

А как же боковые панели? Ну, это может быть сложно. Настольные компьютеры дают нам массу горизонтального пространства для работы, что позволяет относительно легко размещать дополнительные ссылки на боковой панели. Но адаптивный дизайн требует, чтобы дизайнеры создали самый простой путь, по которому кто-то мог бы не отвлекаться. Устранение боковых панелей — один из способов добиться этого.

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

‍

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

‍

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

2. Спланируйте организацию контента перед тем, как приступить к проектированию

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

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

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

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

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

3. Начните свой дизайн с мобильного устройства

Более половины глобального интернет-трафика приходится на мобильные телефоны. Эти устройства лидируют на рынке, независимо от их бренда или операционной системы.

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

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

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

4. Добавьте кнопки призыва к действию

Ваши кнопки должны быть легко идентифицируемыми и понятными.

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

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

Когда дело доходит до цвета, старайтесь не использовать слишком много, чтобы не перегружать посетителей. Выберите 2-3 цвета из цветовой палитры вашего бренда для сайта и используйте что-то яркое, чтобы привлечь внимание к CTA. Тени, градиенты и другие стилистические дополнения, создающие объем, также могут подтолкнуть людей к нажатию кнопок, которые вы хотите, чтобы они нажали.

5. Используйте только те слова, которые вам нужны

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

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

6. Типографика имеет еще большее значение на небольших экранах

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

Используйте разборчивый шрифт, особенно для важных фрагментов текста, таких как навигационные метки. Мелкий шрифт на любом экране плохо читается, поэтому используйте шрифт большего размера, чтобы улучшить читаемость. Что-то в диапазоне 16 пикселей для основного текста должно легко читаться на настольных компьютерах и мобильных устройствах. Увеличьте или уменьшите размер в зависимости от дизайна шрифта (хотя вместо этого мы рекомендуем использовать единицу измерения em, начиная с 1 до 1,25 em).

Расстояние также является важным фактором на небольших экранах. Слишком много оставит ваш текст парящим в пространстве, а слишком мало слов будет складываться, как блины. Убедитесь, что высота строки установлена ​​на соответствующую величину. Обычно хорошо работает что-то в диапазоне от 1,25 до 1,5, но отдельные шрифты различаются, поэтому лучше сначала поэкспериментировать.

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

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

7. Используйте пустое пространство

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

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

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

8. Создание и тестирование адаптивного прототипа

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

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

Это сэкономит вам время и нервы, а также избавит вас от язвительных сообщений в Твиттере о том, что ваш сайт «не работает» на мобильных устройствах. Использование визуальной платформы веб-разработки может помочь упростить этот процесс.

9. Будьте в тренде с адаптивными изображениями

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

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

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

 

10. Усовершенствуйте свои макеты с помощью flexbox

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

Чтобы использовать flexbox, просто дайте родительскому контейнеру настройку отображения «flex», затем выберите, как дочерние элементы внутри этого контейнера распределяются сами по себе. Это относительно просто в принципе, но обеспечивает надежную гибкость.

Адаптивный дизайн изменил Интернет к лучшему

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

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

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

Адаптивный веб-дизайн: основные советы и подходы

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

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


—

Проще говоря, адаптивный веб-дизайн (RWD) — это подход, который позволяет дизайну и коду реагировать на размер экрана устройства. Это означает, что он обеспечивает оптимальное качество просмотра независимо от того, смотрите ли вы на 4-дюймовый мобильный телефон Android, на iPad mini или на 40-дюймовый кинотеатр.

Сравните, как выглядит наш сайт, когда он статичен с фактическим адаптивным дизайном:

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

Почему адаптивный дизайн так важен?


—

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

Основным ключом к адаптивному веб-дизайну является знание вашей аудитории и того, какое устройство они используют для просмотра вашего веб-сайта. Какая часть вашего текущего трафика приходится на настольные компьютеры , планшеты и мобильные устройства? Приблизительно 56% трафика веб-сайтов в США в настоящее время приходится на мобильные устройства. Сегодня насчитывается около 90 149 2,6 млрд пользователей смартфонов (90 150 и 90 149), а к 2020 году их число может превысить 6 миллиардов (90 150). Мобильный дизайн никогда не был так важен.

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

Беспокоитесь о веб-дизайне?  Не волнуйтесь, все в отрасли постоянно борются за адаптацию дизайна для всех версий браузеров, а также для аппаратных устройств. Лучший ответ — просто протестировать свой сайт на как можно большем количестве новых и старых устройств. (И наймите супер-гуру-разработчика!)

Для каких размеров веб-сайта мне следует разработать дизайн?


—

Не существует «стандартного размера сайта». Существуют сотни устройств, и размеры моделей и разрешения экрана постоянно меняются. И каждый отдельный сайт привлекает пользователей с разных устройств. Например, вы, скорее всего, посмотрите рецепт на своем мобильном устройстве (когда вы готовите на кухне) и с большей вероятностью будете искать учебник по Photoshop на своем рабочем столе (вы знаете, когда вы пытаетесь понять, как сделать что-то в Photoshop).

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

Попробуйте создать как минимум 3 макета

—

Адаптивный дизайн веб-сайта должен иметь как минимум 3 макета для браузеров разной ширины. Конкретные цифры, которые мы приводим, — это то, что мы в настоящее время используем в 99designs, но это не жесткие правила.

  • Маленький: до 600 пикселей. Так контент будет выглядеть на большинстве телефонов.
  • Средний:  600–900 пикселей. Так содержимое будет выглядеть на большинстве планшетов, некоторых больших телефонах и небольших компьютерах типа нетбуков.
  • Большой: более 900 пикселей. Так контент будет выглядеть на большинстве персональных компьютеров.

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

Пример нашей страницы с дизайном логотипа для трех разных размеров экрана для адаптивного дизайна веб-сайта.

На что обратить внимание


—
  • Удобство пользователя — ключевой момент: адаптивный дизайн должен быть чем-то большим, чем преобразование сайта для настольных компьютеров в мобильные экраны. Нам нужно учитывать опыт пользователей, их взаимодействие и основной контент, который они на самом деле ищут при использовании мобильного устройства.
  • Не создавайте дизайн для новейших мобильных устройств с определенным размером экрана. Вместо этого создавайте свой сайт вокруг своего контента. Как макет и элементы будут работать на десктопе и как те же самые элементы будут адаптироваться друг к другу на мобильном устройстве?
дизайн Karol Ortyl
  • Engagement: иерархия макета очень важна, особенно на мобильных устройствах. Часто меньше значит больше! Мобильный опыт по сравнению с настольным компьютером гораздо более сфокусирован на ограниченном пространстве, поэтому то, как пользователи читают и перемещаются по вашему сайту, должно быть действительно четким, чтобы донести ваше ключевое сообщение и понять, о чем сайт. Также подумайте об основном действии на странице. Если главная цель — заставить людей нажимать кнопку «связаться с нами», не прячьте ее на странице под кусками текста. Адаптируйте свой контент и дизайн к этому опыту.
  • Гибкие изображения очень важны для разработки адаптивного веб-сайта. Вам нужно подумать о том, как изображение будет масштабироваться. Как это будет выглядеть на большом экране настольного компьютера, на планшете или на маленьком экране мобильного устройства? С точки зрения разработки код позволяет масштабировать изображения в процентах к ширине окна браузера.
  • Навигация важна для мобильных устройств. Существует несколько распространенных методов сопоставления больших меню и содержимого. Это может быть знакомое меню в стиле гамбургера, простое выпадающее меню, поля развертывания/свертывания или вы можете использовать вкладки с горизонтальной прокруткой, как на YouTube.
дизайнов от UI Garage
  • Жесты открывают новые возможности для дизайна. Людям нравится читать руками и взаимодействовать с контентом — это расширяет возможности пользователя. На мобильных устройствах и планшетах пользователи могут масштабировать или перемещать изображения по экрану с помощью щипков. Взаимодействие сильно влияет на дизайн. Например, если у вас есть галерея изображений, постарайтесь не использовать стандартную карусель (маленькие точки), чтобы люди могли циклически просматривать каждое изображение. Подумайте о размере пальца человека и о том, как это преобразуется в полезное решение пользовательского интерфейса. По данным Apple: удобный минимальный размер элементов пользовательского интерфейса, на которые можно нажимать, составляет 44 x 44 пикселей 90 150 . Этот предел часто нарушается, и реальный расчетный предел составляет около 25 пикселей. Сложные дизайны настольных компьютеров должны быть в состоянии адаптироваться к простому интуитивно понятному пользовательскому интерфейсу для небольшого мобильного экрана. Всегда помните об этом при проектировании для разных устройств. Дизайн должен быть гибким, чтобы обеспечить удобство работы пользователей на всех устройствах. Тесное сотрудничество с разработчиком, чтобы понять, что возможно на небольших экранах, повлияет на процесс проектирования.
  • Создайте как минимум 3 версии для браузеров разной ширины. Мы используем до 600px, 600px-900px, 900px+. Между этими ширинами ваш контент может свободно масштабироваться, или вы можете сохранить 3 фиксированных макета. Наличие 3 (или более) фиксированных макетов и добавление полей при необходимости обычно легче спроектировать и реализовать, чем гибкое масштабирование. Однако плавное масштабирование может улучшить работу на большем количестве устройств.

Инструменты и ресурсы


—
  • Ваш веб-браузер может показаться очевидным инструментом для использования, но это самый эффективный ресурс для предварительного просмотра ваших проектов в Интернете. Установите несколько разных браузеров, чтобы получить хороший диапазон отзывов. Затем начните изменять размер окон браузера.
  • Ваше мобильное устройство  – еще один очевидный инструмент, но он действительно полезен для предварительного просмотра ваших проектов, потому что он точно показывает, как ваш сайт будет выглядеть в этих конкретных условиях.
  • Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях вместо заданных пикселей. Например, ширина контента на экране настольного компьютера может быть 930 пикселей, но вы хотите настроить дизайн до 320 пикселей на мобильном устройстве. Чтобы преобразовать это в масштабируемую цифру, результат получается 320/930 = 34,4%. Когда вы применяете это к размеру мобильного экрана, элементы в макете дизайна будут изменять размер по отношению друг к другу. Нам нравится One% CSS Grid.
Дизайн Антона Агейченко
  • Google resizer — хороший ресурс для быстрого предварительного просмотра вашего сайта на нескольких устройствах.
  • Медиа-запросы — это тип кода, который будет реализован на вашем сайте при его создании. Это важно иметь в своем коде, потому что он задает условия для того, чтобы дизайн волшебным образом адаптировался к размеру экрана. Например. «когда размер экрана равен 480 пикселей или меньше, перейдите на макет дизайна планшета». Попробуйте прямо сейчас, просто перетащив окно браузера меньше (если вы на рабочем столе). Вы увидите, что содержимое автоматически изменяет размер в соответствии с различными контрольными точками дизайна на экране.
  • Другие ресурсы для начала работы:
    • Лучший обзор адаптивного веб-дизайна,
    • 12-колоночная жидкостная сетка css
    • Рекомендации для RWD.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *