Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 134
Не для «ископаемых» разрешений, а скорее мобильных
Для мобильных устройств — хороший тон сделать отдельную версию (например, в поддомене m.domen.ru) и оставить на ней только действительно важную инфу и навигацию. Я же не говорю в топике что поддержка малых разрешений это зло. Я говорю о том, что и больших неплохо подумать.
«Мобильные устройства» тоже бывают разными. От нетбука до телефона с разрешением 176х144, например.
Именно поэтому я упомянул в топике что универсальным решением — было бы наличие выбора шаблона для разных экранов. Помните, когда были проблемы с разными кодировками, на сайтах можно было выбирать в какой кодировке отображать. Было бы неплохо также сделать и для разных разрешений
> Именно поэтому я упомянул в топике что универсальным решением — было бы наличие выбора шаблона для разных экранов
Это не универсальное, это глупое решение. Не нужно перекладывать проблемы веб-технологов на плечи посетителей.
А вообще, как мне видится, топик ниочемка. Сейчас зум в передовых браузерах масштабируется не только шрифт, а вообще все элементы.
Это не универсальное, это глупое решение. Не нужно перекладывать проблемы веб-технологов на плечи посетителей.
А вообще, как мне видится, топик ниочемка. Сейчас зум в передовых браузерах масштабируется не только шрифт, а вообще все элементы.
Широкоформатный экран слишком близко — тоже не очень удобно. Не говоря уже о том, что тогда теряется пространство на столе. Браузер в полэкрана — ну вместо полос по бокам будет содержимое декстопа, это не решает проблему более эффективного использования экрана при просмотре страниц
Да причем тут выгорание? Занять всю площадь — значит меньше скролить, больше использовать пространство. Разместить два браузера? И читать одновременно два источника? Вы неправильно меня поняли: мне не мешает пустое пространство. Но я хотел бы его использовать по ширине также, как и по высоте. Для того сайта, который я в данный момент читаю
Скроллить придется меньше, если текст занимает экран по ширине, а не только в узкой колонке в центре
Это очень плохое решение. Вот возьмите книгу раскройте ее и подумайте почему в вебе делают ка в книге?
Вы не поняли суть топика. Что значит «почему в вэбе делают так»? Кто делает? Некоторые верстальщики делают все правильно. Некоторые делают только с расчетом на малое разрешение. В книге — как раз все правильно: поля в среднем занимают 10% пространства листа.
Некоторые это какие? Вы вот откройте mail.ru, google.ru, yandex.ru да тот же habr.ru и внимааательно посмотрите как они сделаны. Вы обнаружите фиксированную колонку как правило расположенную по середине и на FullHD занимающую 50% экрана. Почему делается так? Потому что это ровно один лист A4 и количество знаков совпадает с количеством знаков на странице книги. Большинству людей неудобно когда текст занимает весь широкоформатный экран, строчки слишком длинные получаются.
Так пусть бы на худой конец эта колонка была фиксирована по ширине в символах, то есть в em-ах, а не в пикселях.
Не получится. Пикселей в каждом шрифте по разному так что ну никак. Да и не надо.
Так в чём проблема, если ширину в em-ах фиксировать, а не в px? Тогда можно получить ширину текста в символах, соответствующую книжной, независимо от гарнитуры и масштабирования шрифта.
в том что тахома к примеру и вердана имеют разную ширину букв. Как результат в зависимости от шрифта плавать будет туда сюда. А прибить чтобы вот только этим шрифтом вы не можете, потому что у пользователя шрифта может не оказаться. Да и смысл то какой? Нормальные браузеры давно масштабируют весь сайт, а не текст там.
Товарищ смените браузер. К примеру chrome масштабирует не только шрифт, но и страницу целиком. Как результат увеличивается не только шрифт, но и сама колонка.
Да, опера тоже так умеет. У Оперы есть еще такая опция как «подогнать страницу под ширину экрана». А еще есть плагины для решения подобных проблем. Речь не об этом
А о чем? О том что вестальщики собаки злые стали делать фиксированную колонку?
Согласен! Тоже не вижу особой проблемы. Да и главное — ну будет растянут шрифт на 100% по ширине экрана. Глазами задолбаешься бегать из одного угла в другой. Именно поэтому фиксированные сайты удобнее — проще читать. А если надо читать с растояния — увеличь весь сайт и читай на здоровье. Увеличивать отдельно шрифт, оставляя изображения исходного размера — изврат какой-то, ей Богу :)
Поверните монитор на 90˚
Два браузера — это очень неудобно. А использовать всю площадь экрана хочется, когда нужно минимизировать обращения к интерфейсу. Так бывает.
Судя по минусам этого коммента, считаете что не нужно делать версию для разных устройств?
Я не минусовал (даже если хотел бы — ссылка в миниопере не работает), но скажу — да, не нужно. Вот взять поисковики. В мобильных версиях нет кнопки «копия» для просмотра кеша. Или, еще более тупо, нет ссылки«просмотр в виде хтмл», как будто я буду пдф или doc качать. Так было, иногда бывают подвижки в лучшую сторону — например, через много лет яндекс добавил «поиск в google» в мобильной версии, но в основном функционал обрезан неожиданно, потому что обрезатель юзер статичноофисный и ездит на работу на машине, и не представляет, что древних телефонов можно сидеть полноценно, а не только проверять почту и читать бор. В итоге приходится искать ссылку на полную версию хз где, возвращаться назад, ища нужную строку поиска на мелком экранчике. Сэкономили мне килобайт безлимитного трафика, ага, заставили качать две страницы вместо одной. Проблема в том, что кастратор не знает, что нужно конкретному мобильному пользователю.
И так на каждом сайте — привыкай к новому дизайну привычного сайта, хотя бы ради поиска кнопки полной версии (и в каждом втором случае обрезанного функционала почему-то не хватает — не просто так он на полной версии есть).
Вот в опере поняли правильный подход, зум+подгон колонок по ширине, и все, хоть страница перегружена баннерами, если она совместима с оперой мини, это мешать не будет — не будет этого на экранчике.
И так на каждом сайте — привыкай к новому дизайну привычного сайта, хотя бы ради поиска кнопки полной версии (и в каждом втором случае обрезанного функционала почему-то не хватает — не просто так он на полной версии есть).
Вот в опере поняли правильный подход, зум+подгон колонок по ширине, и все, хоть страница перегружена баннерами, если она совместима с оперой мини, это мешать не будет — не будет этого на экранчике.
> По мере его использования, я столкнулся с тем, что мало кто из верстальщиков тестирует свои странички на увеличенном зуме.
Со своей стороны я бы хотел обратиться по этому поводу к разработчикам браузеров. Если это зум, то извините, какого хрена в нём всё расползается? Почему блоки ведут себя самым странным образом то увеличиваясь не пропорционально в размерах, то бекграунд преображается и прочих непонятных вещах там где масштаб должен просто увеличиваться или уменьшаться.
По большей части это относится к ИЕ до 8, там вообще что-то инфернальное творится. В то время как идеал зума — Опера, где вообще проблем не наблюдалось.
Со своей стороны я бы хотел обратиться по этому поводу к разработчикам браузеров. Если это зум, то извините, какого хрена в нём всё расползается? Почему блоки ведут себя самым странным образом то увеличиваясь не пропорционально в размерах, то бекграунд преображается и прочих непонятных вещах там где масштаб должен просто увеличиваться или уменьшаться.
По большей части это относится к ИЕ до 8, там вообще что-то инфернальное творится. В то время как идеал зума — Опера, где вообще проблем не наблюдалось.
Согласен, разработчики браузеров могли бы кардинально изменить ситуацию. Но одна из задач верстки как раз и заключается в том, чтобы устранять недостатки браузеров, добиваясь корректного отображения в любых условиях
Не понимаю, почему этот комментарий минусуют.
Поятное дело, что правильный вариант решения проблемы — нормальная (и стандартная) реализация зуммирования в браузерах. И разработчиков браузеров нужно просить и пинать, пока проблема не будет решена.
Но до тех пор, пока зуммирование работает везде по-разному и коряво, задача по оптимизации верстки все равно ложится на плечи верстальщиков.
Поятное дело, что правильный вариант решения проблемы — нормальная (и стандартная) реализация зуммирования в браузерах. И разработчиков браузеров нужно просить и пинать, пока проблема не будет решена.
Но до тех пор, пока зуммирование работает везде по-разному и коряво, задача по оптимизации верстки все равно ложится на плечи верстальщиков.
> Поятное дело, что правильный вариант решения проблемы — нормальная (и стандартная) реализация зуммирования в браузерах.
Она и так нормальная и стандартная во всех браузерах. Пинать нужно arkady, за то что называет изменение размеров шрифта зумом страницы.
Она и так нормальная и стандартная во всех браузерах. Пинать нужно arkady, за то что называет изменение размеров шрифта зумом страницы.
Это минусовали представители IE, Firefox и Opera.
На Ipad еще очень классный зум, любой сайт на всю ширину экрана, все пропорционально сжато или растянуто. Никаких искажений, наплывов или чего бы то нибыло.
А вообще да, это проблема исключительно браузеров, кривой реализации. Сделали бы хороший зум и не было бы такой проблемы как разрешение экрана при верстке.
А вообще да, это проблема исключительно браузеров, кривой реализации. Сделали бы хороший зум и не было бы такой проблемы как разрешение экрана при верстке.
Судя по всему, автор использовал текстовый зум, при котором увеличивается только размер текста. По-крайней мере у меня при обычном зуме ФФ нормально масштабирует сайты с фиксированной шириной колонок.
Именно так
Так называйте вещи своими именами. Я до самого конца поста не мог понять, что у вас там куда наплывает, если при зуме все должно равномерно увеличиваться.
И тем более, глупо наезжать на разработчиков, что они не продумали, как будет выглядеть их сайт при другом шрифте. Мб еще всю графику поменять и сетовать, что сайт некрасив?
А вот это спорно. Зачем, спрашивается, в настройках браузера указывается размеры и названия шрифтов? Мне казалось, чтобы пользователь их настроил один раз и видел как ему удобно, а верстальщик пускай оперирует типом и относительным размером.
Это указывается для страниц, в которых не прописан дефолтный шрифт. Потом, в браузере можно открывать не только html, а, к примеру, txt. К тому же, в опере эти настройки распространяются на почту, rss и всякие чаты. Глупо, чтобы верстальщик использовал какие-то мифические, неизвестные ему настройки юзера и пытался при этом добиться не только кроссбраузерности, но и вообще более-менее вменяемого отображения на всевозможных вариациях.
Уже подправил заголовок и внес уточнение в конец топика
Хорошая агитация в сторону верстки «настоящей резины». То есть той, где резиновыми являются основные содержательные элементы — шрифт в относительных величинах, сетка в процентах.
Однако, помимо того, что этот тип верстки является не самым простым, важно еще понимать, что чем сложнее дизайн и чем дубовее макеты, тем вероятность создания качественной резины резко падает, даже если квалификации верстальщика для этого достаточно. А следовательно страдает и все что связано с зумом и прочим.
Если отказаться от обильного использования графики, задача резко упрощается с точки зрения гибкости ресайза, и вики — яркий тому пример.
Вообще, с массовым приходом широкоформатников, ситуации с «распространенным» разрешением скорее всего скоро не станет. И для качественной кросс-форматной реализации нужны новые подходы к верстке макета.
Однако, помимо того, что этот тип верстки является не самым простым, важно еще понимать, что чем сложнее дизайн и чем дубовее макеты, тем вероятность создания качественной резины резко падает, даже если квалификации верстальщика для этого достаточно. А следовательно страдает и все что связано с зумом и прочим.
Если отказаться от обильного использования графики, задача резко упрощается с точки зрения гибкости ресайза, и вики — яркий тому пример.
Вообще, с массовым приходом широкоформатников, ситуации с «распространенным» разрешением скорее всего скоро не станет. И для качественной кросс-форматной реализации нужны новые подходы к верстке макета.
Может глупо, да и не решение а приспособление, но если уменьшить разрешение, оно всё равно вам не нужно на таком расстоянии от монитора.
Минусов может быть больше чем полюсов.
Минусов может быть больше чем полюсов.
А мне наоборот именно на широкоформатном мониторе стали действовать на нервы «резиновые» сайты. Читая текст, приходится крутить башкой постоянно. Аккуратная колоночка текста посередине намного удобнее. Сайты, сверстанные жёстко под 1024 (970-990 ширина) — самые удобные для восприятия.
Это легко исправить, просто уменьшив окно. Я говорю немного про другое: когда колонка текста при зуме сжимается настолько, что в нее помещается несколько слов и она жутко растет по высоте. Поля, конечно необходимы, но не настолько же. К слову, хабр выглядит нормально, тут зум не дает никаких проблем.
Это легко исправить, просто уменьшив окно.
Ага и большинство людей этого не делает.
К чему это, поясните?
К тому что большинство людей смотрит браузер раскрытым на весь экран. В случае резинового дизайна и широкоформатного монитора это приводит к расползанию текста по всему экрану. Обратите внимание, что на хабре тоже сделана колонка по центру с фиксированной шириной и еще много где сделано так же. И связано это как раз появлением большого числа широкоформатных мониторов.
Как увеличение мониторов, так и фиксированные по ширине дизайны делают бессмысленным раскрывать браузер на весь экран. Какой смысл его раскрывать, если больше, как ни бейся, не увидишь? Так что люди отучатся так делать.
Это удобно только если использовать тайловый менеджер окон. А так придется совершать гораздо больше действий, чтобы удобным образом расположить окна.
Не отучатся. Потому что вручную делать каждый раз утомительно.
Зачем «каждый раз»? У меня, например, с утра браузер открывается примерно на 1150×930 при разрешении 1280×1024 и я его ещё не ресайзил, хотя уже кучу дел переделал. От этого только проще было переключаться в почтовый агент, Photoshop и MSO Excel.
Еще раз спрашиваю, кому из пользователей это надо? Типичное действо пользователя открыть браузер и тыкнуть кнопку чтобы он на весь экран открылся и таких большинство их не интересует как там правильно надо открыть браузер чтобы было удобнее читать.
Ещё раз отвечаю: с распространением больших мониторов эта привычка отомрёт.
До сих пор не отмерла хотят широкоформатников уже много. И пока не будет переделан механизм разворачивания окна для браузера ничего не изменится.
У меня лично отмерла: и я не думаю, что прямо уж все пользователи настолько тупее меня.
Раскрывают окно программы на весь экран не только для увеличения количества отображаемой информации, но и для фокусировки своего внимания.
Это зависит от того на каком расстоянии от экрана. Большее значение имеют угловые размеры, чем физические.
А у вас есть кнопка развернуть окно на половину экрана? Вот в Mac OS X есть там так браузер разворачивается по умолчанию, в KDE такое поведение для окон можно настроить, но по умолчанию в Windows и DE на *nix кнопка разворачивает на весь экран и среднестатистический пользователь не будет сам крутить окно чтобы вот стало хорошо. Он нажмет кнопку развернуть на весь экран. Ну и да у большинства пользователей разрешения от 1024 до 1378, все что выше встречается существенно реже. Из-за этого разработчики на своих больших мониторах делают фиксированную полосу которая может плавать от 1000 пикселей до 1300 к примеру.
Это провал верстальщиков. Всегда стоит ограничивать «резиновость» определённых колонок свойствами min-width и max-width, тогда и не будет таких проблем.
Сайт должен подстраиваться под окружения зрителя/пользователя существующие технологии позволяют это в полной мере, версии под каждое устройство или разрешение на данный момент вторичны. Главное чтобы заходя на ресурс, используя приложения пользователь чувствовал себя комфортно. Флюид шаблоны подстраиваются под окружения увеличивая либо уменьшая и сменяя акценты в шаблоне под окружение пользователя. То что сейчас очень мало создается сайтов/ресурсов не для Заказчика а для посетителя/пользователя проблема рынка и разработчика.
использую ireader в особо сложных случаях
arkady, а вас нисколько не смущает что вы увеличение размера шрифта называете зумом?
Я к тому, что при зуме страницы проблем не возникает. Чтобы убедится в этом, нажмите в фаерфоксе alt, выберите в меню View подменю Zoom и уберите галочку Zoom text only.
Вся паника, которую вы разводите, не имеет ничего общего с действительностью. Проблемы возникают от того, что вы меняете размер одного элемента (текста), не меняя размер других (сетка, картинки).
Вся паника, которую вы разводите, не имеет ничего общего с действительностью. Проблемы возникают от того, что вы меняете размер одного элемента (текста), не меняя размер других (сетка, картинки).
Дело в том, что увеличение картинок мне не нужно (они выглядят страшненько при этом). Где вы увидели панику? Я говорю о том, что верстальщики не тестируют свои страницы на зуме, в особенности, это касается блочной верстки, где все плывет. Я почти всегда пользуюсь readability и никакой паники нет.
> верстальщики не тестируют свои страницы на зуме
То что вы продемонстрировали — это не зум. При зуме все ок.
Вы можете отключить css и жаловаться, что верстальщики не тестируют свои сайты при отключенном css, или запретить у всех элементов border и жаловаться, что верстальщики бла бла бла когда запрещены бордеры. Вы уверены, что это справедливые претензии?
То что вы продемонстрировали — это не зум. При зуме все ок.
Вы можете отключить css и жаловаться, что верстальщики не тестируют свои сайты при отключенном css, или запретить у всех элементов border и жаловаться, что верстальщики бла бла бла когда запрещены бордеры. Вы уверены, что это справедливые претензии?
Ок, не зум, а «увеличение размера шрифта на странице». Вроде бы ясно что речь об этом, я просто использовал более краткий термин :) Еще раз повторю что нет ни паники, ни жалоб, ни претензий вообщем-то. Есть пожелания к верстальщикам. Отключение css это удаление элементов из кода страницы, а увеличение шрфта его не меняет и думаю посетитель вправе ожидать что страница, как минимум не развалится. Я именно для этого и привел примеры: у многих в блочной верстке нет проблем при увеличении шрифта, а у некоторых — они имеют тяжелые последствия.
> Вроде бы ясно что речь об этом, я просто использовал более краткий термин
Это не более краткий термин, это совсем другое.
Почему вы ожидаете, что если измените css-свойство font-size, то страница не должна разваливаться, но не требуете того же, скажем, при изменении всех position: relative на position: fixed?
Это не более краткий термин, это совсем другое.
Почему вы ожидаете, что если измените css-свойство font-size, то страница не должна разваливаться, но не требуете того же, скажем, при изменении всех position: relative на position: fixed?
> Ок, не зум, а «увеличение размера шрифта на странице».
Исправьте, пожалуйста, эту ошибку в топике.
Исправьте, пожалуйста, эту ошибку в топике.
топик больше в раздел QA
для чтения берите сафари
для чтения берите сафари
в этом топике показано как это сделать
www.tothepc.com/archives/view-only-webpage-text-with-safari-reader/
www.tothepc.com/archives/view-only-webpage-text-with-safari-reader/
Надо будет сказать своим знакомым дизайнерам, которые не всегда читают хабр
наиболее современным решением является вот что http://cssgrid.net/
решение очень классное, направленное на разные разрешения (в тч ipad). А так же в некоторых кругах дизайнерских ведутся дискуссии о том, что 960 мертв, или почти.
Так что 1140 вам в руки
решение очень классное, направленное на разные разрешения (в тч ipad). А так же в некоторых кругах дизайнерских ведутся дискуссии о том, что 960 мертв, или почти.
Так что 1140 вам в руки
Черти что. При уменьшении размера окна, например, исчезает кнопка Download. Чрезвычайно юзабельно.
как, интересно, ВЫ так уменьшали. НИче никуда не исчезает.
Разве что проблема в браузере Вашем…
Разве что проблема в браузере Вашем…
Просто пример не очень удачный. Вот получше: lessframework.com/
Люди, работающие за большими мониторами(разрабочики, дизайнеры), обычно, нуждаются в большем пространстве увлечение размера шрифта съедает много полезного пространства, а при удалении монитора на метр и более сильно напрягает зрение, при среднем размере шрифта 14px строчки длиной > 1000px сильно затрудняют чтение, слевательно резиновая верстка зло на широком экране.
Далеко не любой дизаин можно растягивать, часто некоторые элементы для этого впринципе не предназначены. Единстенное что можно посоветовать всем верстальщивам, не создавать элементы фиксированой высоты, а ширину и отступы по возможности задавать в em/ex.
Любетелям отдалить монитор стоит использовать зум, а не изменение размера шрифта.
Далеко не любой дизаин можно растягивать, часто некоторые элементы для этого впринципе не предназначены. Единстенное что можно посоветовать всем верстальщивам, не создавать элементы фиксированой высоты, а ширину и отступы по возможности задавать в em/ex.
Любетелям отдалить монитор стоит использовать зум, а не изменение размера шрифта.
Увеличивайте масштаб всей страницы, а не только размер текста и будет вам счастье.
Я верстаю иногда.
Во-первых, зум бывает 2 видов (точнее, 3): когда масштабируются все элементы, отступы, растровые картинки увеличиваются (с потерей качества, само собой). Этот режим в Опере, Хроме и ФФ (но в нем он отключаемый). Там обычно все сайты масштабируются нормально, разве что спрайтовые картинки могут слегка ломаться из-за округления отсупов до целого числа пикселей.
Есть второй вид зума — увеличивается базовый размер шрифта. Такой режим в ИЕ6 и в ФФ, если включить там Increase text Size. В теории, CSS и HTML должны позволять создавать страницы, которые можно как угодно увеличивать и уменьшать (хахаха), в реальности это не работает. CSS один из самых кривых, запутанных, плохо реализованных и недоработанных стандартов, что я видел. Банальный пример — какая-нибудь кнопка или рамка у заголовка, чтобы сделать ее растягиваемой вместе с шрифтом, надо много дополнительных элементов (лишний труд, нарезка спрайтов и возня с отладкой). Указаывать размеры и отсутпы в em — fail, так как например те же картинки и декоративные элементы при этом не масштабируются, я пробовал так делать, получается ерунда. Плюс, удвоенная сложность, например как задать на html min-width одновременно и в пикселях, и в em? Никак, по крайней мере без явскрипта. Плюс, в CSS множество костылей и хаков, которые при таком масштабировании страницы развалятся.
Я обычно для таких браузеров оставляю запас, чтобы до процентов 120 можно было увеличить, а дальше это уже не мои проблемы.
Если у вас сайт сложнее, чем текст с заголовками в 1 колонку, вы потратите кучу времени, все равно будут баги, и ради чего? ради одного хабраюзера, который даже неспособен разобраться в механизмах работы зума в браузере? Или поставить себе Оперу? Сударь, давайте вы тогда будете оплачивать эту работу верстальщикам посещаемых вами сайтов отдельно?
А, еще есть 3-й вид зума, в ИЕ7. Вроде, как в рекламе было написано что он революционный и все такое. Он действительно революционный. Он увеличивает шрифты и часть отступов, а часть не увеличивает по никому, кроме майкрософтовцев, не понятной логике. Любой дизайн сложнее текста в 1 колонку при этом превращается в кашу. Включая официальный сайт майкрософт. Понятия не имею, верстает ли в мире хоть один человек с учетом зума в ИЕ7.
Во-первых, зум бывает 2 видов (точнее, 3): когда масштабируются все элементы, отступы, растровые картинки увеличиваются (с потерей качества, само собой). Этот режим в Опере, Хроме и ФФ (но в нем он отключаемый). Там обычно все сайты масштабируются нормально, разве что спрайтовые картинки могут слегка ломаться из-за округления отсупов до целого числа пикселей.
Есть второй вид зума — увеличивается базовый размер шрифта. Такой режим в ИЕ6 и в ФФ, если включить там Increase text Size. В теории, CSS и HTML должны позволять создавать страницы, которые можно как угодно увеличивать и уменьшать (хахаха), в реальности это не работает. CSS один из самых кривых, запутанных, плохо реализованных и недоработанных стандартов, что я видел. Банальный пример — какая-нибудь кнопка или рамка у заголовка, чтобы сделать ее растягиваемой вместе с шрифтом, надо много дополнительных элементов (лишний труд, нарезка спрайтов и возня с отладкой). Указаывать размеры и отсутпы в em — fail, так как например те же картинки и декоративные элементы при этом не масштабируются, я пробовал так делать, получается ерунда. Плюс, удвоенная сложность, например как задать на html min-width одновременно и в пикселях, и в em? Никак, по крайней мере без явскрипта. Плюс, в CSS множество костылей и хаков, которые при таком масштабировании страницы развалятся.
Я обычно для таких браузеров оставляю запас, чтобы до процентов 120 можно было увеличить, а дальше это уже не мои проблемы.
Если у вас сайт сложнее, чем текст с заголовками в 1 колонку, вы потратите кучу времени, все равно будут баги, и ради чего? ради одного хабраюзера, который даже неспособен разобраться в механизмах работы зума в браузере? Или поставить себе Оперу? Сударь, давайте вы тогда будете оплачивать эту работу верстальщикам посещаемых вами сайтов отдельно?
А, еще есть 3-й вид зума, в ИЕ7. Вроде, как в рекламе было написано что он революционный и все такое. Он действительно революционный. Он увеличивает шрифты и часть отступов, а часть не увеличивает по никому, кроме майкрософтовцев, не понятной логике. Любой дизайн сложнее текста в 1 колонку при этом превращается в кашу. Включая официальный сайт майкрософт. Понятия не имею, верстает ли в мире хоть один человек с учетом зума в ИЕ7.
Хром 11
В ФФ4 примерно такая же картинка, зумится все и равномерно, никакой проблемы с фиксированными сайтами не наблюдаю.
В ФФ4 примерно такая же картинка, зумится все и равномерно, никакой проблемы с фиксированными сайтами не наблюдаю.
Ай, картинка потерялась
habreffect.ru/files/9b3/d04c87a41/ugib.png
habreffect.ru/files/9b3/d04c87a41/ugib.png
Проблема в том, что если дозумить до того, чтобы текст по ширине занял весь экран, кегль становится слишком большим. Если фиксированная колонка слишком узкая. А если фиксированая колонка не слишком узкая, то всё отлично… до очередного апгрейда монитора, а там — как повезёт.
Мне кажется проблема сильно преувеличена, большинство пользователей не знаю о зуме и о хоткеях: Ctrl + <+>, Ctrl + <-> и Ctrl + <0>.
Не скажу, что проблема абсолютно надумана, но вот удобного даже чисто для себя универсального варианта в рамках HTML4/CSS2 «на дивах» без JS и отдельных версий страницы найти не смог. У меня четыре юзкейса:
— «активный» серфинг за столом: хочется отображения основного контента высотой 14-16px в 50-70% в центре при разрешениях ~2000 по горизонтали, навигация и прочие сайдбары занимают остальное пространство (можно ещё с полями, можно без, почти без разницы), то есть чтобы читать основной контент или делать комменты я мог не вертя головой.
— «пассивный» серфинг, а скорее чтение, на диване: масштаб ~300%, основной контент занимает всю ширину экрана, чтоб увидеть сайдбары нужно скролить по горизонтали, в идеале левый и правый вылезают вправо вверх без мозгодробящих переносов по одной букве или отрезанию больше одной буквы
— «активный» серфинг на планшете (800x480)
— «пассивный» (чтение) на нём же
— «активный» серфинг за столом: хочется отображения основного контента высотой 14-16px в 50-70% в центре при разрешениях ~2000 по горизонтали, навигация и прочие сайдбары занимают остальное пространство (можно ещё с полями, можно без, почти без разницы), то есть чтобы читать основной контент или делать комменты я мог не вертя головой.
— «пассивный» серфинг, а скорее чтение, на диване: масштаб ~300%, основной контент занимает всю ширину экрана, чтоб увидеть сайдбары нужно скролить по горизонтали, в идеале левый и правый вылезают вправо вверх без мозгодробящих переносов по одной букве или отрезанию больше одной буквы
— «активный» серфинг на планшете (800x480)
— «пассивный» (чтение) на нём же
UPD: В топике идет речь об увеличении размеров шрифта (в установках стоит «увеличивать только текст») а не о зуме всех элементов.
Вот вы сами и выяснили, в чём проблема :)
Кстати, на сайте сами знаего кого используются дефолтные шрифты — это, наверное, единственный сайт, который позволяет пользователю выбрать любимый шрифт для чтения текста.
Остальные дезайнеры считают, что они лучше знают, чего хочет видеть читатель, и жёстко прописывают шрифты.
Остальные дезайнеры считают, что они лучше знают, чего хочет видеть читатель, и жёстко прописывают шрифты.
…Я вот думаю, что наилучшим вариантом было бы фиксировать ширину колонки в em-ах плюс давать пользователю возможность растянуть колонку, если ему это вдруг потребуется. Вот это было бы гуманно.
Фиксировать колонку em-ах достаточно глупое занятие. Они не привязаны к пикселям монитора. Поменялся DPI поменялся размер em.
Увеличится размер шрифта и вместе с ним растянется сайдбар, вместо выползания и переносов после каждого слова.
И графические элементы тоже? :)
Для картинок вообще не надо задавать размер, а бекграунды правильно центровать и задавать цвет.
И графические элементы тоже — если их в SVG делать. Не вижу принципиальной проблемы. Наборы SVG-иконок, например, существуют.
SVG не em считаются. Как будем растягивать?
Элементарно. На 100 % HTML-контейнера, куда их кидаем, например,
div. А тому — размеры в em.Ну вот попробуйте так сделать и посмотреть что у вас получится в каждом из браузеров ;)
Так я так делал, только что не в em указывал размер, а в процентах. В каком браузере Вы ожидаете проблем с этим?
А теперь в em :)
А теперь в
em. Firefox 3+, Opera 9+, Google Chrome 11, Safari 5, IE 8 — не вижу никаких проблем. Скажите, наконец, прямо, что Вам не нравится.не нравится привязка к шрифту который может плавать в разных ОС и в случае разных DPI
Так ведь к шрифту привязываться — самое логичное. Потому что пользователи его подстраивают под себя. К чему же ещё привязываться? К пикселям? Так они в первую очередь и зависят от DPI. К физическим миллиметрам? Они по разному воспринимаются пользователями с разным зрением и расстоянием до экрана. Что с того, что шрифт «плавает»? И пусть себе плавает.
И не надо привязываться к пикселям монитора. Зато постоянным будет число символов в строке.
«когда я читаю длинную статью, я хочу делать с максимальным комфортом»
Используйте расширения-ридеры для браузеров (iReader для Chrome, встроенный в Safari и т.д. — комфорт будет куда большим, чем при любом зуме.
Используйте расширения-ридеры для браузеров (iReader для Chrome, встроенный в Safari и т.д. — комфорт будет куда большим, чем при любом зуме.
В топике идет речь об увеличении размеров шрифта (в установках стоит «увеличивать только текст») а не о зуме всех элементов.
Вот и снимите эту настройку. Все браузеры уже несколько лет умеют зумить всю страницу пропорционально, и крайне редко что-то плывёт. IE6, да, не умеет, я дла него и FF2 в своё время всё на em верстал, чтобы добиться пропорционального увеличения всей страницы.
Считаю что сегодня нужно дизайнить и верстать с подходом: три верстки, компьюреты(настольные и лэптопы), мобильные и планшеты.
Определение на серверсайд юзерагента и потом выдача проекта с нужной версткой… и проблема будет решена. Вопрос только в том, что платить за такую работу(и дизайн и верстка) готовых аж 100500! А потом мы получаем интернет в таких вот красивостях. Ну это не считая косяков, когда высота блока 48px а размеры шрифта относительные… вот и получим уродство на некоторых разрешениях.
Определение на серверсайд юзерагента и потом выдача проекта с нужной версткой… и проблема будет решена. Вопрос только в том, что платить за такую работу(и дизайн и верстка) готовых аж 100500! А потом мы получаем интернет в таких вот красивостях. Ну это не считая косяков, когда высота блока 48px а размеры шрифта относительные… вот и получим уродство на некоторых разрешениях.
Я хоть и новичёк, но тоже сталкивался с минусами блочной вёрстки и в этом полностью согласен с автором. Понравились наглядные примеры респект.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Зум шрифта и верстка