Responsive Layout Maker

Визуальные редакторы


Содержание сайта
Визуальные редакторы
Обзор программ л.7
Responsive Layout Maker



На рисунке - Responsive Layout Maker v 1.1 (2013 г.). Интерфейс на англ. языке. Вес 78 Мб.
Цены:
Responsive Layout Maker -  99 долл.
Responsive Layout Maker Pro - 129 долл.
Responsive Layout Maker Basic - 39 долл.
Автор: CoffeeCup Software.
Работает в Windows, Mac.

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

Как известно, некоторые веб-редакторы, кроме создания сайта для больших экранов, имеют функцию создания варианта сайта для мобильного телефона . В результате при публикации сайта создается два варианта сайта, а у некоторых веб-редакторов (например, у Adobe Muse)  даже три варианта - сайт для больших экранов, для планшетов и для мобильных телефонов

У Responsive Layout Maker подход совершенно другой - создается один сайт, который предназначен для экранов разных размеров. Как утверждают авторы программы, "нет никаких других программ, способных к созданию построенного на сетке отзывчивого размещения, которое соответствует Вашему уникальному содержанию. Мы просмотрели их все».
Страница демонстрации возможностей редактора  - при просмотре страницы измените ширину окна браузера от максимальной до минимальной (минимальная ширина страницы устанавливается в настройках редактора).

Интерфейс программы:
Сверху - строка меню, ниже - панель инструментов.
Ниже панели инструментов - шкала с движком, устанавливающая ширину создаваемой страницы. Значки  автоматически активируются в зависимости от ширины создаваемой страницы.
Справа - панель настроек, которая имеет три вкладки:
Layout - вкладка отвечает за создание "жидкой" сетки
Elements - включает набор объектов (элементов), которые можно поместить на страницы сайта
Properties - Настройки свойств выделенных элементов и объектов страницы (свойства строк, столбцов, заголовков, текста и пр.).

Создание сайта

Для создаваемого в Responsive Layout Maker нужно создать отдельную папку.

Основа создаваемых страниц сайта - сетка, разбитая по ширине на 12 частей. Ширина сетки соответствует ширине установленной Вами ширине страницы.

При создании сетки используется вкладка "Layout" (размещение).
Сетка подобна таблице и содержит строки, которые можно добавлять или удалять.
Строка разбивается на столбцы. При этом каждая строка разбивается на столбцы индивидуально. Например, одна строка может содержать два столбца, другая - 4, третья - вообще 12 столбцов.
Один столбец может занимать одну или несколько частей строки, в т.ч. может занимать всю строку.
Столбцы могут быть добавлены, удалены, разделены или слиты.



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

Следующий этап - заполнение страницы элементами, используя вкладку "Elements" панели настроек. Для этого нужно щелкнуть по элементу и тащить его мышкой в нужные ячейки сетки.
Вся эта работа несколько напоминает табличную верстку страницы, которую применяют некоторые визуальные веб-редакторы (например - Web Site X5).

При двойном щелчке по вставленному элементу открываются его возможные настройки на вкладке "Properties".
Редактор идет с 31 различными элементами - заголовки (от 1 до 6), параграф, списки (нумерованные и маркированные), текст, текстовые ссылки, изображения, изображения-ссылки, эмблемы (логотипы), таблицы, карты ссылок, кнопки, формы, соц. ссылки и другое.

Для работы с объектом его нужно первоначально выделить. Всплывающая подсказка указывает, что именно выделено (например, будет указано, выделен ли текст или выделена ячейка, в которой содержится текст).
Панель настроек содержит множество настроек для всех элементов страницы.

Объекты можно перемещать по ячейкам простым перетаскиванием.

В редакторе широко применяются стили, которые создаются визуально (т.е. код css писать не нужно).

Поведение объектов при уменьшении ширины страницы можно просмотреть, передвигая движок на шкале изменения ширины страницы. Также можно просмотреть страницу во внутреннем или во внешних браузерах.

Нет никакого сомнения, что Вы с первой попытки, используя только свою интуицию, сможете создать сайт с "отзывчивым размещением" - все это редактор сделает автоматически. Другое дело, что работать сайт будет не совсем так, как Вам бы хотелось. Например, элементы при уменьшении ширины экрана могут начать сжиматься и станут очень маленькими, хорошо оформленный дизайн для большого экрана становится "переполненным", объекты начнут располагаться "как сельди в бочке" и пр.

Далее начинается специфика Responsive Layout Maker, а именно отладка "отзывчивого размещения". При этом придется применять спец. средства - контейнеры (для дополнительной группировки), подсетку, и, главное, применять так называемые "контрольные точки". Как говорят авторы Responsive Layout Maker - " Контрольные точки - секретное оружие отзывчивого web-дизайна". С контрольными точками то же самое содержание может быть представлено в оптимальной форме во всем диапазоне размеров устройства и ширины экрана.

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

Определение того, в какие моменты нужно создавать контрольные точки, какие требуются корректировки дизайна и как конкретно эти корректировки осуществить - самое трудное при работе в Responsive Layout Maker.

При создании отзывчивого дизайна есть два подхода - сначала создать дизайн страниц для большого экрана, а затем для маленького. И наоборот, начать с дизайна для маленького экрана, а закончить дизайном для большого. В Responsive Layout Maker можно использовать оба эти метода.

При экспорте сайта создается комплект файлов, в т.ч. создаются html-страницы, которые можно редактировать в любом html-редакторе.


Заключение:
Responsive Layout Maker - редактор для создания сайтов для разных экранов. Для этих целей его и нужно применять. Но как редактор сайтов для больших экранов Responsive Layout Maker уступает хорошим визуальным веб-редакторам.


Похожие программы:
Responsive Site Designer


Обзорное видео

Загрузить версию испытания / Купить


Вернуться к обзору
Последнее обновление: май 2016 г.