A redesign of the Django websites

https://www.djangoproject.com/weblog/2014/dec/15/announcing-django-website-redesign/

by olasitarska • 12 years ago

258 96 12 years ago

djangoproject.com

chhantyal3• 12 years ago

Looking great. Thanks for great Christmas gift :D

On the other hand, I feel like I am going to miss old design - is there archive somewhere?

mcagl• 12 years ago

# apt-get install python-django-doc

$ x-www-browser /usr/share/doc/python-django-doc/html/index.html

chhantyal3• 12 years ago

It's on ReadTheDocs :D django.readthedocs.org/en/latest/

sailfast2• 12 years ago

This is a lot more readable and approachable - nice work! Cool to see that the designers managed to stick to the green template while making it work for a bunch of different content types. Thanks for the update!

glofish2• 12 years ago

I think it has too much empty space ...

sailfast2• 12 years ago

Yeah, there's a lot of whitespace - I'm not the biggest fan of all that padding on the blog / archive dates template, or the L-R padding on the home page, but I hear "more space" is all the rage :)

Mostly I noticed the difference in the Docs. The elements are called out more explicitly and it's easier to find things on the docs, which have considerably less whitespace: https://docs.djangoproject.com/en/1.7/intro/tutorial01/

lgp171188• 12 years ago

Yes, even I thought the same. I hate that the home page has a lot of content that I have to scroll down to view (at 1440x900 resolution).

http://ibin.co/1kret3oW7caZ illustrates whitespace wastage in the blog

Edit: Added an illustration

arthursilva• 12 years ago

The old design was/is awesome, I'll miss it.

I didn't fell comfortable with the new one, looks too bright to my eyes.

martinvol• 12 years ago

I totally agree.

rossk• 12 years ago

Nice work!

glofish2• 12 years ago

I like the new design but IMHO there was nothing wrong with the old one.

There was something very warm and reassuring about the old colors and I feel there was more information filled.

scrollaway• 12 years ago

Good job on the redesign. I think it looks great.

How about getting rid of Trac now? There's really no worse issue tracker...

wldcordeiro3• 12 years ago

I think that there's too much historical data in Trac for them to ditch it. Migrating would be difficult.

fletchowns2• 12 years ago

We migrated from trac to jira a couple years ago and it actually wasn't that bad. So glad that we did. Trac works fine for little tiny projects (although these days I would just use github or bitbucket issue tracking). Jira really shines on larger projects though.

bbx• 12 years ago

For comparison: http://i.imgur.com/U2p3BEU.png

It's always difficult and probably unfair to express an opinion right after having seen the redesign.

As with any complete overhaul that keeps close to nothing from the previous version, it's very hard to improve the experience without losing any sense of identity. In this case, the Bootstrap vibe is quite prominent.

It does makes sense for the documentation, but the main page is less appealing. I'm not a developer, but the previous design actually got me intrigued by the framework and encouraged me to look deeper.

I guess a redesign was probably needed. I just hope it's a design they will iterate over.

nicksergeant• 12 years ago

They're not using Bootstrap.

wambotron• 12 years ago

Whether they are or not, it still looks like it. I think that's what he meant by "vibe."

trustyhank• 12 years ago

As someone who looks at the docs every day, I think the redesign is refreshing :D To each their own.

avolcano• 12 years ago

Funny how, even after a redesign, I can still recognize the layout of the docs after occasionally looking at them a few times a year :) https://docs.djangoproject.com/en/1.7/

fletchowns2• 12 years ago

This is an important point I think. People have been referring to these docs for years and got very comfortable with the layout. I'm glad they kept this part so similar.

iKenshu• 12 years ago

I like this redesign

po• 12 years ago

Is there a word for muscle memory but for your eyes?

After so many years it's going to take a while to get used to but first impression is that it looks nice and readable. Code snippets look much better.

JetSpiegel• 12 years ago

Is there a word for muscle memory but for your eyes?

Memory?

zlapper• 12 years ago

Visual memory, I guess. http://en.wikipedia.org/wiki/Visual_memory

_wdh• 12 years ago

The new design reminds me of mint ice cream. In a good way.

huxley• 12 years ago

I was actually browsing the docs when the change went through and did a triple take.

wldcordeiro3• 12 years ago

That must have been oddly disorienting.

andremendes2• 12 years ago

I liked, have only two criticisms: Content seems sparse, maybe due to line-height and/or font-size. I also get a "too much green" feeling in my eyes. The overall change was positive, imo.

hcarvalhoalves• 12 years ago

I zoom the page down to 75% to browse the docs, it gives the same spacing as the old layout.

andremendes2• 12 years ago

Good! This gives a much more comfortable visualization.

Igglyboo3• 12 years ago

I also get the "too much green" feeling, which is odd because the old website had far more green.

john2x• 12 years ago

Yeah, the font-size and line-height are a bit much.

wiesson• 12 years ago

Looks good! Maybe I should start a new Django Project again.

nullflow2• 12 years ago

OT:

I know that Django 1.6+ can be used with Python 3.4 but is Django 1.7.1 written in Python 2.7 or 3.4?

ubernostrum2• 12 years ago

Both.

It is possible, and not too difficult in fact, to write a single codebase that runs under both Python 2 and Python 3. Which is what Django has done. The same code runs the same under 2.7 or 3.3 or 3.4.

nullflow2• 12 years ago

Thanks for the reply.

Are there any guidelines or "best practices" for writing code for both 2.7 and 3.4?

shill• 12 years ago

I may just be noticing an old feature, but did the search feature on the prior site return source code in the results?

I think that is a great feature, but it's going to confuse beginners. The first three results for the query 'models' are links to source code.

Maybe the search results could be tagged with a type icon and name (Documentation, Tutorial, Source...) in addition to the document excerpt.

Igglyboo3• 12 years ago

I love it, I have a thing for pastels.

brokentone2• 12 years ago

It's amazing what a facelift can do to the perception of a project. There are some really great projects that look abandoned or the docs are really difficult to use that prohibit me from giving them a fair shake.

mhurron2• 12 years ago

It's amazing how many people measure a project based on the amount of time it spends redesigning the website to follow the trend-du-jour.

brokentone2• 12 years ago

Yep, that's exactly what I'm saying. It's not fair, but it is the case.

edraferi• 12 years ago

This isn't as crazy as it might seem - using a modern home page design proves that someone has been investing time in the project since that design became popular.

Using the "trend-du-jour" for a homepage quickly communicates to viewers that the project is alive & active. It's a much more accessible signal than mailing list or commit history (although those are clearer, more accurate signals of project health).

themoonbus• 12 years ago

No matter what web stack I end up using down the road, I will always have a special place in my heart for Django. It taught me the fundamentals of MVC in web app context, and in some ways got me a job that led to many good things in my life.

Redesign looks nice, the old site was beginning to look dated.

_nickwhite• 12 years ago

You could almost say that Django has become... unchained.

mattdeboard• 12 years ago

Not really, no

i_ride_bart• 12 years ago

Wow, I always love redesigns. But as another commentor says, I'm a bit worried how long it will take for my eye memory to adapt ...

wldcordeiro3• 12 years ago

Considering that the layout of the documentation hasn't changed in any significant way. Not long at all.

joseakle• 12 years ago

I'm colorblind and some links on the documentation https://docs.djangoproject.com/en/1.7/ don't look different enough from normal text. Mostly I'm having a hard time identifying links that aren't underlined.

mhurron2• 12 years ago

I'm not colour blind, but I had to look at them for a moment to see they were even different colours, man that's a subtle difference.

Are you Red/Green colour blind? Personally I would have picked a colour closer to the green used in other places of the site to highlight links, but I suddenly became curious as to whether or not that would be any better for you.

Not that I can do anything about it, I'm just really nosy about it since you mentioned it.

tomchristie• 12 years ago

I'm sure they'd appreciate any feedback & examples on accessibility issues. If you've got some time consider raising it on the issue tracker.

olasitarska4• 12 years ago

Thanks for the feedback, this is invaluable! We would love to hear more from you on our issue tracker: https://github.com/django/djangoproject.com/issues

anhtran• 12 years ago

I like new design, but I think it's quite bright.

Daviey2• 12 years ago

It must just be me, but it feels that the site is optimized for mobile browsing. There is very little content and my eyes have to move massively just to read the page. I actually prefer the old layout. :/

izolate• 12 years ago

Welcome to the world of "mobile-first" web design.

Daviey2• 12 years ago

Sure that makes sense for many (most?) websites.. but not for developer related sites.. Surely their primary audience is desktops?

publicfig4• 12 years ago

Documentation websites actually have some pretty good use-cases to being scalable to mobile, either because people will view documentation on a tablet or phone while developing, or due to people using smaller browser widths when developing to be able to display their IDE or terminal windows next to the documentation windows.

raverbashing• 12 years ago

Yeah, no.

Smaller browser widths I agree

But using a phone/tablet to navigate the docs? Might as well use notepad for coding too, since the objective is to suffer.

rogerhoward• 12 years ago

It seems there's a range of opinions on this - no surprise. I find myself frequently, though not exclusively, using my phone (current, iPhone 6+) or tablet for docs while I use my laptop for coding. I know others who do this too. It's all anecdotal, but I don't think of having good mobile support on a docs site as being an edge case.

Also, I work a lot in Django, and love the new site.

nightmiles• 12 years ago

This is a very interesting redesign, and it shocks me that they chose to do it. On the one hand, this update is beautiful with a tasteful front page and familiar-yet-fresh documentation pages. On the other hand, the old design was also fantastic.

Despite kicking around for just under 10 years, the old Django look never felt old, ugly, or clunky. It had a clean, thoughtful layout with good color contrast and an unmistakable Django identity. To me, it never gained the "cruft" that similarly-aged designs seem to take on. It always felt modern.

Loving the new design, but I would have never guessed that there were plans to ditch the old one.

heyts3• 12 years ago

Absolutely, the previous design tenure of 10 years is quite a feat. There are very few websites that can last this long without feeling old-fashioned.

quaunaut• 12 years ago

I'd personally disagree, if only because the actual text space columns were so thin that it made everything I was reading feel very, very busy. It took me weeks to get comfortable regularly going to their documentation instead of looking at SE, even though their documentation was very, very good.

roebk• 12 years ago

I love the new design, it encompasses many modern design patterns, it's clean, flat and all the elements have room to breath. My biggest issue with the redesign it that I and many others have huge difficultly reading black text on a white background. If anyone would like to find out more about visual stress then this link provides a quick, easy to digest overview http://www.crossboweducation.com/articles/visual-stress-symp....

I hope it's a problem they acknowledge and provide a solution in a future iteration. Until then, I'll have to install a browser extension to modify the background colour.

Igglyboo3• 12 years ago

I've never heard of this actually, I would have thought black on white was the best way to read text.

What would be a better choice? Would black on off-white be better?

TylerE• 12 years ago

Honestly on a backlutz screen, grey on navy is hard to beat. There's a reason all of those 80s mainframe apps looked like that. They did studies.

joshuacc• 12 years ago

While most printed materials are "black" on "white," when the range is compared to a light-emitting screen that's more like "dark gray" on "light gray." Looking at something with too much contrast for a long time can cause eyestrain.

heyts3• 12 years ago

I was in the middle of checking the docs, so that was a little odd, but I like it so far. It is different without being TOO different in terms of layout so the familiarity sticks.

It looks slightly blurry on Chrome for me, seems to have been tested primarily on Safari? Also, the redesign may be a bit bland, but overall it's a pretty good job. Now if someone could apply those design cues to Django-Admin that would be awesome!

talideon• 12 years ago

There are two issues I have with the redesign: the use of Palatino as the body typeface, and the dark green body text, which I think would've been better as a dark grey.

Other than that and a few spacing issues, it's good!

andrewingram2• 12 years ago

Overall I like it, but it could really do with a max-width set for the content. I use my browser full screen on a 24" monitor and some of the line lengths are far in excess of readable.

andrevvmc2• 12 years ago

The max-width has been deployed, thanks for the feedback.

andrewingram2• 12 years ago

Ahhh that's much better. Amazing responsiveness!

humpt2• 12 years ago

a bit offtopic but why is you username highlighted in green?

ch8230• 12 years ago

It looks nice! I do agree with others who are saying that a page with docs shouldn't have this much white space as it makes it harder to read.

amarsahinovic• 12 years ago

You should really fix the selection color. I usually select text while reading it, and I can barely see the selection here. Otherwise, good job!

olasitarska4• 12 years ago

This has been fixed by andrevvm and will be deployed soon: https://github.com/django/djangoproject.com/pull/192. Thanks for feedback!

biscotti• 12 years ago

My take aways: too much white space, the highlight colour when you select text within code wells is really hard to distinguish & as others have mentioned black on white is hard on the eyes.

olasitarska4• 12 years ago

The highlight color has been fixed and will be deployed soon. Thanks for feedback!

andrevvmc2• 12 years ago

The docs have been made a bit denser, thanks for the feedback guys!

publicfig4• 12 years ago

I really, overall, love the redesign. It's much cleaner, better organized and it's awesome to have better support for width based scaling. As someone who uses the Django documentation very often, I'm happy to see this redesign.

I must plea, though, that if anyone responsible is reading, it would be extraordinarily helpful if the green highlight color is set back to the system default, or at least a darker color. I have quite a bit of trouble following through blocks of text on a screen or reading black-ish colors on bright white backgrounds, and often use my highlighting tool to help me keep track of location and to distinguish the text from the background. The almost invisible green makes that very difficult for me.

olasitarska4• 12 years ago

Done! https://github.com/django/djangoproject.com/pull/192

Will be deployed soon :)

publicfig4• 12 years ago

Thanks for the update, looks quite a bit better!

heyts3• 12 years ago

One thing I haven't seen mentioned is the addition of an option to download the docs in .epub, which is great and previously was a pain point (at least for me).

robertlf• 12 years ago

I liked the old site better. This is clearly a case of, "If it ain't broke, don't fix it." The purpose of documentation is utility, not to look modern. It does nothing that I can see to improve the utility. In fact, all of the white space makes it harder to use. It would be nice if there were an older "theme" users could continue using.

jamesisaac• 12 years ago

Agreed. The site now... looks more like every other site. But why's that a good thing? Old design had a more unique personality -- new one looks very much like a Bootstrap deploy with tweaked colours.

chhantyal3• 12 years ago

If you miss old Docs UI, here it is on ReadTheDocs http://django.readthedocs.org/en/latest/ :)

imfletcher• 12 years ago

looks great - doc site is cleaner yet still very familiar. Everything else aside, I'd kill for better doc search - or just simply allowing () to search for functions. Trying to refresh my memory on how the .first() or .latest() method works, for example, requires browsing. no real way to search for it.

100982• 12 years ago

That font is terrible. Please bring back sans serif.

wenbert• 12 years ago

I actually find serif fonts easier to read for long texts. So I'm loving this one! ;)

100982• 12 years ago

Actually now that I think about it, it's not that the font itself is bad, it's the context in which it's used. It just looks weird on that website.

hysan• 12 years ago

First impressions:

- Increased whitespace makes it feel less informationally dense.

- The colors are a bit too light. As someone with sensitive eyes, it makes reading the docs for long periods of time harder. This is going to be tough to get used to.

- For whatever reason, my eyes keep skipping over the light green bar that's between the nav and the content. I didn't even see the download link on the getting started page until I took a second look at it. I wonder why this happens?

Overall, I'm not adverse to it. I like the clean look, but one reason why I liked the old site is because I could see all the information I'd want to know on the first page without scrolling. You can't get that here, and it makes me wonder how much information I'll miss out on over time.

incidence• 12 years ago

Overall I think it's good

Things I don't like:

* #6A0E0E is too dark for links, the color from hover effect would be much better (#BA2121).

* Front page right sidebar has too much links. I feel the latest news section should have "more priority". I often visit Django's website just to check whether there is a new release and blog post associated to it.

emmanueloga_• 12 years ago

Anecdotally both django and rails maintained the same aesthetics in their respective sites for more than nine years (rails still does).

https://web.archive.org/web/20051214180106/http://www.rubyon... https://web.archive.org/web/20050801014309/http://www.django...

A redesign of the Django websites

Related Stories