Homepage!

[krischer]

Yay!

Here is a first attempt at a proper homepage/landing page for ObsPy. Let me know what you think.

Static version: https://www.geophysik.uni-muenchen.de/~krischer/random/

@barsch: This will require some changes to the routing on the server side, e.g. with this change / loads the homepage, all tests reporter things have been moved to /tests. I guess the simplest way is just to make tests.obspy.org proxy to obspy.org/tests and obspy.org to the homepage. I think all olds links to tests.obspy.org/x/y should then still work.

[jkmacc-LANL]

Wow, Lion, this is a fantastic improvement over the current landing page! Great work.

Three comments:

• Return visitors may be looking for the most up-to-date sections of the page (i.e. the Twitter and News sections), but they're all the way at the bottom. Maybe put them as sidebars at the top, something akin to what SQLAlchemy does?
• The favicon isn't recognizable. Maybe simplify it?
• As a contributor, I'd like faster access to the main repo. Maybe put a "Repository" button next to current "Wiki" and "Current Documentation" buttons at the top?

[megies]

Looks good! :-)

A couple of minor things I'd change:

• have some short descriptive text below the "worldwide community" viridis_white heatmap, having picture stand alone looks a bit empty
• add something like "you can also try it out without installation on seismo-live.org"? Maybe to installation section?
• maybe have another button "code" (linking to github) next to "wiki" and "documentation"

[krischer]

I implemented most of the suggestions :-) Latest version: https://www.geophysik.uni-muenchen.de/~krischer/random/

The favicon isn't recognizable. Maybe simplify it?

Once online it will just inherit the favicon from http://tests.obspy.org - the current one is just the one from our department. The same goes for the navigation bar - it will be the same as for the test reporter.

It can definitely use a thorough proof reading so if someone has some free time at hand - go ahead :-)

[jkmacc-LANL]

Thanks for trying out the suggestions, Lion. This does bring recent activity upwards, but it also gives it an odd asymmetry at the top. Here's an idea that makes the top more symmetrical, and moves some of the buttons into a sidebar. Feel free to ignore, of course.

Obspy graphic, text description (short, full span)
Slideshow (slightly taller, full span)
Curious? 3 steps to get started Install............................ Learn............................ Use............................
	(sidebars: thin, tall) Current Version Buttons Social Acknowledge
	News
	Twitter
Expanded News, no Twitter

[krischer]

Sorry for the delay - this is honestly fairly low priority ;-)

So I "modularized" the website and I'm not sure if thats good practice but it makes testing new layouts much much simpler. I think I've settled into something nice. It is now much more responsive and should look fairly good no matter the screen size.

On large screens it now shows quick news and twitter on the right hand side in a fairly long column - this IMHO alleviates the previously felt asymmetry. On large screens is also shows a github feed on the bottom instead of the twitter feed to now show it twice.

On smaller screens the sidebar is hidden and the github feed on the bottom is replaced with a twitter feed.

Also note the nice green chat icon in the bottom right :-)

Latest version: Latest version: https://www.geophysik.uni-muenchen.de/~krischer/random/

What do you guys think?

The github stuff is rate-limited to 60 requests per IP per hour but that should not be an issue outside of development.

[barsch]

IMHO to overcrowded, personally I like clean designs with the idea "less is more" - to much stuff is going on - also no fan of fancy background images and the yellowish colors ... anyway I'm probably just picky ;)

From the technical side: I would remove IE9 support, and there are some JS files which could be loaded with async and defer keywords. Also there is no </img> tag - see the W3C validator for more stuff: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.geophysik.uni-muenchen.de%2F~krischer%2Frandom%2F

I spare you the CSS check as its probably not your fault ;)

[krischer]

After I got quite a number of comments regarding the site being to "busy" and overloaded I tried for something completely new. Its not done yet (only the first three "segements") but the style should be clear.

https://www.geophysik.uni-muenchen.de/~krischer/random/new_random/

What do you think? This is really only a landing page - people go there and then go to another page with more information.

Or should we rather stick to the old style?

[krischer]

I'm quite happy to iterate on this for a while as I guess we will not change this for a while once its done ;-)

Also please critique away - I take no pride in my design "skills" - I just want something that looks good in the end.

[trichter]

Great new landing page! I like the second design more. Maybe put the links (code, wiki, ...) again directly under the logo for fast access to the most frequent pages without scrolling? It's cool to have a unique bar at the top for docs, tests and the landing page. Btw, Developer Resources -> Python/C Coverage links are broken. I'd suggest to completely remove the Code analysis section and move coveralls to CI section.

[megies]

I like the new, more minimal style way better. :+1:

For me the example-scroll-bar is changing height when going through the five different pages.. should be fixed IMHO.

I'd suggest to completely remove the Code analysis section and move coveralls to CI section.

:+1: @trichter feel free to change under misc/docs/source.. but coveralls -> codecov

[krischer]

Alright :-) So I'll work a bit more on the new design!

Maybe put the links (code, wiki, ...) again directly under the logo for fast access to the most frequent pages without scrolling?

Is that really necessary - they are also in the title bar in the top - and I cannot find a place to put them where it looks as nice as now.

For me the example-scroll-bar is changing height when going through the five different pages.. should be fixed IMHO.

Yea I have to fix the height once the rest of the style is finalized.

[megies]

Maybe put the links (code, wiki, ...) again directly under the logo for fast access to the most frequent pages without scrolling?

Is that really necessary - they are also in the title bar in the top - and I cannot find a place to put them where it looks as nice as now.

I like the "logo" only first impression. I think scrolling down to the big happy buttons to github etc. is totally fine.

Maybe the "Code" button should read "Code / Issues"..

[megies]

Here's an alternative (and slightly geeky) take on the new design (the plain purplish gradient is a bit boring and not very sexy ;-)): https://www.geophysik.uni-muenchen.de/~megies/www_obsrise/

[trichter]

Is that really necessary - they are also in the title bar in the top - and I cannot find a place to put them where it looks as nice as now.

No not really, was just an idea, because the buttons are more intuitive than the navbar.

:+1: @trichter feel free to change under misc/docs/source.. but coveralls -> codecov

Mhm, to be honest I don't know how to do that. I always thought the navbar-local.html lays on some server.

Here's an alternative (and slightly geeky) take on the new design: https://www.geophysik.uni-muenchen.de/~megies/www_obsrise/

Wow, really cool, I love it - but as you mention could be too geeky. (And the picture cannot change its aspect ratio -> will not look nice on mobile devices)

[megies]

Mhm, to be honest I don't know how to do that. I always thought the navbar-local.html lays on some server.

Oh.. you mean the navbar.. thought you're talking about the API docs..

Another alternative.. with pythonic surface rupture.. ;-)

[krischer]

I personally kind of prefer the gradient but I'm totally fine with having a poll at the end to choose a background picture/color :-) A cool seismo picture would also be really nice!

Independent of this I think the logo really should really be the non-stylized one as we have been using that everywhere and should probably continue to use one "brand". Also the white drop shadow is probably not necessary by just making the background picture less opaque/add a transparent white overlay.

[krischer]

Alright - the new layout now works (still some issues) more or less with small screens and I also worked quite a lot on the rest of the layout. Before proceeding any further, I'll make a quick poll which layout we should continue working on. Ignore things like the color scheme/background picture and so on for now - just choose which general layout you like more as a landing page for ObsPy. Either comment here or tell me elsewhere - I'll update this comment.

Options:

A: https://www.geophysik.uni-muenchen.de/~krischer/random/

B: https://www.geophysik.uni-muenchen.de/~krischer/random/new_random/

Results:

A: (2) @ThomasLecocq, @MMesch

B: (9) @krischer, @trichter, @megies, @claudiodsf, @jwassermann, @bonaime, @barsch, @arkottke, @jkmacc-LANL

[claudiodsf]

B

But with the descriptive text already visible below the logo, without need to scroll.

[jwassermann]

Yeah, as claudio I think B is it but scrolling down the first page to reach the buttons for further actions is a bit awkward.

Jo

[MMesch]

I vote for Claudio's proposal as well !

[MMesch]

Can't you put the logo on page 2 (= the one you reach by clicking on the arrow) and make it page 1?

[sbonaime]

B with descriptive text

[krischer]

Can't you put the logo on page 2 (= the one you reach by clicking on the arrow) and make it page 1?

Yea that might turn out well. I'll try once a couple more people voted.

[barsch]

C :) - but B is way better than A

[claudiodsf]

Yes, but the descriptive text should be shortened, IMHO

[arkottke]

I prefer B.

[jkmacc-LANL]

These are both thoughtful designs! I'd vote to continue to work on "B".

• The top toolbar is awesome.
• Maybe reduce the number of clicks/scrolls to get to commonly accessed information. We should be able to say, "get the latest version at obspy.org," or, "get the latest news and updates at obspy.org," but both of these are not easy to do at the moment. If it's not easy, people won't do it, which means the site isn't being used. python.org and sqlalchemy.org do a good job with this.

EDIT: here's another example. http://www.earthcube.org/

[megies]

EDIT: here's another example. http://www.earthcube.org/

the three boxes for "announcements" "twitter" "events" have a nice clear, consistent layout

B leads 9:2

[trichter]

Here is another suggestion for the layout:

Navbar

ObsPy Logo and Title

Slider (1st slide: Descriptive text which is on 2nd page in variant B,
            all other slides,
            last slide: Try it Live, optional)

Curious?                                                          chat button
     |
    v (end of 1st page without scrolling on large screens)

The three cool "Get Started" boxes.

News boxes (optional, I agree with @barsch, that these are a bit busy,
                        but I have no strong opinion about that)

The idea is to put the important stuff again on one page, remove the big buttons and put these links somewhere else. (For example, gallery is already accessible via navbar and slider.)

Navbar could look like this:

* Code/Issues
* Documentation
  - Wiki
  - API Documentation
  - API Documentation (dev version) (optional)
  Getting Started (could also be a separate point before Documentation)
  - Try it Live (optional or behind gallery)
  - Installation
  - Tutorial
  - Gallery
* Connect
  - Join Chat
  Announcements Mailing List
  ...
  Users Mailing List
  ...
  - Tweets by @obspy
* Developer Resources
  - How to Contribute
  - Coding Style Guide
  - All Releases
  Continuous Integration
  - Test Reports
  - Travis CI
  - AppVeyor
  - Test Coverage

[krischer]

Thanks for all the suggestions. It B then with quite some changes. I'll try to find some time tonight to implement them :-)