Богдан Духевич

Что за ересь? Что за верстальщики советуют 1й способ - динозавры? Ау, с добрым утром, мы в 2017-м уже!
Естественно второй способ лучше. Особенно в контексте SASS и Vue.

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

1. Гриды - будущее, однако только для глобальных лейаутов. ТОЛЬКО.
2. Флексбоксы - настоящее, могут использоваться без проблем как в локальных местах, там и для глобального лейаута. ИЕ11+, с некоторыми нюансами.
3. Флоат - прошлое, но все же это старый-добрый флоат. Всегда спасет и прикроет вашу задницу в случае чего. Как и верстка на inline-block'ах. Но FLEX конечно должен быть сейчас в приоритете, в любом случае.

для сжатия jpg используйте imagemin-jpeg-recompress
для сжатия png - optipng/pngquant

Заказчик неадекватен.
1366 сейчас намного актуальнее нежели 1280, потому дизайнер тут не ошибся.
Если макет позволяет, растяните некоторые элементы до 1366, предварительно обсудив данный момент с заказчиком.

п.с. по-поводу "начинать верстку надо с мобильной версии": такое сработает только если прототип сайта построен грамотно и все изменения мобайл->десктоп продуманы на этапе дизайна и имеют смысл.

owlgraphic.com/owlcarousel/demos/sync.html

правильно гуглить

Технологий уйма. Я вижу, что ребята выше написали вообще все, что только можно.

Но если говорить о скорости, то, в первую очередь, нужно все инструменты объединить в одном месте. Для этого лучше всего подходит Gulp.

1. SASS - компилируется на ~150% быстрее чем LESS (при условии компилирования с помощью libsass), имеет интуитивно понятный синтаксис (речь о функциях и операторах, а не о CSS-возможностях).
2. Gulp (указываю плагины, касающиеся именно повышения скорости разработки):
- gulp-sass;
- browser-sync - обновление стилей/изобр/скриптов без перезагрузки страницы (как статика, так и CMS)
- генератор спрайта (как png, так и svg), при статике так же еще возможно обновление html;
- оптимизация изображений (png, jpg, svg);
3. Редактор кода - Sublime Text. Стабильный, быстрый, легковесный:
- Emmet;
- сниппеты;
- Gulp плагин - для быстрого запуска тасков (самый удобный хоткей - CTRL + SHIFT + M - для запуска дефолтного таска, CTRL + ALT + M - для остановки всех тасков, CTRL + M - для вызова выпадающего списка с тасками);
4. Методологии - SMACSS, как по мне, одна из самых удачных, но еще лучше разработать свой собственный подход. Верстать все максимально модульно, это даст огромный прирост скорости как на поздних этапах разработки, так и в дальнейшем при поддержке проекта.

Ну и всегда думайте, как можно унифицировать тот или иной момент. В таком случае от проекта к проекту ваша скорость будет всегда расти, а значит времени на что-то новое будет все больше.

Скорость верстки очень сильно зависит от типа проекта. Также скорость верстки прямо пропорциональна объему навыков (как связанных с IT, так и базовых), умноженному на опыт.

Чтобы измерить скорость чистой верстки с типичным функционалом идеально подойдет обычный несложный лендинг, а лучше сразу несколько. На лендинги небольшого размера у опытного верстальщика уходит от 5 до 9 часов, в зависимости от инструментов и технологий, которые он применяет при верстке.

Оценить скорость конкретно только верстки под CMS довольно сложно, так как верстка под CMS включает также много других смежных задач и подводных камней.

Основные навыки и инструменты, повышающие скорость верстки:
- touch typing - слепая печать - незаменимый навык, значительно ускоряющий любую деятельность за ПК
- emmet, сниппеты, сохраненные заготовки, шаблоны
- препроцессоры
- хорошее владение редактором кода (шоткаты и т.п.), быстрое перемещение по коду
- способность быстро осваивать новую информацию и сразу же применять ее
и т.д. - можно долго продолжать этот список

Использование первых трех в сумме дает очень большой прирост скорости.
В таком случае скорость верстки будет выше средней.

Ваша проблема локальная.
Firefox 33.1 - проблема не наблюдается.
Кстати, scale ужасно рендерится в сафари 5. но это так, к слову. и только при слишком маленьком значении.

Все элементарно. Белая фигурка внутри - png (лучше с прозрачностью, вдруг цвет фона поменяется), треугольный выступ под ней - обычный css-треугольник, сделанный с помощью border. Александр выше Вам кинул пример, посмотрите как они генерируются, там все предельно просто.