DDG Search Field Look

in DuckDuckGo Forum • 1 year ago

I just wanted to share a userstyle I have made which changes the search field on DDG.

It's not much, but it's still enhances the overall look of the page.
Works in most popular browsers, but not IE (not even with IE7Pro because IE doesn't support certain selectors and a lot of elements have no id or class).

Replies(62)

yegg13

Re: DDG Userstyle

1 year ago

Awesome. What would it take to make it work on IE? I just did that inline stuff on the homepage to not have to grab a css file for it, but at this point it is somewhat irrelevant since you need one for every other page. So I can make everything have an ID if that works.

Also, what are your thoughts on changing the DuckDuckGo font on the bottom of the logo to Futura or another similar font? Just wondering as several people have wrote in suggesting that and one person suggested that particular font.

Comment

Gu3miles

Re: DDG Userstyle

1 year ago

I like Futura. Or maybe something like Mr. Eaves (like Mrs. Eaves except its a sans serif). I came up with a few new logos. The font and spacing of the font are wrong. Just experimenting with the green. Just used helvetica.

MrMagical

Re: DDG Userstyle

1 year ago

IDs for different elements would make it a lot easier to write selectors.
If I use a snippet of javascript to temporarily insert IDs in IE, I get this:

As you can see, the rounded corners are missing because there's no support for border-radius.

If you want to use this as the real site style and not an installable userstyle, replacing old styling rules would be easy. Migrating from inline styling to a separate stylesheet would also be trivial if some IDs were added. (Rounded corners can either be simulated with images/javascript or removed completely to give consistency between all browsers.)

As for the DDG logo font, Futura Medium would look nice. It would match the boldness of the duck icon while having a sort of futuristic/retro feel.
Gu3miles suggests Mr Eaves, which has a lovely lowercase 'u' character with a tail' which adds character to the logo.
It's a really though choice because the font is a very important part of the branding when you're on the web.

I'll try playing around a bit and see if I can come up with font and logo ideas.

Gu3miles

Re: DDG Userstyle

1 year ago

I would also suggest using Mr. Eaves Modern, instead of Mr. Eaves Sans. Both would work. I personally like Mr. Eaves Modern more, its more helvetica-y and less old timey than Mr. Eaves Sans, but both could be good.

http://www.myfonts.com/fonts/emigre/mr-eaves-modern/

Comment

Guest

Re: DDG Userstyle

1 year ago

I just redid the homepage with ids and updated the style.css on github. Let me know if I missed anything that would make your life easier.

I would like to go with the new button. I think it draws attention to the go aspect and looks more like a button. It also uses the green well.

I'm fine with the rounded corners not working on IE.

Comment

Guest

Re: DDG Userstyle

1 year ago

Lovely. I just changed the selectors a bit to match the IDs and now it works perfectly.

The search field on the homepage became 15 pixels wider because it now uses the same style as the one on the results page, but I'm fine with that.

yegg13

Re: DDG Userstyle

1 year ago

I was just experimenting with the wider search field, but now in the morning I could see it perhaps being too wide. Thoughts?

MrMagical

Re: DDG Userstyle

1 year ago

(Guest above yegg13's reply is me)

Yeah, it looks a bit too wide compared to the logo. Around 200% of the logo width + 50% of the search field height would look nice. (200*2+38/2=417px)

As for the logo, Mr. Eaves Modern looks very... regular and not exciting.
Mr. Eaves has has a nice 'tail' on the 'u'. It makes me think of the letter 'Q' when placed next to the 'D' in 'Duck'. 'Quck' -> 'Quack'/'Quick'

Futura is, as I said, a quite modernistic font which would fit in great together with the duck icon. It feels more modern than Mr. Eaves, but doesn't look like a regular font, like Mr. Eaves Modern. Futura is also a font I already have.

I have been experimenting with some different layouts, colours and styles.
The text 'Go' would benefit from slightly lighter colour:

Other than that, I'm pleased with the current design.

...and here's an idea for promotional material I came up with while experimenting (totally unrelated):

yegg13

Re: DDG Userstyle

1 year ago

I'm having a bit of trouble integrating the userstyle into the homepage correctly. See: http://thor.duckduckgo.com/.

What am I doing wrong?

It's probably a good idea to separate the internal and homepage search boxes and make the widths a bit different.

MrMagical

Re: DDG Userstyle

1 year ago

Just float the button to the right (Add float: right; to #sb).

To separate the internal and homepage search boxes, all you have to do is add #t in front of selectors for the homepage and #c in front of selectors for internal pages.

Also, I wouldn't recommend having the button image embedded into the stylesheet (Compatibility, etc.).
Here it is for easy saving:

Guest

Re: DDG Userstyle

1 year ago

Awesome. I guess I just missed that float line :)

I've been wondering about the embedded images but haven't looked into compatibility issues. Looking it up now...guess it is another IE problem. Go figure...

#t & #c duh! Thx.

I find the promotional material interesting, but not sure of its use. You mean to put like on a header or something for a brochure, or did you have specific text/images in mind to place around it?

Guest

Re: DDG Userstyle

1 year ago

I actually don't have Futura. Is there an easy way to get it or embed it in that particular file?

MrMagical

Re: DDG Userstyle

1 year ago

Font embedding should work for Illustrator 9 or higher (Any CS- version).
Would you like me to add the font to all logo files and upload to github?

Edit: Oops. Seems like it doesn't work. It's possible to turn the text into shapes and then save it, though.

The alternative would be sending over the font file.

Guest

Re: DDG Userstyle

1 year ago

Nm then. I'll see if I have the font somewhere. I have CS2 btw.

Guest

Re: DDG Userstyle

1 year ago

Just one thing: DON'T remove the rounded corners. Otherwise, you will look like kind of microsoft styled page. If somebody surfs with IE, it's ok if they don't see the rounded corners, but on the other browsers, please keep the rounded corners!

Comment

yegg13

Re: DDG Userstyle

1 year ago

It's live! Thx again for making this--it really improves the look & feel of the site. I just tweeted and made a facebook status about it as well, referencing http://duckduckgo.com/?t=mrmagical

Comment

yegg13

Re: DDG Userstyle

1 year ago

Getting complaints that the button appears below the search box on Max OSX with latest FireFox. Anyone seeing this? I want to fix it but I'm not able to reproduce (don't have a Mac).

yegg13

Re: DDG Userstyle

1 year ago

Going to find someone with OSX and fix that. Also looks slightly weird on the iPad. The rounded corners on the right side are visible for some reason.

yegg13

Re: DDG Userstyle

1 year ago

OSX issue may be some weird caching thing as it seems to be going away.

Guest

Re: DDG Userstyle

1 year ago

If I load DDG in BrowserLab,as FF 3.0 or 3.6 on OSX, it looks fine.

Border radius is a bit different depending on browser. Use these to prevent browsers from misinterpreting things:

For #sx:

moz-border-radius-topleft: 3px;
moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;

For #sb:

moz-border-radius-topright: 3px;
moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;

The silly browsers haven't all made up their mind about these things, and WebKit doesn't let you specify radius for different corners in the same property. There's not a way around this yet.

yegg13

Re: DDG Userstyle

1 year ago

Not sure what this is fixing (?), but I added it anyway it is now live.

MrMagical

Ang: DDG Userstyle

1 year ago

Add height: 41px; to #sxw and remove the padding-bottom.
The padding doesn't seem to work correctly because of the floats, but this isn't needed when things have a fixed height.

Edit:

It's lovely when IE breaks for some unknown reason.
Apparently, IE has to add a second border to the button (with the same colour as background-color).

Possible Solutions:
1. Move the border to a span wrapping the button.
2. Recolour the border by changing the background-color property to something like #8CCE6E (Making it look like a feature).
3. Use a picture type input element instead.

Comment

yegg13

Ang: DDG Userstyle

1 year ago

What is the height fixing, or is it just general clean up? I added it but didn't notice any changes on iPad. I added the background-color for IE and it seems to look pretty nice. I can dynamically add styles to the iPad if there was anything to fix it. Otherwise, it can just be a known bug.

Guest

Ang: DDG Userstyle

1 year ago

If I remove the height of #sxw, the div c because the elements inside are floated. Also, the bottom padding is still there, adding an extra 1px to the height and messing up the fake shadow.

I don't know exactly how it looks on the iPad, so it's hard for me to suggest any fixes.
I would assume it's using some special version of Safari and there's no problem on the desktop version.

eet_fuk

Ang: DDG Userstyle

1 year ago

Just my 2 cents :
Adding this line to the html head (Dean Edwards' IE library):

solves 99% of IE rendering problems, including support of advanced CSS selectors, and styling of HTML5 tags, and removes the need for CSS hacks.

It adds an extra request to fetch the library, but only for IE users, and hey if they are still using IE, they obviously don't care about performance...

yegg13

Ang: DDG Userstyle

1 year ago

Thx for the suggestion. I'm really trying to stay away from extra calls like that, especially to third parties. So far I've been able to fix things with little hacks here and there, and that seems fine as long as it is doable!

yegg13

Re: DDG Userstyle

1 year ago

FYI -- getting reports from some IE users that the search button appears below. I fixed this by adding one more pixel to the sxw container, though this does create a small space.

Comment

MrMagical

Re: DDG Userstyle

1 year ago

Some earlier versions of IE have problems with the box model, but I don't see it at all in my tests. :/
I actually tested with IE6 to 9 on a version without the extra space, yet there were no visible problems.
(Is this below IE6? Because then a browser specific style sheet is probably required.)

Perhaps it's a DPI setting issue. In that case, the only real solution would be making things more fluid.
I'll work on this and see what I come up with, because it should solve the problem with the button below the search field.

yegg13

Re: DDG Userstyle

1 year ago

It is a particular version of IE8--I can send screen shot and version if desired. I couldn't reproduce it either. My thought was that an earlier version of IE8 had a bug and this person's computer is locked down because of work.

I've also gotten reports on certain versions of Firefox, but have also been unable to reproduce myself.

MrMagical

Re: DDG Userstyle

1 year ago

It's not the DPI resolution...

IE8 with 120 DPI (About 125% of normal DPI, using a version of the page without the extra space in #sxw):

It does stretch things, but the layout is still the same. There's not much one can do about the streching without affecting people with a regular DPI resolution and Windows does this to almost everything on the screen (it's very ugly).

I'm completely unable to reproduce the bugs until there's more information (screenshots are fine).

If the button displays below the input field, my only guess would be that the browser either doesn't have or ignores the correct width of one or more elements. If this is the case, I would think the problem is caused by either caching of a previous style or font settings.

yegg13

Re: DDG Userstyle

1 year ago

Really wish I could reproduce it myself! I could ask about any particular settings if that would help. Here's the screenshots:

MrMagical

Re: DDG Userstyle

1 year ago

That's really weird. The button appears to fit, yet it's placed below.

Adding this snippet of css and then taking a screenshot would let me know exactly how much space is used by the elements:

#sxw{outline:1px dotted yellow !important;border: 1px solid black !important;}#sx{outline:1px dashed lime !important;}#sb{outline:1px dotted magenta !important;

(The elevated importance avoids some conflicts.)
Don't forget to remove the extra space on #sxw when testing!

yegg13

Re: DDG Userstyle

1 year ago

It is weird. I actually had him on the phone and was changing stuff in real time, so I'm pretty sure it isn't a caching issue.

If I added 1px to sxw or took one away from sx it stopped the problem. Does that help, or should I get the screenshot?

MrMagical

Re: DDG Userstyle

1 year ago

I'm pretty much wandering around in the dark with a vague idea of what I'm looking for.
I've been reading about issues with IE8, but haven't found anything related.

Basically, the only thing I can do is prepare ways to test things in order to rule them out. :/
Either #sx or #sb is using too much space and I don't know which one. Getting some outlines would at least tell me which element is being naughty.

The alternative would be preparing tests for almost anything.
It does suck when I can't reproduce the bug and test solutions myself.

I'll be setting up a simple front page mirror and creating different test cases (To save you the work)...

yegg13

Re: DDG Userstyle

1 year ago

Understood. I'll get a new screenshot.

yegg13

Re: DDG Userstyle

1 year ago

He should be taking the screen shot tomorrow. Did I apply this right? http://tmbg.duckduckgo.com/index2.html

MrMagical

Re: DDG Userstyle

1 year ago

That looks correct. Now, if there's something expanding the element outside the border, it'll show up on the outlines.

yegg13

Re: DDG Userstyle

1 year ago

Got it!

MrMagical

Re: DDG Userstyle

1 year ago

That's... impossible. The button has all the space it needs, yet it decides to jump off the cliff.

I have the exact same version of IE8 on my Windows XP machine but it doesn't exhibit the problem.
I've tweaked every little setting I could find. I can't replicate the behaviour.

It's just guesswork now.

Here is a modified version of the homepage which targets some possible bugs. I would like to know if it has the issue or not.

yegg13

Re: DDG Userstyle

1 year ago

OK, more data for you :). This may actually help. I'm going to copy and paste his email.

When I open the link it is still there…however, I was trying to think of any special settings I’ve modified. The only one that I could remember is the ‘hold Ctrl and use the mouse wheel’ to zoom in/out. I went to the link you’ve just sent and initially saw the issue:

But then, if I zoom in/out it toggles between being resolved:

And not:

Hopefully this might lead to the sol’n.

MrMagical

Re: DDG Userstyle

1 year ago

That's it! The browser is set to 95% zoom and miscalculates dimensions.
(It's even visible in the screenshots. How could I miss that...)

If you want the homepage to zoom without breaking, either keeping the extra space in #sxw or making it expand as the content grows would be neccesary.

yegg13

Re: DDG Userstyle

1 year ago

Ugh :). I just researched this zoom thing a lot and there is no easy way to detect (absent using flash)!

So this is what I did--I think it works pretty well. I re-positioned the extra space so it happens on the right of the button and not in the middle of the two elements. I increased the shadow color a bit (to EEE) so it is less visible on the right. Thoughts?

Guest

Re: DDG Userstyle

1 year ago

Setting #sfh to display: table; and then removing the width from both #sfh and #sxw makes the whole thing expand only when neccessary in everything except in IE7 and below (does not support display: table;).

How about just setting the width for IE7 and below by using a conditional comment or server side solution and allowing the rest to set the width automatically?

Example of a conditional comment:

<!--[if lte IE 7]><style type="text/css">#sxw {width: 418px;}</style><![endif]-->

MrMagical

Ang: DDG Userstyle

1 year ago

For the logo font, Tw Cen (20th Century) is a nice alternative to Futura. I believe it's more likely to be already avaliable on the system. It's shorter and slightly heavier than Futura, but I don't think that's an issue because I would choose a heavier version of Futura anyway.

Tw Cen as the logo font and a less sharp colour for the word 'Go':

Comment

yegg13

Ang: DDG Userstyle

1 year ago

I need to keep staring at it for a while and get some other opinions. Maybe we can open up a new thread and point people to it? My initial reaction is I like the look of the font better in its curvature perhaps most noticeable in the D. It has a whimsy to it that matches the duck, especially the beak. But the boldness seems to potentially take too much focus away from the duck.

MrMagical

Ang: DDG Userstyle

1 year ago

It is a bit too bold. This is much better:

(Same font, border removed in Illustrator)

yegg13

Ang: DDG Userstyle

1 year ago

Like that a lot better.

MrMagical

Ang: DDG Userstyle

1 year ago

--> New topic <--

yegg13

Re: DDG Userstyle

1 year ago

Random feedback:

http://twitter.com/zagy/statuses/22183965440

http://www.facebook.com/duckduckgo#!/duckduckgo?v=wall&story_fbid=140766595959360&ref=mf

Comment

MrMagical

Re: DDG Userstyle

1 year ago

Removing the border and background properties for #sxw would remove the fake shadow.
Then #sxw wouldn't need a padding and its height could be set to 40px.

Also, the current shadow is just wrong because the height of #sxw should be 40px anyway, not 41px.

yegg13

Re: DDG Userstyle

1 year ago

Whoops I messed that up :). This should be fixed now.

MrMagical

Ang: DDG Site Style

1 year ago

I've began to look at the very complicated result pages (so much stuff, some of which I don't know why it's there) and the first thing which would be easy to do is change how the links on the side look.

Side links:
Right now, the container is fixed and doesn't move when you scroll but there's no limiter to the rest of the page or an attachment to the edge. This gives the links a weird feel (like a ufo hovering above the page).

I would suggest making the container visible as a sidebar or corner and the links up a bit (links to mockups). It's quite subtle but make the links feel less like aliens.

Icons:
I would like to see some new icons for the side links and maybe even for the zero-click info and multiple meanings message. There are sets which would look better than the current and I could possibly make a few.

It would also be a lot better to insert the icons as background images for the links instead of having a separate element.

Minor unrelated problems:

The icon for zero-click info is the old favicon.

Search for something like this and use the keyboard to select and then unselect the zero-click info. It still looks selected. (Also, the Enter key does nothing with the info selected)

(Off Topic: I haven't been able to do a whole lot during the last few days because Google disabled my email account for an unknown reason)

Comment

yegg13

Ang: DDG Site Style

1 year ago

We should move this to a new topic too.

Have you figured out yet why Google shut down your account? That's crazy (and of course super super annoying). Wow, that would piss me off to no end.

> old favicon

This will be fixed shortly. I just crawled a new 6 million of them and thinking of also moving to an api that serves them and keeping mine as backup.

> select/unselect zero-click.

I'm having trouble reproducing this. What browser/OS?

> sidebar

Love these ideas. However, I'm currently exploring high level the purpose/functionality/usefulness of the side bar, and so want to wait on messing with it a lot until I figure that out.

Maybe the new thread should be first on if it should exist at all, and if it should, what should be on there.

That said, completely agree on the hanging feel and the background just didn't occur to me. What do you mean about the zero-click info & multiple meanings message? Do you mean somehow putting those into the sidebar?

As for icons, interested in what sets you like more. Also, why do you think it is better to insert as background images (just wondering)?

MrMagical

Ang: DDG Site Style

1 year ago

Oh wow, my Google account is back. I still don't know why it was disabled (I tried contacting support, but recieved no answer). The page I got while it was disabled just said "suspicious activity".

The zero-click selection bug happens for me in both IE8 and FF3.6 on WinXP and Win7.

Detailed instructions:
1. Open https://duckduckgo.com/?q=1+2
2. Press up key (selects zero-click info, makes its background green)
3. Press down key (unselects zero-click info)

Result: Zero-click info still has a green background, but shouldn't

Anyway, I'm not sure what you want to move to a new topic. I'll make one regarding result page look and feel, get some ideas in there and collect feedback.

To quickly comment on the rest of your response:

> putting 0-click and multiple meanings in the sidebar

I think they are fine where they are. Forget it, I realised I was wrong.

> why insert as background images

More clean, just one element (making the link underline when the icon is hovered). The icon would still be on the side, of course. But maybe it's easier for you to keep them separate.

eet_fuk

Ang: DDG Site Style

1 year ago

Oh wow, my Google account is back. I still don't know why it was disabled (I tried contacting support, but recieved no answer). The page I got while it was disabled just said "suspicious activity".

You are helping Duck Duck Go, that is why Google thinks you are suspicious. ;)

Guest

Ang: DDG Site Style

1 year ago

@yegg Problem with not unselecting zero click on Safari 5 Mac OS 10.6.4. You have to manually type the plus in the search bar between 1 and 2 to achieve this bug!

Guest