Адаптивный шаблон сайта на html5 – то, что должен иметь любой современный сайт

От автора: я приветствую вас на блоге webformyself, посвященном сайтостроению. Начиная с этой статьи, мы с вами коснемся основ html5 и современного подхода в разработке сайтов. В частности, давайте выясним, чем адаптивный шаблон сайта на html5 выгодно отличается от своих предшественников.

Эволюция шаблонов

Веб-стандарты развиваются сегодня очень стремительно. То, что вчера было актуальным, сегодня уже устарело. Что-то подробное происходит и с самой стабильной версией языка HTML – 4.1. Долгие годы им пользовались для создания своих проектов. Сегодня он по-прежнему используется, но все же его все больше и больше будет вытеснять новый стандарт – HTML5, который уже давно внес в мир веб-разработки новые элементы, значительно расширившие возможности.

Что дает HTML5

Эта технология позволяет сделать разметку на веб-странице гораздо более понятной для поисковых роботов, а также для браузеров. Если вы верстальщик со стажем, то наверняка помните, как раньше верстались различные части шаблоны. Зачастую это делалось очень просто с помощью создания нескольких блоков div и дальнейшего присвоения им определенных идентификаторов.

Например, шапка получала id = header, head или что-то подобное, боковая колонка – sidebar и т.д. При этом с точки зрения логики никакого разделения не было – просто куча блоков с каким-то содержимым. Конечно, все оформляли и человек понимал, где шапка, а где статья, но в коде такого не было.

Главным новшеством языка html5 стало появления в нем так называемых семантических элементов. Они призваны были заменить обычные div, но не полностью их вытеснить. Например, элементом header можно смело заменять div id = «header». Это не просто удобно и понятно, это еще и очень правильно с точки зрения восприятия верстки поисковыми машинами.

Например, в спецификации также появился парный тег article. В него помещается текст статьи, заметки или какой-либо другой независимой публикации. Таким образом, все намного понятнее и логичнее, чем раньше.

Рис. 1. Пример разметки с помощью новых семантических тегов.

Чтобы заставить новые теги нормально работать в большинстве веб-обозревателей, достаточно записать правильный доктайп и указать нужным элементам блочный тип. Этот код помещают в самое начало html:

Заметили, насколько проще стал доктайп. Раньше он был настолько длинным и страшным, что его даже никто вручную не писал – все копировали и вставляли его из других версток. Ну а такой код нужно вставить в главный файл стилей css:

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

Более подробно ознакомиться с элементами HTML5 вы можете в нашем курсе по основам этой технологии, где подробно разбираются наиболее важные теги.

Что дает адаптивность

В заголовке статьи я также упомянул об адаптивности шаблона. А что это и что она дает? Я думаю, вы все же имеете хоть малейшие представления об адаптивности. Это такой шаблон, который подстраивается и изменяется под разные размеры экранов так, что все содержимое отображается корректно, ровно, не образуется горизонтального скролла и т.д.

Рис. 2. Вот основное преимущество – отсутствие горизонтальной прокрутки и хорошее отображение на узких экранах.

Например, наверняка просматривая передачи о животных, вы могли услышать, как многие из них адаптируются к смене климата и т.д. Это же слово часто употребляют и по отношению к человеку. Например, попав в другую страну, человек должен будет адаптироваться к ней, к новым условиям. Если у него это не получиться, едва ли он сможет там нормально жить.

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

Адаптивный сайт на html5 – это то, к чему стоит стремиться сегодня

Надеюсь, все описанное убеждает вас в том, что эти новшества необходимо применять в современных реалиях веб-разработки. Сегодня уже не то время, когда можно было обойтись возможностями HTML4 и сделать фиксированный шаблон. Раньше это могло считаться хорошей работой, но сегодня все больше и больше будет устаревать.

В связи с этим назревает вопрос: а как сделать адаптивный сайт html5, будь-то блог, интернет-магазин или одностраничник? Как вы понимаете, хотя технологии и обновились, они не принесли чего-то кардинально нового. Вам не придется получать тонну новых знаний, достаточно обучиться по нормальным урокам, и вы уже самостоятельно овладеете данными технологиями. Например, в изучении адаптивного дизайна вам может помочь наш курс по верстке для мобильных устройств, где вы на практике сможете увидеть, как адаптировать реальный веб-ресурс под современные требования.

Ну а еще хотел бы отметить, что веб-разработчики сегодня уже успели наполнить интернет адаптивными шаблонами с использованием новых технологий. Вы сможете смело их скачивать и смотреть изнутри, как все это выглядит и функционирует. Зайдите на любую крупную биржу фриланса и вы увидите, что сегодня знания адаптивной верстки и HTML5 нужны практически всем, а самое главное – можно с уверенностью сказать, что течении следующих лет ситуация будет примерно такой же – едва ли люди смогут в ближайшее время придумать что-либо лучшее, чем адаптивность.

Соответственно, по HTML5 у нас тоже для вас есть уроки, в которых вы сможете изучить новые теги и возможности этой технологии, чтобы без проблем использовать их на практике. Поскольку веб-технологии развиваются, мы тоже должны им подражать. Подписывайтесь на наш блог, чтобы тоже развиваться в теме сайтостроения.

Комментарии Вконтакте: