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

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

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

         Так как работы много, я стараюсь обновлять портфолио по адаптации порциями. Но не так давно я обновил свои старые сайты и просто решил похвастаться. Например, вот 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 - еще один вариант, где сайт при уменьшении ширины становится «резиновым».

         
         
Главная, 1,
( 44 )