Бороться с этим сейчас намного проще, благодаря плагинам и , форматирующим контент в удобном виде. Однако, хотелось бы, чтобы все таки верстальщики обратили внимание на тех, у кого большие мониторы. Нам надоело читать «портянку» в центре экрана :) Сделайте нам хоть кнопки для оптим
Примеров на самом деле больше, просто не всегда вспоминаешь о том, что хотел написать статью о зуме, когда встречаешь такое безобразие. Если вы пользуетесь зумом на страницах, то наверняка встречали такие примеры. Если вам покажется что зум чрезмерно большой вспомните о разнице в разрешении
А вот и любимый хабр :) Правда это рекламная страница партнера. Вполне вероятно что и верстку делали те, кто разместил информацию. Как видим часть текста наплывает, а текст в серых блоках безвозвратно скрывается под нижней границей.
Гугл, великий и ужасный, гуру вэб-приложений и интерфейсов тоже не думает о зуме. На скриншоте видно, что при небольшом зуме текст уплывает вправо и его невозможно читать. Изменить ширину листа нельзя. Имеем пустые пространства и невозможность сделать размер шрифта более комфортным. Учитывая что это приложение для документов (то есть чтение, тут вообще самое главное) считаю это громадным минусом.
К вики вообще никаких претензий. Во-первых, верстка резиновая. Во-вторых, шрифт без засечек (зумить можно меньше). Ничего не плывет, не налезает, все блоки на своих местах. Единственный косяк верхний блок с обращением основателя, текст которого при зуме стал гигантским и полностью залез на заголовок статьи
Таже проблема, колонка «В этот день» позволяет разобрать ровно по одной букве в каждой строке. Колонка «Кино» практически выдержала зум, из нее пропало всего несколько букв.
Съехавшая кнопка «Найти» ничто, по сравнению с колонкой «Последние статьи раздела»: в ней видны только отдельный буквы. До зума ее ширина была равна ширине заголовка. И как видите по размерам картинки шире 1000 пикселей страницу сделать нельзя, поэтому на моеме рзрешении, ровно 50% экрана занято пустотой.
В последнее время верстка на дивах занимает лидирующее положение. При всех ее преимуществах, она более чувствительна к зуму, о чем также многие забывают. В этом плане такой контейнер как столбец таблицы ведет себя более предсказуемо: он просто растягивается в ширину и/или высоту. С дивами же можно ожидать чего угодно: наплыва текста друг на друга, съезд колонок значительно в сторону от заголовков, вылезание текста из рамок и т.д. Выглядит это уже совершенно нечитабельно. Я не агитирую за табличную верстку и не разжигаю холивар, я просто хочу обратится к верстальщикам: тестируйте свою верстку в зуме! Закончили верстку? Нажмите пару раз «Ctrl +» и посмотрите не едет ли у вас что-то. Мало ли на каком зуме будут смотреть вашу страницу: может кто-то будет лежать на диване и листать ее пультом. Ниже на скриншотах типичные проблемы зума в блочной верстке (картинки кликабельны)
По-моему, это очень актуально для сегодняшнего верстальщика. Понятно, что всем не угодишь: малые разрешения тоже нужно поддерживать. Тем более, что есть мобильные устройства, а о существовании поддомена для смартфонов знают далеко не все. Решить проблему можно наличием кнопки или выпадающего списка, с шаблонами для разных разрешений. Ну а автоматический детект разрешения посетителя с выбором соответствующего формление это вообще мечта.
Особенно это актуально для информационных изданий, которые практикуют три колонки: две по краям для новостей, меню, баннеров и прочего мусора и одну центральную. Казалось бы для таких сайтов самое главное текст и верстальщик должен думать в первую очередь о нем и удобстве восприятия. Но почему-то, верстальщик озабочен только проблемами тех, у кого разрешение экрана 800х600: для них сайт будет идеален. Он впишется целиком в экран и размер шрифта будет максимально комфортен. Но о том, что на большом разрешении, сайт будет выглядеть как чек из супермаркета, без возможности исправить хоть что-то даже зумом почему-то многие не задумывается. Некоторые издания делают такую верстку, но при этом она правильно реагирует на зум: вытягивается по ширине (то есть ведет себя почти как резиновая). Но в большинстве случаев, ширина страницы не меняется.
По мере его использования, я столкнулся с тем, что мало кто из верстальщиков тестирует свои странички на увеличенном зуме. Верстальщики очень старательно оптимизируют сайт для «ископаемых» разрешений экрана, но совершенно не думают о том, как будет смотреться их верстка на больших экранах. Если верстка резиновая, то проблемы практически нет: можно выставить гигантский шрифт и он распределится по всему экрану. Но, для страниц со статической шириной, владелец широкоформатника вынужден смирится с тем, что 50% экрана занято фоном, а текст, то ради чего и пришел посетитель скукожен где-то в центре. Причем зум не облегчает ситуацию, а скорее усугубляет: шрифт становится больше, но при такой же ширине колонки его влезает на строку меньше. Текст становится крупнее, но напоминает чтение с какого-то длинного рулона.
Вы тестируете верстку при разном зуме?
Я использую разрешение 2048х1152 (родное для моего монитора) и это приводит к необходимости пользоваться зумом практически для любых страниц. У меня нет проблем со зрением, но когда я читаю длинную статью, я хочу делать с максимальным комфортом. У меня расстояние до монитора порядка 1-го метра. Откинувшись в кресло, расстояние увеличивается где-то до 1,5 м. Я пробовал менять DPI монитора, включал большой шрифт как дефолтовый для страниц и/или системы, но все это приводит к разным неудобствам. В итоге, я остановился на выставлении зума для вэб-страниц, благо ФФ запоминает выставленный зум для домена.
До того как у меня появился монитор 23 дюйма, я практически не использовал зум нигде. Родное разрешение идеально подходило для восприятия любых текстов. Мониторы тех, кто подготавливал контент и их читателей примерно совпадали. Поэтому, если у читателя не было проблем со зрением, то он почти всегда получал хорошо оптимизированый под свое разрешение размер шрифта. В последнее время большие мониторы существенно подешевели и повсеместно распространились широкоформатники, что привело к некоторым неудобствам с сайтами, оптимизированных на поддержку малых разрешений.
Зум шрифта и верстка
Зум шрифта и верстка / Хабрахабр
