Transmission Website refresh

[GaryElshaw]

It has been a significant amount of time since the Transmission website had a refresh. As one user put it today @shatteredsite

"Right now it needs a complete redesign and would do far more good with far fewer headaches or conflict. The site visually screams 'not maintained' and it has also been a while since a major release, compounding the issue further."

I couldn't agree more. I'm sticking my hand up to work on this if there are other fellow web professionals who would like to get involved.

[shatteredsite]

I couldn't agree more. I'm sticking my hand up to work on this if there are other fellow web professionals who would like to get involved.

Both hands up! I love this app and would love to contribute.

[shatteredsite]

I am unable to locate any vector format files of the Transmission logo(s) in the repos to use in design. @GScottElshaw you know where would I find those resources?

Please note that this is my first time directly contributing to a GitHub project, so please excuse me in advance for any missteps in procedure or method on my part.

[Pentaphon]

To whomever updates the website, can you make it more modern and have it work on all screen sizes from phones to 4K desktops?

[GaryElshaw]

I am unable to locate any vector format files of the Transmission logo(s) in the repos to use in design. @GScottElshaw you know where would I find those resources?

Please note that this is my first time directly contributing to a GitHub project, so please excuse me in advance for any missteps in procedure or method on my part.

I was going to start with this: https://github.com/transmission/transmission/blob/main/macosx/Images/Images.xcassets/AppIcon.appiconset/icon_512x512%402x.png

[GaryElshaw]

@shattered What were you thinking design-wise? I was thinking of something like these.

https://macroplant.com/adapter

https://netnewswire.com/

[ckerr]

Linking here for visibility, https://github.com/transmission/transmission.github.io is the website repo.

Note there is also https://github.com/transmission/transmission/blob/main/extras/transmission-1920.jpg

I don't think a high-quality svg exists. None of the maintainers are graphic artists :)

[shatteredsite]

@GScottElshaw I was originally thinking a more information dense version of the IINA Player website. https://iina.io

After seeing the Adaptor site you posted, I think somewhere in-between those two would be great.

[shatteredsite]

I don't think a high-quality svg exists. None of the maintainers are graphic artists :)

If not vector, someone somewhere has got to have the photoshop/gimp source files somewhere. The high res jpg you linked to will certainly help me start though, thanks :)

[Pentaphon]

@GScottElshaw I was originally thinking a more information dense version of the IINA Player website. https://iina.io

I like that because we have a lot of Mac users and that style of clean, light site layout really appeals to a lot of Windows users as well, who I think are the most untapped well of users that need to learn about Transmission.

We also need to update the addons section so people can see how many pieces of software out there work with Transmission.

[GaryElshaw]

I think somewhere in-between those two would be great.

Me too - Awesome!

[shatteredsite]

@GScottElshaw Do you have any CSS grid framework you like to use? I'm partial to a very slimmed down Bootstrap for just the layout. Simple, easy, mobile, and not bloated if you cut out the fat. Your thoughts?

I found a better working image for the logo via wiki.

[GaryElshaw]

I know of, but have never used it, but I was thinking of a much simpler approach of Wordpress + theme. Let's make some time for a zoom/skype and work out what we need to work out and divvy up how we're going to approach. And then the hard work, consensus from others ;-)

Yay! Working images are a great start!

Drop me a line: asituationist@ that google mail platform thingy.

[sweetppro]

AppIcon.tiff.zip here's the new icon, taken directly from the AppIcon.icns file in the latest nightly

[Pentaphon]

And then the hard work, consensus from others ;-)

I think as long as you start simple, keep it clean and fast, you won't get much pushback from the people ITT.

The old site was getting stale and anything modern would be welcome as long as it has all the information of the old site.

Somebody may want to tell the Transmission forum about this revamp so we get more eyes and helping hands in here.

[shatteredsite]

I decided to take a swing at a draft.

Excuse the homepage of the domain, something went terribly wrong lol!

[shatteredsite]

I would like to translate the app speed tests into something more tangible for users. I'm not a math guy, but it would be great to say "transmission uses x% less resources" with a nice * at the bottom with a link to the table. It just has a few too many variables for me to distill down. If someone could do that, it would be a great selling point on the site. Resource Use Data.xlsx

[GaryElshaw]

"transmission uses x% less resources"

Are there platform performance metrics available or have they ever been done, @ckerr @mikedld @livings124?

[shatteredsite]

Are there platform performance metrics available or have they ever been done

@GScottElshaw There have been. I translated it into the excel file for ease. I posted it the last post. https://pastehtml.com/view/5tx16jw.html

[GaryElshaw]

@shatteredsite I was meaning something more, this decade :-) With the new site, I think a 3.0 vs. 4.0 comparison would be great.

[shatteredsite]

Everyone's thoughts on my draft are very welcome. I thrive on brutal feedback! If people are not happy with the direction, I'm happy to go another direction entirely.

I would love to use MODX as a cms to make updating simple. It's easy to use, not very plugin-dependent (especially for a simple site), and I can integrate it fully in a couple hours tops. I have used it for over a decade with only one security hiccup, and that was fixed quickly. This is a bigger question I pose as bringing in third party open-source software is not as simple a decision as design.

@ckerr @sweetppro @Pentaphon @GScottElshaw

[GaryElshaw]

First things first. A few questions: Can someone tell us what the current hosting and billing arrangements are? What is the current CMS? What other mediums need to be incorporated into a new site? Does the project still require the forum, or has GitHub superseded that need?

[sweetppro]

@shatteredsite I think it looks great. nice and clean 👍

Heres a couple of small things I have noticed (some of which are clearly because its a draft):

• the icon is the older v2 icon
• the screens are also from v2
• the icon in the header looks blurry on my retina Mac
• The font under the images, has maybe too little contrast
• theres a small typo on the bottom Github button. :)

[shatteredsite]

@sweetppro Thanks for the feedback! Yes I used existing screenshots as placeholders till I really can spend time on that. If someone else could grab a few screenshots with torrents going at really good speeds, that would be great. I fixed the typo and updated the logos.

I could use help on font selection, there are so many it's mind boggling.

@GScottElshaw Some of the reasons why the CMS is more complex a subject. I agree, that is vital information to have, but I am not the best one to find out. @ckerr would you be able to?

It's 04:20 here, so will be back on it in 6-8 hours.

[ckerr]

First things first. A few questions: Can someone tell us what the current hosting and billing arrangements are?

Hosted on github, so static content is a hard requirement.

This fits my personal preference too: I don't want to have to do any sysadmin or troubleshooting. The fewer places in the pipeline where things can go wrong, the better.

Does the project still require the forum, or has GitHub superseded that need?

Hmmmmm there's not a clean answer for that. There's still some community in the forums and IDK if it would make sense to pull the plug on it. But it's definitely not the place to report bugs or ask questions that would fit in GitHub discussions, so I'd prefer GH links on transmissionbt.com.

[shatteredsite]

@ckerr Thanks for the clarification. I forgot completely about the repo and how much harder a full CMS install would complicate things. GOOD point. The functionality of the site is so simple that I don't think it will pose much of any issue to just swap files out, copy and paste come existing HTML/JS, and it should be fine.

EDIT: I switched out the jquery includes for PHP. Since it seems PHP files were part of the original site, it should run no problem. It is just two tags a page and will simplify things. It also will help with SEO a bit.

[GaryElshaw]

There's still some community in the forums

Thanks for this and the flat-file requirements information @ckerr. I'm wondering if it might be worth looking at the forums after the website changes. I think it might be worth deactivating/archiving certain sections and to refocus the community between here and there where the conversations can reach the right eyeballs; and The thing i am most concerned about, always, is the appropriate web properties have to reflect the amount of human resource available to monitor and engage with them.

Charles, do you or any of the contributors, or Transmission community members, have software that can produce speed tests? One of the things I would like to do is provide some decent benchmarking between 3.0 and what will be 4.0 clients. If you know of anything on the Mac side that serves that purpose, that is preferably free or cheap, please let me know.

@shatteredsite Afraid i couldn't access the test site :-( Initially i could without the CSS and then I couldn't at all.

What are you thinking? Are you thinking of flat-file html, some css and js files? Is this something you think needs to be coded from whole cloth or do we simply, ahem, 'co-opt' some css and javascript from elsewhere? https://iina.io/

[shatteredsite]

All the functions of the original site have been moved over and these are the changes: http://shatteredsite.com/transmissiontest/

• Links on Downloads page are all functional. Missing the embedded systems downloads as they seem wildly out of date (2009!). I have no idea if it makes sense to include them till someone more knowledgable tells me one way or another.
• Added "Source Code" and "SHA256 Hashes" to Downloads page. I found the logo for the Source Code here, but I am not 100% sure if we are ok to use it. Would like someone to double check!
• Donate page is now fully functional.
• Added a 404 page.
• Utilizing 'constants.js' for versioning info that will populate throughout the site. This includes the Download page, buttons, links etc. This is an original site feature, and makes perfect sense.
• HTML includes are now done via simple PHP. Javascript was unreliable and slowed browsers while affecting SEO.
• Switched Fonts to BakbakOne. It is a Google font which is not ideal, but I am open to alternatives! Typeface is not my strength, and I'm sure it could be improved upon.
• Favicon of new logo added
• Link hover color updated to a deep red.
• Download button added to footer.
• Gradient dark background added to section on homepage. A ripoff of the IINA Player site, but I'm personally terrible with creating very subtle gradients. It always looks garish if I do it myself.

One known issue is the fonts glitching on load. I'm working on it, but having a bit of trouble. Bootstrap 5 is a bit confusing to me on that issue.

I could also use help with updating those screenshots for the homepage. If anyone could take a couple snapshots that would be great.

On the homepage there are 6 OS logos shown. I ask if anyone has any opinions as to whether those are the right distros to showcase. I hope official testing on Mint and ElementaryOS occurs soon, they are only increasing in popularity, especially for new users.

Let me know what y'all think!

[shatteredsite]

@GScottElshaw Sorry not to tag you in the last post, didn't see your previous post. The way I handled the site was to stick with html/php, CSS and JS files. It's about as simple as you can possibly get in that regards. The php is just a few tags here and there for includes, but that is it. The site is up now, A2 Hosting is my nemesis.

[sweetppro]

@shatteredsite this looks great!

a couple of things I noticed:

• Im not sure I like the font.... personally I prefer the system font you had previously
• the images are not centered as the rest of the site, this seems to fix it .align-items-center { align-items: center!important; justify-content: center; }

I can also take some macOS screens later today

[GaryElshaw]

Some notes!

@shatteredsite

Stunning and efficient!

Homepage

Font: I prefer sans vs serif fonts, but you know what they say about opinions. I'd have a look at Roboto, especially the 'Light 300' for some text. 'Medium 500' for 'Transmission' homepage Headers. There's a bunch of different styles available within it that should give some flexibility for titles and text. https://fonts.google.com/specimen/Roboto

Body: Can we use a black and white GitHub logo? I'm thinking the contrast with the background would look better than the light blue on white.

Footer: I think the footer could reflect the nav. It might be nice to bookend the site so users can move on to other parts without scrolling back up.

News: Can we have a News navigation item at the top that gets anchored to after 'Light Weight & Lightening Quick' and before 'Open Source'.

Preliminary text:

            ""[Of the website]...because I agree with you there that it needs a refresh." - Transmission developer, Feb 2022.

Welcome to the website refresh of Transmission that hopefully looks a little more 2022 than 2009; points you in the right direction, and helps get you started or tells you how to get there.

            is this project officially dead ?  - Transmission user, Sep 2021

Nope. Since the latter part of 2021 a lot of work has been happening but it has all been behind the scenes development that has included a complete rebase of the code and a bunch of features being included that have come from community contributors and the dedicated lead developers of the project. In a month or so, come back and join the progress as Transmission enters a beta phase to reach 4.0.

In the interim, there is progress across all platforms on an almost daily basis. For example, did you know "Nightly releases" (Link: https://build.transmissionbt.com/) have been working on Apple M1's and compatible with Monterey since last year?

[shatteredsite]

@sweetppro I just can't figure out how to fix the images to center them, even with your solution. It's a grid system issue. It's driving me nuts, but I am on 3 hours sleep and my food just arrived. I'm on it later tonight.

@GScottElshaw The fonts I will play with. Roboto isn't bad, I have to see more options across the board. I made the GitHub logo/button black and white. I also applied the dark gradient to the header and footer.

As for a news section, we can probably just stick with mentioning it as being under active development. I'm just prioritizing for now.

[sweetppro]

@shatteredsite Its a bootstrap declaration, but can you not just add this: .align-items-center { justify-content: center; }

to style.css

[shatteredsite]

@sweetppro I figured it out. I started with a bit of copy and paste. I simplified the grid dramatically, bit wider than I like, but working on it.

@GScottElshaw I looked at Roboto. I just think we need something in-between Bakbak One and Roboto. I would like something with a bit more character and visual emphasis than Roboto, but Bakbak One is just too severe for anything other than headings. Even then, a bit much. Still playing though!

[sweetppro]

@shatteredsite here's a bunch of macOS screenshots taken with copyright free torrents: screens.zip

[sweetppro]

@shatteredsite the header icon is still fuzzy on my retina screen, is it possible to re-use the large logo. That would save a little bandwidth - and fix the retina issues...

[shatteredsite]

the header icon is still fuzzy on my retina screen

Not any more :)

[GaryElshaw]

Here's a quick and dirty edit of the homepage html - warts and all. I think dropping the google fonts idea is a good idea, because let's face it, our remit isn't to create a rebranding and i think that's the territory we're heading into by doing that. index.html.zip

[shatteredsite]

@GScottElshaw I'm integrating the changes. The footer looks much better!

However, I don't think a news update section is a good idea. It makes the homepage far too wordy and dense, taking focus off of downloading and using the product. This is more of a sales flyer than a place people go to check out new information about the app. What it is, what it does, the gist of what it can do for them, where to get it, all while showing it in an easy and appealing form. The rest is just distraction for most people.

When 4.0 comes out, I think it would be better to edit the existing information/sections to place emphasis on the the major update and it's features. Maybe add another section or two to the homepage. Minor updates are handled by the app and most users don't care very much about what those smaller updates actually do in detail, and don't usually pay much attention in general.

Plus when you have to post something saying the project isn't dead, it does not make the project look good, no matter what details or context stated. Once it states anything remotely negative, even stating positive progress in addition, it leaves a bitter taste. Especially with users champing at the bit obsessively over being M1 native, even if not hugely important to them. You also need to keep up with it, or the site and project looks stagnant. Lower maintenance, especially on a site without a CMS, is also a benefit.

Anyway, time to log off for 7 hours. Updates have been made for the night, I will be back on later.

[GaryElshaw]

This is more of a sales flyer than a place people go to check out new information about the app.

I agree that the site should primarily be old school brochure-ware, but at this point i also think some notice needs to be paid to the fact that 2020 was a long time ago between releases. That News section i was proposing was intended to be temporary until version 4.0 is released, and i was proposing it to be near the bottom of the page so that it isn't the primary focus. I was thinking it exists for about 4 months, captures milestones, solicits feedback on the available betas, and then disappears until such time as, hopefully, a new round of 4.5 betas.

I agree with your second para, entirely.

I'm not sure i agree with you about stating the project isn't dead. Unless you have been willing to engage directly in GitHub, what other medium suggests the project is receiving ongoing development? It's not the website. Do you visit product forums for developmental news? Perhaps my words need rephrasing? Perhaps it should include there has been and is continuing development, with an expected beta phase in the next few months.

Oh, that 'News' header needs to be removed from the footer in the current test version. I also removed the allcaps in 'Transmission' within the header, footer, and body. I'll leave it to you to decide whichever way you think it looks better. My 2c is it looks better without the allcaps.

I'm also going to bow out of the process from this point. No shade, it's just not the collaborative experience I was hoping for, and i'm too old for it to not be.

[shatteredsite]

@GScottElshaw I'm actually very new at the GitHub collaboration thing, sorry if I seemed a bit dismissive, it's mostly rambling lol. I really don't know what I'm doing in that regard, so please do tell me how I can make this something easily collaborated on and community driven.

But you have convinced me we can do a temp section on news/updates. I literally woke up thinking about it lol! I just needed to play with where. We do need to phrase things carefully, but it's not a hill I would have died on either way. I suppose I may be relying on the website refresh to be a "hey yes we are here and working" statement in and of itself. Which it can be to an extent, but I may be outright dumbing it down way too much. In fact, work I did last night seems to have made for an easier transition. Already added to draft.

I got Roboto to look good finally! There was some conflict in the CSS, and this looks much more elegant. I do agree removing those all caps were necessary!

Take a look at the site now :)

http://shatteredsite.com/transmissiontest/

[shatteredsite]

There is an illustration of an eye with a line through it I got from Wikimedia Commons, but I am unsure how to go about coloring. I"m thinking a gradient and shadow, but not sure either way. Ideas? Does anyone have a better image? Would anyone like me to make something I have not thought about? I'm on the fence about it.

[GaryElshaw]

• Interestingly, Roboto is rendered in Safari but not Chromium for some reason.
• That eyeball is fine, it just needs to be significantly smaller, it's big eh. And balanced out with the text.
• The text in News & Updates shouldn't be justified, and the font weight looks a little light, it also could just be my brain and the visual contrast with the weight of the rest of the text.
• On the downloads page there's a missing break "Requires Windows 7 or later
  Nightly builds"

[shatteredsite]

@GScottElshaw

• I will look into the font rendering issue. Does it still look ok? Third party fonts between browsers can be touchy, especially Firefox.
• The eye is huge. Fixed? Let me know
• I did increase the font weight of the news section and increased the line height, can you check again? I have been in a flurry of uploads.
• I agree the justification of the text in the news section isn't great. Fixed.
• Fixed the missing line break.
• Fixed mobile padding & margin issues.

To be done:

• Further styling News section: Having trouble with: p:first-child:before for some nice quotation marks, but how would everyone like to see that styled as a whole?
• I will be making the background of the news section lighter so overlap won't be an issue.
• Clean up file directories
• Convert some images to webp for speed (?).
• I need help on cross-platform testing, but thanks for the heads up about the font issue.

Am I missing anything anyone wants to see?

[shatteredsite]

@ckerr Do you know how many other core developers have seen this? I really want the decision makers in on it, and I'm not even sure how to use pull requests, or when is appropriate. I'm still new to GitHub collaboration.

[Pentaphon]

Ok I finally got the site to load on Firefox and here's my suggestions:

1. The gear background images on the top of the page take up a lot of space without being informative. I would replace it with what the IINA page does except have it cycle through screenshots of the Windows, Mac and Linux ports to really hit home with how this client works on every desktop.
2. The "native for your system" section should have a mention of the Windows port and what makes it run natively on Windows. Whoever has done the most work on the Windows port can probably give you a blurb for that section. I think this project is very much in need of Windows users, which are the biggest desktop userbase by far, so not having it "left out" of that section is crucial to the future userbase of this project. We need to be very clear that Windows users have an alternative open source torrent client in Transmission!
3. The download page needs a link to the Flathub page which allows all Linux users to download the latest version regardless of which distro they are on so this is very important to such users. @wjt is maintaining that according to https://github.com/transmission/transmission/issues/64 so I am tagging him so he can offer more advice if he wants to.

[shatteredsite]

@Pentaphon Thanks for the feedback!

I agree the gears are extraneous and just for visuals. Not bad looking, but not terribly helpful. I didn't want to completely ripoff the IINA site, but it is sleek. I do have the screenshots for it for that design, so easy enough. I will give it a shot as an alternative option so see how everyone likes them side by side.

I was not entirely sure about the windows version, as the original website has it shows as an "early preview." I have a lot to learn about the development status and popularity of platforms, so keep the information coming.

I will add Flathub later tonight. @wjt Anything you can tell me would be great.

Be back in 5 hours.

[GaryElshaw]

• The eye is huge. Fixed? Let me know Yes!

The font weight and text alignment is looking much, much better in the news and updates section. Nice work. That missing line break in downloads is still there so far as i can tell, but that could be caching, maybe.

If you were referring to the quotation marks in "Nightly builds", the quotation marks and the capital-N can disappear, it was just a visual cue for me to tell my often forgetful brain to put a link there after writing the text. What were we talking about again?

I don't think image conversion will save you a lot, the page has minimal text and not a lot of images that are 'photographic' to affect load time. Everything is sub-100k with the exception of the Mac-Dark-Large.png. And, i hope, most users won't be on 56k modems anymore.

[Pentaphon]

I agree the gears are extraneous and just for visuals. Not bad looking, but not terribly helpful. I didn't want to completely ripoff the IINA site, but it is sleek. I do have the screenshots for it for that design, so easy enough. I will give it a shot as an alternative option so see how everyone likes them side by side.

I was not entirely sure about the windows version, as the original website has it shows as an "early preview." I have a lot to learn about the development status and popularity of platforms, so keep the information coming.

I wouldn't say it's a total ripoff since that design is used on a lot of sites and IINA is Mac-only so cycling through the screenshots is a different direction that places a great emphasis on the multiplatform nature of Transmission which again is crucial to growing the Transmission userbase by attracting more Windows users which are sorely needed and in my opinion, will give us a sizable enough userbase to keep the project going.

You may also want to consider a download button that detects which OS the user is using and says "Download for X" which immediately lets them know that Transmission is available for their OS but still takes them to the same comprehensive download page. Not sure if that is doable, but just another little detail that might go a long away for end users.

It's been nearly 2 years since Transmission has been a Windows preview so I think by now there should be a stable version for Windows, especially now that there's going to be a Version 4 beta in the next month or two according to the news blurb on the testing site, presumably followed by several more months of testing, but only @ckerr or @mikedld can tell us if the Windows port is ready for higher prominence on the new site so hopefully one of them can chime in on that.

[shatteredsite]

Quick update on the break.

By quotation mark I meant a decorative one to the left of the first paragraph in the news section. Just some CSS trouble, and it turns out it wasn't great looking anyway.

I agree emphasis on the cross platform nature of the project is important, especially windows users. I have MacOS screenshots, now I just need those for Windows and linux.

Second homepage here. VERY rough. http://shatteredsite.com/transmissiontest/index2.php

[GaryElshaw]

Second homepage here. VERY rough.

It looks good!