Масштабируемость и виды веб-дизайна
Вопрос масштабируемости сайта актуален для каждого веб-дизайнера. Согласитесь, создавая авторский визуальный продукт, хочется, чтобы он оставался одинаково красивым и удобным для пользователей любых устройств. Вариант неприемлем, когда блог или сайт смотрится отлично на экране с разрешением 1920х1080px и совершенно не читабелен на экране смартфона с параметрами 240х320px.
10-15 лет назад не было такого разнообразия и количества мониторов. Поэтому разрабатывать дизайн для сайтов было просто. Создаёшь обычный статический дизайн под фиксированную ширину экрана и можешь не сомневаться - большинство пользователей увидит сайт так, как и задумано.
Сегодня же у пользователей не только мониторы с самым разным разрешением, 3,5 миллиарда человек заходят в интернет с мобильных устройств - нетбуков, планшетов, смартфонов и т.д. Создавать сайты, используя старые методы, уже не комильфо.
Первое решение, которое пришло в голову многим веб-дизайнерам и разработчикам - создать просто отдельную "лёгкую" версию сайта для мобильных устройств. Так поступили многие крупные порталы. Однако за последние годы количество различных видов и подвидов устройств, с которых пользователи выходят в сеть, выросло просто невероятными темпами. А ещё надо учитывать, что владельцы планшетов или смартфонов также просмотривают полноценную версию сайта. Поэтому в конце концов веб-дизайнеры и разработчики пришли к идее "адаптивного" дизайна.
До сих пор можно столкнуться с несколькими версиями того, как понимают "адаптивный дизайн" разные IT-специалисты. Попробуем же разобраться, какие есть варианты разработки дизайна сайта.
Статический дизайн
"Статичным" или "статическим" называется сайт, который состоит из неизменяемых HTML-страниц. Такой сайт подразумевает наличие закрепленной темы с фиксированной шириной и чаще всего содержит одну или буквально несколько страниц. Чтобы отобразить такой сайт по центру экрана достаточно 1000 px. Контент всегда будет выравниваться строго по центру.
Также стоит учесть, что обновить статический сайт может только человек, обладающий хорошим опытом веб-разработки. В нём нет админпанели, поэтому все изменения нужно делать через исходный код.
Преимущества статического дизайна:
- Экономия времени и сил при разработке;
- Требует меньше нагрузки на хостинг;
- Вывод картинок, видео-материалов, баннеров можно осуществлять без опасения, что они перекроют друг друга или сместятся при разном разрешении монитора.
Недостатки статического дизайна:
- На мобильном устройстве сайт будет отображаться с горизонтальной полосой прокрутки;
- Широкоформатные мониторы отображают статический дизайн довольно убого - вариант не для тех, кто стремится к эффектности.
Статичных сайтов раньше было намного больше – появление и развитие CMS способствовало сокращению их количества в пользу динамических. Примеры статических сайтов:
Динамический дизайн
"Адаптивный дизайн - одна из самых актуальных тенденций в разработке сайтов, пришедшая всерьез и надолго" - такими заголовками сейчас пестрит практически любой сайт, посвященный веб-разработке и веб-дизайну. Узнать о том, что это такое, не составит труда. Однако есть некоторые тонкости, которые касаются понимания и восприятия такого дизайна. Посмотрим на них.
"Резиновый" дизайн
Основная особенность такого дизайна в том, что ширина колонок задаётся в процентах, а не в пикселях. Поэтому "резиновый" дизайн при любом разрешении монитора растягивается на всю ширину экрана. Сделать такой дизайн, особенно при использовании блочной вёрстки несколько сложнее, чем фиксированный, зато пользователь не будет видеть пустых полей на странице. Примечательно, что резиновый дизайн изначально довольно широко стал использоваться в рунете, в то время как на Западе разработчики очень долго сохраняли приверженность статическому дизайну.
Тем не менее, у простого резинового дизайна есть определённые ограничения и недостатки. При том большом разбросе размеров экрана, который есть у современных устройств, сложно реализовать резиновый дизайн так, чтобы при любом разрешении всё одинаково хорошо выглядело, чтобы дизайн не "разъезжался", чтобы картинки и видео не вылезали за границы блоков и т. п. По этой причине для создания действительно универсального сайта потребовались другие решения.
Адаптивный дизайн
Чтобы сайт одинаково хорошо выглядел и на мобильном телефоне и на большом мониторе, разработчики некоторых сайтов пошли по пути разработки нескольких, по сути, независимых, вариантов дизайна для разных устройств. Когда пользователь заходил на сайт, сервер определял тип устройства и разрешение экрана и "отдавал" ту или иную версию сайта. При этом каждая версия была заранее оптимизирована под разные разрешения. Для версий под экраны с маленьким разрешением использовались уменьшенные изображения, а некоторые элементы вообще убирались. Сама компоновка блоков также отличалась от "большой" версии.
Адаптивный дизайн оправдан при создании масштабных проектов: информационных порталов, интернет-магазинов, форумов, корпоративных сайтов и других подобных им ресурсов. Особенно эффектно он смотрится на мониторах с диагональю не менее 15,6’’.
Принцип адаптивности строится на создании одного URL, который подстраивает контент под различные форматы экранов. Примеры:
Посмотрите, как меняется расположение текста и картинок на различных экранах. Почему это круто? Одна из причин - Google отдаёт предпочтение таким ресурсам в поисковой выдаче. Другая причина - такие сайты легче проектировать и поддерживать, а это упрощает работу многих людей.
"Отзывчивый" дизайн
Последним методом, к которому пришли веб-дизайнеры, стал "отзывчивый" дизайн (англ. responsive design), который противопоставили обычному "адаптивному" дизайну (англ. adaptive design), хотя до настоящего времени эти термины часто путают и употребляют в похожем смысле. "Отзывчивый" дизайн соединяет в себе черты адаптивного и "резинового" дизайнов. Он автоматически подстраивается под любую ширину экрана, как и резиновый. При этом в процессе подстраивания может меняться расположение блоков, размер картинок. Также могут появляться, пропадать или изменяться некоторые элементы. Например, обычное горизонтальное меню может поменяться на выпадающее.
Ещё более важный момент - места, из которых люди будут приходить на ваш сайт. Поэтому очень важно учитывать любую скорость интернета, ведь огромное количество людей живут в отдалённых районах, где скорость интернета даже не 1 мб/с. Существует исследование, согласно которому, 57% пользователей уйдут с вашего сайта, если он загружается дольше нескольких секунд. Не так давно Google начал учитывать скорость при ранжировании сайтов. Она не оказывает большое влияние на позицию сайтов со средней скоростью загрузки, но если страница не загружается за определённое время, то поисковый алгоритм применяет к такому сайту штрафные санкции.
Всё это заставляет нас внимательнее взглянуть на скорость интернета и предоставить пользователю возможность загрузить контент достаточно быстро на самых малых скоростях. То есть "отзывчивый" дизайн - это уже не только история про размеры экранов, но различные сценарии, решения для которых должны быть гибкими и продуманными "от и до".
Сайты, на которых можно посмотреть "отзывчивый" (responsive) дизайн в действии:
- http://foodsense.is
- http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
- http://colly.com/
- http://www.anderssonwise.com/
- http://stephencaver.com/
- http://foodsense.is/
- http://www.bostonglobe.com/
- http://thinkvitamin.com/
- http://interim.it/
Преимущества динамического дизайна:
- Дорабатывать и обновлять элементы такого ресурса можно в любое время без необходимости редактирования всех страниц.
- Разрабатывать масштабируемый сайт можно как с нуля, вручную делая необходимые скрипты, программные коды и пр., так и использовать CMS.
- Адаптивный дизайн легко видоизменять, учитывая не только пожелания заказчика, но и актуальные требования отрасли, новые возможности программирования, объективные обстоятельства. Все корректировки вносятся через админпанель без необходимости править файлы с кодом.
- Возможности веб-дизайнера в работе с динамичным сайтом ограничены только его воображением.
Недостатки динамического дизайна:
- Чтобы создать хороший «резиновый» сайт приходится изрядно попотеть - эта задача не для ленивых и требует определённых навыков веб-дизайнера;
- На широкоформатных мониторах слишком длинные строчки текстового контента неудобочитаемые - нужно постоянно думать, как улучшить восприятие информации пользователем.
Кстати, вот здесь постарались наглядно показать разницу между видами дизайна. Попробуйте выбрать один из 4х вариантов и поизменять ширину окна браузера. Здесь adaptive - адаптивный дизайн, liquid - резиновый, responsive - отзывчивый, а static - статический.
Создать действительно классный продукт можно только уделяя должное внимание отзывчивости веб-дизайна. Тогда ресурс будет хорош для просмотра на любом устройстве независимо от типа, габаритов, размера экрана. Продуманный дизайн стоит во главе угла каждого веб-проекта. Только так он будет развиваться и вызывать интерес. Вам всё ещё непонятно, что такое адаптивный, отзывчивый, резиновый и статический дизайн? Тогда приглашаем вас на бесплатный интенсив по основам веб-дизайна!