Опишите тезисно, как сегодня должен быть сверстан хороший сайт?

Question

[Эмиль Валеев]

Наименования актуальных технологий + (не обязательно, но если не затруднит) их короткое описание
Например, пару лет назад бы ответили что-то вроде "верстка на дивах, медиа-запросы для мобильных устройств" и так далее. Спасибо

Comments

[Павел Волынцев]

А что проку с списка технологий? Если я скажу Haml, от этого вёрстка станет лучше? Или тебе просто todo надо для самостоятельного изучения?

[itsjustmypage]

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

[Павел Волынцев]

itsjustmypage: как свёрстан - это два вопроса в одном. Какими техниками или какими средствами. Я бы сказал - пользуйтесь веб-штормом и gulp с препроцессорами, а другие - используйте media и flex

[Павел Волынцев]

ну надо же - попал в юзера :( дал же бог фамилию, как говорится

Answer 1

[Виталий Инчин ☢]

• БЭМ. Независимые блоки.
  
• Препроцессоры
  
• Постпроцессоры
  
• Семантическая верстка
  
• Целиком и полностью адаптивная верстка
  
• Грамотное использование тегов HTML5
  
• Оптимизация скорости загрузки страниц
  
• Меньше бессмысленных JS-плагинов и библиотек
  
• Относительная кроссбраузерность
  
• Деление сайта на 2 версии - сжатую (без мусора и воды, ту, что реально сервер будет отдавать) и обычную (для человеко-понятного редактирования).
  
• И еще: Тык
  

Comments

[Сергей delphinpro]

Независимые блоки забыл

[Виталий Инчин ☢]

Сергей: ок, дополню

[Сергей delphinpro]

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

[Keyten]

> JS-плагинов

[Tony Ter]

"Относительная кроссбраузерность". Относительно чего?

[Игорь Воротнёв]

БЭМ - весьма спорно, это лишь один из возможных подходов. Плюс - ни слова о resposiveness / отзывчивости, что уже кагбэ давно стандарт де-факто.

[Виталий Инчин ☢]

Игорь Воротнёв: для меня это стало настолько обыденным, забыл упомянуть. Добавил.

[Виталий Инчин ☢]

Tony: относительно пожеланий заказчика/личных.

[Игорь Воротнёв]

Виталий Инчин ☢: БЭМ все еще спорно (хотя блочность - факт, просто БЭМ - лишь одна из реализаций концепта), но список уже норм. Поставил лайк.

Answer 2

[Дмитрий Новиков]

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

Answer 3

[Елизавета Борисова]

Если говорить про сайты, от верстальщиков также ждут умение применять CSS-анимации и SVG.

Answer 4

[Павел Волынцев]

Может вот эта статья пригодится? Базовые принципы вёрстки

Answer 5

[Ivanq]

И сейчас также "верстка на дивах, медиа-запросы для мобильных устройств"

Comments

[Игорь Воротнёв]

Вы имеете в виду "верстка-не-таблицами", что ли? Потому как безликий div далеко не всегда подходит, тем более сейчас используется семантика и секционирующие элементы - section, article, main, header, footer и так далее. Это раз. Два - медиа-запросы для мобильных устройств это некорректный подход. Правильный - верстка mobile-first, а медиа-запросы - по мере увеличения устройств.

[Ivanq]

Игорь Воротнёв: Я просто повторил текст вопроса.

[Игорь Воротнёв]

Ivanq: я заметил, и в этом как раз проблема - вы не напправили своим ответом в нужном наравлении.

[Ivanq]

Игорь Воротнёв: возможно, но я предпочитаю на Тостере не сориться

[Игорь Воротнёв]

Ivanq: :) никто и не ссорится, ничего личного

Answer 6

[Алексей Пацурковский]

Модульность отдельно взятых блоков.
Чтобы легко можно было переставить и ничего не ехало.
(aside, article, blockquote, блок авторизации и тд.)
Так сказать применение основ БЭМ`а.

Answer 7

[3luyka]

>>верстка на дивах, медиа-запросы для мобильных устройств
Сегодня как не пару лет назад это тоже актуально.

Comments

[Эмиль Валеев]

Не сомневаюсь, но интересуют нововведения