Павел Радьков

Для оптимизации кода можно ввести количественную меру: «зеленые» значения в pagespeed.

Конечно, не все пункты из списка pagespeed сто́ит выдрючивать на этапе верстки, некоторые имеют смысл только на боевом сервере. Но если уж на проекте GIT, то закинуть шаблоны на GitHub Pages и потестить скорость было бы здорово.

Есть техника эмуляции одного брейкпоинта через min-width, max-width и calc.
Этот «брейкпоинт» зависит от размеров контейнера, а не от ширины окна — идеально для виждетов.

codepen.io/paulradzkov/pen/NNgVEO — вот пример.
https://medium.freecodecamp.com/the-fab-four-techn... — вот статья с описанием принципа работы.

www.awwwards.com/shop — не эти ли книги вы ищите?

Такое возможно.

Если у вас все основные состояния уже нарисованы, экспортируйте дизайн в Adobe Edge Reflow
https://www.adobe.com/ru/products/edge-reflow.html

Тут вы сможете «докрутить» адаптивность на промежуточных брейкпоинтах без изучения кода.

Клиентская оптимизация — прямая обязанность верстальщика. Не все рекомендации Page Speed верстальщик может выполнить самостоятельно, но он должен выступать с инициативой и обращаться за помощью к коллегам: включить gzip на сервере, поправить htaccess, чтобы оптимизировать кэширование и т.д.

Готовые продажные шаблоны https://wrapbootstrap.com/themes/e-commerce

Методология, которая снимает боль, называется «Mobile First». Bootstrap ее тоже использует.

Суть кратко: мобильный макет обычно выглядит проще всего, там одна колонка, минимум декора → верстаем его в первую очередь. В css на этом этапе появятся стили для текста, фоны, цвета, какие-то базовые отступы.
На более крупных экранах макет усложняется, появляются колонки и т.д. При помощи media queries к мобильной версии дописываем layout-стили, переопределяем уже написанные стили, если нужно (например, размер шрифта увеличился). Базовые стили наследуются из уже написанного кода.
И так для каждого компонента, начиная от маленького экрана заканчивая самым большим, «уточняем» верстку пока не будет все как на дизайне.

Делал когда-то кодкаст по такой методологии cssdeck.com/labs/adaptive-tabs
Нажмите кнопку «play» чтобы посмотреть процесс написания кода.

Если кода не видно, зайдите в режиме инкогнито (без адблока).

Правило, которым пользуюсь я:

В настольной версии размер основного шрифта (абзацы) не менее 16px. Заголовки от h4 до h1 растут по с коэфициентом 1.250 (Major Third): h4 - 20px, h3 - 24px, h2 - 32px, h1 - 40px. (округленно)

Для маленьких экранов (<768px) абзацы остаются 16px или уменьшаются до 14px (если много текста). Заголовки h4...h1 пересчитываются от нового размера абзаца с коэффициентом 1.125 (Major Second). В этом случае размеры заголовков растут более плавно: h4 - 18px, h3 - 20px, h2 - 23px, h1 - 26px.

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

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

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

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

Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

https://code.google.com/p/resize-crop/ — попробуйте подровнять их скриптом. (не знаю, как он работает с респонсив контентом)

Второй вариант — сделать обложки фоном с background-size: cover. Но в этом случае обложки не будут индексироваться как изображения, и это понизит «accessibility» сайта.