Оцените верстку пожалуйста

[noobkin]

Клац

 

Хотелось бы услышать о всех недочетах, ошибках , косяках.

Как мне кажется - получается уже лучше чем в прошлой работе. Хотя полной уверенности в этом нет...

[abrahadabra]

о недостатках.

• поведение ссылок/кнопок при наведении лучше если будет в общем стиле. Сейчас одни меняются анимированно, а другие скачкообразно;
• на ширине более 1680 картинка в шапке некрасиво стыкуется. Хотя это вопрос скорее к дизайнерам. Но в силах разработчика хотя бы максимальную ширину установить;
• карта статичная. Это плохо. Яндекс даёт удобное апи для встраивания их карт. А вот использование их карт в виде картинок запрещено лицензией, и они порой устраивают некрасивые сцены, когда видят такое;
• форма на этой странице просто не выдерживает никакой критики;
• нестандартные шрифты — это всегда плохо. Хотя это тоже скорее к дизайнерам. Если уж никак не отбрыкаться, лучше использовать woff и base64-встраивать его в css. Шрифт Roboto без засечек. У вас же отображается с засечками. Если вы используете нестандартный шрифт без его загрузки, пишите следом шрифт по умолчанию: font-family: roboto, sans-serif.

 

А в целом хорошо. Чтобы ещё найти недостатки, надо уже как-то жёстко придираться.

[noobkin]

о недостатках.

• поведение ссылок/кнопок при наведении лучше если будет в общем стиле. Сейчас одни меняются анимированно, а другие скачкообразно;
• на ширине более 1680 картинка в шапке некрасиво стыкуется. Хотя это вопрос скорее к дизайнерам. Но в силах разработчика хотя бы максимальную ширину установить;
• карта статичная. Это плохо. Яндекс даёт удобное апи для встраивания их карт. А вот использование их карт в виде картинок запрещено лицензией, и они порой устраивают некрасивые сцены, когда видят такое;
• форма на этой странице просто не выдерживает никакой критики;
• нестандартные шрифты — это всегда плохо. Хотя это тоже скорее к дизайнерам. Если уж никак не отбрыкаться, лучше использовать woff и base64-встраивать его в css. Шрифт Roboto без засечек. У вас же отображается с засечками. Если вы используете нестандартный шрифт без его загрузки, пишите следом шрифт по умолчанию: font-family: roboto, sans-serif.

 

А в целом хорошо. Чтобы ещё найти недостатки, надо уже как-то жёстко придираться.

1) У меня вроде все ссылки анимированно ведут себя. Может в  каком-то браузере не прокатывает? Или я не туда смотрю?

2) Сделано как и на рабочем сайте данного автосервиса. Еще в самом начале работы заметил этот косяк, но потом упустил из памяти... Надо подумать.

3) С картой специально "прохалявил" - каюсь. Сменю на нормальную чутка позже.

4) Опять же - форма взята с самого сайта автосервиса(раз они не запаривались - чего тут мне мудрить ). Да и вообще - я данную страницу сделал исключительно для примера того - как изменяется верхняя часть сайта на второстепенных страницах. Вот об этом хотел бы от вас услышать - правильно ли было все эти изменения вносить просто через style="" в самих тегах html?

5) Об этом обязательно подумаю при следующей работе. Пока просто не углублялся в тему шрифтов, но похоже - время настало и для этого.

 

Спасибо!

[abrahadabra]

У меня вроде все ссылки анимированно ведут себя. Может в  каком-то браузере не прокатывает? Или я не туда смотрю?

 

вот просто как пример: в самой шапке «заказать обратный звонок» плавненько, а чуть ниже на баннере две красные блямбы — резко.

данную страницу сделал исключительно для примера того - как изменяется верхняя часть сайта на второстепенных страницах. Вот об этом хотел бы от вас услышать - правильно ли было все эти изменения вносить просто через style="" в самих тегах html?

 

не. Не тот случай. Тут можно просто класс добавить или наоборот удалить, и сделать отличающиеся стили.

просто не углублялся в тему шрифтов, но похоже - время настало и для этого

 

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

 

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

[noobkin]

вот просто как пример: в самой шапке «заказать обратный звонок» плавненько, а чуть ниже на баннере две красные блямбы — резко.

Так это же просто подкос под <button>, но без дополнений ввиде удаления outline и всего border) Не знал, что это плохо.

не. Не тот случай. Тут можно просто класс добавить или наоборот удалить, и сделать отличающиеся стили.

Но в чём практическое различие в этих вариантах? Мне показалось - "просто" - именно так как сделал я. Мое решение плохо повлияло на что-то? 

[abrahadabra]

Так это же просто подкос под <button>, но без дополнений ввиде удаления outline и всего border) Не знал, что это плохо.

плохо не это. Не очень хорошо, когда на одной странице разные элементы в разных стилях сделаны. Ощущение весьма не целостное. Можно было смену цвета этой кнопки сделать с таким же переходом — было бы гармоничнее. А так бросается в глаза несогласованность.

Но в чём практическое различие в этих вариантах? Мне показалось - "просто" - именно так как сделал я. Мое решение плохо повлияло на что-то?

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

[noobkin]

 

Так это же просто подкос под <button>, но без дополнений ввиде удаления outline и всего border) Не знал, что это плохо.

плохо не это. Не очень хорошо, когда на одной странице разные элементы в разных стилях сделаны. Ощущение весьма не целостное. Можно было смену цвета этой кнопки сделать с таким же переходом — было бы гармоничнее. А так бросается в глаза несогласованность.

Но в чём практическое различие в этих вариантах? Мне показалось - "просто" - именно так как сделал я. Мое решение плохо повлияло на что-то?

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

 

Вот теперь абсолютно всё понятно! Спасибо большое за консультацию

 

P.S. Пошёл пока поставлю парочку новеньких замков на дверь, а то вдруг он уже выехал ко мне...

[VIVA]

1) В поле "Заказать зонок" (для начала нет буквы "В") есть поле "Телефон", в котором стоит <input type="text">, по этой в поле можно указать любые вимволы, хотя нам нужны именно цифры (я бы поставил <input type="number">) + нужно сделать данное поле обязательным для заполнения (Скрин http://prntscr.com/9kb196).

2) Сайт имеет фиксированный размер, но при уменьшении масштаба блоки "Оценить стоимость ремонта по фото" "Прайс" начинают уплывать в право (как при резиновой верстке) http://prntscr.com/9kb3tf

3) Картинка в самом низу очень резко врезается в футер (http://prntscr.com/9kb6kt)

4) В услугах Мастерской, есть список, который при уменьшении масштаба ломается (http://prntscr.com/9kb73j)

[abrahadabra]

поле "Телефон", в котором стоит <input type="text"> … нужны именно цифры (я бы поставил <input type="number">)

а бедные пользователи потом не смогут ввести «+7(999) 000-00-00, доп. 12-34, в рабочее время, спросить Марту»

[noobkin]

1) В поле "Заказать зонок" (для начала нет буквы "В") есть поле "Телефон", в котором стоит <input type="text">, по этой в поле можно указать любые вимволы, хотя нам нужны именно цифры (я бы поставил <input type="number">) + нужно сделать данное поле обязательным для заполнения (Скрин http://prntscr.com/9kb196).

2) Сайт имеет фиксированный размер, но при уменьшении масштаба блоки "Оценить стоимость ремонта по фото" "Прайс" начинают уплывать в право (как при резиновой верстке) http://prntscr.com/9kb3tf

3) Картинка в самом низу очень резко врезается в футер (http://prntscr.com/9kb6kt)

4) В услугах Мастерской, есть список, который при уменьшении масштаба ломается (http://prntscr.com/9kb73j)

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

2) Этот косяк заметил же еще когда делал в самом начале. Больше не буду откладывать решения проблем на "потом").

3) А вот положение картинки так и было задумано - не моё решение.

4) См. п. 2 ....

 

Спасибо за потраченное время! Учиться мне еще многому похоже предстоит).

 

поле "Телефон", в котором стоит <input type="text"> … нужны именно цифры (я бы поставил <input type="number">)

а бедные пользователи потом не смогут ввести «+7(999) 000-00-00, доп. 12-34, в рабочее время, спросить Марту»

 

 

Но ведь именно для таких ситуаций и добавлено поле "Ваш комментарий к заявке". Недоработка вышла - однозначно)

Edited December 31, 2015 by noobkin

[abrahadabra]

Но ведь именно для таких ситуаций и добавлено поле "Ваш комментарий к заявке"

 

да, пожалуй у меня перебор. Но всё равно type="number" нельзя. Нормальный человек пишет телефон не в формате 74951234567, а +7 (495) 123-45-67. Здесь есть много разных символов, не только цифры. Так что в крайнем случае маску, но никак не type=number. Но лучше оставить пользователю свободу.

 

Почему я так цепляюсь именно к этому замечанию: некоторые действительно так делают. Это жутко неудобно, а потому увеличивает количество зла в мире. Зачем? Лучше количество зла уменьшать, а увеличивать количество добра.

[VIVA]

Спасибо, за замечание! Возьму на вооружение

[kattiperk]

"Если уж никак не отбрыкаться, лучше использовать woff и base64-встраивать его в css" - ну-ну погрожу пальчиком.

Не base-64-четырнейтесь тут.

.ttf - одного формата мало, хотябы .woff, .woff2 и .otf сгенерируйте.

[abrahadabra]

Не base-64-четырнейтесь тут.

простите?   

[VIVA]

Насколько я понял, это что-то вроде "не пишите про base-64" или как-то так

Edited January 5, 2016 by VIVA

[abrahadabra]

вот и интересно, почему так.

[noobkin]

"Если уж никак не отбрыкаться, лучше использовать woff и base64-встраивать его в css" - ну-ну погрожу пальчиком.

Не base-64-четырнейтесь тут.

.ttf - одного формата мало, хотябы .woff, .woff2 и .otf сгенерируйте.

Я уже успел понять - к шрифтам нужен более серьёзный подход) Буду это учитывать в следующих работах!)