Счёт может быть красивым и в HTML, а не в PDF

В статье “Что должно быть в счёте на оплату, чего быть не должно и что дико бесит” мы разбирали содержимое счёта. По результатам той работы возникло желание оформить счёт стильно ибо стандартный вариант бухгалтерских программ вроде 1С какой-то страшный.

Дизайн обычного счёта

Дизайн обычного счёта

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

Почему HTML

Некоторые компании, которым приходится рассылать сотни тысяч счетов или квитанций бьются за размер файла PDF. У них важен каждый байт. Например, FastReports очень гордится тем, что их PDF на 14-25% меньше, чем PDF сформированный стандартными средствами.

У нас счетов не сотни тысяч, а на два порядка меньше. Но и тысячи счетов разослать по электронной почте с большими прикреплёнными файлами задача непростая. HTML формат позволяет рассылать существенно быстрее, так как размер письма меньше.

У HTML есть один недостаток — в нём может быть javascript, а javascript может быть потенциально опасным. Однако, это вопрос уже к фильтрам и антивирусному программному обеспечению. HTML-документу не помешал бы атрибут отключающий javascript. Или отдельный формат htmlcss, который гарантирует, что никакой javascript в файле исполняться не будет.

Плюсы HTML-формата:

  1. Легко генерится, верстается, внесение правок менее трудоёмкое, чем в PDF.
  2. Файл имеет меньший размер, чем PDF.
  3. Для просмотра не нужен Adobe Reader, а подойдёт любой браузер.
  4. Почтовые программы легко отображают HTML, сразу видно что пришло.
  5. Нет проблем с выделением и копированием данных. В PDF иногда бывают.

Сторонники PDF скажут, что PDF — это стандарт, что не такой уж он и большой, и Adobe Reader можно легко установить, и PDF много где отображается в preview-режиме, например, в тех же браузерах и почтовых программах, и даже можно научиться вносить в шаблоны PDF правки также быстро как HTML-шаблоны, а можно и HTML конвертировать в PDF. Очень даже может быть, как говорил профессор Преображенский, но не нравится мне PDF, а нравится HTML. Кстати, с конвертацией документов из HTML в PDF не сложилось у нас. Там пустая страница в конце в ряде случаев вылетала.

Если уж очень надо в PDF

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

Или, как вариант, существует масса библиотек конвертации HTML в PDF. И такой процесс существенно проще, чем изначально генерить документ в PDF.

HTML и печать формата А4

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

Если нужно, чтобы на экране счёт выглядел приблизительно как на печати, то используйте стили:

html,body{ height: 297mm; width: 210mm; margin: 0; padding: 0; }

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

При печати следует отключить фон, дабы не расходовать зря чернила:

@media print { .left_column { background: white; color: black; border-right: solid 1px#00578a; } }

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

HTML и ЭЦП (УКЭП)

HTML-файл можно подписать откреплённой усиленной квалифицированной подписью точно также, как и PDF. И точно так же он будет в соответствии с 63-ФЗ равнозначен счёту с собственноручной подписью. А проверить подпись можно на ГосУслугах.

Красивый счёт

Мы несколько дней согласовывали детали, упрощали, оптимизировали, на базе разных вариантов делали один. В результате получилось вот так:

Дизайн счёта на оплату дата-центра ITSOFT Игорь Тарасов

Дизайн счёта на оплату дата-центра ITSOFT

На бумаге будет принимать такой вид:

Версия для печати счёта на оплату дата-центра ITSOFT Игорь Тарасов

Версия для печати счёта на оплату дата-центра ITSOFT

Если у вас интересный счёт, то кидайте образец в комментарии.

Нужно ли внедрять красивые счета или стоит использовать дизайн счёта от 1С?
Нужно, мир должен быть красивым
Не нужно, к старому все привыкли
Показать результаты
Переголосовать
Проголосовать
0
84 комментария
Написать комментарий...
Zoibana

сделали в итоге еще страшнее и грузнее, чем исходный вариант.

Ответить
Развернуть ветку
Game Topia

Навеяло двухтысячные!

Ответить
Развернуть ветку
Igor Tarasov
Автор

На вкус и цвет, все фломастеры разные. 

Нам нравится так. Если вам нравится по-другому, то вы можете жить с дизайном от 1С или придумать свой. Если придумаете свой, то кидайте в комменты, народ оценит.

Ответить
Развернуть ветку
9 комментариев
Zhanat E

Согласен. Лучше единообразно. Это все же документ и должен иметь общую форму у всех. А так каждый сделает свои стиль кому это нужно бухгалтерам что ли? Лучше делали бы счета пусть и в html но чтобы табличная часть могла в любои момент выгружаться в excel . Остальное все баловство.

Ответить
Развернуть ветку
4 комментария
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alex Sedoff

лучше коммента уже не будет, тему можно закрывать))))

Ответить
Развернуть ветку
Alex Sedoff

типаграфика вышла из чата. отступы просто отсутствуют, как у строк, так и у колонок.  текст сливается с разделительными линиями

Ответить
Развернуть ветку
Igor Tarasov
Автор

Где именно? Так сложно что-то ответить. Там явно есть места, где есть отступы. 

Далее всё обсуждаемо, но нужно конкретное место. Если отступ регламентирован как со списками, то он должен быть. Если нет, то это уже дело вкуса. 

Ответить
Развернуть ветку
3 комментария
Иоанн

Да это же кровь из глаз!
Ещё когда увидел заголовок, то уже понимал, что какие-то очередные профаны лезут туда, куда не надо.
Счёт 1с для них страшный...  О, Господи! Да не для вас это придумано, а для людей которые ОПЛАЧИВАЮТ. Говорю как человек, который достаточно часто оплачивает счета. В ваш счёт я залипал несколько секунд, тщетно пытаясь понять - а где самое главное? Где реквизиты??
Ещё раз крупным шрифтом - СЧЁТ ДЛЯ БУХГАЛТЕРА! а не для дизайнера, который должен умиляться глядя на него.

Ответить
Развернуть ветку
Александр Ефремов

В саму точку

Ответить
Развернуть ветку
Andrey Fedorov

Стандартный счет страшный, спору нет. НО! к нему все привыкли. Плюс там обычно крупный шрифт, широкая таблица с отступами и т.д.

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

Есть такая штука в теории JTBD - "4 силы прогресса". Они описывают, какие силы влияют на человека, когда он принимает решение о смене чего-либо на что-либо и почему в итоге меняет или нет. Вот прям очень хорошо подходит для вашей истории со счетом.

Ответить
Развернуть ветку
Иоанн

В том и суть, что счёт от 1с - стандарт! Все на своем месте. Все привыкли. Привыкли именно те, кто оплачивает. Когда делаешь платежу, то не ищешь на счёте нужную информацию. 
А на той поделке, что сделал ТС просто черт ногу сломит. Я бы просто охренел, если бы мне такое свалилось. 

Ответить
Развернуть ветку
Александр Иванов

я бы сказал так - счёт это не рекламный буклет, не коммерческое предложение и не презентация.

он должен быть информативен, читабелен, лаконичен, без свистелок-перделок, и ИМХО иметь возможность быть распознанным банковским приложением/сайтом в автоматическом режиме - а как раз для этого в нём и должен быть вот этот кусок платёжного поручения, который и ищется распознавалкой в первую очередь

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Igor Tarasov
Автор

Вот вы и загрузите красивый, а народ сравнит. А то без сравнения любой красивее вашего.

Ответить
Развернуть ветку
1 комментарий
Andrey Fedorov

Кстати, проблемы в PDF нет никакой на самом деле. Люди к нему привыкли, это документ, который можно печатать понятным способом, пересылать и т.д. Не очень понятно, в чем преимущество html. Размер файла? Так это же ваша проблема, а не получателя (то есть плательщика) - получается, вы свою проблему перекладываете на клиента. Зачем?

То есть понятная логика такая:
Счет на почту - pdf.
Счет с генерацией в браузере сразу для оплаты - html плюс тут же опция скачать pdf.

Но случается, что банки глючат с символами при копипасте из pdf - ругаются на "запрещенные символы". Например, такая проблема есть в Точке, но, уверен, это лучше это решать именно на стороне банков.

Ответить
Развернуть ветку
Eugene Horohorin

У pdf есть ещё одно, очень важное преимущество - он будет выглядеть и напечатан ровно так, как задумывался отправителем. Без съехавшей вёрстки, переноса на другую страницу и особенностей мобильного браузера.

А какую проблему решает уменьшение размера счетов я так и не понял. 

Ответить
Развернуть ветку
1 комментарий
Илья М.

Перечислю что в вашем варианте плохо:
1. Заказчик прибит к правой границе (очень длинные наименования организаций тестировали?)
2. Номер и дата счета прибиты к левой границе на одной строке с заказчиком, могут мешать друг другу. Лучше будет с новой строки или по центру, как в варианте 1С
3. Про вертикальные (да и горизонтальные тоже) паддинги в таблице в комментах уже упоминали
4. В таблице нет денежных единиц - ни в строках, ни в заголовке столбца. "Руб" присутствует только внизу.
5. Отсутствует текстовая расшифровка суммы Итого. Насколько помню, это важно и нужно.
6. "НДС не облагается" - лучше с новой строки
7. Руководитель, прибитый к правому краю - сомнительное решение
8. В левой колонке ваши реквизиты повисли в воздухе. Если вы название своей организации привели сверху, то логично там же и все реквизиты перечислить. Сейчас они просто висят как не пойми что. Я бы расположил в таком порядке сверху вниз: лого, название фирмы, все реквизиты (ваши, затем банка), телефоны. Внизу - только QR-код. Посередине - пусто.

Фух, аж устал перечислять.

P.s. В подобных бланках, даже если они не стандартизованы, в общем-то нет места вкусовщине. Как армейский устав написан кровью, так и формы бланков зачастую продиктованы огромным опытом работы с ними тех пользователей (читай бухгалтеров), на которые они расчитаны. Как справедливо выше заметили, главное достоинство формы 1С - это то, что к ней все давно привыкли. Любой человек, который видел этот счёт хоть раз в жизни, без ошибки за долю секунды определит где что искать. Безотносительно моих замечаний выше, в вашем варианте самое плохое это то, что к нему нужно заново привыкать.
Спасибо за внимание.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Igor Tarasov
Автор

Покажите неубожество. Ругаться каждый может.

Ответить
Развернуть ветку
3 комментария
L A

с 2008 года генерирую счета в html и уже эту html-ку конверчу в pdf
Сейчас с появлением в любом браузере функционала "экспорт в pdf",  кнопкой "скачать в pdf" пользуются намного реже

Ответить
Развернуть ветку
L A

А был вообще топовый случай. Обновили около года назад php и немного сломали генерацию счёта в pdf(реквизиты уехали так что их не видно), за пару месяцев около тысячи скачиваний счетов — никто не обратился что "что-то не так дайте нормальный"

Ответить
Развернуть ветку
2 комментария
Nurbol Akhmettayev

Добавьте "воздуха" в таблице и пробелы в суммах, итоговую сумму лучше писать в один столбец с другими суммами. Счёт не должен быть красивым, он должен быть читабельным.

Ответить
Развернуть ветку
Igor Kirsanov

О красоте спорить бесполезно, поэтому пропустим. Реквизиты необходимые есть.

Возможные проблемы:
1) Автоматическое распознавание - все что не похоже на 1с, то требует настройки.
2) Мелкий шрифт, в некоторых организациях сейчас оплата происходит по фото с телефона, распечатали, сфотографировали, отправили бухгалтеру, не всегда в отличном качестве.
3) Из-за разнесения сложно быстро оценить, нет ли проблемы в подтягивании реквизитов по бику, бывает такое, что не совпадает, задаешь вопрос, находишь проблему.

Ответить
Развернуть ветку
Иван Сергеев

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

Ответить
Развернуть ветку
Igor Tarasov
Автор

Кем утверждена стандартная форма?

Ответить
Развернуть ветку
4 комментария
Александр Иванов

QR код есть штатно в 1С, уже год как

Ответить
Развернуть ветку
Game Topia

А что такое htmlcss? Онлайн стили типа? И ведь можно заинлайнить обращение на сервер, как с пустым пикселем в письмах.

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

Ответить
Развернуть ветку
Igor Tarasov
Автор

Имеется в виду формат документа разрешающий только html и css. 
Можно, но это даст только подтверждение, что счёт открыли. 

Ответить
Развернуть ветку
4 комментария
Илья М.

Перечитал заголовок вашей статьи.
Вы, может быть, удивитесь, но привычный всем счёт по своему довольно-таки красив.
Конечно же, ничто вам не мешает сверстать его в HTML, ничего (или почти ничего, типа "корр. счет") не меняя.

Ответить
Развернуть ветку
Павел Сайк

Для тех кому HTML далек, и нужен простой сервис для выставления счетов без регистраций и смс, то во сервис

Ответить
Развернуть ветку
Александр Иванов

супер)

Ответить
Развернуть ветку
Алексей Репетунов

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

Ответить
Развернуть ветку
Евгений К

Бухгалтерские документы одного типа у разных фирм должны быть максимально похожи, а лучше вообще чтобы ГОСТ был. Разнообразие и красота нужны не всюду.

Ответить
Развернуть ветку
Антон Воробьёв

Интересный взгляд на оформление счетов. К сожалению не учтены несколько важных моментов, в которых использование HTML формата может вызвать затруднения у принимающей стороны: 

1. Неудобно смотреть с мобильных телефонов. Часть клиентов смотрит счета с мобильных телефонов. Да, да в наше время это происходит. И красивый HTML счет бывает вытягивается в малочитаемую колбасу. А средства просмотра PDF стандартизированы и позволяют в масштабированном виде просмотреть счет. 

2. Автоматическая обработка счетов с HTML форматом сильно затруднена. На стороне контрагента может стоять система автоматической обработки, которая из письма формирует заявку на оплату. Для PDF разделение происходит естественным образом: тело письма идет в комментарии к оплате,  файл - в первичные документы. Встройка счета в тело письма существенно затрудняет этот процесс и вынуждает к куче ручных действий. 

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

Ответить
Развернуть ветку
curios coon

Не хватает варианта ответа в опросе: "Нужно делать красивые счета, но по-другому"

Минимальное замечание, общую сумму по счету визуально лучше расположить под цифрами (стоимостью услуг). Если нужно указать наличие/отсутствие НДС, указать левее это либо ниже 

Ответить
Развернуть ветку
Александр Иванов

наличие/отсутствие НДС - обязательно указывается

Ответить
Развернуть ветку
Андрей Тишкин

Странно, я думал форма счёта утверждена, по аналогии со всякими упд... То есть и счёт-договор можно со стразами рисовать?

Ответить
Развернуть ветку
Igor Tarasov
Автор

Можно. 

Ответить
Развернуть ветку
Александр Иванов

форма УПД утверждена и обязательна только со статусом 1(счёт-фактура), первичные документы для бухгалтерии могут выглядеть как угодно, 402-ФЗ даёт право отказаться от унифицированных форм.

но нафига козе баян, если есть готовые шаблоны?

Ответить
Развернуть ветку
Кирилл Трубецкой

Можно ли пощупать HTML-ку от itsoft?

Ответить
Развернуть ветку
Igor Tarasov
Автор

Держите.

Ответить
Развернуть ветку
5 комментариев
Zloy Marketolog

А сохраняетя этот счет в каком виде? В виде html-файла + папки с кучей мусора в ней?

Ответить
Развернуть ветку
Igor Tarasov
Автор

В одном файле.

Ответить
Развернуть ветку
Александр Иванов

Два счёта?

Вас не смущает тот факт, что там прямо написано "Образец заполнения платёжного поручения"?
А в платёжном поручении , внезапно, есть поле для к/с?

И не надо говорить о том, что к/с заполняется автоматом после ввода БИК, на заполнении платёжек может сидеть обезьяна с гранатой, которая просто не поймёт, что с этим делать.

А ещё - банковские приложения сейчас распознают счета либо в pdf, либо из графики.

Ваш счёт не получится распознать, и с вероятность того, что контрагент будет тратить и своё и Ваше время просьбами прислать "нормальный/обычный" счёт явно больше нуля.

Ответить
Развернуть ветку
Александр Иванов

КПП банка в счёте???
Серьёзно???

Ответить
Развернуть ветку
Александр Иванов

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

Сейчас в нашем государстве в полном объёме заработал 54-ФЗ.

Так вот, 01.07.2019 утратила силу норма, по которой получатель мог не применять ККТ, если плательщик-физлицо оплачивал по счёту через операциониста банка без открытия счёта.

В чём подвох?

По Вашим реквизитам абсолютно любой желающий подставить Вас недоброжелатель отправляет Вам денег на счёт ИП/ООО от имени физлица.

Вы обязаны не позднее 23:59:59(формулировка а законе - до окончания дня фактического поступления денежных средств на расчетный счёт) сформировать чек на ККТ и направить его плательщику, чего, вероятно Вы её сделаете, либо вернуть как ошибочные.

Если плательщик не получает чека с Вашей онлайн-кассы - он стучит на Вас в ФНС по поводу нарушения закона о применении контрольно-кассовой техники. Деньги Вы ему рано или поздно вернёте, или чек пробьёте, но общения с ФНС будет не избежать

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
81 комментарий
Раскрывать всегда