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

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

0

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

Респонсивные изображения

Гибкие (fluid) изображения являются главным аспектом отзывчивого дизайна. К счастью, изображения такого рода довольно легко сделать. Приведенный ниже CSS код поможет вам убедиться в том, что изображения представлены в самом большом размере. Например, если изображение отображается в 600px ширине контейнера, тогда оно будет 600px. Изменение размера контейнер на 350px, заставит изображение автоматически поменяться на максимально доступную ширину, в данном случае 350px.

Респонсивные HTML5 видео

Поскольку HTML5 спецификация позволяет легко вставлять видео на веб-страницы, почему бы их не использовать?! Создание отзывчивого HTML5 видео довольно просто, добавьте следующие строки в CSS файл, и все готово:

Респонсивные YouTube видео

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

Во-первых, рассмотрите данный код HTML:

Во-вторых, добавьте это к вашему CSS файлу:

Респонсивное меню навигации

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

Вот простой прием, который можно задействовать на любом сайте. Давайте начнем с HTML, мы создадим два меню: стандартное меню  <ul>(для стандартных дисплеев), и выпадающее меню  <select> для мобильных устройств:

А вот и CSS. Здесь нет ничего сложного, мы скрываем <select> по умолчанию, и только показиваем его тогда, когда ширина документа меньше 960px:

Респонсивные таблицы данных

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

Давайте начнем с создания основной таблицы.

HTML

CSS

Теперь, когда у нас есть таблица и ее базовый стиль, мы можем сделать ее отзывчивой. Мы заставим таблицу не вести себя как “таблица” установив каждый ее элемент на block-level. Затем, мы сохраним полосатую таблицу (зебра), которую мы первоначально добавили, это вроде как каждая строка таблицы, становится таблицей сама по себе (на столько большой, насколько является данный экран). Нет больше никаких горизонтальных прокруток! Затем, для каждой “клеточки”, мы используем CSS контент  :before, чтобы применить метки (таким образом, мы будем знать, что означает каждый бит данных).

Добавляем эту статью к себе в закладки, так как мы уверены – они пригодится вам еще не раз!

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.