New website design

[ngosang]

I will love a new design like this (but in blue color) => http://www.videolan.org/vlc/
We should open a new thread in the forum to request designs and designers. :)

[sledgehammer999]

No problem, but I dislike really long "endless scrolling ones". I would prefer news/changelog to at least have its own page. Not cram everything into one page.

[Chocobo1]

Might be possible to require the new design to use jekyll instead of PHP?
The website doesn't have dynamic content and it might be easier to blog in Markdown.

[ngosang]

There is no need to change php, if you don't have dynamic content there is only html in the php files...

[sledgehammer999]

No change please. We need a technology that is trivial to change hosting servers, or maybe go back to sf.net which supports php, perl, python, ruby, tcl.
I want to have options in case we need to migrate.

[TJBK]

Okay I'm messing around and so far i've got this:

Sorry it's not that good. I it's a fast mockup

[Chocobo1]

I hope the website also look good on mobile devices.

[Balls0fSteel]

Well you could also have two websites, one for desktop, one for mobile.
Mobile site should use AMP anyway, which requires a separate page.
https://www.ampproject.org/

(When you Google a news story, and see the "AMP" text, tap it, it will instantly load. Google also puts these results in front. Okay ranking is not so important for the project, that's just a sidenote.)

[sledgehammer999]

FYI, I am not against the mockup @TJBK posted.

[TJBK]

Okay done a bit more work I'd like if someone could give me feedback

Desktop:

Mobile:

[Chocobo1]

@TJBK
Cool, some thoughts following:

1. I was hoping a brighter theme, the deep blue is too dark & too plain IMO.
2. You could put more icons on it, e.g. for bitcoin, litecoin, maybe font awesome?
   Also see here for qbt image resources: https://github.com/qbittorrent/qBittorrent/tree/master/src/icons
3. The footer text "The qbittorrent project aims..." and bitcoin links should merge into 1 column, currently 2 columns doesn't feel balance for me.
4. The "support this project" button should align to middle (horizontally).
5. For the desktop layout, I'm using a monitor with res 1600x1050, at least I hope the "Home" page could fit in (with footer or not) so I don't need to scroll down to see the feature list. I guess the grey part on the top could shrink up a bit.

Thats all for now, thank you!

[sledgehammer999]

I agree with most of what @Chocobo1 said. I am not sure if I'll non-blue color theme. But who knows maybe, I'll do.
I have to add that at your 2nd post the "About qBittorrent" section looks weird with that white/gray color and the "stretching" of that box. However, maybe it will work better when render in the broswer instead of a screenshot.

[Balls0fSteel]

@Chocobo1 I think the entire mobile page could be crunched into an AMP page. What do you think? (I am just curious, I realize most hip n cool tech just dies - but boy, do I love instant loading pages on mobile.)

Well actually once you finish with the new site, I will try to convert/move it to AMP. Nothing should change.

[Chocobo1]

Well actually once you finish with the new site, I will try to convert/move it to AMP. Nothing should change.

To be honest, I'm not too found of using google's AMP:

1. AMP might not work with other frameworks, e.g. bootstrap: http://stackoverflow.com/questions/38063272/using-accelerated-mobile-pages-with-bootstrap
2. I'm concerned that google might put analytics in it (not sure), I value that our current website doesn't contain any beacon that will identify users.
3. Here's a long article about performance: https://webdesign.tutsplus.com/articles/amp-project-will-it-make-your-sites-faster--cms-25853
   I haven't read it thoroughly though.

But don't get me wrong, I'm open for trying, see how it works out before the final decision.

[Balls0fSteel]

Ah, don't worry about it. Once the site is done I will see if it's compatible. It's no big deal, really.

I guess the most speedup comes from that companies are forced to build minimal sites. They have to throw away 5MB sites and come up with something clean and lean. And that's why it loads instantly on mobile.

[sledgehammer999]

I'm concerned that google might put analytics in it (not sure), I value that our current website doesn't contain any beacon that will identify users.

Well, we have the various like buttons for that. In fact, there are studies/articles about facebook tracking even unregistered people via the like button code.
(in any case I run with Ghostery in block-all mode and I don't care about them)

[Balls0fSteel]

@sledgehammer999 Using uBlock Origin, you can add the Disconnect list too. Thus, you gain a very fast and lean adblocker, with privacy blocking as well. Just a tip.

If anyone uses Firefox, "tracking protection" is absolutely must have.
privacy.trackingprotection.enabled in about:config

(I know, sorry for "off-ing" in the ticket.)

[rovacado]

I decided to do my own mock-up, just because I haven't done any web-coding in a while and find it fun to relearn things. I used the PURE CSS framework for the base of the site as its small, extensible, and responsive. I have a live preview Here the site has 3 breakpoints or layouts, if you will. one for desktop, one for medium sized devices (such as tablets), and one for mobile devices, you can resize your browser to see how each looks.. non of the links go anywhere, only the main page is mocked. I went with light colors, off whites and such to be easy on the eyes, but also Incorporated some of that classic blue that the current qB site has. all in all, with images and all the site only weights in at ~100 KB right now, so it should be fast loading on even the slowest of connections.

Update:
Didn't want to add another comment for this, as its a small update. I've added a very incomplete news page (find it by clicking "news/changelog" in the navigation pannel.) This page shows off loading a .md file (the latest news.md in this case) and styling it to fit with the overall look of the mock-up site via JavaScript. Two libraries were used. Showdown as the actual markdown parser and jQuery for the ajax handling to load the parsed markdown into the site. I opted for JavaScript over something like php based on the comment by @sledgehammer999 on wanting something that would easily be moved to another hosting provider, if need be. If no server-side technologies are used, then the site can be moved to literally any basic html serving platform available.

[Chocobo1]

@rovacado
Nice mockup, some questions:

1. is it possible to use a horizontal navibar? Not sure it will be better than the current one... just wanted to see how it looks.
2. is it possible to replace the png icons by svg ones?

[sledgehammer999]

@rovacado personally I am not that fond of the new white theme. Also, personally, I would like the navbar horizontal for desktop use.

[worldsdream]

I can build the website. It will be mobile and desktop friendly.

• homepage, modern
• news, it will be a blog posts with new versions and actual news if there is any. Also users can subscribe to rss.
• forum is a link to external
• download, modern
• screenshots, you can click easily on every screenshot (slider)
• wiki, development, bugs are links to external

What do you think @sledgehammer999 ?