Оцените верстку. Anhiora

[advokatua]

Прошу оценить и высказать любые претензии/пожелания по верстке. 

Верстка под ие8+

 

Картинка макета  (правая кнопка на слайдере случайно не попалась)

Сайт

 

Макет изначально был чересчур широк, потому пришлось своими силами подстраивать его под 1000px. 

Edited February 3, 2014 by advokatua

[y6uBaToP]

На моем 1920*1080 бекграунд слайдера начинает repeat, стык некрасиво выглядит. Масштаб 100%

[advokatua]

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

 

upd. исправил. Теперь выглядит так, как должно, по идее )

Edited February 3, 2014 by advokatua

[Bassline]

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

[advokatua]

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

 

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

Edited February 4, 2014 by advokatua

[npofopr]

#sm_slider 

мне кажется слайдер должен быть на всю длину. Потому как сейчас смотрите "плохо" при листании.

 

.adv-list 

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

 

#about-slider

лучше в круговую вращать, мне кажется. 

 

.co-worker figure

там вроде не нужен правый марджин

 

.services-step li h3 

не кошерно указывать длину, тем более высоту. Никто не знает, сколько текста там будет. И я бы отделил иконку от текста.

вообще вся конструкция .services-step с li {float и inline вместе} кажется "хлипкой".

 

.results-list

тоже не понятно, но было бы круто, если бы длина % и цифра, менялась не где то глубоко в css, а обычным указанием, например в data-persent="N%"

 

.tariff h3

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

 

.tariff a

внизу кнопка. А если я поменяю ее на button?

 

.vcard .address

а зачем отдельный класс для UK? Не жалко конечно, но вроде обычный текстовый блок.

 

.vcard .tel:before, .vcard .fax:before, .vcard .e-mail:before

понимаю, что :before это круто, но тяжко потом будет пользователю/ другому человек, обновлять сайт. Хотя спорный момент.

 

.comment-data .contact-submit 

бывает, что многие меняют input на button

 

.main-footer

может лучше этому блоку padding задать, чем внутреннему?

 

Еще, не знаю как у вас, но для каждого h# (заголовка), было бы круто сделать эквивалент, типа span.h1 и т.п. Думаю, понятно зачем.

 

А так норм  

[Demidovetz]

Еще, не знаю как у вас, но для каждого h# (заголовка), было бы круто сделать эквивалент, типа span.h1 и т.п. Думаю, понятно зачем.

Я вот не понимаю, можете мне объяснить зачем?

[npofopr]

 

Еще, не знаю как у вас, но для каждого h# (заголовка), было бы круто сделать эквивалент, типа span.h1 и т.п. Думаю, понятно зачем.

Я вот не понимаю, можете мне объяснить зачем?

Сеошники бывает просят убрать тот или иной заголовок со страницы, чтобы это сделать быстро и безболезненно, такие доп. классы очень помогают. В общем то это все для seo.

[Demidovetz]

 

 

Еще, не знаю как у вас, но для каждого h# (заголовка), было бы круто сделать эквивалент, типа span.h1 и т.п. Думаю, понятно зачем.

Я вот не понимаю, можете мне объяснить зачем?

Сеошники бывает просят убрать тот или иной заголовок со страницы, чтобы это сделать быстро и безболезненно, такие доп. классы очень помогают. В общем то это все для seo.

 

спасибо, понял.

[advokatua]

#sm_slider - мне кажется слайдер должен быть на всю длину

 

1) Вопрос корректности данного этапа изначально мне был не особо известен, потому сделал как сделал. Думаю это больше вопрос к ТЗ (могу ошибаться), которого у меня очевидно не было. Переделал с учетом замечания, и по идее - да, стало зрительно эстетичнее.

На 15-дюймовом мониторе, такие вопросы сходу непросто замечать. Надо быстрее копить денег на 24. 

 

.adv-list - я бы не стал картинки добавлять через :before

 

2) Черт его знает. В данном случае макет выглядит как завершенный, и кажется, что подобные блоки если и будут меняться, то очень редко.

 

#about-slider - лучше в круговую вращать

 

3) Можно и в круговую. Один фиг - строчку добавить )

 

.co-worker figure

 

4) После экспериментов видать остались.

 

.services-step li h3 - не кошерно указывать длину, тем более высоту. 

 

5) Над этим блоком больше всего экспериментировал. Compass со своим авто созданием спрайтов реально доставил (все иконки различаются по размеру, из-за чего скакал заголовок под ними). Пришлось танцы с бубном плясать на всяких relative и absolutе позициях. Вот флоат у элементов действительно лишний. Перекроил под инлайн, теперь вроде как кошерно должно быть.

 

.results-list - было бы круто, если бы длина % и цифра, менялась не где то глубоко в css

 

6) Типа как-то так, что ли? 

<ul class="results-list">  <li>	<span class="term term-1">Quisque euismod</span>	<div class="prog"><span style="width: 80%">80%</span></div>  </li></ul>

.tariff h3 тоже не понимаю, зачем делать такой заголовок.

 

7) Не нравится, что название тарифа и цена идут вместе? Там более менее очевидно, что блоку не нужна ни большая длина, ни какая-то резина, потому посчитал, что такой конструкции достаточно

 

.tariff a - А если я поменяю ее на button?

 

8) СЕОшники нагадали, что ссылки лучше, чем батоны ) 

 

.vcard .address - а зачем отдельный класс для UK?

 

9) Микроформат требует. Заточка для поисковиков.

http://en.wikipedia.org/wiki/VCard (раздел  hCard 1.0)

 

.vcard .tel:before, .vcard .fax:before - тяжко потом будет пользователю/ другому человек, обновлять сайт.

 

10) Так это ведь всего лишь префикс для визуальной пометки. Человек создает новый блок .tel и у него слева сразу буковка/иконка с буквой "f" + отступ. Если человек не хочет его видеть, то достаточно удалить/поменять название класса.

 

.main-footer может лучше этому блоку padding задать, чем внутреннему?

 

11) Без разницы, там ведь внутренний блок просто ограничен по ширине.

 

Еще, не знаю как у вас, но для каждого h# (заголовка), было бы круто сделать эквивалент, типа span.h1 и т.п. Думаю, понятно зачем.

 

12) Я, честно говоря, не в курсе зачем ) Какие-то СЕОшные шаманства? Пошел искать.

 

PS Огромный спасиб. Буду знать над чем скил качать. 

Edited February 4, 2014 by advokatua

[Bassline]

[class*="span"] {    display: inline;    float: left;    margin-right: 20px;}

Можно поинтересоваться для чего здесь одновременно задан флоат и инлайн?

[advokatua]

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

 

Как делать сетку я смотрел у Sorax-a. Затем, через время, увидел этот же инлайн в другом блоге, причем стили для сетки там были буквально один в один. Гадать не хочется, но такие шаманства я видел там где хотят, чтобы на ИЕ6-7 заработало что-то, что там изначально не работает.

 

Я даже ссылки нашел, буквально за минуту, так оно мне запомнилось:

4:52

http://www.youtube.com/watch?v=3MfxQAt49dE 

 

9:27

Edited February 5, 2014 by advokatua