Homepage! #16

krischer · 2016-08-29T13:41:14Z

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 · 2016-08-29T14:13:07Z

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 · 2016-08-29T14:13:53Z

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 · 2016-08-29T15:26:35Z

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 · 2016-08-29T16:18:59Z

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 · 2016-09-05T16:49:04Z

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 · 2016-09-06T10:04:48Z

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 · 2016-09-06T22:41:17Z

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 · 2016-09-06T22:44:47Z

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 · 2016-09-07T11:51:17Z

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 · 2016-09-07T12:00:37Z

I like the new, more minimal style way better. 👍

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.

👍 @trichter feel free to change under misc/docs/source.. but ~~coveralls~~ -> codecov

krischer · 2016-09-07T12:19:07Z

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 · 2016-09-07T12:27:04Z

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 · 2016-09-07T12:33:11Z

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 · 2016-09-07T12:56:18Z

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.

👍 @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 · 2016-09-07T13:10:16Z

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 · 2016-09-07T13:19:35Z

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 · 2016-09-07T15:29:02Z

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 · 2016-09-07T15:39:03Z

B

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

jwassermann · 2016-09-07T15:42:29Z

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 · 2016-09-07T15:44:04Z

I vote for Claudio's proposal as well !

MMesch · 2016-09-07T15:45:58Z

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

sbonaime · 2016-09-07T15:47:11Z

B with descriptive text

krischer · 2016-09-07T15:48:14Z

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 · 2016-09-07T15:49:58Z

C :) - but B is way better than A

claudiodsf · 2016-09-07T15:50:14Z

Yes, but the descriptive text should be shortened, IMHO

arkottke · 2016-09-07T17:08:55Z

I prefer B.

jkmacc-LANL · 2016-09-07T17:24:01Z

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 · 2016-09-07T21:14:36Z

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 · 2016-09-11T20:03:30Z

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 · 2016-09-12T10:31:43Z

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

krischer added 8 commits August 29, 2016 13:33

Removing unused pictures

48eb6f9

Protocol independent base.html

f754a5d

Reformatting base.css.

ff44d81

First proper version of the homepage

6c13cf4

Images for the homepage

c727700

Navbar no longer hides the gitter sidecar toolbar

2f978ab

More examples

678bd3f

Changing routes.

6e58285

krischer mentioned this pull request Aug 29, 2016

ObsPy Homepage obspy/obspy#1512

Closed

krischer added 4 commits August 29, 2016 16:26

Adding button to the github repo

7b931eb

Adding button to seismo-live

a1a1ec3

Adding news + twitter to header

82a72aa

Descriptions for the usage map

ce91cfd

krischer added 9 commits August 31, 2016 00:47

Modularized the home template

9bb6fda

code formatting

235f0f2

Fixing horizontal overflow

e35e179

Better responsive layout

d2bdeff

More layout tweaks

1056259

adding github feed

062bf2a

Layout tweaks

c3efbd8

Adding missing files

0d1b94f

Tweaking layout for responsivness.

739f37e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Homepage! #16

Homepage! #16

krischer commented Aug 29, 2016

jkmacc-LANL commented Aug 29, 2016

megies commented Aug 29, 2016

krischer commented Aug 29, 2016

jkmacc-LANL commented Aug 29, 2016

krischer commented Sep 5, 2016

barsch commented Sep 6, 2016 •

edited

Loading

krischer commented Sep 6, 2016

krischer commented Sep 6, 2016

trichter commented Sep 7, 2016

megies commented Sep 7, 2016

krischer commented Sep 7, 2016

megies commented Sep 7, 2016 •

edited

Loading

megies commented Sep 7, 2016 •

edited

Loading

trichter commented Sep 7, 2016 •

edited

Loading

megies commented Sep 7, 2016

krischer commented Sep 7, 2016

krischer commented Sep 7, 2016 •

edited by megies

Loading

claudiodsf commented Sep 7, 2016

jwassermann commented Sep 7, 2016

MMesch commented Sep 7, 2016

MMesch commented Sep 7, 2016

sbonaime commented Sep 7, 2016

krischer commented Sep 7, 2016

barsch commented Sep 7, 2016

claudiodsf commented Sep 7, 2016

arkottke commented Sep 7, 2016

jkmacc-LANL commented Sep 7, 2016 •

edited

Loading

megies commented Sep 7, 2016 •

edited

Loading

trichter commented Sep 11, 2016

krischer commented Sep 12, 2016

Homepage! #16

Are you sure you want to change the base?

Homepage! #16

Conversation

krischer commented Aug 29, 2016

jkmacc-LANL commented Aug 29, 2016

megies commented Aug 29, 2016

krischer commented Aug 29, 2016

jkmacc-LANL commented Aug 29, 2016

krischer commented Sep 5, 2016

barsch commented Sep 6, 2016 • edited Loading

krischer commented Sep 6, 2016

krischer commented Sep 6, 2016

trichter commented Sep 7, 2016

megies commented Sep 7, 2016

krischer commented Sep 7, 2016

megies commented Sep 7, 2016 • edited Loading

megies commented Sep 7, 2016 • edited Loading

trichter commented Sep 7, 2016 • edited Loading

megies commented Sep 7, 2016

krischer commented Sep 7, 2016

krischer commented Sep 7, 2016 • edited by megies Loading

claudiodsf commented Sep 7, 2016

jwassermann commented Sep 7, 2016

MMesch commented Sep 7, 2016

MMesch commented Sep 7, 2016

sbonaime commented Sep 7, 2016

krischer commented Sep 7, 2016

barsch commented Sep 7, 2016

claudiodsf commented Sep 7, 2016

arkottke commented Sep 7, 2016

jkmacc-LANL commented Sep 7, 2016 • edited Loading

megies commented Sep 7, 2016 • edited Loading

trichter commented Sep 11, 2016

krischer commented Sep 12, 2016

barsch commented Sep 6, 2016 •

edited

Loading

megies commented Sep 7, 2016 •

edited

Loading

megies commented Sep 7, 2016 •

edited

Loading

trichter commented Sep 7, 2016 •

edited

Loading

krischer commented Sep 7, 2016 •

edited by megies

Loading

jkmacc-LANL commented Sep 7, 2016 •

edited

Loading

megies commented Sep 7, 2016 •

edited

Loading