Upcoming site design changes

Question

A few weeks ago Canonical reached out to me about making some design changes on Ask Ubuntu to reflect the official Ubuntu site's new design guidelines. The goal is to keep all Ubuntu related sites(official or 3rd party) consistent.

Currently on http://www.ubuntu.com, Ask Ubuntu is linked in the top nav bar under "More->Ask." Once the design changes are completed it will be prominently featured in the top bar.

Here's a preview of the new design:

The biggest changes are in the header section. I moved "Ask Question" link to be part of the top nav bar. I Also removed the background images and widened the site content width by 20px.

The new design changes will go out early next week. The changes will take place both on the main site and Meta.

Answer 1

It looks great! the one thing that really bugs me, is the footer:

There is no background! And the dots are really annoying!

by adding some custom css to the footerwrap it looks a lot beter

.footerwrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #AAAAAA;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    width: 970px;
}

Answer 2

So, I just wanted to drop by and leave some feedback on the new topbar design.

First of all, thanks for the addition, it is quite handy however there is also something that's bugging me about it.

The bottom margin of the new topbar makes the entire design look out of place. My suggestion would be to remove the 22 pixels.

Here's a screenshot from the current setup,

and here is a screenshot but without the 22 pixels bottom margin,

Answer 3

To remove the dotted grid like effect on Ask Ubuntu, block http://cdn.sstatic.net/askubuntu/img/bg-site.png. You may have to flush your browser's cache to see the effect.

For the meta site, block http://cdn.sstatic.net/askubuntumeta/img/bg-site.png.

For example:

---

To minimize the space between the global menu and the main section, the following code is useful:

#custom-header {
display: block;
margin-bottom: 2px !important;
}

This code needs to go into a stylesheet. If one is using Firefox, this can be done by editing userContent.css which is located in ~/.mozilla/firefox/xxxx.default/chrome. If the folder chrome doesn't exist, just create it. Same for userContent.css. Both folder and filename are case-sensitive.

Then, in userContent.css, add the following using a plain text editor:

@namespace html url(http://www.w3.org/1999/xhtml);
@-moz-document domain(askubuntu.com) 
{ 
#custom-header {
display: block;
margin-bottom: 2px !important;
}
}

and save the file and exit. The value for margin-bottom determines the space between the global menu and the main section. The default (currently) is 22px. I've reduced it to 2px as an example.

Note: if one using the Stylish extension, one can use "Write new style ..." for askubuntu.com and paste just

#custom-header {
display: block;
margin-bottom: 2px !important;
}

between the existing curly brackets.

(Stylish works for Chrome/Chromium as well.)

---

To make code more visible, one can make the code font bold, darker, or use a background which may enhance contrast:

Consider something like this:

@namespace html url(w3.org/1999/xhtml);

@-moz-document domain(askubuntu.com)
{
code { 
      font-family: monospace !important; 
      color: black !important; 
      background-color: #999 !important; 
      font-weight: bold !important; }
}

The line with monospace makes sure code remains fixed and not proportional (which would mess up alignment);
The line with color determines the font color. It can be any html color you like; you can use hex code to get exactly the color you want by using a tool such as gcolor2 from the software center;
The line with background-color lets you enhance contrast by that route if you wish;
The line with font-weight makes text bold.

You can use one or all of the above.

Note that in ~/.mozilla/firefox/xxxx.default/chrome, the xxxx will differ from user to user.

Answer 4

It came live as I changed pages... great design.

Edit (after 24 hours)

It took me by surprise, and I still, after 24 hours go to the very top of the page to check is I have any comment alerts.

On the whole a much cleaner look

Thumbs Up * * * * *

Edit (after 2 weeks)

Still love the new design. I have had to go into the browser config files to change the code background/pre colour to one that I can see. but that's my only complaint

Still Thumbs Up * * * * *

Answer 5

I like the new design, but I have some observations:

• there is a problem with some special characters (see my name):

• the new background for code sample make that a code text to be difficult to distinguish towards the normal text:

Answer 6

Looks like the Add Comment button could do with some margin to separate it from the comment textarea.

Update:
This has now been fixed:

Answer 7

I prefer the header to be consistent with Stack Exchange than with Ubuntu, so I removed the Ubuntu header with Stylish.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("askubuntu.com") {
    div#custom-header {
        display:none !important;
    }
}

Answer 8

Should this logo given meta label? Like "Ask Ubuntu Meta" or "Meta Ask Ubuntu"?

Answer 9

New design is now live. Looking good.

Can we make the Ask Question button more distinguised. A possible way will be to use a mildly darker red background for it. I'm not a designer, there might be better ways for it.

Answer 10

I love the new layout but... (sorry there has to be a but). Now that Ask is so integrated into the Ubuntu site, is there now the danger that new users (especially) will consider it to be some kind of official Ubuntu tech support as opposed to the community driven Q & A it actually is.

If they were to have this false impression it could lead to situations where a user becomes more impatient when an answer is not immediately forthcoming or they fail to realise that an answer could conceivably be wrong.

I am aware that there is plenty of documentation that explains what Ask is, but many of the new users I have come across have clearly not taken the time to understand this. They just want an answer then never to be seen again!

Answer 11

Seems that button missed 'few' pixels to align...

Answer 12

The Tell me more button in non logged-in display of a question page seems to be a bit too big, that it overflows out of the containing div.

Update:
This has now been fixed:

Answer 13

Way too big for buttons...

Answer 14

Albit annoying...

Also in meta site.

Answer 15

No box-shadow in .container

before:

After:

Code

.container {
    .....
    box-shadow: 0 0 3px #aaa;
    ....
}

Answer 16

The background of the entire site looks distracting, plus there have been users complaining about the tearing of it. When I press SUPER-w, the background image, just annoys my eyes. Not a good look.

Screenshots

ONE

TWO

The entire code:

body {
    background: #f9f9f9 none repeat scroll 0 0;
}

.topbar {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}


#header {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}


#content {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}


#footer .footerwrap {
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.86);
}

Answer 17

Some of the visuals in the current design create a feeling of information overload for me. I'd make a few small changes to help direct readers' attention to the content. Here's the current version for comparison.

Answer 18

The stars that users can click to mark "Favorite" should be changed to Ubuntu's red circular symbol or this awesome symbol http://bazaar.launchpad.net/~devyncjohnson-d/misc-projects/trunk/view/head:/Symbols/Ubuntu_Shiny_Remix.png. The badges should also look like the Ubuntu symbol.

Answer 19

blockquote design change. IMHO, it definitely needs a new design:

blockquote design 1

code

blockquote {
    .....
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    .....
}

blockquote design 2

code

blockquote {
    .....
    border-left: 5px solid #CCCCCC;
    .....
}

I find it better for my eyes to focus, with the borders!

Answer 20

Seems annoying if didn't aligned...

Answer 21

Misaligned again...

Answer 22

code(pre) design:

code

pre {
    .....
    border: 1px solid #cccccc;
    .....
}

IMO: it reads better with the borders!