www.digitalmars.com         C & C++   DMDScript  

digitalmars.D - dlang.org redesign n+2 (the one with the bold red vertical menu)

reply "anonymous" <anonymous example.com> writes:
Inspired by the recent developments, and Sebastiaan Koppe's 
version [1] specifically, I gave it a go, too:

http://ag0aep6g-dlang.rhcloud.com/

It's not as radical as other approaches. I didn't start from 
scratch, but tried to improve on what's there. Almost everything 
stayed in its place. The only thing that moved significantly is 
the search box. And I'm not sure about the new spot; may be 
better to put it above #content again.

I worked mostly on the general appearance, not on the content, 
not on the navigation hierarchy, not on styling specific pages. I 
did very minor adjustments to the homepage, though. Like fixing 
the grammar of the slogan ;) And I stole Sebastiaan's tables, as 
can be seen on property.html, for example.

I tried to keep all functionality, not cutting things for the 
sake of looking clean. I did kill two little details though:
* "D 2.066.1" in the menu -- What's the point of that linking to 
the home page? Maybe bring it back as "Home".
* the GitHub ribbon on download.html -- Because I hate it.

The site supposed to scale nicely with window size and font size. 
E.g., try resizing the window, or pressing Ctrl++ until the 
layout switches to 'mobile' (go back to default with Ctrl+0).

On that note, I changed the main font size to 1em, period. That's 
a thing I feel kinda strongly about. It's just the right thing to 
do (TM) in my opinion.

I have not been a good committer, so there's lots of cleanup to 
do. But aside from that, this is supposed to mergeable as it is.

Destroy.

[1] 
http://forum.dlang.org/thread/erksyjogigdbhuwpwnzn forum.dlang.org
Jan 23 2015
next sibling parent reply "MattCoder" <stop spam.com> writes:
On Saturday, 24 January 2015 at 02:43:47 UTC, anonymous wrote:
 Inspired by the recent developments, and Sebastiaan Koppe's 
 version [1] specifically, I gave it a go, too:

 http://ag0aep6g-dlang.rhcloud.com/
Interesting, and just for fun I changed the CSS a bit: http://i.imgur.com/ijLxXe2.png :) Matheus.
Jan 23 2015
parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/23/15 8:04 PM, MattCoder wrote:
 On Saturday, 24 January 2015 at 02:43:47 UTC, anonymous wrote:
 Inspired by the recent developments, and Sebastiaan Koppe's version
 [1] specifically, I gave it a go, too:

 http://ag0aep6g-dlang.rhcloud.com/
I like this design. It changes the logo so that deserves some scrutiny. If there's consensus it's better, we can use it.
 Interesting, and just for fun I changed the  CSS a bit:
 http://i.imgur.com/ijLxXe2.png :)
The red band at the top is a bit odd. Folks, no takers on the suggestion to add nice pictograms to the menu items? Andrei
Jan 23 2015
parent "MattCoder" <stop spam.com> writes:
On Saturday, 24 January 2015 at 04:09:58 UTC, Andrei Alexandrescu 
wrote:
 Interesting, and just for fun I changed the  CSS a bit:
 http://i.imgur.com/ijLxXe2.png :)
The red band at the top is a bit odd.
Really? Oh yeah it's. I just was trying to fill the top with something... Bad luck! :) Matheus.
Jan 23 2015
prev sibling next sibling parent reply "Vladimir Panteleev" <vladimir thecybershadow.net> writes:
On Saturday, 24 January 2015 at 02:43:47 UTC, anonymous wrote:
 Destroy.
It is rather... red... Good logo integration, but I'm not that excited about everything else. The header-less page looks unusual, and what remains of the black background is now an uneven border that's neither here nor there. The bright blue used for the links also clashes with the gigantic red sidebar.
Jan 23 2015
next sibling parent "weaselcat" <weaselcat gmail.com> writes:
On Saturday, 24 January 2015 at 04:20:00 UTC, Vladimir Panteleev 
wrote:
 On Saturday, 24 January 2015 at 02:43:47 UTC, anonymous wrote:
 Destroy.
Good logo integration,
I agree with this, maybe should be considered for current site.
Jan 23 2015
prev sibling parent "anonymous" <anonymous example.com> writes:
On Saturday, 24 January 2015 at 04:20:00 UTC, Vladimir Panteleev 
wrote:
 It is rather... red...

 Good logo integration, but I'm not that excited about 
 everything else. The header-less page looks unusual, and what 
 remains of the black background is now an uneven border that's 
 neither here nor there. The bright blue used for the links also 
 clashes with the gigantic red sidebar.
Regarding the colors, my monitor definitely isn't callibrated, so it may be too bright/intensive. I did just use the red from <http://dlang.skoppe.eu>, not thinking twice about it. Color adjustments would of course be trivial. About the header-less-ness, yeah it's a little different. But I think it puts nice emphasis on the content. When I go to some deep page of the site, I don't need "D Programming Language" to be first thing on the screen, taking away (vertical) space and attention from the stuff I'm interested in. Can't say I agree about the black background. I think it looks nice.
Jan 24 2015
prev sibling next sibling parent reply "H. S. Teoh via Digitalmars-d" <digitalmars-d puremagic.com> writes:
On Sat, Jan 24, 2015 at 02:43:45AM +0000, anonymous via Digitalmars-d wrote:
 Inspired by the recent developments, and Sebastiaan Koppe's version
 [1] specifically, I gave it a go, too:
 
 http://ag0aep6g-dlang.rhcloud.com/
Not bad! I actually like this one. The only obvious object I have is the unbroken bar of red on the left. I think it might look much better if we darken the "sky" above the Mars horizon where the D logo sits. Not completely black, but a much darker red that it currently is, to provide some visual contrast. And maybe fade out the red towards the bottom of the page. Just something to soften the otherwise prominent red strip on the left. [...]
 The site supposed to scale nicely with window size and font size.
 E.g., try resizing the window, or pressing Ctrl++ until the layout
 switches to 'mobile' (go back to default with Ctrl+0).
Very nice! I like how when I split my screen to half-width, it automatically collapses the left navigation bar into an expandable button. Not sure how you achieved that (JS?) but that neatly solves the handheld vs. desktop dilemma that some of the other proposals suffer from.
 On that note, I changed the main font size to 1em, period. That's a
 thing I feel kinda strongly about. It's just the right thing to do
 (TM) in my opinion.
+1, thank you thank you thank you for doing this. I constantly get annoyed at sites that try to force the base font to something other than 1em (the worst is setting font size in px, which is almost always wrong because they assume a certain screen resolution that inevitably isn't mine) and thereby screw up my preferred font size in the browser. The usual result is either over-cramped text overflowing from divs, or unreadable microscopic font sizes, accompanied by assorted bleeding layout elements that fail to fit because it's too rigid to adjust to my screen size. Makes me pull out my CSS stick and discard the site's CSS by forcing user CSS (plaintext ftw!). This proposal, OTOH, makes me feel comfortable. The spacing between the list items on the left seems a bit too sparse (either that, or the font size is a tad too small), but the general look-n-feel of this is much better than some of the other proposals I've looked at. It's the first one that doesn't make me cringe, anyway. I'd vote for it if it's in the PR queue. T -- "I speak better English than this villain Bush" -- Mohammed Saeed al-Sahaf, Iraqi Minister of Information
Jan 23 2015
next sibling parent reply "Vladimir Panteleev" <vladimir thecybershadow.net> writes:
On Saturday, 24 January 2015 at 06:43:41 UTC, H. S. Teoh wrote:
 Very nice! I like how when I split my screen to half-width, it
 automatically collapses the left navigation bar into an 
 expandable
 button. Not sure how you achieved that (JS?) but that neatly 
 solves the
 handheld vs. desktop dilemma that some of the other proposals 
 suffer
 from.
dlang.org has had that for a few days now.
Jan 23 2015
parent "anonymous" <anonymous example.com> writes:
On Saturday, 24 January 2015 at 06:46:13 UTC, Vladimir Panteleev 
wrote:
 On Saturday, 24 January 2015 at 06:43:41 UTC, H. S. Teoh wrote:
 Very nice! I like how when I split my screen to half-width, it
 automatically collapses the left navigation bar into an 
 expandable
 button. Not sure how you achieved that (JS?) but that neatly 
 solves the
 handheld vs. desktop dilemma that some of the other proposals 
 suffer
 from.
dlang.org has had that for a few days now.
Yeah, I can't take credit for that. I did change it from px to em though, so that it reacts to large fonts, too. The layout switching is pure CSS (media queries). The menu button is JS. I'm not too happy about relying on JS there, but I don't see a way around it.
Jan 24 2015
prev sibling parent reply "anonymous" <anonymous example.com> writes:
On Saturday, 24 January 2015 at 06:43:41 UTC, H. S. Teoh wrote:
 Not bad! I actually like this one. The only obvious object I 
 have is the
 unbroken bar of red on the left. I think it might look much 
 better if we
 darken the "sky" above the Mars horizon where the D logo sits. 
 Not
 completely black, but a much darker red that it currently is, 
 to provide
 some visual contrast.
Like this: <http://i.imgur.com/70guZgC.png>? Used the same color as the border, because darker than the border looks weird, and lighter than the border isn't really dark. It adds some depth. I wouldn't mind either way, but I'd choose the current flat version. Also, the same logo is used in the 'mobile' layout, but on a horizontal stripe. There, the whole stripe is the 'sky', and I'd like to keep the main color of the stripes the same.
 And maybe fade out the red towards the bottom of the page. Just
 something to soften the otherwise prominent red strip on the 
 left.
I think I'd prefer the plain version here too. If the red is to flashy, maybe a slightly darker tone for the whole thing would be better.
Jan 24 2015
parent "H. S. Teoh via Digitalmars-d" <digitalmars-d puremagic.com> writes:
On Sat, Jan 24, 2015 at 04:23:21PM +0000, anonymous via Digitalmars-d wrote:
 On Saturday, 24 January 2015 at 06:43:41 UTC, H. S. Teoh wrote:
Not bad! I actually like this one. The only obvious object I have is
the unbroken bar of red on the left. I think it might look much
better if we darken the "sky" above the Mars horizon where the D logo
sits. Not completely black, but a much darker red that it currently
is, to provide some visual contrast.
Like this: <http://i.imgur.com/70guZgC.png>? Used the same color as the border, because darker than the border looks weird, and lighter than the border isn't really dark.
Much better! On another note, the black border between the red and white seems a bit too thick. What about make it slightly narrower? [...]
And maybe fade out the red towards the bottom of the page. Just
something to soften the otherwise prominent red strip on the left.
I think I'd prefer the plain version here too. If the red is to flashy, maybe a slightly darker tone for the whole thing would be better.
That's another option too. T -- Ignorance is bliss... until you suffer the consequences!
Jan 24 2015
prev sibling next sibling parent "H. S. Teoh via Digitalmars-d" <digitalmars-d puremagic.com> writes:
On Fri, Jan 23, 2015 at 10:41:18PM -0800, H. S. Teoh via Digitalmars-d wrote:
 On Sat, Jan 24, 2015 at 02:43:45AM +0000, anonymous via Digitalmars-d wrote:
 Inspired by the recent developments, and Sebastiaan Koppe's version
 [1] specifically, I gave it a go, too:
 
 http://ag0aep6g-dlang.rhcloud.com/
Not bad! I actually like this one. The only obvious object I have is
^^^^^^ Argh, I meant "objection". That'll teach me to reply to forum posts after my brain has shutdown for the night. T -- Once bitten, twice cry...
Jan 23 2015
prev sibling next sibling parent reply "Mengu" <mengukagan gmail.com> writes:
On Saturday, 24 January 2015 at 02:43:47 UTC, anonymous wrote:
 Inspired by the recent developments, and Sebastiaan Koppe's 
 version [1] specifically, I gave it a go, too:

 http://ag0aep6g-dlang.rhcloud.com/

 It's not as radical as other approaches. I didn't start from 
 scratch, but tried to improve on what's there. Almost 
 everything stayed in its place. The only thing that moved 
 significantly is the search box. And I'm not sure about the new 
 spot; may be better to put it above #content again.

 I worked mostly on the general appearance, not on the content, 
 not on the navigation hierarchy, not on styling specific pages. 
 I did very minor adjustments to the homepage, though. Like 
 fixing the grammar of the slogan ;) And I stole Sebastiaan's 
 tables, as can be seen on property.html, for example.

 I tried to keep all functionality, not cutting things for the 
 sake of looking clean. I did kill two little details though:
 * "D 2.066.1" in the menu -- What's the point of that linking 
 to the home page? Maybe bring it back as "Home".
 * the GitHub ribbon on download.html -- Because I hate it.

 The site supposed to scale nicely with window size and font 
 size. E.g., try resizing the window, or pressing Ctrl++ until 
 the layout switches to 'mobile' (go back to default with 
 Ctrl+0).

 On that note, I changed the main font size to 1em, period. 
 That's a thing I feel kinda strongly about. It's just the right 
 thing to do (TM) in my opinion.

 I have not been a good committer, so there's lots of cleanup to 
 do. But aside from that, this is supposed to mergeable as it is.

 Destroy.

 [1] 
 http://forum.dlang.org/thread/erksyjogigdbhuwpwnzn forum.dlang.org
it looks better than the current one however when i expand the menus, the sub menus opened don't feel like they are a part of (ie.) d reference menu or community menu. guess making it clear would be better. one question for everyone: do we really need 3-col web site?
Jan 24 2015
parent "anonymous" <anonymous example.com> writes:
On Saturday, 24 January 2015 at 09:32:18 UTC, Mengu wrote:
 it looks better than the current one however when i expand the 
 menus, the sub menus opened don't feel like they are a part of 
 (ie.) d reference menu or community menu. guess making it clear 
 would be better.
I didn't touch those, because I think they play rather well with my changes.
 one question for everyone: do we really need 3-col web site?
Well, it's only really 3-col on the home page. Otherwise, it's 2-col. And in narrow windows (on mobile) it's 1-col. And there's Sebastiaan Koppe's proof-of-concept (his words): <http://dlang.skoppe.eu>. I'm not a big fan, but it's not a column layout and it's on the table.
Jan 24 2015
prev sibling next sibling parent reply Jacob Carlborg <doob me.com> writes:
On 2015-01-24 03:43, anonymous wrote:
 Inspired by the recent developments, and Sebastiaan Koppe's version [1]
 specifically, I gave it a go, too:

 http://ag0aep6g-dlang.rhcloud.com/
The search "area" doesn't look good, especially the drop down. For example it's not possible to style the arrow in the drop down on Firefox. When you try to do that it falls back to some style that looks like something from Windows 95 (I'm using OS X). In general, don't style drop downs (including setting the width) unless you completely replace them with something else, like this [1]. [1] http://silviomoreto.github.io/bootstrap-select/ -- /Jacob Carlborg
Jan 24 2015
parent "anonymous" <anonymous example.com> writes:
On Saturday, 24 January 2015 at 11:36:58 UTC, Jacob Carlborg 
wrote:
 The search "area" doesn't look good, especially the drop down. 
 For example it's not possible to style the arrow in the drop 
 down on Firefox. When you try to do that it falls back to some 
 style that looks like something from Windows 95 (I'm using OS 
 X).
Oh, I must have botched that. It works for me in Firefox and Chromium. Just checked Firefox and IE on Windows. Firefox doesn't display the triangle, apparently missing the glyph. Should be possible to fix. IE refuses the arrow styling completely and shows its own thing, which is ok. Can't check OS X. This is what it's supposed to look like: <http://i.imgur.com/70guZgC.png> (ignore the dark background in the logo).
 In general, don't style drop downs (including setting the 
 width) unless you completely replace them with something else, 
 like this [1].

 [1] http://silviomoreto.github.io/bootstrap-select/
That's basically a JS implementation of <select>, right? I'd prefer a CSS solution, if possible. dlang.org actually got a nice CSS-only <select> lately. I had looked at the PR, and I think I pretty much took the implementation from it. So if the current one works, I'm confident mine can be fixed in CSS alone.
Jan 24 2015
prev sibling parent "anonymous" <anonymous example.com> writes:
I've started making pull requests from this, beginning with 
simpler changes. The big red bar is not among them yet. Some have 
already been merged.

Here are the ones that are still open, roughly sorted by level of 
controversy:

use user preference for font-size #828:
   https://github.com/D-Programming-Language/dlang.org/pull/828

remove underlines from links #831:
   https://github.com/D-Programming-Language/dlang.org/pull/831

fancy tables #830:
   https://github.com/D-Programming-Language/dlang.org/pull/830

de-emphasize DConf a little #833:
   https://github.com/D-Programming-Language/dlang.org/pull/833

turn list items of Convenience/Power/Efficiency to paragraphs 
#837:
   https://github.com/D-Programming-Language/dlang.org/pull/837

fix grammar #838:
   https://github.com/D-Programming-Language/dlang.org/pull/838
Jan 24 2015