Python.org Redesign Preview
preview.python.org
preview.python.org
1 >>> l = ['spam', 'ham', 314, 23]
Something like http://repl.it/languages/Python :)
I got as far as:
import os
for filename in os.walk('/'):
print(filename)
What are the dangers of dropping a python interpreter on a site, what are good guidelines to secure it?
The shadow on the logo is too dark and looks wierd. Also, I'd put a call to action, like "Download" or "Learn" in a more visible format (maybe on a button) in a larger font, above all the "blocks", along with the content of the Statistics block.
The PSF block at the bottom looks out of place. (I really love the way you show additional information when I hover on the links in the second navbar. I'm not sure how that extends to touch based devices, but you could probably present the PSF block in a similar way.)
The "Socialize" link looks out of place too and should probably be on the upper navbar. (The other "actions" in that block are related to the site itself - search and text size)
I agree with the others that that code sample should actually be an editor with the ability to actually execute code.
BTW, please do try the nav on mobile devices, especially tablets. They work there, too, and I think our designers did something especially slick :)
Minor points:
- When in "mobile mode", the search box changes colour so it doesn't look like a text input any more. I'm not sure if that's a good idea.
- I agree with the others on this one again: the gradients and the shadows are a bit excessive. Maybe you could try a "flat" shadow instead? (ie. a shadow with a 0 blur radius)
- I really loved the old docs search mechanism where the site had a local index of keywords and could search without hitting the server. I hope you don't lose that.
- I'm not sure what the concept of the two navigation bars is. What is the top bar for, and what's the second bar for? I see "Documentation" in two places. Logically speaking, I'd expect the upper bar to be the primary navigation, and the lower bar to be the secondary navigation, but clearly, that isn't the case.
Anyway, is this open source as of now? Where can I contribute?
(The higher-rez ones are from Chrome running on my Galaxy Note; the lower-rez ones are from the stock browser on a Galaxy Ace)
My feedback for what it's worth:
- The home page is very "blue". Personally I think this page will look better if the blue gradient in the background was a light gray gradient instead.
- Search icon needs to be lowered.
- Hovering the secondary menu is not a pleasant experience. I think this is mainly because of the white info panel in the drop down switch from right to left. It makes it look cluttered and disorienting. Another problem here is that there is a menu with drop downs in between the primary nav and the content. Moving your mouse between primary nav and content will bring up a secondary nav drop down which in my opinion is very irritating.
- I think how the menu is aligned under Education (overlaps the content) is the best way.
I had similar thoughts about the white part of the drop-down menu changing sides.
FWIW, I think it's a really significant improvement over the current homepage, which always feels like a list of mostly-irrelevant news links to me. This one has a code snippet which is a great idea (though I hope the content of the snippet improves!), and big links to downloads and docs.
- I often refer non-programmers to python.org when they ask what that "Python" thing I do all day is. If this is a significant portion of your traffic, I might move the "Python is a programming language..." bit higher up the page.
- "Integrate systems more effectively" doesn't mean much to me, but if the landing page is a tool for devs to convince their managers to let them use the language, could make sense.
- I don't love calling the list 'l' given that many beginners wind up here. It can look like a "1" to those not used to monospace, and is confusing. Come to think of it, the whole beginning example would be very obtuse to anyone not familiar with programming at all: one of the things I love about Python is that it's easy to introduce to a total beginner, with something like "it's like learning French or Italian, not a bunch of random symbols".
- I personally love the way you do the main dropdowns.
- The topbar is nice too, but a bit less noticeable to me than maybe it should be. I think some tooltip-provided explanation (or similar) of PyPi, saying "Package Index", might help those new to Python but aware of what a package index is. This might be unnecessary though.
- The location (and naming) of the "Socialize" link doesn't make much sense to me. What does it have to do with Search? Also unsure why there's the font +/- link there; do you often hear that browser settings are insufficient?
I'm exited to see what I think is a terrific update to the beloved Python homepage. Best of luck!
If you look at the site with a text browser like lynx then this is even more important. Lots of menus and other things that assume you know what's going on, then finally on the next page break or two an explanation. Make that all but topmost.
(And y'all ought to view your sites with a text browser once in awhile, it will give you a rough idea of the experience of people using browsers for visual and other impairments.)
The fact that they are even previewing the website with dummy content tells me that they are focusing on the wrong things.
There's also a bit of information overload going on in the menus. I don't know. I'm not entirely a fan of the bold colors. I personally would have just liked an iteration of the current site, rather than a full revamp.
Something along the lines of Github's clean white background and minimalistic layout would, I think, suit a Python site very well.
I could just be me fearing change, though..
Granted, it is a bit easier to make a succinct website for something like Git rather than the entire Python project.
* Too much of this page is spent on navigation and link lists. It's the landing page, but we don't need to link to every single sub-section of the site.
* I don't think having a whole sub-menu on the bottom of the page with various download architectures is a good idea. A single "Downloads" link would be much better, breaking out by distro on the downloads page.
* Ditto for a lot of the other stuff in the bottom menus. I understand we're trying to make things discoverable, but feel that you went too far in the other direction (information overload).
* The mobile style is pretty disappointing. There is a ton of wasted vertical space, and the vast majority of my scrolling is spent getting through all of the various menu levels. This could be trimmed down a ton, there's just too much. Strip out all of the ancillary links, stick to the core content, and make it easy to digest.
I make these comments because I genuinely care. I want to see the new python.org blow our socks off.
1) The line numbers and spacings on the list example are confusing: The examples come from an interactive session, but the presence of line numbers suggest that it's a script. Also the spacing is inconsistent with what you'd get if you typed that into the standard python shell.
2) I think the drop down menus from the top of the page are much bigger and obtrusive than they need to be. When I opened the page, my mouse went over the "Success Stories" tab, and I saw a big white "Google" logo in the middle of the page. The eye is naturally drawn to it, and I spent a second or two like, "What is that doing there?" until I figured it out.
3) Maybe I would have a slideshow or "arrow-buttons" with more python examples than just the list. Basic usage of a list doesn't sell python as hard as, say, list comprehensions, arbitrarily large integers, and/or manipulating sets.
Some constructive critisism and ideas:
(1) I'm pretty sure that the text in the secondary navbar is not correctly centered vertically. It's off by a couple of pixels.
(2) It would be nice if the code area in the frontpage had a chunky "Try Python now" button pointing to an online python editor, with a step-by-step teaser tutorial.
(3) The frontpage lacks a button to quickly download the latest version on my platform. I had to look twice to find the 'Download' column.
(4) The search box is a weak point. The magnifying glass is not aligned properly. The grey dropdowns feel a bit disconnected from the rest of the design. You're going for shadows and emboss, but that's completely flat.
(5) The position of the 'Socialize' dropdown is a bit random. It could be placed as another tab in the secondary navbar or in the footer.
Great stuff.
Clearly, not everyone thought so. What did you not like about the docs?
usually tells you.
Another suggestion would be to split tutorials/examples apart from object references. For example, take a peek at the Python Decimal module docs: http://docs.python.org/2/library/decimal.html#module-decimal
All the information is there, but it isn't organized very well. There's a tutorial, overview of Decimal and its methods (with tutorials mixed within), and various "notes" sections. It's all mixed together, and confusing for a new user.
Personally, I'm more of a fan of this type of structure:
1. API documentation. No how-to's.
2. "Guides" and How-To's
Guides/How-To's including examples, introductions to use an object, spell out caveats, etc... This should get wordy when needed.
Both could have links to one another. For experienced coders, you'll mostly just use #1 (which fits great in a navigable list). For newbies, #2 will teach you how to do things.
$0.02
The lack of a Javadoc / Qt ref / cppreference (I love that wiki) module / function list makes just searching for something you know exists and just need the method name a pain in the butt.
Contrast the first Google result for "python dictionary" [1] and "java hashmap" [2]. The Python result tells you about every data structure and does so in a story, the Java one gives you what you want and little more.
[1] : http://docs.python.org/2/tutorial/datastructures.html
[2] : http://docs.oracle.com/javase/6/docs/api/java/util/HashMap.h...
Overall, I think you're right that the Python docs aren't optimal for quick fire referencing. I think we tend to use some form of introspection to examine methods, function signatures and docstrings. For instance, I keep IPython open and use tab completion and the 'foo?' syntax to find the details I need.
The thing that irks me about the docs now it that they're almost too in depth. Sometimes, when I just need to get a quick refresher of what function X does, it takes me nearly 45 seconds to just find the thing. Ctrl + F doesn't help because the docs are so verbose that searching for one thing usually results in 20+ hits or references on the page.
Just a little table like the Java docs, and I'd be pleased as punch!
At that point I need to move my cursor back to "About", drag down, and then right.
Putting a time delay on there, or that Javascript that Amazon uses for theirs that detects mouse movement would be fantastic.
From now on, the snake will be able to compete head to head with a certain pink rock (in terms of attractive homepages) :)
It would probably not be as "beautiful" compared to Non-serif fonts but it would certainl help my eyes (and I'm sure for others as well - especially if we spend hours in front of a computer screen).
I'd suggest: Put the main navigation bar (about, downloads, docs, etc) to the top and move the current top bar with links to the side, somewhere else.
Also Downloads and Docs is mentioned many times on that page, i'd suggest to leave the link to the Docs in the main bar and get rid of the other ones.
And at the bottom this whole page (takes up my whole screen) contains all this links again.
It's probably that way to decide which design way to go.. The blue navigation bar also is right in the middle of the screen, that's disturbing. The common way to display navigation is at the top or at the left side not right in the middle, where the content belongs (imo).
Anyway, keep going, you're doing a great job! :)
- Search bar has to be well integrated with the primary navigation.
- Alignment of the search text field & the search button.
- Search text field has sharp edges while the button is slightly bigger and has rounded edges.
- I think increase/decrease your text size is redundant. Your target audience is programmers or people who want to learn programming. They already know how to zoom in/zoom out.
- Instead of showing an image of how to create an array. Wouldn't it be awesome, if we create a simple interactive shell where-in you show how to manipulate strings (reverse, capitalize etc. It will get user's who are new to Python excited about the language and its simplicity.
How can I contribute to the project?
As for contributing: we'll be releasing the code when we launch the site for real (i.e. actually replace python.org), and we'll certainly be taking pull requests. I'll also have some contributor guidlines written up by that point.
We've got some serious work to do first, though :)
A usability annoyance: when I hover over "Blog", and then move my mouse to click the first blog article's headline, the menu changes to "success stories".
At [1] they discuss how Amazon fixed that (HN discussion at [2]).
[1] http://bjk5.com/post/44698559168/breaking-down-amazons-mega-... [2] https://news.ycombinator.com/item?id=5330998
Loving the redesign - clean, functional and pretty as well.
This is especially important for accommodating users with conditions like ADHD.
More importantly, it is properly responsive, well laid out, touchscreen friendly, and a flexible enough design that it should be easy to add sections later. Everything a modern site should be.
Also the «socialize» dropdown on that bar doesn't look that good.
I am a bit torn on this though: http://i.imgur.com/QBEWQQc.png
It does not look simple enough with all the >>> characters.
If you are not familiar with the python shell, I am not sure that you will be able to understand which lines are commands and which lines are results. There must be a better way to do this.
More code examples would also be a welcome change IMHO.
Personal taste, I prefer my sites with a fixed vertical navigation pane to the side when you get ultra-widescreen.
EDIT: Made a screenshot to illustrate the problem: https://www.dropbox.com/s/orzn4f2utoxh4st/Screen-Shot-2013-0...
For example, this is a fly-out on the main page: http://cl.ly/image/0w2t0N0S3714
And this one is one the docs sub-site: http://cl.ly/image/1Z2S0p3O1e15
Having a snippet of code presented to you is nice.
However, I wonder whether it'd be possible to provide a more hands-on feel, possibly through something like <http://repl.it/languages/Python>. That way, one can interact with the snippet of code.
If it is just a separator it should not increase the font. Else it should have proper label.
http://docs.python.org/2/library/string.html http://docs.python.org/2/library/stdtypes.html
I know the difference, but that's very confusing and annoying. It might be easier to have all string methods in one page, but separate them in terms of built-in standard library vs. the module ones.
Then I came across: http://docs.python.org/release/2.5.2/lib/string-methods.html which is a cleaner version.
Another thing I found in string a few days ago: the difference between capitalize() and title() on std string is not clarified at all in the docs.
It would be interesting to do A/B testing with different code snippets.
The margin to "About" in the mainnav looks a bit odd. Is it required?
The contents of the mainnav is oddly placed. I feel it can be organized from left to right in terms of usability to users. Like Downloads and Documentation first rest should follow in the respective orders.
The latest news can be placed somewhere in the first page itself for better visibility. Users has to scroll down now to see it.
Curious about the heading font used, FluxRegular.woff: does anybody know the source of the font, and the licensing? :)
If you had been hellbanned yourself, then you would see your own comments, but other users wouldn't see them unless they enabled "showdead" in their HN settings. And non-logged-in visitors would never see them. So viewing an HN page you've commented on from an incognito window is a good way to check that.
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-... (discussed on HN several times previously)
Just saying.
Sometimes just about everything is wrong with a given design, and saying so is the best way to express this.
In this case, it's pretty obvious that the nav buttons are uselessly large, the empty padding on either end is wasteful and annoying, the location mid-way down the page isn't practical, the color makes it blend in with the page's background, the drop down submenus make it awkward to find and get to the information being sought, the submenus are cluttered, and so forth.
The location is poor. The appearance is poor. The usability is poor. Using "horrible in almost every way" to describe it is very accurate and precise. It's just not the kind of thing that works after some minor tweaks; it all needs to be thrown away and redone using a different approach.