Mastodon Kuan0: Make EDPB webpages readable again - howto

Tuesday, 11 May 2021

Make EDPB webpages readable again - howto

The recent EDPB website redesign kills usability and ergonomics for those with widescreen monitor. Maybe they were trying to make the site user-friendly for mobiles/tablets, but the result is that it's user-unfriendly for desktop PCs/laptops.

Viewed on a computer with widescreen monitor, the left sidebar or margin's passed on, it's no more, it has ceased to be... it's an ex-margin! (hi Monty Python fans).

This means that the main webpage text is no longer centered onscreen.


Cue neckache or crick from having to twist or turn the head too far to the left (and hold it there) just to read the main webpage text! What to say, that's certainly one way to deter desktop/laptop website users.

This seems to be an EDPB website matter, as the general Europa website is still fine. But it can be a pain in the neck for EDPB website visitors, literally!

To center EDPB webpages on your widescreen monitor again and save your neck, three options to try:

1. Un-maximise ("restore") your browser window, move the window (or drag the left edge) to the right till the main text is centered onscreen, and read EDPB webpages only from the restored window. 

2. Use the Liquid Page bookmarklet (instructions are on that webpage), if you prefer to keep your browser window maximised. Then, you can drag the "Latest news" column on the right (and beige box behind it, and the flag thing) even further to the right, out of the way. Then drag the main text column to the right, and scroll down as usual. (Links won't work till you refresh the page, but you can rightclick the link and open in new tab). More troublesome maybe than 1., but I do like outside the box creative solutions - have fun dragging stuff around!

3. Simplest solution (tested in Chrome and Edge on a Windows 10 PC) - use my bookmarklet or favelet: /Fix EDPB. Instructions: ensure your browser bookmarks or favourites toolbar is visible, drag that link to the toolbar e.g. between other bookmarks then, when you're on a no-margin EDPB webpage, just click that bookmark. Or, if you prefer, follow the bookmarklet creation instructions under Solutions but, in step 4, name the bookmark whatever name you wish and, in step 6, instead of pasting the code shown there, paste the following code:
javascript:(function(){document.body.style.marginLeft = "500px";})();
All fixed, main text is centered on screen! This also narrows the text column so it's easier to read scrolling down.

  • Keyboard shortcut fans: hotkeys to run this in Chrome are Alt-e, b, then type the 1st letter of the bookmarklet name (I made that the / symbol here so as not to clash with other bookmarklets, but feel free to edit the bookmarklet's name yourself), then Enter if necessary.
  • Per webpage only: if you navigate to another EDPB webpage, you'll need to click the bookmarklet or use the hotkey again. It's a per page rather than permanent fix, as it adds a margin to the current page after it's been downloaded to your browser. Unfortunately it can't modify the original pages on the EDPB website, only the EDPB can do that.
  • Margin width:- a 500 pixel left margin works for me. If it's too narrow/wide for you, rightclick the bookmarklet in the toolbar, Edit, under URL just change 500 to 400 or 600 as you wish (but obviously don't change the rest of the code) and Save. 
My neck feels better already! (and this works on BAILIII too, BTW).

I hope this helps other EDPB website visitors too.