Адаптивный дизайн - Joomla

Тема в разделе "Мегафлуд", создана пользователем WiZXaK, 9 янв 2013.

Статус темы:
Закрыта.
  1. WiZXaK

    WiZXaK Причиняю добро

    Регистр.:
    8 сен 2012
    Сообщения:
    579
    Симпатии:
    797
    *Писал 2 статьи сразу, перепутал заголовок "Joomla" тут не причем :) - просто "Адаптивный дизайн - Online"*

    Уже многие знают, что грядет (или уже настала) эра адаптивного дизайна (Responsive web design).
    Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Если вы ничего не знаете про адаптивный дизайн советую просто погуглить на данную тему.

    [​IMG]

    Примеры адаптивного дизайна: http://mediaqueri.es/

    Техники Responsive web design

    - http://elliotjaystocks.com/blog/css-transitions-media-queries/ - CSS Transitions and Media Queries (использование CSS transitions для сглаживания переходов с помощью анимации)
    - http://css-tricks.com/responsive-data-tables/ - Техниками адаптивного дизайна для корректного отображения таблиц (<table>)
    - http://css-tricks.com/convert-menu-to-dropdown/ - Техника преобразования длинных рядов ссылок в выпадающие пункты меню на малых разрешениях.
    - http://css-tricks.com/css-media-queries/ - Рациональное использование доступного места (в зависимости от разрешения экрана).

    Адаптивные изображения и видео

    - http://unstoppablerobotninja.com/entry/fluid-images/ - Резиновые изображения (масштабирование средствами браузера).
    - http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ - Адаптивные изображения (изменение физических размеров изображения)
    - http://craig-russell.co.uk/2011/01/...-context-aware-image-sizing.html#.UO0PyW-6dqo - Адаптивные изображения и контекстно-зависимые изменения размеров изображений
    - http://csswizardry.com/2011/07/responsive-images-right-now/ - Адаптивные изображения прямо сейчас
    - http://nicolasgallagher.com/responsive-images-using-css3/- Адаптивные изображения средствами CSS
    - http://blog.keithclark.co.uk/responsive-images-using-cookies/ - Адаптивные изображения с помощью Cookies
    - http://www.johnfaulds.com.au/journal/responsive-images-with-expressionengine/ - Адаптивные изображения с помощью ExpressionEngine
    - http://webdesignerwall.com/tutorials/css-elastic-videos - CSS: адаптивные видео
    - http://css-tricks.com/resizeable-images-at-full-resolution/ - Изображения с изменяемыми размерами.

    Инструменты для адаптивного веб-дизайна

    - http://code.google.com/p/css3-mediaqueries-js/ - скрипт, который позволяет работать CSS3 Media Queries в IE 5+, Safari 2 и Firefox 1+.
    - http://blog.fogcreek.com/webputty-css-editing-goes-boink/ - Этот инструмент представляет собой веб-редактор CSS вашего сайта с функцией автосохранения и просмотра результата в реальном времен.
    - http://mattkersley.com/responsive/ - Тестирование адаптивного дизайна
    - http://responsivepx.com/ - Используйте информацию из этого маленького интрумента для создания адаптивного сайта.
    - http://csswizardry.com/fluid-grids/ - Калькулятор резиновой сетки

    Фреймворки для адаптивного дизайна

    - http://cssgrid.net/
    - http://kflorence.github.com/flurid/
    - http://fluidgrids.com/
    - http://lessframework.com/
    - http://fluid.newgoldleaf.com/
    - http://www.tinyfluidgrid.com/

    Отдельно хочеться вынести bootstrap: (Внедрение bootstrap в Joomla 3.0)
    Rus - http://bootstrap.veliovgroup.com/
    Eng - http://twitter.github.com/bootstrap/
     
Статус темы:
Закрыта.