создание сайтов во владимире

Владимир, Горького 27. 8 920 620 07 41

Создание сайтов с адаптивным дизайном

Всего несколько лет назад в интернет можно было войти всего лишь через компьютер, и мониторы были 3:4 с разрешением 1024 или 1280. То сегодня в сеть можно войти с десятков различных гаджетов, каждый из которых имеет свое разрешение экрана и управление. Это прежде всего компьютеры с самыми разными мониторами разрешение которых варьируется в разы, смартфоны и планшеты, телевизоры, навигаторы, ноутбуки, нэтбуки , смарт часы…
Соответственно требования к сайтам несколько лет назад предъявлялись весьма скромные: «сайт должен смотреться на всех браузерах корректно». Поэтому сайты создавались чаще всего фиксированной ширины (такой чтобы сайт поместился на самый маленький монитор), на мониторах побольше как правило по краям оставалась нерабочая область , иногда заполняемая фоновым изображением.
Сейчас требования к создаваемым сайтам сильно изменились, а именно сайт должен смотреться корректно не только в различных браузерах , но и в различных устройствах. И не просто смотреться но и быть удобным для пользователя.То есть сайт должен адаптироваться к различным разрешениям. И самое главное навигация должна быть кликабельной, так как управление на мобильных устройствах осуществляется посредством клика по экрану монитора, так вод площадь этого клика должна быть достаточной (соизмеримой с площадью подушечки пальца)

Что же такое адаптивный сайт?

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

Приведу несколько примеров для понимания:

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

Так выглядит меня сайта на обычном мониторе.

Представьте, что монитор уже  не 1000 пх, а скажем 480 , не трудно предположить что  часть меню будет просто не видна (я уже молчу про выпадающие элементы,  они просто потеряются)

А вот так выглядит адаптированный вариант того же  меню на маленьких дисплеях

Как вы видите из горизонтально меню перестроилось в вертикальное и появился эффект “аккордион” Стало очень удобно ходить по такому меню со смартфона (а площадь клика даже увеличилась)

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

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

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

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

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

Давайте сначала определим настолько ли необходимо  создание сайтов с адаптивными свойствами!

Рассмотрим рынок мобильных устройств и мобильного интернета.

Начиная с 2008 года ( доля мобильного интернета составляла всего 10%) к 2016 году составила уже более 60%.  А рынок устройств (гаджетов) развивается еще быстрее!

Основываясь на данных статистики мы видим , что 80% респондентов используют и будут использовать мобильный интернет. Ведь мобильные устройства всегда с вами, в любой момент вы можете найти необходимую информацию, пообщаться с друзьями  в соцсетях. Появилась минутка? Стоите в очереди? Едете в метро?… Достали смартфон , и … дальше все понятно!  Главное желание современного человека — всегда быть в курсе новостей и оставаться на связи, а для этого больше подходят смартфоны и планшеты.Граждане ежедневно общаются в соцсетях (60%), пользуются электронкой (70%) и знакомятся с новостями  (60%). И чем совершеннее становятся устройства и дешевле и быстрее мобильный интернет, тем больше людей будут предпочитать поиск товаров и услуг именно посредством мобильных устройств.

 

Давайте ознакомимся со статистикой  лидирующей компании по технологическим исследованиям  Gartner

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

Кто помнит сейчас о проводных телефонах?  Правильно, только бабушки. То же будет и с громоздкими компьютерами. Конечно же для  работы, стационарные компьютеры и большие мониторы будут существовать. Но для “бытовых нужд” лидерство будет за мобильными устройствами. Так вот все эти господа и дамы придя на не адаптивный сайт,  просто не смогут сориентироваться и уйдут навсегда с вашего сайта!  По-этому на вопрос: “НУЖНО ЛИ СОЗДАНИЕ АДАПТИВНОГО САЙТ” , отвечаем однозначно – ДА, еще вчера!

 

А ВЫ УЖЕ СОЗДАЛИ САЙТ С АДАПТИВНЫМ ДИЗАЙНОМ?