You should be looking at a redesigned Antimoon, the project I’ve been working on for the past month or so. If it looks wrong, you may have to reload the page to get the newest styles.
If anything seems wrong after you reload the page, please let me know.
Here’s a rundown of the most important changes:
- More readable, better-looking text
- Navigation bar on every page
- Coordinated color scheme
- (articles and blog pages only) Dictionary lookup feature — double-click any word to look it up in the Cambridge Advanced Learner’s Dictionary (includes phonetic transcription, recordings and of course example sentences)
- (articles only) Google Translate link for people who have difficulty reading in English and whose languages are not included in the Translation Wiki.
- (articles and blog pages only) Buttons for sharing an article on Facebook, Twitter, etc.
- Awesome print stylesheet — if you print an article, it will look almost as good as a page from a book. No ads, no site navigation, just pure text set in a nice font.
Why did you redesign the site?
The goal was to make Antimoon easier to read and more pleasing to the eye. The site contains large amounts of text. I wanted to provide an experience that resembles reading a book. Of course, currently available computer displays cannot match the readability of a book (for one thing, they don’t have enough resolution), but I think I’ve gotten 80% there.
When Antimoon launched in 2001, it had an unusually simple and easy-to-use design for its time. Back then the Web was full of sites that looked like this. I take pride in the fact that I was one of the early followers of Jakob Nielsen’s evangelism. The 2001 design survived for 10 years with some minor tweaks (with the exception of the homepage, which was significantly restyled).
Since 2001, I have learned a lot about typography, graphic design and user experience design. I’ve read books, Web articles, and designed other sites, most notably TypeIt. I wanted to put this knowledge to good use on Antimoon.
Why is the font so big on article pages?
It’s not big. It’s the right size for reading from a screen. When you read from a screen, the screen is typically an arm’s length away from you (it should be, anyway). When you read from a book, the page is much closer. Nobody holds a book at arm’s length. For this reason, the letters displayed on screen should be roughly 60% larger than letters printed on a page to maintain the same level of readability.
If you think 16-pixel Georgia is too big, you are either sitting too close to your screen or you have been conditioned by poorly designed websites. For years, websites have used tiny fonts in an effort to fit as much information as possible on the page. Fortunately, this is beginning to change, as designers begin to realize that there’s no reason why websites should be harder to read than books.
Double click to show a dictionary isn’t working – Firebug shows an error.
Also there is little contrast between an active tab and label.
Wojtek, thanks for your feedback. Would you try hard-reloading the page by pressing Ctrl+Shift+R? Maybe the JavaScript component did not load for some reason.
The next thing to try is to disable all add-ons (you can run Firefox in Safe Mode by holding Shift while opening Firefox). Sometimes add-ons conflict with websites (AdBlock is a frequent culprit). If that solves the problem, you can try enabling add-ons one by one to find out which one messes up the dictionary lookup.
If you can’t get rid of the error by disabling add-ons, please give me some more details: error message, your Firefox version, operating system.
About the navbar colors, the active tab should have a kind of mustard color, other tabs should be light brown. Obviously the exact color will depend on your browser (only Firefox uses color correction for CSS styles), your display (laptop displays can be crappy) and whether your display has been calibrated. I tested the design on 4 different displays and 6 different browsers. There are differences, but in all cases the contrast is sufficient — there is no doubt which tab is selected.
It seems that doubleclick.js is not loaded at all. It depends on a browser. Some will load, some won’t. The general rule of thumb is to place all scripts near closing body tag. Because you make of use of jQuery, you should have run all necessary scripts before ‘load’ event but after DOM is initiated. For example:
$.jQuery(function($) {
setupDoubleClick();
// other scripts
});
You should not mix structure (HTML), presentation (CSS) and behaviour (JS). Actually, you did – ‘onload’ event in body tag is most prominent example of this.
I think that you do use too many scripts that affect loading time.
I have some front-end development skills (especially jQuery ones – I write and maintain my own widgets btw.), so if you’re interested, drop me an e-mail. But in Polish this time, please. ;)
I agree about the loading time, but I don’t see what I could do to shorten it without reducing functionality. All of the scripts serve a legitimate purpose (Google Translate, Cambridge Dictionary, Google ads, sharing). If you have specific ideas, you are welcome to share them.
Given your comment below, I am not sure you are correct about doubleclick.js not being loaded. It certainly works every time I try it (in various browsers).
Firefox 9/Open Suse – the doubleclick is not being loaded – you have to believe me :)
Maybe you’re right that it is due to ad block being turned on but it should work event without ads.
I’ve eliminated 4 requests by removing the Facebook Like button from the site footer and merging the print stylesheet into the main stylesheet using media queries. There are still over 30 others, but most of them are made when the content is already displayed and the user can interact with it. I think it works plenty fast in Chrome; much slower in Firefox, unfortunately. I think the Firefox renderer is simply slower.
Could you check if it works with AdBlock turned off? Thanks.
Yes, it works with AdBlock turned off.
Thanks for checking, Wojtek. Not the first time I’ve seen AdBlock mess with a site.
Just try it out in Chrome. I don’t know how it was supposed to work but in Chrome it seems to be buggy. I thought that a definition will pop up as a balloon or a some kind of a lightbox, but what I get is a new pop-up page. So 1990s.
Of course I tested it in Chrome. It works as intended. You get a “Definition” box which you then click to get a pop-up window with the definition in the Cambridge Dictionary. Did you think that behavior was a bug?
I’m sorry it’s not Web 2.0 enough for your liking. Bear in mind that I am using the Cambridge Dictionary, so I am restricted by their requirements. One of them is to use their doubleclick.js component. I do not have a license to embed their content in my pages.
I don’t think it is a bug but rather an usability issue. It feels like the ‘definition’ box appears in random places when you click on a different words.
Of course you have to respect their requirements, but embedding this pop-up in a frame and then showing it in a lightbox does not infringe them (I think so).
Tom, could you please add to this blog a functionality that will notify a user when a new reply/comment comes? Now, it is hard to keep track of this conversation as I have to visit this blog to know if I get your reply. :)
OK, I’m working on a better solution. Hope you like it. :)
Here is what I’ve came up with: http://ryrych.pl/null/cambridge/cambridge.html
After many hours of work I could do something what satisfied me. Of course, it could be further improved.
You can use it if you like. Just let me know, and I will send you the source. :)
Now you can not only select single words but whole sentences.
I checked out your page, but I think the current setup is better. The fact that the “Definition” box appears in somewhat random places in relation to the selected word is not a huge problem — as long as the user knows what to click, they should be fine. It always appears to the top right of the selection. What other usability problems do you see in the current setup?
Of course I don’t want to encourage you to my solution. It is your page, your decision.
I just wanted to say that opening a pop-up window is not the best solution out there.
Anyway I’m not going to use Cambridge dictionary as I have better functionality with my off-line dictionary reader (OALD8, Collins Cobuild, PWN-Oxford, YDP Collins – all these in one place)
I like the way you think, with the whole book style idea!
That is a new website;-). Great you are the best polish native speakers, who have found the best strategy to learn the English language in Poland. Honestly I cannot learn English in a school, because teachers are very busy. Kings regards to all, who created this Website ;-)
Cool! Dictionary feature worked. It will do wonders for new beginners! My reading speed also improved drastically with larger fonts!
Thanks, Asad. Glad you like it :)