Production report: New website for Pepper&Carrot

Published on

After a big month of hard work, I'm happy to release today the new website for Pepper&Carrot! Here is a list of the fix, improvements, and what's new:

1. More compact and cleaner:

The new website has less buttons on the way and more room for the content. It is now also possible to share the homepage in a target language. Eg: sharing English  https://www.peppercarrot.com/en/ or French: https://www.peppercarrot.com/fr/ .



2. Better language menu

The 47 translations of Pepper&Carrot are now listed under a single button. A percentage indicator will show you how much complete the translation is. If you move the mouse hover a language, a tool tip will show you more data about what is missing. Full translation receives a little yellow star for the quality of the maintainance.



3. I created a new font

For a better appearance, I decided to use a font hand-drawn like in old books. But none of them were available under Free/Libre license; so I decided to fork my existing "ComicSpice" font with the software FontForge and redesign the letters to give them a "Pepper&Carrot" vibe. The resulting font is named Pepper&Carrot (sources here) and has all latin-extended and vietnamese accents.



4. Disgusted by the flat colored web fashion

Nowadays, nearly all apps, website, software design comes from the taste of Google, Apple, Twitter, (etc...). I start to dislike this style as much as I dislike the idea that a little group of designer rules the taste of the web. I discovered in CSS3 many tools to add enluminures, non regular borders and frame using bitmap, and paper grain. Doing rich decoration is less easy and takes more time than applying a dull background-color and a border-radius but I think it really improves the experience. Especially in a time where tablets, monitors have a lot of resolution. Krita tools like rulers, symmetry tools, multi-brush, warp-around mode were so precious to design the 'sprite' bitmap I needed. I could this way invent a "modern Grimoire" theming to Pepper&Carrot website.



5. A new theme for the wiki:

The wiki contains a lot of hidden treasures and really worth a read for the pure entertainement. With the new theme it is now a pleasure to read it. Also, all illustrations of the wiki have moved to the source page 'misc' category.


6.  Fully responsive

The redesign of the website was thought for small devices and tablets in mind. It is now easier than ever to read Pepper&Carrot on a pad, a smartphone, a TV, (a toaster?) or on a connected e-reader.


7. New "Extras" menu

I'm not only publishing webcomics; I'm also publishing a lot of extras and bonuses: wallpapers, tutorials, brushes, artworks with Krita source files... A lot of cool contributions also extend greatly the universe of Pepper&Carrot: Pepper&Carrot Mini, the Wiki, the Fan-Fictions, the Fan-Arts... All of this was really hard to find in the past. Now, it is all linked under a single quick menu.



8. Improved footer of the webcomic episodes:

You'll find now a navigation with brighter buttons to quickly read the next episode but also big buttons to access the sources of the episode, comment or directly access to the SVG of the episode on Framagit.



9. New way to contribute: Beta-reading

Well, this is not 'so new' because it is something I ran since probably 2 year now but it was only known by the translators and contributors who were familiar with our collaborative Framagit tool. Now it is easier to find in the Contribute menu. You'll need only a Framagit account to interact on this thread as you would do for a forum. (note: nothing started for episode 30 yet, but maybe I'll start a thread in the coming weeks).



10. Easier HD button for Retina and 4K display

If you have a high definition monitor; you'll probably enjoy reading Pepper&Carrot into a 2400pixels wide resolution! Just click the button and the episodes will switch to hi-resolution. (click again on it to turn it off). As far as I know, Pepper&Carrot is still the only webcomics on the www being high-resolution! On the downside, it will cost you a bit of patience because the page are heavier to load via Internet.



11. Refactored Fan-Fictions, and three novels available to read

I received many scenarios, fan-fictions and texts (under CC-By license) and I stored them during my journey on a git repository... but I never had really the time to link them to the website. Now all fan-fictions are hosted, themed, and ready to read but also ready to receive corrections. You can also propose new fan-fictions. And big bonus for the French readers; the three novels wrote by Nicolas Artances about Pepper's adventure in Hereva are now available and it is a read I recommend if you like the universe and the humor of Pepper&Carrot.


12. Under the hood

For this redesign; I only did incremental changes (all visible on Framagit) over the old base and I still use the lightweight CMS PluXML, PluCSS and the multilingue plugin. I still write only Php, Html and Css using my favorite editor on GNU/Linux Geany. I also use Markdown, Json and Xml for data. I use only a single cookie to store the favorite lang for a couple of week (so I don't need to tell with a toolbar 'do you accept cookie' because this usage is ok) and I don't use Javascript because I don't like writing it and I'm really "old school" for my websites. You'll find no Google analytic, no bad tracking social-media buttons, and no adv. Your privacy and security is safe while browsing Pepper&Carrot.


Conclusion:

I'm really happy this is done now. It also prepares the place for a future big news. Unfortunately, I choosed on Pepper&Carrot to receive support only when I release a new episode; so I funded the time of this refactoring only with Freelance work. I guess that's the price of independance...

That's why I sincerly hope you'll like all the effort I put into this new website ;-)
https://www.peppercarrot.com/



License: CC BY
David Revoy, www.davidrevoy.com, .
Unless otherwise mentioned in the article.

Tags:  #maintainance  #website  #lab  

20 comments

link Craig Maloney Contributor, - Reply

This looks awesome! Thank you for putting in the hard work to make this an excellent experience.

link David REVOY Author, - Reply

Thank you Craig for the comment (and for the wiki! I really enjoyed re-reading it while doing this redesign.)

link raghukamath   - Reply

Wow nice report. And the new website designs are wonderful. I share the sentiment about keeping tracking off. Thanks for sharing the process

link David REVOY Author, - Reply

Thank you! ;-)

link KF   - Reply

Great work and lots of effort! What a delightful update!

link David REVOY Author, - Reply

Thank you :)

link TappedOut   - Reply

Is Risque not going to be used as a font moving forward? Does the Pepper&Carrot font replace it?

link David REVOY Author, - Reply

Hey, no worry :) Risque font is a SIL open font; and still part of the 'latin' font folder of Pepper&Carrot. I think only the Esperanto translators use it to write the translation of the title (like here: https://www.peppercarrot.com/eo/article451/episode-27-coriander-s-invention ). No reason to remove it or replace it (exept if I had feedback it become unused). The Pepper&Carrot font is more condensed and has a less spiky (and goofy :P ) feeling than Risque imo. While it also has this little irregularities and still kerning issues that make it not a too serious font. It will be improved on the way. I remember when I adopted the main font of the project; 'Lavi'. Now this one really evolved. I'll try to move Pepper&Carrot font to Latin folder of webcomics/font soon.

link B.   - Reply

It all looks really cool!

Are you going to change the font of the comic or just the website?

link David REVOY Author, - Reply

Thanks!

I'll keep 'Lavi' font for the comic, but after the creation of this new font I also took a bit more skill with drawing letters with FontForge; so I'll probably try to bring a bit more personnality to 'Lavi' I think on the way (a process I already started, I changed a lot of letters).

link Dread Knight   - Reply

This is all good stuff. Perhaps the translation button should be placed on the left side inlined with the hd button, which would be on the right side, in order to save a bit of vertical space. Keep up the good work!

link David REVOY Author, - Reply

Hey! Thank you.

Unfortunately; my CSS-only constrain (only way to make this language drop-down button without Javascript) require to sort of occupy a full line on the page. So, I can't really put another button aside to it. That would be cool! (and I tried). Maybe my CSS skill is not enough good to do it? I'll try to ask around to expert.

link JosephK   - Reply

Maybe you can put the `.moka` button before `label[for="langmenu"]` and give them a `display: inline-block;`
https://framapic.org/2GGluq5OzVjA/uZ9esn6w2sUp.gif

link David REVOY Author, - Reply

:O :O :O
Thank you for passing by here and giving a full solution. :-)
I'll apply it tomorrow for sure!

link Ferdinand   - Reply

I must say, your efforts with open source inspire me to do the same. So far this is working out great! Just recently updated my website to use only open source fonts, using only open content, mostly produced by myself. Coding everything myself as well (I do not use a CMS) and adapting for small mobile devices was a challenge, but made it work with a collapsable menu.

Keep up your your good work and show the world that open source is as good, or even better as proprietary stuff!

And best of all, You gave the world Pepper & Carrot! Always great fun to read!

Thank you!

link David REVOY Author, - Reply

Thank you Ferdinand!

link Châu   - Reply

I use ComicSpice in three episodes and like it. It use less space in comic, more space for background picture.

Please tell more about your freelance work: how much cost and time for work (put link in this web site?). May be some of fans want hire you for work. I think about hire you for future art project when I ready.

link Vulphere   - Reply

Nice website revamp, and as someone with passion towards typography, I adore ComicSpice design and Pepper&Carrot just continuing the good things with a more refined look.

link nniico   - Reply

Hello,
as a developer, typography lover and css enthusiast, I appreciate the hard work involved in this rewrite and I must say that the result is simply stunning!
For the ornaments (cul-de-lampe), couldn't you use vector files instead of the bitmap ones?
Here is an example : https://codepen.io/ntoniazzi/pen/ydBpeN
Thank you for your inspiring work!

link Dika Mikael   - Reply

Awesome new website design
Great job!
;)

Leave a reply

Comments will be moderated according the Citizens of Hereva Code of Conduct.

CapchaCapcha

Enter image code