Каким должен быть дизайн современного веб-сайта? Конечно же, адаптивным. Тогда почему я призываю вернуться обратно к «резиновому»? Во-первых, не всегда и не везде, а только там, где это нужно, а во-вторых, адаптивный дизайн – это всего лишь комплекс определённых идей, и не все из них правильные.
Причиной возникновения «резинового», а в дальнейшем и «адаптивного» дизайна является многообразие технических средств для просмотра веб-страниц.
Сначала о том, в чём идея резинового дизайна. Предположим идеальный случай, когда все экраны имеют одинаковый геометрический размер, но разное количество пикселей на дюйм. Одна и та же картинка будет иметь разные геометрические размеры в зависимости от разрешающей способности экрана. Чем больше разрешающая способность, тем меньше будет картинка. Если указать отображение картинки в % от ширины экрана, то размер картинки на всех экранах станет одинаковым.
Но геометрические размеры экранов не одинаковые. Поэтому рассмотрим следующий идеальный случай, когда геометрические размеры пикселей одинаковые, и чем больше разрешающая способность экрана, тем больше его геометрический размер. В этом случае можно спокойно задать отображение картинки в её естественном пиксельном размере и при этом она будет иметь одинаковый геометрический размер на всех экранах. В реальности нет такой однозначной взаимосвязи между разрешающей способностью и размерами экрана, хотя такая ситуация более вероятна по отношению к настольным мониторам.
Теперь вернёмся к главному ограничению, которое накладывает «резина». Все экраны должны иметь одинаковый геометрический размер. Или одинаковый угловой размер. Какую часть поля зрения занимает у нас монитор персонального компьютера? Конечно, это зависит от расстояния до монитора. В общем, угловые размеры достаточно большие.
Вы наверное заметили, как неудобно просматривать на широкоэкранных мониторах веб страницы, имеющие резиновый дизайн? Экран почти в 2 раза шире обычного, картинки непривычно большие. Вместе с тем замечено, что пользователь использует full HD монитор в режиме 1920х1080pix, если только этот монитор по своим размерам значительно больше обычного. Поэтому для настольных компьютеров работает правило: чем выше чёткость, тем больше геометрические размеры экрана. В этом случае разумнее применить естественные размеры картинок. Для того, чтобы на широкоэкранных full HD мониторах по бокам не возникало пустого пространства, с помощью адаптивного дизайна мы можем назначить различные стили. Например, вместо двух колоночного отображения текста мы можем задать трёх или четырёх колоночное отображение.
Для настольных компьютеров всё ясно – угловые размеры экрана большие и занимают всё или почти всё поле зрения. А как быть с мобильной версией сайта? Давайте сначала разберёмся, для каких устройств она предназначена. Для мобильных телефонов. Это небольшие устройства, которые умещаются на ладони. Угловые размеры экрана маленькие, занимают только небольшую часть поля зрения. Разрешающая способность экрана у смартфонов колеблется в широких пределах, а его размеры не намного отличаются. В том смысле, что они, конечно, разные, но одинаково маленькие. Случай одинаковых геометрических (или угловых) размеров экрана – это идеальный случай для применения резинового дизайна. Поэтому здесь его и надо применять.
Вы можете посмотреть, как реализован резиновый дизайн в мобильной версии сайта Teleport-1M. Смотрится одинаково хорошо на всех смартфонах.
Я хочу сказать, что должны быть две различные версии сайта – для экранов с большим угловым размером и для экранов с маленьким угловым размером, а какую из них считать основной – зависит от того, какие цели и задачи решает веб-сайт. Если Ваш клиент скорее всего ищет Ваши товары и услуги со своего мобильного телефона, то наверное, основная версия Вашего сайта – мобильная версия. И в то же время, необходимо оставить клиенту возможность выбора, пусть он сам решает, какую версию он хочет видеть – мобильную, быструю, лаконичную, — или настольную – подробную, по-своему удобную, с “архитектурными излишествами”.
Конечно, резиновый дизайн для мобильной версии сайта не так уж и прост, как это кажется поначалу. Что произойдёт, если пользователь смартфона перевернёт свой экран из вертикального положения в горизонтальное? Размер букв не изменится, просто строки текста будут в 2 раза длиннее. А вот картинки станут явно крупнее. Если для мини-смартфонов, у которых экран «меньше меньшего» это не так сильно бросается в глаза, то для современных смартфонов с экраном 5 дюймов по диагонали это уже слишком заметно. Поэтому и здесь пришлось применить адаптивность, задать два разных стиля для портретной и альбомной ориентации экрана.
Я тоже сторонник адаптивного дизайна, а не ретроград какой-нибудь, я всего лишь призываю учитывать разницу между двумя принципиально разными угловыми размерами экранов у мобильных телефонов и стационарных устройств. Учитывая то, что мобильная версия сайта становится основной, и тот факт, что для всех мобильных телефонов достаточно всего двух вариантов резинового макета (портретный и альбомный ), я и говорю: «От адаптивного» дизайна – обратно к «резиновому»!
Причиной возникновения «резинового», а в дальнейшем и «адаптивного» дизайна является многообразие технических средств для просмотра веб-страниц.
Сначала о том, в чём идея резинового дизайна. Предположим идеальный случай, когда все экраны имеют одинаковый геометрический размер, но разное количество пикселей на дюйм. Одна и та же картинка будет иметь разные геометрические размеры в зависимости от разрешающей способности экрана. Чем больше разрешающая способность, тем меньше будет картинка. Если указать отображение картинки в % от ширины экрана, то размер картинки на всех экранах станет одинаковым.
Но геометрические размеры экранов не одинаковые. Поэтому рассмотрим следующий идеальный случай, когда геометрические размеры пикселей одинаковые, и чем больше разрешающая способность экрана, тем больше его геометрический размер. В этом случае можно спокойно задать отображение картинки в её естественном пиксельном размере и при этом она будет иметь одинаковый геометрический размер на всех экранах. В реальности нет такой однозначной взаимосвязи между разрешающей способностью и размерами экрана, хотя такая ситуация более вероятна по отношению к настольным мониторам.
Теперь вернёмся к главному ограничению, которое накладывает «резина». Все экраны должны иметь одинаковый геометрический размер. Или одинаковый угловой размер. Какую часть поля зрения занимает у нас монитор персонального компьютера? Конечно, это зависит от расстояния до монитора. В общем, угловые размеры достаточно большие.
Вы наверное заметили, как неудобно просматривать на широкоэкранных мониторах веб страницы, имеющие резиновый дизайн? Экран почти в 2 раза шире обычного, картинки непривычно большие. Вместе с тем замечено, что пользователь использует full HD монитор в режиме 1920х1080pix, если только этот монитор по своим размерам значительно больше обычного. Поэтому для настольных компьютеров работает правило: чем выше чёткость, тем больше геометрические размеры экрана. В этом случае разумнее применить естественные размеры картинок. Для того, чтобы на широкоэкранных full HD мониторах по бокам не возникало пустого пространства, с помощью адаптивного дизайна мы можем назначить различные стили. Например, вместо двух колоночного отображения текста мы можем задать трёх или четырёх колоночное отображение.
Для настольных компьютеров всё ясно – угловые размеры экрана большие и занимают всё или почти всё поле зрения. А как быть с мобильной версией сайта? Давайте сначала разберёмся, для каких устройств она предназначена. Для мобильных телефонов. Это небольшие устройства, которые умещаются на ладони. Угловые размеры экрана маленькие, занимают только небольшую часть поля зрения. Разрешающая способность экрана у смартфонов колеблется в широких пределах, а его размеры не намного отличаются. В том смысле, что они, конечно, разные, но одинаково маленькие. Случай одинаковых геометрических (или угловых) размеров экрана – это идеальный случай для применения резинового дизайна. Поэтому здесь его и надо применять.
Вы можете посмотреть, как реализован резиновый дизайн в мобильной версии сайта Teleport-1M. Смотрится одинаково хорошо на всех смартфонах.
Я хочу сказать, что должны быть две различные версии сайта – для экранов с большим угловым размером и для экранов с маленьким угловым размером, а какую из них считать основной – зависит от того, какие цели и задачи решает веб-сайт. Если Ваш клиент скорее всего ищет Ваши товары и услуги со своего мобильного телефона, то наверное, основная версия Вашего сайта – мобильная версия. И в то же время, необходимо оставить клиенту возможность выбора, пусть он сам решает, какую версию он хочет видеть – мобильную, быструю, лаконичную, — или настольную – подробную, по-своему удобную, с “архитектурными излишествами”.
Конечно, резиновый дизайн для мобильной версии сайта не так уж и прост, как это кажется поначалу. Что произойдёт, если пользователь смартфона перевернёт свой экран из вертикального положения в горизонтальное? Размер букв не изменится, просто строки текста будут в 2 раза длиннее. А вот картинки станут явно крупнее. Если для мини-смартфонов, у которых экран «меньше меньшего» это не так сильно бросается в глаза, то для современных смартфонов с экраном 5 дюймов по диагонали это уже слишком заметно. Поэтому и здесь пришлось применить адаптивность, задать два разных стиля для портретной и альбомной ориентации экрана.
Я тоже сторонник адаптивного дизайна, а не ретроград какой-нибудь, я всего лишь призываю учитывать разницу между двумя принципиально разными угловыми размерами экранов у мобильных телефонов и стационарных устройств. Учитывая то, что мобильная версия сайта становится основной, и тот факт, что для всех мобильных телефонов достаточно всего двух вариантов резинового макета (портретный и альбомный ), я и говорю: «От адаптивного» дизайна – обратно к «резиновому»!
