Оцените верстку

[Schamil74]

Всем привет!

Занимаюсь версткой 3,5 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.

На данный момент сверстал 7 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка, 1 резиновый-адаптивный без фреймфорка и 

последний с анимированным скроллингом, адаптивный, резиновый, под ретину

https://schamil74.github.io/Mogo/

[Svetlana_P]

Здравствуйте!
Пока тоже учусь. Из того, что заметила:

1. При верстке блоков с текстом учитывайте, что его размеры могут меняться. Чтобы так не было, например:

2. Меня смущает горизонтальный скролл, который вылезает на доли секунды при прокрутке.

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

4. Здесь в карусели невозможно курсором выделить текст, чтобы скопировать. Я бы не стала блокировать эту возможность 

5. Насколько я понимаю, картинки, содержащие информацию, лучше верстать через тег img, а не свойство background-image. Здесь у Вас фото как фон (кстати, там же и проблема с размером подписи)

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

7. В галерее "some of our work" меня смущают три вещи: 1) фото невозможно увеличить, хотя при этом на сайте много всякой анимации; 2) столбцы имеют класс row, тогда как обычно он используется для названия строк (для столбцов обычно col); 3) картинки снова сверстаны как фоны.

8. Я не вполне согласна с использованием тегов в блоге (основной блок и в футере) с точки зрения семантики. Весь блог я бы обернула в section, а превьюшки сделала через article каждую. И по меньшей мере с фотки должна быть ссылка на статью.

9. При наведении на анимированные элементы курсор ведет себя по-разному, хотя во всех этих случаях при клике ничего не происходит. Например, 

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

В остальных вопросах не могу оценить. Пока не умею, как Вы. Но есть вопрос: кроме .container, других классов нет, определяющих сетку? Я правильно поняла, что все построено на flexbox?

Edited May 23, 2017 by Svetlana_P

[Schamil74]

Приветствую!

Спасибо за критику.  

Пишу с телефона, будет кратко.

Скажу заранее, что каждый учебный макет это эксперимент))))

1. Полосу вообще убрал)))

2. Вроде теперь скролла нет

3. Так и должно быть

4. Наверное вы правы, но не критично.

5. Согласен с img. Исправил высоту, но нужно для мобильной версии выровнять полосу по центру (забыл)

6. Немного пофиксил.

7. Увеличим картинки. Касательно col and row. Дело в том, что когда для row задаём display: flex, то элементы по дефолту выстраиваются в строку, отсюда и название))) Про картинки см. выше.

8. Можно подробнее

9. На клик действия нет, вы правы. 

10. Анимация стала лучше. Посмотрите фреймворки, может там найдете ответ на свой вопрос, я даже не думал об container. Можно wrapper. 

Да, все на флексах.  Но есть вещь покруче https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout

 

Edited May 24, 2017 by Schamil74

[Svetlana_P]

Многие пункты были скорее придирками, чем критикой  Здорово, что прокомментировали.

8. В текущей верстке так:

- весь блог обернут в article,

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

Лучше обернуть весь блог в тег section. Он объединит заголовок и три превьюшки в один логический раздел. Для таких случаев и создан тег section. Вы так и сделали для остальных блоков, например, "What people say".

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

Я в этом вопросе недавно только разбиралась. Поэтому поправьте, если заблуждаюсь.

PS Можете показать свои новые работы? Не для критики, а так, для себя.

2 часа назад, Schamil74 сказал:

Посмотрите фреймворки

Имеются ввиду фреймворки, основанные на флексбоксах?

За ссылку спасибо, ознакомлюсь

 

[Schamil74]

44 минуты назад, Svetlana_P сказал:

Имеются ввиду фреймворки, основанные на флексбоксах?

За ссылку спасибо, ознакомлюсь

Вообще, сетку определяет не просто один класс. В бутстрап несколько основных классов .container(.container-fluid) > .row > .col +  классы для разных устройств (.col-xs-12 .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12). Бутстрап 3 работает на float. Бутсрап 4 на флексах.

В материал дизайн лайт - .mdl-grid .container > mdl-cell + классы для разных устройств (.mdl-cell--3-col. mdl-cell--2-col-tablet. mdl-cell--4-phone). MDL на флексах.

Как в других устроено я пока не изучал (информации очень много). 

Вы какими инструментами пользуетесь? Редактор? Сборщик? Препроцессор? И т.д?

Вот последняя верстка https://schamil74.github.io/Daisy/

При просмотре сайта выключить adblocker

Скоро ее выложу, она выполнена с помощью сетки бутстрап 4

Edited May 24, 2017 by Schamil74

[Svetlana_P]

Хорошо, буду иметь ввиду. Да, я помню Вы MDL упоминали в другой ветке. С бутстрапом знакома, но только на float. Видимо, пора флексы и css grid осваивать. Только смущает, что со старыми браузерами могут быть проблемы.

Инструментами пока не пользуюсь, только редактором. Хочу сперва понять, как "правильно" писать. Есть затык с сеткой и вообще позиционированием элементов, тем более как это совмещать с БЭМ-методологией. Поэтому попросила последнюю вёрстку Спасибо

[Schamil74]

Вам лучше исходники посмотреть, на сайте CSS компилиться через gulp-csso, mqpucker. Это сложно для понимания

Я именую классы по БЭМ и все. Мне кажется верстать на float новые сайты не нужно. Крайне мало, очень мало людей пользуются старыми браузерами. Может float нужно знать только для поддержки старых сайтов.

Пора бы взять на вооружение gulp или grunt, ну или хотя prepros (https://prepros.io) и препроц SCSS - синтаксис как у CSS. 

Edited May 24, 2017 by Schamil74

[Svetlana_P]

Пошла переваривать Ваши рекомендации. Звучат очень разумно. Про prepros вообще не знала, только с gulp экспериментировала. Большое спасибо  

Edited May 24, 2017 by Svetlana_P
не grunt, а gulp