Otrivin

Если хочется экзотики, сверстайте на iframe.

Хедер, футер, сайдбар - в одном html, контентная часть - в других. В основном шаблоне на месте динамического контента подставляете iframe, в который грузите нужный html

Принцип здесь

Ну а так, или делите шаблон на сервере на
.php-файлы и инклудьте нужные части, или делайте то же самое на клиенте - способ на jquery был выше, или с библиотекой includehtml

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

На айфонах, возможно, будет загружать вебп какой-нибудь сторонний браузер, типа хрома

Зачем ВордПресс для ИМ, если есть Open cart с кучей шаблонов, как платных так и бесплатных?

Обычная сетка; иконку ставите бэкграундом, назначаете паддинг слева под размер иконки.

Кажется, здесь так реализовано spadayhome.ru

Ие не поддерживает свг? Даже в качестве фонового изображения?

Если поддерживает, то на ум приходит следующее:
1) обычный прямоугольный див без фонового цвета. В нем создаём псевдоэлемент с размером под площадь уголка + отступы, прижатый к верхнему правому углу. (Мы будем заполнять блок текстом, а псевдоэлемент не даст тексту залезать в площадь угла.
2) делаем векторную картинку с границей и срезанным уголком и ставим ее как фон у дива. Обязательно ширина и высота должны быть больше, чем предполагается использовать.
Векторная для того, чтобы при ресайзе не портилось качество. Фоновый свг позиционируем точно под псевдоэлемент, и задаём фиксированные размеры ему! Это чтобы при ресайзе уголок не менял пропорции.
2.1) у нас осталась проблема с отсутствующей отрисовкой границ снизу и слева. Решаем ее или с помощью множественных фоновых изображений (повторяем наш свг с этими отрисованными границами), или создаём дополнительные дивы с абсолютным позиционированием и прижатием к левой/нижней границе с заполнением цветом и толщиной / высотой в 1-2 пикселя.

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

Фиксированная высота текстовых блоков с text-overflow ellipsis, если плясать от фронтэнда; ограничение на количество выводимых символов , если от бэкенда.

А чем не устраивает адаптивный просмотр в инспекторе хрома? Там профили под разные устройства есть
Я на яндекс браузере, картинка на яблофоне6 не отличается от браузерной с тем же профилем

Advanced jpeg compressor поможет. Только с настройками качества повозись, чтобы не получилось уродства на выходе

Сжатие картинок будет считаться капитанством?
Я вот Png-графике уменьшаю глубину цвета, jpeg обрабатываю через advanced jpeg compressor