Адаптивный веб-дизайн на примере резинового кота

"Так это же флэш!" - вот первая мысль, возникающая при взгляде на адаптивного кота в исполнении японца Roxik'а.

Но это не флэш: вся анимация происходит на элементе canvas, с помощью Javascript-кода caaaaat.js. Чтобы увидеть внутреннее устройство модели, жмите на ссылку "change view":

На этом примере известный нам по гениальным флэш-работам Roxik не отстает от тренда под названием HTML5 и на собственном примере показывает, что главное - креативность, а технология - второстепенна.

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

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

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

Roxic выложил также исходный код этого HTML5-проекта: http://roxik.com/cat/source.zip .