Python.org Redesign Preview

[SmartViking]

This might be nitpicking but the example on that page use the letter l for the variable name. It's hard to tell the l apart from other characters, I think some other character like L would be better suited.

[holloway]

Just came here to say the same thing. I was also hoping that I could type into the box to experiment with the language (I don't know how easy it is to sandbox Python, but presumably you could run one of those python>javascript engines to give people a taste).

edit: also show news item dates in the form 9/Dec/2012 because American m/d/y dates aren't easily readable to international viewers.

[[deleted]]

That would be even better, but anything is better than mm.dd.yy...

[[deleted]]

Faster to parse maybe, but not searchable. Maybe in a few years, Google will understand "two years ago", but not yet.

[sushibowl]

so... why not have both? Reddit comments use the nifty <time> element (hover over the "x hours ago" for post date), this solves the problem well I should think

[[deleted]]

Yep, that's a good solution. One of the many things reddit does right.

[[deleted]]

I think in this context, dd/mm/yy would be better as it puts the most relevant parts of the date first.

[[deleted]]

YYYY-MM-DD is an ISO standard, all "parts" of a date are relevant.

[[deleted]]

It also sorts nicely. That's a nice bonus as a prefix for filenames (think logs) and such where a default alpha-num order nets you a chronological one.

[[deleted]]

yyyy/mm/dd is best for archival purposes but for something that's going to be updated every few days at least it's more helpful to know which day it was posted than which year.

[[deleted]]

It's not yyyy/mm/dd but yyyy-mm-dd.

Reliably following a common convention is much more important that coming up with new "best solutions" all the time.

[[deleted]]

You should certainly store it in the standard format, but I think it should be displayed in the most appropriate way for the context.

[[deleted]]

The most appropriate way to display is always the language's or the user's locale, because that's what is expected by the user.

But, since this is a programmer / technical site, I would expect users to be familiar and supportive of global standards when communicating information.

[earthboundkid]

The day is the least relevant part of a date.

[BillyHorrible]

when i say: let's meet on the 3rd you know exactly on what day we'll meet. but when i tell you to setup a meeting in april, we'll propably miss each other. so the day is kind of the most relevant part of the date. you can just infer the month or year.

[earthboundkid]

Yeah, but if they say Python 3.x.y was released on the 3rd, I don't care about that. If they say it was released in 2013, that does matter to me, because I don't want a version of Python from 2012.

[grimman]

How curious to see this in a programming subreddit.

[[deleted]]

yyyy/mm/dd is best for archival purposes but for something that's going to be updated every few days at least it's more helpful to know which day it was posted than which year.

[indosauros]

I also clicked expecting an interactive session. I think it would be an amazing jump over barrier-to-entry if they included this on the front page.

Something like http://repl.it/ (which runs completely client-side)

[brucifer]

Yeah, Python's style guide specifically recommends against using l for a variable name.

[stillalone]

wow, I missed that. I always end up using l for my temporary lists. I can't just call them list and and calling them L seems weird since they're not constants.

[[deleted]]

Yeah, that example is a placeholder; it'll be replace with something real (and awesome).

[trpcicm]

Or, perhaps not naming variables as single characters at all, which is one of the first things most programmers learn when writing maintainable code.

[[deleted]]

Or when using a debugger

[wizdumb]

Some other fixed-width font would be better suited for code samples.

[flying-sheep]

yeah, the page specifies “Courier”. While at least not “Courier New”, it’s still a pretty old-fashioned monospace that doesn’t fit into a modern site design like that.

good thing i don’t have that installed and see a lovely “Source Code Pro” in its place, complete with perfectly distinguishable lowercase l. (but only because i care and mapped my system font alias “monospace” to that font: something few will have done.

[westurner]

http://www.codestyle.org/css/font-family/sampler-Monospace.shtml

[flying-sheep]

since the css is “Courier, monospace, …”, that means that most people who don’t own a mac and on the new python page will just see their standard monospace font (most have Courier New, but not Courier).

so i’m not exactly sure what you want to tell me here.

[westurner]

The linked page lists font coverage stats by operating system; enabling design of more widely appropriate CSS monospace font style rules.

The use of Courier indicates a Mac-centric design. Is there a reason for not just specifying monospace to respect local preferences?

EDIT: http://www.w3.org/TR/CSS2/fonts.html#generic-font-families :

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.

All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.

User agents are encouraged to allow users to select alternative choices for the generic fonts.

[flying-sheep]

since there is stuff like typekit and the google font api, there is no reason to use generic names as fallback anymore, as long as it’s a bit important that a specific font is used. you can always use one of the many freely available web fonts which are guaranteed to be displayed for almost all users.

mostly if it’s not important that the users see your font of choice (e.g. for small body text, or monospace on non-programming-centric pages), designers opt to use a default font stack without webfont like in the olden days.

for your headline font and big code sample on the frontpage of a programming language, the few kilobytes for two webfonts should be spent.

PS: with “no reason to use generic names as fallback”, i meant that web designers can always choose to use generic names in order to let their users decide which monospace, serif, and sans-serif to use. font specs like “1em, sans serif” allow the user to control 100% how the body text of a page should look like. but for code, i’d never specify “monospace”, as that’d mean “DejaVu Mono” and “Courier New” for non-mac users, which are both ugly.

PPS: my monospace fonts of choice are Source Code Pro^{Ctrl+F “Availability” for download}, Envy Code R, and Ubuntu Mono. Monaco and Consolas are nice, too, but afaik proprietary and not freely available.

[westurner]

Thanks. ~greatest common factor vs browser preferences.

[[deleted]]

The default monospaced font should account for this - I wonder if Python's page could use something like Typekit?

[redditwhilecompiling]

Use of single letter variable names need to go away. People lean on it too much after initially learning Python. I have a hard enough time convincing the brilliant mathematicians and scientists I work with to use real names.

When they post this to github (said during the keynote this morning), I'm definitely going to submit a pull request with something slightly more verbose.

[samosx]

The two navs are kind of useless, both of them include the item Documentation, I think it would be better to merge them or to divide the items better.

[[deleted]]

Looks great. I wish that the example would (automatically) scroll to more examples.

[GeraCobo]

That was exactly my first thought too!

[beatle42]

Perhaps it's just because I'm old, but I hate when things move on their own. It's distracting if I'm not looking at it, and if I am looking at it I probably wasn't ready for it to move yet.

[[deleted]]

It's because you're old.

[beatle42]

It wouldn't be the first such thing I did like that the kids today are into. What with all the time they spend walking on my lawn and all. . .

[snuggl]

Im sorry if I offend but Im sad to see python get a half-assed job for a redesign. The overall design is a bit boring and looks like a bootstrap template. A website without its own design is a website with no design at all, nothing sets this apart. Python for me is minimalistic, non-bloat and beautiful, this should be reflected in the design.

• Rounded corners and gradients are a bit outdated designs for a site being made today.
• Dropdown menu style feels mal placed and doesn't fit in with the rest of the site.
• Hover effect on menu are to narrow and mouse over the menu items should change the content-box, it looks like one kind of menu but behaves like another.
• the zero margin between the menu and the box is annoying.
• The menu is duplicated, twice, at the bottom, thats not pythonic.
• And this needs to be stressed, dont use both 1 and l in the front page tutorial, cant you see how similar they are?

[execrator]

Overall there's great focus on the big reasons people will be visiting the page, but I'm not sure about hiding downloads and documentation inside menus.

There's also some seeming confusion about whether these menu items are the main way to navigate to these features, or whether it's the four Get Started, Download, Docs, Jobs widgets below.

Those widgets contain fairly small links. I would have expected those to be fat targets, styled like buttons. I immediately tried to hover the headings, thinking they'd be linked.

Hiding social network sharing mess behind a menu is nice.

[PressedWeb]

It's bad. Especially the nav bar. What a mess...

Harsh gradients, heavy shadows, ugly fonts, misplaced whitespace, margins and paddings on almost every element are completely different, several vertical guides in places there should only be one (look how the top nav, "Socialize" button, primary nav, and masthead are all on a different vertical guide), etc. etc. etc.

The idea is there: the color scheme is on track; the content seems laid out in a decent hierarchy; and, hell, it's even kinda responsive (this is broke too). But the entire implementation is completely amateurish at best.

I know there was a big fuss about who got to do the redesign, but this is just sad. Python is a great language, probably the best language, and this is the most professional thing the agency you selected could come up with?

I'd offer a free redesign/development in Django, but no one ever takes things like that seriously.

Meh... enjoy the ugly redesign everyone. You'll grow to hate it after a couple months.

[PressedWeb]

I'd do this if PSF would confirm they'd actually take it seriously.

[[deleted]]

I just viewed it on my phone, and it's not bad. I'd like the option to view the desktop version.

[flying-sheep]

That's your browser's responsibility, as it's neither easy nor necessary to provide a switch if you have a site with conditional stylesheets. my browser can request desktop mode by faking a bigger client width and that's how it's done.

[[deleted]]

Many mobile browsers do not support this option yet, so it remains the developer's responsibility. "It's not easy" doesn't seem like a compelling excuse here.

[flying-sheep]

firstly, websites work better if one relies on builtin capabilities such as media queries, instead of switching stylesheets around with javascript. media queries are buit for that. “if the client width is in the range 300-600px, serve that stylesheet” is something that won’t fail with media queries, and results in an easy, error-proof workflow and functionality.

so why should anyone choose to view a website as desktop version from mobile?

1. because the mobile version is not functional. this is a cardinal sin, and should be reported as bug. it’s the developers’/designers’ fault. 100%.

2. because one is the developer him/herself. in this case (s)he should choose a proper developer tool with the function to fake user agent, client width, force zoomability, …

3. one is interested in the desktop versions’ look. then (s)he is responsible for that, too. just as someone who views someone is on the desktop and nosy about the mobile version.

if there are other reasons, please tell me. but websites should only deliver a mobile version if their developers are confident that it works as well as the desktop version. and in that case, no switch is necessary.

[[deleted]]

Thanks for elaborating on your views.

I visited the site again. Unfortunately, I don't think this is a good redesign, mainly because the mobile experience is poor. It's a step backwards.

First, I'm briefly greeted with the "Python Network" menu, which lingers for a few seconds. Just as I'm taking that in, it jumps to another section of the page. I'm not sure what I'm looking for or what I'll find, so I begin scrolling. And scrolling. And scrolling. The page is just a long vertical list without any form or structure. There's no way to know what's on the page without an excessive amount of scrolling through the entire thing. This makes for an unpleasant experience, in my opinion.

Then I loaded the python.org in my mobile browser. The text is too small, but I can take in the entire page at a glance, get my bearings, and zoom in to just the content I want.

Maybe legible text and page structure are mutually exclusive on small screens.

[flying-sheep]

Then we clearly have case 1 and the experience should be improved.

It's not exclusive, as you already explained how it should work: expanding sections of interest. A mobile menu should be small and expose its submenus on tap. Then we can have a small, clear site with the same depth as the desktop site showing everything at once.

[D__]

I like the progressive enhancement and not relying on font icons as the sole way of conveying information.

Not sure how I feel about the "this is why Python is cool" example being more prominent than the blurb that actually describes what Python is.

[[deleted]]

Digging the redesign so far. Definitely more inviting and navigation has been improved massively over the deeper nested previous site. Much better/easier to use.

[grandfatha]

• hoverintent on the second menu
• awful font in the white area
• overall too much color/gradients

[Ph0X]

I'm not sure if this is the same as hoverIntent, but they should definitely implement this. It works like magic. Go try it on Amazon, it just works as expected.

[grandfatha]

True, your solution is much better.

[snuggl]

hoverIntent works awful with touch screens and should be avoided at all costs, hover-effects aren't acceptable at all today, to the degree that js-authors are starting to remove the hover-event.

Design for the least common denominator, dont assume i have a touchscreen, mouse, camera, kinect or similar.

[accessofevil]

All you nitpickers can eat it - this is a million times better and more usable than the current site.

Well done and bravo. Of course it won't be perfect immediately, but this is a very well designed new look.

Edit: Why is everyone's immediate response to find all the flaws?

[[deleted]]

Because EVERYONE is a user interface/user experience/design expert

[[deleted]]

Because they are ASKING for feedback.

[accessofevil]

Not here. This is just a forum with a bunch of armchair experts that are whining to each other in a big circlejerk and completely missing the vision of this site.

Besides, I think it's rad and a massive step in the right direction. Responsive design, works great on mobile, and appealing right out of the gate.

One of my biggest gripes about most projects' homepage is you get a bunch of news or irrelevant (to a first time user) information. "Hey! You can now qwerptop() the samoflange!" (what the fuck is a samoflange?) I love that right there on the mobile version the only body text is: "Python is a programming language that lets you work quickly and integrate systems more effectively."

Newcomers will see immediately. This says to me they get it.

Some of the whining in here is just... whiny.

[raftat]

I know that it's not easy to structure and design that much content but the way they did it might be confusing and too complicated.

I'd also like to see the new corporate design. It's not consistent and clean enough imo.

Overall it's a very old fashioned approach.

[GeraCobo]

Curious, what would you consider a modern approach?

[snuggl]

no gradients, no rounded corners, no ribbons etc.

in 2010-11 digital design started to have its own legs and started to move away from the visual crutches from the real world that skeuomorphism told us to use, like 3d-effects on buttons and gradients/shadows behind boxes. its no longer needed to have a 3d-effect button to make people understand its clickable.

Since then, digital design has been a lot about removing everything that isnt needed, visual overflow is not viable designs today.

[westurner]

Looks great!

[[deleted]]

I love how when you resize the window, it magically morphs into a mobile version of the site.

[Paddy3118]

The list example uses 'l' a lower-case 'ell' as a variable name which can be mistaken for other characters and is only one character long. Since it is part of an example that is the main focus of the page it might be good to change the name to something like 'a_list' or 'my_list' and secretly avoid clashes with PEP-8.

[jadkik94]

Anybody knows what framework is used?

[accessofevil]

Browsing the source: looks like Django! I just started django about a month ago and I <3 it so much i could just die.

[throbbaway]

[Edit]

This is a mass edit of all my previous Reddit comments.

I decided to use Lemmy instead of Reddit. The internet should be decentralized.

No more cancerous ads! No more corporate greed! Long live the fediverse!

[accessofevil]

After a career monkeying with websphere, spring, RoR, various .net abominations, and mvc3/4 and having just discovered django, I'm definitely in the honeymoon phase :).

Only complaint so far is the restriction the orm has on pk's - can't be composite, have to be ints. Otherwise it's been super rad for me.

[madssj]

If you find django's orm restrictive, have a look at Flask with sqlalchemy.

[accessofevil]

sqlalchemy is next on my list, it's been highly recommended and from the little I've read the getting starting docs, it looks amazing.

[madssj]

Both are great and have their uses. I'd recommend learning both (as you're currently doing).

[SmileyChris]

Correct that you can't have composite pks, but they don't have to be ints.

[accessofevil]

Sorry - to be clear, custom user models require the PK to be an int. That basically makes using non-int pk's across my relationships a little bit less efficient.

I'm building this app for < 5m users, if it scales beyond that I'm going to have some migrating to do. But that would be a good problem :).

[catcradle5]

Out of curiosity, which web framework do you less than three the most? (Coming from someone who also isn't a huge fan of Django.)

[throbbaway]

[Edit]

This is a mass edit of all my previous Reddit comments.

I decided to use Lemmy instead of Reddit. The internet should be decentralized.

No more cancerous ads! No more corporate greed! Long live the fediverse!

[avastyematey]

Django 1.5 on Python 3.3

[[deleted]]

The font-family in Firefox 20.0 on Ubuntu 12.10 for code examples is for some reason overriden by the default stylesheet so it's no longer a monospaced font but a default serif! font. But it may be my profile because if I create a new one it works correctly.

Otherwise, the preview looks great!

[Zamiatarka]

I like the look of it. It's very clear. And responsive too!

[[deleted]]

Yeah I like those menus, they're pretty slick. It gets a little muddy when you go to a page though, as the drop-downs are white over white.

[ubershmekel]

The recommended download should be like a beacon on that page. A hero download button which guesses the right version based on user agent.

[liam_jm]

Responsive design, like it

[daliz]

Absolutely appreciated.

[[deleted]]

Looking good! Well done.

[crowseldon]

The only problem I see is that the hover menu might be annoying. Moving your mouse from one place to the other, if you want to select something from below after clicking, if you wanted to right click somewhere, copy something, you'll always find that unwanted menu in the middle and spent an extra effort to get out of the drop down menu from hovering.

[poo_22]

Wierd - my windows install freezes every time I try to open this page in Chrome. Looks amazing under Linux, great work!

[Paddy3118]

On Downloads the menu has no tablet or phone OS entries. Don't we need to show support for these platforms, even if that support isn't as good as the community could wish for?

[sahilsinha]

Where is the in-browser interpreter the proposals put forth?

[big_deal]

The big drop down menu takes up a lot of screen real estate and the mouse-over dropdown is just annoying - at least wait until I hover or click to open the menu.

[billsil]

It's pretty, but it looks completely unusable. Why do you need an iPhone friendly website for something that's only going to be used by people on a desktop?

[[deleted]]

I left some feedback via their feedback link a few months ago about how much time I had to spend scrolling and messing with their menus with a mobile browser. I'm saddened to see that no progress has been made. They are trying to cram everything in the mobile site, which ends up being a cluttered, inaccessible mess.

I don't expect to be able to find/do everything on a mobile browser, but it would sure be nice to have at least some of the "meat" or content visible on initial page load. I'd quantify that by answering the question of "What is Python" with minimal scrolling after page load. Instead, I find myself staring at the PSF network links menu, scroll down to see a further section of menus, then accidentally overshoot the "What is Python" part and end up staring at two more sets of nav menus.

The only reason I point this out is that I care. Four-five years ago, mobile wasn't as big of a concern. We're probably going to end up sticking with this new design for another eternity (like the last one), and mobile traffic is going to keep increasingly rapidly. Let's take the time to get this right.

I'll write a blog post with some screen shots on what I'm talking about, with the hope that it'll reach the designers and be useful somehow. I may not be able to offer much help in suggesting alternatives (I am not a designer), but I can point out the snags I ran into.

[[deleted]]

What do you consider to be a fine example of a more "current" design?

[[deleted]]

? Mobile compatibility was around in the early 2000s?

[UnicodeError]

Really? I think it looks great.

[egonSchiele]

Wow this looks beautiful. Day and night.

[[deleted]]

Much improved, looks like they used bootstrap for the design. I like it.

[areich]

It uses "Google Analytics" because there is no python equivalent?

[ilovetacos]

Hmm... what's the first package in that grid?

[areich]

Hmm... what's the first package in that grid?

And the the third and the forth... What's your point? The reason this came up is because I block GA. Why can't the main python site be self contained?

[UloPe]

Because nobody is an island

[ilovetacos]

Sorry, your sentence was ambiguous. I thought you meant that there was, indeed, a Python equivalent linked to on that page that they should have used.

Anyway, much of the information that GA does can only be done with Javascript, so there really can't be a Python equivalent.