Пример адаптивного сайта

Как сделать адаптивный сайт

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

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

Само понятие «адаптивный дизайн сайта» было введено в обиход в 2010 году в статье Итана Маркота. Спустя несколько лет адаптивная верстка сайта стала использоваться большинством крупных компаний.

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

Для начала поясним, чем отличается адаптивный дизайн сайта от обычной «резиновой верстки»

Обычный сайт Адаптивный сайт

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

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

Чем отличается мобильная версия сайта от адаптивной?

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

Мобильная версия сайта — это дополнение к вашему основному проекту, которое переработано под мобильные телефоны.

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

И вот почему…

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

Плюсом при создании адаптивного сайта является его размещение на одном URL.

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

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

А теперь о технической стороне вопроса. Как сделать адаптивный сайт и на что нужно обратить внимание?

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

Создание адаптивного дизайна сайта включает в себя

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

Примеры адаптивных сайтов

Хотите заказать адаптивный сайт? Добро пожаловать к нам. Для этого вам нужно…

Отправить заявку

Здравствуйте, дорогие читатели! Мой опрос «Используете ли вы принципы responsive web design при создании сайтов?» показал, что примерно четверть посетителей даже не в курсе, что это за зверь такой — Responsive web design.

Поэтому я решила устранить данный пробел знаний и рассказать о данной теме просто и доступно.

Responsive web design — специальная технология создания сайтов, которые автоматически подстраиваются под любой размер экрана. Синонимы: реагирующий, отзывчивый, адаптивный. Главный принцип — удобство восприятия информации независимо от того, с какого устройства зашел на сайт пользователь. Хоть с мобильного телефона, хоть с телевизора, подключенного к сети Интернет. При этом совершенно не требуется создавать под каждое устройство отдельную версию сайта.

Автором понятия Responsive web design и одноименной книги является Этан Маркотт (Ethan Marcotte).

В отличие от древней «резиновой» верстки в RWD решается ряд специальных задач, как например, изменение не только ширины блоков, но и непосредственно самих картинок и видео-роликов на лету, что ранее было просто недоступно. Благодаря новым технологиям и современным браузерам теперь этот процесс стал возможен и доступен каждому веб-мастеру.

Кроме того, Responsive web design учитывает и такие вещи как: ориентация устройства, скрытие некоторых несущественных частей сайта, предоставление удобных для нажатия пальцами ссылок на сенсорных экранах мобильных устройств, геолокация и др.

Задачу подгонки блоков сайта под нужный размер экрана решают т.н. Media Queries — специальный набор правил из арсенала CSS, в котором заранее прописываются ширина и высота окна браузера, разрешение экрана и ориентация в пространстве (portrait или landscape).

Вернее, в стилях прописываются несколько таких наборов, учитывающих разные варианты размещения блоков. Например, на большом мониторе у сайта 3 колонки (контент + 2 сайдбара), а на iPad в вертикальной ориентации колонок будет всего 2, а третья либо переползет в горизонтальную плоскость под шапку, либо вообще будет скрыта как не сильно важная. Более подробно о Media Queries рекомендую почитать у Игоря Квентора на его блоге Вебсовет.

Лично меня больше заинтересовал вопрос изменения картинок, что называется, на лету. Ведь для веб-дизайнера эта возможность является определяющей при создании макета будущего сайта. Необходимо заранее предусмотреть, как именно будет (и будет ли вообще) меняться та или иная картинка, нужно ли делать заранее несколько вариантов картинки, или она будет рендериться на ходу. Подробная статья по «жидким» картинкам есть на сайте Alistapart.com (англ.). Идея тут достаточно проста: для изображений нужно применять свойство {max-width: 100%} и тогда они не будут вылезать за пределы родительского блока, даже если этот блок меньше самой картинки. Изображение при этом будет пропорционально уменьшаться (пруфлинк).

По-сути, этот же подход применим и к другим объектам: флэш, видео, прочим «эмбедам»:

img,
embed,
object,
video {
max-width: 100%;
}

Очень просто и удобно.

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

Таким образом, задача веб-дизайнера в плане адаптации сайтов под различные устройства состоит в том, чтобы заранее нарисовать несколько вариантов отображения с учетом размеров экранов и их ориентацией. Количество таких вариантов не будет бесконечным, как это может показаться вначале. Наборы правил в Media Queries как раз и ограничивают это количество условными определителями «если»: если ширина окна меньше nnn, то применять такой-то набор, если меньше mmm, то такой-то. И т.д. Исходить нужно, естественно, из современных реалий на рынке мобильных устройств. По-сути, в игре всего три участника: планшеты, смартфоны размером а ля iPhon и мобильники с маленькими экранами. Таким образом, варианты веб-дизайна сайта нужно будет подгонять под наиболее типичные размеры экранов этих устройств. Например, меньше 1000px, меньше 700px, меньше 480px.

Полезные ссылки по теме Responsive web design:

1. Responsive Web Design: What It Is and How To Use It
2. Раскрытие тайны реагирующего веб-дизайна
3. 62 полезных инструмента для адаптивного дизайна
4. 20 Useful jQuery Plugins for Responsive Web Design

ПС: как видите, под данную тему я завела отдельную рубрику Отзывчивый дизайн. Сюда буду добавлять периодически интересные и полезные плюшки. Чтобы быть в курсе, подпишитесь на rss.

05.08.2012 | Автор: Настя Манно | Рубрика: Веб-дизайн , Отзывчивый дизайн

Перейти в раздел к «Содержанию»

Типы верстки сайта

Верстки делятся по принципу отображения и по типу:

1) Деление по принципу отображения:

а) Фиксированная (статическая) верстка.
б) Резиновая (тянущаяся) верстка.
в) Адаптивная верстка — щелкните здесь.

При фиксированной верстке веб-страница имеет постоянную ширину, независимо от ширины окна браузера.
При резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера. Например, Вы растягиваете окно браузера, и веб-страница тоже растягивается.

Какая верстка лучше?
Однозначного ответа нет, обе верстки (фиксированная и резиновая) хорошие — главное правильно их использовать. Хотя резиновая верстка является более «продвинутой».

Резиновую верстку выполнять сложнее, чем фиксированную, т.к. приходится учитывать, как будет выглядеть веб-страница на экранах разной ширины. Выполняя резиновую верстку часто ориентируются на то, чтобы страница сайта хорошо отображалась на экранах шириной от 1024рх до 1280рх, т.е. содержимое веб-страницы будет растягиваться и сжиматься по ширине от 1024рх до 1280рх. Чтобы содержимое страницы (контейнеры, картинки) могло резиниться, ширину элементам веб-страницы задают в процентах — в этом случае ширина элемента вычисляется браузером относительно ширины контейнера-родителя этого элемента. В результате получается, что при увеличении ширины контейнера-родителя происходит увеличение ширины элемента страницы, а при уменьшении ширины контейнера-родителя происходит уменьшение ширины элемента страницы. Сложность резиновой верстки во многом зависит от макета — при этом не каждый дизайн веб-страницы подходит для резиновой верстки. Из-за сложности выполнения, в резиновой верстке чаще возникают ошибки, поэтому выполнение качественной резиновой верстки требует дополнительных знаний и умения. Например, наверно, Вы видели, что на квадратном мониторе сайт выглядит вроде хорошо, но этот же сайт на широкоэкранном мониторе размазывается по всей ширине экрана (дизайн сайта портится). Либо наоборот, на широкоэкранном мониторе сайт выглядит хорошо, а на квадратном мониторе дизайн сайта портится, содержимое веб-страницы начинает налезать друг на друга. Это показатели неправильно сделанной резиновой верстки.

2) Деление по принципу верстки:

а) Табличная верстка.
б) Блочная верстка.
в) Комбинированная верстка (Табличная и Блочная верстки).

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

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

Какая верстка лучше?
Комбинированная верстка является оптимальным вариантом. Современные сайты лучше верстать на блочной верстке, но с использованием таблиц, когда это требуется — все зависит от конкретной структуры сайта и его содержимого. Табличная и блочная верстки имеют свои достоинства, и используя обе эти верстки можно достичь наилучшего результата (дизайн сайта, кроссбраузерность, скорость загрузки, иногда можно избежать лишнего использования фоновых картинок, скриптов, и т.д.).

Адаптивная (Респонсивная) верстка

Адаптивная верстка (или как ее еще называют Респонсивная верстка — от англ. Responsive) — суть этой верстки в том, чтобы сверстанная веб-страница хорошо отображалась на экранах устройств разного размера, например, смартфон, планшет, монитор компьютера. Под размер экрана каждого из указанных устройств задаются свои настройки стилей CSS. Респонсивная верстка получается путем использования техники резиновой верстки, а также применения через CSS правила @media , с помощью которого указывается размер ширины экрана устройств, под которые делается адаптив верстки.

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

Пример 1
Пример 2
Пример 3

При заказе на выполнение респонсивной верстки сайта оговаривается, под экраны какой ширины нужно сделать адаптив. Например, разрешение смартфона 320х480 при этом экран смартфона работает в двух режимах — портретная ориентация и альбомная ориентация. Для одних сайтов можно сделать адаптив и для альбомной ориентации и для портретной ориентации. Для других сайтов практичнее сделать адаптив только для альбомной ориентации. Иногда нет практического смысла мельчить контент сайта для портретной ориентации, если сайт можно нормально посмотреть на смартфоне в режиме альбомной ориентации. Тем более большинство людей для просмотров сайтов используют не смартфон, а планшет, т.к. планшет имеет большие размеры и на нем удобнее смотреть сайты. Под что делать адаптив, практичнее определять исходя из дизайна и контента сайта.

Проблема масштабирования в мобильных браузерах

Иногда случается так — Вы сделали адаптивную верстку страниц сайта, но мобильные браузеры (Opera, Mozilla, Яндекс и др.) не обращают ни какого внимания на ваш адаптив, как будто и нет никакого адаптива. Мобильный браузер просто уменьшает масштаб всей веб-страницы, чтобы веб-страница целиком поместилась на экране устройства, в котором вы смотрите сайт.

Исправить возникшую ситуацию можно тем, что в контейнере head, в исходном коде веб-страниц, нужно написать мета тег viewport.

Например,
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Разберем значение атрибута content
1) width=device-width этим мы показываем, что ширина области просмотра равняется ширине экрана устройства, на котором смотрят наш сайт.
2) initial-scale=1.0 этим мы показываем, что масштаб страницы при загрузке 100% При этом пользователь, просматривая сайт, может сам изменить масштаб.

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

пользователь всегда видит веб-страницу такой, какая она есть, и не может ее сделать крупнее или меньше.

Это делается тем, что в значении атрибута content указывают maximum-scale=1.0, minimum-scale=1.0, user-scalable=no   Например.
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no»>

Размер шрифта в мобильных браузерах

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

Есть некоторые решения через CSS, но они помогают не везде и не всегда. Например.

html * {
      max-height: 1000000px;
      text-size-adjust: none;
}

Чтобы уменьшить самоволие мобильных устройств относительно размера шрифта, каждый используемый шрифт можно подключить как файл. Для лучшей кроссбраузерности, шрифт подключается в нескольких форматах: ttf, woff, svg, eot (для IE8 и меньше). Это относится и к безопасным шрифтам. Файлы шрифтов подключаются правилом @font-face

При этом использование файлов шрифтов, может усилить разность шрифта при отображении на ПК в разных браузерах.

Добавить комментарий

Закрыть меню