Ссылки Поиск Написать В избранное NO

«Резиновая» верстка для старых сайтов

Так как работы много, я стараюсь обновлять портфолио по адаптации порциями. Но не так давно я обновил свои старые сайты и просто решил похвастаться. Например, вот logopediya.com, на которой теперь «тянущийся» адаптивный «дизайн» на чистом CSS. Переработал все блоки, рамки и тени.


(08.09.2016 blogger) «Резиновая» верстка для старых сайтов - На примере logopediya.com

Зачем же пытаться сделать адаптивный дизайн еще и «резиновым»? Да, такое вот масло масляное получилось.

Но дело в том, что я очень много работаю с фиксированными сайтами и обычно переделываю их для всех разрешений с 775px и ниже. Это позволяет на Айпаде «вертикально» получить «мобильную» версию, а «горизонтально» - полную. Ну и комфортно использовать сайт на мобильных устройствах меньшего размера. (Про проверки в Яндексе и Гугле я вообще молчу. Их при определенной сноровке можно пройти за пару минут, хоть и проходят они примерно на 350 пикселях).

Конечно, всегда есть вариант - выдавать адаптивную версию при ширине экрана 800 или даже 1024 пикселя, но обычно это не очень красиво. Да и не имеет особого смысла для планшетов с большим экраном. Но вот если получается дополнительно сделать сайт тянущимся с ширины шаблона и до 775 пикселей, это просто замечательно! Тогда мы охватываем все 100% разрешений и устройств. Допустим, 1100px в шаблоне и ниже.

А так как удобный сайт просто обязан быть зафиксирован на определенной ширине (это удобно при большом мониторе) сайт все еще отлично выглядит и для высоких разрешений.


Приведу пару примеров, где я делал фиксированный сайт тянущимся при определенной ширине, а уже потом переходил на адаптивную (ну или «мобильную») версию:

video-grup.ru - по желанию заказчика - полностью переделан под резиновую верстку.

taxiairport.ru - адаптивные слайдеры, «резиновый» шаболон при помощи CSS, подправлен под популярные iOS устройства.

contlease.ru - еще один вариант, где сайт при уменьшении ширины становится «резиновым».