@hedin83
хочу работать веб-разработчиком

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

Доброго всем времени суток. Наконец-то я закончил свой первый адаптивный макет! Дайте пожалуйста оценку товарищи специалисты.
С самого начала я долго и мучительно выбирал макет, все не понимая, каким же он должен быть, или простым, который потом переделается в адаптивный, или уже сразу заточенный под адаптив. Перелопатив кучу всего, задавая вопросы по поводу того каким же он должен быть этот заветный PSD, я все больше запутывался и в итоге, плюнув, решил, что буду верстать первый попавшийся... и вот он сверстан.
Еще на этапе подготовки пытался узнать, а как же все происходит в настоящих веб-студиях!? Дизайнер дает несколько макетов или только один, а там уже верстальщику расхлебываться. Мнения разделились, и я решил, что буду верстать с одного, т.к. писал уже выше, вариантов с несколькими макетами не нашел.
Не владея навыками юзабилити и прочего фен-шуя верстки, я ставил так называемые breakpoints исходя из своих взглядов... что получилось судить вам. Но с уменьшением размера окна браузера я пытался убрать лишние "украшательства" и оставить больше информации. В общем onetown.hol.es получился вроде бы адаптивным из не адаптивного макета. За ранее спасибо за ответы.
  • Вопрос задан
  • 547 просмотров
Решения вопроса 2
julia_amake
@julia_amake
Front-end разработчик
Мне очень нравится, получилось здорово. Единственное, немного смущает отсутствие 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,а не картинками ;-)

А так для первого раза это больше, чем отлично!!) Красиво, валидно и быстро!
Ответ написан
@Tantbpv
Макет красивый и для первой работы самое то.
Беглый взгляд выхватил пару замечаний:
1) контент в слайдере немного вылезает при малых разрешениях.
035158e432594e859208f0264ede5791.jpg
А на 1366px наоборот слишком большая высота слайда.
Чтоб этого избежать необходимо задавать минимальную высоту для слайдера, а на десктопах либо вычислять высоту окна через js, либо вводить еще один брейкпоинт для 1600px.
Ну и тестировать верстку, разумеется!

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

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

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

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

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

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

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

я вам зуб даю!)))
Ответ написан
Serjabos
@Serjabos
Привет , оставь свой контакт пожалуйста ,у меня есть пара вопросов к тебе по поводу верстки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы