Адаптивно модифікуємо старі сайти

20

Від автора: Можна застосовувати адаптивні методики до старих сайтів в якості першого етапу отримання досвіду роботи з маленькими екранами. Стримуйте свій ідеалізм.

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

Більшість з нас, можливо, погодяться з тим, що насправді з Вебом не можна закінчити працювати. Характер реального часу цього монстра робить це засіб повідомлення унікальним, проте при поступовій еволюції своїх сайтів ми часто вибираємо ‘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 з класом інструментів, що містить всю ліву колонку. Під час інспекції ви побачите, що його ширина визначена 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%.

Адаптивно модифікуємо старі сайти

У подібному сценарії ви змогли б змусити зображення стати гнучким, застосувавши і 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):


Today Sep 28 Jun 28
11 Payments $27.00 $18.00 $18.00

Адаптивно модифікуємо старі сайти

Малюнок 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 для швидкого створення найкращого враження. Це не довгострокове рішення, але у нього є вагомі переваги перед поетапним підходом.