Create a new "Light" PDF template

[alexmigf]

@Spreeuw said:

I also think it's time for an additional 'Light' template in PDF Invoices. It should have a few improvements over the old 'Simple' template such as:

1. Out of the box cross-compatibility with mpdf
2. Maybe using floats instead of columns for the addresses so that they can be moved to the other side more easily
3. No black header to save ink

[Spreeuw]

To document an idea we discussed some time ago:

I was thinking that we could also try a different sort of title/value setup, for example with small & big font like this:

One thing that might be difficult for this is that because of the hooks integration, this does need to be table>tr>th+td... so it needs to be all CSS but I think it's nice & fresh (and certainly not impossible to change table-cell to block ... at least in dompdf!)

Layout wise it's not the optimal though, because it takes more height. Here are two examples in context:

[alexmigf]

@Spreeuw what you think?

[Spreeuw]

very similar to my last mockup, but I'm still not very keen on the additional height this occupies... (yours takes a bit more than mine)

[alexmigf]

What about 3 columns, like we have now? order data, shipping and billing addresses, is the only way to avoid having a second row.

[dwalkerpriv]

@alexmigf are 4 columns too much?

[YordanSoares]

@alexmigf is this Light template intended to be part of our free main plugin, or is this a new premium template?

[alexmigf]

The original idea was for the free plugin, to help save ink.

[Spreeuw]

@YordanSoares both. Basically an alternative option in the free plugin, that will have a Premium counterpart too (just like the current Simple template).

[alexmigf]

@Terminator-Barbapapa do you want to give your input here? Maybe with a mockup designed by you that has a better appeal?

[MohamadNateqi]

If I may, I wanted to mention that the column style suggested here, as Spreeuw noted, may not be optimal.

Considering the main plugin is more general, it would be better to keep the row style as it is more concise. However, we can offer the column style as a premium option so customers can choose the style that suits their invoice data.

By the way, I came across a column style that I think you might like:

I would also like to suggest considering the Poppins font, as I found it quite nice.

I have another idea to share:

[alexmigf]

I like the idea but having the order details spread in columns I'm not sure if it's flexible enough. Anyway, I think we should move from creating a new template from scratch to making the Simple template more light in terms of ink spending. We could call this template as Simple Light or Simple Lite, for example.

This comes from the other discussion we had, keeping in mind the popularity of the Simple and Simple Premium templates.

What you think?

[MohamadNateqi]

What you think?

I totally agree, and I think it's better. The "Simple Lite" also is a good name. Making a different structure and layout can be a job for another template.

[alexmigf]

Good! Do you want to take this?

[alexmigf]

Btw, the name can be other, was just something that came from my mind. Maybe we should discuss that with the team on Slack.

[MohamadNateqi]

Do you want to take this?

Sure, good.

Btw, the name can be other, was just something that came from my mind. Maybe we should discuss that with the team on Slack.

I found the "Simple Lite" quite good. But sure, we'll discuss it with the team on Slack.

[MohamadNateqi]

Since the purpose is to make the Simple template lighter, I created a sample and made changes only to the products table:

What do you think?

[dwalkerpriv]

@MohamadNateqi this looks pretty good. only thing that comes to mind as fine tuning is using darkgrey as color for the border-bottoms, except for the totals area. personally i'd make the logo smaller to simplify it more but that's just me.

"Simple Lite" sounds to the point as well 👍

[MohamadNateqi]

@dwalkerpriv The dark gray color (#A9A9A9) doesn't meet WCAG contrast standards. I used a color (#595959) that passed all tests. I think this color is better for people with eye issues. What do you think?

Regarding the logo height, it's dynamic as it can change using the general settings.

[alexmigf]

Seems good for me.

[dwalkerpriv]

The dark gray color (#A9A9A9) doesn't meet WCAG contrast standards. I used a color (#595959) that passed all tests. I think this color is better for people with eye issues. What do you think?

It's all good then 👍

[MohamadNateqi]

@alexmigf, considering that this template will only slightly modify the styles of the "Simple" template, all other files will remain untouched and copied from the "Simple" template. Do you think it would be a good idea to implement the child-parent system of WordPress for themes in our template system?

[alexmigf]

Generally the php files are very identical, even for different templates. I think it doesn't worth having that work just for one template.

Maybe we could add something to distinguish from the Simple? Something customers ask a lot? What do you think?

[MohamadNateqi]

Maybe we could add something to distinguish from the Simple? Something customers ask a lot? What do you think?

If there are any possible modifications to make on this template, which still keeps it the Simple Lite, then yeah, I think it would be great. However, I don't know about customers' requests; can help with this?

[alexmigf]

@dwalkerpriv @YordanSoares @Terminator-Barbapapa do you think we could add some helpful for customers in the Lite template to distinguish from the Simple? Maybe something they ask a lot? Or any other ideas?

[alexmigf]

@MohamadNateqi in a discussion with @Terminator-Barbapapa about this, I was thinking that probably we could add this Lite template without actually have any template files? Because we could use an hook to change the template styles, maybe we could make the code work to also have a "ghost" template? This way we avoid having to change things in the template structure.

But let me know all what you think about this, or if you have other suggestions/ideas.

[MohamadNateqi]

@alexmigf That's actually a great idea! All other files except the style are the same right now, which was why I presented the child-parent system idea.

What do you think about adding a check box just for the Simple template below the template selection to enable the light mode? Then, the light CSS rules override and change the template. There is no need to add it to the template list too.

[alexmigf]

What do you think about adding a check box just for the Simple template below the template selection to enable the light mode?

That's even a better idea, I love it.

[Terminator-Barbapapa]

I do like the idea to make our templates more modular. Also when thinking about our new Customizer I think we need to make separate components to make that work.

I would like to keep everything related to template selection in one setting for now though.

[MohamadNateqi]

I would like to keep everything related to template selection in one setting for now though.

So you say we go for the "ghost" template, right?

[dwalkerpriv]

@dwalkerpriv @YordanSoares @Terminator-Barbapapa do you think we could add some helpful for customers in the Lite template to distinguish from the Simple? Maybe something they ask a lot? Or any other ideas?

Probably in this case it would be more so what we can take away from the simple template to make the lite version more distinct.

Maybe reduce vertical space between table rows so more items could potentially hold on one page? Could look into reducing font sizes as well, or replacing tags with bold fonts of the same size as the rest of the body font.

As far a addition goes, I can't really think of anything. Most requests besides saving ink is for layout changes. We will be addressing that with the customizer update.