Адаптивность

С ростом мобильных телефонов и планшетов появилось такое понятие как «адаптивные сайты». Что это за сайты, и какие у них преимущества в сравнении с обычными сайтами?

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

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

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

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

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

Адаптивные сайты появились сравнительно недавно. Такие сайты весьма полезны с точки зрения юзабилити сайта. Этим и объясняется их высокая популярность и массовость.

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

Если же Вы хотите шагать в ногу со временем, то данному вопросу нужно уделить максимум внимания, а наши специалисты с радостью Вам в этом помогут.

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

  • Выбирите девайс: