Адаптивный дизайн сайта для чайников: Как сделать адаптивный дизайн сайта для всех устройств?

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

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

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

И так, поехали.

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

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

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

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

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

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

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

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

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

width:1000px

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

width:100%;

max-width:1000px;

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

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

Практика

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

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

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

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

Сайдбар — #colRight

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

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

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

< !DOCTYPE html>






</pre>
<div>
<div>
 <a href="http://beloweb.ru">Логотип</a></div>
</div>
<pre>

<!-- начало врапер --></pre>
<div>
<div>
<div>
<div>
<div>
<h2>Основной контент</h2>

Содержание главного контента</div>
</div>

<!-- Конец коллефт -->

<!-- начало колрайт -->
<div>
<div>
<h2>Текст сайдбара</h2>

Содержание сайдбара</div>
</div>

<!-- Конец колрайт --></div>

<!-- Конец контент --></div>

<!-- Конец мидл --></div>
<pre>

<!-- Конец врапер -->

А вот стили данного шаблона:

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;

}

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

Шапка сайта так же имеете ширину в 1000 пикселей. Главный контент #colLeft имеет ширину в 67%, правая колонка width:30%; и отступ между ними margin-left:30px; далее данный отступ мы будем задавать в процентах.

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

Теперь самое интересно. Сейчас будем использовать @media screen основу адаптивного дизайна.

Но для начала хочется сказать, что в @media screen задаются желаемые разрешения устройств. Их существует множество, вот самые популярные: 320px, 480px, 600px, 768px, 900px, 1200px. В нашем примере мы будем использовать только два разрешения, это 1024px и 768px. Таким образом если разрешение устройства меньше чем 1024px будут задаваться свойства, которые заданы в @media screen. Так же точно и с разрешением 768px.

Вот как выглядит правило @media screen в стилях CSS:

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

}

Как видите, что мы задали max-width:1024px, данное значение говорит браузеру с какого разрешения применять правило. А min-width:200px не даст сузить сильно сайт. Между этими скобками {} мы пишем новые свойства классам, которые задали в стилях для шаблона.

1024px

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

Вот что я прописываю в стилях:

@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%;
 }

}

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

768px

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

@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 съехал под главный контент.

Для сайдбара, тоже задал ширину в 100% и убрал выравнивание. А так же сделал отступ сверху, чтобы он немного отделялся от контента margin-top:25px;

Вот что у меня получилось:

Важно!

Обновлено 1,08,2013

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

1. Я заметил одну особенность. Когда задаются правила к стилям в @media screen к классам, к ним нужно прописывать некий путь. Например класс #headerInner вообще не работает без стандартного класса body. Если написать просто  #headerInner и задать к нему правила, то браузер почему то не применяет эти правила, а вот если написать body #headerInner то начинает всё работать. Так же и для всех других классов. Если класс #3 находится в классе #2 то нужно прописывать #2 #3 иначе правила работать не будут.

2. Если Вы собрались делать шаблон с адаптивным дизайном, обязательно между тегами <head> и </head> добавьте вот этот мета тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

3. Так же добавьте вот этот код в стилях CSS для картинок:

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

И картинки будут автоматически растягиваться и сужаться.

Вывод

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

Например я практически без проблем для своего шаблона на блоге  http://beloweb.ru/ сделал доступным для мобильных устройств, адаптивным. Кстати можете проверить 🙂

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

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

Как построить адаптивный сайт при помощи CSS?!

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

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

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

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

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

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

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

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8"/>
        <title>Респонсивный сайт Демо</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0" />
        <link href="styles/main.css" type="text/css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>

        <div>

            <header>

                <nav>
                    <ul>
                        <li>
                            <a href="#main" title="к главному контенту">Скролл к контенту</a>
                        </li>
                    </ul>
                </nav>

                <h2>Logo</h2>

                <nav>
                    <ul>
                        <li><a href="#" title="Home">Главная</a></li>
                        <li><a href="#" title="About">Купить</a></li>
                        <li><a href="#" title="Work">Сервис</a></li>
                        <li><a href="#" title="Contact">Контакты</a></li>
                    </ul>
                </nav>

                <div>
                    <img src="images/merc.jpg" alt="banner" />
                </div>

            </header>    

            <section>
                <h2>Технические данные</h2>
                <p>Открытый автомобиль Mercedes 190 SL называли кабриолетом из-за трёхместной компоновки салона.
Двигатель ставили один — новый четырёхцилиндровый агрегат рабочим объёмом 1,9 л. «Четвёрка» получилась путём
отсечения двух цилиндров от рядного мотора родстера 300 SL Gullwing. У двух двигателей одинаковый диаметр
цилиндра (85 мм), но ход поршня уменьшился с 88 до 83,6 мм. На «сто девяностом» мотор, оснащённый двумя
карбюраторами Solex, выдавал 105 сил и 142 Н•м. Кабриолет (сухая масса — 1160 кг) комплектовался полностью
синхронизированной «механикой» с четырьмя ступенями и мог разгоняться до 171 км/ч. Покупателям были доступны машины как с мягким верхом (цена — $3998), так и с демонтируемым жёстким ($4295). 
Производство в Штутгарте шло с 1955 по 1963 год, а всего был сделан 25 881 автомобиль. </p>
            </section>

            <aside>
                <h2>История</h2>
                <p>История модели Mercedes SL уходит корнями в 1954 год — именно тогда на автосалоне
в Нью-Йорке немцы представили двухдверку Mercedes 190 SL. Можете себе представить уровень эстетического шока посетителей тогдашнего мотор-шоу. Под кузовом пленительной красоты скрывалась 
укороченная платформа от седана Mercedes W120 Ponton и стальной монокок. Подвеска была полностью независимая — с двухрычажкой спереди и качающимися полуосями сзади. Длина — 4290 мм,
расстояние между осями — 2400 мм. </p>
            </aside>

        </div>

    </body>
</html>

CSS

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

/* Макет */
#wrapper {
    width: 96%;    
    max-width: 920px;
    margin: auto;
    padding: 2%;
    } 

    #main {
        width: 60%;
        margin-right: 5%;
        float: left;
        }        

    aside {
        width: 35%;
        float: right;
        }

/* Logo  h2 */
header h2 {
    height: 98px;
    width: 216px;
    float: left;
    display: block;
    background: url(images/sllogo.png) 0 0 no-repeat;
    text-indent: -9999px;
    }

/* Навигация */
header nav {
    float: right;
    margin-top: 40px; 
    }

    header nav li {
        display: inline;
        margin-left: 15px;
        }
header nav ul li a {
    text-decoration:none;
        color:#333;}

#skipTo {
    display: none;
    }
    #skipTo li {
        background: #ccc;
        }

/* Главная картинка*/            
#banner {
    float: left;
    margin-bottom: 15px;
    width: 100%;
    }

    #banner img {
        width: 100%;
        height: auto;
        }

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

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

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

/* Медиа-запросы */
@media screen and (max-width: 480px) {

    #skipTo {
        display: block;
        }

    header nav, #main, aside {
        float: left;
        clear: left;
        margin: 0 0 10px; 
        width: 100%;
        }    
        header nav li {
            margin: 0;
            background: #ccc;
            display: block;
            margin-bottom: 3px;
            }
            header nav a {
                display: block;
                padding: 10px;
                text-align: center;
                }

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

Чтобы разрешить медиа-запросам войти в полный эффект, обычный мобильный, оптимизированный, респонсивный сайт должен содержать что-то вроде следующего:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Cвойство width, отвечает за размер области просмотра. Он может быть установлено на определенное число пикселей, width=960, или на device-width значение, что является шириной экрана в пикселях в масштабе 100%. initial-scale свойство управляет масштабом при первой загрузке страницы. maximum-scale, minimum-scale, и user-scalable свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).

Высоких конверсий!

10-03-2016

Адаптивный дизайн — как создать самостоятельно с нуля?

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

Именно адаптивная верстка обеспечивает автоматическое изменение веб-страницы в соответствии с характеристиками определенного гаджета.

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

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

Назначение адаптивного сайта

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

• Одинаково качественного отображения ресурса на любом современном устройстве с различными параметрами разрешения дисплея. Пользователи не должны ощущать дискомфорт независимо от того, что они используют: мобильный телефон, планшет или персональный компьютер.
• Необходимости соответствия современным тенденциям. Никто не будет отрицать того, что с каждым годом популярность мобильных устройств и приложений будет только расти. Наверняка через несколько лет порядка 90% интернет-пользователей будут выходить в сеть через мобильное устройство. Поэтому владельцам сайтов уже сейчас стоит позаботиться об удобстве их ресурса для пользователей гаджетов. Иначе эти пользователи наверняка перейдут к конкурентам с адаптивными сайтами.
• Предоставления экстренных сведений. Данную задачу обычно выполняют информационные сайты. Большинство посетителей таких веб-ресурсов используют то, что всегда есть под рукой – телефон. Поэтому для информационных веб-проектов обеспечение адаптивности сайта является приоритетной задачей.

Что лучше: мобильное приложение или адаптивный сайт?

Мобильные приложения, в которых дублируется контент с основного веб-сайта – это прекрасное решение проблемы адаптивности. Но и такое решение имеет целый ряд минусов:

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

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

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

Как создать адаптивный сайт с нуля

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

Инструкция для начинающих вебмастеров, как правило включает:

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

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

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

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

Адаптивная верстка: алгоритм действий

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

Итак, разработка адаптивного дизайна начинается с создания простого изображения, предназначенного для последующего увеличения:

Именно так создается оболочка для дальнейшей обработки картинки. Далее нужно задать следующие параметры:

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

Настройка отдельных элементов

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

• • Шапки сайта. В «хедере» нужно разместить следующие элементы: лого (<a class=»logo»>), кнопку скрытия меню (

• • Блока с текстовым контентом. Для обертывания текста стоит использовать следующий элемент:
    .
  • Боковой колонки. Для этого используется тег
    .
  • Элемента . Этот код необходимо добавить в тело страницы. Он обеспечивает изменение высоты меню и подгонку контента под размеры экрана.

Разработка мини-галереи

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

Для обеспечения возможности взаимодействия картинки с разными разрешениями можно использовать CSS3:

Это все необходимые действия для создания адаптивной мини-галереи.

Как создать адаптивный дизайн новичку самостоятельно?

Даже при условии, что вы никогда раньше не были связаны с созданием сайтов — у вас есть отличный инструмент для того, чтобы создать качественный, современный адаптивный дизайн своего личного сайта. Просто зарегистрируйтесь в конструкторе сайтов FO.ru — подберите шаблон и занимайтесь наполнением сайта качественным контентом. Мы уже позаботились о том, чтобы каждый шаблон, который предлагается нашим пользователям на выбор — будет корректно работать на каждом из устройств.

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

Google официально объявил адаптивный веб-дизайн приоритетным инструментом для создания мобильных версий сайтов. Если у вас есть сайт или блог, пора серьёзно задуматься о переходе на адаптивный дизайн вместо того, чтобы поддерживать разные версии сайта для телефонов и планшетов.

Если вы ещё не особо знакомы с концепцией адаптивного дизайна, у вас могут возникнуть различные вопросы, на которые мы уже подготовили ответы.

Почему я должен переходить на адаптивный дизайн?

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

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

• Вы экономите время и деньги, поскольку вам не нужно поддерживать несколько сайтов отдельно для экранов компьютера и для экранов мобильных телефонов.
• Благодаря адаптивному дизайну вырастет поисковая оптимизация сайта (SEO), поскольку у каждой страницы будет один и тот же URL. Вам не нужно будет беспокоиться о том, что некоторые ссылки будут вести на мобильную версию сайта, а другие — на десктопную.
• В отчётах Google Analytics показатели сайта будут выше, поскольку результаты запросов с мобильных телефонов и с ПК будут синхронизированы.
• То же самое касается статистики распространения в соцсетях (лайки в фейсбуке, твиты и т.п.), так как у мобильной и десктопной версии сайтов будет одинаковый URL.
• Сайты с адаптивным дизайном гораздо легче поддерживать, поскольку они не требуют каких-либо серверных компонентов. Нужно лишь модифицировать базовые CSS-стили страницы для изменения внешнего вида (или положения на странице) в зависимости от конкретного устройства.

Что нужно знать перед началом работы с адаптивным дизайном?

Адаптивный дизайн использует чистый HTML и CSS. Вы задаёте правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, по которому при размере экрана менее 320px не будет показываться боковая панель, или при размере экрана более 1920px (широкоэкранный монитор) размер шрифта основного текста будет увеличен до 15px.

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

Всё просто. Откройте этот сайт в любом браузере и измените размер. Если вид веб-страницы меняется, значит, был использован адаптивный дизайн.

Если я перейду на адаптивный дизайн, будет ли мой сайт отображаться в более ранних версиях браузера?

В большинстве случаев — будет. В адаптивном дизайне используются медиазапросы CSS3 и HTML5 (для улучшенной семантики), которые не поддерживаются в более старых версиях IE. Однако можно найти выход, используя решения JavaScript — respond.js и другие средства модернизации, которые адаптируют CSS3 и HTML5 под более старые версии, включая IE6.

Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?

Если на вашем сайте присутствуют рекламные объявления, вам нужно особенно внимательно подходить к выбору их форматов, потому что широкие блоки (например, баннеры размером 728×60 px) могут не помещаться на экране телефона размером 320px. Мы предпочитаем использовать стандартные прямоугольные блоки (например, 300×250), поскольку они легко подстраиваются как под экраны мобильных устройств, так и под мониторы ПК.

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

Мы бы посоветовали задать как минимум следующие параметры разрешений для медиазапросов в CSS3: 320px (iPhone, ландшафтный режим), 480px (iPhone, портретный режим), 600px (планшеты Android), 768px (iPad и планшеты Galaxy Tab) и 1024px (ландшафтный режим iPad и рабочий стол ПК).

Как мне начать работать с адаптивным веб-дизайном? Есть ли какие-нибудь хорошие туториалы?

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

Есть ли какие-то недостатки в использовании адаптивного дизайна?

• Лишние килобайты на веб-странице, поскольку нужно будет загружать CSS стили и файлы JavaScript, которые в других случаях не нужны.
• Изображения. В адаптивном веб-дизайне сложно добиться размещения изображений в высоком разрешении на мобильной версии сайта (если только вы не используете обходные серверные решения наподобие Adaptive Images или Sencha).
• Чтобы добавить адаптивность к существующему сайту, придётся потрудиться. Иногда проще заново создать сайт, чем переделать его под адаптивный дизайн.

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

Перевод статьи «Best Practices of Responsive Web Design»

Адаптивный дизайн: паттерны для новичков

Сегодня мы поговорим об одном из самых непростых аспектов дизайна — адаптиве.

С появлением миниатюрных веб-браузеров, которые помещаются в карман (речь о телефонах, кто не понял), весь процесс создания макетов усложнился в ДЕСЯТКИ РАЗ. Раньше можно было сделать одну статичную картинку в Photoshop, экспортировать её и отправить разработчикам, а что теперь..? Две картинки? Три? Четыре? Сколько их нужно? Или, может быть, нам вообще нужны не наборы статичных картинок, а что-то более гибкое? Агхх, кто-нибудь знает какие-нибудь инструменты для прототипирования?

и извечный вопрос: ДОЛЖНЫ ЛИ ДИЗАЙНЕРЫ УМЕТЬ КОДИТЬ?!

Над этой проблемой бились наши лучшие умы — и в итоге они нашли решение для работы с огромным множеством конфигураций экранов. Говорят, нужно вернуться к инструменту, которым лет сто назад пользовались дизайнеры постеров, — к сетке! Я уже жаловался вам на сетки (и советовал, чем заняться вместо работы с ними). Не вижу смысла здесь снова поднимать эту тему. Вместо того, чтобы хайповать на «адаптивных сетках», я предложу вам выполнить два действия:

1. Познакомьтесь с парочкой паттернов для адаптивных контейнеров…

2. А потом прислушайтесь к тому, чего хочет от вас контент.

Звучит неплохо, а? Давайте начнём. Перед вами четыре самых полезных паттерна для адаптивных контейнеров из тех, что я знаю. Конечно, только ими вы не обойдетесь. Но это лучшее, с чего можно начать. Вместе эти паттерны создают основу (фреймворк), которая позволяет отследить поведение адаптивного веба; и увидев его, развидеть уже будет нельзя.

1/ Контейнеры с фиксированной шириной

Это самый простой «адаптивный» паттерн, поскольку при изменении размера экрана он, по сути, остаётся прежним (другими словами, не адаптируется). Некоторые элементы не меняются совсем, по крайней мере когда всё остальное вокруг них увеличивается или уменьшается.

Обратите внимание на боковое меню в приложении курса Learn UI Design:

Видите, что с ним происходит, когда меняется размер экрана?

Подсказка: да ВООБЩЕ НИЧЕГО.

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

А теперь вопрос: почему?

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

No bueno, друзья мои.

Это сбивает с толку в том числе и моих студентов. По мнению дизайнеров в интернетах, сетки важны. Даже очень. «Рассчитайте сетку ещё перед началом работы над макетом», — говорят они. Но если у нас есть боковое меню, что тогда? Быть паиньками и его тоже выравнивать по сетке?

Но что будет, если ширина нашего экрана — а за ним и ширина колонок —увеличится?! Мы уже видели, к чему это приводит…

Безусловно, пользуйтесь сеткой, если она помогает вам выравнивать элементы. Но по большей части, вы прекрасно обойдётесь всего несколькими линейками, чтобы сделать выравнивание по трем параметрам:

1. Границы элементов
2. Поля внутри элементов (на картинке ниже установлено по 20px внутри каждого участка)
3. Любые центральные линии, которые могут пригодится

Как здесь:

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

Паттерн с фиксированной шириной:

• Для узких экранов: установите определенную ширину (или переместите элемент в отдельное окно)

• Для средних экранов: используйте ту же ширину

• Для больших экранов: снова, используйте ту же ширину
  

Думаю, теперь можно дать вам кое-что посложнее 😉

2/ Гибкие контейнеры

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

…или с блоками верхней навигации, или если экран поделён на области:

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

Кстати, вопрос: зачем нужен паттерн с неограниченной шириной? Повторяйте за мной: потому что так хочет контент.

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

Я тут поигрался с версткой, пытаясь поменять настройки фона главной сайта Stripe. Всё, что можно здесь назвать «фоном», после моих действий выглядит капец как странно.

Паттерн с неограниченной широтой

• На узком экране: элемент занимает 100% пространства

• На среднем экране: всё ещё 100 % пространства

• На широком экране: и всё равно 100% пространства

Любопытно, но паттерн с неограниченной шириной не является ни самым распространённым, ни самым эффективным паттерном для контейнера. Но он невероятно эффективен в паре с третьим паттерном.

3/ Контейнеры с максимальной шириной

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

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

И снова сайт Stripe, потому что … ну а почему нет?

… или если у вас здоровенный монитор, откройте Facebook, вы увидите паттерн с максимальной шириной во всей своей красе.

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

Окей, я переборщил с описанием картинки выше. Зато я нашёл пример со всеми паттернами, о которых говорил! И в этом-то вся суть… в переплетении всех паттернов. Кто-то будет разглядывать ваш дизайн на невообразимого размера мониторе, а кто-то — на своих часах, но вы итак это уже знаете.

К счастью, активное использование контейнеров с максимальной шириной на основе контейнеров с неограниченной шириной должно здорово вам подсобить. Ах да, и ещё один небольшой урок — возможно, это и так очевидно, но всё же: совершенно НЕОБЯЗАТЕЛЬНО заполнять контентом весь макет! Достаточно установить максимальную ширину для определённых элементов.

Восхитительный паттерн на сайте Stripe.

Ваш контент может занимать ровно столько места, сколько нужно вам. И даже если Bootstrap дал вам 12 колонок, это ещё не значит, что нужно все их заполнять. Позволяя контенту самому определить, какая ширина ему подойдёт, вы, на самом деле, привлекаете к нему внимание.

Помните, когда вы впервые увидели вот это? (ну или как там эта страница раньше выглядела?)


Даже не говорите, какой я старикан.

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

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

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

Паттерн с максимальной шириной

• На маленьких экранах: элементы (возможно) занимают все пространство

• На средних экранах: теперь занимаемое пространство зафиксировано

• На больших экранах: и снова занимаемое пространство зафиксировано
  

Хороший совет: ставьте по умолчанию ширину отступов на 0. Можете не благодарить.

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

4/Брейкпоинты, определяемые контентом

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

Брейкпоинт — это ширина, при которой ваш макет меняется полностью и сразу, а не постепенно.

Я знаю, знаю. В каждой дизайн-системе уже установлены свои брейкпоинты в соответствии со старыми размерами экранов iPhone. Это тяжёлая борьба, но золотым правилом для вас должны стать мудрые слова Стефана Хея (Stephen Hay): «начните с маленького экрана и расширяйте его. Как только макет станет выглядеть хреново — время для брейкпоинта!»

Вот как работает навигационное меню на сайте Stripe:

Означает ли это, что разработчикам придется жонглировать большим количеством мультимедийных запросов? Да, к сожалению так. Поэтому и их упрямство мне понятно. Но каждый раз, когда у вас спрашивают: «Эй, а где бы нам определить брейкпоинты?», отвечайте: «Где этого хочет контент, тупица» — и бейте по щам.

Эм… Ну вы поняли 😉

Что такое адаптивная верстка, как ее сделать и примеры дизайне веб-сайта

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

И сразу же об актуальности: сегодня он считается одним из весьма явных и даже ключевых показателей качества и современности корпоративного или частного web-ресурса во Всемирной Сети. Причем его разработка – это все еще сравнительно новое направление, и для него весьма характерны частые изменения различных мелочей. Но зато он ориентирован на перспективу – не только на те гаджеты, которыми мы пользуемся прямо сейчас, но и на те, что будем юзать лет через 5.

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

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

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

По-английски он называется Adaptive Web Design, и данный термин метко отражает, каким он должен быть – гибким и функциональным.

Зачем нужна адаптивная версия сайта

Ее стоит внедрить, как минимум, по трем причинам, каждая из которых достаточно важна сама по себе:

• Чтобы к вам «в гости» было одинаково комфортно заходить с любого гаджета – сегодня люди бродят по интернет-просторам с помощью айфонов и нетбуков, отличающихся между собой размерами и разрешением экрана; чтобы обеспечить удобство всем и каждому, необходимо реализовать автоматически подстраиваемый интерфейс.
• Чтобы ваш ресурс чаще посещали с нестационарных устройств, и мобильный трафик планомерно увеличивался – за последние годы в разы возросло количество людей, пользующихся для серфинга смартфонами и планшетами; их нельзя игнорировать, ведь часть из них – ваша целевая аудитория, а потому важно создать им все условия, чтобы они захотели побывать у вас снова.
• Чтобы оперативно предоставлять клиентам/подписчикам ценную информацию – сегодня горячую новость или срочное уведомление человеку проще прочесть с телефона (ведь он всегда под рукой, а до компьютера, бывает, еще нужно добраться).

Преимущества и недостатки адаптивного дизайна

Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:

• Экономит силы, средства, время на обслуживание – с нею нет необходимости поддерживать сразу несколько ресурсов, достаточно обеспечивать бесперебойную работу одного.
• Повышает число показов в отчетах аналитических сервисов Гугла и Яндекса – благодаря тому, что синхронизирует запросы от различных устройств.
• Упрощает SEO-продвижение – у каждой страницы будет только один URL, соответственно, все ссылки будут в равной степени удобными для конечного пользователя.
• Вообще не требует сложных серверных компонентов – адаптивный сайт нуждается лишь в разовой модификации базовых стилей CSS-стилей, тогда контент будет подстраиваться под девайс юзера.
• Помогает быстрее рекламироваться в социальных сетях – получать лайки в ВК и Facebook, собирать больше твитов и тому подобное; опять же, все из-за одинаковых УРЛов.

Минусы тоже есть, и это:

• Сложность совмещения с уже существующим ресурсом – проще создать новый web-проект, чем переписывать старый.
• Размещать картинки высокого разрешения довольно проблематично – для этого зачастую приходится использовать решения “в обход” основных, вроде библиотеки Sencha либо плагина Adaptive Images.
• Страницы весят больше, чем обычно – из-за загрузки файлов JavaScript и уже упомянутых стилей CSS у них появляются «дополнительные» килобайты.

На практике достоинства гораздо существеннее недостатков.

Принципы адаптивной верстки

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

Прочность

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

Относительность единиц измерения

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

Использование контрольных точек

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

Максимальные и минимальные значения

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

Вложенность объектов

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

Правильные шрифты

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

Грамотное использование графики

Если изображение детализированное, стоит сделать его растровым, если же нет – векторным. И каждую картинку лучше оптимизировать, то есть сжать, но так, чтобы ее поддерживали даже старые браузеры.

Выдерживание размеров макетов

Важно соблюсти подходящее разрешение – среди стандартных вариантов:

•  320, 480 px – для смартфонов,
• 768 – для всевозможных планшетов,
• 1024 – для нетбуков,
• от 1280 – для стационарных компьютеров.

Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.

Правильные медиазапросы

С их помощью при создании ресурса задаются:

• типы поддерживаемых девайсов,
• условия показа тех или иных объектов.

На каждый будут подгружаться соответствующие стили CSS-языка.

Размеры макетов

Еще одно, заслуживающее отдельного внимания, правило адаптивного дизайна – это mobile first: в первую очередь разрабатывают решения под мобильные, и уже потом, на их основе, делают связанную с ней десктопную версию. Шаблоны разделяются (по ширине экрана) на 6 вариантов, растущих следующим образом, в пикселях:

• 320,
• 480,
• 768,
• 1024,
• 1280,
• 1600.

Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.

Viewport и Media query

Это важные параметры, которые необходимо правильно задавать. Первый – это мета-тег, говорящий браузеру о том, нужно ли увеличивать/уменьшать страницу, и как отображать присутствующие на ней объекты. Его следует записать в <head> таким образом:

<meta name=viewport content=”width=device-width, initial-scale=1.0 “>

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

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

@media screen and (max-width: 768px) {

.class {

свойство: значение;

}

}

Здесь:

• @media – сам запрос,
• screen – носитель,
• max-width – обязательное условие к выполнению (тут – ширина не достигает 768 пикселей),
• class – селекторы, определяющие рабочие параметры.

При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).

Типы адаптивных макетов

Существует 5 основных вариантов шаблонов – рассмотрим каждый.

Резиновый

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

Перенос блоков

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

Переключение

Трудоемкий в создании и внедрении, а поэтому не самый популярный способ. При его реализации под каждое актуальное разрешение нужно создать свой макет (а потом между ними будет осуществляться автоматический выбор – по ситуации).

Адаптивность «малой кровью»

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

Панели

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

Что такое адаптивный дизайн сайта, и чем он отличается от отзывчивого

Они довольно похожи, но принципиальная разница есть в технологии их реализации:

• Responsive Design (RWD) создается с гибкой сеткой или другими подходящими, но статическими свойствами, позволяющими одному шаблону быть актуальным для нескольких гаджетов.
• Adaptive (AWD) проектируется с условиями, изменяющимися, исходя из устройства серфинга, в его базе есть уже ряд макетов, он динамический и ориентирован на диагональ экранов.

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

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

Что лучше использовать? Зависит от структуры web-ресурса: если она «резиновая», отзывчивость будет весьма удобной, вот только от нее может снизиться скорость загрузки (при наличии большого количества визуальных элементов).

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

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

Итак, резюмируем, выделяя ключевой показатель:

Responsive	Adaptive
Один, но гибкий шаблон для всех девайсов	Сразу несколько макетов – для каждого гаджета свой

 

Отличие адаптивного сайта от мобильной версии

Созданные под конкретные модели и операционные системы телефонов и планшетов приложения – тоже вариант, у которого, правда, есть определенные недостатки:

• под всякую новую ОС требуется отдельное решение, что сопровождается дополнительными затратами ресурсов на разработку;
• программный продукт нужно загружать (а иногда даже покупать) – это дополнительные усилия со стороны пользователя, и далеко не все захотят их предпринимать; ленивых требуется убеждать, что это ПО полезно, тратиться на рекламу и тому подобное;
•  траффик разделяется на два потока, и кажется, что посещаемость меньше;
• материалы web-ресурса приходится интегрировать – либо синхронизируя с работой мобильной версии, либо параллельно наполняя контентом сразу два ресурса, а это двойной труд.

И вот тут уместно еще раз упомянуть термин «адаптивная верстка сайта»: что это такое в данном контексте? Здесь это комплекс мер, предпринимаемых разработчиками для создания web-проекта с одним адресом, оформлением, контентом и системой управления, одинаково удобным для просмотра со всех активно используемых устройств. Да, минусы у этой технологии тоже есть, но они весьма относительны. Главным недостатком считается новизна: пока ею в совершенстве владеет лишь малое число специалистов. Но зато какие перспективы она открывает! Ею будут пользоваться и через 5 лет, когда, вполне вероятно, появятся какие-то принципиально иные гаджеты.

Образы в адаптивном дизайне: примеры

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

Применение свойства width

Если его значение равняется 100%, картинка будет увеличиваться/уменьшаться вверх/вниз.

Записывается оно так:

<img src=”img_dog.jpg” style=”width:100%;”>

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

Использование max-width

Если его показатель в 100%, объект изменяет свой масштаб по мере необходимости, но никогда не становится больше первоначального.

Выглядит это так:

<img src=”img_dog.jpg” style=”max-width:100%;height:auto;”>

Показ изображений, исходя из ширины браузера

Чтобы установить зависимость, достаточно ввести HTML-элемент <picture>. Конструкция его довольно громоздкая, но весьма эффективная:

<picture>

<source srcset=”img_bigboy.jpg” media=”(max-width: 768px)”>

<source srcset=”img_bigboy.jpg” media=”(max-width: 1024px)”>

<source srcset=”boy.jpg”>

<img srcset=”img_bigboy.jpg” alt=”Boy”>

</picture>

Варианты разработки и примеры адаптивных версий сайтов

Итак, можно:

1. Заказать web-ресурс у профессионалов – самый простой и надежный выбор, ведь специалисты решат вопрос максимально качественно. Подходящих разработчиков вы найдете в лице коллектива Студия17 – обращайтесь.
2. Найти уже готовое оформление и начать его использовать – подходит для тех, кто не ищет эксклюзивности, но при этом разбирается в теме настолько, чтобы самостоятельно переписать часть кода.
3. Применить фреймворки, то есть каркасы с основными объектами, и уже на их основе достроить свое детище. Этот способ хорош тем, что позволяет получить и бесценный опыт конструирования, и уникальный набор шаблонов.

Как сделать адаптивную верстку сайта на базе фиксированного макета

Если есть рабочая и уже проверенная тема, нужно:

• сделать ее резервную копию;
• установить редактор CSS-кода, допустим, Notepad++ или бесплатный Adobe Brackets;
• запустить Google Chrome и нажать F12.

После такой подготовки можно приступать к основной части – следует:

• Перенести проект на локальный сервер, чтобы он был временно недоступен пользователям.
• Добавить мета-теги и перевести абсолютные единицы измерения в относительные (пиксели – в проценты).
• Оставить без изменения max-width, то есть основную ширину, остальные выразить в %, разделив их на главную (родительскую).
•  Изменить размеры шрифтов на em, найдя частное между нужными и стандартными. Если по умолчанию они 16px, а вам нужно 24, получится 24/16 = 1,5 em.
• Прописать в CSS свойство «height: auto», благодаря ему картинки будут автоматически масштабироваться (правда, без изменения веса).

Это основные мероприятия, после них останется найти точки «перелома» – те, в которых наблюдаются перестройки шаблона. Искать их следует, постепенно уменьшая размер окна Google Chrome, и как только оформление перестанет корректно показываться, зафиксировать первую breakpoint в файле «style.css», а затем следующую и так до конца. Отступы блоков обнуляются.

Когда вы сделаете все это, то увидите, как элементы подстраиваются под различные размеры экрана.

Обязательно ли использовать Adaptive Web Design?

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

Мы подробно рассказали, что такое адаптивная верстка сайта, примеры макетов и варианты решений тоже привели, но готовы помочь вам еще больше. Обращайтесь в компанию Студия17, заказывайте наши услуги, и мы разработаем современный web-ресурс с AWD, одинаково дружелюбный ко всем его посетителям. 

Десять проблем адаптивного дизайна и их решения — Блог HTML Academy

Благодаря адаптивным сайтам, быстро подстраивающимся под любое устройство и размер экрана, интернет меняется, чтобы предоставить пользователю наилучший опыт. Начиная с межнациональных корпораций, таких, как Sony, Microsoft и Nokia, и заканчивая мировыми техническими знаменитостями (Salesforce) и онлайн-гигантами для путешествий (Expedia), серьёзные игроки поворачиваются к адаптивному веб-дизайну, чтобы идти в ногу с современными тенденциями и достичь ещё более широкой аудитории.

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

1. Более проблематичный этап визуализации

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

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

2. Навигация

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

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

3. Качество фоновых изображений и иконок

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

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

4. Отображение данных на маленьких экранах

Отображение таблиц с данными (например, расписание авиарейсов) на маленьких экранах — настоящая проблема.

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

5. Быстрая загрузка на всех устройствах

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

Решение: постепенная загрузка, которая позволяет загружать только то, что нужно пользователю. Правило следующее: первым загружается контент, затем улучшения, a потом всё остальное. Используя подход «сначала мобильные», для пользователей, привыкших к большому числу контента, дизайнеры должны оставить только те элементы, которые необходимы. Распространение мобильных устройств опережает настольные компьютеры, поэтому постепенная загрузка — это решение. Благодаря использованию средств автоматизации для масштабирования и кэширования изображений, последующие изменения на сайте становятся проще. Из-за того, что соединение пользователя может быть неидеальным, производительность очень важна.

6. Длительные этапы дизайна, разработки и тестирования

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

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

7. Скрытие и удаление содержимого

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

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

8. Перевод фиксированных сайтов в адаптивные

Существует большая дилемма: менять ли менее гибкий код фиксированной вёрстки или оставить как есть и по-прежнему обеспечивать приемлемую производительность?

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

9. Старые версии Internet Explorer не поддерживают CSS3 медиавыражения

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

Решение: хорошая практика — беспокоиться о пользователях Internet Explorer и предлагать им удобное решение. Используя JavaScript, опытный разработчик может легко изменить расположение на странице в зависимости от размеров окна браузера. Для поддержки оригинальных макетов решением является использование полифилов, то есть части кода обеспечивающей технологии, которые, как ожидает разработчик, браузер должен предоставлять изначально. Другим решением может быть подключение отдельных стилей для IE с простым оформлением. Можно вообще ничего не делать, если это выглядит допустимо. Всё зависит от потребностей конечного пользователя.

10. Не все понимают, зачем им использовать адаптивный дизайн

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

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

Заключение

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

Руководство по адаптивному веб-дизайну для чайников | by Bradley Nice

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

Если вы новичок в концепции адаптивного веб-дизайна (RWD), вот общие вопросы, которые могут у вас возникнуть по поводу этой техники.

Почему я должен переключить свой сайт на RWD?

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

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

• Он экономит время и деньги, поскольку вам не нужно поддерживать отдельные веб-сайты для настольных компьютеров и мобильных телефонов.
• Адаптивный дизайн хорош для SEO (поискового рейтинга) вашего сайта, поскольку каждая страница на вашем сайте будет иметь один URL, и, таким образом, сок Google сохраняется.Вам не нужно беспокоиться о ситуациях, когда одни сайты ссылаются на ваш сайт для мобильных устройств, а другие — на сайт для настольных компьютеров.
• Ваши отчеты Google Analytics дадут более полное представление об использовании вашего сайта, поскольку данные, полученные от пользователей мобильных и настольных компьютеров, будут объединены.
• То же самое относится и к статистике обмена в социальных сетях (лайки, твиты, +1 в Facebook), поскольку мобильная и настольная версии ваших веб-страниц будут иметь один и тот же URL.
• Адаптивные проекты легче поддерживать, поскольку они не включают никаких серверных компонентов.Вам просто нужно изменить базовый CSS страницы, чтобы изменить ее внешний вид (или макет) на определенном устройстве.

Что мне нужно знать, чтобы начать работу с адаптивным дизайном?

Адаптивный дизайн — это чистый HTML и CSS. Вы создаете правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, которое гласит, что если размер экрана пользователя меньше 320 пикселей, не показывать боковую панель или если размер экрана больше 1920 пикселей (широкоэкранный рабочий стол), увеличивать размер шрифта до основной текст до 15 пикселей.

Как проверить, использует ли конкретный веб-сайт адаптивный дизайн?

Это просто. Откройте этот веб-сайт в любом браузере на рабочем столе и измените размер браузера. Если макет сайта меняется при изменении размера, дизайн адаптивный.

Есть примеры хороших отзывчивых веб-сайтов?

Если я выберу адаптивный дизайн, будет ли мой веб-сайт работать со старыми браузерами?

В основном да. RWD использует медиа-запросы CSS3 и HTML5 (для лучшей семантики), которые не поддерживаются в старых версиях IE.Однако существуют решения на основе JavaScript — например, response.js и modernize — которые позволяют использовать возможности CSS3 и HTML5 в старых браузерах, включая IE6.

Хорошо ли адаптивный дизайн сочетается с рекламными сетями, такими как Google AdSense?

Если вы используете рекламу на своем веб-сайте, вам следует внимательно выбирать форматы, поскольку широкие блоки (например, полноразмерный баннер 728 × 60 пикселей) могут не поместиться на экране мобильного устройства с разрешением 320 пикселей. Я предпочитаю использовать стандартные прямоугольные блоки (например, 300 × 250), поскольку они легко помещаются на экранах смартфонов и широкоэкранных рабочих столах.

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

Я бы порекомендовал установить точки останова как минимум для следующих окон просмотра в ваших CSS3 Mediaqueries — 320 пикселей (альбомная ориентация iPhone), 480 пикселей (портрет iPhone), 600 пикселей (планшеты Android), 768 пикселей (iPad + ~ Galaxy Tabs) и 1024 пикселей ( iPad в альбомной ориентации и десктопы).

Как начать работу с адаптивным веб-дизайном? Есть какие-нибудь хорошие уроки?

Вот онлайн-ресурсы, которые помогут вам начать работу:

Веб-сайты: Net Magazine, Smashing Magazine, CSS Tricks и Web Designer Wall [эти веб-сайты и блоги часто посвящены адаптивному дизайну]

Видеоуроки: YouTube, Net Tuts [адаптивный дизайн 101]

Презентации: PowerPoint Decks [лучшие онлайн-презентации RWD]

Книги: Чутко нажимайте.Книга доступна в форматах PDF, Kindle и ePUB]

Подкасты : Shop Talk, 5by5 Web Show и The Industry

Twitter : @RWD, @NetMag и @SmashingMag [аккаунты, за которыми стоит следить в Twitter]

Каковы недостатки адаптивного дизайна?

• Дополнительные килобайты на вашей веб-странице, так как им придется загружать стили CSS и файлы JavaScript, которые в противном случае были бы ненужными.
• Изображений. Вы не хотите размещать изображения с более высоким разрешением на своем мобильном сайте, но этого трудно добиться с помощью адаптивного дизайна (если вы не прибегнете к обходным путям на стороне сервера, таким как Adaptive Images и Sencha.io).
• Попытки добавить адаптивный слой к существующему веб-сайту. Иногда имеет смысл начать с нуля, а не делать существующий веб-сайт фиксированной ширины гибким.

Вам также могут понравиться: Адаптивные макеты бесплатно EBOOK

Адаптивный веб-дизайн — руководство для чайников

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

Один дизайн, несколько экранов

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

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

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

Q2 — Какие еще преимущества перехода на RWD?

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

• Он экономит время и деньги, поскольку вам не нужно поддерживать отдельные веб-сайты для настольных компьютеров и мобильных телефонов.
• Адаптивный дизайн хорош для SEO (поискового рейтинга) вашего сайта, поскольку каждая страница на вашем сайте будет иметь один URL, и, таким образом, сок Google сохраняется. Вам не нужно беспокоиться о ситуациях, когда одни сайты ссылаются на ваш сайт для мобильных устройств, а другие — на сайт для настольных компьютеров.
• Ваши отчеты Google Analytics дадут более полное представление об использовании вашего сайта, поскольку данные, полученные от пользователей мобильных и настольных компьютеров, будут объединены.
• То же самое будет справедливо и для статистики обмена в социальных сетях (лайки, твиты, +1 в Facebook), поскольку мобильные и настольные версии ваших веб-страниц больше не будут иметь разные URL-адреса.
• Адаптивные проекты легче поддерживать, поскольку они не включают никаких серверных компонентов. Вам просто нужно изменить базовый CSS страницы, чтобы изменить ее внешний вид (или макет) на определенном устройстве.
• Ранние методы проектирования смотрели на строки пользовательского агента, чтобы определить имя мобильного устройства и браузер, который делает запрос. Это было менее точно, и с учетом того, что количество устройств и мобильных браузеров увеличивается с каждым днем, эту матрицу очень трудно поддерживать.Адаптивный дизайн не заботится о пользовательских агентах.

Q3. Что мне нужно знать, чтобы начать работу с адаптивным дизайном?

A3 — Адаптивный дизайн — это чистый HTML и CSS. Вы создаете простые правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, которое гласит, что если размер экрана пользователя меньше 320 пикселей, не показывать боковую панель или если размер экрана больше 1920 пикселей (широкоэкранный рабочий стол), увеличивать размер шрифта до основной текст до 15 пикселей.Вот те же правила, переведенные в код:

@media screen и (max-width: 320px) { .sidebar {display: none} } @media screen и (min-width: 1920px) { тело {font-size: 15px} }

Q4 — Как проверить, используется ли на конкретном веб-сайте адаптивный дизайн?

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

Q5 — Можете ли вы поделиться примерами некоторых хороших веб-сайтов, которые реагируют на запросы?

A5 — Это довольно много, но мои фавориты включают The Boston Globe (новостной сайт), Simple Bits (личный блог), Happy Cog (агентство веб-дизайна), Barack Obama (да, сайт президента), Shake Shack ( сеть ресторанов), Nicole & Josh (свадебный сайт), Food Sense (кулинария и рецепты), dConstruct 2012 (конференция по дизайну) и Good to Know (сайт Google по онлайн-безопасности). Вы также должны проверить mediaqueri.es, тщательно подобранная галерея веб-сайтов, использующих адаптивный дизайн.

Q6. Если я выберу адаптивный дизайн, будет ли мой веб-сайт работать со старыми браузерами?

A6 — В основном да. RWD использует медиа-запросы CSS3 и HTML5 (для лучшей семантики), которые не поддерживаются в старых версиях IE. Однако существуют решения на основе JavaScript, например, response.js и modernizr, которые позволяют использовать возможности CSS3 и HTML5 в старых браузерах, включая IE6.

Q7 — Хорошо ли адаптивный дизайн сочетается с рекламными сетями, такими как Google AdSense?

A7. Если вы используете рекламу на своем веб-сайте, вам следует внимательно выбирать форматы, потому что широкие блоки (например, полноразмерный баннер 728×60 пикселей) могут не поместиться на экране мобильного устройства с разрешением 320 пикселей.Я предпочитаю использовать стандартные прямоугольные блоки (например, 300×250) в своем блоге, поскольку они легко помещаются на экранах смартфонов и широкоэкранных рабочих столах.

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

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

А8.Откройте панель управления Google Analytics и выберите «Аудитория» -> «Технологии» -> «Браузер и ОС». Теперь переключитесь на вкладку «Разрешение экрана» в отчете и посмотрите разрешение мобильных устройств, которые люди используют для просмотра вашего сайта.

Я бы порекомендовал установить точки останова как минимум для следующих окон просмотра в ваших CSS3 Mediaqueries — 320 пикселей (альбомная ориентация iPhone), 480 пикселей (портретная ориентация iPhone), 600 пикселей (планшеты Android), 768 пикселей (iPad + ~ Galaxy Tabs) и 1024 пикселей (iPad). пейзаж и рабочие столы).

Q9 — Как начать работу с адаптивным веб-дизайном? Есть какие-нибудь хорошие уроки?

A9 — Сначала прочтите статью Итана Маркотта, а затем купите его книгу. Итан придумал термин и популяризировал эту технику с тех пор, как он написал эту статью для A List Apart в 2010 году.

Вот дополнительные онлайн-ресурсы, которые помогут вам начать работу:

Q10. ?

A10 — Адаптивный дизайн может добавить несколько дополнительных килобайт на вашу веб-страницу, поскольку им придется загружать стили CSS и файлы JavaScript, которые в противном случае были бы ненужными.Другая проблема связана с изображениями. Вы не хотите размещать изображения с более высоким разрешением на своем мобильном сайте, но этого трудно добиться с помощью адаптивного дизайна (если вы не прибегнете к обходным путям на стороне сервера, таким как Adaptive Images и Sencha.io).

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

Руководство по адаптивному веб-дизайну для начинающих [статья]

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

Бесплатная пробная версия Treehouse: Хотите узнать больше об адаптивном веб-дизайне? Попробуйте бесплатную пробную версию Treehouse.

За последний год адаптивный дизайн стал довольно горячей темой в сообществе веб-дизайнеров.Если весь этот шум заставляет вас чувствовать, что Рип Ван Винкль просыпается в 21 веке, это краткое изложение поможет вам догнать время.

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

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

Итак, что же такое адаптивный дизайн? На самом деле, лучше задать вопрос: какую проблему решает адаптивный веб-дизайн? Что ж, как вы могли заметить, компьютеры больше не единственное оборудование с веб-браузером. Я мог бы получить неприятности, сказав это, но iPhone был одним из первых мобильных устройств с действительно отличным веб-браузером, и он действительно привлек внимание к обновлению возможностей мобильного Интернета.Многие другие устройства последовали его примеру, и, казалось бы, в мгновение ока лицо мобильного Интернета изменилось.

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

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

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

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

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

Как гибкие сетки создают адаптивные макеты

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

Решетки

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

Чтобы вычислить пропорции для каждого элемента страницы, вы должны разделить целевой элемент по его контексту.В настоящее время лучший способ сделать это — сначала создать макет с высокой точностью в пиксельном редакторе изображений, таком как Photoshop. Имея в руках макет высокой точности, вы можете измерить элемент страницы и разделить его на всю ширину страницы. Например, если ваш макет имеет типичный размер, например 960 пикселей в поперечнике, то это будет ваше «контейнерное» значение. Затем предположим, что наш целевой элемент имеет произвольное значение, например 300 пикселей в ширину. Если мы умножим результат на 100, мы получим процентное значение 31.25%, которые мы можем применить к целевому элементу. Вот математика:

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

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

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

 @media screen и (min-width: 480px) {

  .содержание {
    плыть налево;
  }

  .social_icons {
    дисплей: нет
  }

  // и так далее...

} 

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

• 320 пикселей
• 480 пикселей
• 600 пикселей
• 768px
• 900 пикселей
• 1200 пикселей

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

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

Ресурсы и руководства

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

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

Бонусное видео серии

Мы начинаем добавлять бесплатные видео на Youtube по адаптивному веб-дизайну, поэтому, если вы хотите узнать больше, вы можете подписаться на наш канал здесь: http://trhou.se/subscribe-treehouse-yt

Вот видео для начала:

Комментарии к статье закрыты. Ознакомьтесь с нашей обновленной статьей: Руководство по адаптивному веб-дизайну 2014 г.

---

Получите степень Techdegree Front End Web Development и станьте сертифицированным разработчиком.

Узнайте больше о программе Techdegree сегодня.

Руководство для начинающих · Tyton Media ™

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

Если быть более конкретным, Итан Маркотт был первым создателем адаптивного веб-дизайна.В 2010 году он написал эту статью об адаптивном веб-дизайне и о том, как включить его в свой веб-сайт. С тех пор малые и крупные предприятия переводят свои веб-сайты на адаптивный дизайн.

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

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

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

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

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

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

Зачем мне нужен адаптивный веб-сайт?

Теперь, когда вы в некоторой степени знакомы с тем, что такое адаптивный веб-дизайн… зачем он вам?

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

БЕСПЛАТНЫЙ SEO аудит сайта

Получите больше трафика в Интернете с помощью этого бесплатного анализа веб-сайтов для SEO.

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

62% компаний, разработавших веб-сайты специально для мобильных устройств, увеличили продажи. (Источник: Econsultancy)

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

Создание адаптивного веб-сайта

Итак, вы понимаете, что такое адаптивный веб-сайт и почему он так важен … так как же вы это делаете? Что ж, это немного сложнее, чем кажется. Есть несколько важных составляющих, которые помогут сделать ваш сайт адаптивным на всех устройствах.

Макеты жидкостей

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

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

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

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

Таким образом, если размер браузера сокращен или увеличен, макет веб-сайта будет реагировать на эти изменения и охватывать правильный процент.Заголовок имеет 100% ширину, поэтому он всегда будет охватывать всю (100%) ширину страницы. Основная область содержимого будет занимать 70% страницы, а боковая панель — 30%. Обратите внимание, что эти числа округлены для простоты, но редко бывает, что процентная ширина будет целой.

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

Для этого все, что вам нужно сделать, это разделить цель по контексту.Допустим, ваш веб-сайт с фиксированной шириной составляет 1024 пикселей (средний размер экрана), как в примере выше. Это означает, что 100% ширина составляет 1024 пикселя. Поэтому, если бы мы хотели вычислить боковую панель 300 пикселей в процентном соотношении, мы бы просто взяли 1024 пикселей / 300 пикселей, что равняется 29,29%.

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

Адаптивные изображения

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

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

Адаптивные изображения

Наиболее широко используемый метод создания адаптивных изображений — это адаптивные изображения.Адаптивные изображения работают, придавая изображению 100% ширину и позволяя ему «адаптироваться» к родительскому контейнеру. Это означает, что если вы измените размер браузера, изображение изменится вместе с ним. Вот CSS, чтобы сделать ваши изображения адаптивными:

 img {
 максимальная ширина: 100%;
 ширина: 100%;
} 

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

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

HISRC

HiSRC — это новый метод создания адаптивных изображений, использующий JavaScript для отображения различных изображений в зависимости от скорости Интернета пользователя.Например, «Если есть высокоскоростное соединение и , браузер поддерживает большее соотношение пикселей устройства, тогда изображение« сначала мобильные »заменяется двукратным изображением».

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

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

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

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

  / * Смартфоны (книжная и альбомная ориентация) ----------- * /
@media only screen и (min-device-width: 320px) and (max-device-width: 480px) {
/ * Стили * /
.кнопка {display: none}
}
  

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

Вот несколько распространенных точек останова запросов CSS Media, которые могут помочь вам начать работу:

 / * Пользовательский, iPhone Retina * /
@media only screen и (min-width: 320px) {
/ * пользовательские стили * /
}

/ * Очень маленькие устройства, телефоны * /
@media only screen и (min-width: 480px) {
/ * пользовательские стили * /
}

/ * Маленькие устройства, планшеты * /
@media only screen и (min-width: 768px) {
/ * пользовательские стили * /
}

/ * Средние устройства, настольные компьютеры * /
@media only screen и (min-width: 992px) {
/ * пользовательские стили * /
}

/ * Большие устройства, широкие экраны * /
@media only screen и (min-width: 1200px) {
/ * пользовательские стили * /
} 

Завершение

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

Преобразование вашего веб-сайта для работы на всех устройствах и в браузерах может оказаться сложной задачей для малого бизнеса. Если вам нужен адаптивный веб-сайт, не смотрите дальше! Мы создаем потрясающие адаптивные веб-сайты для малого и крупного бизнеса, которые хотят привлечь больше клиентов в Интернете. В настоящее время мы предлагаем рекламную акцию, в рамках которой мы разработаем и создадим ваш новый адаптивный веб-сайт БЕСПЛАТНО .Вам не нужно платить, пока вы не будете полностью удовлетворены результатами (в чем мы уверены).

Есть вопросы или предложения?

Будем рады услышать их в комментариях!

БЕСПЛАТНЫЙ SEO аудит сайта

Получите больше трафика в Интернете с помощью этого бесплатного анализа веб-сайтов для SEO.

Руководство по адаптивному веб-дизайну для новичков в 2021 году

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

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

Таким образом, если вы поместите ваш контент в один столбец и вызовете его выход, это не приведет к его сокращению.

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

И это улучшение пользовательского опыта означает более высокие конверсии и рост бизнеса.

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

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

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

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

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

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

Недостаточно того, чтобы ваш сайт хорошо смотрелся на экране компьютера. 🖥 Планшеты, ноутбуки 2-в-1 и смартфоны — все это часть уравнения … и это руководство охватывает все, что вам нужно знать об адаптивном дизайне 🤳Нажмите, чтобы твитнуть

Адаптивный веб-дизайн и адаптивный дизайн

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

Адаптивный и адаптивный дизайн

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

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

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

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

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

Доля рынка мобильных устройств, планшетов и настольных ПК

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

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

Мобильный поисковый трафик

Наконец, за последние несколько лет мобильная связь стала одним из важнейших рекламных каналов.Даже на рынке после пандемии расходы на мобильную рекламу растут на 4,8% до 91,52 миллиарда долларов.

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

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

Адаптивны ли сайты WordPress?

Адаптивность сайтов WordPress зависит от темы вашего сайта WP.Тема WordPress является эквивалентом шаблона для статического веб-сайта и контролирует дизайн и макет вашего контента.

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

Если вы используете другую тему WordPress, вы можете проверить, реагирует она или нет, сравнив ее внешний вид на разных устройствах или с помощью инструментов разработчика Chrome.

Строительные блоки адаптивного веб-дизайна

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

CSS и HTML

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

HTML против CSS (Источник изображения: codingdojo.com)

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

Вы можете установить «класс» или «идентификатор», на которые впоследствии можно будет нацеливаться с помощью кода CSS.

Вы также можете управлять основными атрибутами, такими как высота и ширина, в вашем HTML, но это больше не считается лучшей практикой.

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