{imgicourl}{zamok}
<< предыдущая заметкаследующая заметка >>
26 октября 2016
адаптивный дизайн

Из меня конечно дизайнер на три с минусом, а вы мне не помогаете. Но я сегодня наконец почитал, что такое адаптивный дизайн. И что такое разметка для роботов <aside> <nav> <header> <article> <section> и <footer>. И там все оказалось очень просто. Потому что когда смотришь чей-то дизайн, там двести скриптов, триста файлов CSS, и вообще говна на гигабайт. И понятно, что авторы не сами CSS писали, а им какая-то дизайнерская софтина напрудила говна вагон. У меня в итоге весь адаптивный шаблон (CSS я прямо в HTML запихнул, он совсем короткий) вышел 11 кб, всё как мы любим: /dnevnik/template/blog.html Я пока запилил там только одну медию: @media screen and (max-width: 900px), думаю это вполне нормально: всем мобильным и убогим, у кого экран меньше 900 (можете попробовать, сжав окно браузера), надо показывать облегченный дизайн без левой колонки. Вообще, конечно, хочется красивые шрифты, правильные цвета и больше воздуха. Но чтобы остался полный минимализм и старый стиль. И что-нибудь с этими уродливыми красными нитками сделать, убрать их что ли? В общем, если будут советы — спасибо. А пока вроде нормально стало, да? С мобильников уже можно читать дневник без проблем?

<< предыдущая заметка следующая заметка >>
пожаловаться на эту публикацию администрации портала
архив понравившихся мне ссылок
Оставить комментарий
Mac Safari Chrome
 Москва
2
1
Peter Repin
Шрифт в "левой колонке" в узкой мобильной версии чересчур здоровый. Красные нитки - ага, убрать бы. И ещё серые пятна на фоне тоже.
Linux Safari Chrome
 Москва
10
4
Leonid Kaganov
Серые пятна НЕ УБИРАЮТСЯ. Поскольку являются историческим объектом, как и ежик. Нельзя ломать традиции, которым 20 лет.
Windows Firefox
 Белоруссия
3
2
Propan (pavelprokh)
А голубая клеточка?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
По опыту.
1) Шрифт в меню увеличивать не нужно. Не удобно. А вот высоту строк - можно.
2) В блоке "Копия заметки" делайте word-break: break-all; чтобы ссылки переносились. Тот же Фейсбук сейчас растягивает страницу.
3) Нужно:
.twoCol #mainContent img {
max-width: 100% !important;
height: auto !important;
}
Сейчас не работает.
4) Прям чешется на мобильных для комментариев .c0, .c1, .c2, .c3, .c4, .c5, .c6 убрать max-width: 80%; если размер экрана меньше 500px.
Windows Safari Chrome
 Каменск-Уральский
2
0
D.iK.iJ
Хм. Для a[href *="http://lleo.me"], a[href *="http://lleo.aha.ru"] тоже бы word-break: break-all; добавить. Ну и может где-то еще есть длинные ссылки в тексте. Может их иначе выловить.
Это же и про ссылки в комментариях.

Ну и в самих блоках комментариев всякие margin-left: 75px; менять бы на 20%, например. Тянется, красиво, адаптивно.

Ну и про text-align: justify; и размер аватарок на Айфоне, например. Много занимают места.



Linux Firefox
 Mount Laurel
2
0
Михаил (#1684620)
Да, делать text-align: justify без hyphens: auto (которые, впрочем, пока только в Firefox работают) — явное зло.

А аватарки можно было бы сделать через float: right; margin: 0 0 1ex 1em вместо отдельной колонки в таблице.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Не только. С префиксами работает и в Эдж и в Сафари, но вот в на мобильном будут ад-ск-ие переносы в таблицах и много ещё где.
Ч отказался от использования.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
А чего бы просто a { word-break: break-all; } не добавить?
Почему текст в комментариях не огибает аватарку - это для меня загадка, идея нет.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Тогда другие слова в ссылках будут перен
оситься в любом месте - даже по 1 букве. Не очень хорошо.

А как тексту огибать картинку, если там таблица? Ну или убирать ее и делать блоки с float или колдовать с td {display: block;}
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Ну вот я сейчас убрал таблицу, а он все равно не огибает.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Это из-за overflow: auto; у .ctxt

Оно как-то хитро делает блок похожим на inline-block (или блок c float: left).
В общем, нужно убрать тут overflow: auto и добавить другой див, который будет вокруг текста и картинки сразу. Только пропишите ему width: 100%.
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Сделал, но пока эффекта нет. Мне кажется, там sys.css кэшируется несколько минут, бесит, но ничего поделать не могу.
Windows Safari Chrome
 Каменск-Уральский
1
0
D.iK.iJ
Вроде уже обтекает картинку.
От кеша помогает менять sys.css?1 - sys.css?2 так далее - после правок.
Linux Firefox
 Boulder
0
0
Михаил (#1684620)
Эээ!!! Всё это стилевое оформление надо не для каждой аватарки в её img style пихать, а ставить им img class и прописать стили в общем CSS. Экономьте нам мегабайты :–) и себе будущие нервы (не сто́ит перемешивать оформление с данными и кодом).
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Спасибо!

1) Уменьшил до 18pt - было 20.

2) Это модуль CROSSPOSTED, указал ему в темплейте: tmpl=<div style='word-break:break-all'>{adminkeys}{#link} ('{#link}')</div>

3) Не понял, что это: .twoCol #mainContent img { max-width: 100% !important; height: auto !important; } Добавить в media screen? На всякий случай добавил.

4) .c0, .c1, .c2, .c3, .c4, .c5, .c6 { max-width: none; } ?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
3) .twoCol #mainContent img - это картинки в комментариях. У них чего-то не было max-width. Не знаю даже - почему.

4) Если у .c0, .c1, .c2, .c3, .c4, .c5, .c6 (комментарии) убрать max-width (написал как max-width: none;) - они красиво идут ровно по правому краю. Не уверен, что это нужно... но красиво.

(Если все выравниваем по 1 линии, как я писал в другом комментарии):
Тогда 1 комментарий лучше сделать с margin-left: 0px. Второй - с margin-left: 4% (или 25px как сейчас) и т.д.
Windows Safari Chrome
 Каменск-Уральский
7
0
D.iK.iJ
За это вот - бить по рукам
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
лучше
<meta name=viewport content="width=device-width, initial-scale=1">

Зачем отбирать возможность масштабировать?
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Изменил. Не буду врать, что понимаю смысл этих строк - просто скопировал из какого-то мануала.
Windows Safari Chrome
 Каменск-Уральский
1
0
D.iK.iJ
Ну, мой вариант - из рекомендаций Гугла.

width=device-width - ширина сайта равна ширине экрана.
minimum-scale=1.0 - минимальный масштаб.
maximum-scale=1.0 - максимальный масштаб.
initial-scale=1 - начальный масштаб.
Windows Safari Chrome
 Москва
2
1
vivliofika
ебать тебя в жопу за maximum. Не тебе, блядь, решать, как я должен своими сосисонами попадать в точку на экране разрешение 1900 на 1080 и размером 4 дюйма.

Готовь песок, вазелин для слабаков!
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Эм.. поэтому и предложил заменить его на на
<meta name=viewport content="width=device-width, initial-scale=1">
Windows Firefox
 MooChaengwattana Road Pakkret Nonthaburi
5
0
sprintf
А зачем красные нитки убирать? Мне нравятся
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Выглядят старомодно. Их бы как-нибудь размыть или утончить...
Windows Firefox
 MooChaengwattana Road Pakkret Nonthaburi
8
1
sprintf
По-моему, сейчас нет ничего лучше старомодных сайтов. Редизайн с ребрендингом задрали, плоскота задрала.

Адаптация под мобилы, вылизываение всяких технических нюансов, типа масштабирования и ввод форм на маленьких экранах - вот это вот хорошо, если не лень. А дизайн и так отличный.

Хозяин - барин, конечно :)
Windows Safari Chrome
 Москва
2
1
vivliofika
ага. Ебучие мудланы начали ебать мозг "дизайнами" под мобильные устройства. Но выглядит это всё так же как во времена зарождения javascript и java applet. Гондоны!
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Хорошо вы о Гугле. Их инициатива.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Красные нитки можно сделать через прозрачность 50%, например:
border: 1px dotted rgba(255,0,0,0.5);

Только старые браузеры ее не поддерживают. Поэтому скорее даже так:

border: 1px dotted red;
border: 1px dotted rgba(255,0,0,0.5);

Ну и все скругления и тени - тоже с префиксами, по идее, должны идти (-webkit- -moz- -o-).
Забыл, когда писал вам про border-radius и box-shadow.
Windows Firefox
 Санкт-Петербург
0
0
anonymouse69
Зато "тепло и лампово", а так, получилось не лучше жж, хрень какая-то.
Windows Safari Chrome
 Санкт-Петербург
1
1
Шура
Вот кстати да. солидарен с предыдущим оратором. фоновую хню убери, лишнее. Ниточки, в обшем, тоже можно убрать безпотери смысла. С медией я экспериментировал :) если интересно, напишу потом.
Linux Ubuntu Firefox
 Москва
7
0
Leonid Kaganov
Есть традиция, которая не позволяет через 20 лет поменять дизайн и его элементы полностью. Я ж не РЖД какое-нибудь, не Сбербанк и не аэропорт Домодедово, чтобы каждые полгода новый сайт выкатывать. Сайту 20 лет, узнаваемые элементы следует беречь.
Linux Ubuntu Firefox
 Барнаул
0
0
Кукинштейн
Запили голосовалку, нужен бэкграунд из кучек или нет.
Первое, что я сделал, когда сюда пришёл -- заблочил нах адблоком фоновую картинку.
Linux Safari Chrome
 Москва
1
0
Leonid Kaganov
Это ваше право, но у меня традиция. Голосования тут неуместны.
Windows Firefox
 Белоруссия
0
0
Propan (pavelprokh)
Свое мнение публиковать не буду. А вот пару ссылок полезных дам. Про сетку http://shkola.readymag.com/grid/ и про бритву Оккама в дизайне https://medium.com/russian/57b468781303#.98iy2tbal - очень познавательно, даже если не сможешь потом применить ;)
Windows Firefox
 Белоруссия
2
0
Propan (pavelprokh)
Нет. Не удержусь, выскажусь :)

Во-первых, сайт сильно визуально шумит, много разных по размеру, цвету и жирности шрифтов. Эти ПЛЮС и МИНУС в каментах зачем-то КРИЧАТ, занимают много места и не несут полезной информации. К ним же цифра в скобках, зачем скобки? Фон и нитки тож можно убирать спокойно. Короче, работай бритвой – все не добавляющее пользы – нафиг. А чтобы это проверить, воспользуйся эмпатией, представь себя девушкой-гуманитарием, которой ты понравился на концерте 18+ и она пришла почитать твой дневник :) с розового айфона :) Даже если это не твоя аудитория, мнение такого человека часто вскрывает косяки технарей.

Во-вторых, сетка, она или отсутствует, или она нелогична. Блоки текста не выровнены, например, блок понравившихся страниц и каменты левым краем не совпадают.

В-третьих, пляшут символы и пиктограммки относительно текста, между ними, то есть пробел, то нет. Например, в левой колонке RSS прилип к головастику и криво, не отцентрировано по горизонтали, а надо бы пробел и выровнять. С остальными головастиками "содержание" и "о дневнике" приросли. В каментах все эти замочки, конвертики аналогично скачут и то имеют пробелы, то нет. Личная почта слева, конвертик и 0 снова не выровнены.

В общем, ссылки из предыдущего камента в помощь. Ководство рекомендовать не буду, думаю, ты его сам читал ;)
Linux Ubuntu Safari Chrome
 New York
2
0
Зокалебала кревая авторизацея
Оставить одну галочку посередине "Я все прочитал и со всем согласен"

По нажатию будет отмечаться на сервере. Всё.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Первая ссылка очень тяжело читается с мобильного: невнятная авангардная навигация, гигантские буквы и заголовки на весь экран... Чему могут научить такие люди?
Windows Firefox
 Белоруссия
0
0
Propan (pavelprokh)
Первая - это дизайн-школа для дизайнеров же, поэтому предполагает чтение за большим компом. Но ок, вторая то понравилась? Я был в востоге, потому что сам лично испытал растерянность, когда по текущей табличке в Москве пытался разобраться, как платить за парковку. Тупил минут пять, а вроде ж технарь. А там так элегантно, просто волшебно эту табличку упрощают для восприятия.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Вторую пока не читал, спасибо, прочту.
Windows Firefox
 Белоруссия
1
0
Propan (pavelprokh)
Спасибо за убранные ПЛЮС и МИНУС ;)
Linux Firefox
 Mount Laurel
1
0
Михаил (#1684620)
Такой страх был сделан потому что норот на мобильниках промахивался. Полагаю, что сейчас опять начнут жаловаться.

По-моему, надо этим плюс-минусам сделать поля побольше. И, конечно же, заменить ублюдочный hyphen-minus «-» (U+002D) на нормальный minus «−» (U+2212, он же &minus;), который по высоте, ширине и толщине соответствует плюсу, а не выглядит такой козявкой.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
А вот у меня чота большие сомнения, что в конструкцию CSS before { content:'-'} можно вместо '-' вписать "U+2212" или "&minus;", чтоб оно отображалось ;)))
Linux Firefox
 Mount Laurel
1
0
Михаил (#1684620)
content: '\2212';
Linux Ubuntu Firefox
 Москва
3
0
Leonid Kaganov
О. а вот это сработало! Сейчас кэши прочистятся и появится.
Linux Firefox
 Mount Laurel
0
0
Михаил (#1684620)
И margin пропишите не только себе, но и всем остальным тоже (а ещё лучше, наверно, не margin, а симметричный padding). :–)
Windows Firefox
 Германия
2
0
Глеб
>Первая - это дизайн-школа для дизайнеров же, поэтому предполагает чтение за большим компом.
---
Ок. Почитал за большим компом, давно не испытывал такой ярости из-за настолько ужасно неудобного дизайна. Непредсказуемое поведение при нажатии на клавиши, при движении мышкой. Мешающие навороты.
Иллюстрации, показывающие, что на сетку можно наплевать, главное фоном её положить, типа она есть.
Пижженный материал могли бы просто через microsoft Frontpage выложить, и то было бы удобнее читать.

Утащил в копилку ужасных дизайнов.
Спасибо
Windows Firefox
 Белоруссия
1
0
Propan (pavelprokh)
Не стану их защищать. У них там своя внутридизайнерская тусовка и как там они друг перед другом кичатся, мне неважно. Важно, что пишут про правильные вещи.
Windows Firefox
 Германия
0
0
Глеб
Про правильные вещи пишут не они. Они просто спиздили чужой текст, судя по всему даже не вникая.
Windows Firefox
 Белоруссия
0
0
Propan (pavelprokh)
Мне эту ссылку подсеял Тимур Бурбаев. Для меня Тимур - непререкаемый авторитет в дизайне, не думаю, что он мог мне подсунуть фуфло. Он, вроде, даже знает этих людей.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Погуглил и ужаснулся: http://www.artlebedev.ru/studio/workplaces/timur/

Человек, который собственную страничку оформил в стиле "50 оттенков желтого снега" - дает советы по дизайну? ;)))
Windows Firefox
 Белоруссия
0
0
Propan (pavelprokh)
Ой, ну ты хоть не подъебывай, ты ж в курсе дела ;) Скоро будет анонс и, наконец, я развяжу язык ;) Ну и ты, как обещано, получишь комплект один из первых.
Windows Safari Chrome
 Каменск-Уральский
1
0
D.iK.iJ
У них традиция. Делать личные странички пустыми, с шумом телевизора, кровищщей с анимацией или каким-то еще уродством.
Вот лучше бы просто удалили, но нет.
Windows Firefox
 Германия
0
0
Глеб
>Для меня Тимур - непререкаемый авторитет в дизайне
---
Тимур крут, и наверняка один из первых советов, который он тебе дал, был совет никогда не заводить непререкаемых авторитетов в дизайне. :)
Людвиг тоже крут, а вот поди ж ты, рекомендовал посетить мастер-класс Барбанеля, причём не в целях "Никогда так не делайте", хотя казалось бы — ужас бросался в глаза сразу.
Windows Firefox
 Дания
0
0
Propan (pavelprokh)
Да, конечно, они не рекомендуют иметь в дизайне кумиров, но я сужу по результату. Скоро будет анонс того, что они для моей фирмы сделали. У наших немецких партнеров после презентации вырвалось одно -Уау!
Linux Firefox
 Mt Laurel
2
0
Михаил (#1684620)
> Утащил в копилку ужасных дизайнов.

«Программист на фортране будет писать на фортране на любом языке программирования.» :–) Этот сайт явно был сделан теми, кто раньше делал сайты целиком на флэше, а теперь типа избавился от флэша. Без скриптов он вообще ничего не показывает, и даже если посмотреть в код страницы, то там тоже ничего прочитать невозможно, потому что весь текст в шестнадцатеричных кодах.
Windows Firefox
 Германия
0
0
Глеб
Это вы ещё не пытались страницу сохранить или распечатать. :)
А уж про счётчик страниц справа сверху — это вообще без валидолу не поверить, что такое в интернет кто-то не постыдился выложить.

Снизу там толпа фоток, и неужели никто из этих людей не встал с табуретки и не стукнул кулаком по столу, чтобы рюмки зазвенели, и не крикнул "Бляяя, да что ж за хуйню мы тут сотворили?"?
Mac
 Москва
5
0
MegreLaw
Леня, нахуя запретил зум?!
читать невозиожно на iPad Landsacape;
этот комент пишу практичкски не видя букв.
править не могу
Windows Safari Chrome
 Каменск-Уральский
2
0
D.iK.iJ
Пороть, пороть! Хотя, стоп. Встречал заказчиков, требующих отключить зум, так как айпад при тапе увеличивает форму ввода. А это заказчикам не нравится. В общем, других причин обычно нет. )) Ну, только если просто ошибка.

Еще хуже только text-align: justify; - читать тяжело, неудобно. Строка теряется. Текст на мобильном - как кирпич.
Linux Ubuntu Firefox
 Владимир
1
0
Adamos
Другая причина обычно есть - это рекламный блок в правой колонке...
Linux Safari Chrome
 Москва
4
0
iisus
Проблема с просмотром через мобилу не в красоте, а в том, что мотнёшь бывало без задней мысли, а он не страницу прокручивает, а в оглавление выбрасывает.
Windows Safari Chrome
 Каменск-Уральский
1
0
D.iK.iJ
Уверен, там просто какой-нить скрипт листания нужно на мобильных отключить.
Мое любимое:
if(document.getElementsByTagName("body")[0].offsetWidth>=775) {
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Ну если так всем не нравится навигация и лень отключить "навигацию стрелками" в личной карточке, как это сделал я... То я пожалуй ее переведу по умолчанию в отключенную. Честно говоря, сам не знаю, какой в ней смысл.
Linux Ubuntu Firefox
 Владимир
0
0
Adamos
Нюанс в том, что эта самая "навигация стрелками" еще и работает через раз. Точнее, не работает, пока не прогрузятся все комментарии, и не работает, если комментарии были свернуты под кнопку, после нажатия этой кнопки.
Очень спорная фича, да еще и с сенсорными экранами шалит, как не первый раз отмечено.
Linux Safari Chrome
 Москва
3
1
Leonid Kaganov
Это отключается в настройкох личной карточки.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Как я того ждал! :)))

Кстати, я порядка 80 сайтов уже адаптировал: http://dikij.com/wm/adaptaciya-saytov.php

Ну и вдруг помочь чем-то могу. Да, там внизу есть ответы на разные вопросы.
Делаю все вручную, без софта. Года два уже ))) Хотя, забавно. Опыта гора, а до своих сайтов добираюсь редко.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Спасибо. Оно сказало, что все неплохо, но дало загадочные советы по скорости:
- Используйте кеш браузера
- Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

А по контенту:
- Увеличьте размер активных элементов на странице


Вот тоже загадочные совет:

Leverage browser caching for the following cacheable resources:
//cats-home.net/favicon.ico (expiration not specified)
//twitter.com/favicon.ico (expiration not specified)
//www.livejournal.com/favicon.ico (expiration not specified)
//mail.ru/favicon.ico (expiration not specified)
//lleo.me/design/e2/kmail.png (4 hours)
//lleo.me/design/e3/list-remove.png (4 hours)
//lleo.me/design/fon1.jpg (4 hours)
//lleo.me/design/ico/livejournal.com.gif (4 hours)
//lleo.me/design/ico/ljrossia.gif (4 hours)
//lleo.me/design/ico/lleo.aha.ru.gif (4 hours)
//lleo.me/design/kl0.gif (4 hours)
//lleo.me/dnevnik/2015/03/onlimeru.gif (4 hours)
//lleo.me/dnevnik/css/share.css?1449951538 (4 hours)
//lleo.me/dnevnik/css/sys.css (4 hours)
//lleo.me/dnevnik/design/e2/kmail.png (4 hours)
//lleo.me/dnevnik/design/flags.png (4 hours)
//lleo.me/dnevnik/design/img/mobilemenu.png (4 hours)
//lleo.me/dnevnik/design/rss.gif (4 hours)
//lleo.me/dnevnik/design/userpick2016.jpg (4 hours)
//lleo.me/dnevnik/favicon.ico (4 hours)
//lleo.me/dnevnik/js/kuku.js (4 hours)
//lleo.me/dnevnik/js/main.js?1472758070 (4 hours)
//lleo.me/dnevnik/js/transportm.js?1442274379 (4 hours)
//lleo.me/dnevnik/user/1003/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/1241661/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/1943815/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/2742036/230649.jpg (4 hours)
//lleo.me/dnevnik/user/2742036/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/31242/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/4/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/4250583/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/4581781/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/5301878/userpick.jpg (4 hours)
//lleo.me/dnevnik/user/533970/230628.png (4 hours)
//lleo.me/dnevnik/user/533970/userpick.jpg (4 hours)

Еще предлагает:

Optimize the following images to reduce their size by 46.9KiB (23% reduction).
Compressing //lleo.me/dnevnik/user/533970/230628.png could save 35.7KiB (24% reduction).
Не, я понимаю, что если загруженные посентителями PNG перегонять в JPEG, будет компактнее. Но это ведь абсурд?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Там не на все стоит обращать внимания.
Допустим:
/design/ico/lleo.aha.ru.gif (4 часа)
Тут просто увеличить кеширование статики с 4 часов... ну, можно даже до 7 дней для картинок-то.
Это же для jpg и png. Скорее всего в Хитачесс настраивается или на сервере.

Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы - та еще чушь. Вроде как нужно перенести все стили и скрипты к (перед) </body>. Чтобы вначале грузился текст и основные стили, вынесенные в <style>. Но то та еще чушь, да. И сайт будет криво грузиться и нафиг не надо. и работать будет ХЗ как.

Оптимизируйте изображения - пропускаем. Там есть программы по сжатию, но нужно ли оно вам из-за 35,7 КБ - не знаю.
По идее, он тут ругается из-за любой картинки, которая, сжимается мах-width: 100% и меньше реальной ширины. Вроде как под каждое разрешение должны быть свои картинки. ))

Время ответа сервера - зависит от сервера.

Сократите JavaScript - убрать переносы, пробелы и комментарии.

Сократите CSS - тоже.

Увеличьте размер активных элементов на странице - между кнопками и ссылками должно быть минимум 7px. Тут или через margin или через line-height делать.
Там вообще много претензий по расстояниям: Активный элемент <div class="cplu">2</div> и ещё 27 расположены слишком близко к другим активным элементам
По идее, можно "забить". Но обычно оно значит, что с телефона будут промахиваться.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Ага, спасибо.
Я так понимаю, по скорости его в основном возмущает сборка иконок с чужих серверов для комментов.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Нет, срок кэширования в браузере и сжатие картинок CSS, когда выводимый размер меньше реального.
Ну и есть всякие программы для сжатия же. Тоже советует. Например, Фотошоп -> Сохранить для веб и устройств.
Windows Safari Chrome
 Москва
0
0
f,shdfku (#6449716)
>> Не, я понимаю, что если загруженные посентителями PNG перегонять в JPEG, будет компактнее. Но это ведь абсурд?

Обычно делается так
1) Загруженная картинка сохраняется
2) Для нее делается превьюха, хорошо жатая и отмасштабированная, чтоб не раскорячивала верстку
3) Посетителям сайта отдается именно она, с возможностью тыркнув на нее, или на кнопку рядом, посмотреть оригинал (который подгрузится именно в этот момент, а не при изначальном рендере страницы)

Делается это средствами PHP+js достаточно легко
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Вы меня не поняли. Все загруженные посетителем картинки я и так обжимаю. Я не знаю, какой была в оригинале и как называлась картинка, но теперь она /lleo.me/dnevnik/user/533970/230628.png 323x600. То, что она осталась PNG, а не JPG - как я могу взять на себя ответственность менять еще и тип файла? А если PNG в некоторых случаях компактнее JPG? А если на PNG мелкие буквы, которые на JPG станут не видны и пропадет весь смысл?
Windows Safari Chrome
 Москва
2
0
f,shdfku (#6449716)
А, ну тогда ок. Действительно не так понял.
Linux Safari Chrome
 Москва
0
0
_ (ngs-govno)
Мобильники уже давно дошли до такого уровня, что с них ваш (да и вообще почти любой) сайт можно смотреть без проблем. Ещё бы листание по двойному тапу убрать...
Впрочем, окно ввода комментария всё так же неудобно
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Не дошли. Там тонкость. Размер экрана не равен пикселям в CSS. Ну и работать с сайтом с зумом - то ещё испытание, На себе проверил.
Да и тут все правильно если большой экран - сайт выводится на всю ширину, без изменений.
Windows Safari Chrome
 Mt Laurel
1
3
Gena Kukartsev
Леонид, попробуйте Bootstrap, по-моему самая простая и логичная библиотека CSS, стандартных джаваскриптных элементов, и сопутствующих материалов. По-моему её твиттер придумал, http://getbootstrap.com

P.S. Ну а если ещё и удобная система для клиентского джаваскриптa нужна, то AngularJS. Эти две библиотеки позволяют даже довольно неопытным аналитикам быстро делать приличные прототипы с веб интерфейсом. Ну уж а энтузиасту там весь мир открыт.
Linux Safari Chrome
 Москва
3
0
Leonid Kaganov
Зачем читателям сайта джаваскрипт??
Windows Safari Chrome
 Wisconsin Rapids
1
1
Gena Kukartsev
Читателям наверное незачем, только чтоб сайт работал, а так большинство из них вероятно не в курсе что это.

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

А с Angular вообще халява: привязал объект к элементу ДОМа и забыл, обновляй его когда надо - он на странице правильно отобразится.

Но вообще дело вкуса, интернет вообще не нужен, если совсем в широком смысле. Можно мочой на снегу писать. :)
Windows Safari Chrome
 Каменск-Уральский
1
0
D.iK.iJ
В попу бутстрап, правда.
Тут все 10 строками кода решилось, а вы с библиотекой. А потом Леонид Жиквери накатит...
И тут я точно отпишусь.
Windows Firefox
 Германия
1
0
Глеб
Жиквери с обновлениями — енто для тех, кто плохое содержание пытается хоть чем-нибудь вытянуть. И делает ещё хуже, да.
Linux Safari Chrome
 Днепропетровск
0
0
Сергей Куликов
Ангуляр для блога?) Бутстрап для минималистичного сайта?
Mac Safari Chrome
 Азербайджан
1
0
М083 (#6472444)
Почему нет? При скачивании бутстрапа можно указать только те модули, которые нужны. Не обязательно качать полную версию.
Linux Ubuntu Firefox
 Москва
5
1
Leonid Kaganov
А можно указать при скачивании, что он не нужен вообще? ;)
Windows Safari Chrome
 Wisconsin Rapids
2
0
Gena Kukartsev
Кажется нет, но можно их вслух нахуй послать при скачивании. :)

Как они могли сделать простым как раз тот самый адаптивный дизайн, о котором спрашиваете, да еще с кучей примеров, которые бери и вставляй, да с заточкой под мобильные устройства, если надо! Козлы - слов нет!
Windows Safari Chrome
 Wisconsin Rapids
2
0
Gena Kukartsev
А вы знаете что-то проще бутстрапа? Лично для меня появление бутстрапа сделало расположение элементов на странице из почти невозможного тривиальным. Опять же, если кому не нравится, то и ладно, но многим вроде меня бутстрап сильно время экономит и выглядит нормально.
Windows Safari Chrome
 Каменск-Уральский
2
0
D.iK.iJ
Проще Бутстрапа

@media screen and (max-width: 775px) {
img {max-width: 100% !important; height: auto !important;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}
}
Windows Safari Chrome
 Austin
0
0
Gena Kukartsev
Да, это вне всякого сомнения проще бутстрапа. И даже с высокой вероятностью работает и что-то полезное делает. Как они не догадались? Хотя погодите...
Windows Safari Chrome
 Mt Laurel
6
0
Gena Kukartsev
Кстати о еже: где посмотреть, сколько он прошел?
Windows Safari Chrome
 Москва
2
0
vivliofika
на главной
Linux Ubuntu Firefox
 Тольятти
1
0
nobody
> В общем, если будут советы

то тебе они, скорее всего, не понравятся. Использовать готовую CMS (движок) не предлагаю, если стал свой городить, значит надо было.

> а вы мне не помогаете.

Если разместить свой движок на github, то, может быть, кто-то поможет. Просто открыть код "как есть" недостаточно.
Linux Ubuntu Safari Chrome
 New York
3
0
Зокалебала кревая авторизацея
Джумлу.
И потом спрашивать "как прикрутить к ней свой скрипт если он не прикручивается?!11"
Linux Safari Chrome
 Москва
1
0
Leonid Kaganov
При чем тут движок? Речь про дизайн.
Windows Safari Chrome
 Москва
0
0
f,shdfku (#6449716)
Вот, кстати, про github крайне дельный совет
Linux Safari Chrome
 Москва
2
0
Leonid Kaganov
Да он там где-то валялся первые года три, и никакого смысла не было - одни лишь проблемы с обновлением версии. К дизайну-то это какое отношение имеет? Дизайн любой ставится.
Windows Safari Chrome
 Москва
0
0
f,shdfku (#6449716)
Дизайн - это, по сути, набор css правил, может быть иконки/текстуры, плюс немножко js. Собственно никто не мешает на гитхабе держать ветку с разными дизайнами.
По поводу сложности, ну, собственно, как с любым инструментом, пока не разобрался - он сложен, как разобрался - начинаешь думать "как же это я без него жил раньше!?".

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

Как правильно заметили на одном общеизвестном ресурсе, проект развивается только тогда, когда у него есть комьюнити. Наличие комьюнити же, не в малой части, зависит от удобства совместной работы над проектом. Можно даже сказать, что это обязательное условие его появления.
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Я что-то не заметил ни малейшего развития проекта, пока он три года лежал на Гитхабе. Зато когда убрал его оттуда и сделал удобный инсталлятор и собственную обновлялку из браузера одной кнопкой в админке - вот тут сразу пошло развитие ;)
Windows Safari Chrome
 Москва
0
0
f,shdfku (#6449716)
Не, ну вы мастер подмены понятий, кто бы спорил. :)
Можно долго рассказывать про то, что причины не связаны со следствием - тому есть большое количество доводов, но наверное не стоит. :)

Единственно, на что хотел обратить внимание, так это на то, что удобный инсталлятор и установка одной кнопкой ну вообще никак не противоречат размещению исходников на гитхабе. Это вещи связанные друг с другом чуть меньше чем ничем.
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Я просто не вижу смысла, а вижу множество проблем. Исходники базового уровня вот они: http://lleo.me/dnevnik/minimum.zip От того, что они будут на Гитхабе, ничего не изменится. Уже были - никакого эффекта.

Гитхаб наверно неплохое средство разработки проекта, когда над ним работает большая команда. Я за все эти годы не вижу вокруг такой команды. И даже не вижу в ней необходимости. Более того: сильно боюсь, что прибегут юные кодеры, напихают в проект Джумлу, Бутстрап, Джквери, Хуери, и всё ляжет и погибнет под грузом чужого кода, который никто не понимает.
Windows Safari Chrome
 Москва
2
0
f,shdfku (#6449716)
Позвольте развеять несколько заблуждений, после чего я отстану :)

1) Не понабегут. Никто (у кого нет соответствующего разрешения) не может внести изменений в master branch. Можно лишь создать патч, который майнтайнеры проекта могут принять, а могут и нет. Если что, всегда можно сослаться на "в правилах проекта написано, что нельзя то-то и то-то", а можно даже и не ссылаться.
2) Гитхаб удобен, даже когда над проектом работает один человек, так как предоставляет крайне удобную систему контроля версий (git собственно). Например над своими проектами я работаю из дома, с рабочего компа и с ноутбука и на каждом из них мне всегда доступны текущие исходники со всей историей изменений. По своему опыту могу сказать, что преимущества заметны даже когда команда состоит всего из двух человек.
3) Любой проект - это не некая статичная структура. Он живет, развивается. Сейчас вам интересно им заниматься, а завтра изменятся жизненные обстоятельства и он тихо умрет. Естественно, пока проект сырой и не сильно востребованный (извините, но на первых порах он у вас именно такой и был), то и интереса к нему не будет, как не будет и желающих его развивать. Если сейчас он стал интересен и люди готовы к нему подключиться, но не могут, то...

Самое лучшее, что может случиться с опенсорсным проектом - это выход на самоподдержание. Когда уход основателя/основного разработчика не ведет к его гибели. А добиться этого можно только если есть постоянных приток/ротация коммитеров.
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Это абстрактный круглый спор в вакууме.
Выложить этот самый мой проект на Гитхаб может любой человек за минуту, не обязательно я. И что изменится? Вот на этот вопрос ответа нет.

Помимо Гитхаба енсть еще много десятков его аналогов: https://startpack.ru/application/github/alternatives А можно проект выложить в Торренты, например. Если самоцель - куда-нибудь выложить, помимо ZIP-архива на сайте разработчика.

Чтобы понять, зачем проект на Гитхабе, надо понимать две вещи:

1) Лично мне Гитхаб не удобен. Мне проще внести изменения на одном источнике и зайти браузером на все остальные свои сайты, и в миг обновиться - на многих моих проектах у меня нет ни Git, ни доступа к Шеллу.

2) Я не вижу людей, которые готовы заниматься проектом, но их удерживает отсутствие Гитхаба. Вот лично вы что конкретно готовы сделать?
- Найти, обследовать и привинтить хороший онлайн-редактор для загруженных картинок?
- Настроить пиратский автопостинг заметок в Фейсбук вне АПИ при помощи виртуального браузера Phantome NodeJS?
- Заняться интеграцией движка с блокчайном?
- Написать документацию с примерами использования для юзера по каждому модулю движка, чтобы людям стало удобно пользоваться Биноником?

Интересных задач миллион. Подозреваю, что лично вы не готовы. Потому что работка, понятное дело, адская - не два байта переслать. А кто готов? Да никто. Все готовы лишь советовать. Один - Джквери советует, другой - Бутстрап, третий - Гитхаб :)
Windows Firefox
 Астрахань
3
0
V_Okorokov
Наконец-то хоть так!!! Дождались!!!
Windows Firefox
 Омск
2
0
Макс
Дневник отображается хорошо, по размеру. У Вас есть в планах свои тексты так же адаптировать для наладонников?

И ещё, время от времени, при нажатии на статью из списка нечитанного, или текст, вместо статьи выбрасывает на Главную страницу. После нажатия кнопки "назад" переводит с главной страницы на нужную статью.
Linux Firefox
 Mount Laurel
0
0
Михаил (#1684620)
> тексты так же адаптировать для наладонников?

Что там можно адаптировать? В горизонтальной ориентации должно и так нормально читаться.
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
А что там в текстах адаптировать? Там же верстка минимальная - заголовок и текст пошел. Никаких колонок и навигации в текстах нет.

Выбрасывание на главную страницу отключите в своей личной карточке. Типа навигация стрелками.
Windows
 Самара
0
0
Maxim Chistyakov
То тексты отображаются мелко
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Спасибо. Теперь лучше?
Windows Mac Safari
 Самара
0
0
Maxim Chistyakov
Извините, что заставил ждать ответ вечность. Теперь очень хорошо. Спасибо, будет удобно читать ваши книги в поездках.

Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
А почему и как это исправить?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Без <meta name=viewport content="width=device-width, initial-scale=1"> все будет мелко, даже если адаптивно )))

Если вопрос был про исправление видео (включая Ютуб), то у меня основные стили такие:

img {max-width: 100% !important; height: auto !important;}

iframe, textarea, input, button, submit, select, video, object, embed {max-width: 99% !important;}

table, span, div, ins {max-width: 100% !important;}
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
Спасибо, поставил и это.
Windows Mac Safari
 Самара
0
0
Maxim Chistyakov



Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
А мета тег? Без него страница будет показываться не как мобильная.
А уменьшение картинок? В Пуговицах вот прокрутка будет.
Не, это важно.
Windows Firefox
 Казахстан
0
0
provocateur-b
Если обязательно хочется отделить боковую колонку, а тонких линий не хочется (даже серых), то можно сделать фон чуть темнее основной страницы (на которой бы просто белый оставить, без узоров.

А вообще, Open Sans грузящийся с googlefonts, белый фон, черные буквы. У вас все-таки сайт, где содержимое важно, а внешний вид уже как бы так... не должен на себя внимание оттягивать.
Linux Firefox
 Mount Laurel
2
1
Михаил (#1684620)
> Open Sans грузящийся с googlefonts

И ещё «говна вагон»... У всех нормальных людей настроен свой любимый шрифт для "font: sans-serif", не надо им мешать. У меня от таких любителей всякого грузящегося рукоделия даже специально в Stylish прописана замена шрифтов на нормальные.
Linux Safari Chrome
 Санкт-Петербург
1
0
Moroshka
Страницы открываются значительно быстрее, даже с плохонького мобильного интернета, спасибо!
Присоединюсь к просьбам разрешить масштабирование.
P.S. Почему вдруг Питер? От нас до Питера 4 тыщи км..
Linux Safari Chrome
 Москва
2
2
Leonid Kaganov
Как страницы могут открываться быстрее??? Загадка профессора Плацебо...
Windows Safari Chrome
 Москва
4
0
f,shdfku (#6449716)
Браузер, перед тем как начать рендер(что довольно тяжелая операция), строит DOM дерево и, в силу своих возможностей, пытается как-то впихнуть не впихуемое. Соответственно грамотная верстка может ускорить ПОКАЗ страницы. Т.е контент загрузится с той же скоростью, а вот браузер страницу отрисует гораздо быстрее.
Linux Safari Chrome
 Санкт-Петербург
1
0
Moroshka
Благодарю вас за коммент!
А то как-то обидно было
Windows Safari Chrome
 Москва
0
0
f,shdfku (#6449716)
Вот статья хорошая на эту тему https://habrahabr.ru/post/244815/
Windows
 Россия
0
0
Anatoliy Uglov
Только я не понял, а зачем нужен именно max-width? Задача же в том, чтобы стало нормально на небольшом разрешении, а не в том, чтобы что-то поменялось для тех, у кого 1920*1080. Чем плохо растягивать текст на всю ширину большого экрана?
Linux Firefox
 Mount Laurel
1
0
Михаил (#1684620)
> Чем плохо растягивать текст на всю ширину большого экрана?

Вам правда так удобно читать?

Если немножко поискать на тему «оптимальная длина строки для чтения», то станет понятно, что это далеко не всем удобно. ;–)

Другое дело, что по-нормальному размеры текста надо задавать не от балды в пикселях, а в шрифтовых размерах (em и ex).
Windows
 Россия
0
0
Anatoliy Uglov
На данный момент, непривычно и несколько неуютно. Когда раньше текст был написан с широтой и размахом, а теперь кучкуется посередине экрана, как будто мерзнет или боится чего-то. При этом остальные элементы оформления никуда не делись - ссылки на соцсети и страница логина прижаты к правому краю, комментарии по ширине экрана.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Адаптация для больших экранов - это важно. Видимо, у вас не сильно огромный.
Хотя, я выбрал 1300
Windows Safari Chrome
 Санкт-Петербург
0
0
cats-home.net@Кошак (cats-shadow)
Ну как сказать...
IMHO, вопрос весьма субъективный.
Меня вот широкие поля анноят. Те же вк/fb пришлось при помощи stylish допиливать до нормального читаемого вида. :)
Windows Firefox
 Los Angeles
11
0
vinny-the-poo
ОСТАВЬТЕ КРАСНУЮ НИТКУ В ПОКОЕ!!!

(иначе плохо будет видно, принадлежит очередной коммент верхнему уровню или уже пошёл по ветке)
Windows Firefox
 Израиль
4
0
braintunic
> ОСТАВЬТЕ КРАСНУЮ НИТКУ В ПОКОЕ!!!

+1!
Руки прочь от красной нитки!


Linux Firefox
 Mount Laurel
1
0
Михаил (#1684620)
Ну вот! Комменты уже пошли по ****е. :–(

Леонид, ви таки если нитку убрали, то сделайте в левой колонке другой фон, как советовали.
Windows Firefox
 Челябинск
3
0
vinny-the-poo
Так у него и был другой фон, слабо отличающийся. Так теперь и нитку убрал и фон одинаковый сделал, блин. Т.е. прямо противоположное тому, что просили, да ещё и с добавкой.

Вот теперь действительно комменты пошли по пизде.
Windows Opera
 Москва
3
0
киборд
Таки да. Ни сетки, ни нитки.

В тредах самое гиморное - понять, к какому уровню камент относится. Вертикальные линии/расцветка/т.п. могли бы помочь - но вебдизайнеры традиционно этот аспект игнорируют. Крутите туда-сюда, курсор с глазомером в помощь. Крайне неудобно.
Mac Safari Chrome
 Нидерланды
10
0
Igor
>убогим, у кого экран меньше 900
Унижение достоинства лиц, принадлежащих к социальной группе "у кого экран меньше 900" :)
Windows Safari Chrome
 Санкт-Петербург
0
0
cats-home.net@Кошак (cats-shadow)
Ну вот могу поделиться тем, что у меня сделано в этом плане. Надо?
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
А что сделано?
Windows Safari Chrome
 Санкт-Петербург
0
0
cats-home.net@Кошак (cats-shadow)
Как раз развлекался с адаптацией под мобильники своих сайтов, что на этом движке работают. Честно скажу, что не сильно допилено относительно "базового шаблона". Обрабатывается несколько разных значений ширины отображаемой области броузера.
Проще глянуть:
http://cats-shadow.cats-home.net
http://neko-ru.net
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Хорошо. :) Но на первом забыли обнулить text-indent для p c картинкой. А сточнее, сделать margin-left: -5%; у такой картинки, чтобы справа не вылазила.
Windows Safari Chrome
 Санкт-Петербург
0
0
cats-home.net@Кошак (cats-shadow)
TNX!
>Но на первом забыли обнулить text-indent для p c картинкой
У которой картинки? Сейчас поправлю. :)
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
На главной. В статье "Чойта маркетологи dnevnik.ru оборзели"
Windows Safari Chrome
 Санкт-Петербург
0
0
cats-home.net@Кошак (cats-shadow)
А... понял.
Надо подумать. Там всё модулем ANONS формируется.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
p.d img {margin-left: -5%;}
Windows Firefox
 Санкт-Петербург
3
0
Tarn
1. Глюк - если сжать браузер, кликнуть на "гамбургер" один раз для отображения левой колонки сверху, кликнуть второй раз, чтобы вернуть как было и обратно расширить браузер, то левая колонка отобразится пустой.
2. Назначьте лучше убогими тех, у кого экран меньше 800, а то у меня на одном девайсе как раз стандартное 800х600 стоит, и всё влезает распрекрасно.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Сразу добавлю для Леонида - как поправить.
1) В @media screen and (min-width: 901px) {
Прописать display: block !important; для сворачиваемой колонки. Чтобы на разрешениях выше 900 - всегда была развернута, даже если сворачивали скриптом.

2) Тот же Айпад сам сжимает любые сайты как хочет и никого не спрашивает. Часто это - кладезь неочевидных глюков.
Linux Ubuntu Firefox
 Москва
1
0
Leonid Kaganov
@media screen and (min-width: 901px) {
aside { display: block !important; }
}

Так?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Да. при размере крана 901 и больше мы всегда показываем aside, даже если скрыт скриптом.
Windows Safari Chrome
 Израиль
0
0
Пашка
>на три с минусом


воу воу полегче там, скорее ноль по Кельвину.
Linux Firefox
 Сингапур
1
0
Vitaly
CSS и JS зря вставлены в текст страницы, т.к. при каждой перезагрузке они заново загружаются клиентом и не кэшируются. Лишний трафик.

Внешние JS и CSS кэшируются браузером на время, указанное в соответствующих HTTP заголовках, и до истечения кэша не запрашиваются заново.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Я вас умоляю, там десяток строчек, о чем говорить?

Вы лучше сравните общий траффик страницы моего сайта с трафиком страницы любого другого блога на Вордпрессе, Джумле и прочем говне. И подумайте, сколько мегабайт я вам экономлю ежеминутно ;)
Windows Safari Chrome
 Израиль
0
0
Пашка
Кто то сегодня считает трафик?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Гугл наоборот советует вставлять основные стили и скрипты в тело страницы. Так как каждый запрос к файлу - это время. И страница не загрузится до обработки содержимого. Ну и количество потоков ограничено же.
Linux Firefox
 Сингапур
0
0
Vitaly
Вы давно не заглядывали в гугловские гайдлайны похоже. Сейчас Google как раз советует всё грузить в отдельных файлах асинхронно с указанием длительного времени кэширования, причём предлагается подключать все не критичные JS/CSS в самом конце, дабы не блокировать рендеринг веб-страницы.

Потоки теперь также не проблема, т.к. новый протокол HTTP/2, заменивший уже морально и технически устаревший HTTP, шагает по планете.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Пункт
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

https://developers.google.com/speed/pagespeed/insights/?url=[...]

А там
https://developers.google.com/speed/docs/insights/OptimizeCS[...]

Рекомендации
Если внешние ресурсы CSS имеют малый объем, их можно вставить непосредственно в документ HTML. Подобное встраивание позволяет браузеру продолжать загрузку страницы.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Ну, из меня дизайнер еще хуже. Не как-то так.
Лучше бы max-width: 1300px был у боди или у всего контейнера (c margin: auto конечно). Ну и так, немного развлекся с тенями и скруглением.


Linux Ubuntu Firefox
 Москва
3
0
Leonid Kaganov
Это как?! Где такое скочать одним файлом без смс и регистрации?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Я просто игрался с отступами. В хроме по F12 менял стили в инспекторе.
Ну и сделал
body {
max-width: 1300px;
margin: auto;
}
И разные другие правки вносил. Если нужно - гляну еще раз что делал и пришлю список изменений в стилях.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Спасибо!
Картинку я уже немножко скруглил.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Что получилось (уменьшил чтобы влезло):

Так. Что я делал (где значение none - можно удалить строку):

#post {
padding: 0px 2%;
max-width: none;
}
#bodyz {
text-align: left;
}
.twoCol #sidebar1 {
border-right: none;
background: #ffffff;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
border-radius: 0px 0px 7px 7px;
}
.twoCol #mainContent {
border-left: none;
}
#copyright {
padding: 0 2%;
}
#comments {
border-top: #c7c6c6 solid 1px;
}
#copyright table {
margin-top: 15px;
}
#comments {
width: auto;
padding-left: 2%;
padding-right: 2%;
}

Для "Страницы, которые привлекли мое внимание за последние дни, рекомендую:"
background: #ffffff;
border-radius: 5px;

Для аватарки:
border-radius: 7px;

.c0, .c1, .c2, .c3, .c4, .c5, .c6 {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
border-radius: 7px;
max-width: 100%;
}
.c1, .opc {
background-color: rgba(241,241,241,0.7);
}
.c2 {
background-color: rgba(255, 251, 223, 0.7);
}
#comments .r {
margin: 50px 0px; (оно в самом HTML прописано в 2 вариантах)
}
#commpresent {
margin-left: 0px;
margin-right: 0px;
}
.l.r { // class="l r"
margin-left: 0px !important; (тоже в шаблоне)
}
.l.r + div { //следующий за "l r" блок
margin: 10pt 0pt; (тоже в шаблоне)
}

Ну и в комментариях у 1 сделал margin-left: 0px; у второго - margin-left: 4%; и так далее.

<< предыдущая заметка - width="96%" у таблицы.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
.ctxt {text-align: left;} - тоже было бы хорошо.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
У меня на сайте text-align принципиально всегда justify - это призвано было когда-то подчеркивать, что сайт литературный, и его автор типа профессиональный писатель, предпочитающий верстку, принятую в книгах ;)
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Переносики: -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;

Не везде работает, иногда страдает слишком большим количеством переносов, но вдруг поможет.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Уф-ф-ф... Спасибо, бОльшую часть осилил!
Windows Safari Chrome
 Москва
2
0
vivliofika
молодец!
Хорошо выглядит. И преемственно.
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Пожалуйста!
Не думаю, что там нужно абсолютно все. Просто сейчас сам стараюсь хоть как-то разобраться с дизайном. А тени, прозрачность и одинаковые отступы - это весело.
Кстати. Очень забавно, у самого был похожий вариант, но я испугался )))

Ну и на будущее. Можно бы все отступы привести примерно к 1 значению.
Это:
1) width="98%" для таблиц "предыдущая заметка"
2) .preword {padding: 0 2%;}
3) Оставить только margin-bottom: 10px; в блоке "пожаловаться на эту публикацию администрации портала"
4) И в блоке ниже оставить только margin-bottom: 10pt; (тут чего-то в пунктах)
5) Ну и остаются комментарии. Можно их начинать с margin-left: 0px, но то симпатично, только если убрать у них max-width: 80%

Еще для Логина в правом верхнем углу
right: 2%; padding-right: 10px;


Windows
 Россия
0
0
Anatoliy Uglov
может еще добавить в
.twoCol #container
max-width: 1300px;
posision: fixed;

А из twoCol убрать max-width?

Чтобы на большом экране всю страничку прижать влево. На мой вкус, так лучше, потому что есть левая колонка и с воздухом слева смотрится хуже, чем с краю экрана.
Windows
 Россия
0
0
Anatoliy Uglov
Сейчас все тултипы уплывают от своего места, если экран широкий. body {position: fixed;} полностью спасает. Все прижато влево и и тултип не будет уплывать правее, чем надо.



Windows
 Россия
0
0
Anatoliy Uglov
Как-то так:




UPD: Ой. Не надо именно так. Так скролл пропадает напрочь.
Linux Ubuntu Firefox
 Москва
2
0
Leonid Kaganov
Мне так не нравится. Я и стихи обычно по центру экрана выдвигаю. Человек же в центр смотрит, а не в угол.
Windows
 Россия
0
0
Anatoliy Uglov
)))) Это особенность моего восприятия, похоже. У меня сейчас два монитора, так вот "центр", для меня, это как раз левый край правого, основного, монитора.

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



Windows
 Россия
0
0
Anatoliy Uglov
Надо в функции posdiv добавить поправку на фактические координаты самого внешнего div id=container, видимо.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Не очень понимаю, о чем речь.
Windows
 Россия
0
0
Anatoliy Uglov
Напиши вот так в main.js:

function posdiv(id,x,y) { // позиционирование с проверкой на вылет, если аргумент '-1' - по центру экрана
var e=idd(id),W,w,H,h,DW,DH;
if(e.style.display!='block') otkryl(id);
W=getWinW(); H=getWinH(); w=e.clientWidth; h=e.clientHeight;
if(x==-1) x=(W-w)/2+getScrollW();
if(y==-1) y=(H-h)/2+getScrollH();
x=x-Math.round(document.body.getBoundingClientRect().left);
DW=W-10; if(w<DW && x+w>DW) x=DW-w; if(x<0) x=0;
/*DH=getDocH()-10; if(h<DH && y+h>DH) y=DH-h;*/ if(y<0) y=0;
e.style.top=y+'px'; e.style.left=x+'px';
otkryl(id);
}

Новая строчка вот:
x=x-Math.round(document.body.getBoundingClientRect().left);

Для узких экранов там ноль будет. Для тех, которые шире, чем 1300, будет как раз поправка на левое поле, которое левее body образуется.
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Ага, а старые браузеры все нафиг повиснут. Нет, спасибо.
Windows Firefox
 Екатеринбург
0
0
Anatoliy Uglov
Посмотрел совместимость, оно поддерживается, начиная с FF 3.0 и IE 4.0. Неужели кто-то пользуется более старыми? Почему оно может зависнуть? Замени тогда на (W-document.body.clientWidth)/2 Должно быть одно и то же - доберусь до большого экрана - проверю.
Windows
 Россия
0
0
Anatoliy Uglov
Да, так тоже работает, только надо взять еще поправку на ширину скролла. Проблема в том, что в текущей верстке я упорно получаю ноль, вместо законных 17-ти.
Windows Safari Chrome
 Новосибирск
0
0
Nik
Та же проблема что и в вк например - не учитываются широкие мониторы. По 20% рабочей области с каждой стороны пустые. На квадратном норм.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Предлагаешь убрать крапчатую рубашку по бокам, чтобы обозначить, где сайт закончился?
Windows Safari Chrome
 Каменск-Уральский
0
0
D.iK.iJ
Обычно наоборот советуют. Центр оставить c нужным фоном, а боковые поля сделать темнее, чтобы глаза не уставали. Вроде что-то похожее на новом vk.com

Кстати, пишу комментарий и вижу, что body c max-width дают глюк с "затемнением". Оно не до края. :(
Прописать бы max-width и margin: auto другому блоку. Можно даже <body><div> сделать. Или там #container есть. Вроде подойдет.
Windows
 Россия
0
0
Anatoliy Uglov
Во! Вот сейчас хорошо стало, когда добавилась красная линия слева. И, в целом, каких-то бросающихся в глаза проблем, вроде, не осталось больше.
Windows Safari Chrome
 Израиль
1
0
Igor
С каждым заходом страничка все чудесатее и чудесатее.
Linux Ubuntu Safari Chrome
 Одесса
4
0
Azimut
как же хороши сайты, где нет бутстрапа и как всё просто :-)
Windows Safari Chrome
 Москва
0
0
m61
(офф) Лео, ты не знаешь, случайно, будет какая-либо встреча, чтобы помянуть нашего Майора, ушедшего от нас год назад?
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Пока не слышал...
Windows Safari Chrome
 Wisconsin Rapids
0
0
Gena Kukartsev
Когда щелкаю на "нечитанное", окошко всплывает сбоку, как будто по-прежнему считает середину от края экрана, а не от края страницы.
Windows Firefox
 Челябинск
0
0
vinny-the-poo
На 27.10.2016, 6:47 МСК пока получается говно.
Firefox
 Ростов-на-Дону
3
0
priehali
Леонид, что же ты содеял? Это же… преступление! Супротив сирых и убогих, лишённых блага пользования десктопом, и, зело, находящихся в дороге.





P. S. Адаптивность — от лукавого.
Mac Safari
 Израиль
1
0
braintunic
Хотели как лучше, а получили вот какую выдающуюся адаптивность ;)

На моем смартфоне та же картина - и это при разрешении экрана 2560х1440.
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Сорри, я запутался и устал. Пока так останется. У меня сейчас больше нет сил копаться в дневнике, куча работы.
Windows Firefox
 Los Angeles
3
0
vinny-the-poo
Ага, всё испортил и свалил. Ну хоть какое-нибудь обозначение левого поля, по которому равняются комменты первого уровня, сделать, если уж красная нитка не нравится. Хотя я не понимаю, кому она могла не нравиться, кроме профдеформированных на всю голову веб-дизайнеров, захвативших сейчас в дневнике власть.
Windows Opera
 Красноярск
0
0
shur-ik
«Хотя я не понимаю, кому она могла не нравиться, кроме профдеформированных на всю голову веб-дизайнеров, захвативших сейчас в дневнике власть.»

О! Золотые слова.
Linux Ubuntu Firefox
 Москва
0
0
Leonid Kaganov
Не понимаю, о чем речь. У меня все нормально - что с компа, что с мобильника.
Windows Firefox
 Израиль
0
0
braintunic
> У меня все нормально - что с компа, что с мобильника

С компа - исчезла красная нитка.
Теперь совершенно невозможно различить коммент первого уровня.

С мобильника - совершенно невозможно прочесть глубоко вложенные комменты, смотри скриншот ниже.
Это на Samsung Galaxy S6 Edge+, в стоковом браузере, причём даже если ставишь "Request computer version" (вместо "Request mobile version").


Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Я не знаю, почему, и как исправить. Сорри, так и будет теперь.
Mac Safari
 Израиль
0
0
braintunic
А откатиться назад гордость не даёт? ;)
Улучшений-то практически никаких нет, кроме совсем эзотерических мелочей, IMHO.
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Утеряно. Теперь будет так, пока кто-нибудь не объяснит, что и где исправить. А у меня все прекрасно видно, кстати.
Mac Safari
 Израиль
4
0
braintunic
> Утеряно.

А кто-то день назад утверждал:
> У меня в движке, к слову, сделан свой достаточно развитый «гитхаб», включая просмотр версий и еще кучу функций.

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

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

Необходимость настоящей системы контроля версий (типа того же Git) будет реально осознана только когда потребуется одновременная поддержка нескольких актуальных версий проекта, либо когда потребуется реальная параллельная работа нескольких программистов (не на уровне: "а вот бы кто-нибудь взял этот zip-файл с исходниками и вернул мне его в два раза лучше, и чтобы всё уже было отлажено и готово к использованию").
Windows Safari Chrome
 Austin
0
0
Gena Kukartsev
Говорили же - гитхаб! :)
Firefox
 Ростов-на-Дону
0
0
priehali
Всё ясно: «глисты» нынче в моде.

Очевидно: надо либо ограничить минимальную ширину комментария, либо уменьшить размер отступов.

Также подобная проблема наблюдается в аякс-окошках:



Windows
 Россия
0
0
Anatoliy Uglov
Я бы еще добавил nobr вокруг div-ов с rul0, cplu, cmin kmail и cnam. Чтобы вся эта конструкция не плыла, даже если места не хватает уже и на нее наезжает ctim, cbro и cwho. Вообще это место переверстать - правую часть в один div c float: right, левую - в другой. Чтобы они перестали перекрывать друг друга, когда места мало по горизонтали. И никаких дополнительных float-ов и position для внутренних маленьких div-ов, как сейчас, можно будет не делать.
Windows Firefox
 Los Angeles
1
0
vinny-the-poo
Офф-ТопЪ:

С интересом читаю лекцию, что по ссылке "Энергетика будущего в представлении фантастов".

Но боже, кто эти люди, что делали запись текста по выступлению?! Куча грамматических ошибок! Вот один из примеров: «Герберт Уэлс, к которому мы сегодня еще вернемся, говорил, что в 1953 году новый двигатель, поставит радиацию на службу человека и заменит паровые турбины.»

Не знаю, почему, но меня особенно колбасит, когда запятая ставится между подлежащим и сказуемым в простейших случаях, когда между ними нет никаких придаточных и сложноподчинённых объектов. Может быть потому, что, в отличии от не столь простых случаев (вводные слова, предлоги, определения...), здесь уж совсем вопиющий пример тупизны?

Очень интересная заметка была у Дмитрия Быкова. О том, что в условиях усиления деспотизма власти люди начинают пихать всё больше запятых в свои тексты куда ни попадя.

Обидно ещё то, что в данном случае читатель будет отождествлять написанный текст с зачитанным автором. "Как же так? Это же известный писатель, литератор, етить его! И такой грамотей."
Linux Firefox
 Boulder
0
0
Михаил (#1684620)
Зато про корабль с инобизонными камерами записали ещё веселее, чем афтырь сказал. :–D

Интересно, это камеры с инопланетными бизонами? Или жутко искажённое «анабиознными»?

> Очень интересная заметка была у Дмитрия Быкова.

Что-то по словам «Быков, деспотизм, запятые» не ищется.
Windows Firefox
 Los Angeles
0
0
vinny-the-poo
Дочитал до конца. Ну, с запятыми, понятное дело, ещё привалило. До смешного доходит. Идут подряд два абзаца одинаковой конструкции типа: "В 1111 году, Джон Смит писал..." В первом ненужная запятая стоит там, где она имеется в вышеприведённой цитате, во втором её нет.

Но круче всего про американский флаг, который «мог бы развИваться на Марсе и Венере».
(ага, и постепенно развиться в высшие формы жизни)

Стыдоба, блять... Доклады, сцуко...

«Что-то по словам «Быков, деспотизм, запятые» не ищется.»

Дмитрий Быков «Орфография как закон природы»

«Я уж не говорю про запятые, которым не повезло дважды. Сначала, в либеральные девяностые, их ставили где попало или игнорировали вовсе, утверждая, что это авторский знак. Школьники до сих пор широко пользуются неписаным правилом: «Не знаешь, что ставить, — ставь тире». Не зря его так и называют — «знак отчаяния». Потом, в стабильные нулевые, люди начали испуганно перестраховываться и ставить запятые там, где они вообще не нужны.»
Linux Firefox
 Mt Laurel
0
0
Михаил (#1684620)
> В первом ненужная запятая стоит там, где она имеется в вышеприведённой цитате, во втором её нет.

Тоже бесит. Я из-за этого английские статьи читать терпеть ненавижу — афтыри пунктуируют как попало, так что даже в одном тексте одинаковые конструкции написаны по-разному, а редактырям это хоть бы хрен. :–(

> Дмитрий Быков «Орфография как закон природы»

Почитал/посмотрел. Что удивительно, он говорит «дебатируется», а написано «обсуждается».
Windows Firefox
 Челябинск
0
0
vinny-the-poo
Ладно хоть не "будируется". У меня начальник очень любит это слово, затошнил уже.
Windows Firefox
 Израиль
0
0
Fima
У меня и раньше неплохо открывалось, а сейчас вообще замечательно стало. Красные линии мне нравятся.
Linux Safari
 Москва
0
0
да-да Слушаю
читать не удобно. Особенно коменты. Коммент совсем не пишется.. 1символ/сек ,тормозит.
И окно клиента не для т фона.
раньше было удобее
Linux Ubuntu Firefox
 Екатеринбург
0
0
Vlad M
Привет, Лео! :)
Давно являюсь поклонником твоего творчества, с начала 2000-х когда еще не было повсеместного доступного интернета, а твои бессмертные креативы распространялись пиратами на CD. До этого никогда не писал, а просто молча партизанил по сайту :). Тут попалась подходящая тема по которой я думаю могу тебе дать пару дельных советов в качестве маленькой благодарности за те приятные минуты чтения "Корпуска" в синем окне Norton Commander, которые ты подарил в молодости :).
Первое, что хочу посоветовать это оставить за собой право выбора и не следовать слепо чужому мнению, которое является вкусовщиной и только. Какие-то частные рецепты данные в комментариях не сработают, т.к лучше автора все равно никто не знает окончательную концепцию и посыл дизайна. Из этого следует, что тебе просто стоит прочитать нужные книги и вооружившись новыми знаниями (обобщенными концепциями, а не конкретными рецептами) ты сам решишь, без всяких советчиков, что есть хорошего в твоем дизайне, а от чего можно и избавиться или доработать.
Я думаю тебе понравятся и будут полезными следующие книги:
-- "Дизайн. Книга для не дизайнеров" Робин Уильямс
-- "100 новых главных принципов дизайна" Сьюзан Уэйншенк
-- "Web design book of trends 2015-2016" автора к сожалению не помню
-- "Добавь воздуха! Основы визуального дизайна для графики, веба и мультимедиа" К. Голомбински, Р. Хаген
Я думаю, что они дадут ответы на все твои нынешние и будущие вопросы с запасом прочности как минимум на 5 лет :)
З.Ы. Извини за фамильярность и обращение на "ты", я смотрел в правилах, но к сожалению не нашел как обращаться (может был недостаточно внимательным), поэтому использую неформальное "ты", еще раз спасибо за твое творчество :)
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Спасибо. К сожалению, больше на дизайн у меня времени нет.
Linux Firefox
 Россия
0
0
lan787
Надеюсь у вас будет архив старых дизайнов сайта. Скриншоты там хотя бы. Уже сейчас хочется всплакнуть над тем, чего уже не вернешь.
Linux Safari
 Москва
2
0
arcanoid


Windows Firefox
 Йошкар-Ола
1
0
artemy12
Ну все, звездец. :) Ллео поломался, начал заниматься дизайном. Теперь каждую неделю будет выпускать новую шкурку с набором спецэффектов, а инструкции по установке кондиционеров предоставит писать пьяным гастарбайтерам. Несправедливость.
Windows Safari Chrome
 Москва
0
0
Андрей Курноскин (#6284478)
Ллео, ховер на левом меню некорректно спозиционирован, полагаю. Скриншот:
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Куда смотреть? Что не так на скриншоте?
Windows Opera
 Красноярск
0
0
shur-ik
Дата на календаре не соответствует дате отображаемой записи.
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
Это сегодняшнее число :)
Календарю этому 16 лет, его еще Созидатель делал. 16 лет он вас устраивал? :)
Windows Opera
 Красноярск
0
0
shur-ik
Меня и сейчас устраивает. Это Курноскин вредничает.
Windows Firefox
 Санкт-Петербург
0
0
Tarn
Полагаю, имелось в виду, что всплывающая подсказка "Скучный документ с правилами этого дневника" всплывает не там.
Windows
 Россия
0
0
Anatoliy Uglov
Я уже писал, куда смотреть и как можно исправить. Это все то же позиционирование любых всплывающих элементов в main.js. Может, довести до ума, чтобы тебя устраивало исправление?
Linux Safari Chrome
 Норвегия
0
0
Neil (#5991506)



Как-то не очень получилось..
Linux Safari Chrome
 Москва
0
0
Leonid Kaganov
А раньше что было? Не было таких длинных переписок? Или они выезжали за границу экрана? Вообще по опыту длинная перепалка всегда неинтересна - обычно все интересное пооизносится в первых двух коментах, а дальше идет срач или унылость. Если люди, участвующие в длинной ветке, будут испытывать неудобства, это даже лучше, верно?
Linux Safari Chrome
 Норвегия
1
0
Neil (#5991506)
Раньше дерево выходило за границу экрана и легко скроллировалось вправо - влево. Теперь -- какой-то адъ.

всего комментариев: 252

<< предыдущая заметка следующая заметка >>