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

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

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

Легкість

Легкість розуміється тут як легкість в плані розміру сторінки, а не легкість реалізації. Над реалізацією як раз таки довелося попотіти, щоб зробити все так, як хотілося, паралельно заповнюючи прогалини в знаннях CSS3. Я постарався виключити всі зайві графічні елементи на сторінках, замінивши їх класами. До того ж у попередній версії дизайну були не особливо важливі дрібні деталі, відсутність яких ніяк не позначилося на функціональності. Зрозуміло, шапку замінити стилями не вдасться, та це й не треба, це вже відхід в крайність. До того ж шапка складається тільки з однієї .jpg картинки, яка є мало не єдиною.

Ще до легкості можна віднести використання спрайтів, і карти. Спрайт – це коли безліч графічних елементів об’єднані в один файл, а необхідне зображення показується за допомогою завдання в css-стилі необхідних координат. Карта – це щось схоже на спрайт, тільки за допомогою неї задаються області на сторінці, які будуть посиланнями. Наприклад, у вас є шапка, на ній зображені різні елементи, наприклад, елементи навігації, але вирізати і вставляти їх на тлі загальної картинки в шапці не доцільно. Для цього застосовуються карти, просто беремо велику картинку, і створюємо список координат відносно верхнього лівого кута, а кожній координаті присвоюємо посилання. Таким чином, економиться безліч непотрібних запитів до сервера, так як елемент всього один, а всі дані зберігаються в html-коді.

Прикладом реалізації можуть служити три листки (FriendFeed + RSS + Twitter) на головній сторінці.

Простота

Простота – це коли нічого зайвого, що могло б відволікати читача від його заняття – читання. Відсутність зайвих елементів, заплутаною і незручною структури. Я ризикну застосувати і до свого блогу термін «простий». У мене зрозуміла будь-якій людині навігація: основні розділи сайту в горизонтальному меню, в основних розділах є вертикальне меню, здійснює внутрішню навігацію по розділу. Що може бути простіше! І навіть названо все своїми іменами: Блог – значить блог, Фото – значить це розділ, де викладені фотографії, Головна – особа сайту, де всього потроху з кожного розділу.

Так само я не став зраджувати ідею простий організації сторінки посту. Мета посту – інформація та нічого, щоб могло хоч на мить відвернути читача. У мене немає ні яких менюшек і сайдбаров, як бачите. Чоловік зайшов, прочитав, якщо є думки висловився в коментарях, якщо людині цікава тематика, внизу, відразу під текстом є список з декількох тематичних постів. Така організація – ідеальне рішення. До речі я більше не бачив блогів з такою структурою, є відчуття, що всі намагаються запхати якомога більше посилань навколо основного тексту, які переважній більшості читачів нецікаві. А намагатися підкупити їх «нібито грандіозним розмахом блогу» нерозумно.

Стиль

Мій блог тепер, сука, сексі! Хіба немає?! А я кажу — ТАК! Ну хіба ці закруглені краї блоків не порушують? А «втиснуті» заголовки? А ніжні тіні відкидаються картинками?

Мені здається, що все це дуже круто і красиво. Все витримано в одному ключі, немає дратівливих зайвих ефектів. Як мені сказав один знайомий – «блог у тебе виглядає тепер по-весняному». Він розцвів, скинув брудну чорну одяг, і постав перед нами світлим, яскравим і чистим.

Скільки пафосу, емае! Сподіваюся, вам подобається оформлення? На смак і колір товаришів немає, бо до крові з носа я не збираюся нікому доводити, що мій блог самий стильний. Але я сподіваюся на ваші висловлювання в коментарях з цього приводу.

Нові технології

Так, мабуть, це один з найцікавіших моментів посту. У нашому випадку все нове це добре забуте старе, а саме передові технології. Всі здогадалися, що я говорю зараз про CSS3? Молодці, якщо здогадалися.

Для мене зараз блог став у якійсь мірі полігоном для експериментів. Я так довго чекав того моменту, коли зможу побачити CSS3 в дії. 2 роки тому я купив собі книгу під чарівним, по тим часам, назвою «CSS3». Там на кожній сторінці жирною рамкою було виділено: «На даний момент ця технологія не підтримується жодною з існуючих браузерів». Мабуть автор книги складав її за прототипам з сайту w3c.org.

Але настали ці світлі часи, коли кожен сучасний браузер має підтримку CSS3. Mozilla FireFox 3.6.x, Opera 10.5 x, Chrome 4.0.xxx – ось що я маю на увазі під сучасними браузерами. IE8.x, до речі, я не вважаю сучасним браузером, але дуже чекаю появи IE9, він обіцяє бути чудовим продуктом. Його і зараз вже можна завантажити безкоштовно, але тільки pre-alfa версію для розробників. Зрозуміло, це не підійде навіть для найбільш досвідчених і просунутих користувачів.

Щось я расфилософствовался, давайте ближче до технологій.

border-radius – саме це властивість дозволило мені зробити закруглені краї таблиць. Не буду розпинатися і розповідати про всю красу нових властивостей таблиць у CSS3 — дивіться самі.
text-shadow – це властивість допомогло мені зробити стильні заголовки. Дивимося.
box-shadow — це властивість перетворило блокові елементи дизайну, тепер красиві тіні – реальність! Дивимося.

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

Як виявилося, ще це властивість можна застосувати до бордюрів і картинок, про що не сказано на сайті w3c, але з’ясувалося в ході експериментів.

Тепер хвилюючий момент. А ну, хто перший скаже, що сучасні браузери використовує лише дуже мала частина користувачів інтернету, і всіх принад можна буде побачити? Хто не оновлює свої браузери, той лох відстав від життя і не може вважатися повноцінним користувачем, готовим осягати нове і цікаве.

А адже хто-то до сих пір сидить на Windows XP і думає, що це тру вісь, а Windows 7 – відстій. Хлопці, АГОВ, ви відстали від життя років так на 5!

До речі, я ось тут обхаял людей користуються «мотлохом», але, не дивлячись на це, я подбав і про них. Мій блог виглядає красиво і в старих браузерах. Немає круглих країв і немає тіней, а все інше в силі. І, навіть виключивши нові властивості CSS3, блог не втрачає своєї краси і стилю. Щоб мої слова не здавалися вам неправдоподібними, відкрийте IE8 і переконаєтеся в цьому самі.

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

PS Головна сторінка ще не доведена до розуму, як і деякі інші, це я зроблю в найближчі дні. Ну не встигаю я 🙁

PPS Логотип теж ще не готовий, дизайнер сильно завантажений іншими роботами.

З повагою, Олександр Алаєв