Создание интерактивной карты здания. Каков будет наиболее гибкий вариант?
svg + Raphael.js
Цвета будут меняться не через смену классов, а с помощью js
А вот адаптивность тут конечно мимо.
На 320px там пальцем то не особо попадешь в эти квадратики.
Была ситуация, когда на адаптивном сайте присутствовали таблицы, создаваемые в визивиге, и имеющиеся приемы адаптивность таблиц не подходили.
В итоге я сделал минимальную ширину для блока таблицы что-то в районе 720, и обернул его в блок с горизонтальной прокруткой.
Получилось, что сайт адаптивный, все как надо, а таблицу можно рассмотреть легким свайпом.
Хороший и современный вариант - SVG, что я тебе и советую. Можно было бы сделать изображениями и активировать нужные при наводе на area, если бы у тебя была возможность порезать это на изображения, но у тебя кажется нет PSD файла.
Но я бы выбрал SVG решение. SVG можно манипулировать при помощи CSS (адаптивность же нужна) и элементы внутри SVG смогут реагировать на :hover при помощи CSS также просто, как и html элементы.