Comments 11
Вероятно, изложенный в статье материал для многих читателей является очевидным, но мне, напрямую не связанному с вёрсткой и дизайном, теперь понятно, чем отличается резиновый макет от отзывчивого. Очень наглядно, спасибо!
Вот здесь можно потрогать
Пожалуйста.
Судя по тому, что я вижу в сети, либо многие разработчики не являются читателями Хабра, либо не так уж и очевидно.
Судя по тому, что я вижу в сети, либо многие разработчики не являются читателями Хабра, либо не так уж и очевидно.
Катастрофа 1: сползающие меню
К 3 описанным способам решения проблемы, я бы еще добавил скрытие части меню под псевдоссылкой «Еще»
Позволю себе с Вами не согласиться, с точки зрения юзабилити — это антипаттерн. Большинство пользователей просто не бует кликать по этому пункту.
Позволю и я не согласиться с вами:
Функция скрытия меню под псевдоссылкой включается на малых разрешениях. Основная часть аудитории, которая будет взаимодействовать с этим элементом интерфейса — это пользователи планшетов. В их пользовательском опыте имеется понимание того, что часть функционала скрыта.
Функция скрытия меню под псевдоссылкой включается на малых разрешениях. Основная часть аудитории, которая будет взаимодействовать с этим элементом интерфейса — это пользователи планшетов. В их пользовательском опыте имеется понимание того, что часть функционала скрыта.
Дизайн для разных разрешений и физических размеров экрана — еще большая проблема для приложений на Андроиде. Смесь мастабируемых, резиновых, отзывчивых и просто фиксированных по размеру и месту элеметов в одном приложении приводит к дикой путанице и неадекватному виду приложения. А еще, редко кто учитывает индивидуальные предпочтения пользователя, которые он устанавливает через размер стандартного шрифта (уж про само название и стиль шрифта я вообще могу — не до того).
Яркий пример, стандартнейшее приложение Gmail от Гугла. На моем телефоне все его надписи, списки, письма, элементы дизайна и кпонки выглядят больше и удобнее, чем на моем планшете! Парадокс, но факт. Причина — на планшете приложение резко, скачком, переходит на планшетный дизайн (хотя разница в дианогалях небольшая — 6 и 8.4) и плюет на выбранный мной большой размер системного шрифта. При этом плотность пикселей на дюйм на телефоне чуть-чуть выше, чем на планшете.
В браузерах хоть есть встроенная функция «масштабировать», которая почти всегда работает адекватно, а вот в приложениях, увы, нет.
Яркий пример, стандартнейшее приложение Gmail от Гугла. На моем телефоне все его надписи, списки, письма, элементы дизайна и кпонки выглядят больше и удобнее, чем на моем планшете! Парадокс, но факт. Причина — на планшете приложение резко, скачком, переходит на планшетный дизайн (хотя разница в дианогалях небольшая — 6 и 8.4) и плюет на выбранный мной большой размер системного шрифта. При этом плотность пикселей на дюйм на телефоне чуть-чуть выше, чем на планшете.
В браузерах хоть есть встроенная функция «масштабировать», которая почти всегда работает адекватно, а вот в приложениях, увы, нет.
Прям уж катастрофа. Особенно с меню — что страшного, если меню будет не в одну строчку, а в две?
Статья хорошая. Позвольте пару слов, уточню.
«Катастрофа 2» — вот с чем боролись, то и создает проблемы потом. Скажем, есть сайт (тот же хабр), у которого есть специально созданный шаблон под мобильники. Текст в нем пальцами уже не помасштабируешь, «как дизайнер сказал, так и живите» (считается, что дизайнеру лучше видно/понятно, как на всех устройствах мира и для всех глаза мира сайт должен выглядеть). И в шаблоне неким образом сказано, что картинки вписываются в экран по ширине.
Для фотографий котиков (и прочих «фото для привлечения внимания») подход работает. А потом кто-то делает пост, где изображение содержит, скажем, схему сети (много бирюзовых квадратиков, линий между ними и буковок подписей) — скажем, вот пост про сети: m.habrahabr.ru/post/216215. Вы уже поняли, как она выглядит в нашем «волшебном» мобильном шаблоне? Да-да, она тупо не читаема, но при этом ее не рассмотреть вообще никак: она не зумится «растягиванием» пальцами. Можно попробовать открыть ее по URL в отдельной вкладке — это если браузер это позволит, а сама картинка масштабирована средствами CSS (на стороне клиента), а не средствами ПО на стороне сервера. Оно, конечно, хорошо, что все «отзывчивое», только десктопная версия сайта хотя бы зумить пальцами позволяет, а мобильная — нет, она сама умнее юзера, вот беда! «Спасибо», так и хочется сказать после этого дизайнерам, и быстренько переключиться на не-мобильную версию сайта. Это, конечно, если версия такая есть.
Я к тому, что надо шаблоны делать под задачи, а не просто «чтобы влезало и не сильно ломало глаза».
И еще, заметим, не только про картинки надо думать. На страницах бывают и видео (которое дурацкие «отзывчивые» шаблоны общего назначения обычно тупо масштабируют до 100% ширины страницы, и всякие CSS-штуки, которые — в общем, после дизайнеров и верстальщиков обязательно проверяем работу конкретного сайта с реальными данными этого же сайта.
«Катастрофа 2» — вот с чем боролись, то и создает проблемы потом. Скажем, есть сайт (тот же хабр), у которого есть специально созданный шаблон под мобильники. Текст в нем пальцами уже не помасштабируешь, «как дизайнер сказал, так и живите» (считается, что дизайнеру лучше видно/понятно, как на всех устройствах мира и для всех глаза мира сайт должен выглядеть). И в шаблоне неким образом сказано, что картинки вписываются в экран по ширине.
Для фотографий котиков (и прочих «фото для привлечения внимания») подход работает. А потом кто-то делает пост, где изображение содержит, скажем, схему сети (много бирюзовых квадратиков, линий между ними и буковок подписей) — скажем, вот пост про сети: m.habrahabr.ru/post/216215. Вы уже поняли, как она выглядит в нашем «волшебном» мобильном шаблоне? Да-да, она тупо не читаема, но при этом ее не рассмотреть вообще никак: она не зумится «растягиванием» пальцами. Можно попробовать открыть ее по URL в отдельной вкладке — это если браузер это позволит, а сама картинка масштабирована средствами CSS (на стороне клиента), а не средствами ПО на стороне сервера. Оно, конечно, хорошо, что все «отзывчивое», только десктопная версия сайта хотя бы зумить пальцами позволяет, а мобильная — нет, она сама умнее юзера, вот беда! «Спасибо», так и хочется сказать после этого дизайнерам, и быстренько переключиться на не-мобильную версию сайта. Это, конечно, если версия такая есть.
Я к тому, что надо шаблоны делать под задачи, а не просто «чтобы влезало и не сильно ломало глаза».
И еще, заметим, не только про картинки надо думать. На страницах бывают и видео (которое дурацкие «отзывчивые» шаблоны общего назначения обычно тупо масштабируют до 100% ширины страницы, и всякие CSS-штуки, которые — в общем, после дизайнеров и верстальщиков обязательно проверяем работу конкретного сайта с реальными данными этого же сайта.
Sign up to leave a comment.
3 катастрофы отзывчивого дизайна и как их избежать