Адаптивные психи или как я провел новогодние праздники

[СергейРусков]

Обойдемся без лирики Покритикуйте или похвалите (а что, приятно) следующую работу

 

http://sergeyruskov.github.io/

 

Замечания:

Необходимая поддержка браузеров: IE 11 (hallelujah!)

Меню под бургером еще не нарисована

SEO не моя проблема, хотя если что системное заметите, будет интересно.

Это не продакшен версия, поэтому ни о каких минификациях речь пока не идет.

Edited January 21, 2016 by СергейРусков

[abrahadabra]

Поругать как-то не особо получается. В целом здорово и аккуратно.

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

И удивляет одновременное использование normalize.css и reset.css от Мейера.

 

 

А похвалить — это можно.

Хорошо, что на мобильной версии выключен ужасный слайдер.

БЭМ — это тоже хорошо.

И less — это хорошо.

[СергейРусков]

Спасибо, я очень старался normalize.css и reset.css использованы частично, я забрал из обоих то что мне нужно было, они в целом то про разное, normalize.css приводит очень много фишек к стандарту, а reset только сбрасывает margin, padding у элементов (и что-то там еще по мелочи, но не суть).

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

[abrahadabra]

normalize.css и reset.css использованы частично, я забрал из обоих то что мне нужно было

делюсь своим личным опытом: для вёрстки использую бутстрап. С четвёртой версии там появились вообще замечательные возможности брать только нужное. Normalize.css встроен. Множество миксинов для именно правильного оформления. И reset не нужен вовсе.

 

по поводу шрифтов, ох вы бы знали какие войны шли у нашего дизайнера с руководством, SEO отделом, PM и тд

вероятно знаю

А показать ужас-ужас — не вариант? Вот просто взять телефон, переключить в режим 3g, а то и gprs, если умеет, и у них на глазах открыть какой-нибудь сайт с нестандартными шрифтами.

[СергейРусков]

Так там вроде и в 3 boostrap был customizer, или я чего-то не понял?

Ну вот только что замерил, с 3g (good 3g в chrome mobile mode)  сайт грузится 6 секунд, в более менее вменяемом состоянии он через 3 секунды, я исследования на этот счет ни читал, но я готов ждать 6 секунд с мобилы.

Про более тяжелые случаи, 1 палка и тд, это уже дискуссионный вопрос.

А по поводу reset, мне просто удобнее без отступов у элементов, это же исключительно технологическая вещь и вкусовщина, ничего страшного в его использовании/не использовании вроде нет.

[Нарек]

Ругаю:

1. @import в css, одна из причин почему сайт грузиться долго.

2. html lang="en" но на деле все на русском.

3. Не знаю что скажут другие, но лично мне не нравятся вот такие классы

 

 

4. Валидатор ругает много

[abrahadabra]

Так там вроде и в 3 boostrap был customizer, или я чего-то не понял?

Лютая хрень. Бутстрап имеет смысл использовать либо как есть для быстрого прототипирования, либо в нормальной вёрстке использовать его миксины для некоторого упрощения и упорядочивания своей работы.

 

good 3g в chrome mobile mode

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

 

А по поводу reset, мне просто удобнее без отступов у элементов, это же исключительно технологическая вещь и вкусовщина, ничего страшного в его использовании/не использовании вроде нет.

Не могу утверждать уверенно, но умные люди говорят о том, что как раз страшное в этом и есть. Что это усложняет работу браузеру, отъедает память и увеличивает время рендеринга. Но тут я не спец, пусть лучше кто-нибудь, кто разбирается в теме, скажет всю правду.

[СергейРусков]

Ругаю:

1. @import в css, одна из причин почему сайт грузиться долго.

2. html lang="en" но на деле все на русском.

3. Не знаю что скажут другие, но лично мне не нравятся вот такие классы

 

 

4. Валидатор ругает много

1. Да вы правы, но какая альтернатива? Как еще использовать гугл шрифты? Сам гугл предлагает 3 варианта, так как я использую, через link <link href='https://fonts.googleapis.com/css?family=Oswald'rel='stylesheet' type='text/css'> и js. Через font-face? А это законно? Но в целом ничего не изменится, все равно будет запрос на сервер (уже не на гугловский), вроде как бешеной прибавки скорости быть не должно. Или я в чем-то не прав?

2. Вот уж засада пал жертвой emmeta, стыд и позор

3. Вот тут я не вижу других альтернатив, более того я сначала давал осознанные названия, но потом посовещался с PHP программистом, и мы поняли, что данная сетка (а это именно элементы сетки) будут использованы в дальнейшем в любом назначение, не измена останется только их позиция, поэтому и циферки.

4. Ну что тут сказать, исправился

[Нарек]

Или я в чем-то не прав?

Подключить через link. То, что запрос пойдет на гугловский сервер это не значит ничего. Например, зачем jquery подключать с cdn? Не ради того, что cdn будет работать быстрее чем Ваш сервер, а ради того, что пользователь который зашел на Ваш сайт наверняка уже имеет в кэше этот же jquery и не надо его заново качать.

[СергейРусков]

 

Или я в чем-то не прав?

Подключить через link. То, что запрос пойдет на гугловский сервер это не значит ничего. Например, зачем jquery подключать с cdn? Не ради того, что cdn будет работать быстрее чем Ваш сервер, а ради того, что пользователь который зашел на Ваш сайт наверняка уже имеет в кэше этот же jquery и не надо его заново качать.

 

Этот довод я видел часто, и ни разу не видел статистики слова "наверняка", а уже тем более для конкретного ресурса. Но окей, я обсужу это со своими. Спасибо.

Кстати, со шрифтами все будет еще грустнее, если jquery используется повсеместно, то данные шрифты, имеющую огромную специфичность (оцените get запрос, family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic ) встретить второй такой же... ну короче сложно будет

Единственный довод за, для себя который я нашел, а почему бы и нет ?

Edited January 9, 2016 by СергейРусков

[wwt]

3. Не знаю что скажут другие, но лично мне не нравятся вот такие классы a90305811f.jpg

 

Есть альтернатива в названиях классов для сетки?

[Нарек]

Кстати, со шрифтами все будет еще грустнее

Ну все же, лучше чем @import имхо. Тут есть хороший ответ по этому поводу.

Есть альтернатива в названиях классов для сетки?

Альтернативы не знаю. Но и не представляю зачем нужен отдельный класс для каждого блока в сетке. Было бы id я кое как понял бы, но класс зачем? Что мы будем стилизовать специально для index-main_36 ? Сетка тут довольно простая, есть 2 вида "строк", один на 3 колонки, второй на 4. Нельзя эти строки обернуть в блок, скажем для "строки" которая имеет 4 колонки дать класс обозначающий, что в этом блоке есть 4 колонки, а где 3 колонки то соответственно название класса обозначающий, что в этом блоке 3 колонки. А самим колонкам не давать классов. Надеюсь понятно написал. Получаем для каждой строки отдельный контейнер, но избавляемся от таких классов. Может я не прав, но мне так как то больше нравится.

[СергейРусков]

id принято использовать для js, во всяком случае у нас в фирме.

Что мы будем стилизовать специально для index-main_36 ?

Ну его позицию... наверное, тут какой-то подвох...

Про остальное не понял, но вроде там, что то о том чтобы вкладывать блоки в row(из бутстрапа). Так не получится, потому что многие из блоков переезжают по своему контейнеру куда ни попадя, один из многих примером, index-main__23 стоит по середине в desctop версии, в мобильной он оказывается под блоками index-main__28, index-main__25 ну и тд. Будь все это внутри каких-то строк(а 23 и 28 не запихнуть в 1 строку если учесть, что вроде как вы написали, что строка может быть на 4 элемента), то придется двигать еще и сами строки... сложно это все.

[Нарек]

Для каждого блока дается margin-top 1.25rem. Зачем? Где смысл? Что если на главной будет не 41 блоков как сейчас а 141 или 1141 (например реализован будет добавление по прокрутке). Для всех 1141 писать margin-top: 1.25rem? Дубликатов тех же margin и order дохрена получается же. ID для js не js не важно, я бы понял если бы там были id так как иногда нужно чтобы пост имел свое уникальное id. Сетка которая реализована здесь, по мне так это не сетка, так как сетка дает какую-то структуру а тут структуры то нет, все сделано за счет дублирующихся стилей. Вот о чем я. А если засунуть каждый row в контейнер и через него уже обратиться к внутренным то дубликатов не будет столько.

Edited January 9, 2016 by Нарек

[СергейРусков]

ID для js не js не важно

Это называется методология, и если написано в правилах фирмы (устав по оформлению кода) это важно. Но даже если забыть про указы выше, это важно для разделения логики, одно стили, другое js, потом будет проще читать, странно что вы никогда об этом не слышали, очень популярная тема.

Что если на главной будет не 41 блоков как сейчас а 141 или 1141 (например реализован будет добавление по прокрутке). Для всех 1141 писать margin-top: 1.25rem?

Когда будет тогда и разберемся, скорее всего вы говорите о том, что будет после того как нажать кнопку "показать еще",  там будет совсем другая история, там можно сделать один общий класс для всех, написать что-то типо float: left; margin столько то, и забить.

Дубликатов тех же margin и order дохрена получается же

Дубликат order? Это где? Если такое есть то укажите, это ошибка, каждый ордер на своем размере уникален, в этом и фишка.

так как иногда нужно чтобы пост имел свое уникальное id.

 

Ээ когда? Пока с этим не столкнулся, и не представляю зачем. Потом уже решу в зависимости от задачи.

В итоге я так понимаю, что не нравится margin-top который много раз повторяется? Я думал об этом, можно было бы решить проблему задав высоту блоку и дальше через flexbox, но подумал, что получится слишком захардкожено для PHP программиста. А если тупо сделать какой-то отдельный класс для margin-top, то будет тот же повтор, но в html.

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

[abrahadabra]

Для всех 1141 писать margin-top: 1.25rem?

ну во-первых браузер затупит раньше даже с одним-единственным классом

во-вторых, вряд ли у дизайнера хватит фантазии и упорства придумать индивидуальное поведение для каждого из 1141 блоков

в-третьих, чем sass лучше less? Правильно, @extend

[СергейРусков]

в-третьих, чем sass лучше less? Правильно, @extend

http://lesscss.org/features/#extend-feature вроде в лесс тоже есть.

[Нарек]

Это называется методология, и если написано в правилах фирмы (устав по оформлению кода) это важно. Но даже если забыть про указы выше, это важно для разделения логики, одно стили, другое js, потом будет проще читать, странно что вы никогда об этом не слышали, очень популярная тема.

Да забудьте вы про id. Мы кажется не поняли друг друга. Я сказал, что понял бы если бы у постов были такие id, и не важно это на стороне клиента формируется или на стороне сервера. Но я никак не имел ввиду, что замените классы на id и стилизуйте так. Мое замечание совсем про другое.

Когда будет тогда и разберемся

Это в корне неправильный подход. Вы же попытались использовать тот же БЭМ, надо обо всем думать заранее.

Дубликат order? Это где? Если такое есть то укажите, это ошибка, каждый ордер на своем размере уникален, в этом и фишка.

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

ну во-первых браузер затупит раньше даже с одним-единственным классом во-вторых, вряд ли у дизайнера хватит фантазии и упорства придумать индивидуальное поведение для каждого из 1141 блоков

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

[abrahadabra]

http://lesscss.org/features/#extend-feature вроде в лесс тоже есть.

о как здорово! Спасибо.

И давно уже есть ведь.

 

Но в таком случае не понимаю, почему вы его не использовали. В данном случае весьма уместен.

Edited January 9, 2016 by abrahadabra

[СергейРусков]

Это в корне неправильный подход. Вы же попытались использовать тот же БЭМ, надо обо всем думать заранее.

Давай-то конкретнее, я хоть и не до конца понял ваш план со строками, но я на 100% уверен, что я данными перекидыванием блоков(из середины в центр и тд), это не возможно сделать универсально, путем задания единообразных классов, готов даже спорить на деньги. По поводу "когда будет тогда и разберемся" имеется ввиду, что я не стал реагировать на утрированный пример, так как я отлично знаю, что так никогда не будет, это раз, два я знаю, что делать когда будет больше блоков(об этом я написал, float, margin и тд).

так как много лишних стилей. Очень много.

Да откуда их много то, очень много? margin-top? order? 

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

На счет margin-top, сейчас через запятую (extend) укажу блоки в которых оно повторяется, спасибо abrahadabra за наводку.

 

 

 

Но в таком случае не понимаю, почему вы его не использовали. В данном случае весьма уместен.

 

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

[Нарек]

Если вам не сложно (я вполне допускаю что сложно и лень) накидайте сетку которая будет перемещать совершенно в непредсказуемые места

Действительно сложно.

На счет margin-top, сейчас через запятую (extend) укажу блоки в которых оно повторяется, спасибо abrahadabra за наводку.

Для начала и этого хватит) 

[VIVA]

Симпачитный сайт, но есть несколько реальных проблем:

1) При уменьшении масштаба задний фон (монетки) уплывает (скрин http://prntscr.com/9p716t)

2) Зашел через Safari 5.1 (в IE10 та же проблема) сайт вообще ломается, а на середине сайта перестает срабатывать тач-скрин.

[СергейРусков]

VIVA, on 12 Jan 2016 - 6:34 PM, said:

Симпачитный сайт, но есть несколько реальных проблем:

1) При уменьшении масштаба задний фон (монетки) уплывает (скрин http://prntscr.com/9p716t)

2) Зашел через Safari 5.1 (в IE10 та же проблема) сайт вообще ломается, а на середине сайта перестает срабатывать тач-скрин.

1) Да, редакция тестирует брендирование, скоро пройдет.

2) Поддержка с 11IE, в сафари не работает потому что они поддерживают flexbox с версии 6.1

Edited January 14, 2016 by СергейРусков

[yardim]

Добавлю ложку дегтя, с Вашего позволения, которая, надеюсь, поможет Вам в проффессиональном росте

1. Возможно, ИЕ у меня неправильный, конечно, какой-то, но вот такая ситуация: http://joxi.ru/823pxaOF6agqdA. При чем это 11й.
2. Плюс, добавил бы немного интерактива по ховеру, это хороший тон в верстке, даже если не отображено в дизайне: http://joxi.ru/1A5px3bFKzpyX2. А так не понятно, кликабельно оно, или просто для прикола.
3. Не очень понимаю суть флексбокса тут. Зачем делать флекс, и получать в ие9 вот такую картину http://joxi.ru/1A5px3bFKzpyX2(пускай его и нет в требованиях), если можно сделать все без него, достигнув такого же результата, но при этом все будет более отказоустойчивым? Так и стили попроще станут, и действительно не надо будет писать такие классы для каждого блока индивидуальные, типа index_content--1 .... index_content--over-dofiga. 
4. Также я не приветствую практику hide--phone классов. Хотя, тут скорее к дизайнеру вашему претензия. Html грузится все равно на мобайлах и от того, что вы его просто захайдите, быстрее страница грузится не станет. Ладно еще, если это какие-то декоративные блоки, или якобы отрывок с другой страницы, куда можно перейти и увидеть полную картину предположительно, как тут http://joxi.ru/xAe0DnGfYbLKP2. Но прятать контентые блоки не есть хорошо, я думаю. Получается, вы обделяете своих мобильных пользователей при той же скорости загрузки.
5. По поводу хорошо БЭМ или плохо. Думаю, если вы 100% понимаете зачем он Вам тут, и чем он вам поможет, то хорошо. Если нет, думаю, лучше не использовать. Иначе получите раздутый, громоздкий, медлительный код, который плохо поддерживается.
6. По поводу импортов в цсс. Тут писали. Не знаю, где они были, не нашел, возможно, автор уже исправил. Но если использовать лесс, то общепринятой практикой является компиляция всех лесс в 1 цсс. Импорты соответственно должны прописываться в лесс, а на выходе будет один монолитный цсс и никаких импортов (это уже скорее просто совет).
7. Еще не понял сути вот этого: http://joxi.ru/n2Y5aQ8Ij7wK12. Зачем абсолют-то тут? По карусели: owl не плох, но советую попробовать также slick.

Думаю, хватит о плохом, поговорим о хорошем

1. Порадовали приятные анимации.

2. Использование и внедрение новых технологий типа флекс похвально. Однако, ИМХО, лучше делать это точечно, а не строить на нем лейаут сайта.
3. Также похвально пробовать методологии типа БЭМ. Но советую посмотреть и на другие, типа SMACSS.

Наверное, достаточно

Edited January 14, 2016 by yardim

[noobkin]

Хорошо конечно получилось!

Только один вопрос возник - где искать смысл написания <header><div class="header"></div></header>?