Позиционирование элементов на странице в технологии адаптивного дизайна реферат
Обновлено: 05.07.2024
Адаптивность — одно из ключевых требований, предъявляемых к современным сайтам. Ресурс должен одинаково хорошо демонстрироваться на экране компьютера, планшете, смартфоне. Для этого создается адаптивный дизайн и используется адаптивная верстка. В итоге процесс веб-разработки усложняется, требует дополнительных ресурсов. Но результат стоит вложений: сайт отлично позиционируется на всех основных типах устройств, что гарантирует полноценный охват аудитории.
Адаптивная верстка — это такой способ создания веб-страниц, при котором они автоматически подстраиваются под размеры и ориентацию экрана устройства, а их дизайн варьируется в зависимости от действий пользователя.
Цель адаптивной верстки — добиться того, чтобы сайт оставался удобным и обеспечивал конверсию при загрузке на разных устройствах.
Сегодня около 50% пользователей посещают сайты с гаджетов — смартфонов, планшетов. Это удобно, ведь можно серфить по сети, находясь в любой точке пространства (где есть интернет) — лежа в кровати, на улице, в транспорте. Мобильная аудитория постоянно растет, и игнорировать ее потребности нельзя. Вот почему разработчики адаптируют сайты под портативные устройства.
Раньше, когда доля мобильной аудитории была сравнительно невелика, адаптивная верстка не считалась чем-то крайне необходимым. Теперь вопрос об адаптивности поднимается в обязательном порядке — это один из пунктов брифа на разработку сайта, который веб-студия высылает клиенту в самом начале сотрудничества.
Современные сайты конкурируют между собой, борясь за внимание и расположение людей. При этом пользователи все более критично относятся к тому, насколько удобно взаимодействовать с тем или иным ресурсом. Чем проще и комфортнее на сайте — тем больше привлекаемая им аудитория.
Не адаптированные (фиксированные) сайты плохо приспособлены к тому, чтобы демонстрироваться на мобильных устройствах. В лучшем случае, чтобы посмотреть страницу полностью, приходится использовать горизонтальную прокрутку. Текст зачастую не читается, а изображения занимают весь экран.
Совершить какое-либо конверсионное действие (например, заполнить форму заявки) на не адаптированном сайте и вовсе проблема.
Сайт, не адаптированный под устройства с небольшим экраном, неизбежно теряет часть мобильных пользователей. А это означает дополнительные отказы. Мало того что сайт теряет аудиторию — так он еще и проигрывает в ранжировании. Поисковые системы (Яндекс, Google) учитывают количество отказов: чем их больше — тем ниже опускается ресурс в выдаче.
С 2018 года Google при ранжировании сайтов следует правилу Mobile-first index. Это означает, что поисковик в первую очередь анализирует тот контент, что отображается на мобильных устройствах. А ранжирование десктопных версий сайтов теперь подчиняется мобильной выдаче. Причем содержимое мобильной и десктопной версий должно быть идентичным, то есть приоритет отдается именно адаптивным ресурсам.
Получается, что из-за отсутствия адаптивности к мобильным устройствам страдает все поисковое продвижение. Не адаптированный для смартфонов и планшетов сайт сложнее найти и с компьютера. Охват аудитории сокращается, и бизнес теряет потенциальных клиентов.
Следует различать адаптивность сайта и создание отдельной мобильной версии.
Адаптивная верстка — это неотъемлемая часть самого сайта. При таком подходе создается один ресурс, предназначенный для разных типов устройств. Он может быть более сложно устроен, содержит несколько разновидностей элементов дизайна. Зато администрировать его проще: например, чтобы поменять цены, достаточно внести изменение в одном месте, и оно будет отображаться везде.
Мобильная версия — это, по сути, отдельный сайт, который создается специально для отображения на маленьких экранах. Он максимально оптимизирован под мобильные устройства. Но администрирование усложняется — ведь теперь приходится вносить изменения не в один, а в два сайта. Это требует дополнительных ресурсов.
Адаптивный сайт в большинстве случаев обходится дороже обычного неадаптированного. Это объясняется большей трудоемкостью разработки.
Во-первых, для адаптивного дизайна необходимо создать несколько вариантов макетов — под разные размеры. Кроме того, требуется дополнительное проектирование для каждой версии. На это уходит больше усилий и времени веб-дизайнера. Следовательно, увеличиваются и сроки, и стоимость разработки.
Во-вторых, адаптивная верстка сложнее. Реализовать ее — более трудоемкий процесс. Для этого существует несколько способов, и разработчик выбирает наиболее подходящее, на его взгляд, решение.
В-третьих, повышается объем тестирования. Прежде чем запустить интернет-проект в мир, его необходимо тщательно протестировать. В случае с адаптивным сайтом, все элементы тестируются последовательно на десктопах, смартфонах и планшетах.
Конечная стоимость адаптивного ресурса может отличаться от неадаптивного на 25-50%, в зависимости от типа и особенностей ресурса, выбранных технических решений и индивидуальных требований заказчика. Цена уточняется после анализа брифа и обсуждения техзадания.
Адаптивный дизайн отлично решает проблему отображения веб-сайта на экранах с различным разрешением. Сложность заключается в том, что если рассматривать веб-дизайн как эволюцию дизайна полиграфического, то понять принципы адаптивности довольно непросто.
Нет размера страницы, нет физических единиц измерения, вроде миллиметров или дюймов – в общем, никаких существенных ограничений на расположение контента. Пиксельные рамки также можно считать ушедшими в прошлое. Остаётся только приспособиться к создавшимся условиям, приняв новые требования к веб-разработке.
Для простоты дальнейшего изложения мы сосредоточимся на взаимном расположении элементов на странице, хотя адаптивный дизайн охватывает и другие аспекты функционирования сайта. Если хотите больше узнать об этих аспектах, начните отсюда.
Адаптивный дизайн или адаптированные версии сайта?
Эти два противоположных подхода могут отлично дополнять друг друга, если применять их осознанно. Разумеется, их конкретное применение должно определяться контентом:
Поток
Относительные единицы измерения
Сайт должен одинаково хорошо выглядеть не только на больших десктопных мониторах и на крошечных телефонах, но и на всём многообразии устройств, находящихся по своим характеристикам где-то между этими крайностями.
Нужную гибкость нашему дизайну может придать использование относительных единиц измерения. Например, если установить ширину элемента в 50%, можно быть уверенным, что этот элемент займёт ровно половину экрана на любом устройстве:
Точки разрыва
Точки разрыва помогут изменить расположение элементов дизайна при соответствии экрана заданным условиям. Например, сайт может иметь три колонки текста на экране десктопа и одну – на смартфоне. Обычно наличие и характеристики точек разрыва определяются контентом.
Если при определенном разрешении абзац текста начинает выглядеть странно или иллюстрация выходит за пределы экрана, необходимо задать точку разрыва именно здесь. Но, задав слишком много точек разрыва, легко запутаться в них и в связанных с ними классах:
Максимальные и минимальные размеры
Использовать для отображения контента всю ширину экрана без остатка – отличная идея, если мы имеем дело с экраном смартфона. Но если использовать аналогичным образом широкий экран монитора, контент просто перестанет восприниматься. Здесь нам на помощь приходит CSS -атрибут ‘ max-width ’.
Например, если мы задаём ширину блока контента в 100%, а максимальную ширину – в 1000 пикселей, то мы можем быть уверены, что контент будет занимать весь экран, но не выйдет за предел в 1000 пикселей по ширине:
Вложенные объекты
Имея на странице слишком много объектов с относительным позиционированием, сложно добиться их правильного расположения друг относительно друга.
Но можно поместить группу элементов в блок-контейнер, и в дальнейшем управлять позицией и размером контейнера. Этот приём также упрощает работу с элементами, имеющими абсолютные размеры, например, логотипами и кнопками:
Какой экран учитывать в первую очередь?
Вы можете начать разработку с мобильного устройства, постепенно уточняя расположение элементов для более широких экранов. Или можете, наоборот, начать с самого большого экрана и продвигаться в обратном направлении. Некоторые учитывают несколько разрешений экрана одновременно.
Наиболее простым считается первый способ, и он получил широкое распространение среди дизайнеров под названием “ Mobile First ”. Приступая к работе, прикиньте, какой из методов предпочтительнее для вас и для контента вашего сайта:
Встраиваемые или системные шрифты?
Хотите использовать на вашем сайте крутую типографику? Используйте встраиваемые шрифты. Но учтите, что каждая гарнитура, загружаемая из Сети, увеличивает время загрузки страницы. Шрифты, уже имеющиеся на устройстве клиента, загружаются мгновенно, зато их внешний вид и соответствие дизайнерскому замыслу может оставлять желать лучшего:
Растровые или векторные изображения?
Если логотип вашего сайта содержит множество деталей и графических эффектов, то используйте его растровую версию. В противном случае попробуйте сохранить его в SVG . Для мелких иконок вы также можете использовать встраиваемый декоративный шрифт.
Каждый подход имеет свои преимущества и недостатки. В любом случае необходимо учитывать размер изображения. Все ресурсы, используемые на сайте, должны соответствующим образом оптимизироваться.
Если вы считаете, что я упустил какой-нибудь важный аспект адаптивного дизайна, изложите своё мнение в комментариях.
- Для учеников 1-11 классов и дошкольников
- Бесплатные сертификаты учителям и участникам
Позиционирование
Последний раздел этой главы, в сравнении с предыдущими, посвящен вопросу более общему по охвату и в то же время более техническому по характеру. Рассмотрев основные типы элементов, составляющих веб-страницу, мы должны теперь разобраться с теми средствами, которые предлагают современные веб-технологии для размещения этих элементов на плоскости страницы.
Вообще говоря, точное позиционирование материала по двум (и даже, как мы увидим ниже, по трем) измерениям есть второе по важности из условий творческой свободы дизайнера (первое — возможность пользоваться графикой). Характерно, что дизайнер Дэвид Сигель ( www . dsiegel . com ) — вероятно, самый известный из популяризаторов визуального подхода к веб-дизайну — прославился в первую очередь изобретением невидимой распорки из однопиксельного GIF ' a (стр. 237).
Таблицы и распорки
Простейший механизм размещения материала, доступный в обоих визуальных броузерах (в Netscape начиная с версии 2 и в MSIE с версии 3), — это использование таблиц, чаще всего не имеющих разлиновки и фоновой заливки ячеек и потому невидимых (видимо только их содержание, единственно ради позиционирования которого и вводится таблица). Прием этот позволяет регулировать расстояния между элементами с точностью до пиксела, что является важнейшим — хотя и практически единственным — достоинством этой технологии.
Дурная наследственность
Если сравнивать табличную верстку с возможностями, предоставляемыми CSS , то ближайшим аналогом таблицы будет относительное ( relative ), а не абсолютное позиционирование. Если не учитывать тот факт, что таблица (как блочный элемент, стр. 240) всегда начинает собой новый абзац, то координаты размещенного в таблице элемента отсчитываются именно от той позиции, которую он занимал бы в отсутствие таблицы и в которой теперь расположена точка привязки этой таблицы.
Конечно, чаще всего с помощью таблиц моделируется именно абсолютное позиционирование относительно границ окна: чтобы свести на нет влияние нетабличного материала, в таблицу заключается вся страница, так что мириться приходится только с неодинаковостью ее внешних полей (как я уже писал, величина этих полей точному контролю не поддается). При этом, однако, ощутимым становится другой недостаток этой технологии: броузер может выводить на экран таблицу только тогда, когда ему известны габариты всех ячеек, — т. е. не раньше, чем из сети догрузятся все изображения, тексты и HTML -код, составляющие таблицу. Результатом может стать раздражающая задержка с выводом информации на экран.
Сообщив броузеру заранее ширину и высоту всех размещаемых в таблице изображений с помощью атрибутов height и width тега IMG , эту задержку можно сильно сократить — но только в том случае, если размеры указаны, опять-таки, для всех без исключения изображений. Даже одна графическая вставка неизвестных броузеру размеров задержит вывод всей страницы до тех пор, пока не придет из сети начало соответствующего графического файла, по которому броузер сможет определить его габариты. Поэтому атрибуты height и width абсолютно обязательны для жесткого табличного дизайна. В академическом же стиле, наоборот их следует избегать — как потому, что атрибуты эти не входят в стандарт HTML 2.0, так и потому, что жесткое указание размеров графики иногда не позволяет прочесть alt -тексты графических вставок тем пользователям, которые отключили в своих визуальных броузерах загрузку графики.
Двойное дно
в линейном текстовом эквиваленте страницы определить было бы невозможно.
Белое место
Возможности табличной верстки были бы сильно ограничены, если бы дизайнер не мог управлять расстоянием между содержимым ячеек. Интервалы вокруг всех ячеек одновременно можно менять с помощью атрибутов cellspacing и cell"> тега TABLE (чаще всего оба эти атрибута обнуляются). Но чтобы раздвинуть всего некое заранее заданное расстояние отдельно взятую пару объектов, между ними нужно поставить какую-то распорку.
Общепринятый способ изготовления распорок (тот самый, изобретенный Сигелем) основан на том, что, если указанные в атрибутах width и height размеры изображения не совпадают с его естественными размерами (записанными в самом GIF - или JPEG -файле), броузер обязан масштабировать это изображение до размеров, указанных в HTML . Достаточно, таким образом, взять полностью прозрачный GIF -файл минимальных размеров — 1 на 1 пиксел — и приписать ему требуемую ширину (не забыв указать height = l , чтобы подавить пропорциональное увеличение высоты) или, соответственно, высоту (не забыв width = l ) — и мы получим невидимую графическую вставку требуемых размеров, вполне годящуюся на роль распорки.
Простейший и дающий наиболее предсказуемые результаты вариант использования графической распорки — вставка ее в выделенную специально для этого случая ячейку таблицы, которая передаст свою ширину или высоту соответствующему столбцу или строке. Можно, однако, ставить распорки и в те ячейки, в которых уже есть текст или изображения. Как и любые другие графические вставки, распорки ведут себя при этом подобно буквам текста: горизонтальные ставки раздвигают материал, а вертикальные отодвигают текущую строку от предыдущей (чтобы этот эффект был заметен, высота распорки должна превышать высоту самого высокого элемента текущей строки; гарантированную вертикальную раздвижку можно получить, вставив между элементами вертикальную распорку, с обеих сторон отбитую тегами BR ). В частности, в абзацах текста графическими распорками можно пользоваться для имитации абзацных отступов и даже для увеличения интерлиньяжа (в последнем случае по вертикальной, одинаковой высоты распорке нужно поставить вплотную к каждому слову текста); сейчас, к счастью, ничто не мешает пользоваться CSS для достижения тех же результатов без всяких распорок.
Если вы никак не можете разобраться в странностях поведения невидимых распорок на ваших страницах, для отладки можно порекомендовать такой прием: заведите еще один однопиксельный GIF -файл, но не прозрачный, а какого-нибудь яркого цвета, и временно подставьте его вместо прозрачного пиксела в тот каталог, где у вас хранятся изображения. Все невидимые распорки при этом станут видимыми, и расставить их по местам будет намного легче.
Неразрываемыми пробелами особенно удобно пользоваться для увеличения межсловных пробелов, имитации разрядки и абзацных отступов, так как ширина их (как и ширина обычных пробелов) пропорциональна текущему кеглю шрифта. На стр. 229 перечислены также обязательные, предписываемые типографскими традициями случаи употребления неразрываемого пробела для предотвращения переносов и увеличения интервалов в некоторых особых случаях.
Фэйсом об тэйбл
• При необходимости можно сращивать несколько ячеек по горизонтали (атрибут colspan тега TD ), но только в том случае, если ширины участвующих в операции столбцов жестко заданы распорками в других ячейках; если же, наоборот, жестко задана только ширина объединенной ячейки, на правильное распределение этой ширины между столбцами рассчитывать не приходится. По этой же причине объединять ячейки по вертикали не рекомендуется вообще — лучше пользоваться вложенными таблицами (рис. 52).
• В сложных случаях, когда таблица упорно не хочет вести себя как задумано, можно подсветить границы ячеек, заменив в заголовке border =0 на border = l , — удобное средство отладки, аналогичное временной замене невидимых распорок на видимые (см. выше). Учтите, что появляющаяся рамка добавляет по одному пикселу ширины и высоты на каждую ячейку, так что общие габариты таблицы изменяются.
Условия задачи: ячейка А должна иметь переменную высоту, так как содержит текст; ячейка В содержит графическую вставку и должна точно соответствовать ей по размерам; высота ячейки С, следовательно, должна быть равна разности высот ячеек А и В. Попытка решить задачу с помощью rowspan =2 в ячейке А к успеху не приводит; как ни старайся, ячейка В выходит выше, чем надо, а С упорно не дотягивает до нужной высоты Жесткая распорка в С делу не поможет, так как искомая высота С зависит от А и, следовательно, есть величина непостоянная; не помогает и установка фиксированной величины height для ячейки В. Можно попробовать вообще отказаться от разделения ячеек В и С, слив их в одну и отогнав изображение наверх с помощью valign = top ; если, однако, вам нужна разлиновка или же другой фоновый цвет в В, не обойтись без вложенной одноячеечной таблицы вокруг изображения. (Те же проблемы встают, хотя и реже, и при горизонтальном расположении — ячейки чаще имеют переменную высоту, чем ширину.)
Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.
Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах.
Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly.
В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.
Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс.Вебмастер и Google Developers.
Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам
Что такое адаптивная вёрстка
Адаптивная вёрстка предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов. С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств.
Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .
Рассматриваемый в данном уроке приём адаптивной резиновой вёрстки отлично сработает на двухколоночном шаблоне, сделав сайт адаптивным и удобным для просмотра на мобильных устройствах. Шаблон предполагает различную компоновку основного содержимого страниц, в этом уроке будет разобрана вёрстка главной страницы.
Вёрстка главной страницы
В первой точке скроем верхнее меню и переместим сайдбар под контейнер с постами. Во второй точке изменим расположение элементов шапки, отменим позиционирование кнопок социальных сетей в постах и отменим обтекание столбцов подвала страницы.
Рис. 2. Пример адаптивной верстки
1. Метатеги и раздел
Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):
2. Шапка страницы
В шапке страницы поместим следующие элементы-контейнеры:
3. Блок с кратким содержанием статьи
Анонс статей обернём элементом :
4. Боковая колонка
5. Нижний колонтитул
В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:
6. Общие CSS-стили
Общие стили, сброс стилей браузера по умолчанию:
7. Стили для шапки и её содержимого
8. Стили для блока с основным содержимым
9. Стили для боковой колонки
10. Стили для нижнего колонтитула
Подвал сайта разделим на три равных столбца:
11. Медиа-запросы
12. Скрипт для мобильного меню
За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню — от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом
Читайте также: