Адаптивно модифицируем старые сайты

Адаптивно модифицируем старые сайты

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

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

Большинство из нас, возможно, согласятся с тем, что на самом деле с Вебом нельзя закончить работать. Характер реального времени этого монстра делает это средство сообщения уникальным, однако при постепенной эволюции своих сайтов мы часто выбираем ‘File > New’. Истина в том, что не всегда приходится начинать с самого начала. И, как говорит Кристофер Лейон (Kristopher Layon) в Мобилизация веб-сайтов: стратегии исполнения мобильного веба (разработайте и создайте дизайн) Mobilizing Web Sites: Strategies for Mobile Web Implementation (Develop and Design), “делать хоть что-то лучше, чем делать ничего”.

Определение адаптивной настройки

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

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

Модернизация «текучей» сетки

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

Давайте рассмотрим существующий сайт – мы воспользуемся аккаунтом Responsive Design Twitter – и начнем экспериментировать с самой сеткой. Раскочегарьте свой браузер (в моем случае это Chrome), перейдите на twitter.com/rwd и откройте инспектор. Сейчас вы должны видеть нечто вроде Рисунка A.

Рисунок A: вот как инспектируется в Chrome аккаунт Responsive Design в Twitter’е

Далее, давайте немного углубимся в разметку. В тэге body вы обнаружите div с ID doc. Внутри него находятся два div’а, один из них с ID page-outer. Обычно я начинаю с поиска контейнеров с фиксированной шириной.

У элемента #page-outer не определенной в CSS ширины, поэтому углубитесь еще на один уровень к div’у с ID page-container. Вы заметите, что его ширина равна 837 px, установленным в CSS. Мы собираемся изменить ее на 100%, просто щелкнув на 837px в инспекторе и заменив их на 100% (смотрите Рисунок B).

Рисунок B: Изменение ширины div’а контейнера страницы с 837px на 100% с помощью инспектора в Chrome

Две колонки с содержимым тут же смещаются влево и вправо экрана. Однако, так как они обе имеют фиксированную ширину, между ними остается небольшое пространство (смотрите Рисунок C).

Рисунок C: Основной контейнер на странице аккаунта Responsive Design в Twitter’е, подогнанный с 837px до 100%

Кроме того, так как у этого элемента есть установки отступа:

.wrapper, .wrapper-narrow, .wrapper-permalink {
...
width: 100%; /* была 837px */
padding: 54px 14px 15px;
...
}

… его общая ширина теперь составляет более 100% (точнее, на 28px больше). Это вызывает небольшую прокрутку влево/вправо в окне браузера. Устранить ее можно, добавив с помощью инспектора новый стиль. Если вы пользуетесь Chrome, щелкните на знак + (кнопка New Style Rule (правило нового стиля) вверху палитры стилей. Если у вас все еще выбран элемент #page-container, он предварительно заполнит селектор правила нового стиля этим ID. А мы собираемся всего лишь добавить свойство box-sizing и установить его на border-box.

#page-container {
box-sizing: border-box;
}

Свойство box-sizing заставляет любой отступ или рамки элемента показываться внутри определенных ширины и высоты. Смотрите статью Пола Айриша (Paul Irish) об этом свойстве и вопросах кроссбраузерной совместимости и производительности.

Применив это правило, вы увидите, что браузеру больше не требуется никакой прокрутки по горизонтали. 28 px отступа (по 14 px с каждой стороны #page-container) теперь считаются внутри ширины в 100% – в точности как нам нужно в данном случае. Теперь давайте сделаем эти колонки чуть-чуть гибкими.

Внутри div’а #page-container есть div с классом dashboard, содержащий всю левую колонку. Во время инспекции вы увидите, что его ширина определена в 302 px. Если 302 разделить на 837, получится относительная ширина, которую принял элемент .dashboard, когда разметка была ограничена 837 px. Это примерно 36%, поэтому мы установим в инспекторе это значение.

.dashboard {
width: 36%; /* 302/837 = (примерно) 36% */
float: left;
}

Если проделать то же самое с правой колонкой (с классом content-main), ширина которой равна 522 px, у нас получится примерно 63%. Так у нас остается зазор между колонками в 1%, что в данной разметке смотрится почти правильно (смотрите Рисунок D).

.content-main {
width: 63%; /* 522/837 = (примерно) 63% */
float: right;
}

Рисунок D: Здесь страница с Responsive Design в Twitter’е сделана «текучей» с помощью инспектора Chrome

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

Мы необязательно всегда применяем в своей работе с HTML/CSS системы сеток. Однако бывают случаи, когда это имеет смысл, особенно если управление шаблонами должно производиться другой организацией. В тех случаях, где нужно использовать систему сеток, а вы уже применяете в работе препроцессор CSS, можно воспользоваться одной из семантических систем сеток. Две из них, которыми мы пользовались и добились выдающегося успеха – это The Semantic Grid System и Susy. Эти инструменты не требуют несемантических имен классов (ломающихся в адаптивном веб-дизайне). Обычно они являются «примесями»-миксинами или функциями для переопределения ширины в различных контрольных точках.

Модернизация гибкого контента

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

Изображения

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

Другой метод – применить min-width и/или max-width вместо !important. Возможно, вам понадобится установить изображение во все 100% контейнера и сохранить его соотношение размеров. Сделать это можно даже при установленных встроенных стилях, установив min-width и/или max-width на 100%.

<div class="column">
<img src="/i/image.png" alt="alt text" style="width: 200px; height: 100px;">
</div>

В подобном сценарии вы смогли бы заставить изображение стать гибким, применив и min-width, и max-width, как тут:

.column {
width: 50%;
}
column img {
min-width: 100%;
max-width: 100%;
height: auto !important;
}

По сути дела, правила min-width и max-width скомбинированы для того, чтобы изображение было 100%, вне зависимости от встроенных значений ширины. Из-за того, что высота тоже определена встроенным путем, с помощью ключевого слова !important нам нужно ее отменить для поддержания соотношения размеров.

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

Загляните в папку /Images, чтобы посмотреть несколько тестов, которые я провел для отмены встроенных стилей с помощью CSS. Это, несомненно, утомительно, поэтому убедитесь, что сочетаете подобные попытки отмены с тщательным тестированием.

Таблицы

Таблицы данных в адаптивном веб-дизайне – вечное затруднение. Особенно при модернизации, где затрагивать разметку зачастую нельзя, они могут оказаться сложной задачей. Давайте рассмотрим пример. Вот довольно стандартная таблица с несколькими определенными для назначения стилей атрибутами (смотрите Рисунок E):

<table border="0" bgcolor="#eeeeee">
<thead bgcolor="#000000" style="color: #fff">
<tr>
<th width="100"></th>
<th width="81">Today</th>
<th width="81">Sep 28</th>
...
<th width="81">Jun 28</th>
</tr>
</thead>
<tr>
<th width="100">11 Payments</th>
<td width="81">$27.00</td>
<td width="81">$18.00</td>
...
<td width="81">$18.00</td>
</tr>
...
</table>

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

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

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

/* заставьте браузер включить отступ и рамку внутрь ширины */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* ячейки таблицы получают "display: block" и "float: left" */
th, td {
display: block;
float: left;
text-align: center;
border: 0;
border-bottom: 1px solid #aaa;
}
/* крайняя левая колонка будет во всю ширину и станет вызываться */
th {
width: 100%;
background-color: #000;
color: #fff;
}
/* каждая внутренняя ячейка таблицы станет соответствовать четверти (25%) */
td {
width: 25%;
min-height: 3em;
border-right: 1px solid #aaa;
}
/* скройте ряд с заголовком */
thead {
display: none;
}
/* у последней опции всего одна внутренняя ячейка, сделайте ее 100% */
tr:nth-child(5) td {
width: 100%;
}

Всего несколько стилей позволяют нам перелицевать таблицу и сделать ее гораздо более применимой для тех, кто просматривает ее на маленьких экранах. В данном случае я на самом деле всего лишь устанавливаю отдельные ячейки таблицы на display: block и смещаю их влево. Назначив первой ячейке ряда 100% ширину, а каждой из оставшихся — 25%, я красиво складываю их вместе друг на друга (смотрите Рисунок F).

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

Если вы внимательно следили, то заметили, что я просто полностью скрыл верхний ряд данных. В настоящем проекте заголовки колонок динамически генерировались на сервере в зависимости от текущей даты. Понятно, что с помощью CSS этого сделать нельзя. Вместо того я применил селекторы nth-child и сгенерированный CSS контент для создания нескольких более общих заголовков (Today, Month 2, Month 3 и так далее).

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

Заключение

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

Автор: creativebloq.com

Источник: http://www.creativebloq.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree