Зум шрифта и верстка

    До того как у меня появился монитор 23 дюйма, я практически не использовал зум нигде. Родное разрешение идеально подходило для восприятия любых текстов. Мониторы тех, кто подготавливал контент и их читателей — примерно совпадали. Поэтому, если у читателя не было проблем со зрением, то он почти всегда получал хорошо оптимизированый под свое разрешение размер шрифта. В последнее время большие мониторы существенно подешевели и повсеместно распространились широкоформатники, что привело к некоторым неудобствам с сайтами, оптимизированных на поддержку малых разрешений.



    Я использую разрешение 2048х1152 (родное для моего монитора) и это приводит к необходимости пользоваться зумом практически для любых страниц. У меня нет проблем со зрением, но когда я читаю длинную статью, я хочу делать с максимальным комфортом. У меня расстояние до монитора порядка 1-го метра. Откинувшись в кресло, расстояние увеличивается где-то до 1,5 м. Я пробовал менять DPI монитора, включал большой шрифт как дефолтовый для страниц и/или системы, но все это приводит к разным неудобствам. В итоге, я остановился на выставлении зума для вэб-страниц, благо ФФ запоминает выставленный зум для домена.

    Вы тестируете верстку при разном зуме?


    По мере его использования, я столкнулся с тем, что мало кто из верстальщиков тестирует свои странички на увеличенном зуме. Верстальщики очень старательно оптимизируют сайт для «ископаемых» разрешений экрана, но совершенно не думают о том, как будет смотреться их верстка на больших экранах. Если верстка резиновая, то проблемы практически нет: можно выставить гигантский шрифт и он распределится по всему экрану. Но, для страниц со статической шириной, владелец широкоформатника вынужден смирится с тем, что 50% экрана занято фоном, а текст, то ради чего и пришел посетитель — скукожен где-то в центре. Причем зум не облегчает ситуацию, а скорее усугубляет: шрифт становится больше, но при такой же ширине колонки его влезает на строку меньше. Текст становится крупнее, но напоминает чтение с какого-то длинного рулона.

    Особенно это актуально для информационных изданий, которые практикуют три колонки: две по краям для новостей, меню, баннеров и прочего мусора и одну центральную. Казалось бы для таких сайтов самое главное текст и верстальщик должен думать в первую очередь о нем и удобстве восприятия. Но почему-то, верстальщик озабочен только проблемами тех, у кого разрешение экрана 800х600: для них сайт будет идеален. Он впишется целиком в экран и размер шрифта будет максимально комфортен. Но о том, что на большом разрешении, сайт будет выглядеть как чек из супермаркета, без возможности исправить хоть что-то даже зумом — почему-то многие не задумывается. Некоторые издания делают такую верстку, но при этом она правильно реагирует на зум: вытягивается по ширине (то есть ведет себя почти как резиновая). Но в большинстве случаев, ширина страницы не меняется.

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

    Блочная верстка


    В последнее время верстка на дивах занимает лидирующее положение. При всех ее преимуществах, она более чувствительна к зуму, о чем также многие забывают. В этом плане такой контейнер как столбец таблицы ведет себя более предсказуемо: он просто растягивается в ширину и/или высоту. С дивами же можно ожидать чего угодно: наплыва текста друг на друга, съезд колонок значительно в сторону от заголовков, вылезание текста из рамок и т.д. Выглядит это уже совершенно нечитабельно. Я не агитирую за табличную верстку и не разжигаю холивар, я просто хочу обратится к верстальщикам: тестируйте свою верстку в зуме! Закончили верстку? Нажмите пару раз «Ctrl +» и посмотрите не едет ли у вас что-то. Мало ли на каком зуме будут смотреть вашу страницу: может кто-то будет лежать на диване и листать ее пультом. Ниже на скриншотах типичные проблемы зума в блочной верстке (картинки кликабельны)

    image

    Съехавшая кнопка «Найти» ничто, по сравнению с колонкой «Последние статьи раздела»: в ней видны только отдельный буквы. До зума — ее ширина была равна ширине заголовка. И как видите по размерам картинки — шире 1000 пикселей страницу сделать нельзя, поэтому на моеме рзрешении, ровно 50% экрана занято пустотой.

    image

    Таже проблема, колонка «В этот день» позволяет разобрать ровно по одной букве в каждой строке. Колонка «Кино» практически выдержала зум, из нее пропало всего несколько букв.

    image

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

    image

    Гугл, великий и ужасный, гуру вэб-приложений и интерфейсов тоже не думает о зуме. На скриншоте видно, что при небольшом зуме — текст уплывает вправо и его невозможно читать. Изменить ширину листа нельзя. Имеем пустые пространства и невозможность сделать размер шрифта более комфортным. Учитывая что это приложение для документов (то есть чтение, тут вообще самое главное) считаю это громадным минусом.

    image

    А вот и любимый хабр :) Правда это рекламная страница партнера. Вполне вероятно что и верстку делали те, кто разместил информацию. Как видим часть текста наплывает, а текст в серых блоках — безвозвратно скрывается под нижней границей.

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

    Бороться с этим сейчас намного проще, благодаря плагинам и онлайновым решениям, форматирующим контент в удобном виде. Однако, хотелось бы, чтобы все таки верстальщики обратили внимание на тех, у кого большие мониторы. Нам надоело читать «портянку» в центре экрана :) Сделайте нам хоть кнопки для оптимизации под широкоформатник или, хотя бы, уберите косяки при зуме.

    UPD: В топике идет речь об увеличении размеров шрифта (в установках стоит «увеличивать только текст») а не о зуме всех элементов.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 134

      +4
      Не для «ископаемых» разрешений, а скорее мобильных
        +2
        Для мобильных устройств — хороший тон сделать отдельную версию (например, в поддомене m.domen.ru) и оставить на ней только действительно важную инфу и навигацию. Я же не говорю в топике что поддержка малых разрешений это зло. Я говорю о том, что и больших неплохо подумать.
          +3
          «Мобильные устройства» тоже бывают разными. От нетбука до телефона с разрешением 176х144, например.
            +1
            Именно поэтому я упомянул в топике что универсальным решением — было бы наличие выбора шаблона для разных экранов. Помните, когда были проблемы с разными кодировками, на сайтах можно было выбирать в какой кодировке отображать. Было бы неплохо также сделать и для разных разрешений
              0
              > Именно поэтому я упомянул в топике что универсальным решением — было бы наличие выбора шаблона для разных экранов

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

              А вообще, как мне видится, топик ниочемка. Сейчас зум в передовых браузерах масштабируется не только шрифт, а вообще все элементы.
          • UFO just landed and posted this here
              0
              Широкоформатный экран слишком близко — тоже не очень удобно. Не говоря уже о том, что тогда теряется пространство на столе. Браузер в полэкрана — ну вместо полос по бокам будет содержимое декстопа, это не решает проблему более эффективного использования экрана при просмотре страниц
              • UFO just landed and posted this here
                  +1
                  Да причем тут выгорание? Занять всю площадь — значит меньше скролить, больше использовать пространство. Разместить два браузера? И читать одновременно два источника? Вы неправильно меня поняли: мне не мешает пустое пространство. Но я хотел бы его использовать по ширине также, как и по высоте. Для того сайта, который я в данный момент читаю
                  • UFO just landed and posted this here
                      +2
                      Скроллить придется меньше, если текст занимает экран по ширине, а не только в узкой колонке в центре
                        0
                        Это очень плохое решение. Вот возьмите книгу раскройте ее и подумайте почему в вебе делают ка в книге?
                          +2
                          Вы не поняли суть топика. Что значит «почему в вэбе делают так»? Кто делает? Некоторые верстальщики делают все правильно. Некоторые делают только с расчетом на малое разрешение. В книге — как раз все правильно: поля в среднем занимают 10% пространства листа.
                            +4
                            Некоторые это какие? Вы вот откройте mail.ru, google.ru, yandex.ru да тот же habr.ru и внимааательно посмотрите как они сделаны. Вы обнаружите фиксированную колонку как правило расположенную по середине и на FullHD занимающую 50% экрана. Почему делается так? Потому что это ровно один лист A4 и количество знаков совпадает с количеством знаков на странице книги. Большинству людей неудобно когда текст занимает весь широкоформатный экран, строчки слишком длинные получаются.
                              0
                              Так пусть бы на худой конец эта колонка была фиксирована по ширине в символах, то есть в em-ах, а не в пикселях.
                                0
                                Не получится. Пикселей в каждом шрифте по разному так что ну никак. Да и не надо.
                                  0
                                  Так в чём проблема, если ширину в em-ах фиксировать, а не в px? Тогда можно получить ширину текста в символах, соответствующую книжной, независимо от гарнитуры и масштабирования шрифта.
                                    0
                                    в том что тахома к примеру и вердана имеют разную ширину букв. Как результат в зависимости от шрифта плавать будет туда сюда. А прибить чтобы вот только этим шрифтом вы не можете, потому что у пользователя шрифта может не оказаться. Да и смысл то какой? Нормальные браузеры давно масштабируют весь сайт, а не текст там.
                      +9
                      Товарищ смените браузер. К примеру chrome масштабирует не только шрифт, но и страницу целиком. Как результат увеличивается не только шрифт, но и сама колонка.
                        0
                        Да, опера тоже так умеет. У Оперы есть еще такая опция как «подогнать страницу под ширину экрана». А еще есть плагины для решения подобных проблем. Речь не об этом
                          +1
                          А о чем? О том что вестальщики собаки злые стали делать фиксированную колонку?
                            0
                            Согласен! Тоже не вижу особой проблемы. Да и главное — ну будет растянут шрифт на 100% по ширине экрана. Глазами задолбаешься бегать из одного угла в другой. Именно поэтому фиксированные сайты удобнее — проще читать. А если надо читать с растояния — увеличь весь сайт и читай на здоровье. Увеличивать отдельно шрифт, оставляя изображения исходного размера — изврат какой-то, ей Богу :)
                        +3
                        Поверните монитор на 90˚
                          0
                          Это реальный выход. В портретной ориентации эта колонка комментариев гораздо удобнее читается.
                        0
                        Два браузера — это очень неудобно. А использовать всю площадь экрана хочется, когда нужно минимизировать обращения к интерфейсу. Так бывает.
                    0
                    Судя по минусам этого коммента, считаете что не нужно делать версию для разных устройств?
                      0
                      Я не минусовал (даже если хотел бы — ссылка в миниопере не работает), но скажу — да, не нужно. Вот взять поисковики. В мобильных версиях нет кнопки «копия» для просмотра кеша. Или, еще более тупо, нет ссылки«просмотр в виде хтмл», как будто я буду пдф или doc качать. Так было, иногда бывают подвижки в лучшую сторону — например, через много лет яндекс добавил «поиск в google» в мобильной версии, но в основном функционал обрезан неожиданно, потому что обрезатель юзер статичноофисный и ездит на работу на машине, и не представляет, что древних телефонов можно сидеть полноценно, а не только проверять почту и читать бор. В итоге приходится искать ссылку на полную версию хз где, возвращаться назад, ища нужную строку поиска на мелком экранчике. Сэкономили мне килобайт безлимитного трафика, ага, заставили качать две страницы вместо одной. Проблема в том, что кастратор не знает, что нужно конкретному мобильному пользователю.
                      И так на каждом сайте — привыкай к новому дизайну привычного сайта, хотя бы ради поиска кнопки полной версии (и в каждом втором случае обрезанного функционала почему-то не хватает — не просто так он на полной версии есть).
                      Вот в опере поняли правильный подход, зум+подгон колонок по ширине, и все, хоть страница перегружена баннерами, если она совместима с оперой мини, это мешать не будет — не будет этого на экранчике.
                  +16
                  > По мере его использования, я столкнулся с тем, что мало кто из верстальщиков тестирует свои странички на увеличенном зуме.
                  Со своей стороны я бы хотел обратиться по этому поводу к разработчикам браузеров. Если это зум, то извините, какого хрена в нём всё расползается? Почему блоки ведут себя самым странным образом то увеличиваясь не пропорционально в размерах, то бекграунд преображается и прочих непонятных вещах там где масштаб должен просто увеличиваться или уменьшаться.
                  По большей части это относится к ИЕ до 8, там вообще что-то инфернальное творится. В то время как идеал зума — Опера, где вообще проблем не наблюдалось.
                    –3
                    Согласен, разработчики браузеров могли бы кардинально изменить ситуацию. Но одна из задач верстки как раз и заключается в том, чтобы устранять недостатки браузеров, добиваясь корректного отображения в любых условиях
                      0
                      Не понимаю, почему этот комментарий минусуют.
                      Поятное дело, что правильный вариант решения проблемы — нормальная (и стандартная) реализация зуммирования в браузерах. И разработчиков браузеров нужно просить и пинать, пока проблема не будет решена.
                      Но до тех пор, пока зуммирование работает везде по-разному и коряво, задача по оптимизации верстки все равно ложится на плечи верстальщиков.
                        +2
                        > Поятное дело, что правильный вариант решения проблемы — нормальная (и стандартная) реализация зуммирования в браузерах.
                        Она и так нормальная и стандартная во всех браузерах. Пинать нужно arkady, за то что называет изменение размеров шрифта зумом страницы.
                          0
                          Это минусовали представители IE, Firefox и Opera.
                        +1
                        На Ipad еще очень классный зум, любой сайт на всю ширину экрана, все пропорционально сжато или растянуто. Никаких искажений, наплывов или чего бы то нибыло.

                        А вообще да, это проблема исключительно браузеров, кривой реализации. Сделали бы хороший зум и не было бы такой проблемы как разрешение экрана при верстке.
                          +3
                          Судя по всему, автор использовал текстовый зум, при котором увеличивается только размер текста. По-крайней мере у меня при обычном зуме ФФ нормально масштабирует сайты с фиксированной шириной колонок.
                            0
                            Именно так
                              +1
                              Так называйте вещи своими именами. Я до самого конца поста не мог понять, что у вас там куда наплывает, если при зуме все должно равномерно увеличиваться.
                                0
                                И тем более, глупо наезжать на разработчиков, что они не продумали, как будет выглядеть их сайт при другом шрифте. Мб еще всю графику поменять и сетовать, что сайт некрасив?
                                  0
                                  А вот это спорно. Зачем, спрашивается, в настройках браузера указывается размеры и названия шрифтов? Мне казалось, чтобы пользователь их настроил один раз и видел как ему удобно, а верстальщик пускай оперирует типом и относительным размером.
                                    0
                                    Это указывается для страниц, в которых не прописан дефолтный шрифт. Потом, в браузере можно открывать не только html, а, к примеру, txt. К тому же, в опере эти настройки распространяются на почту, rss и всякие чаты. Глупо, чтобы верстальщик использовал какие-то мифические, неизвестные ему настройки юзера и пытался при этом добиться не только кроссбраузерности, но и вообще более-менее вменяемого отображения на всевозможных вариациях.
                                  0
                                  Уже подправил заголовок и внес уточнение в конец топика
                                    0
                                    Когда исправите остальное?
                            +6
                            Хорошая агитация в сторону верстки «настоящей резины». То есть той, где резиновыми являются основные содержательные элементы — шрифт в относительных величинах, сетка в процентах.

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

                            Если отказаться от обильного использования графики, задача резко упрощается с точки зрения гибкости ресайза, и вики — яркий тому пример.

                            Вообще, с массовым приходом широкоформатников, ситуации с «распространенным» разрешением скорее всего скоро не станет. И для качественной кросс-форматной реализации нужны новые подходы к верстке макета.
                            • UFO just landed and posted this here
                                0
                                Случиться-то оно может, а вот приобрести массовый характер — может и не случиться еще долго, а зумить приходится уже сейчас.
                              0
                              Может глупо, да и не решение а приспособление, но если уменьшить разрешение, оно всё равно вам не нужно на таком расстоянии от монитора.
                              Минусов может быть больше чем полюсов.
                                  +18
                                  А мне наоборот именно на широкоформатном мониторе стали действовать на нервы «резиновые» сайты. Читая текст, приходится крутить башкой постоянно. Аккуратная колоночка текста посередине намного удобнее. Сайты, сверстанные жёстко под 1024 (970-990 ширина) — самые удобные для восприятия.
                                    +2
                                    Это легко исправить, просто уменьшив окно. Я говорю немного про другое: когда колонка текста при зуме сжимается настолько, что в нее помещается несколько слов и она жутко растет по высоте. Поля, конечно необходимы, но не настолько же. К слову, хабр выглядит нормально, тут зум не дает никаких проблем.
                                      +2
                                      Это легко исправить, просто уменьшив окно.

                                      Ага и большинство людей этого не делает.
                                        0
                                        К чему это, поясните?
                                          0
                                          К тому что большинство людей смотрит браузер раскрытым на весь экран. В случае резинового дизайна и широкоформатного монитора это приводит к расползанию текста по всему экрану. Обратите внимание, что на хабре тоже сделана колонка по центру с фиксированной шириной и еще много где сделано так же. И связано это как раз появлением большого числа широкоформатных мониторов.
                                            –1
                                            Как увеличение мониторов, так и фиксированные по ширине дизайны делают бессмысленным раскрывать браузер на весь экран. Какой смысл его раскрывать, если больше, как ни бейся, не увидишь? Так что люди отучатся так делать.
                                              0
                                              Это удобно только если использовать тайловый менеджер окон. А так придется совершать гораздо больше действий, чтобы удобным образом расположить окна.
                                                +1
                                                Не отучатся. Потому что вручную делать каждый раз утомительно.
                                                  0
                                                  Зачем «каждый раз»? У меня, например, с утра браузер открывается примерно на 1150×930 при разрешении 1280×1024 и я его ещё не ресайзил, хотя уже кучу дел переделал. От этого только проще было переключаться в почтовый агент, Photoshop и MSO Excel.
                                                    0
                                                    Еще раз спрашиваю, кому из пользователей это надо? Типичное действо пользователя открыть браузер и тыкнуть кнопку чтобы он на весь экран открылся и таких большинство их не интересует как там правильно надо открыть браузер чтобы было удобнее читать.
                                                      0
                                                      Ещё раз отвечаю: с распространением больших мониторов эта привычка отомрёт.
                                                        0
                                                        До сих пор не отмерла хотят широкоформатников уже много. И пока не будет переделан механизм разворачивания окна для браузера ничего не изменится.
                                                          0
                                                          У меня лично отмерла: и я не думаю, что прямо уж все пользователи настолько тупее меня.
                                                            0
                                                            Вы не поверите, но настолько.
                                                              0
                                                              Хм, эту ветку спора, по-моему, стоит завершить. Ибо я вовсе не имел в виду отстаивать колонки 100%-ной ширины. Хотя я бы приветствовал средство, которым пользователь мог бы придавать им такую ширину при необходимости.
                                                                0
                                                                есть пачка css styler'ов. Там задать проблемы нет, но вот для большинства стоит прибивать ширину.
                                                  +4
                                                  Раскрывают окно программы на весь экран не только для увеличения количества отображаемой информации, но и для фокусировки своего внимания.
                                                    +1
                                                    Вот вертелось на языке это определение, «для фокусировки внимания», а вы его озвучили, спасибо :) Я лично всегда разворачиваю браузер на полный экран и изменяю размер его окна только когда надо протестировать поведение резины.
                                                • UFO just landed and posted this here
                                                    0
                                                    Это зависит от того на каком расстоянии от экрана. Большее значение имеют угловые размеры, чем физические.
                                                      0
                                                      А у вас есть кнопка развернуть окно на половину экрана? Вот в Mac OS X есть там так браузер разворачивается по умолчанию, в KDE такое поведение для окон можно настроить, но по умолчанию в Windows и DE на *nix кнопка разворачивает на весь экран и среднестатистический пользователь не будет сам крутить окно чтобы вот стало хорошо. Он нажмет кнопку развернуть на весь экран. Ну и да у большинства пользователей разрешения от 1024 до 1378, все что выше встречается существенно реже. Из-за этого разработчики на своих больших мониторах делают фиксированную полосу которая может плавать от 1000 пикселей до 1300 к примеру.
                                                        0
                                                        Покажите мне кнопку «развернуть окно на половину экрана» в Mac OS X!
                                                        У меня такой же монитор, как у автора, и после Windows, которая умеет разворачивать окна на половину экрана, я установил в Mac OS X специальную утилиту для получения этой функциональности.
                                                        Но родной кнопки там нет.
                                                          0
                                                          Safari откройте потом щелкните в обычную кнопку развернуть окно. И посмотрите что произойдет.
                                              +1
                                              Это провал верстальщиков. Всегда стоит ограничивать «резиновость» определённых колонок свойствами min-width и max-width, тогда и не будет таких проблем.
                                              –1
                                              Сайт должен подстраиваться под окружения зрителя/пользователя существующие технологии позволяют это в полной мере, версии под каждое устройство или разрешение на данный момент вторичны. Главное чтобы заходя на ресурс, используя приложения пользователь чувствовал себя комфортно. Флюид шаблоны подстраиваются под окружения увеличивая либо уменьшая и сменяя акценты в шаблоне под окружение пользователя. То что сейчас очень мало создается сайтов/ресурсов не для Заказчика а для посетителя/пользователя проблема рынка и разработчика.
                                                0
                                                использую ireader в особо сложных случаях
                                                  0
                                                  Ага, об этом я упоминал в топике
                                                    0
                                                    сори, пропустила…
                                                  +16
                                                  arkady, а вас нисколько не смущает что вы увеличение размера шрифта называете зумом?
                                                    +11
                                                    Я к тому, что при зуме страницы проблем не возникает. Чтобы убедится в этом, нажмите в фаерфоксе alt, выберите в меню View подменю Zoom и уберите галочку Zoom text only.

                                                    Вся паника, которую вы разводите, не имеет ничего общего с действительностью. Проблемы возникают от того, что вы меняете размер одного элемента (текста), не меняя размер других (сетка, картинки).
                                                      –12
                                                      Дело в том, что увеличение картинок мне не нужно (они выглядят страшненько при этом). Где вы увидели панику? Я говорю о том, что верстальщики не тестируют свои страницы на зуме, в особенности, это касается блочной верстки, где все плывет. Я почти всегда пользуюсь readability и никакой паники нет.
                                                        +11
                                                        > верстальщики не тестируют свои страницы на зуме
                                                        То что вы продемонстрировали — это не зум. При зуме все ок.

                                                        Вы можете отключить css и жаловаться, что верстальщики не тестируют свои сайты при отключенном css, или запретить у всех элементов border и жаловаться, что верстальщики бла бла бла когда запрещены бордеры. Вы уверены, что это справедливые претензии?
                                                          –10
                                                          Ок, не зум, а «увеличение размера шрифта на странице». Вроде бы ясно что речь об этом, я просто использовал более краткий термин :) Еще раз повторю что нет ни паники, ни жалоб, ни претензий вообщем-то. Есть пожелания к верстальщикам. Отключение css это удаление элементов из кода страницы, а увеличение шрфта его не меняет и думаю посетитель вправе ожидать что страница, как минимум не развалится. Я именно для этого и привел примеры: у многих в блочной верстке нет проблем при увеличении шрифта, а у некоторых — они имеют тяжелые последствия.
                                                            +12
                                                            > Вроде бы ясно что речь об этом, я просто использовал более краткий термин
                                                            Это не более краткий термин, это совсем другое.

                                                            Почему вы ожидаете, что если измените css-свойство font-size, то страница не должна разваливаться, но не требуете того же, скажем, при изменении всех position: relative на position: fixed?
                                                              +1
                                                              > Ок, не зум, а «увеличение размера шрифта на странице».
                                                              Исправьте, пожалуйста, эту ошибку в топике.
                                                      0
                                                      топик больше в раздел QA
                                                      для чтения берите сафари
                                                      –8
                                                      Надо будет сказать своим знакомым дизайнерам, которые не всегда читают хабр
                                                        +8
                                                        не тратте их время на эту муру
                                                        0
                                                        наиболее современным решением является вот что http://cssgrid.net/

                                                        решение очень классное, направленное на разные разрешения (в тч ipad). А так же в некоторых кругах дизайнерских ведутся дискуссии о том, что 960 мертв, или почти.

                                                        Так что 1140 вам в руки

                                                          0
                                                          Черти что. При уменьшении размера окна, например, исчезает кнопка Download. Чрезвычайно юзабельно.
                                                            0
                                                            как, интересно, ВЫ так уменьшали. НИче никуда не исчезает.
                                                            Разве что проблема в браузере Вашем…
                                                              0
                                                                –1
                                                                11 значит с лагами. бывает. думаю, исправят
                                                                  +1
                                                                  в 10ом тоже самое было
                                                              0
                                                              Просто пример не очень удачный. Вот получше: lessframework.com/
                                                            +2
                                                            Люди, работающие за большими мониторами(разрабочики, дизайнеры), обычно, нуждаются в большем пространстве увлечение размера шрифта съедает много полезного пространства, а при удалении монитора на метр и более сильно напрягает зрение, при среднем размере шрифта 14px строчки длиной > 1000px сильно затрудняют чтение, слевательно резиновая верстка зло на широком экране.

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

                                                            Любетелям отдалить монитор стоит использовать зум, а не изменение размера шрифта.
                                                              +2
                                                              Увеличивайте масштаб всей страницы, а не только размер текста и будет вам счастье.
                                                                +8
                                                                Я верстаю иногда.

                                                                Во-первых, зум бывает 2 видов (точнее, 3): когда масштабируются все элементы, отступы, растровые картинки увеличиваются (с потерей качества, само собой). Этот режим в Опере, Хроме и ФФ (но в нем он отключаемый). Там обычно все сайты масштабируются нормально, разве что спрайтовые картинки могут слегка ломаться из-за округления отсупов до целого числа пикселей.

                                                                Есть второй вид зума — увеличивается базовый размер шрифта. Такой режим в ИЕ6 и в ФФ, если включить там Increase text Size. В теории, CSS и HTML должны позволять создавать страницы, которые можно как угодно увеличивать и уменьшать (хахаха), в реальности это не работает. CSS один из самых кривых, запутанных, плохо реализованных и недоработанных стандартов, что я видел. Банальный пример — какая-нибудь кнопка или рамка у заголовка, чтобы сделать ее растягиваемой вместе с шрифтом, надо много дополнительных элементов (лишний труд, нарезка спрайтов и возня с отладкой). Указаывать размеры и отсутпы в em — fail, так как например те же картинки и декоративные элементы при этом не масштабируются, я пробовал так делать, получается ерунда. Плюс, удвоенная сложность, например как задать на html min-width одновременно и в пикселях, и в em? Никак, по крайней мере без явскрипта. Плюс, в CSS множество костылей и хаков, которые при таком масштабировании страницы развалятся.

                                                                Я обычно для таких браузеров оставляю запас, чтобы до процентов 120 можно было увеличить, а дальше это уже не мои проблемы.

                                                                Если у вас сайт сложнее, чем текст с заголовками в 1 колонку, вы потратите кучу времени, все равно будут баги, и ради чего? ради одного хабраюзера, который даже неспособен разобраться в механизмах работы зума в браузере? Или поставить себе Оперу? Сударь, давайте вы тогда будете оплачивать эту работу верстальщикам посещаемых вами сайтов отдельно?

                                                                А, еще есть 3-й вид зума, в ИЕ7. Вроде, как в рекламе было написано что он революционный и все такое. Он действительно революционный. Он увеличивает шрифты и часть отступов, а часть не увеличивает по никому, кроме майкрософтовцев, не понятной логике. Любой дизайн сложнее текста в 1 колонку при этом превращается в кашу. Включая официальный сайт майкрософт. Понятия не имею, верстает ли в мире хоть один человек с учетом зума в ИЕ7.

                                                                  0
                                                                  Как же я вам, как «иногда верстальщику» сочувствую.
                                                                  +1
                                                                  Хром 11

                                                                  В ФФ4 примерно такая же картинка, зумится все и равномерно, никакой проблемы с фиксированными сайтами не наблюдаю.
                                                                    0
                                                                    Ай, картинка потерялась

                                                                    habreffect.ru/files/9b3/d04c87a41/ugib.png
                                                                    0
                                                                    Проблема в том, что если дозумить до того, чтобы текст по ширине занял весь экран, кегль становится слишком большим. Если фиксированная колонка слишком узкая. А если фиксированая колонка не слишком узкая, то всё отлично… до очередного апгрейда монитора, а там — как повезёт.
                                                                    0
                                                                    Мне кажется проблема сильно преувеличена, большинство пользователей не знаю о зуме и о хоткеях: Ctrl + <+>, Ctrl + <-> и Ctrl + <0>.
                                                                      0
                                                                      Не скажу, что проблема абсолютно надумана, но вот удобного даже чисто для себя универсального варианта в рамках HTML4/CSS2 «на дивах» без JS и отдельных версий страницы найти не смог. У меня четыре юзкейса:
                                                                      — «активный» серфинг за столом: хочется отображения основного контента высотой 14-16px в 50-70% в центре при разрешениях ~2000 по горизонтали, навигация и прочие сайдбары занимают остальное пространство (можно ещё с полями, можно без, почти без разницы), то есть чтобы читать основной контент или делать комменты я мог не вертя головой.
                                                                      — «пассивный» серфинг, а скорее чтение, на диване: масштаб ~300%, основной контент занимает всю ширину экрана, чтоб увидеть сайдбары нужно скролить по горизонтали, в идеале левый и правый вылезают вправо вверх без мозгодробящих переносов по одной букве или отрезанию больше одной буквы
                                                                      — «активный» серфинг на планшете (800x480)
                                                                      — «пассивный» (чтение) на нём же
                                                                        0
                                                                        UPD: В топике идет речь об увеличении размеров шрифта (в установках стоит «увеличивать только текст») а не о зуме всех элементов.


                                                                        Вот вы сами и выяснили, в чём проблема :)
                                                                          0
                                                                          Кстати, на сайте сами знаего кого используются дефолтные шрифты — это, наверное, единственный сайт, который позволяет пользователю выбрать любимый шрифт для чтения текста.
                                                                          Остальные дезайнеры считают, что они лучше знают, чего хочет видеть читатель, и жёстко прописывают шрифты.

                                                                            0
                                                                            …Я вот думаю, что наилучшим вариантом было бы фиксировать ширину колонки в em-ах плюс давать пользователю возможность растянуть колонку, если ему это вдруг потребуется. Вот это было бы гуманно.
                                                                              0
                                                                              Фиксировать колонку em-ах достаточно глупое занятие. Они не привязаны к пикселям монитора. Поменялся DPI поменялся размер em.
                                                                                0
                                                                                Увеличится размер шрифта и вместе с ним растянется сайдбар, вместо выползания и переносов после каждого слова.
                                                                                  0
                                                                                  И графические элементы тоже? :)
                                                                                    0
                                                                                    Для картинок вообще не надо задавать размер, а бекграунды правильно центровать и задавать цвет.
                                                                                      0
                                                                                      Картинки вообще сами имеют размеры. Или вы везде предлагаете делать бекграундом и их? :)
                                                                                      0
                                                                                      И графические элементы тоже — если их в SVG делать. Не вижу принципиальной проблемы. Наборы SVG-иконок, например, существуют.
                                                                                        0
                                                                                        SVG не em считаются. Как будем растягивать?
                                                                                          0
                                                                                          Элементарно. На 100 % HTML-контейнера, куда их кидаем, например, div. А тому — размеры в em.
                                                                                            +2
                                                                                            Ну вот попробуйте так сделать и посмотреть что у вас получится в каждом из браузеров ;)
                                                                                              0
                                                                                              Так я так делал, только что не в em указывал размер, а в процентах. В каком браузере Вы ожидаете проблем с этим?
                                                                                                0
                                                                                                А теперь в em :)
                                                                                                  0
                                                                                                  А теперь в em. Firefox 3+, Opera 9+, Google Chrome 11, Safari 5, IE 8 — не вижу никаких проблем. Скажите, наконец, прямо, что Вам не нравится.
                                                                                                    0
                                                                                                    не нравится привязка к шрифту который может плавать в разных ОС и в случае разных DPI
                                                                                                      0
                                                                                                      Так ведь к шрифту привязываться — самое логичное. Потому что пользователи его подстраивают под себя. К чему же ещё привязываться? К пикселям? Так они в первую очередь и зависят от DPI. К физическим миллиметрам? Они по разному воспринимаются пользователями с разным зрением и расстоянием до экрана. Что с того, что шрифт «плавает»? И пусть себе плавает.
                                                                                                        0
                                                                                                        Я считаю сейчас лучше привязываться к пикселям именно из-за текущих разрешений.
                                                                                                          0
                                                                                                          Что значит «сейчас»? Сайты-то делаются не на «сейчас», а на некоторую, обычно неопределённую, перспективу. Разрешения будут меняться — и что тогда, переделывать всю старую работу?
                                                                                                            0
                                                                                                            Я сильно сомневаюсь что в течении 3-5 лет появятся новые мониторы с существенно большим разрешением. Это среднее время жизни сайта.
                                                                                                              0
                                                                                                              С одной стороны, существенно большего не требуется. 20—30 % уже ощутимы.

                                                                                                              С другой стороны, я предпочитаю более долговечные сайты.
                                                                                    0
                                                                                    И не надо привязываться к пикселям монитора. Зато постоянным будет число символов в строке.
                                                                                      0
                                                                                      Пока у мониторов не будет DPI больше 200 можно про это и не заикаться.
                                                                                        0
                                                                                        Во-первых, почему?

                                                                                        Во-вторых, будет же, и в обозримом будущем.
                                                                                          0
                                                                                          потому что это то DPI где уже плюс-минус пиксель не будут так заметны как сейчас. Больших пока нет, как и нет устоявшегося стандарта на такие разрешения.
                                                                                            0
                                                                                            Да откуда возьмётся этот плюс-минус пиксель?
                                                                                              0
                                                                                              От em и возьмется. Другой шрифт другая ширина em
                                                                                                0
                                                                                                Ну и что? В пикселях — пусть будет другая.
                                                                                  0
                                                                                  «когда я читаю длинную статью, я хочу делать с максимальным комфортом»
                                                                                  Используйте расширения-ридеры для браузеров (iReader для Chrome, встроенный в Safari и т.д. — комфорт будет куда большим, чем при любом зуме.
                                                                                    +1
                                                                                    В топике идет речь об увеличении размеров шрифта (в установках стоит «увеличивать только текст») а не о зуме всех элементов.

                                                                                    Вот и снимите эту настройку. Все браузеры уже несколько лет умеют зумить всю страницу пропорционально, и крайне редко что-то плывёт. IE6, да, не умеет, я дла него и FF2 в своё время всё на em верстал, чтобы добиться пропорционального увеличения всей страницы.
                                                                                      0
                                                                                      Считаю что сегодня нужно дизайнить и верстать с подходом: три верстки, компьюреты(настольные и лэптопы), мобильные и планшеты.

                                                                                      Определение на серверсайд юзерагента и потом выдача проекта с нужной версткой… и проблема будет решена. Вопрос только в том, что платить за такую работу(и дизайн и верстка) готовых аж 100500! А потом мы получаем интернет в таких вот красивостях. Ну это не считая косяков, когда высота блока 48px а размеры шрифта относительные… вот и получим уродство на некоторых разрешениях.
                                                                                        0
                                                                                        Я хоть и новичёк, но тоже сталкивался с минусами блочной вёрстки и в этом полностью согласен с автором. Понравились наглядные примеры респект.

                                                                                        Only users with full accounts can post comments. Log in, please.