Let the Best Name Win

Thursday, October 10, 2013

Make non-responsive sites look a bit better on phone screens


Do you often open links on your phone only to reach a website that has no mobile-awareness and you end up with tiny fonts you can never read, trying to zoom in and out to read and navigate?

I can't believe some respected sites out there are not yet giving small-screens the attention they deserve, one that truly surprised me recently is Hacker News, we've posted about BootName on it and I needed to check the site few times, on my phone of course, and it looked horrible. Trying to find the cause of this, to my surprise, the Hacker News site didn't have a viewport meta tag. While I understand that using viewport on some traditionally-designed websites could make it behave worse, I find that the majority of sites will just get more readable if they had a "device-width" viewport.

To test this, I created a small bookmarklet that injects the tag into any page:

javascript: var d = document, h = d.head || d.getElementsByTagName('head')[0]; var m = d.createElement("meta"); m.content = 'width=device-width, initial-scale=1.0'; m.name = 'viewport'; h.appendChild(m);
the link version (VP) - You can drag this to your bookmarks bar

If you're in Chrome, you can toggle the visibility of your bookmarks bar using Ctrl+Shift+B (Or Command+Shift+B on Mac)

Warning: All the bookmarklets mentioned in this post will reset some of the styles that websites already have, it might introduce some oddities. Use at your own risk.
Here's how Hacker News looked before and after on my Android Chrome:
Without the viewport After the viewport

Applying a JavaScript bookmark on a phone can be tricky, read below on how to do it on Chrome
One tiny CSS library that I absolutely love is normalize.css, it makes browsers render HTML elements consistently and in line with modern standards, so I thought why not inject that too:

javascript: var d = document, h = d.head || d.getElementsByTagName('head')[0]; var m = d.createElement("meta"); m.content = 'width=device-width, initial-scale=1.0'; m.name = 'viewport'; h.appendChild(m); var b = d.createElement("link"); b.href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css"; b.rel="stylesheet"; b.type='text/css'; h.appendChild(b);
and the link version (NZ)

Hope you find this helpful... Now continue reading only if you're a typography nerd.


The same inject method above can be used to force a font-face on websites that fail to pick a readable font, or if whatever font they picked isn't working on your system, believe it or not, Hacker News (again!!) renders with a serif font on my Ubuntu!
Some websites (like Wikipedia), choose to render with what default fonts you had setup in your browser/system, this is cool because you have control of that and can choose the font that you like the most.

But regardless of the font the website is rendering, you can just change it, this is especially handy if a website chooses to use a zillion font. Just override them:

One of my favorite fonts is Ubuntu, here is a bookmarklet that makes any website use it:

javascript: var d = document, h = d.head || d.getElementsByTagName('head')[0]; var m = d.createElement("meta"); m.content = 'width=device-width, initial-scale=1.0'; m.name = 'viewport'; h.appendChild(m); var b = d.createElement("link"); b.href="https://dl.dropboxusercontent.com/s/t29x6s1rrkjpmjo/ub.css"; b.rel="stylesheet"; b.type='text/css'; h.appendChild(b);
and the link version (UB)

and if you're a fan of Open Sans (and who isn't), here's one for that:

javascript: var d = document, h = d.head || d.getElementsByTagName('head')[0]; var m = d.createElement("meta"); m.content = 'width=device-width, initial-scale=1.0'; m.name = 'viewport'; h.appendChild(m); var b = d.createElement("link"); b.href="https://dl.dropboxusercontent.com/s/rr4cj3hwczd2ubj/os.css"; b.rel="stylesheet"; b.type='text/css'; h.appendChild(b);
and the link version (OS)

Here's Google rendered with my favorite font:



Finally, some sites just don't get it, the font-size and line height rhythm is extremely important for readability, and ideal line height is always 1.5em, here's a bookmarklet that forces a font-size of 15px and a line-height of 1.5em, it could make sections of the site ugly, but certainly more readable:

javascript: var d = document, h = d.head || d.getElementsByTagName('head')[0]; var m = d.createElement("meta"); m.content = 'width=device-width, initial-scale=1.0'; m.name = 'viewport'; h.appendChild(m); var b = d.createElement("link"); b.href="https://dl.dropboxusercontent.com/s/w8pbv6d7xw64g8q/size.css"; b.rel="stylesheet"; b.type='text/css'; h.appendChild(b);
and the link version (FS)

What is your favorite font? know any other tricks like thees? please share
@samerbuna

How to apply a bookmarklet in Mobile Chrome:

To use JavaScript bookmarklets on your mobile Chrome browser, choose small names for them (I use 2 characters), make sure you sync your computer's browser to the device browser (unless you want to copy/paste code on your tiny screen). After that, whenever you're viewing a website, start typing the bookmarklet name in the address bar of the browser, and the auto complete will show your bookmarklet, pressing it will apply the JavaScript code.
Looking For Publicity? Get The Publicity You Need, Guaranteed On Our New Service PRMatch.com