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

Потом появились мобильные телефоны с выходом в интернет, что породило массовое производство “вап-сайтов” и “вап-версий” обычных сайтов. Я тоже в свое время проходил этот этап (см. эту страницу). Вап-сайты отличались фактическим отсутствием дизайна и крайне ограниченным спектром предоставляемой информации. И то правда - много ли можно уместить на экране с диагональю 3 сантиметра и разрешением 128*128 пикселей? Вап-страницы имели специальный “wml”-формат (близкий к “xml”) и на больших компьютерах не читались (правда, существовали плагины для некоторых браузеров, да и знаменитая “Опера” эти сайты показывала).

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

По идее, такая ситуация должна была бы сделать ненужными любые проверки на устройство чтения со стороны сайта. Но…

Но, несмотря на огромные разрешения мобильных экранов, их физический размер не превышает 5 дюймов (за редкими исключениями. но тогда это уже, скорее, планшет, а не телефон). И даже если у человека идеальное зрение, объекты размером 200*200 пикселей, прекрасно видимые на экране в 17 дюймов, на экране 4.5 превратятся в ничто. А уж текст, размещенный на сайте 12 (что часто бывает) шрифтом, читаться не будет вообще.

Что делать?

И вот тут появляется идея “адаптивности”. Поскольку примитивные вап-страницы сейчас никого не устроят, сайту приходится приспосабливаться к маленьким экранам иначе.

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

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

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

Однако, стереотип существует и переделать его не в нашей власти. Значит - нужно приспосабливаться. Как?

Адаптивность дизайна достигается несколькими методами. Сначала перечислим, потом рассмотрим подробнее.

1. Дизайн сайта делается одноколоночным и “резиновым” (без указания размеров элементов), в результате чего все содержимое страницы автоматически (и “как получится”) распределяется по экрану телефона.

2. Сайт имеет несколько отдельных версий, по итогам определения типа устройства, открывается та или иная. Этот вариант отчасти повторяет наличие прежних “вап-версий”.

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

Так что же делать? Рассмотрим эти варианты подробнее.
 

1. “Резиновый” вариант

Естественно, что шаблон такого сайта может состоять только из “шапки”, сплошного одноколоночного тела и “подвала”. Сделать такой сайт - проще простого, но будет ли он привлекателен для посетителей? Разумеется, для нормального посетителя важно содержимое сайта, а не его внешний вид. Но все ли посетители нормальные?

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

Есть, однако, еще одна проблема. Наряду с маленькими экранами смартфонов существуют и огромные экраны настольных рабочих станций, где разрешение 2048 пикселей по ширине - не редкость, а диагональ монитора может быть и 30 дюймов. И как на таком “монстре” будет выглядеть описанный выше шаблон? Страшно представить…

Поэтому даже “резиновые” сайты обычно резиновые не на 100% и, например, ограничивают максимальный размер полезной площади страниц (чаще всего в расчете на 1024 пикселя). Например, практически все мои сайты используют ширину страницы в 960 пикселей. Это оптимально для восприятия на подавляющем большинстве экранов.

Мне сложно привести пример такого сайта, на 100% резинового. Просто потому, что их очень мало. Например, главная страница моего “Виртуального Дома” сделана резиновой, но поскольку там есть фиксированные по ширине элементы, просматривать данный сайт с маленького экрана не комфортно. Увы, но сохранить данное оформление при “телефонном” просмотре невозможно теоретически. А поскольку сайт этот мало посещаем и нужен только тем, кто хочет подробно познакомиться с моей персоной, я не стал делать его адаптивным. Нет смысла портить оформление…
 

2. Разновариантный сайт

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

Естественно, что создание такой системы требует больших знаний, большого времени и, разумеется, больших денег. Оправданы ли все эти затраты? Зависит от ваших потребностей. Конечно, если сайт корректно и красиво открывается на всех типах устройств и версий, то это приятно. Но с другой стороны, стоит ли поддерживать на 100% экзотические модели устройств или устаревшие версии браузеров? Ведь так или иначе, но любой сайт откроется везде, просто не везде идеально.

Поэтому, на мой взгляд, решение должно быть компромиссным. Ну, а если у вас очень много денег и очень большие амбиции, то, конечно, можно сделать нечто монстрообразное в плане адаптивности. Как говорится, выбор за заказчиком...
 

3. Динамичный сайт

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

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

Есть еще один важный момент. Когда вы сидите за десктопом, то вы достаточно часто заходите на сайты либо по ссылкам с других ресурсов, либо из закладок. Но когда вы пользуетесь смартфоном, ваш визит на сайт будет почти со 100% вероятностью выполнен из поиска. Тем более, что созданная крупнейшим поисковиком система на телефоне вас всячески к этому провоцирует. Да и какие на смартфоне “закладки”? Да, они есть, но пользоваться ими не слишком-то удобно.

Однако, такое разделение вывода сделать не всегда просто. На сайтах магазинов и сайтах новостей - там да, все просто и ясно. Но что делать сайтам контентным, когда весь их смысл именно в содержимом? Вопрос может показаться пустым, потому что львиная доля сайтов в интернете - не контекстные, а именно сервисные.

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

Я не хочу. И поэтому мне приходится переводить на адаптивный формат все свои сайты. А сайты у меня контентные, поэтому вариант “фильтрации” не подходит. В то же время, превращать все свои сайты в современные стандартные простыни с огромными шрифтами и минимумом креатива в оформлении тоже не хочется. Ведь тогда они ничем не будут отличаться от всех прочих. Да, информация у меня везде уникальна, это правда. Но мне просто скучно и противно делать “как все”. И жалко терять красивые наработки…

Так вот, в следующей части (формально в следующей статье) я и хочу рассказать о том, как я адаптировал свои сайты, чтобы избавиться от “черной метки” поисковиков.