Сьогодні як ніколи гостро стоїть проблема адаптивного веб-дизайну. Все більше планшетних
комп’ютерів, смартфонів і навіть телевізорів використовуються для виходу в Інтернет. Розробникам
веб-сторінок потрібно враховувати величезне різноманіття розмірів екранів, а також
зважати на особливості відповідної взаємодії користувачів. Адаптивний веб-дизайн
дозволяє найкращим чином відобразити вміст сайтів на екранах пристроїв, що
використовуються для перегляду. При цьому веб-сторінки добре виглядатимуть на дисплеях не лише
сучасних пристроїв, а й тих, що з’являться найближчим часом.
Почніть розробляти сайти відповідно до нової методології адаптивного веб-дизайну,
завдяки чому вони красиво відображатимуться на екранах будь-яких розмірів. Читайте цю книгу, по дорозі створюючи та вдосконалюючи адаптивні веб-дизайни з використанням HTML5 і CSS3. Ви навчитеся
застосовувати на практиці нові технології та методики, покликані стати інструментами майбутнього
для веб-розробників клієнтських застосунків.
Які теми розглядаються в цій книзі
У главі 1 «Знайомство з HTML5, CSS3 і адаптивним веб-дизайном» поясню-
ється, що таке адаптивний веб-дизайн, наводяться приклади таких дизайнів,
а також підкреслюються переваги та ефект економії від використання
HTML5 і CSS3.
Із глави 2 «Медіазапити: підтримка різних областей перегляду» ви дізнає-
теся, що таке медіазапити, як їх написати й застосувати до будь-якого дизайну для
адаптації CSS-стилів до можливостей пристроїв.
У главі 3 «Використання “гумових” макетів» розповідається про перева-
ги «гумових» макетів і демонструється, як можна легко перетворо-
вати поточний дизайн із фіксованою шириною на «гумовий» макет або використо-
вувати CSS-фреймворк для швидкого створення адаптивних веб-дизайнів.
У главі 4 «HTML5 для адаптивних веб-дизайнів» досліджуються переваги
написання коду на HTML5 (більш компактний код, семантичні елементи, авто-
номне кешування та WAI-ARIA для впровадження допоміжних технологій).
У главі 5 «CSS3: селектори, типографіка та колірні режими» демонструє-
ться міць CSS3-селекторів, які дозволяють легко перетворювати будь-що. Я також скористаюся CSS3-правилом @font-face , щоб створити красиву22
Передмова
веб-типографіку, і розповім вам про такі нові колірні режими CSS3, як RGB(A)
та HSL(A).
У главі 6 «Чудова естетика з використанням CSS3» розповідається, як
створювати тіні, що відкидаються текстом і блочними елементами, а також градієнти
виключно за допомогою CSS3. Ми також поговоримо про те, як додавати різно-
манітні фонові зображення та створювати значки за допомогою шрифтів.
У главі 7 «CSS3-переходи, трансформації та анімації» я розповім вам про те,
як створювати, перетворювати й анімувати елементи на екрані, використовуючи лише
CSS3.
У главі 8 «Пкорення форм за допомогою HTML5 і CSS3» ілюструється, як
реалізувати кросбраузерні методики, що стосуються форм і працюють на всьому,
починаючи від найновіших смартфонів і закінчуючи настільними браузерами.
У главі 9 «Розв’язання кросбраузерних проблем із адаптивністю» роз’яснюється,
як забезпечити підтримку адаптивності в застарілих версіях Internet Explorer,
як адаптувати той чи інший набір посилань до меню на мобільних пристроях,
як забезпечувати інший вміст для пристроїв із екранами високої розділь-
ної здатності та умовно завантажувати ресурси за допомогою Modernizr.
Що необхідно знати,
перш ніж розпочинати читання
Вам потрібно добре знати HTML і CSS. Крім того, бажано мати загальне
уявлення про JavaScript. Гарний смак у фільмах також може виявитися зайвим.
Цільова аудиторія книги
Ви створюєте два сайти — один для екранів мобільних пристроїв і ще один для
більш великих моніторів? Або, можливо, ви чули про адаптивний веб-
дизайн, але точно не знаєте, як поєднати його з HTML5 і CSS3? Якщо це так,
то ця книга забезпечить вас знаннями, необхідними для того, щоб перевести
веб-сторінки на наступний рівень, перш ніж це зроблять усі ваші конку-
ренти!
Видання призначене для веб-дизайнерів і веб-розробників, які
наразі створюють сайти з фіксованою шириною, використовуючи HTML 4.1
і CSS 2.1. Тут пояснюється, як створювати адаптивні сайти із застосуванням
HTML5 і CSS3, що пристосовуються до будь-якого розміру екранів пристроїв.
