JA Elastica - выпущен бесплатный адаптивный шаблон веб-дизайна для Joomla

1. ИА Я Эластика против Трансформер 3
2. Веб-дизайн, который трансформирует
3. 1280px или больше
4. От 640 до 1280 пикселей
5. 640 пикселей или меньше
6. II. В процессе разработки: как Elastica «трансформируется»?
7. 1. Адаптация к разрешению экрана с медиазапросами
8. 2. Отзывчивые элементы сайта
9. 2.2 Адаптивные изображения
10. 2.3 Отзывчивые формы, меню
11. 2.4 Отзывчивый размер шрифта
12. 3. Под крюком
13. 3.2 Содержание «Ответ» и вопросы производительности
14. 4. Круто, скачать и выпустить информацию?

Около 2 недель назад мы выпустили трейлер JA Elastica. В трейлере рассказывается о том, как шаблон Elastica динамически «трансформируется» в различные дизайнерские состояния, чтобы сиять на рабочих столах, сенсорных устройствах (iPad, kindle fire ..), iPhone или других мобильных устройствах.

Тусклые огни Вставить Вставить это видео на свой сайт

ИА Я Эластика против Трансформер 3

Трансформер 3 против JA Эластика

Веб-дизайн, который трансформирует

Как Шмель, один из Трансформеры 3 , может переключиться на автомобиль, чтобы бежать быстрее, на автомат, чтобы бороться за добро, расправить крылья и взлететь на летающую ракету, наш шаблон Elastica адаптирует его формы к вашему размеру экрана. У этого есть потенциал, чтобы стать изменяющим мир шаблоном для Joomla! сообщества. Всегда готов к потребностям пользователя (экрана).

Давайте посмотрим, как он трансформируется при разной ширине разрешения браузера

1280px или больше

Роботы в самой мощной форме против JA Elastica в стандартном виде на рабочем столе

От 640 до 1280 пикселей

Роботы в внедорожном режиме против JA Elastica для сенсорных читателей

640 пикселей или меньше

Роботы на небольшой многолюдной улице против JA Elastica "& удобная" точка зрения для мобильных любителей

II. В процессе разработки: как Elastica «трансформируется»?

JA Elastica прослушивает браузер пользователя и его окно просмотра, всегда готов и запрашивает, когда требуется адаптация. Вот каким должен быть «отзывчивый» дизайн, ваш шаблон слушает и отвечает веб-дизайном в соответствии с запросом клиента.

1. Адаптация к разрешению экрана с медиазапросами

С помощью медиа-запросов мы можем доставлять различные файлы CSS в браузер, в зависимости от разрешения экрана. Потребовалось провести много испытаний на разных устройствах и в строках кода CSS.

2. Отзывчивые элементы сайта

2.1. Адаптивные Сетки, Макет

Переключайтесь между 5 столбцами и 1 столбцом с помощью адаптивной сетки. Позаботьтесь о том, где разместить свой контент, так как при ответе шаблона содержимое в столбцах перемещается на другую позицию.

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

Веб-сайтам необходимо правильное представление изображений для поддержки копии и истории автора. С отзывчивыми изображениями шаблон отображает изображение в правильном направлении, как ваш текст плавает.

2.3 Отзывчивые формы, меню

Меню и формы являются интерактивными элементами. Экраны с более высоким разрешением предлагают больше места для выбора навигации и полей ввода формы. Экраны с низким разрешением требуют упрощенной навигации и взаимодействия, чтобы пользователь мог быстро получить ключевой контент.

2.4 Отзывчивый размер шрифта

Та же история здесь. Большие дисплеи предлагают пространство для привлекательных заголовков, которые сбалансированы с дизайном и содержанием. На маленьких дисплеях вы хотите, чтобы дизайн и баланс были постоянными. Правильная типография в нужное время.

3. Под крюком

3.1 jQuery Masonry

Мы интегрировали jQuery Masonry, разработанный Дэвидом ДеСандро, чтобы обеспечить плавное преобразование разметки сетки из 5 столбцов в 1 столбец. Который позволяет модулям Joomla течь с разрешением экрана.

3.2 Содержание «Ответ» и вопросы производительности

Помимо перемещения модуля контента слева направо или сверху вниз, для адаптивного дизайна существует обычная практика, когда некоторый «дополнительный» или «дополнительный контент», например, реклама, справочная информация, которая может быть скрыта в небольшом разрешении. В Elastica, например:

Рекламный контент сайта можно загрузить в 5-м столбце, который загружается только в «ajax», если экран шире, чем 1280 пикселей. Код работает так, что такой рекламный баннер не будет «запрошен», если медиа-запрос обнаружит, что разрешение экрана меньше 1280 пикселей.

4. Круто, скачать и выпустить информацию?

JA Elastica для Joomla 1.7 доступна для загрузки всем членам Клуба JA, однако поддержка и обсуждение будут доступны членам нашего клуба .

Мы не планируем выпускать JA Elastica для 1.5, однако обновленная версия для Joomla 2.5 уже появилась в SVN.