[IPython-dev] Website

[Brian Granger]

Thomas,

On Sun, Jun 12, 2011 at 4:01 PM, Thomas Kluyver <takowl at gmail.com> wrote:
> On 12 June 2011 23:18, Brian Granger <ellisonbg at gmail.com> wrote:
>>
>> - The navigation bar between the banner and the rest of the content is
>> not there.
>
> I don't think it would fit with what we're doing. Navigation links are on
> the right. Arguably the most important part of this site is the 'menu' of
> the various resources related to IPython - we can't cram that into a
> horizontal bar, and splitting the links up would make it less clear.

I agree that the main navigation area is the R panel, but visually I
think we need the division between the banner and content that the
horizontal bar provides.  This is a common design element seen in many
website.  The horizontal navigation area can include a reduced set of
links (for example, on fperez.org, he just has a "Home" link).

In terms of splitting up the links, I think there are some natural
divisions on links:

* Internal links to other places on the website.
* Links to the "community": lists, github, wiki, IRC
* Downloads.
* Links to the documentation.

I think it does make sense to put the internal links in the horizontal
navigation bar, but there could be something else in this horizontal
divider.

Currently, these different types of links are all grouped together in
the R panel, which creates a disorganized look.  Splitting the R panel
vertically and using visual elements to partition the different types
of links makes sense - not because that is what Sphinx does by
default, but because it organizes the material in a way that helps
users.

>>
>> - In the right panel, the nice colored boxes that divide the content
>> vertically are also gone.
>> - The vertical colored regions to the L and R of the content are gone.
>>  These nicely frame the content.
>
> These are style choices embedded in the theme we're using, called 'agogo'.
> It's easy enough to change each if you want to, but I'm not sure that they'd
> particularly improve the appearance.
>
> For reasons previously mentioned, I *don't* want this to look like other
> Sphinx sites. We're using Sphinx here as a tool to separate content (the rst
> files) from the layout, not to produce a documentation site. As long as the
> layout works technically and aesthetically, I don't want to change it to be
> more like the default Sphinx output. I'm quite happy to accept criticism on
> the layout, but please don't start with an expectation of the standard
> Sphinx layout.

This is what I meant to communicate: I don't think the current layout
works technically and aesthetically.  I am not particularly attached
to the Sphinx layout specifically.  The particular things the current
design is missing are:

* A horizontal divider between the banner and main content area.  I
don't particularly care that this has navigation links, but visually,
we need something to divide these areas.
* The width of the content needs to be made smaller than the browser
Window to frame the content.  Using an alternate color in the R and L
page margines is one option (what Sphinx does), but we could simply
leave it as white space.  With todays wide screen monitors, content
looks awkward if it spans the entire width of the Window - like
reading a book without margins.
* We need to use a single font for the entire website, not counting
the one used for the banner.  Mixing serif and sans-serif fonts
creates a look that is visually disjoint.
* The R panel needs to have vertical regions that are visually
separated that allow us to group different categories of links
together (internal, community, docs, downloads).  I don't care that we
use the same visual treatment that Sphinx does, but we need some
consistent way of organizing this content visually and logically.

I don't feel like these things will make the website look more like
Sphinx as these are techniques used by almost all well designed
websites out there.  My desire to revert back to the default Sphinx
layout is merely because it gives us a starting place that already has
these elements in place and then we can tweak them to make it look as
non-Sphinx-like as we want.

As a simple example, here is my website:

http://www.brianegranger.com/

It is is a WordPress site that uses a well-known commercial theme.
Note that it has all of these basic elements I am talking about, but
looks nothing like a Sphinx site.  Many more examples of these design
elements can be found on the web.

There are obviously other layout patterns we could use:

* L panel instead of R.
* Both L and R panels (we probably don't have enough material for 2 panels)
* Multiple columns of main content (I don't think our content is well
suited to this.).
* Put an image carousel below the banner for browsing screenshots.

>> 1.  First address the content.  This would include getting the
>> navigation elements to point to our pages etc.
>
> I think all the links are already correct - please let me know if not.
>
>> 2.  Then come up with a custom color scheme.  There are a number of
>> online tools for helping pick color schemes.
>
> I spent some time trying this (using Adobe Kuler), but eventually I decided
> to leave it to someone with more artistic talent - possibly someone paid to
> do it. That said, I don't think the colour scheme in agogo (grey, blue,
> orange) is too ugly.

I may have some time to give this a shot later today.

Cheers,

Brian

> Thanks,
> Thomas
>



-- 
Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger at calpoly.edu and ellisonbg at gmail.com