20 May

The Front-End Redesign Process

The redesign for this platform had a few very specific requirements, and a clear goal. Here's how I identified and attempted to meet those goals…

“No F***ing Workarounds”

Rule number 1 for rebuilding the front-end of this platform was that we're not living with anything sub-standard. If something wasn't working quite right re-do it correctly. As a result I scrapped all of the old CSS in favour of a complete re-write.

“HTML structure that makes it easy to reuse and combine elements”

Another key to this development was to make the markup make sense. It may not be perfect SMACSS, but the classes and functions are predictable, and require minimal markup to realize new features while still retaining a crisp and polished look without too much "style bleed" from more generic class names. (e.g. .half for grid sizing, .button for buttons).

This also

“The code should at least 'work' without Javascript”

This was a bit of an interesting case. Given DuckDuckGo's audience, it's easy to assume that many users prefer to browse with JavaScript turned off. This means that some thought had to go into user flow and functionality for both JS-enabled users as well as those without. "Sorry you need to turn JavaScript on" wasn't acceptable.

I took a page out of modernizr by using .no-js on the <html> element, and replacing it with .js. This allowed me to selectively hide and show required elements (like submit buttons on JS autosubmit forms) with .js-hide and .no-js-hide. It's a little detail, but required some extra thought.

Flexible and mobile friendly

This wasn't built "mobile-first" like you may have seen before, but it wasn't meant to still work on smaller screens. This was done by hand, just looking for break points and adding media queries where necessary. Nothing fancy here. :)

Open Source and Accessible

We decided to eschew a CSS preprocessor to allow others to contribute and tweak without having to know how SASS or LESS or stylus works. This was actually pretty interesting because it forced me to really think about how classes are used, when to include parent selectors, and 'manually @extend' to keep the code maintainable as times goes on.

A Happy Medium?

I tried to find a good balance between having a rock-solid CSS platform and staying loose enough to make it easy for others to write in new features that look great. I'd really appreciate your input on how you think it all came out. There are probably a few bone-headed moves in there somewhere, but hopefully it's easy enough to understand that you'll be able to spot where it went wrong.

2 Tweet

This blog has been archived

Thank you for reading and contributing lively discussion to our blog! Read more posts about online privacy on our new blog at spreadprivacy.com.

I sometimes use emacs-w3m to browse the web and the good thing about the duckduckgo front-ent is it's simple design. So please don't change that and a working front-end without javascript is also neat! Thank you.

posted by <hidden> • 4 years and 7 months ago Link

Someone pointed out on twitter that I mixed ems and px on the translation overview page, so there's an issue when the font size is changed in the browser - oops. I'll be fixing that.

posted by sdougbrown • 4 years and 7 months ago Link