Adblock Plus and (a little) more

New adblockplus.org · 2013-01-10 16:31 by Felix Dahlke

As of now, the new adblockplus.org is finally online. These were some of our goals for the new website:

• More appealing, yet simple design
• Better navigation
• A decent mobile version
• Should work in any popular browser, including Internet Explorer 6
• Should work with JavaScript disabled
• A single landing page, not one for each platform

I believe we’ve managed all that, what do you think?

Read on if you’re interested in the technical side.

Unfortunately, the new site is not open source yet, but View Source should suffice if you want to see how things work – we don’t use any compilers or obfuscators. Once we’re done replacing the backend, we’ll open source everything.

Responsive

To get a mobile site that would be on par with the desktop site, we had two options:

• Build a separate mobile site and redirect mobile browsers to it
• Build a responsive website, that shows the desktop or mobile site based on the viewport size

We decided to take the responsive route. I was a bit skeptical about this at first, but it certainly worked out pretty well. We have some shared CSS files, some for the desktop version and some for the mobile version. Wasn’t nearly as tricky to work with as I had feared.

<link rel="stylesheet" href="/_override-static/global/global/css/main.css" class="cssfx"/>
<link rel="stylesheet" href="/_override-static/global/global/css/main-desktop.css" media="(min-width: 40.5em)" class="cssfx"/>
<link rel="stylesheet" href="/_override-static/global/global/css/main-mobile.css" media="screen and (max-width: 40.5em)"/>

To see the mobile site, simply make your browser window smaller.

HTML5 and Internet Explorer 6

Since we’re all pretty much into the latest web standard drafts, we first built a modern site using everything HTML5 and CSS3 has to offer.

To make that work in Internet Explorer 6, 7, 8 and 9, we used an army of polyfills:

<!--[if lt IE 7]>
  <script src="/_override-static/global/global/js/vendor/DD_belatedPNG.js"></script>
  <script>DD_belatedPNG.fix(".sprite");</script>
<![endif]-->
<!--[if lt IE 9]>
  <script src="/_override-static/global/global/js/vendor/html5shiv.js"></script>
  <script src="/_override-static/global/global/js/vendor/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 10]><script src="/_override-static/global/global/js/vendor/cssfx.min.js"></script><![endif]-->

This adds support for most new HTML5 elements, media queries, various CSS3 properties and even transparent PNGs for IE6. We had to fix a couple of things here and there, but all in all, it works impressively well. Thanks to this and BrowserStack for browser testing, I’ve never had as much fun (or well, as little pain) supporting a large number of browsers.

The result of all this is a nice, usable site that works fine on pretty much any popular browser and device out there – all with a single, mostly modern code base. We hope you like it!

Tags: website adblock plus

Comment [4]

1. DM · 2013-01-14 18:17 · #

   lookin nice, the features page looks great, my only reservation would be the homepage looks a little corporate/bland. maybe have a theme switcher for different colour scheme options

2. Jeremy · 2013-01-16 07:41 · #

   Lookin’ good!

3. BenoitRen · 2013-01-17 23:18 · #

   Looks good, save for some places where I’d have used class instead of id. Now all that’s left is to remove those cancerous XHTML slashes and the space preceding them.

   Reply from Felix H. Dahlke:

   I’m afraid we can’t get rid of the trailing slashes in the short term. Not a fan of those at all, but Anwiki requires page content to be valid XML for some reason :( But I’ll personally rip them all out once we’re moving away from it.

4. ReaderX · 2013-01-29 17:12 · #

   Congratulations! You’ve done a fine job, folks. The new site is very easy on the eyes. Perhaps next you can apply some polish to the unsophisticated logo.

Commenting is closed for this article.