5 ms·
A Cleaner, Simpler Blog Page
- chmike 16y agoThe opacity change when the mouse is over text doesn't work with touch screens (iPad, iPhone,...). Appart from this I really like the idea.
- giu 16y agoI'm also using a very minimalistic blog theme for my own, which emphasizes the content more than anything else: http://giu.me http://giu.me . I have to admit that I didn't chose the best link color, but since my theme is beta, it's surely going to change (I'm using the standard Blue; a lighter color surely would be better) . On a sidenote: I would replace the Comic Sans MS font with another one; that font shouldn't be used for homepages IMHO
- thecombjelly 16y ago> I would replace the Comic Sans MS font Yah I've been playing with the Google Fonts and I think I'll be switching that soon. I just had to have something a little different and that was the quickest, easiest at the time.
- edash 16y agoYou should also check out http://typekit.com/ http://typekit.com/ It isn't free, but it is reasonable. And they have a much better selection of fonts.
- thecombjelly 16y agoYah, typekit is good and has a much better selection of fonts, but I'm broke currently :-)
- giu 16y agoA font is changed pretty fast; it's not a big issue. Nevertheless, I like the simplicity of your page; the font-size is really good, and I can focus on reading the text, without being disturbed by too many distractions
- stoney 16y agoLooks nice, the only bit I don't like is that if it is full screen you have a vast expanse of white on either side of content, which I find a bit distracting for some reason. I always think dark bars down sides help to focus your eyes into the content area.
- thecombjelly 16y agoHmm, I'm not sure about that one, does anyone know of any studies or have any opinions related to darkening the sides?
- stoney 16y agoI was talking purely from personal preference, but would be interested to know if there were any studies done on this. Widescreen movies on a 4:3 aspect TV always use black edges, but maybe that's just tradition or to do with contrast or something like that. EDIT: Just noticed that HN has a grey content area with white around the edges, which I like, so maybe my preference is more to do with having different colour sides than dark sides - i.e. some kind of boundary to the content area.
- niyazpk 16y agoA whle ago I designed a WordPress theme keeping simplicity in mind. It got good reviews. Check it out: http://wordpress.org/extend/themes/clear http://wordpress.org/extend/themes/clear
- Tichy 16y agoLooks great!
- eavc 16y agoI just installed it. As a non-coder, is there an easy way to make the numbering on ordered lists aligned in the same way that the bullets on unordered lists are? At the moment, the numbers stick out to the left of all the other content. Otherwise, it's gorgeous.
- niyazpk 16y agoI will fix it (after my office hours) so that you can get the update directly from your admin.
- gr366 16y agoI don't think it's necessary to fade out the header and sidebar. The layout is simple enough that having those components at full opacity shouldn't be overwhelming. Also, while the fully-justified body text produces nice, straight left and right edges, notice that because it's not a very wide column you get some significant spacing between words. If you want to keep it this way, you might look into using a hyphenating javascript library, which will help with the rhythm of the text.
- thecombjelly 16y agoThe layout is simple, but at least to me, the orange of the menu bugged me...
- jarin 16y agoNot to mention the Comic Sans
- isleyaardvark 16y agoThe downside of the opacity is that 1) the contrast between the text & background in those areas is reduced, and 2) people won't necessarily know to hover over those areas to increase the contrast. I personally don't think the hover color is too bold, but the current opacity is really overdoing it. "Want to learn to Program" is particularly problematic, and should be about as dark as the text below it. I'd also recommend playing around with the line-height and measure, see: http://webtypography.net/toc/ http://webtypography.net/toc/
- d0m 16y agoI find the colors pretty ugly
- aymeric 16y agopretty or ugly? :)
- swingley 16y agoLove the idea. Hopefully more will follow and reduce the need for 'readability' or the safari reader option.
- elrodeo 16y agoI agree with him, and that's why I love Posterous. The default Posterous theme fits all his criteria except for the font size.
- fookyong 16y agothis kind of form-over-function platitude is all well and good until you realise that conversions are 500% higher when you have your product's call-to-action box set at full opacity ;) even more so when you've got employee mouths to feed. put money in the equation and a lot of design exploration of this type just becomes a waste of energy. that said, nice idea!
- thecombjelly 16y agoWell actually it seems to be driving more traffic to my tutoring page. Compared to the volume I've had before from HN and the number of tutoring inquiries had, it seems to be much higher. Although currently that really has no statistical significance... I'll monitor things and see if it really matters or not.
- fookyong 16y agoanecdotally, I'm sure people are curious in the short term. but I'm pretty sure the current best practice for maximising CTR is to, well, make sure stuff is visible. feels silly to even dispute this.
- aymeric 16y agoHas anyone noticed the author offers tutoring? I find it a very interesting idea. Is it a widespread practice? Has someone had a tutor and would like to share with us how tutoring/mentoring helped him?
- deleted 16y ago[deleted]
- petercooper 16y agoI've also set all of the non content elements to a 30% opacity, when the mouse isn't over them, to hopefully focus even more of your attention on the actual content. It just makes them more noticeable to me since it's such an unusual concept. This is both a pro and con with going against the grain - it makes you stand out.. which isn't the desired effect this time. The bizarre font combination doesn't help either. The ultimate in clean/simple is probably found in Readability/Safari Reader - at least, from all the raving I've seen over the last few days ;-) UPDATE: I've now also set the text to be justified and am looking into hyphenation. Justified just seems to be a little more pleasant and smoother. It might seem that way to the eye at first, but in reality, it just ain't so. Fully justified text is harder to read and has negative effects on retention: http://www.adamsdrafting.com/2007/05/03/justified-text-versus-ragged-right-text/ http://www.adamsdrafting.com/2007/05/03/justified-text-versu... Study 1: http://www3.interscience.wiley.com/journal/120024982/abstract?CRETRY=1&SRETRY=0 http://www3.interscience.wiley.com/journal/120024982/abstrac... Study 2: http://www.eric.ed.gov/ERICWebPortal/custom/portlets/recordDetails/detailmini.jsp?_nfpb=true&_&ERICExtSearch_SearchValue_0=ED337749&ERICExtSearch_SearchType_0=no&accno=ED337749 http://www.eric.ed.gov/ERICWebPortal/custom/portlets/recordD... The UK government also gives this advice in a style guide: Avoid fully-justified text - the 'ragged' right edge can particularly help people with dyslexia in keeping reading position. Making a site harder to read for people with dyslexia (an extremely common disability, even amongst techies) is not a good step towards "simple." That's the thing about readability. It's not about what "looks good" or "feels good" to you as an author - it's about how readers actually read and react to your styling. Relying entirely on your own gut instinct is like trusting the Web design client who's raving "make the logo bigger" and "use Comic Sans - it's a great font!"
- thecombjelly 16y ago> It might seem that way to the eye at first, but in reality, it just ain't so I'm going to look into this more, thanks.
- Groxx 16y ago"rivers" and weird spacing from the OP's first link are a bit distracting, yeah, but here's my personal easy-to-believe reason for non-justified text: Ragged edges make it easier to detect different lines of text, because you can see the lengths easily. This makes it harder to lose your place, and easier to slide your eyes back to the left edge to continue reading. Every subtle clue to your location is helpful for quicker reading, and justified text pretty much destroys it. And personally, quicker often == easier, as if you can read it quicker, it somewhat implies a lower "cost" to the mechanics of reading that text.
- yurylifshits 16y agoMaybe, you should increase the line height to around 1.5 of the font size for readability.
- thecombjelly 16y agoSeems to make it more readable. As well, some quick Google searching turns up studies and opinions that it is most readable around 130% of the font size.
- modeless 16y agoI like the idea. My 2c: Pick one font for content and (possibly) one other font for headings/menus. Different weights count as different fonts. Keep the number of fonts very low. Above all, do not use Comic Sans, ever. The animations are distracting because they last too long; make them snappier. This is a common mistake when designing UI animations; people are afraid that their great animations will go unnoticed if they are too short and make them too long instead. Trust me, we will notice your short animations. Also there is a bug: your animations can't be interrupted, so if you mouse in and out 10 times they will continue flashing long after the mouse has stopped moving. Have you considered using CSS transitions instead of Javascript? Empty space is just as important as text. You have left plenty of horizontal space, but your vertical spacing is inconsistent. The menu at the top needs more vertical space around the links (or perhaps the same space needs a smaller font with increased tracking AKA letter-spacing). The vertical space between items in the right column seems random, with very little space above the RSS link, extra space in the top of the green box and no space at the bottom. The left column has more space under the byline than above the headline which is weird, and there is zero space below the footer.
- thecombjelly 16y agoThanks for the feedback and for the great explanations. I'm a programmer and only beginning to learn visual design stuff... As I strive for simplicity, your suggestions about spacing makes a lot sense. It would be simpler visually to have things be more consistent.
- mreid 16y agoI also did something similar when I switched my site to Jekyll. The usual blog content + header + sidebar format seemed unnecessary for me so I started by focusing on the content and building up from there: http://mark.reid.name/info/site.html http://mark.reid.name/info/site.html I currently use justified alignment, but given the mounting evidence against it I might switch to ragged right next time I'm playing with the CSS.
- ethan 16y agosimple, clean, and forgettable
- drivebyacct 16y agoGod. Justified text is the most annoying thing in the entire world.
- nileshtrivedi 16y agoI loved the idea and immediately sat down to make my own template. Here is an attempt: http://nileshtrivedi.com/ubuntu-1004-on-dell-vostro-1520.html http://nileshtrivedi.com/ubuntu-1004-on-dell-vostro-1520.htm... I haven't got around to add a navigation section yet.