оцените пожалуйста Адаптивную верстку Landing Page.

[stan07]

Добрый день оцените пожалуйста  Адаптивную верстку Landing Page.

 

http://www.web-verstka.com.ua/portfolio/models/

[rus]

на счет верстки не скажу, но то что форма работает не корректно - это факт.

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

это бага ))

[Great Rash]

<header class="header"> - бессмыслица, аналогично с <footer>.
<del>P</del> - знак рубля так не делается.

Зачем все картинки оборачивать в <figure> непонятно.

 

Ну и к вёрстке это отношения не имеет конечно, но смолчать не могу макет ужасен!

[Rakapudl]

У article и кнопок transition не хватает.

[stan07]

на счет верстки не скажу, но то что форма работает не корректно - это факт.

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

это бага ))

Спасибо, исправил.

 

<header class="header"> - бессмыслица, аналогично с <footer>.

А зачем лишении дивы делать?

 

 

 

Зачем все картинки оборачивать в <figure> непонятно.

HTML5 в действии (а что не так?)

 

У article и кнопок transition не хватает.

как это нет, при наведении есть они, а вы с какого браузера смотрите ?

 

 

 

[Great Rash]

А зачем лишении дивы делать?

Лишние дивы не нужны, но класс там зачем?

 

HTML5 в действии (а что не так?)

Появилось мнение, что вы не понимаете для чего нужен <figure>. 

[stan07]

 

 

HTML5 в действии (а что не так?)

Появилось мнение, что вы не понимаете для чего нужен <figure>. 

 

объясните, пожалуйста, а то реально не понимаю что не так.

[Great Rash]

<figure> нужен для того чтобы отобразить некий контент, на который есть ссылка в тексте, этим контентом не обязательно должна быть картинка, это может быть схема (Canvas, SVG) или вообще текст. Читали когда-нибудь учебник любой, вот там обычно есть такое:

 

http://codepen.io/GreatRash/pen/RNOdbK

 

В том, что вы обернули вообще все картинки в <figure> вообще никакого смысла нет. С таким же успехом можно было бы их в спаны обернуть или дивы.

[stan07]

<figure> нужен для того чтобы отобразить некий контент, на который есть ссылка в тексте, этим контентом не обязательно должна быть картинка, это может быть схема (Canvas, SVG) или вообще текст. Читали когда-нибудь учебник любой, вот там обычно есть такое:

 

http://codepen.io/GreatRash/pen/RNOdbK

 

В том, что вы обернули вообще все картинки в <figure> вообще никакого смысла нет. С таким же успехом можно было бы их в спаны обернуть или дивы.

Понял, спасибо!

[Rakapudl]

У article и кнопок transition не хватает.

как это нет, при наведении есть они, а вы с какого браузера смотрите ?

 

У вас transition только на .class:hover. В этом нет смысла. Поставьте на .class

[stan07]

У вас transition только на .class:hover. В этом нет смысла. Поставьте на .class

А какая разница всё и так работает ) 

[antonKar]

1) Форма после отправки не очищается;

 

 

А какая разница всё и так работает ) 

2) если транзишион только на ховер, то при уводе мышки не будет анимации;

3) текст неоттипографлен;

4) "ОТ 100 000 РУБ." лучше писать как "100'000", и почитайте про text-transform;

5) У вас есть 3 блока, которые увеличиваются при наведении. Быстроту анимации лучше увеличить в 2 раза, анимации свыше 300 миллисекунд лучше не делать (на самом деле можно, но редко). Также у вас боковые блоки становятся над всеми только в конце анимации, что не красиво: во время анимации боковых блоков они находятся под центральным, это неправильно. На этих блоках, кстати, отлично видно что бывает, если транзишион сделать только на ховере.

6) Отзывы можно двигать мышкой. На самом деле это на фиг не нужно, оставьте перелистывание только по стрелкам. У стрелок также немножко увеличьте область клика, пикселей по 10 влево-вправо-вверх-вниз, ховер по стрелкам желательно сделать. Перематывание с конца в начало смотрится некрасиво, либо зациклить, либо блокировать. И да, слайдер будет работать на мобилках/планшетах по свайпу?

7) Ховер на кнопке в подвале незавершён в плане анимации.

8) Тайтл не-порусски написан;

 

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

 

10) Текст пишите не "Тополя тополя, круто. Сделали за два дня. Спасибо все классно!", а берите, например, с http://vesna.yandex.ru/referats/

11) "$(".tnx").fadeIn(300).delay(2000).fadeOut(300);" лучше задержку делать через setTimeout, ибо более управляемо;

12) "$('#loader', form).html('<img src="images/loader.gif" /> отправляю');" не надо лишний раз без надобности дёргать DOM

13) "<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"Дайте угадаю, всё никак не можете избавиться от live?

14) Проверку полей формы лучше всё-таки делать через jQuery Validation, браузерные проверки фигня.

Edited April 3, 2015 by antonKar

[stan07]

Спасибо за комментарий!

 

 

10) Текст пишите не "Тополя тополя, круто. Сделали за два дня. Спасибо все классно!", а берите, например, с http://ajax.googleap....js"></script>"Дайтеугадаю, всё никак не можете избавиться от live?

 А зачем нагружать сервер лишним фалом ? 

Edited April 4, 2015 by stan07

[antonKar]

Дизайн и текст не мой, моя лишь верстка, что дали то и сверстал )

Это плохая отмаза, дизайнер вам не копирайтер.

 

 

 А зачем нагружать сервер лишним фалом ? 

Я про версию

[rus]

Это плохая отмаза, дизайнер вам не копирайтер.

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

[Andryshok]

Ну что вы так уже... обычный макет, обычно заказчики сами диктуют дизайн - тут хочу так.... тут этак...

[antonKar]

а в качестве текста условно любая рыба, зачем текст то оценивать?

 

С рыбой смотрится некрасиво. Тут больше эстетство, но разный текст с яндекс.рефератов смотрится всяко лучше, чем один и тот же лорем чего-то там.

Edited April 7, 2015 by antonKar

[stan07]

rus, antonKar

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

[SelenIT]

"ОТ 100 000 РУБ." лучше писать как "100'000"

Пардон, это с какого времени и, главное, для какого языка? Всё-таки для русского языка общепринятый разделитель разрядов — именно пробел (или тонкая шпация).

 

Отзывы можно двигать мышкой. На самом деле это на фиг не нужно, оставьте перелистывание только по стрелкам.

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

 

какая разница откуда брать текст

 

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

[antonKar]

Подозреваю, что главное тут — что его можно двигать пальцем на мобильных, а мышка — лишь побочный эффект этого

 

ИМХО swipe для этого куда более к месту.

[stan07]

<header class="header"> - бессмыслица, аналогично с <footer>.

Кстати, прочитал что тегов <header> и <footer> может быть несколько на странице, и тег <section> это как новая страница со своим  хедером и футером.  

Edited April 8, 2015 by stan07

[Great Rash]

Но у вас то они в единственном экземпляре.

[stan07]

Но у вас то они в единственном экземпляре.

А вдруг сайт в будущем  будет расширяться )

Edited April 9, 2015 by stan07

[Great Rash]

А вдруг нет?

[SelenIT]

Вот, честно говоря, тоже в самом по себе <header class="header"> ничего крамольного не вижу. Ну забавное совпадение — как если человек по фамилии Столяр действительно работает столяром. Так и тут: на данной странице логический блок с вводной информацией еще и оформлен как шапка — прекрасно. На другой странице шапка может состоять из единственного заголовка или быть по совместительству верхним меню, и там вместо <header class="header"> может появиться <h1 class="header"> или <nav class="header">, при этом структура страницы будет соответствовать ее логике, а внешний вид не изменится.

 

Другое дело, что имя класса, конечно, лучше бы взять понагляднее — напр. page-header или general-header. И третье дело, что эти навороты и впрямь едва ли пригодятся лендингу-однодневке