dlang.org redesign n+1

Wed Jan 21 11:55:07 PST 2015

On Wed, Jan 21, 2015 at 05:52:06PM +0000, MattCoder via Digitalmars-d wrote:
> On Wednesday, 21 January 2015 at 17:34:46 UTC, H. S. Teoh via Digitalmars-d
> wrote:
> z
> >+1. I didn't like it either. But then again, the majority of people
> >rarely agree with me, so I didn't say anything. But obviously I'm not
> >alone in disliking this spaced-out layout.
> 
> Well, of course it needs some polishing, for example: I think the top
> menu should be visible on screen while you scroll down, because
> imagine that you are at bottom of the page and want to go somewhere
> else (Forums, Documentation etc).

I'm not talking about polishing. I'm talking about the design itself.
(Obviously, the following is just my personal opinion, so please don't
take it personally.) Let's start at the top.

First, there's too much empty space. The entire top red band wastes a
huge amount of screen real estate while providing only 6 links and a
search bar that's (1) way too tall and (2) not wide enough for a
meaningful (i.e. non-trivial) query.  This giant red band is present on
every page, effectively reducing the height of the browser window by 20%
for no good reason. I mean, it could be a *single line* at the top of
the page, what's the point of squatting on 20% of the page filling it
with empty space? Don't get me wrong, judicious use of empty space is
very important in any website design. But this is overuse of empty
space.

Second, that ugly gray band in the middle with "The D Programming
Language" in a font that's way too big and in-your-face. This is nothing
but a reincarnation of the evil Splash Page from the 90's, where useful
content is hidden behind obscure links relegated to the corners of the
page while the prime real estate in the middle of the screen is an
overly big splash of the marketing message that the website authors want
to shove down your throat. No thanks. Let *me* decide if I'm interested
in your site, I don't need you to tell me what I should be interested
in. The title should be just that: a title. At the top of the page, in a
prominent place if you wish, but give me the *content*! When I go to a
website, I'm looking for *information*. Not ads and vacuous slogans. If
I wanted ads, I'd go read a pulp magazine website or something. Or
monsterjobs.com. But on the website of a *programming language*?! Ick.

Third, the real content of the page begins at the bottom of the screen,
with an overly large heading "C-like Syntax". Really?? The primary
selling point of D is that it has C-like syntax? Wow. Not to mention,
the text that follows is cut off halfway at the bottom mid-paragraph
because the red bar and the gray splash screen has occupied almost all
of the prime real estate on the screen, so there's not enough room for
even a single paragraph of real content, but it has to spill to the next
screenful.

Which brings me to the next point: the page is WAY TOO LONG.  Worse yet,
its already overly-long length is further exacerbated by the
gratuitously huge title font sizes. Too much space is wasted on titles
and section headings for no good reason. And there are too many sections
on the page. Nobody is going to read past the first 2 screenfuls, which,
due to the wanton waste of screen space in the first screenful, has not
enough space for meaningful content.

When you have so much content you wish people to read, the first order
of business should be to provide easy navigation so that people can
*get* to the content in the first place. But, AFAICT, there is no way to
jump between those overly-long sections past the first screenful. So
basically, nobody is going to read that stuff. Unfortunately, that
includes important information about dub, the Dconfs, TDPL, the various
compilers, etc.. The only thing that's gonna impress people is the
overly huge title and the 3 slogans that, as far as they can tell, are
unsubstantiated (since the substantiation is too far down the page for
them to care to read). They will have no idea about the Dconfs, TDPL,
what compilers are available, etc.. I.e., things that are actually
pertinent to *programmers*, who are our target audience. Or are we
targeting marketing people as our primary audience now, and wish to
impress them how sleek our website design is?

IMO, things like (1) code examples, (2) language features, (3) language
and standard library docs, (4) compilers, (5) IDE support, are what
programmers care about. These things therefore should be front and
center. Programmers don't really care about the name of the language --
unless you first convince them they should, by showing them the
preceding pieces of information first. The overly prominent download
link is misplaced, because before you present pertinent info to the
programmer, why would he want to download your language in the first
place? Why should he care for *your* language above the hundreds and
thousands of others out there? The download link should be somewhere on
the first page, in an easy-to-find place, for when he decides "OK this
looks interesting, now where can I download it and give it a try?". But
it shouldn't be front and center.  Instead, what should be front and
center is the stuff that's pertinent to the programmers (i.e., our
target audience).  The code. The language features. The nice syntax.
Why they should care about this language. Good navigation is essential
here, because he may not be convinced by the first glance, and may
decide to look at the tutorials or docs first. Those links should be in
a prominent place so that he can find them easily. And it should be
simple (i.e. one click) to navigate between any given tutorial page, any
documentation page, and the download page (for when he has seen enough
to decide he wants to give it a try). It should be easy to tell at a
glance where on the website he is. A collapsible navigation bar helps a
lot here. And on each page, the most representative code examples or
features should be at the top, where it is visible without scrolling
down, 'cos most people won't bother to scroll down (unless you've given
them reasons compelling enough to catch their interest).

Otherwise they will lose interest and go back to watching YouTube or
something. At least I know that if this were what the D website looked
like back when I first found D, I would've closed the tab and moved on
instantly. My first reaction would have been: OK, so this is "THE D
PROGRAMMING LANGUAGE" (the font is so big!). Obviously the creators want
me to care, but why should I care? I don't see any code examples (and no
obvious links to some, either). No feature list (also no obvious links
to that). Only 3 unsubstantiated (AFAICT) slogans. Sounds like some
dreaded marketing person designed this ugly page. (Where are my fellow
programmers?!) And obviously they want me to download their language
(download link front and center). But since they haven't told me
anything interesting about their language, why should I? All they have
is this red and gray space. If their language is as vacuous as this
page, I don't think I'd be interested. *yawn* Yeah, I think I'm gonna go
back to YouTube and watch cute baby elephant videos instead.

Comparing this page with the current dlang.org page, I think that the
current dlang.org page meets more of the above expectations than this
one. So I'd have to say that this design is a step back rather than
forward. (At least for me.)

> There are some spaces not filled.
> 
> Yes the font size needs a scale up.

Please, no. The fonts are WAY TOO BIG already.

> About the layout (Vertical Wall Text), I think they became popular
> because the mobile, you know those 7" or 8" size screens, then you can
> read the site like an ebook or maybe because the technical side, like
> partial loading.
[...]

This is why I have said before, and I say again, that for mobile devices
you need a different kind of layout. You cannot use that kind of layout
for a PC browser. It simply doesn't translate.

T

-- 
If you want to solve a problem, you need to address its root cause, not
just its symptoms. Otherwise it's like treating cancer with Tylenol...