После довольно большого перерыва обновился мой компьютерный сайт. Обновление большое и разноплановое, какие-то аспекты будут интересны только профессионалам, а что-то пригодится и обычным пользователям. Я не буду перегружать данный пост внешними ссылками (хотя не уверен, что сейчас это имеет хоть какое-то значение), но основные моменты укажу.
И сразу отмечу, что на очереди стоят и другие обновления данного сайта, хотя работы еще не завершены. Но готовится очень многое… А пока — о текущем.
Ровно 2 года назад я написал статью, где сравнивал скорость работы разных компьютеров и разных систем на основе своей программы тестирования ПК. И вот сейчас вышла вторая часть этой статьи по итогам работы новой версии указанной программы.
Но т.к. я теперь достаточно активный читатель (и отчасти писатель) Хабра, то по итогам одного тамошнего спора я понял, что придется писать еще одну подобную программу, но уже с несколько иных позиций. И думаю, что будет готова она уже в этом году.
Еще я получил большую критику на том же Хабре за оформление этого самого компьютерного сайта. В чем дело? А в том, что я уделял внимание его работе с мобильных устройств (где крошечные экраны), но упустил из виду экраны огромные. У меня — максимум 1600, там все нормально. Но у людей есть и за 2000. И вот там, как оказалось, сайт отображается плохо. И не только этот сайт! Так что придется корректировать практически все! Но пока в качестве эксперимента я изменил работу раздела «Обои на рабочий стол». Если у вас большие экраны — посмотрите, как выглядит! Мне проверить просто не на чем…
Еще я добавил новые ссылки на страницу «Статьи» раздела о советских калькуляторах. Это, конечно, тема специфическая, но для меня важная и интересная. Да и не только для меня: как оказалось, энтузиастов и поклонников МК довольно много.
Ну и последнее. Как известно, у меня там на сайте есть раздел «Каталог сайтов». Несмотря на то, что сейчас люди все ищут поиском, причем через нейросети, такой каталог все равно полезен. Так вот, теперь там 14(!) страниц разной тематики и много разных полезных сервисов. Но напоминаю, что все они указаны в виде текстовых адресов, а не прямых ссылок: все же это не реклама, а просто информация. Посмотрите — там реально много интересного!
А впереди новые пополнения моих творческих сайтов… 🙂
Если не брать в расчет «олдскульный» дизайн, который я давно критиковал, иконки в изображении «обоев» сильно размазаны, что выглядит ужасно. Сейчас (профи) используют разные варианты обоев под основные разрешения, если их нельзя обрезать по бокам или нецелесообразно загружать в высоком разрешении (большой инф. объем) под низкое разрешение.
Масштабирование размера шрифта — это хорошо, но в разумных пределах. Нельзя очень сильно увеличивать размер для высоких разрешений. И удлинять строку в символах тоже нельзя. Она и так у вас слишком длинная. Многие профи для основного содержимого используют коэффициент 36, например размер шрифта 20px * 36 = 720px. Для устранения эффекта узкой полоски «контента» на больших экранах используют большие «резиновые» (боковые) поля (у вас поля очень узкие, как для смартфонов в вертикальной ориентации!) и отображение в несколько столбцов.
Для тестового просмотра можно использовать инструменты разработчика в браузере, например «Адаптивный дизайн» в Firefox. Устанавливаете тип или разрешение устройства, потом уменьшаете масштаб, если мешает горизонтальная прокрутка. Вообще 1600 — это очень мало для десктопа по нынешним меркам. Сейчас в обычных офисах норма — FullHD, иногда по два монитора рядом.
Авторские каталоги сайтов (не «линкопомойки», размещающие ссылки на сайты за плату) — это интересно и сейчас, по-моему. Давно собираюсь перенести свой каталог на отдельный домен (предположительно netfilter[.TLD]). Это помимо огромной коллекции ссылок в основном на внутренние страницы.
В моем каталоге вообще не ссылки, а адреса текстом (именно потому, что никого не рекламирую). Да, надо копировать и «вручную» переходить, но столько внешних ссылок вряд ли будет полезно для сайта, поэтому сделал так. И да — это не за деньги, это просто «для всеобщей пользы».
Что касается дизайна, то тут согласен — вопрос сложный. Я не понимаю, как отображать сайт на разрешении 5000 и больше. Что ни делай — будет некрасиво. Но мне придется, конечно, менять стили для всех своих сайтов, просто наверно для очень больших экранов придется делать как для смартфонов: убирать дизайн и делать просто ссылки.
Насчет «олдскульного» — да, я принципиально не хочу делать свои сайты по нынешним стандартам. Сейчас все сайты только коммерческие и сделаны совершенно одинаково. А у меня коммерции нет, у меня творчество. И пусть оно будет нестандартным, иначе в чем его смысл? Но поскольку экраны растут, то в некоторой степени придется корректировать. Но боюсь, что до разумного предела…
И да — я не люблю когда строки текста сделаны шириной во весь экран: читать невозможно. Поэтому у меня размер тела ограничен. Остаются огромные пустые боковые поля на большом разрешении. А что делать? Тут нет варианта…
На Retina 5K CSS-пиксели по умолчанию масштабируются (см. @2x or DPR=2). Windows тоже умеет автоматически масштабировать на больших экранах с разрешением QuadHD, 4K, etc.
Совершенно не понял, почему «для очень больших экранов придется делать как для смартфонов». Делайте хотя бы как для обычных «больших» экранов. Если не здесь заниматься дизайном, то где? 🙂
В предыдущем комментарии я назвал основные приемы для больших экранов. Большие «резиновые» поля — это не ваши «огромные пустые боковые поля», а дополнительные поля между «вашими» и содержимым. В этом блоге «ваши» серого цвета, а дополнительные белого (кстати, небольшая «резиновость» у них имеется). Реализует так же, как и для «ваших» полей (margin: auto), а padding фиксирует минимальные размеры, меньше которых сжимание уже не происходит.
Второй прием — отображение в несколько столбцов. Это повод не отказываться от сайдбара на больших экранах. Естественно, в дополнительных столбцах может отображаться и основное содержимое.
Ну, блог я хочу дополнить еще одним media для большого экрана (больше 2400, например), сделав больше ширину тела и увеличив шрифт. Там, в принципе, css хоть и дикий на ВП, но этот блок, я думаю, будет простым, я уже прикинул, просто пока не обновлял. Плохо то, что не на чем увидеть! Потому т.н. «масштабирование» в файерфоксе вид дает не тот, это имитация со скроллами и лично я не понимаю, что там в натуре…
А вообще потихоньку другие сайты тоже готовлю…
Я вашу образцовую страницу нормально разглядел. У меня масштабирование (браузерное механическое, т.е. Ctrl-ролик или -/+ на numpad-е) нормально работает. Если у вас не работает, можно сделать скриншот тем же инструментом и просмотреть его в любом просмотрщике изображений или в самом браузере. Например, вот для QuadHD: i00.ru/qhdpage (позже удалю этот скриншот). Если устранить мои замечания (размытые обои, отсутствие нормальных для десктопа полей у содержимого — их можно увеличить не только за счет «фоновых» полей, но и за счет длины строки), то будет вполне нормально, т.е. для QuadHD можно не делать отдельный брэйкпоинт. «Фоновые» (боковые) поля вместе уже сейчас не превышают ширину столбца с содержимым. Так что «воздух» можно направить даже внутрь столбца (уменьшить длину строки текста). Можно внутрь и вовне.
Я так и проверяю через «ctrl-«, это надежнее чем через «ctrl+shift+m». Посмотрим. Бог я пока не трогал, занимаюсь другими сайтами. Не везде все можно исправить «одним росчерком». На том же компьютерном сайте разные разделы имеют разные стили и разный код, это по сути же «сайт сайтов», сборник отдельных проектов. Потихоньку буду менять…
На всякий случай уточню. Я писал только про образцовую страницу (Обои на рабочий стол) из статьи. Блог упомянул только для примера, чтобы объяснить, о каких полях я писал при анализе образцовой страницы.
Вот набросал для наглядности: i00.ru/rmargins («резиновая» составляющая желтого цвета, фиксированная составляющая белого цвета; в реальности обе составляющие должны быть одного цвета). Медиазапросов мало, причем один из них используется исключительно для растягивания поля с 10 до 60px. Не обращайте на это внимания.
Ну так у меня тоже поля резиновые в принципе… Я масштабировал до 25% и меньше, но ничего не изменилось.
Дело в том, что я уже поменял и фоновую картинку обоев (она отчасти была специально размыта в плане иконок, но я сделал четкие — что скрывать?), она стала весить больше. Ну и стили поменял. Просто я пока не обновлял сайт, все вместе буду уже, там большое обновление готовится, но это, даст Бог, в начале октября уже будет. Я не люблю обновлять сайты по каждой мелочи… 🙂
Кстати, оказывается на фотосайте есть ошибка в стилях, на большом экране видно, я не знал. На той неделе он тоже обновится, заодно и это исправлю, все уже готово.
Насчет блога пока не трогал, не до того сейчас…
Похоже, «резиновость» здесь мне почудилась. Наверное, это переходы между обычными «брэйкпоинтами».
Наверно да. Но я выше написал — посмотрим…