Адаптивная модернизация старых сайтов

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

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

Большинство из нас, вероятно, согласятся, что Интернет никогда не будет завершен. Природа зверя, работающего в режиме реального времени, делает нашу среду уникальной, однако мы часто выбираем «Файл > Создать» вместо постоянного развития наших сайтов. Правда в том, что нам не всегда удается начать все сначала. И, как утверждает Кристофер Лейон в Мобилизация веб-сайтов: стратегии реализации мобильных веб-сайтов (разработка и дизайн)«лучше что-то делать, чем ничего не делать».

Определена адаптивная модернизация

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

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

Модернизация жидкостной сетки

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

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

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

#page-outer элемент не имеет ширины, указанной в CSS, поэтому перейдите на один уровень дальше к элементу div с идентификатором страница-контейнер. Вы заметите, что в CSS установлена ​​ширина 837 пикселей. Мы собираемся изменить его на 100%, просто нажав на 837 пикселей в инспекторе и заменив это значение на 100% (см. рисунок B).

Сразу же две колонки контента сместятся в левую и правую часть экрана. Однако, поскольку оба столбца имеют фиксированную ширину, между ними остается немного места (см. рисунок C).

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

.wrapper, .wrapper-narrow, .wrapper-permalink {
…
width: 100%; /* was 837px */
padding: 54px 14px 15px; …
}

…его общая ширина теперь превышает 100% (на 28 пикселей больше, если быть точным). Это вводит небольшую прокрутку влево/вправо в окне браузера. Мы можем облегчить эту проблему, добавив новый стиль к инспектору. Если вы используете Chrome, нажмите символ + (значок Новое правило стиля Кнопка) в верхней части палитры «Стили». Если у вас есть #page-контейнер элемент все еще выбран, он предварительно заполнит селектор нового правила стиля этим идентификатором. Мы просто добавим калибровка коробки свойство и установите его в рамка.

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

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

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

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

.dashboard {
width: 36%; /* 302/837 = 36ish% */
float: left; }

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

.content-main {
width: 63%; /* 522/837 = 63ish% */
float: right; }

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

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

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

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

Изображений

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

Еще один трюк — использовать минимальная ширина и/или Максимальная ширина вместо !важный. Возможно, вы хотите, чтобы изображение заполняло 100 % контейнера и сохраняло соотношение сторон. Вы можете сделать это, даже если указаны встроенные стили, установив параметр минимальная ширина и/или Максимальная ширина до 100%.

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

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

По сути, минимальная ширина и Максимальная ширина Правила объединяются, чтобы принудительно увеличить изображение до 100%, независимо от ширины строки. Поскольку высота также указывается встроенно, нам все равно необходимо переопределить ее с помощью !важный ключевое слово для сохранения соотношения сторон.

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

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

Таблицы

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

... ... ... 



Today
Sep 28
Jun 28


11 Payments
$27.00
$18.00
$18.00

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

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

/* make browsers include padding and border inside the width */
* {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* table cells get "display: block" and "float: left" */
th, td {
display: block; float: left; text-align: center; border: 0; border-bottom: 1px solid #aaa; }
/* the far left column will be full-width and called out */
th {
width: 100%; background-color: #000; color: #fff; }
/* each inner table cell will fit four-across (25%) */
td {
width: 25%; min-height: 3em; border-right: 1px solid #aaa; }
/* hide the header row */
thead {
display: none; }
/* the last option only has one inner cell, make it 100% */
tr: nth-child(5) td {
width: 100%; }

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

Если вы действительно обратили внимание, то заметите, что я только что полностью скрыл верхнюю строку данных. В реальном проекте заголовки этих столбцов динамически генерировались на сервере на основе текущего дня. Очевидно, что мы не можем сделать это с помощью CSS. Вместо этого я фактически использовал n-й ребенок селекторы и контент, сгенерированный CSS, для создания более общих заголовков (Сегодня, Месяц 2, Месяц 3, и так далее).

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

Заворачивать

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

Благодаря Стефани Ригер за ее рецензию на это руководство