Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/thewind/data/www/dignatiev.ru/app/Model/Local.php on line 39
Адаптивный дизайн сайтов - Блог на сайте DIgnatiev development

Адаптивный дизайн сайтов

Какие бывают версии сайтов?

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

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

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

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

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

Адаптивный дизайн - за и против

Существуют два мнения на счет оправданности адаптивного дизайна. Во-первых, это однозначное удорожание разработки сайта - дизайнер должен продумать способы отображения и поведения практически всех элементов на странице для разных разрешений. Верстальщик (или front-end разработчик) должен создать корректную HTML структуру и написать CSS стили (масло-масленное, потому что CSS - это Cascaded StyleSheets) для корректного отображения на любых устройствах. Во-вторых, практичность такого решения.

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

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

Актуальные диапазоны разрешений

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

Как правило, выделяют 5 типов экранов (от большего к меньшему):

  • Large desktop - широкие современные мониторы и телевизоры (tv devices) с шириной более 1500 пикселей
  • Standart desktop - классические мониторы для настольных компьютеров, а также экраны небольших ноутбуков, с шириной более 1000 пикселей
  • Landscape tablet - планшеты в альбомной (горизонтальной) ориентации экрана и иногда нетбуки с шириной более 750 пикселей
  • Portrait tablet / landscape mobile - планшеты в портретной (вертикальной) ориентации и мобильные телефоны в альбомной ориентации с шириной экрана более 480 пикселей
  • Portrait mobile - мобильные телефоны в портретной ориентации с шириной экрана более 320 пикселей

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

Разъяснения нюансов работы адаптивных сайтов для собеседника

Чаще всего, при такой постановке задачи, как требование разъяснить необходимость наличия адаптивной версии или нюансов ее работы, возникает между создателями сайта и заказчиком. В одних случаях, заказчик не понимает, зачем он должен платить дополнительно за "коверканье" дизайна под мобильники; в других случаях необходимо найти золотую середину между требования заказчика и возможностями HTML / CSS.

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

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


contact

Свяжитесь с нами

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

Новости

05 июля 2017 г.

Два новых сервиса в онлайне.

Подробнее »

17 июня 2016 г.

Новая статья в нашем блоге про актуальность адаптивного дизайна в современных сайтах.

Подробнее »

Отзывы клиентов

Всё отлично, быстро и недорого!

Владимир Ульев - В-Кран

Работы по сайту были сделаны качественно. Понравилось то, что в студии выполнили все обязательства в срок.

Оцениваю сотрудников как профессионалов высокого уровня, приятных в общении людей и рекомендую!

Антон Яковлев - Играмир

bottom