Что это такое — адаптивная верстка сайта

Шаблон — это предварительно разработанная веб-страница или набор веб-страниц HTML, которые используются для создания сайта.

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

— спроектировать самостоятельно;

— использовать готовый шаблон сайта;

— нанять разработчика.

Что такое шаблон для обычного пользователя?

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

Чтоб получить сайт, нужно шаблон:

5. Сделать релиз сайта.

Что такое адаптивный веб-дизайн

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

По-английски он называется Adaptive Web Design, и данный термин метко отражает, каким он должен быть – гибким и функциональным.

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

И сразу же об актуальности: сегодня он считается одним из весьма явных и даже ключевых показателей качества и современности корпоративного или частного web-ресурса во Всемирной Сети. Причем его разработка – это все еще сравнительно новое направление, и для него весьма характерны частые изменения различных мелочей. Но зато он ориентирован на перспективу – не только на те гаджеты, которыми мы пользуемся прямо сейчас, но и на те, что будем юзать лет через 5.

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

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

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

Что дает HTML5

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

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

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

Что такое адаптивный дизайн сайта, и чем он отличается от Responsive Design

Они довольно похожи, но принципиальная разница есть в технологии их реализации:

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

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

Что лучше использовать? Зависит от структуры web-ресурса: если она «резиновая», отзывчивость будет весьма удобной, вот только от нее может снизиться скорость загрузки (при наличии большого количества визуальных элементов).

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

Разница прекрасно видна по блогам, напичканным фото, текстами, броскими заголовками, функциональными кнопками. При RWD, зайдя с айфона, вы увидите его уменьшенную копию, при AWD – облегченную, которая загрузится гораздо быстрее. Да, навигация будет отличаться, но для современных продвинутых пользователей это, скорее, преимущество, а не проблема.

Итак, резюмируем, выделяя ключевой показатель:

Что такое template?

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

Четких разновидностей шаблонов нет, но можно выделить некоторые типы:

1. Отзывчивый или адаптивный

Адаптивный шаблон позволяет сайту, созданному на его основе, качественно отображаться на всех типах устройств (от телефона до ноутбука и ПК).

Каждый шаблон имеет свои настройки, функции и возможности. Если  необходимо создать полнофункциональный сайт, то шаблон должен иметь расширенный функционал и большое количество готовых макетов страниц. При запуске информационного ресурса, шаблону достаточно иметь инструменты настройки и редактирования текстового и визуального контента.

3. Персональная страница

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

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

5. Каталог (фото, видео и т.д.)

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

Конечно можно в этот же список добавить и другие типы шаблонов, например:

Все с первого взгляда очень просто и доступно.

Описание шаблона

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

Доступные исходные материалы

Чтобы использовать продукт, Вам необходимо иметь следующее программное обеспечение, установленное на Вашем компьютере.

Замечание: Пожалуйста, ознакомьтесь с предварительным просмотром шаблона, чтобы увидеть необходимые требования. Версии программного обеспечения могут отличаться от обозначенных выше.

Особенности шаблона

Адаптивные шаблоны включают несколько разметок, каждая из которых оптимизирована для правильного разрешения экрана. На самом деле есть много вариантов ширины, но основные из них – для настольного компьютера, планшета, и 2 размера экранов смартфонов (горизонтальная и вертикальная разметка):

Эти 4 основные типы разметки, а также вторичные, активируются в соответствии с разрешением экран. Чтобы увидеть эти Адаптивные шаблоны в действии, пожалуйста, посмотрите демо-версии шаблонов и измените ширину окна браузера, и шаблон подстроится под «новый» экран, с новым разрешением. После этого Вы можете совершить экскурсию по нашим адаптивным шаблонам и решить, какой дизайн нужен для вашего нового адаптивного сайта.

Структура шаблона

Вы получили шаблон, запакованный в ZIP архив, и распаковали его. Давайте посмотрим, что внутри.

Замечание: По соображениям безопасности папка (Исходные материалы) заархивирована и защищена паролем. Чтобы разархивировать защищенный паролем архив, Вам необходимо иметь программу-архиватор и правильный пароль. Когда Вы начнете распаковывать файл, появится уведомление о необходимости ввести пароль. Паролем является номер Вашего заказа. Вы можете найти этот норме на странице заказа, ссылка на которую высылается Вам на электронную почту.

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

Образы в адаптивном дизайне

Под этим понятием скрываются изображения, отлично масштабируемые при разных размерах браузера, – рассмотрим существующие нюансы.

Применение свойства width

Если его значение равняется 100%, картинка будет увеличиваться/уменьшаться вверх/вниз.

Записывается оно так:

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

Использование max-width

Если его показатель в 100%, объект изменяет свой масштаб по мере необходимости, но никогда не становится больше первоначального.

Выглядит это так:

Показ изображений, исходя из ширины браузера

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Подробнее о курсе

Viewport и Media query

Первая часть после него определяет, что ширины растягивания контента и экрана совпадают, вторая устанавливает масштаб 1 к 1.

Также верстка адаптивного сайта подразумевает использование css3 медиазапросов. Выше мы определили, что они должна включать в себя, теперь посмотрим способ их записи:

При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).

Зачем нужна адаптивная версия сайта

Ее стоит внедрить, как минимум, по трем причинам, каждая из которых достаточно важна сама по себе:

Где взять адаптивный дизайн для сайта?

Адаптивные конструкции технически более сложны, чем обычные, и, следовательно, стоят дороже. Однако такие веб-ресурсы наиболее популярны среди пользователей. Для чего нужен адаптивный дизайн — понятно. Но как его сделать?

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

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

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

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

***

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

Не можете найти ответ на вопрос?

Выбрать подходящий темплейт — это не простая задача.

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

На что стоит обратить внимание при выборе шаблона для будущего сайта, так это на:

3. Доступный функционал;

4. Что входит в пакет шаблона (изображения, руководства, готовые макеты страниц и т.п.);

5. Доступ к техподдержке.

Учитывая все эти особенности, выбирая макет, можно быстро найти максимально подходящий по дизайну и функционалу макет:

Адаптивный шаблон на тему художественное портфолио

Шаблон персональной страницы

Шаблон для блога на тему домашний декор

Шаблон для Интернет-магазина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обязательно ли использовать Adaptive Web Design?

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

Преимущества и недостатки адаптивного дизайна

Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:

Минусы тоже есть, и это:

На практике достоинства гораздо существеннее недостатков.

Как сделать адаптивную верстку сайта на базе фиксированного макета

Если есть рабочая и уже проверенная тема, нужно:

После такой подготовки можно приступать к основной части – следует:

Это основные мероприятия, после них останется найти точки «перелома» – те, в которых наблюдаются перестройки шаблона. Искать их следует, постепенно уменьшая размер окна Google Chrome, и как только оформление перестанет корректно показываться, зафиксировать первую breakpoint в файле «style.css», а затем следующую и так до конца. Отступы блоков обнуляются.

Когда вы сделаете все это, то увидите, как элементы подстраиваются под различные размеры экрана.

Типы адаптивных макетов

Существует 5 основных вариантов шаблонов – рассмотрим каждый.

Резиновый

Сравнительно легко реализуется, максимально наглядный для пользователя. Объекты при нем сжимаются, подстраиваясь под размер экрана, или вытягиваются длиной лентой для удобного скроллинга.

Перенос блоков

Хорош тогда, когда предусмотрено много колонок с данными. Согласно ему, при уменьшении диагонали дисплея сайдбары смещаются вниз.

Переключение

Трудоемкий в создании и внедрении, а поэтому не самый популярный способ. При его реализации под каждое актуальное разрешение нужно создать свой макет (а потом между ними будет осуществляться автоматический выбор – по ситуации).

Адаптивность «малой кровью»

Вариант, отлично подходящий для простых по структуре и функционалу проектов. Типографика и изображения банально масштабируются. Правда, он не гибкий, ведь уменьшение/увеличение ШхВ происходит на фиксированный коэффициент и не может динамически меняться.

Панели

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

Варианты разработки и примеры адаптивных версий сайтов

Созданные под конкретные модели и операционные системы телефонов и планшетов приложения – тоже вариант, у которого, правда, есть определенные недостатки:

И вот тут уместно еще раз упомянуть термин «адаптивная верстка сайта»: что это такое в данном контексте? Здесь это комплекс мер, предпринимаемых разработчиками для создания web-проекта с одним адресом, оформлением, контентом и системой управления, одинаково удобным для просмотра со всех активно используемых устройств. Да, минусы у этой технологии тоже есть, но они весьма относительны. Главным недостатком считается новизна: пока ею в совершенстве владеет лишь малое число специалистов. Но зато какие перспективы она открывает! Ею будут пользоваться и через 5 лет, когда, вполне вероятно, появятся какие-то принципиально иные гаджеты.

Размеры макетов

Еще одно, заслуживающее отдельного внимания, правило адаптивного дизайна – это mobile first: в первую очередь разрабатывают решения под мобильные, и уже потом, на их основе, делают связанную с ней десктопную версию. Шаблоны разделяются (по ширине экрана) на 6 вариантов, растущих следующим образом, в пикселях:

• 320,
• 480,
• 768,
• 1024,
• 1280,
• 1600.

Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

Принципы адаптивной верстки

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

Прочность

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

Относительность единиц измерения

Обязательно учитывайте, что 320 px разрешения на практике по-разному выглядят на айфоновском дисплее и на широкоформатном мониторе компьютера, поэтому следует задавать масштаб с координатами относительно тех объектов, что есть на каждом устройстве. Стандартом сегодня является верхняя граница экрана – равняются именно по ней.

Использование контрольных точек

Осуществляется привязка к тем элементам, местоположение которых остается статическим до тех пор, пока не будет выполнен вход с другого гаджета. Это своеобразные фиксаторы, и они не дают изображениям «уползать» за границы.

Максимальные и минимальные значения

Можно задать лимиты ширины и высоты пикселей, чтобы текстовая информация (и другой контент) либо корректно отображалась на весь дисплей, либо на его часть, но не растягивалась и оставалась читабельной.

Вложенность объектов

Если один блок зависит от размещения другого, их допустимо отправлять в общий контейнер, чтобы они были взаимосвязаны, и тогда их не придется подстраивать. Такой прием работает с кнопками, лого, да много чем еще.

Правильные шрифты

Их можно перевести в web-формат, чтобы они автоматически увеличивались/уменьшались, исходя из диагонали экрана. Но помните, что тогда они будут подгружаться, тогда как адаптивный сайт – это ресурс, контент которого отображается не только корректно, но и быстро (современный пользователь точно не станет долго ждать, чтобы посмотреть страницу, а уйдет искать другую).

Грамотное использование графики

Если изображение детализированное, стоит сделать его растровым, если же нет – векторным. И каждую картинку лучше оптимизировать, то есть сжать, но так, чтобы ее поддерживали даже старые браузеры.

Выдерживание размеров макетов

Важно соблюсти подходящее разрешение – среди стандартных вариантов:

Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.

Правильные медиазапросы

С их помощью при создании ресурса задаются:

На каждый будут подгружаться соответствующие стили CSS-языка.

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.