Archive for the ‘layout’ Category

Discovering Greasemonkey again

Friday, August 15th, 2008

Meissner effect: levitation of a magnet above ...Image via Wikipedia I’ve been rediscovering the joy of Greasemonkey scripts lately. For those who don’t know, Greasemonkey is one of the best extensions for Firefox ever made (the other being Zemanta of course:) that allows you to run JavaScripts on specified pages. This doesn’t really mean much to the non-technical crowd, but to us geeks this means you can do almost whatever you want with the page. As I make more and more of these I decided to share them here.

For my Slovenian readers

  1. Finance unfixed is a script that will unfix the header of finance.si. This means the header will scroll and you’ll get more space to read the article.
  2. RTVSlo OI is a script that will remove the header from the OI page on rtvslo.si again leaving you with more real estate for reading.
  3. Delo is a script that will help your eyes when reading delo.si news site since it’s small default line-height might make them hurt.

Developers

  1. JSLint highlighter will help you read the JSLint results. If you write JavaScript and don’t know what JSLint is you should go check!

How to work it

Well first you have to have Greasemonkey installed. After that installing a user script should be as simple as a click of a link. When a script activates you’ll see a little green box that will say ‘Greased’ in the top right corner. Clicking it will toggle the script – either it’s on and active (green) or off and the page looks as it would in the first place (red). You can also toggle the script with alt+g.

Related articles by Zemanta
Reblog this post [with Zemanta]

Posted in browsers, css, design, firefox, greasemonkey, interface, javascript, layout, software, technology, typography | 1 Comment »

Redesigned media

Thursday, May 29th, 2008

A couple of Slovenian newspaper sites redesigned recently (today?). I got the news on Twitter. I’ll try to review what they’ve done1.

Delo

Newspaper vendor, Paddington, London, February 2005Image via WikipediaFirst notified by had, I was eager to see the new design and code. The design is very very wide — a good link to the newspaper that is probably the widest/biggest in Slovenia. At 1024×768 you see all the content, but the banner on the side is missing — I hope they subtract these users when selling ad space (or they should get ToboAds that actually count only the ones that are seen by the user using advanced JavaScript).

The design is boring with only the RSS icons giving it some color. It gives no feedback on links, the font on the front page is too small (11px) and it doesn’t hold its text–resizing well. The content is a bit hard to read with the font size at 12px, width of 600px (50em) and line–height at normal. There doesn’t seem to be any vertical rhythm applied. It’s also very hard to figure out where you are in the structure since some of the navigational elements seem to vary in color for no apparent reason.

The underlying code is disappointing. It’s really something that you would just delete and start over. It suffers from inline styles, divitis, classitis, inline scripts, validation errors (163 for the front page) and overall ugliness. The front page needs 67 requests and 724kB to load in 3.24 seconds (there are a few banners on the site though). Disappointing but expected is the fact that they don’t use Microformats but I was positively surprised that you can use OpenID to log in — I’ve never left a comment on local news sites because you need to register with each one. And I never do.

Mladina

Posted by Tomaž Štolfa it’s actually not available yetavailable now through www.mladina.si but can be accessed directly through www.mladina.si/dnevnik/. It’s a nice page but with a shift in concept — the magazine is a weekly publication while the online edition will publish daily (or probably all the time). It too is wider than the previous version with a width of 1024 leaning on the left side of the browser.

The design is nice and gives good feedback in use. It’s made on a simple 5—column grid with the 5th column being used only in the head and for the banner. The only thing that is quite annoying is the banner at the top that moves the whole page down another 90px for no good reason (at least not for the users?). The content is much easier to read with a 12px font size, 1.5em line–height at 563px width (~47em). It also makes use of few different typeface which adds to the overall experience of surfing. Vertical rhythm in text is achieved through crappy code with paragraphs being spaced with <br /> elements.

The code is nothing to look at. It has 71 validation error on the front page with the first ones starting in the head element (unclosed meta elements). It too sports inline styles and scripts (which are at least wrapped in CDATA) and it too suffers from a heavy infection of divitis. It even has some <center> tags that I haven’t seen for quite some time now. The front page loads in 2.54 seconds for 58 requests and 582kB with all requests except Google Analytics going to the same domain. Microformats are nonexistent and so is OpenID — no need to have registration if you can’t leave comments2.

  1. No need for a disclaimer anymore — I don’t know who designed or coded these pages and I don’t work at their competitors. back
  2. WHAT? Isn’t this supposed to be the most open and future thinking newspaper? back
Zemified

Posted in css, design, html, interface, layout, microformats, openid, posh, redesign, standards, technology, typography | 3 Comments »

Web Typography Sucks

Thursday, May 15th, 2008

The Elements of Typographic StyleImage via WikipediaThat’s the title of the talk by the first foreign speaker1 at Spletne urice — Richard Rutter from Clearleft, who’s really a great guy and a great speaker.

Web Typography is one of the topics I really care about and I think it’s an issue that iswas a bit overlooked in our local community. After my talk last year about fonts and possible ways to use / embed them I am happy that we got Richard to come to Slovenia to talk about this — who could be better than the author of The Elements of Typographic Style Applied to the Web.

The talk went great2 (Cyberpipe filled up after the first few minutes) and it was followed by a good Q&A session. In the session I mentioned that a font foundry released a font that is free for use on the web and thus free for embeding — the foundry is called FDI fonts.info — you can read their press release or download Graublau Sans Web and Logotypia Pro for free. After the talk we went for a beer in Metropol (just above Cyberpipe) and then another one later on in the city center.

All in all it was great having Richard here and I guess he liked it too. I hope he’ll put in a good word for us and we’ll get even more foreign speakers to come to Ljubljana and share their in–depth knowledge of specific areas of webdesign and development3.

I would also like to thank our silent sponsor Parsek Interactive that took care of the air fare and the hotel bill and also Zemanta that shared their work space with Richard today4.

Related articles

  1. Technically Daniel P. Fischer was the first, but he gave his talk as part of the HAIP festival and his stay and talk was organized by the Cyberpipe crew. So what I’m trying to say is that Richard was the first speaker I organized by myself. back
  2. If you missed the talk the slides are here and the video should be online in a couple of weeks. back
  3. Any volunteer speakers? Any suggestions? Sponsors maybe? back
  4. Did you notice that I tried to punctuate with the correct apostophes, en dashes, em dashes, elipses’… It’s not that easy — somebody should create a WordPress plugin for this. back
Zemified

Posted in companies, css, design, events, html, layout, parsek, spletne urice, standards, technology, typography, zemanta | 1 Comment »