Как оцените данную верстку?

Question

[Uladzimir A]

Доброго всем времени суток. Наконец-то я закончил свой первый адаптивный макет! Дайте пожалуйста оценку товарищи специалисты.
С самого начала я долго и мучительно выбирал макет, все не понимая, каким же он должен быть, или простым, который потом переделается в адаптивный, или уже сразу заточенный под адаптив. Перелопатив кучу всего, задавая вопросы по поводу того каким же он должен быть этот заветный PSD, я все больше запутывался и в итоге, плюнув, решил, что буду верстать первый попавшийся... и вот он сверстан.
Еще на этапе подготовки пытался узнать, а как же все происходит в настоящих веб-студиях!? Дизайнер дает несколько макетов или только один, а там уже верстальщику расхлебываться. Мнения разделились, и я решил, что буду верстать с одного, т.к. писал уже выше, вариантов с несколькими макетами не нашел.
Не владея навыками юзабилити и прочего фен-шуя верстки, я ставил так называемые breakpoints исходя из своих взглядов... что получилось судить вам. Но с уменьшением размера окна браузера я пытался убрать лишние "украшательства" и оставить больше информации. В общем onetown.hol.es получился вроде бы адаптивным из не адаптивного макета. За ранее спасибо за ответы.

Comments

[Андрей]

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

Answer 1

[Юлия Старченко]

Мне очень нравится, получилось здорово. Единственное, немного смущает отсутствие hover-эффектов и cursor:pointer на кнопке в блоке Subscribe.

И некоторые "придирки" по коду:

1) скрипты из head вы нести вниз страницы
2) a можно было не оборачивать в div. И strong использовать с осторожностью, он обозначает высокую важность, поэтому для оформления лучше использовать теги попроще, например, обычный span или b

<div class="logo">
    <a href="#"><strong>. one</strong>town</a>
</div>

3) h1 нежелательно использовать на странице больше одного раза, в html5 это разрешается, но seo-шники обычно ругаются за такое
4) вместо этого ужаса

<input type="text" class="email" value="Enter Your Email Address" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

уже давно можно использовать атрибут placeholder
5) стили для ie можно вынести в отдельный css-файл, и загружать его только для IE
6) элементы типа стрелочек, точек, линий можно сделать на css,а не картинками ;-)

А так для первого раза это больше, чем отлично!!) Красиво, валидно и быстро!

Comments

[Uladzimir A]

Спасибо, "придирки" - это здорово, есть, что улучшить, да и много чего полезного вы мне предсказали!
Про скрипты в head мне уже google "рассказал".
H1 стараюсь использовать один раз, но вот никак не могу решить где ему место, в логотипе или все же в контента!
А вот как placeholder скушают старики браузеры?
А стрелочки css-ом это как?

[Uladzimir A]

Извиняюсь за оЧепятки - пишу с мобильного!

[Юлия Старченко]

hedin83: h1 - это заголовок страницы, если логотип содержит ключевое слово, то можно и в логотип, но обычно это самый верхний заголовок основного содержимого. вобщем h1 - это фраза с самым важным ключевым словом/словами.

[Юлия Старченко]

hedin83: placeholder это хорошо. только при оформлении есть нюансы. без префиксов не обойтись: habrahabr.ru/post/120152

А стрелочки нарисовать есть разные способы, например, так можно: codepen.io/anon/pen/YXrMgR

Ну, и я говорю, что это придирки, стрелочки можно и картинкой, но вот очень простые фигуры (кружочки и линии) лучше все таки css))

[Uladzimir A]

Спасибо, буду осваивать!

Answer 2

[alltiptop]

В целом неплохо и быстро, но на низких разрешениях текст становится слишком мелким.

Comments

[Uladzimir A]

С текстом я тоже задумывался. Задавал вопросы, с каким шагом должен изменяться шрифт с уменьшением разрешения, но ничего внятного не услышал. Может почитать что-нибудь по юзабилити?!

[Иван]

hedin83: вы откройте страницу с мобильного и увидете: большое межстрочное расстояние, маленький шрифт, большие отступы по бокам.

[Uladzimir A]

Спасибо, буду исправлять!

Answer 3

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

Очень даже не плохо как для первых работ)

ЗЫ. В настоящих web-студиях верстальщик ругается на дизайнера, а дизайнер на верстальщика :D

я вам зуб даю!)))

Comments

[Uladzimir A]

Спасибо! Я про верстальщика и дизайнера часто слышу, но на войне как на войне!!!

Answer 4

[Serjabos]

Привет , оставь свой контакт пожалуйста ,у меня есть пара вопросов к тебе по поводу верстки

Comments

[Uladzimir A]

[e-mail]