На сколько верстка выглядит верной?

Question

[nikkidanni1]

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

Comments

[Сергей Кирьянов]

Не удается получить доступ к сайту

Answer 1

[Даниил Маслов]

Стоит ещё поверстать, например нет никаких состояний кнопок и ссылок, я не понимаю при наведении, можно ли на это кликнуть или это просто текст.

Форма не закрывается при нажатии клавиши Esc или клика вне области формы. В форме ресайзится по горизонтали. Никакой валидации и ошибок, подсказок нет.

Изображения не оптимизированы.

Часть декоративных элементов можно было бы сделать псевдоэлементами. Есть ошибки в консоли при скролле страницы с информации о компании.

Comments

[nikkidanni1]

Спасибо большое за ответ. У меня вопрос по поводу оптимизации изображений, имеется ввиду, что нужно сделать медиазапросы для мобильной десктопной версии с размерами 1х и 2х соответственно?
И может посоветуете почитать что-нибудь, для улучшения навыков?

[Даниил Маслов]

Сейчас достаточно просто прогнать их, например через FileOptimizer или сделать таску для галпа, если его используете.

Можете посмотреть в сторону тега picture отдавая разные картинки на разных разрешениях. Про размеры 1x и 2x, это вы имели ввиду скорее всего оптимизацию под ретину. Для мобильной версии достаточно отдавать картинки тех размеров, которые прописаны в медиа-запросе.

Про изображения очень подробно можете почитать по ссылке: https://developers.google.com/web/fundamentals/per... этого должно хватить.

Answer 2

[Максим Тимофеев]

На сколько верстка выглядит верной?

на 12кг

какие технологии мне стоит подтянуть?

смотря куда идете и чего хотите. Можете например зайти на сайт jquery и узнать что есть более новые версии чем 1.11.1. Можете почитать про восприятие пользователей, что бы не делать прозрачный фон под текстом. "Слайдер мордочек" плохо адаптирован под мобилки. Кнопка "написать нам" работает не на всех страницах. Но в целом сама верстка очень не плоха на первый взгляд. А вот по дизайну и в целом по UI/UX там много проблем.

Comments

[nikkidanni1]

Слайдеп в принципе сделан из блока завернутого в меньший блок, так попросили сделать

[nikkidanni1]

Дизайном я не занималась

[Максим Тимофеев]

nikkidanni1,

Слайдеп в принципе сделан из блока завернутого в меньший блок,

не понимаю к чему это, но наверное оправдание

так попросили сделать

попросили сделать так, что бы кусак соседнего слайда торчал? А а первый был не центрирован?

Дизайном я не занималась

Передайте дизайнеру, что бы он почитал книжки какие-нибудь. Очень срочно.

[nikkidanni1]

Максим Тимофеев, к тому, что это в принципе сложно назвать слайдером, о какой уж там адаптации речь. Видимо так не стоит делать, буду знать

Answer 3

[Martovitskiy]

На мобильных работайте с адаптивом:

Переделайте карусели:

выровнять по центру

а этот блок или убрать или сделать слайдером


Обработчика формы, как и обработки ошибок нет.

Comments

[nikkidanni1]

Работать над адаптивном что имеется в виду? Слайдеры должны помещаться в высоту экрана и где ещё косяки в плане адаптива?

[Martovitskiy]

nikkidanni1, задайте сколько items должно поместиться на экране. На мобильных 1, на планшетах 2 и т.д.
Я не должен на мобильном видеть часть другого item.
На странице новости у Вас одна огромная картинка. Сделайте её слева, описание справа, добавьте галерею. Что дает эта статья? Ну разработали Приложение для iPad, дайте ссылку на приложение или qr на скачивание, добавьте комменты, лайки ну то уже второстепенные задачи...

[nikkidanni1]

Значит считается плохим тоном отображать дробное количество слайдов?
В принципе я поняла тут большая часть замечаний к дизайну самому, а не верстке

[ParaBellum577]

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

[Martovitskiy]

nikkidanni1, этим занимается верстальщик, дизайн тут не причём

[Александр Маргинал]

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

[Martovitskiy]

Александр Маргинал, практика такая есть, но никогда соседний слайд не обрезается так грубо. Или это тоже задумано дизайнером? Сомневаюсь...

[Александр Маргинал]

Martovitskiy, очень часто такое бывает. В 80% случаев дизайнер это человек который рисует как ему вздумается