Что неправильно в верстке?

Question

[Станислав Галин]

Я вот недавно прошел курсы по HTML, CSS и вот решил проверить свои знания. Какие ошибки в верстке ?
shablon-2.zz.mu
Извините за такой вопрос, просто больше нет у кого попросить проверить.

Answer 1

[Александр Петров]

Из глобального:
1. Страница весит 1.6мб. Это жуткая жуть для такой страницы. Зачем все картинки в png? Он там не нужен. Переводите всё в jpg и оптимизируйте jpg – выигрыш в весе будет огромный.
2. Поддержка ретины. Сейчас это становится уже важным. Все иконки лучше перевести в svg. Или, как мининмум, сделать png@2x. Но вектор лучше, с ним удобнее работать и весит он порой меньше png.
3. Зачем там 2 файла стилей и несколько спрайтов? + стили правильнее минифицировать.

Сама верстка:
1. Почитайте про различные методологии. БЭМ, например. Селекторы типа .site-header .site-menu li a — боль.
2. Блок с логотипами. Вставить всё одной картинкой это, конечно, легко и просто. Но заказчик наверняка бы попросил сделать каждый логотип ссылкой на сайт. Или, например, когда понадобится добавить еще один логотип. добавлять его будет больно.
3. Для ссылок можно тоже transition добавить. Хуже от него не будет.

Это так, главное, что бросилось в глаза :)

Comments

[Александр Петров]

Я и не говорю, что джипеги всегда везде стоит делать. Каждому формату своё место. Но там 3 _фотографии_ в пнг. Тут явно пнг не место.
А для джипегов лучше JPEGMini использовать. По моему опыту, он джипеги жмет лучше.
А в целом да, правило одно — что меньше весит, то и используем.

Answer 2

[Сергей]

Обычно заказчики не смотрят на качество кода, им абы работало быстро и смотрелось хорошо везде.
Так что если смотреть глазами заказчика - где адаптивный дизайн???

Comments

[Станислав Галин]

Я пока учусь без адаптивного, после этого шалона я буду учить flex и одновременно адаптив

[Alexander Tartmin]

Давайте теперь писать все абы как, все равно всем плевать на код...

[Alexander Tartmin]

Станислав Галин: флекс штука очень свежая и пока на ней нету смысла пилить, а вот адаптивность подтягивайте

[Станислав Галин]

Alexander Tartmin: Ну я только что посмотрел поддержку флекса, так там 92 процента с префиксами.
Адаптивность само собой, я основы сперва хотел выучить чтобы код не был говном.

[Alexander Tartmin]

Станислав Галин: префиксы в принципе не плохо, но они показывают то, на сколько технология готова к продакшену. caniuse.com этот сайт в закладки! Тут Вы увидете где ещё нужно писать префексы, а где уже не надо.

[Александр Петров]

Самому писать префиксы в любом случае не стоит. Есть великий Autoprefixer. Поставил нужные браузеры и всё.

[Сергей]

Alexander Tartmin: да я не гвоорю про плевать. За кодом надо следить. И делать его не только правильным, но и что бы он был хорош в плане поддержки и работы в команде (БЭМ в зубы)
Просто я выделил ГЛАВНОЕ для получения дохода. Политика клиентов в 99% случаев сводится к тому, что бы работало. А как, это уже совсем другая песня.

[Alexander Tartmin]

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

[Сергей]

Это только потому, что вы в нем разбираетесь :)

[Сергей]

А вот вам правда жизни: Что делать, если от программирования уже подташнивает?

Answer 3

[Alexander Tartmin]

Правила хорошего тона это кроссбраузерность и она у вас хромает. Есть две прекрасные вещи: modernIE и Browserstack. Проверяйте сайт что бы он везде был одинаковый и ничего не лезло друг на друга. И подтягивайте английский. Я понимаю что вам удобно писать транслитом (shablon) но когда ваш код будут саппортить другие люди, позаботесь о своей карме, пишите имена (переменные, айдишники и классы) на английском (template).

Comments

[Станислав Галин]

Спасибо за совет

Answer 4

[tef]

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

Comments

[Alexander Tartmin]

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

[tef]

Alexander Tartmin: Мы конечно можем с вами тут подискутировать глядя в монитор, но смысла не особо. Автор спросил про ошибки в верстке. Если ничего ни где не едет, то вёрстка норм. Сделал он меню на списках, или dt, или дивами или ещё как-нибудь исхитрился, ни кому до этого дела нет (если в двух словах, то всем по...).

[Александр Петров]

Сочувствую вашим коллегам.

[tef]

Александр Петров: начни с себя.

[tef]

Сергей Сергеев: Ну так я об этом и говорю. Если ни где не едет, то всё норм.

[tef]

Сергей Сергеев: На фотке не хватает дух-трёх айфонов как минимум.

[tef]

Сергей Сергеев: Не забудь обновить фотку до трёх китайских планшетов))
Как-то давно, ещё до массового опланшетивания, видел фотку по моему от сотрудника яндекса, как они тестируют. На ней было около 30 разных мобил. И это был ещё не полный список, как я понял)

Answer 5

[Дмитрий Шинкарь]

Страничка грузилась больше 2 сек, касательно png - посоветовали очень правильно, в свое время сам с этим сталкивался. Стили надо слить в один файл. Социальные кнопки с якорем? What? xD

Comments

[Станислав Галин]

reset.css можно подключать отдельным файлом
в кнопках нет якоря, просто вставил # вместо ссылки