New website design #5

Open
ngosang opened this Issue Dec 28, 2016 · 19 comments

Projects

None yet

6 participants

@ngosang
Member
ngosang commented Dec 28, 2016

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
Contributor

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
Member

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
Member
ngosang commented Dec 30, 2016

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

@sledgehammer999
Contributor

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
TJBK commented Jan 10, 2017 edited

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

mess

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

@Chocobo1
Member

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
Contributor

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

@TJBK
TJBK commented Jan 12, 2017

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

Desktop:
desktop

Mobile:
mobile

@Chocobo1
Member

@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
Contributor

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
Member
Chocobo1 commented Jan 20, 2017 edited

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
Contributor

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
rovacado commented Jan 24, 2017 edited

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
Member

@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
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment