Оцените вёрстку двух страниц

DivMan · May 2, 2015

http://allnet.16mb.com/nerds/index.html

http://allnet.16mb.com/nerds/catalog.html

Файлы JPG

http://i60.fastpic.ru/big/2015/0502/86/b2210f370d121d629eb33528e2e1fa86.jpg
http://i59.fastpic.ru/big/2015/0502/67/314419a37b5011dca34e7c692f48ea67.jpg

Стайлгайды

http://i57.fastpic.ru/big/2015/0502/d0/5bc7b491b8057d8a35a9e58725a2fdd0.jpg

Требования

Разметка:

Б1. Выполнена HTML-разметка всех страниц и всех элементов на страницах.
Б2. К страницам подключён один стилевой файл (с учётом normalize.css или reset.css к каждой странице могут быть подключены два файла).
Б3. Стилевой файл подключён внутри <head>.
Б4. Грубые ошибки в разметке отсутствуют. Например:
- Грубые ошибки:
  - Ссылки сделаны не тегом <a>, а другими тегами;
  - Использование строчных элементов для создания крупных (сеточных) блоков;
  - Абзацы сделаны не тегами <p>, а <br><br>.
- Не грубые ошибки:
  - Отсутствие семантических тегов <header>, <footer>, <section> и других;
  - Ошибки касающиеся SEO-оптимизации.
Б5. Документ проходит проверку на валидность.

Стилизация

Б6. Вся собственная стилизация выполнена в одном стилевом файле.
Б7. Раскладка блоков на странице сделана не с помощью таблиц или позиционирования.
Б8. В CSS отсутствует !important. Допускается использование !important при обосновании его необходимости в комментарии.
Б9. Подключены правильные шрифты, их размеры и толщина соответствуют размерам в макетах и ТЗ.
Б10. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
Б11. При наполнении контентом (как в макете) элементы каждой страницы соответствуют макету, но допускаются:
- Различия в 5 пикселей по высоте (при расстояниях более 30 пикселей) и 2 пикселя по ширине;
- Отсутствие стилизации кастомных элементов форм;
- Различия в отображении шрифтов, связанные со сглаживанием на различных платформах.

Тестирование

Б12. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+.
Б13. Сайт нормально смотрится на минимальном для макета разрешении 880px

При большем размере экрана макет должен оставаться по центру и не иметь горизонтального скролла. На разрешениях экрана меньше ширины контейнера вёрстка не должна менять свою структуру.

Разное

Б14. В корне документа имеются папки css, img, js или аналогичные. Главная страница имеет названиеindex.html. В названиях и расширениях файлов нет заглавных букв и пробелов, использованы только латинские символы.
Б15. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
Б16. Выбран подходящий формат изображений, например:
- JPEG для фотографий;
- PNG для всех прочих.

Дополнительные критерии Разметка

Д1. У всех изображений в теге <img> прописан размер.
Д2. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
Д3. Все скрипты подключены непосредственно перед </body>.
Д4. Названия полей форм привязаны к своим полям с помощью <label>.

Стилизация

Д5. Использованы normalize.css или reset.css (но не оба сразу).
Д6. Для стилизации не использованы #id.
Д7. Нет вложенности селекторов больше двух.
Д8. Явно указано подходящее vertical-align для потоковых блоков с display: inline-block.
Д9. Для CSS-свойств с префиксом указан его вариант без префикса и это указание идёт последним.
Д10. Для блока у которого есть фоновое изображение прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).
Д11. Все состояния элементов (смотрите styleguide.psd) прописаны в стилевом файле.
Д12. Файл стилей представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный.

JavaScript

Д13. JavaScript-файл представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный.
Д14. С помощью JavaScript реализовано открытие/закрытие окна с формой (без вспомогательных библиотек).
Д15. С помощью JavaScript добавлена анимация формы (без вспомогательных библиотек).
Д16. Добавлена интерактивная карта (допускается подключение с помощью iframe).

Тестирование

Д17. Вёрстка проходит тест на переполнение контентом:
- Не ломается при добавлении в элементы большего количества текста;
- Не ломается при использовании картинок с неподходящими размерами;
- Не ломается при изменении количества потоковых блоков;
Текст не выпадает из блоков, нижерасположенные блоки не скрываются, смещение блоков в потоке сохраняет логику потока (не приводит к нарушению сетки).
Д18. Критический функционал сайта работоспособен без JavaScript (использовано прогрессивное улучшение), например:
- Все формы являются работоспособными без JavaScript;
- Элементы, вызывающие появление попапов, являются ссылками, ведущими на отдельные страницы;
- Интерактивная карта без JavaScript показывает статичную картинку с картой.

Разное

Д19. Отсутствует транслит в названиях классов, атрибутах и так далее.
Д20. При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения (если иное не прописано в ТЗ или slyleguide.psd).
Д21. Проведена базовая оптимизация: минифицированы стили и скрипты, использованы спрайты и/или иконочный шрифт (смотрите ТЗ).

Edited May 2, 2015 by DivMan

raptor-dm · May 2, 2015

на вряд ли кто захочет все это читать.
а вообще верстка как верстка. обычные стандартные блоки. не знаю что там вообще оценивать.

лично я верстал такие макета в легкую до автоматизма с стажем пол года))

Edited May 2, 2015 by raptor-dm

DivMan · May 2, 2015

на вряд ли кто захочет все это читать.
а вообще верстка как верстка. обычные стандартные блоки. не знаю что там вообще оценивать.
лично я верстал такие макета в легкую до автоматизма с стажем пол года))

но косяки же где-то должны быть

afdw · May 2, 2015

Andryshok · May 2, 2015

Размер окна браузера попробуйте менять - сразу косяки и вылезут ... :wacko:

advokatua · May 2, 2015

странно, я Хроме у себя на 23.7 вообще ничего не вижу из косяков, ни на максимуме ни при сжатии. Да и страничка такая простая, что оценивать нечего буквально.

afdw · May 2, 2015

Анимации и автоперелистывания на главной в слайдере нет.

Форму обратной связи лучше сделать модальной.

antonKar · May 2, 2015

Первая вёрстка

1) Лебедев в Ководстве призывает отказываться от "ё" в текстах, но по моему ИМХО это неправильно, и "ё" в словах быть должна.

2) Нет анимации смены слайдов в шапке, нет стрелочек. Если стрелочек нет, то иконки переключения слайдов надо делать больше. Верстать слайдеры на чистом CSS конечно забавно, но это не для продакшена.

3) "Как мы работаем" в списках потерялись знаки пунктуации, собсна как и слева в списке.

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

5) Не работает проверка формы.

6) В подвале сетка текста съехала.

7) У кнопок по ховеру можно смену цвета сделать с анимашкой.

8) Зачем выносить корзину в отдельный пункт меню со своим div и ul? ul, кстати говоря, можно спокойно выкинуть, а li заменить на div.

9) "<p>Покорите топ-10 приложений<br>в AppStore и Google Play</p>" За такое надо палкой бить по рукам. Какие ещё принудительные переносы текста там, где они не нужны? Типографьте текст и чтобы никаких br.

Вторая вёрстка

Вы сначала доделайте её, а уже потом предлагайте к оцениванию. Вёрстка с неработающим слайдером - серьёзно?

Edited May 2, 2015 by antonKar

Andryshok · May 2, 2015

Хром, лисила, 1 и тот же баг в подвале :wacko: . Ноут

1920 x 1080

Edited May 3, 2015 by Andryshok

DivMan · May 3, 2015

Первая вёрстка
1) Лебедев в Ководстве призывает отказываться от "ё" в текстах, но по моему ИМХО это неправильно, и "ё" в словах быть должна.
2) Нет анимации смены слайдов в шапке, нет стрелочек. Если стрелочек нет, то иконки переключения слайдов надо делать больше. Верстать слайдеры на чистом CSS конечно забавно, но это не для продакшена.
3) "Как мы работаем" в списках потерялись знаки пунктуации, собсна как и слева в списке.
4) У карты должен быть отключен скролл мышью. Для мобильных устройств по бокам должно быть пикселей по 40 свободного пространства, чтобы пользователь мог спокойно прокручивать страницу, а не попадал на карту и прокручивал её.
5) Не работает проверка формы.
6) В подвале сетка текста съехала.
7) У кнопок по ховеру можно смену цвета сделать с анимашкой.
8) Зачем выносить корзину в отдельный пункт меню со своим div и ul? ul, кстати говоря, можно спокойно выкинуть, а li заменить на div.
9) "<p>Покорите топ-10 приложений<br>в AppStore и Google Play</p>" За такое надо палкой бить по рукам. Какие ещё принудительные переносы текста там, где они не нужны? Типографьте текст и чтобы никаких br.

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

Что значит "Как мы работаем" в списках потерялись знаки пунктуации, собсна как и слева в списке.?

Слайдер же работает

А как сделать без br? Это придётся для каждого блока, создавать свои стили

Edited May 3, 2015 by DivMan

antonKar · May 3, 2015

Что значит "Как мы работаем" в списках потерялись знаки пунктуации, собсна как и слева в списке.?

В списках в конце должна быть либо точка с запятой, если следующий пункт списка начинается с прописной буквы, либо точка, если это последний пункт или следующий пункт списка начинается с заглавной буквы.

Слайдер же работает

Технически да, он работает. Визуально он работает топорно. Типа как у Chevrolet включение новогоднего настроения http://www.chevrolet.ru/vse-o-chevrolet/events/2014/12/s-novym-godom/1.html

А как сделать без br? Это придётся для каждого блока, создавать свои стили

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

DivMan · May 3, 2015

На счёт знаков пунктуации, это вопросы к дизайнеру.

У Chevrolet совсем другой слайдер

Если я уберу br из вёрстки, то будет смотреться совсем не по макету.

swandev · May 3, 2015

На счёт знаков пунктуации, это вопросы к дизайнеру.
У Chevrolet совсем другой слайдер
Если я уберу br из вёрстки, то будет смотреться совсем не по макету.

Не нужно совсем отказываться от <br>, как советует товарищ выше.

Например в таком блоке http://take.ms/t4m2Dможно использовать<br> после 6,

У вас на сайте в блоке с адресом, после запятой.

А в слайдере и в блоке ВЕБ-САЙТЫ\ПРИЛОЖЕНИЯ\ПРЕЗЕНТАЦИИ уже нет необходимости использовать br

Edited May 3, 2015 by swandev

antonKar · May 3, 2015

На счёт знаков пунктуации, это вопросы к дизайнеру

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

У Chevrolet совсем другой слайдер

И шо с того (там, кстати говоря, не слайдер вовсе)? Ваш слайдер от этого стал лучше выглядеть?

Если я уберу br из вёрстки, то будет смотреться совсем не по макету

А вы учитесь делать без br. И не надо задротить на "идеально попиксельно", это невозможно чтобы абсолютно весь макет, включая текст, выглядел прямо как в макете. Кстати, заголовок "Приложения" таки тегом заголовка надо, а не дивом.

Не нужно совсем отказываться от br, как советует товарищ выше

В очень редких случаях его использование оправдано, но очень редко.

Например в таком блоке http://take.ms/t4m2Dможноиспользовать br после 6

С чего это вдруг там br внезапно нужен? Родительский блок у нас по ширине ограничен - этого недостаточно?

У вас на сайте в блоке с адресом, после запятой.

Точно также надо делать ограничение блока по ширине, а не ставить br.

Edited May 3, 2015 by antonKar

FitTech · May 3, 2015

Можно получить от Вас скрипт и код слайдера в верхней части сайта?

antonKar · May 3, 2015

Можно получить от Вас скрипт и код слайдера в верхней части сайта?

http://li.tl/i/b/vxpp3.png

afdw · May 3, 2015

Можно получить от Вас скрипт и код слайдера в верхней части сайта?

http://jsfiddle.net/pbzewpdL/

swandev · May 3, 2015

Например в таком блоке http://take.ms/t4m2Dможноиспользовать br после 6
С чего это вдруг там br внезапно нужен? Родительский блок у нас по ширине ограничен - этого недостаточно?

У вас на сайте в блоке с адресом, после запятой.
Точно также надо делать ограничение блока по ширине, а не ставить br.

Не всегда можно подобрать нужную ширину. В одном месте будет хорошо, а в другом где слово короче, уже не красиво, примеров много можно привети (можете посмотреть сайт нексуса от гугла)

ограничили мы здесь ширину http://take.ms/DCM9Q, разве это красиво?

afdw · May 3, 2015

Нет анимации смены слайдов в шапке, нет стрелочек. Если стрелочек нет, то иконки переключения слайдов надо делать больше. Верстать слайдеры на чистом CSS конечно забавно, но это не для продакшена.

Вот с анимацией и стрелочками.

advokatua · May 3, 2015

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

Так чушь же. Сейчас буквально любой лендинг можно нагнуть таким несущественным аргументом.

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

И раз уж начал ему такие мелочи подкидывать, почему не говоришь, что "КОНТАКТЫ" это такой же косяк (даже хуже), ибо ПО-ЛЕБЕДЕВУ правильно писать "Контактная информация"?

И если уж совсем цепляться, то надо было посоветовать и ссылки подчеркивать, ибо ТЁМА тоже просит так делать. И не важно, что уже даже Google отошел от этого правила.

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

А как узнать, что это именно косяк (если говорить не об очевидных ошибках в орфографии)? Если брать одного из последних внимательных заказчиков, то например за самодеятельность со знаками пунктуации меня бы тут же спросили "что это за херня? В макете такого ведь нет." и 100% сказали бы вернуть все как в макете. Зачем делать и переделывать бесплатно, когда можно сделать 1 раз, а затем брать доп. финансы за доработки, если таковые будут? )

Edited May 3, 2015 by advokatua

afdw · May 3, 2015

Например в таком блоке http://take.ms/t4m2Dможноиспользовать br после 6
С чего это вдруг там br внезапно нужен? Родительский блок у нас по ширине ограничен - этого недостаточно?

У вас на сайте в блоке с адресом, после запятой.
Точно также надо делать ограничение блока по ширине, а не ставить br.

Не всегда можно подобрать нужную ширину. В одном месте будет хорошо, а в другом где слово короче, уже не красиво, примеров много можно привети (можете посмотреть сайт нексуса от гугла)

ограничили мы здесь ширину http://take.ms/DCM9Q, разве это красиво?

Откройте для себя .

Edited May 3, 2015 by afdw

swandev · May 3, 2015

Например в таком блоке http://take.ms/t4m2Dможноиспользовать br после 6
С чего это вдруг там br внезапно нужен? Родительский блок у нас по ширине ограничен - этого недостаточно?

У вас на сайте в блоке с адресом, после запятой.
Точно также надо делать ограничение блока по ширине, а не ставить br.

Не всегда можно подобрать нужную ширину. В одном месте будет хорошо, а в другом где слово короче, уже не красиво, примеров много можно привети (можете посмотреть сайт нексуса от гугла)

ограничили мы здесь ширину http://take.ms/DCM9Q, разве это красиво?

Откройте для себя .

Я знаю что такое неразрывный пробел, а вы похоже нет

afdw · May 3, 2015

Например в таком блоке http://take.ms/t4m2Dможноиспользовать br после 6
С чего это вдруг там br внезапно нужен? Родительский блок у нас по ширине ограничен - этого недостаточно?

У вас на сайте в блоке с адресом, после запятой.
Точно также надо делать ограничение блока по ширине, а не ставить br.

Не всегда можно подобрать нужную ширину. В одном месте будет хорошо, а в другом где слово короче, уже не красиво, примеров много можно привети (можете посмотреть сайт нексуса от гугла)

ограничили мы здесь ширину http://take.ms/DCM9Q, разве это красиво?

Откройте для себя .

Я знаю что такое неразрывный пробел, а вы похоже нет

Почему? С помощью неразрывного пробела можно подсказать браузеру, где не надо переводить строку. Таким образом можно управлять переносом, расставив неразрывные пробелы там, где не нужен перевод строки.

antonKar · May 3, 2015

ограничили мы здесь ширину http://take.ms/DCM9Q, разве это красиво?

Как уже написано было ранее, для таких моментов существует неразрывный пробел. Избавившись от br, оттипографив текст и расставив в нужных местах неразрывные пробелы и дефисы можно получить текст, который не зависит от ширины родительского блока. Можно сколько угодно менять ширину родительского блока и не заморачиваться с br.

А вообще для понимания такой штуки лучше в какой-нибудь студии поработать пару месяцев контентщиком.

Никто (за исключением Лебедева) не будет иметь тебе мозг от того, что ты пишешь обращение "Вы" с большой буквы, даже если это слово не стоит первым в предложении

Я навскидку могу вспомнить с 5 человек за мою пока ещё недолгую 4-летнюю продакшн-карьеру, которых весьма так волнует качество текста на сайте. Ибо есть правила русского языка, которых нужно придерживаться, если конечно не хочешь посвятить свою жизнь созданию лендингов за бутерброды.

И раз уж начал ему такие мелочи подкидывать, почему не говоришь, что "КОНТАКТЫ" это такой же косяк (даже хуже), ибо ПО-ЛЕБЕДЕВУ правильно писать "Контактная информация"?

Ну, не надо так уж сильно бомбить. Во-первых, когда я упоминал Лебедева, я указывал, что то замечание лишь моё ИМХО. Лебедева нужно прислушиваться, в большинстве случаев он говорит верные вещи, но свою голову на плечах иметь надо.

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

надо было посоветовать и ссылки подчеркивать, ибо ТЁМА тоже просит так делать

В большинстве случаев надо, в данном конкретном случае не могу сказать ничего, т.к. лень заново вёрстку открывать.

А как узнать, что это именно косяк (если говорить не об очевидных ошибках в орфографии)?

А о чём говорить?

Если брать одного из последних внимательных заказчиков, то например за самодеятельность со знаками пунктуации меня бы тут же спросили "что это за херня? В макете такого ведь нет." и 100% сказали бы вернуть все как в макете

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

Зачем делать и переделывать бесплатно, когда можно сделать 1 раз, а затем брать доп. финансы за доработки, если таковые будут?

Доработки — это одно, а неуважение собственного труда, отсутствие желания "делать охрененно и не ссать" — это совершенно иное.

Edited May 3, 2015 by antonKar

advokatua · May 3, 2015

Доработки — это одно, а неуважение собственного труда, отсутствие желания "делать охрененно" — это совершенно иное.

Расставлять точки с запятыми это не охрененно, это лишь твоя фантазия о крутости/правильности от передоза Ководства. Во-первых ты не понимаешь разницы между дизайнерским блоком и обычным текстом, а во-вторых все срать хотели на правила, и вот почему:

Сайт Темовский конечно же 8)

С таким же успехом можно придираться к предложениям у которых нет точки в конце, или к тексту набранным в верхнем регистре.

Edited May 3, 2015 by advokatua

Sign In

Оцените вёрстку двух страниц

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information