New RawTherapee Website

patdavid · August 3, 2019, 4:33am

@paperdigits and I have been hacking at the new website these past few weeks, and we’re starting to reach a point where we’ll need some input and guidance from the @rawtherapee team. (@Morgan_Hardwood and @heckflosse and anyone else I might have missed - please @-mention them to notify them in this thread).

The new site is based on the mockup from @mariuszdaniel in his thread:

Copy
On the front page there are sections that are used to highlight aspects of the program:
- High Quality
- Efficiency
- Versatility
- Freedom for Free
I am not sure what type of broad things you’d like to highlight here. I don’t mind writing the copy, but I do need to know what aspects you’d like to use?
I can add as many sections like this as you’d like. I’d recommend that you think of what high-level things would you want someone to know visiting the page for the first time that might not know what RawTherapee is.
Off the top of my head, I might consider something like:
- High Quality
- Powerful
- Freedom
A little help here?
Images (Showcase?)
Those sections also have images connected with them. At the moment they are the same images shown in the image carousel up top, but what about using some great images by RawTherapee users?
I am open for any suggestions here as well. They could be other screenshots of the program or we could ask the community to provide some images (Ilya Varivchenko might be a good example of some images along with shots by @Morgan_Hardwood and @heckflosse)?
Old Site Content
What do we want to migrate from the old site to the new one?
I am thinking at the very least to migrate old blog posts that have release notes to the new site as release posts (@paperdigits already has things set up this way - more on that later).
Many of the old posts are mostly release news and the PlayRaw threads.
Blog?
On that note, I’ve also created a blog content type and section on the site for you to publish news or other blog posts. (I could turn this into news instead if it makes more sense - not sure what you’re thinking here). Thoughts?
About
There’s also an about page that I thought would be nice to include the original author and maybe a list of contributors or a little history on the project. I could use some help with this and notes as well.

If anyone is curious, the site is hosted on GitLab - so it might be helpful to have an account there and let me know what your GitLab accounts are so I can add the team to the repo while we work on this.

This is still a work in progress, but I’d say that we’re pretty far along and can likely launch the new site in a few weeks if I can keep finding time to hack.

Do we know where you’d like to host it and who controls the domain name as well? I can easily host this on the pixls infrastructure, but I’ll need access to the domain name to point it to the right place - who controls that?

Finally, as I’m sure anyone who has read this far is curious, here is the site as we work on it (GItLab CI is building and publishing with every commit):

https://patdavid.gitlab.io/rawtherapee-web/

(If you find anything wrong or broken, it’s all @paperdigits’s fault… )

ciprian.craciun · August 3, 2019, 7:48am

I’ve taken a quick look at the proposed site, and at a first glance I would say it looks great (from a visual perspective).

However (again from a visual perspective) I have encountered the following “annoyances”:

The screenshot images (especially those at the right) “touch” the viewport margin, therefore it makes me think I don’t see the entire image and makes me scroll to the right. (I would add just a little bit of padding.)
The color of the links (dark blue) gives a too small contrast as opposed to the background, and on the other side a too much contrast to the actual text color. It kind of breaks my reading. For example I’ve tried #80a0ff to lighten it a little.
The links in the footer (Dowloads, Features, etc) could use the same color as the same links in the header.
Perhaps add a small shadow (or something) at the bottom of the header, so that when one scrolls, it separates it from the rest of the body. (For example now if one scrolls down, and the scroll happens to intersect a <hN> with the footer, the text seems “cut”; ) For example adding this on the <nav>: box-shadow: 0px 0px 0px 1px hsl(0, 0%, 50%);

Other than that it looks great!

(Disclaimer: I’m not a web-developer, or UX specialist.)

patdavid · August 3, 2019, 1:18pm

Thanks for the feedback! Those are all items that are still in flux at the moment (the colors for instance don’t meet the correct contrast ratios according to web accessibility guidelines - well, they do for headings but not smaller text sizes - I was literally looking at that last night and worrying about it so it’s nice to have validation of my concnerns ).

I’m actually working on having the nav header shadow appear on scroll also (just thinking how I’d like to implement).

I appreciate the input, thank you!

afre · August 3, 2019, 2:26pm

I agree. It looks great when I halve the size of the window on a large screen because they are centered and have side margins. Also, when I do that, the margin of the first image is slightly smaller than the other two. I.e., the edges don’t align.

@patdavid My main issue is with the logos. The logos next to the titles are bottom heavy and require balancing. The two to the sides grow too large on large screens, taking up too much negative space and making it hard to focus on the content. My eyes want to go exotropic.

Lastly, the footer goes out of alignment on a narrower screen.

See positioning of logo and first row of links. ↓

patdavid · August 3, 2019, 3:18pm

Thanks!

I’m basically following the mockup from @mariuszdaniel here at the moment. I may add some padding there later on those sides, but they were intended to go to the viewport edge by design.

That first image is actually a carousel of screenshots and is slightly larger to display prominence, but this is in flux currently as well so is certainly subject to tweaking.

Not sure which “logos” you might be referring to?

Thanks for catching the footer! I’ve adjusted them to behave correctly.

afre · August 3, 2019, 5:26pm

It is fine when the view is wide. When it isn’t, it is uncanny. I prefer them to be aligned.

I mean the rings.

1 Original v new: I like the former. The text is nicer between the r and a too. Glad the blur is going away.

2 Narrow v wide: I like the former.

patdavid · August 4, 2019, 5:36am

Ah, I had originally aligned the logo the the text vertically, but the former version didn’t actually have it aligned that way (the descender on the “p” was pushing the logo down on vertical alignment). I’ve gone ahead and revised the logo to better match the old one. Thanks for catching that and good eye!

I was already discussing earlier about making the image carousel centered on the page instead of right aligned. I’ll work on that tomorrow (gutters will work out once I do). It was kind of driving my OCD a little nuts that it wasn’t centered, but I was trying to implement the design we were working from (time to start deviating a bit as needed, I think).

HIRAM · August 4, 2019, 2:39pm

@patdavid On the downloads it would be good to have:
About this build.txt info behind a button/tiny hyperlink
Access to legacy builds

I think it looks great!

lstuhl · August 4, 2019, 4:07pm

A RawTherapee blog newbie here (lurking for awhile but using RawTherapee since 5.0), and my programming skills predate most of your birth dates so I can’t help there. I have done a tiny bit of layout and font selection in my life and have one suggestion so far on any otherwise very promising redesign. I agree with Hiram’s and the other suggestions above but find some of the current main headings to be rather overwhelming in font size+weight. What I’m seeing on my PC screen I believe is Segoe bold but at that size I think the semibold weight would be better. Alternatively, a small drop in font size could also make the page less “shouting”. I look forward to seeing how this evolves!

XavAL · August 4, 2019, 5:48pm

I see those big images like headings to the explanations of each section (high quality, …), and they are nice. But maybe if they are a bit more interactive, the visitor will be more interested and more willing to test RT.

I’m talking about using something like a TwentyTwenty plugin, where you can easily see the before and after of a processing, but with one image just above the other and a curtain you can play with.

Examples of good use for this: denoising, sharpening, b&w processing, vibrance, soft light, haze removal … All of them really eye catching if shown with the proper image.

McCap · August 4, 2019, 6:46pm

Nice page.
The only thing is, I found the coloured gradients below the images distracting. At first Ithought it was an error…

patdavid · August 4, 2019, 7:11pm

I’m trying to avoid having to bring in so much jquery just for a comparison slider. I have some lightweight options I’ll look into for those places. I feel like comparisons like this might be better placed on a Features page - those section placeholders will probably end up being showcase images from users (possibly? Not 100% sure just yet, maybe a combination of showcase + comparisons).

Morgan_Hardwood · August 5, 2019, 1:31pm

Hey

Beautiful work!

I like the two large logo symbols in the background of the screenshot at the top, they add nice color to the page.

I’ll go through the user feedback (What are your favorite things about RawTherapee?) and return a few points.

As a user I get quite fed up with shitty program descriptions on F-Droid, Play Store and on software websites, descriptions more akin to someone trying to up-sell their shitty program for $$$ instead of being the honest and insightful info I’d expect from an open-source project which has nothing to gain from marketing and lies. As such, we should also mention the target audience in this prominent section, so that it’s clear what RawTherapee does not do and who it’s not for, so that people looking for a program don’t waste their and our time by installing software that lacks features essential to them, and filing issues for features which won’t get implemented. Our README.md already covers this, though it does not need to be copied verbatim.

Agreed, and only the release note-type posts.

We’ll only be publishing news, mostly release announcements (consisting of release notes + screenshots + perhaps demo video). There will be no blogging.

I would like the new website to keep things simple and avoid sub-pages unless necessary.

The way it is now, with the short “About” section at the top, is good. If we want to mention the history of the project, then there could be a “History” section at the bottom, or a sub-page, containing a summary of this and this (but with places of residence stripped, and with other info stripped and summarized as necessary).

It’s hosted on a Hungarian server paid for by Gabor. There have been numerous issues with the server in the past, so it might be a good idea to switch. I am contacting Gabor about this now.

Yes, the lack of gap makes me uneasy.

On my calibrated + profiled screen it looks nice but I agree a little too contrasty from the actual text. Maybe change #1a88ff to something around #4ea3ff.

Interesting, could you link to them?

No! No more external bundling of AboutThisBuild.txt. Is it scary nonsense to users and a source of many headaches to me, as (unknown to probably anyone on the dev team) there were frequent issues with these files which required re-writing the info manually. It’s a relic from the past when there were long gaps between releases and I would upload various dev builds from various people. That won’t be happening anymore - now we have frequent releases, and builds are mostly generated automatically. To be clear, the builds themselves (EXE or MSI, AppImage, DMG, etc.) can still include AboutThisBuild.txt internally, but we should no longer ship this file outside of the builds themselves as we do now.

Let’s just have a simple download section as it is on the new site now, and in a “Download Older Versions” section the downloads should be grouped by version (not the way it is on our current downloads page), so e.g. a “5.5” section would have a button for Windows, macOS and Linux.

The download buttons for the latest release should be prominent. Two small hyperlinks in a less-prominent place (under the latest release) should link to automated dev builds, and to a page with older versions. Windows and AppImage automated dev builds: https://github.com/Beep6581/RawTherapee/releases/tag/nightly We will need to work something out with @HIRAM who makes macOS builds manually.

Not sure a dedicated Features page will pay off in the long term. The sections with large images on the main page are the most prominent features. Dedicated “features” pages quickly become outdated. There is one place which lists all features, in detail, and should be always up to date, and that is RawPedia. A Features page should not list things like noise removal, color toning or sharpening because these are all tools (I just updated and greatly simplified the Features page), and all tools are clearly visible on the RawPedia main page. Better to spend time polishing RawPedia than duplicate the effort on the website.

patdavid · August 6, 2019, 2:45pm

Cutting out About and Features pages. Will do! (I may still advocate for an About page later to give some further info about the project in general, as I think it humanizes things to see that there are real people behind such a great project - but that can be pushed for later and is not a showstopper).

Here’s the contrast checker for Web Accessibility Guidelines with the current colors (I’ve updated them since the initial comment to meet AA guidelines):
https://webaim.org/resources/contrastchecker/?fcolor=1a88ff&bcolor=222222

I’ll summarize your responses on the issue tracker on GitLab and we’ll get these sorted out.

Hombre · August 6, 2019, 7:32pm

@patdavid (ping @Morgan_Hardwood) Just read the whole thread and had a look at the website. Nice work, even though I agreed on everything that has been said. I’d use thinner normal font (e.g. Segoe UI Light in the body section) and make some elements with evolving size when scrolling down (i.e. having a large header which become thinner when scrolling down), but that’s nitpicking.

Again, nice work.

pauld · August 7, 2019, 8:35pm

I agree with Hombre about the text. It’s very subjective so I imagine you’ll get different opinions, but I find the text too heavy and it makes it hard to read. So a lighter font for the body text and a much lighter font for the sub-heads which look old-fashioned to me.

afre · August 7, 2019, 11:51pm

Looks better now. With a few more touches and we are there. Can’t wait for the release.

elGordo · August 9, 2019, 3:04am

Looks great, @patdavid…much more current in appearance than the old site, and looks good on phones as well.

I think it’s always important to have a clear idea what purpose(s) a web site is intended to serve. In this case, it is serving as an online brochure and a set of links to other resources (downloads, doc, forum, etc.). If that’s the intent, it’s pretty much right on the money.

As a brochure, it needs to convey clearly and concisely what the package does and highlight what makes it good at what it does. The text so far is a good start. I think “before and after” image pairs are a good way to demonstrate RT’s capabilities. In addition, a video of an editing session that shows someone making major improvements on a photo in a short time would be a big plus.

As a means to reach other assets:

There needs to be a clear sense of purpose about the usage of a blog, and a clear idea of who is going to add to it. In my experience, most product blogs sputter within a few months and become dormant in less than a year. In those cases, the blog leaves the (often misleading) impression that the product is moribund as well.
I think the Forum, Documentation and Code links need to appear at the top of the page. The hamburger menu for the mobile layout only uses the links from the top of the page.
I think there should also be a Bugs link, to help minimize the possibility that people try to report issues here in the forum etc.

patdavid · August 10, 2019, 3:19pm

The copy does need some loving, and you’re right about the forum/doc/code links. I’ve been meaning to put them under the first “About” section near the top of the page, but apparently forgot. (I did just add an issue to remind me, though).

HIRAM · February 19, 2020, 8:55am

Dear website people, I believe this logo used at the beginning of README.md in the repo has been misplaced. https://www.rawtherapee.com/images/logos/rawtherapee_logo_discuss.png