LINUX.ORG.RU

Оптимальная ширина элементов сайта


0

1

Здравствуй, ЛОР.

С тех пор, как я последний раз влезал в верстку вебсайтов, прошло немало времени. За это время в интернетик высунулась куча новых устройств с разными размерами и разрешениями экранов. Собственно, вопрос: какие нынче модно делать размеры и пропорции у двух- или трехколоночных страниц, чтобы они отобржались на всем этот зоопарке более-менее приемлемо без раздельного допиливания стилей (или, еще хуже, каких-нибудь масштабирующих скриптов) под каждую железку? Есть ли универсальные гайдлайны?

cast Mystra_x64 например.

★★★★★

grid (сетка) и все само масштабируется. это самый простой вариант.

Black_Roland ★★★★ ()

Media queries. Пишешь CSS правило для обычных размеров, а для случая, когда места слишком мало, выводишь не колонками, а вертикально.

Deleted ()
Ответ на: комментарий от theNamelessOne

Лень и страх перед всем новым в целом.
И отсутствие конкретных рекомендаций по фреймворкам от тебя в частности.

thesis ★★★★★ ()
Ответ на: комментарий от Deleted

Media queries

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

для случая, когда места слишком мало

Я вот еще думаю, насколько будет допустимо разъехаться, если места наоборот слишком много.

thesis ★★★★★ ()
Последнее исправление: thesis (всего исправлений: 1)
Ответ на: комментарий от thesis

И отсутствие конкретных рекомендаций по фреймворкам от тебя в частности.

Я бы порекомендовал тебе Bootstrap, если бы использовал его responsive-фичи, а не только сетку и стили. Ещё про Foundation хорошее слышал.

theNamelessOne ★★★★★ ()
Последнее исправление: theNamelessOne (всего исправлений: 1)

любой responsive фреймворк, обычно разрешения абстрагируются до неких классов .phone .tablet .pc .no-phone .no-tablet .only-phone и т.д. и т.п.

trashymichael ★★★ ()
Последнее исправление: trashymichael (всего исправлений: 1)
Ответ на: комментарий от thesis

Да ладно лень, что там писать то. Что-нибудь в духе

.sidebar { float: right; width: 100500px; }
.content { margin-right: 100508px; }

@media all and (max-width: 300px) {
  .sidebar { float: none; width: 100%; }
  .content { margin-right: 0; }
}

Что касается сжатия — min-width на html?

Я вот еще думаю, насколько будет допустимо разъехаться, если места наоборот слишком много.

Ну, скролл то есть. Неприятно, конечно, но что делать.

Deleted ()
Последнее исправление: Mystra_x64 (всего исправлений: 1)

Есть не мода, но некоторая тенденция вместо px использовать em

«Сеточный» дизайн (точнее layout) с уклоном в резиновый, расположение группы элементов через html-списки.

Как ни извращайся, но альбомная и портретная ориентация отображающих устройств это постоянные спутники (хотя большинство использует альбом и собственно весь вопрос в масштабах устройства) + широкоформатные мониторы. С этим более менее могут справиться «резиновые дизайны» и возможности zoom + наверное адаптивная подстройка размеров на клиенте (js, css) + разумный минимализм.

swwwfactory ★★ ()
Ответ на: комментарий от trashymichael

Да вопрос не в том, каким инструментом нужно пользоваться, чтобы сделать правильно. Вопрос больше в поиске конкретных чисел, т.е. значений ширины блоков. Например «если экран 96dpi имеет ширину 1920px, то не нужно размазывать основной текст шире, чем на 900px, ибо у юзера разбегаются глаза и его тошнит».

thesis ★★★★★ ()
Ответ на: комментарий от swwwfactory

Я и сам стараюсь где можно указывать размеры в em и pt, наплевав на пиксельную идентичность отображения сайта в разных браузерах. Но «моды» на это никогда не замечал, поэтому у меня всегда было ощущение, что я что-то делаю не так.

thesis ★★★★★ ()
Ответ на: комментарий от swwwfactory

вместо px использовать em

Это те самые, которые сначала делают html { font-size: 80% }? Если они, то расстрелять.

Deleted ()
Ответ на: комментарий от thesis

«если экран 96dpi имеет ширину 1920px, то не нужно размазывать основной текст шире, чем на 900px, ибо у юзера разбегаются глаза и его тошнит»

4.2 Я вот читаю ЛОР во всю ширину и у меня всё нормально. Прекращаем решать за пользователя что ему нужно. А уж в дизайне с колонками и подавно. Сайт это не газета и не книга.

Deleted ()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от ritsufag

У меня просто плохое зрение и эти (неразборчиво) мешают мне спокойно жить. Понапишут микроскопические тексты, а потом тяфкают про 80 символов в ширину.

Deleted ()
Ответ на: комментарий от Deleted

Прекращаем решать за пользователя что ему нужно.

Злой ты. И не очень умный, все-таки. Был бы поумнее - понял бы, что на ЛОРе за тебя решили насчет размера шрифта как минимум.
А я пошел курить забытый WCAG.

thesis ★★★★★ ()
Последнее исправление: thesis (всего исправлений: 1)
Ответ на: комментарий от thesis

На ЛОРе размер шрифта зависит от дефолтного размера шрифта в браузере. Инжой ё бухурт. Also, у меня Stylish.

Теперь мне очень интересно узнать, как ум зависит от того, что в вебе пишут идиоты, которые не знают, что дефолтный размер шрифта (medium) как раз такой, каким должен быть основной текст.

Deleted ()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от ritsufag

Я в курсе. Предпочитаю Stylish, т.к. могу. Но эта проблема, которую создали идиоты.

Deleted ()

угу, потестируй ЛОР в диагоналях 32-55-60 на FullHD, так весело, что <table></table> покажется самой вменяемой версткой.

Deleted ()
Ответ на: комментарий от Deleted

Теперь мне очень интересно узнать, как ум зависит от того

Ум, чувак, не «зависит от того», но, например, проявляется в уместности употребления словечек наподобие «тяфкают» и «идиоты» и «бухурт».

дефолтный шрифт (medium) как раз такой, каким должен быть основной текст

А каким «должен быть основной текст» это, стало быть, пришло к нам с небес, а не «идиоты решили за пользователей», да.
Я-то наивно думал, что ты только в толксах такой, ммм, _особенный_. Если тебя не затруднит, покинь, пожалуйста, тему.

thesis ★★★★★ ()
Ответ на: комментарий от thesis

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

Т.е. по теме ты ничего не понимаешь, но виноват кто-то другой? И этот человек мне говорит про особенности, лол.

Deleted ()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от Deleted

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

Бугогагага.

по теме ты ничего не понимаешь

Не меньше тебя, чувак. А ты склоняешь меня к мнению, что больше.

thesis ★★★★★ ()
Ответ на: комментарий от trashymichael

Хорошо, согласен, хрен с ними с пикселями. А если ширина задается в относительных единицах, то почему нет, кмк.
Тогда топик имеет целью поиск тех самых типографских заповедей на тему «строка длиннее 80 символов читается с трудом». которые нанесли травму одному персонажу, которого я имел неосторожность скастовать.
Может, встречал где-нибудь такие заповеди, заточенные под веб?

thesis ★★★★★ ()

Собственно, вопрос: какие нынче модно делать размеры и пропорции у двух- или трехколоночных страниц, чтобы они отобржались на всем этот

Как правильно сказали, модно делать media queries. Вопрос скорее в том, на каком этапе сгонять всё в одну колонку, и так далее. То есть какие граничные размеры для этих media queries использовать.

Можно подсмотреть в бутстрапе, например. Если не ошибаюсь, максимальную ширину они делают около 1200px, затем, если экран меньше, 1000px, затем 800, а после выводят всё в одну колонку и разрешают ей сжиматься по-максимуму. В принципе, решение вполне разумное, правда в некоторых случаях, имхо, можно оставлять колонки и для более мелких размеров экрана, но это от дизайна зависит.

Я обычно ориентируюсь на то, чтобы на примерно 400px оно смотрелось более-менее юзабельно, и без горизонтального скролла (абстрактный смартфон с портретной ориентацией), затем где-то на 600-800 возвращаю колонки, а дальше только меняю максимальные размеры. В этом случае нужно один раз прикинуть, как оно будет в одну колонку, и один раз - в несколько, так меньше стилей перекручивать. Если сайт с каким-нибудь извращённым расположением колонок, то можно придумать что-нибудь вроде «сначала 1, затем 2, затем 3», но это если не лень.

Самую максимальную ширину контента выбираю на глаз по своему 23" монитору с 1920x, на пользователей с большими экранами мне пока наплевать:)

risenshnobel ★★★ ()
Ответ на: комментарий от risenshnobel

Как правильно сказали, модно делать media queries.

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

Вопрос скорее в том, на каком этапе сгонять всё в одну колонку, и так далее. То есть какие граничные размеры для этих media queries использовать.

Вот-вот-вот, уже ближе. Попробую сориентироваться на твои числа. Спасибо.

thesis ★★★★★ ()
Ответ на: комментарий от thesis

Если для тебя media queries это «допиливание стилей под каждую железку», то ты ничего не понимаешь в веб-девелопменте. Вон из профессии.

Deleted ()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от thesis

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

trashymichael ★★★ ()
Ответ на: комментарий от thesis

я полагаю ты лишь хотел сразу сделать правильно, ты начни и поймешь что к чему

trashymichael ★★★ ()
Ответ на: комментарий от thesis

Я то как раз в порядке, я тебе уже и не знаю как намекнуть, что ты упоролся чего-то ядерного.

Deleted ()
Ответ на: комментарий от Deleted

Ты сперва дождись, чтобы тебя отпустило, а потом я внимательно выслушаю все твои намеки.
А то сперва советуешь мне media queries для заточки сайта под железки с разными размерами экранов, а потом оказывается, что за такое надо «вон из профессии», причем «вон» надо не тебя, а почему-то меня.
Очень ты ценный кадр. Вопрос: «как избежать заточки сайта под разные экраны?» Ответ «используй media queries, чтобы заточить сайт под разные экраны».
Это я здесь упоролся, да.

thesis ★★★★★ ()
Ответ на: комментарий от Deleted

Там не нужно под _каждое разрешение_ делать.

Первооткрыватель америк снова въезжает в тред на изобретенном им велосипеде.

thesis ★★★★★ ()
22 марта 2015 г.

все должно уместиться в 800х640

anonymous ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.