Как мы перешли от виджетов и «кирпичиков» к интуитивной верстке с возможностью внедрения html, css и javascript

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

    Идея создания платформы пришла нам в голову, когда на сложных страницах, в процессе верстки, возникало много разногласий между верстальщиком и дизайнером и на выходе получалось не совсем то, что виделось изначально. Особенно, когда речь шла о сложных эффектах. Разумеется, чтобы достичь должного качества мы тратили уйму времени на “шлифовку” работы. Мысль о том, что нужно как-то упрощать процесс, особенно на средне бюджетных проектах уже засела в головах.



    Сначала мы протестировали разные готовые решения, но в каждом чуть-чуть чего-то не хватало. И так родились требования – чего мы хотим:

    1. Удобный функционал, простое обучение.
    2. Адаптивная кроссбраузерная верстка.
    3. Возможность создавать сайт с “чистого листа”, с минимальным ограничением функционала со стороны платформы.
    4. Возможность программировать элементы самостоятельно.
    5. Возможность создать сайт без программирования элементов.
    6. Личный кабинет.
    7. Брендированный личный кабинет.
    8. Возможность создавать несколько сайтов и управлять ими.
    9. Возможность передавать управление сайтом своим клиентам.
    10. Возможность управлять своими клиентами.

    Итак, вот 10 требований, которые мы предъявили платформе для того, чтобы наши дизайнеры могли в ней работать и творчески развиваться. Очевидно, что платформа будет и дальше развиваться, но эти требования — то, что можно получить «здесь и сейчас». Что будет дальше – время покажет. В любом случае, мы будем делать акцент на безупречной работе того, что имеем.



    Как мы начинали свой путь


    Начинался проект, как рядовой редактор, каких много. Мы быстро это поняли и хотели большего! И поэтому постепенно уходили от разработки простых сайтов «для себя», к той платформе, о которой мечтали.

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

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


    Отдельного внимания заслуживали базовые шаблоны. Каждый из 50 шаблонов мы проработали до мелочей, постарались максимально разнообразить коллекцию. Однако в связи с глобальным обновлением платформы, нам пришлось переделывать их. Сейчас выбор ограничен, но мы расширяем коллекцию.



    В остальном, возможности сервиса похожи на возможности других платформ, за исключением “функционала для компаний и агентств”. Об этом можно будет поговорить в следующий раз.

    Давайте лучше заглянем дальше. Добро пожаловать в визуальный редактор.



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

    Левую и правую панель можно спрятать, чтобы не мешали процессу творчества.


    Теперь поговорим о главном техническом отличии нашей платформы. Мы вышли за рамки обычного редактора и не предлагаем разрабатывать сайт из готовых кирпичиков. У нас их очень мало, и те в виде готовых виджетов:

    • табы;
    • видео;
    • галерея;
    • слайдер и т.д.

    Возможно, стоит добавить новые, но конструкция платформы такова, что вы сами можете собрать более сложные функциональные конструкции, посредством этих простых блоков. Поэтому, пока сконцентрировались на другом функционале.

    Иными словами, наша платформа позволяет создавать индивидуальную адаптивную верстку, не вдаваясь в код. По необходимости html, css и javascript легко внедряются, позволяя размещать свои собственные блоки. В этом и заключается уникальность нашего редактора – у нас можно реализовать довольно сложные “дизайнерские решения” средствами представленных в редакторе инструментов без использования стороннего кода.

    Итак, первые пункты наших требований реализованы. Редактор есть, сайты создаются.

    Так как мы в качестве целевой аудитории рассматриваем всех, кто занимается разработкой сайтов на заказ – фриланс, digital-агентства и бизнес с несколькими сайтами – то и редактор должен включать в себя элементы управления. Мы продаем услугу клиентам, которые продают услуги клиентам. Поэтому мы ориентировались на многопользовательское приложение, в котором каждый клиент получит даже не комнату, а особняк, где сможет распределять комнаты как ему удобно. И у нас это получилось. Вы получаете личный кабинет, оформляете его (брендинг) и распределяете права на доступ к сайтам между своими клиентами. В личном кабинете вы можете скрыть информацию о PIXLI, задав вместо нее свои контактные данные. Плата с ваших клиентов не взимается, это часть тарифа. Так что вы сами решаете, куда заложить расходы – в сайт клиента или в его обслуживание.



    Что дает PIXLI разработчикам


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

    Фриланс

    Платформа дает единоличный контроль над всеми разработками, что избавляет от необходимости сотрудничества с frontend-разработчиками. Дизайн макеты можно делать непосредственно в браузере, используя визуальный редактор – он обладает необходимыми возможностями. Это позволит сэкономить время. Доступ заказчика к личному кабинету позволить ему видеть весь процесс создания от начала до конца. Это поможет вести разработку в режиме постоянных уточнений, а не получать замечания пост-фактум. Дизайн выполняется одновременно с адаптивной версткой.

    Digital-агентства

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

    Организация личного кабинета предполагает командную работу над разными проектами. Это немаловажное преимущество — управление большим количеством проектов на разных хостингах часто приводит к путанице и временным задержкам.

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

    Компании

    Главным преимуществом для компаний является оптимизация процессов создания сайтов. Платформа ускоряет процесс создания и запуска уникальных посадочных страниц и промосайтов. От идеи до ее реализации проходят считанные дни.

    Для стартапов скорость изменения сайта или приложения бывает критичной. Платформа помогает быстро изменять дизайн в зависимости от тестов.



    Сколько вешать в граммах?


    Попробуем проанализировать, позволит ли наша платформа сократить расходы на создание сайта и если да, то насколько?

    Нами было проведено небольшое исследование финансовых и временных затрат на создание сайта. Опросы и анализ предложений сайтов фирм — разработчиков помогли вывести некоторые средние цифры. Выборка была достаточно репрезентативной — от фрилансеров с небольшими заказами до вполне успешных разработчиков. Тем не менее, мы не претендуем на роль истины в последней инстанции – любые исследования в области web-дизайна относительны.

    Анализ исследований 2016 года показал, что в IT-сфере востребованными профессиями являются:

    • Web-разработчик:
      • html-верстальщик;
      • web-дизайнер;
      • web-программист;
    • контент-менеджер;
    • программист 1С;
    • разработчик мобильных приложений;
    • системный администратор.

    Как видим, первые места занимают верстальщики и дизайнеры. Что удивительно при количестве предложений по разработке сайтов. Однако следует заметить, что речь идет не о фрилансерах с сомнительным портфолио, а о действительных профессионалах.

    Сайт: временные рамки


    Создание сайта – процесс достаточно длительный. Время его создания не ограничено, так как это работа творческая, зависит от требований заказчика. Можно выделить 5 основных этапов:

    1. Разработка технического задания – 5 — 12 дней.
    2. Подготовка контента – 5 — 15 дней.
    3. Дизайн сайта – 4-18 дней.
    4. Верстка сайта – 7 — 14 дней.
    5. Программирование – 5-21 дней.



    Мы брали средние значения времени, которое тратится на каждый шаг. Конечно, время существенно зависит от уровня разработчика, количества человек в команде, а также от заказчика. Если заказчик сайта твердо знает, что он хочет, то процесс сокращается. Минимальное количество дней, которое тратит среднестатистическая студия с командой из 5 человек, при параллельной работе, составляет 7 дней. Максимальное – 80 дней, это в случае разработки сложных сервисов. Конечно, эти цифры весьма приблизительны.

    Финансовая сторона вопроса


    Из чего складывается стоимость сайта? Опять же из стоимости каждого этапа разработки. Как правило, фирмы заявляют минимальную стоимость, которая очень различается и зависит от трудозатрат, раскрученности компании, объема портфолио и даже от региона. Например, корпоративный адаптивный сайт в Нижнем Новгороде можно заказать от 20000 рублей, а в Москве от 60000 р.

    В среднем, если разбирать стоимость сайта по этапам его создания, то можно получить следующую картину для корпоративного сайта с элементами CMS:

    1. Разработка технического задания — бесплатно.
    2. Подготовка контента – приличный текст начинается от 200 р. за 1000 знаков без пробелов. Количество знаков на одной странице в среднем составляет около 3000. Для 10 страниц получаем что-то около 6000р.
    3. Дизайн сайта – от 2000 на фрилансе и до 0,5 млн. руб. за эксклюзив.
    4. Верстка сайта – 7000-20000 руб.
    5. Программирование – от 6000 р. на фрилансе и далее без ограничений.



    Исходя из этих цифр, можно сделать вывод, что реклама сайта за 20000 р. – это либо стартовая цена в длительном торге, либо цена за готовый дизайн в WordPress. Если же говорить о сайтах, созданных действительно под заказчика с уникальным дизайном с учетом пожеланий, и ручной версткой, то здесь цены начинаются от 50000 рублей минимум. Просто не могут быть меньше.

    Можно ли упростить верстку?


    Жаль это признавать, но ручная качественная верстка становится уделом избранных, хорошие верстальщики на вес золота, а их услуги дорогостоящие. На это сильно повлияло развитие технологий. 10 лет назад счастьем было получить резиновый макет, а сейчас он должен быть адаптивным под несколько разных устройств. Соответственно, существует огромный спрос на упрощение процесса верстки сайта. А раз есть спрос – найдется и предложение.

    PIXLI – оптимизация затрат?


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

    Название тарифа
    Стоимость
    Количество сайтов
    Хостинг
    Домен второго уровня
    Количество подключаемых доменов
    Сопровождение сайтов
    PIXLI
    Профессиональный
    1230 р./месяц
    15
    бессрочный
    бесплатный
    3
    техническая поддержка
    Студия дизайна
    Корпоративный сайт
    50000р.
    1
    1
    15000р./месяц

    Сразу отметим, что тариф «Профессионал» предназначен для разработчиков, которые кроме своего корпоративного сайта периодически запускают лендинги. У них существует реальная необходимость постоянно разрабатывать и поддерживать несколько сайтов. Простые подсчеты показывают, что разработка и сопровождение сайта сторонней организацией достаточно дорого обходятся. Хостинг у агентства надо покупать, PIXLI включает его в тарифный план. Стоимость поддержки была выведена как средняя, после анализа разных предложений.

    В итоге мы получаем затраты на заказ сайта в размере стоимости сайта+домен+хостинг=52949р. в первый год. Цены на хостинг и тариф были взяты с сайта RU-CENTER. Если же рассматривать годовую поддержку, сумма вырастает в разы – на 180000 в год. Итого 232949 рублей за первый год.

    Что касается использования редактора, естественно все будет дешевле, так как хостинг и поддержка включены в абонентскую плату. Стоимость годового обслуживания для PIXLI будет составлять около 15000р.

    Итак, давайте посмотрим, что получает разработчик сайта «для себя» за 15000 рублей в год на PIXLI:

    1. Возможность создания 15 сайтов. Ваша задача – разработка дизайна и сборка элементов в редакторе.
    2. Техническую поддержку и хостинг.
    3. Возможность самостоятельно сопровождать свой сайт – создавать резервную копию, обновлять информацию, менять дизайн.

    Дизайн сайта можно сделать на основе шаблона или заказать на стороне. Сейчас это стоит от 20000 рублей. Зарплату сотрудника, который занимается созданием сайта, мы не учитываем по той причине, что вряд ли компания будет нанимать кого-то на стороне. Чаще всего, как показывает наш опыт, если им потребовались такие услуги, значит, уже кто-то есть, способный создать сайт. Итак, вы экономите за счет верстки, поддержки, хостига.



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

    Заключение


    Разрабатывая платформу PIXLI, мы исходили из собственного опыта создания сайтов на заказ. Нам было не сложно встать на сторону целевой аудитории и посмотреть ее глазами на инструментарий разработки. Мы постарались максимально автоматизировать верстку, оставив достаточно простора для творчества. Кроме редактора мы выстроили платформу, которая позволяет разработчику управлять своим бизнесом из одной локации — личного кабинета.

    Среда PIXLI еще молода, находится в непрерывном развитии. И мы обещаем, что оно не остановится еще очень долго, радуя наших клиентов новыми возможностями и вкусными бонусами.

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

    Верстать сайт вручную или использовать инструменты – каждый решает сам. Однако само наличие выбора уже делает жизнь легче и приятней.
    Метки:
    Pixli 18,77
    Платформа для визуального web-дизайна.
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 55
    • 0

      Клон Webflow?

      • 0
        Клон делать не планировали, но на их опыт безусловно смотрели, много и различий, например иной подход к классам, триггерам и другим вещам. Так же много вещей заточенных под компании (ребрендинг тот же) которых у webflow вроде бы как не замечалось. Но безусловно во многих вещах он является хорошим примером
        • +4
          Но сходство с:
          http://macaw.co
          http://scarlet.macaw.co
          сразу бросается в глаза :)

          Вообще, проект интересный, пошёл изучать.
          • +1
            Скажите. Платформа для дизайнеров, большие возможности, прочее, — это всё хорошо. Но насколько имеет смысл использовать Пиксли или тот же Webflow для дизайна сложных интерфейсов? Простой пример сложного интерфейса — интернет-магазин. Вы бы порекомендовали ваш продукт или Webflow для этого? Только скажите честно, если проще будет себе в ногу выстрелить всё таки.

            Спрашиваю не из праздного интереса. В процессе дизайна сложных интерфейсов очень часто не хватает интерактива (клиенту) и дополнительного контроля над внешним видов десятков и сотен копий какого либо компонента (копии, разумеется, не идентичные, а с разным контентом, ну те же карточки товаров например).
            • 0
              Хороший вопрос, спасибо. Для интернет магазинов думаю не подойдет не наш сервис, не вебфлоу, ни какой то другой по той причине, что в интернет магазине много технически сложного функционала и дать возможность полноценно им управлять и оформлять его, едва ли даст какой то сервис. Лучшие магазины — это всегда написанные руками. Если речь идет о каких то несложных магазинах, то можно экспериментировать, но лучше подобные сервисы подходят для корпоративных сайтов, промо страниц и других подобных проектов.

              Если речь идет о проектах не требующих сложных технических решений, то сервисы, как пиксли, вебфлоу, muse, macaw и тд. хорошо решают данную задачу и позволяют создавать и интерактив и работать с мелкими деталями.
              • 0
                Мы решаем ваши задачи несколько по другому, но клиенты довольны.
                Сначала полностью интерактивный прототип в Axure (в плоть до анимаций кнопочек, переходов, менюшек, каруселей и тд), как вариант с базовыми цветами которые желает заказчик (но чаще всего в серых тонах), после согласования прототипа, передаем в дизайн. После этого если есть большое желание и бюджет позволяет можем натянуть готовый дизайн сначала на прототип, что бы заказчик мог оценить то что придумал дизайнер и погулять уже почти по готовому сайту (по готовому с точки зрения заказчика), и уже потом отдаем в верстку и программинг. Соответственно процесс итеративный, можем вернутся на шаг прототипа или дизайна.
                Но это только на сложных проектах-порталы, магазины и тд. И довольно редко.
                • 0
                  Интерактивность настолько востребована, что я уже всерьез подумываю всё сразу в Акшуре делать. Но останавливают некоторые его недостатки. Вот кстати вопрос в тему: если вы натягиваете дизайн на прототип, то потом как отдаете результат в разработку? Вручную описываете интерфейс или придумали способ для верстальщиков извлекать всё нужное удобно и быстро прямо из интерактивного отдизайненного прототипа?
                  • 0

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

            • 0
              И кучи других «выделяющихся на фоне остальных» редакторов типа викс и подобных с кучей «говнокода» на свёрстанной странице.
              • +1
                Потратьте пожалуйста немного вашего времени, зайдите в редактор и вы поймете, что с викс у нас нет ничего общего. Но в любом случае спасибо, возможно мы некорректно подали некоторую информацию на главной странице.
              • 0
                О, ознакомился, спасибо за ссылку!
                Дальше текст не вам, а автору статьи, но пусть тут лежит, возле ссылки.

                Webflow — пример идеального инструмента, которым невозможно пользоваться.
                Имхо, в нём есть, наверное, есть всё, а сунешься делать — и простую вещь не можешь.

                Мне кажется, у создателей таких инструментов фундаментальная ошибка есть, они (вы) пытаются всё, что они умеют делать в вёрстке, переложить на мышко-тыкание. А делать так нельзя.

                Ну вот смотрите, есть овердофига способов позиционировать элемент на экране, а реально достаточно только одного — flex-а. Есть дофига способов задать отступы у текста, а реально — в системе визуального проектирования никому не надо знать, что вот это называется margin, вот это padding, а вот это — text-indent.

                Я не знаю ничего про создателей webflow, и про pixli ничего не знаю.
                Но если сравнивать webflow и wix (да, да, сравниваю несравнимое, наверное), то wix — лучше.
                Он проще, понятнее, там хоть что-то можно не только начать делать, но и завершить.

                В общем, одумайтесь =)

                Я вам (автор статьи) как фреймворкостроитель фреймворкостроителю пишу.
              • +1

                В посте 4 информационных картинок, и все они оформлены из рук вон плохо. «Инфографика» сделана так, что информация не считывается, график сделан на коленке в Экселе с ужасным наклонным текстом, вместо таблицы приведён её скриншот… Для начала не впечатляет.

                • 0
                  Спасибо, обязательно учтем, все приходит с опытом!)
                  • 0
                    А еще хорошим тоном является указывать откуда были взяты использованные изображения)). Как то удивительно было увидеть на второй картинке, визуализацию прошлой версии дизайна главной страницы DoSites.Net, со страницы портфолио нашего дизайнера (http://fine-designer.com/portfolio/veb-dizajn/)
                • 0
                  А чем этот сервис лучше muse, или wix, или lpgenerator?
                  • 0
                    adobe muse это программа, lpgenerator больше на наш взгляд ориентирован на создание не сложных лендингов, сложный дизайн в нем тяжело сделать, у него немного другая целевая аудитория, больше владельцы бизнеса и предприниматели, которым нужен сайт, а мы ориентированы именно на дизайнеров
                  • +2
                    «Здравствуйте уважаемые читатели, после почти годового периода обкатки и тестов, мы выпустили в свет первую публичную версию нашего продукта – универсальную платформу для web-дизайнеров.»

                    А на главной странице сервиса:

                    «с нами уже 11 000+ дизайнеров»
                    «создано 7 000+ сайтов»

                    Только запустились, а уже врёте.
                    • 0
                      Чуть позже в личку постараюсь кинуть вам статистику, что бы не быть голословными, до этого сервис работал год, просто в ином формате и разумеется база пользователей осталась
                    • +1
                      Ребята, я понимаю, что вы создаете технически очень сложный продукт, не хочу язвить, но немного критики всё же думаю не помешает. В описании продукта видим:
                      После создания сайта, вы получаете чистый, семантический код
                      И там же скриншот кода, на котом я не увидел ни чистого, ни семантического кода (это, конечно же, повод для холиваров, но вступать в них я не буду, это чисто мое мнение):
                      image
                      • 0
                        Спасибо за ваше замечание, конечно до совершенства всегда далеко, но мы работаем над этим, например в след. обновлении планировали принять ряд мер, связанных с данной проблемой.
                        • 0
                          Я уделяю внимание на том, что при продаже услуги вы указываете неверную информацию. Возможно при апдейте системы всё станет соответствовать рекламным лозунгам, но пока что конкретно на этом примере не соответствует, увы. Скорее всего ваша целевая аудитория не сможет разобраться на сколько код чист или семантичен. Понимаю, что продажи нужно делать, приток денег будет способствовать развитию продукта (чего искренне желаю). Но поверя описанию на сайте клиент может выложить сайт в бой, думая что верстка семантичная, влить в него отмеренный бюджет на продвижение, но в итоге отдача будет менее ожидаемой, чем от такого же сайта с «ручной» версткой, выполненной с соблюдением семантики и с фаршировкой соответствующих схем на нужных участках.
                          Я бы мог порекомендовать знакомым данный продукт исключительно как расширенный инструмент дизайнера, но не как законченное frontend-решение.
                          • 0
                            Ваше мнение безусловно очень ценное, спасибо. Но понятие красивого кода оно и вправду очень субъективно, например, поисковые системы неплохо воспринимают сайты созданные у нас. Но с точки зрения профессионального верстальщика, конечно недочеты есть. Если у вас будет возможность и желание мы были бы вам очень благодарны за более развернутый ответ, в каком виде вы бы хотели видеть код, что бы мы это учли в будущем. Спасибо!
                            • 0

                              А чем код на скриншоте не семантичен? Потому что много классов?
                              Ну да, видно что БЕМ или что то похожее генерит много мусора, но разве количество классов влияет на продвижение?


                              Если хочется семантики — уж лучше микроразметку добавить и теги вида aside, content и др.
                              Классы сокращать тупняк какой то.

                              • +1
                                Например реализация кнопки.
                                Свёрстанную таким образом кнопку не распознают скринридеры и читалки.
                                • 0

                                  А, это я не заметил, тогда согласен, это косяк.

                                • +1
                                  Я не связывал семантичность и классы. Но вот чистоту кода и классы связать могу — названия классов в виде css-свойств мне кажется делать не красиво и не правильно, тем более что даже на разных устройствах эти свойства могут сильно различаться. Найдите в той же методологии БЭМ хоть что-то похожее на class=«width-100». Даже у бутстрапа с его мусором в классах такого нет.
                                  По поводу ваших уточнений о микроразметке — соглашусь, я как раз выше и писал об этом. Сюда же можно добавить и другие схемы, например для читалок. Но автоматизировать такое достаточно сложно, система должна понимать какие схемы включать для нужных блоков. Перекладывать это на дизайнера в интерфейсе редактора — можно сильно усложнить продукт. Мне кажется, хорошим вариантом было бы дать возможность применять схемы, но как именно — это уже задача проектировщиков данного продукта.
                          • +1
                            В рот мне ноги, уж лучше тогда инлайном style="" генерировать.
                            • 0
                              Выбирая между текущим вариантом и инлайн-стилями я бы выбрал второй вариант, согласен )
                              • 0

                                Что на это скажут поисковики или им все равно? Да и воообще, поисковики как то парсят классы и делают ли какте то выводы на их основании?

                                • +1
                                  Утверждать не могу, но очень сомневаюсь в том, что классы учитываются поисковиками. Возможно для лучшего понимания структуры документа считываются ключевые названия классов типа header, nav, footer, main и т.д., но здесь наверняка больший вес будут иметь атрибуты role либо полноценные схемы schema.org, правда к стилизации это уже не имеет никакого отношения.
                          • 0
                            Проблема со стилями стоит давно перед программистами у нас, на данный момент конструктивная особенность не давала их сделать по уму, ориентировочно через месяц в 4 версии редактора вероятней всего получится решить данную проблему, хотя признаться честно это не является основной задачей, но это не отменяет ее важности.

                            То что касается поисковых систем, со своей стороны могу добавить то, что сайты созданные в пиксли неплохо индексируются. Не хочу что бы это выглядело как чрезмерная реклама, но например, главная страница сервиса (а ей отроду полторы недели), собранная у нас в редакторе, была в топе по многим среднечастотным запросам. Предыдущая версия была в топе по высокочастотным запросам, таким как «Конструктор сайтов», хотя СЕО особо не занимались, сейчас после обновления дизайна и контента на ней немного просела.

                            Пользователи тоже не жаловались. В целом СЕО довольно спорная тема всегда была и методик продвижение масса.

                            Пробуйте, тестируйте, ценные советы всегда нужны. За это и любим хабр, всегда покажут все недочеты. Спасибо!
                            • +2
                              Мне правда хочется верить, что у вас возможно делать профессиональные и красивые сайты, но на первой же странице на самом видном месте у вас в слогане двойной пробел…
                              • 0
                                О, действительно!
                                Уже исправили, спасибо.
                                • +1
                                  Пожалуй, сперва пожелаю вам удачи и много-много клиентов!

                                  А теперь спрошу по UX.

                                  Положим, можно создать сколь-угодно сложную область редактора (то, что у вас по-середине).

                                  1) Так ли уж нужна левая панель (дерево)? Есть ли у неё какая-либо особая миссия, которую нельзя сделать в области редактора?
                                  2) Так ли уж нужна правая панель (область свойств). Я вижу там 80% свойств — одинаковы для всех компонент. Не вернее ли провести декомпозицию и сделать, скажем, компонент Box, у которого есть margin, padding,… Для компонента Box вполне решаемая задача — сделать управление границами и отступами прямо в области редактора?
                                  3) Ввиду 2 — не жалеете, что отказались от полноценной палитры? Нет ли планов вернуть? Нет ли планов в палитру добавить стеки, доки, репитеры и т.п.?

                                  И ещё спрошу по экономике.

                                  Без абсолютных цифр, не могли бы вы рассказать немного по текущим и целевым показателям.
                                  А именно:

                                  1) Структура текущих затрат в процентах по видам расходов (без абсолютных цифр и ненужной оценки рентабельности)
                                  2) Структура текущих доходов в процентах по сегментам покупателей (без асолютных цифр и оценок вроде «мало клиентов», «много клиентов»)
                                  3) Структура планируемых затрат и доходов.
                                  • 0
                                    1) Так ли уж нужна левая панель (дерево)? Есть ли у неё какая-либо особая миссия, которую нельзя сделать в области редактора?

                                    Например, выделить скрытый при текущем размере экрана элемент

                                    • 0
                                      Спасибо. По порядку отвечу на все ваши вопросы.
                                      1) Без дерева человек запутается в блоках и их вложенности, а так же не сможет найти некоторые из них в случае некоторых своих действий. Например, он перетащил блок за область экрана, сделал его очень маленьким и потерял его, по выставлял z-index различные и запутался в структур вложенности, захотел выбрать самый верхний элемент в редакторе «body». В общем дерево это не нечто обязательное, но то, что облегчает работу.
                                      P.S. В первых версиях редактора действительно не было левой панели и как то люди работали, но было неудобно.

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

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

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

                                      По затратам, огромная часть около 65% это разработка и постоянное развитие проекта. Если развитие остановить, то эта цифра сразу опуститься до 15% (уровня тех. обслуживания проекта). Но этого делать никто не собирается пока.

                                      Вторая часть затрат это вспомогательный персонал, работа над обучающим контентом, тех. поддержка пользователей, копирайтер для нашего блога на сайте и других площадок, переводчик (хотим выйти на англоязычную аудиторию попытаться дополнительно) А так же другие ребята, которые здорово нам помогают. Это около 25%

                                      и 10% это мелкие затраты в духе серверов для «боевой версии», тестовой версии и другие необходимые вещи.

                                      Не стал расписывать рекламный бюджет, это отдельная статья затрат. По объему примерно такая же как и техническая.
                                      • 0
                                        Не хватает кармы поставить плюс за ответ. Спасибо!

                                        1) z-Index — аргумент, спасибо.
                                        2) Не переусердствуйте с правой панелью, пожалуйста, оттуда нужно уже много-много убирать — и ни в коем случае не добавлять.
                                        3) По палитре не соглашусь, на палитру нужно больше функциональных элементов.
                                    • 0

                                      Есть ли возможность создавать сайты с динамичным контентом, например, блоги или каталоги?

                                      • 0
                                        Это будет в 4 версии редактора, которая уже на финальных стадиях. Вы очень четко уловили потребность наших пользователей!
                                      • 0
                                        А можно ли купить подписку БЕЗ вашего хостинга и CMS? Например, я хочу создать дизайн и скачать его себе, чтобы добавить нужную автоматизацию, впилить нужные скрипты и навесить на уже готовый сайт?
                                        • 0
                                          На определенных тарифах, вы можете скачивать код сайтов себе и уже работать с ним где вам хочется
                                          • 0
                                            Это хорошо. Но зачем мне платить за хостинг и CMS, если я ими не буду пользоваться?
                                            • 0
                                              Вы еще спросите кому в 2017 году нужен редактор сайтов, аля ucoz(хотя, конечно сейчас тут будут пламенно доказывать, что это не очередной квадратно-гнездовой редактор, который десятки, а новейшая веб-платформа), когда фронтенд становится все сложнее, когда мобильную и десктопную версию нужно верстать по-разному.

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

                                              Для визиток этот конструктор — оверкил как в плане цены так и функционала, для полноценный сайтов — сущность, которая будет мешать их программировать. И в сухом остатке имеем достаточно дорогой редактор свистопердящих визиток(количество свистоперделок строго ограничено) для целевой аудитории недостаточно разбирающейся в предмете. И цель этой платформы единственно и только привязать клиента к компании, потому что чтобы редактировать код например сайта http://studio.pixli.ru/, ни в чем кроме самого редактора сайта будет практически нереально.
                                        • 0
                                          Скажите, можно ли посмотреть примеры «живых» сайтов?
                                          • 0
                                            Добрый день, не очень бы хотелось афишировать сайты пользователей без их согласия, но сам сайт pixli.ru собран у нас + все шаблоны так же собраны в редакторе

                                            http://universal.pixli.ru/
                                            http://studio.pixli.ru/
                                            http://half.pixli.ru/
                                            http://singer.pixli.ru/

                                            и тд.
                                            • 0
                                              На первых двух сайтах нажимаю в форме Contact Us и что-то странное происходит. Какой-то конверт показывается. Что там происходит? Делается ли что-то настоящее?
                                              • 0
                                                Конечно делается, попробуйте. Сообщение у вас не ушло потому что это шаблоны. Хотя только что проверил, у вас всплыло обычное окно с уведомлением об отправке сообщения. Я был бы вам очень признателен, если вы скините «настоящий» сайт по вашему мнению, что бы я мог посмотреть и сказать получится ли его у нас сделать. Спасибо.
                                                • 0
                                                  «Настоящее» — это отправка сообщения куда-то.
                                                  Интересно посмотреть, куда оно отправилось, посмотреть список обращений клиентов на мой сайт.
                                              • 0

                                                Я, конечно, не дизайнер, но я не осилил сделать на вашем сайте сделать простейшую страницу. Всё скачет как попало, работает абы как. Как вы умудрились сделать таким инструментом эти 4 сайта — ума не приложу, но чувствую потребовалось на это гораздо больше времени, чем потратил бы верстальщик.

                                                • 0
                                                  Уточнили у дизайнера, который их собирал, ровно 28 минут на http://studio.pixli.ru/ этот шаблон. Даже видео с ним где то было.
                                            • 0
                                              Равноускоренная анимация это зло))
                                              • 0
                                                Отличное замечание, спасибо! Раньше был другой тип анимации, но он был неуместен в некоторых ситуациях поэтому выбрали «золотую середину» а по уму конечно нужно будет дать выбор данного параметра. Записали для себя.
                                              • 0
                                                Попробовал — выглядит очень здорово, практически все понятно интуитивно. Вы не думали о том, чтобы завести тарифный план для прототипирования интерфейсов? Не предоставляющий хостинг и CMS, однако позволяющий иметь большее количество проектов для того, чтобы можно было делать прототипы страниц для демонстрации клиентам, например?
                                                • 0
                                                  Обязательно обдумаем, спасибо. Первый раз такая потребность возникла если честно.
                                                • 0
                                                  Прилетела новостная рассылка с нерабочей ссылкой «Отписаться». Лучше поправить, а то можете под спам-фильтр угодить )

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                  Самое читаемое