Урок 5: Адаптивная вёрстка - примеры и теория

План:

  • Теория адаптивной верстки
  • Фиксированный-резиновый-адаптивный макет
  • Мобильная версия против адаптивной
Доступ к видео-уроку, а так же к домашним заданиям и дополнительному материалу откроется после оплаты за урок или курс.

Описание:

Адаптивная вёрстка, она же адаптивный веб-дизайн (Adaptive Web Design) - вёрстка веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера. Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.

Адаптивная вёрстка стала очень актуальна с популярностью мобильных устройств и планшетов. Когда появился доступ в интернет практически у всех правильное оформление кода стало острой проблемой. Теперь важно не то, как отображается сайт у Васи или Пети, а важно то, как он отображается у ВСЕХ людей. Буду предельно честен с Вами, на Ваш сайт моя жена с большей долей вероятности зайдет через iphone, чем через компьютер. Как часто я стал слышать: "фу, как тут неудобно, дай компьютер, я хочу статью прочитать на этом сайте".

В мастерской у верстальщика есть лишь один инструмент для написания адаптивного дизайна - @media, то есть тут ничего сложного. Сложно не написать код, а придумать оформление, которое будет удобно абсолютно всем. И буду честен, очень мало дизайнеров предоставят Вам макет во всех разрешениях экрана, а это значит, что качество необходимо будет делать самому.

Изучая адаптивный веб-дизайн самое важное изучить практику и приёмы Ваших конкурентов. Просто ходить по сайтам, смотреть на сколько это всё удобно сделано, а что не удобно! Урок посвящен основам такой верстки.
Главная БАЗОВЫЙ КУРС ПЕРВЫЙ УРОВЕНЬ программирования ВТОРОЙ УРОВЕНЬ верстки ВТОРОЙ УРОВЕНЬ программирования Начать обучение Запуск проекта Мелкие трюки Проверь свои знания Задачи по PHP MySQL Блог Отзывы