От автора: доброго времени суток всем нашим гостям и подписчикам! Верстка сайтов — это дело интересное и непростое. Здесь намного важнее практика и опыт, чем полученный диплом. Все чаще в вакансиях по поиску верстальщика указывают одним из требований знание того, что такое адаптивная верстка — уроки по отзывчивому веб-дизайну и адаптивной верстке присутствуют в интернете в огромном количестве, однако, достаточно ли их для начала карьеры? Попытаемся разобраться в нашей сегодняшней статье.
Напомним, что верстальщик — это человек, который должен сделать так, чтобы веб-страница выглядела точно так же, как и ее дизайн-макет в формате psd. В этом деле ему помогают языки разметки XHTML/HTML и каскадные таблицы стилей CSS.
Верстальщик не просто создает код каждой детали сайта — от этого хорошего человека также напрямую зависит то, как сайт отображается во всех популярных браузерах. А отображаться сайт в них должен так, чтобы любо-дорого глянуть было. Причем, на всех устройствах и во всех браузерах. Это свойство адаптивной верстки называется мультиплатформенностью.
Все блоки должны подстраиваться под высоту и ширину экрана, элементы не должны «съезжать», куда ни попадя. Наверняка, каждый из вас видел такие сайты, на которых при открытии на смартфоне видишь элементы (текст, логотип, картинки), которые сбились в кучки, словно испугались вас, большого и злого дядю (или тетю). Выглядит это не очень эстетично, согласитесь.
Чем отличается адаптивная верстка от других подходов к верстке сайта?
Существует несколько подходов, которые вы должны знать, прежде чем обучаться адаптивной верстке:
фиксированная верстка. Блоки не поменяют свою ширину даже при изменении размера окна браузера. При просмотре сайта на мониторе с низким расширением появится полоса прокрутки;
резиновая верстка. При этом подходе блоки меняют свою ширину, в зависимости от высоты и ширины окна браузера;
адаптивная верстка. Заточена под определенные разрешения экрана (768, 1024 и т. д.), реализуется с помощью различных скриптов. Изменение размера осуществляется рывками;
отзывчивая верстка. Своеобразный микс резиновой и адаптивной верстки. С технической точки зрения это очень сложный подход, однако, он самый эффективный;
мобильная версия. Представляет собой другой сайт с другим адресом, дизайном и версткой.
Преимущества адаптивного интерфейса
Сайт выглядит привлекательно на абсолютно всех устройствах (компьютеры, ноутбуки, планшеты, смартфоны);
сайт хорошо ранжируется в обычном и мобильном поиске, поднимается по позициям в выдаче;
отсутствуют проблемы, связанные с мобильной версией сайта;
больше доверия и лояльности со стороны посетителей сайта;
хорошая юзабилити и, как следствие, высокие поведенческие факторы и меньший показатель количества отказов.
Таким образом, главное преимущество адаптивного веб-сайта — это его ориентация на мобильные технологии, которые стремительно развиваются в последнее время. Все больше посетителей отказываются от компьютеров в пользу мобильных гаджетов. Для пущей убедительности посмотрите статистику какого-нибудь старого сайта с хорошей посещаемостью в Яндекс.Метрике и сравните долю мобильных посещений сейчас и несколько лет назад. Разница будет очевидна.
Так как мобильное устройство не всегда подключено к сети wi-fi и зачастую использует медленный мобильный интернет, сайты следует делать максимально легкими при загрузке. Тут-то на помощь и приходит адаптивная верстка, благодаря которой веб-страницы отлично загружаются на небольшие экраны даже при медленном интернете..
С точки зрения SEO адаптивная верстка также имеет свои преимущества. Здесь соблюдается принцип «один сайт — один адрес», в отличие от варианта с созданием мобильной версии. В случае с мобильной версией приходится отдельно нарабатывать репутацию и посещаемость ресурса. Так как страницы мобильных версий часто «склеены» с основными сайтами, они не очень хорошо ранжируются поисковиками. Адаптивный дизайн и верстка позволят всю ссылочную массу сосредоточить на одном единственном ресурсе.
Что нужно знать специалисту по адаптивной верстке.
Чтобы научиться адаптивной верстке, следует иметь хороший уровень знания HTML, CSS и JavaScript. Отвечая на вопрос, заложенный в теме статьи: теорию нужно совмещать с практикой уже с начала обучения. Идеальный вариант — это видео уроки по адаптивной верстке, делающие упор на практические занятия, сложность которых растет по мере изучения основ.
К минимальному пакету джентльмена верстальщика также относится Adobe Photoshop и основы работы с изображениями. Если вы готовитесь верстать проекты не крупнее одностраничников, то можете использовать Adobe Muse и подобные ему инструменты.
Базовые навыки верстки приобретаются достаточно быстро. Разобраться с HTML и CSS не займет много времени. Вначале могут быть сложности с осваиванием JavaScript, однако, они компенсируются наличием огромного количества плагинов и других готовых решений на все случаи жизни.
Где находится грань между версткой, веб-дизайном и фронтендом?
Несмотря на то, что верстальщик — это связующее звено между веб-дизайнером и программистом, он играет важнейшую роль в создании сайта, и полномочия в этой роли зачастую довольно нечеткие, соответствующие функциям других специалистов.
Когда необходимо разработать сложный интерактивный интерфейс, от верстальщиков требуют определенных знаний языков веб-программирования. Здесь даже может понадобиться тесная работа с базами данных. Как вы поняли, грань между Front-End и версткой очень и очень тонкая.
Или могут заставить верстать макет веб-дизайнера, который вообще не представляет, что с его макетом дальше делают, и которому глубоко плевать на ваши проблемы. А это, поверьте мне, довольно распространенная ситуация. Верстальщику часто приходится группировать слои в psd шаблоне и вообще наводить в нем порядок.
Фреймворки и препроцессоры: быть или не быть?
Использование CSS фреймворков играет очень важную роль в скорости верстки. Возможно, сейчас начнутся недовольные возгласы самобытных верстальщиков 80 лэвла, которые считают, что могут сделать сетку проекта в сто раз лучше Бутстрэпа. Им поддакнут противники чрезмерной стандартизации и ограничений в веб-дизайне. Ну что ж, я никого переубеждать не буду. Мы тут не картины на холсте рисуем.
Сетка — это крепкая основа адаптивной верстки. Проект без сетки — это головная боль веб-разработчика и благоприятная среда для размножения HTML-костылей. А так как мы собираемся быть профессиональными верстальщиками, значит, будем использовать только максимально эффективные и быстрые инструменты. Естественно, не в ущерб качеству.
Для тех, кто никогда не слышал о фреймворке Bootstrap или относился к нему скептически, советую присмотреться. Особенно, если вы цените скорость загрузки и удобство сайта. С помощью Bootstrap можно создать отзывчивый, адаптивный шаблон с классной сеткой.
Еще один совет: экономьте время на написание CSS с помощью препроцессора. И это очень важно, независимо, используете вы какой-нибудь фреймворк, или нет. Так как 60-70% верстки занимает написание CSS, этот этап логично автоматизировать. Я лично пользуюсь препроцессором Sass, однако, вы можете использовать любой другой, что вам подходит.
Заключение
Вы уже начали проходить видеокурсы по HTML и CSS, но вы не уверены в своих силах и ничего еще не сверстали сами? Не волнуйтесь, все проходят через этап сомнений. Желаю вам поскорее переступить через сомнения, набраться уверенности и начать делать. Любой практический опыт, даже верстка элементарных макетов, принесет намного больше пользы, чем просматривание видео и самобичевание.
Используйте различные инструменты, упрощающие процесс, но только тогда, когда в них видите необходимость. Git, CSS-препроцессоры, библиотеки, системы сборки и т. д. помогут вам сделать верстку более качественной и быстрой.
В следующий раз как будете ехать в общественном транспорте, взгляните на людей, чем они заняты? Большинство из них всю дорогу проводят, уткнувшись в свои смартфоны и планшеты. Понимаете, к чему я клоню? Возможно, эти люди — ваши будущие клиенты. В бешеном ритме современной жизни мобильный интернет и адаптивные интерфейсы просто необходимы! Вот почему специалисты по адаптивной верстке сейчас востребованы как никогда.
Чтобы узнать все о создании адаптивных интерфейсов, подписывайтесь на наш блог и обсуждайте самые интересные материалы с друзьями. До новых встреч!
