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

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

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

В чем суть: адаптивность этого сайта заключается в том, что его центральная (информационная) колонка масштабируется (вместе с частью контента — например, с изображениями) в некоторых пределах, при том, что боковые (служебные) колонки имеют фиксированную ширину. Для тех, кто любит цифры — ширина центральной колонки не может быть меньше 480 пикселов, а общая ширина трех колонок сайта не может быть больше 1380 пикселов (при том, что боковые колонки всегда имеют ширину 280 и 200 пикселов соответственно левая и правая). Но это не всё. Если при складывании сайта оказывается, что на центральную колонку остается меньше 480 пикселов — боковые колонки минимизируются до узкого столбика, сначала правая, а затем, если этого недостаточно — и левая. Их можно в любой момент развернуть кликом на зеленый и синий указатели свертки — но развернутся они уже поверх центральной колонки. Кроме колонок, сворачиваются и вспомогательные элементы дизайна — скажем, горизонтальные меню сворачиваются в вертикальные, а кое-что малополезное и вовсе исчезает.

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

Так вот, сегодня мы сместили баланс настроек в пользу более крупных шрифтов и большего приоритета центральной колонки. На устройствах с экранами 1280×800 (например, на планшетах) сайт теперь показывается в горизонтальной ориентации со свернутой правой колонкой, а в вертикальной ориентации — со свернутыми обеими боковыми колонками. При этом для большего удобства чтения на планшетах с современными экранами с высокой плотностью точек (всякие «Ретины» и около них) мы рекомендуем ставить в браузерах увеличение 120-150% — текст будет крупнее. В штатном браузере Android 4.4 это делается через меню -> Настройки -> Специальные возможности -> Масштабирование текста.

Надеемся, теперь читать сайт станет удобнее. Если возникнут какие-то проблемы — сообщайте о них прямо тут в комментариях, делайте скриншоты с проблемой и присылайте.

PS. Хорошие веб-дизайнеры всегда делали сайты резиновыми, а плохие — кирпичом. Хороший дизайнер смотрит на споры о необходимости резины с удивлением. Ясен пень, дизайн должен уметь жить при разных размерах экрана, о чём тут спорить? Сайт — не плакат, а глаза пользователей — не микроскопы.

Люк Вроблевски приводит действительно интересную статистику, «Где люди используют мобильные устройства»:

84% дома
80% в свободное время в течение дня
76% в очередях и в процессе ожидания
69% в процессе шоппинга
64% на работе
62% во время просмотра ТВ-программ (альтернативные исследования дают цифру в 84%)
47% во время подготовки к работе

На наш сайт около 15% посетителей заходят с Андроида, и еще около 7% — c Apple iOS. Мы не забываем об этой мобильной аудитории и хотим сделать сайт более удобным и для них тоже — но, разумеется, не ценой неудобств для пользователей полноразмерных компьютеров. Насколько это получится — зависит и от вас тоже, от вашей обратной связи.

Настоящий материал самостоятельно опубликован в нашем сообществе пользователем Proper на основании действующей редакции Пользовательского Соглашения. Если вы считаете, что такая публикация нарушает ваши авторские и/или смежные права, вам необходимо сообщить об этом администрации сайта на EMAIL abuse@proru.org с указанием адреса (URL) страницы, содержащей спорный материал. Нарушение будет в кратчайшие сроки устранено, виновные наказаны.

Читайте также:

Комментарии о материале (сверху свежие):
  1. Proper (2015-03-15 19:32:22)
    Интересно, что на западе необходимость резины долгое время не признавалась. Дело в том, что когда на западе появился веб, в него пришли полиграфисты, которые просто не понимали, как дизайн может быть не фиксированным, и насиловали веб своими полиграфическими представлениями о прекрасном. В России же «веб» и «дизайн» появились более-менее одновременно, поэтому здесь резиновость среды воспринималась как естественная её степень свободы, дизайнеры изначально учились с этим жить. Некоторые русские дизайнеры, ссылаясь на западный опыт, зачем-то отказывались от резины. Но нерезиновость западного веба — случайное неприятное следствие его истории, а не осознанный выбор. Отказ же русского дизайнера от резины — очевидный шаг назад, регресс.
  2. Ivan83 (2015-03-15 19:37:39)
    Samsung s4 mini. Стало хуже, чем было. Центральная колонка теперь не помещается в ширину экрана. Раньше помещалась. Спасибо.
  3. Андрей (2015-03-15 19:45:20)
    У мя по ширине 1920 пикселей и масштаб стоит 150%. Раньше страница чётко заполняла экран по ширине, сейчас правая колонка свернулась. Так и было задумано?
  4. FLY_Slim Jr. (2015-03-15 19:50:04)
    У меня теперь все ска большое, как в стандарте, мобайл тема отключилась что-ль
  5. Ivan83 (2015-03-15 19:54:55)
    Порылся в настройках. Все отлично.
  6. Sagamor (2015-03-15 19:56:53)
    Смотрю на компе. Удобно. Респект. Это всегда! Забит колышек, вокруг него выстраивается изба, вокруг избы деревня. Таковы правила развития.
  7. FLY_Slim Jr. (2015-03-15 20:02:20)
    Работает только в горизонтальном виде
  8. McLoud (2015-03-15 20:12:14)
    Днем на планшете чудил, хотел спрашивать про ширину контента. Потом все ОК. Респект. Кнешна лучше адаптивный, да и современее, чем жеска задано в пикселях.
  9. Proper (2015-03-15 20:29:06)
    Да. Если начнете уменьшать масштаб - колонка развернется. Смысл в чем - правая колонка в принципе нужна очень редко. Там только панель логина, выбор рубрики, да архив. Ну и навигация следующий-предыдущий, если вы читаете материал. Ее свертывание почти не мешает пользованию сайтом, зато позволяет расширить примерно на треть (зависит от ширины экрана) информационную колонку. А это в свою очередь позволяет поднять размер шрифта без потери слитности текста - то есть читать будет легче. Или, если не трогать шрифт - строки текста будут длиннее, а заглавные картинки - крупнее.
  10. Proper (2015-03-15 20:29:54)
    Это как это? Переворачиваете планшет - и нет изображения?
  11. FLY_Slim Jr. (2015-03-15 20:33:52)
    Нет, с картинками все норм. Но вот на телефоне все работает, нормально, если телефон в горизонтальном положении. В вертикальном, ни шрифт ни масштабирование не помогает Не влазит попросту в экран
  12. Proper (2015-03-15 20:49:52)
    Чортпобери, да какая же у вас ширина экрана-то при вертикальной ориентации? Дайте цифры. Небось, 320 пикселов? А браузер какой?
  13. MadMax (2015-03-15 20:54:32)
    На Большом Брате появилась скрывающаяся панель справа :) 10 минут назад не было.
  14. zu (2015-03-15 20:55:02)
    Проклятый ипад4, как обычно все отлично. :-D :-D
  15. FLY_Slim Jr. (2015-03-15 20:58:47)
    Система от ксяоми 720/1280 5" браузер от ксяоми, андроид 4.2.1, ядро 3.4.5, 320dpi
  16. Proper (2015-03-15 21:00:16)
    Дык чтобы появилось - надо CSS перегрузить. По умолчанию браузеры используют старую CSS из кэша.
  17. Proper (2015-03-15 21:12:06)
    ОК, на смартфоне под Андроидом 4.2 ситуацию удалось воспроизвести. Будем работать над устранением.
  18. Proper (2015-03-15 21:12:38)
    Дык чего отличного-то? Как показывает?
  19. FLY_Slim Jr. (2015-03-15 21:15:06)
    Спасибо, в принципе, горизонтальном пашет, а вот остальное, с каждым обновления приходится в ручную масштабировать. Но в горизонтальном у меня писать неудобно, не планшет.
  20. Gipsy (2015-03-15 21:22:26)
    Huawei P6 экран 4,7" с Андроидом 4.4.2 на Chrome хорошо читается в горизонтале. Вертикально если ширину колонки подогнать, нужна лупа. Попробую ещё новый старт.
  21. Proper (2015-03-15 21:30:43)
    Вертикаль порешаем. Вообще, конечно, обеспечение читаемости в вертикальной ориентации на смартфоне - тот еще гемор.
  22. FLY_Slim Jr. (2015-03-15 21:34:06)
    В горизонтальном не лучше, так как не планшет, не нашёл способа уменьшить поле клавы, она заполняет 2/3 экрана. Не хватает буквально дюйма так сказать
  23. MadMax (2015-03-15 21:37:43)
    Муха у тебя экран 2 дуйма шоле ? Что за нищебродство ?
  24. Gipsy (2015-03-15 21:38:34)
    Перезагрузил смартфон, та же песня. Теперь картинки не обрезаные, классно, шрифт подгоню для читать горизонтально, а пейсать ... время покажет.
  25. MadMax (2015-03-15 21:39:29)
    5.3 полет нормальный, вертикаль конечно лучше не юзать - мелковато.
  26. McLoud (2015-03-15 21:40:35)
    Да, мой старенький NOK на симбиан - тож все ок!
  27. Proper (2015-03-15 21:43:55)
    Вертикаль нужна только чтобы камменты набивать. Но понятно, что лучше на фаблете.
  28. FLY_Slim Jr. (2015-03-15 21:45:16)
    Куда нам в степи до вас эуропэцив
  29. MadMax (2015-03-15 21:47:16)
    Пиши прямо - до москалей ! Готовь тэнгэ на новый смартфон :)
  30. FLY_Slim Jr. (2015-03-15 21:50:29)
    А моцкали то причём, они меня нищебродом не называливроде
  31. Gipsy (2015-03-15 21:55:09)
    Шефф, усё пропало!© Куда делось: "новая статья - предыдущая статья "? Жаль, если не будет! ----- Беру обратно, нашёл справа под зелёной кнопкой! Вертикально всё по-старому.
  32. MadMax (2015-03-15 21:55:31)
    А я теперь в москали записался :)
  33. Рич (2015-03-15 22:02:54)
    мы запейсались все в антисемиты - так был решен еврейский наш вопрос©
  34. MadMax (2015-03-15 22:05:24)
    Таки да! Я уже посетил синагогу в Парке Победы.
  35. Proper (2015-03-16 00:34:56)
    Я перенастроил - вертикальный режим работает. Чтобы перегрузить CSS на стандартном браузере Андроида 4.2, поставьте галочку "Полная версия сайта", посмотрите, а потом можете ее снять. У меня нормально показывает на смартфоне с Андроидом 4.2 в вертикальной ориентации при масштабе шрифта 100% в режиме "мелкий" и "обычный". В "крупном", увы, вылазит за пределы экрана - но тут уж ничего не сделать, так браузер работает - чужие сайты резиновые тоже так показываются. С масштабом шрифта тоже играйте - там будет зависеть от вашего разрешения экрана и типа браузера.
  36. Proper (2015-03-16 00:35:28)
    Я поправил, см.там ниже.
  37. FLY_Slim Jr. (2015-03-16 04:35:41)
    Да, спасибо, теперь масштаб автоматом в любом положени. И все авлазит
  38. FLY_Slim Jr. (2015-03-16 05:02:19)
    Спасибо Глагне, работает. Мой медведь ушёл за водкой, а я пожалуй подкину урана в реактор, а то самогон капать перестал
  39. zu (2015-03-16 08:15:02)
    http://cs625319.vk.me/v625319457/20e0b/KmlbO7nEjEs.jpg
  40. zu (2015-03-16 08:24:08)
    https://pp.vk.me/c625319/v625319457/20e15/WB8lTMxdwNA.jpg
  41. Proper (2015-03-16 12:58:02)
    Ну прекрасно, что сказать. Так и задумывалось. Ипадъ ипадит.
  42. McLoud (2015-03-16 17:44:24)
    Пздравля. Нас увеличиваетца, мы покажемо провинции
  43. Woolf (2015-03-16 18:22:13)
    Странная статья.. Любой сайт должен работать на всех доступных разрешениях, это аксиома, иначе смысл сайта теряется. Затачивать дизайн на какое-то одно разрешение - это кривожопость высшей категории.
  44. Proper (2015-03-16 18:56:15)
    Тем не менее именно так БОЛЬШИНСТВО сайтов и сделано - под конкретное разрешение. Любимый некоторым народом BadNews сделан под фиксированную ширину, а Takie.Org - сделан в виде простой резины с изменяющейся шириной средней колонки. И даже responsive web design, RWD - на Западе трактуется просто как набор из нескольких фиксированных оформлений под фиксированные разрешения экрана. У нас на этом сайте используется комбинированный метод - резина сочетается с брейкпоинтами, в которых сайт меняет layout (сворачивает одну колонку, потом вторую, потом сворачивает меню, потом сбрасывает боковые колонки вниз сайта). Это достаточно замороченная технология, заставить которую работать хорошо везде - не так просто.
  45. Gipsy (2015-03-16 19:12:25)
    Спасибо! Шрифт на одну ступень увеличил, всё показывает и вмещается, шо вдоль, шо поперёк. Классно! :)
Чтобы писать свои комментарии - надо залогиниться на сайте. Тогда и вид комментариев станет более красивым.