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

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

[Tantbpv]

Макет красивый и для первой работы самое то.
Беглый взгляд выхватил пару замечаний:
1) контент в слайдере немного вылезает при малых разрешениях.

А на 1366px наоборот слишком большая высота слайда.
Чтоб этого избежать необходимо задавать минимальную высоту для слайдера, а на десктопах либо вычислять высоту окна через js, либо вводить еще один брейкпоинт для 1600px.
Ну и тестировать верстку, разумеется!

2) Чисто мое мнение, но bxslider не годиться для продакшена. Очень легко его "сломать" при свайпах, я с ним намучился в свое время. Пока остановился на owl carousel, он вроде по-стабильнее будет.

3) Если выставляете код на ревью, то не сжимайте файлы стилей... :-)

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

5) Как уже написали, не забывайте про ховеры для ссылок и кнопок. Не всегда дизайнеры их рисуют, но пользователи будут вам благодарны.

6) По поводу мелкого текста. Эпл дает рекомендации по минимальному размеру текста, кнопок и других элементов на сайте и в приложениях, советую ознакомиться (ссылочку не нашел сразу).

К слову о православных ПСД. Не знаю как там "в настоящих веб-студиях", а у нас на фрилансе это звучит как: "Вот макет для 1920px, и мобильную версию запили..." )
А вообще молодец, так держать!

Comments

[Uladzimir A]

Спасибо большое за ответ, все учту и буду использовать в дальнейшем. Слайдер OWL видел и раньше, но bxslider как-то один раз использовал и он оказался простым в использовании, наверное потому, что нету опыта работы на реальном проекте)))

Answer 3

[alltiptop]

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

Comments

[Uladzimir A]

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

[Иван]

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

[Uladzimir A]

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

Answer 4

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

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

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

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

Comments

[Uladzimir A]

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

Answer 5

[Serjabos]

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

Comments

[Uladzimir A]

[e-mail]