New blog design
Published July 18th, 2007 3:33 PM EDT By Daniel GoldmanI’ve been working on a new design for Opera Watch since April. And here it is.
If you subscribe to this blog via RSS or email, be sure to head over and check out the new design.
With the new design, this blog is also more readable on Opera Mini and other mobile browsers with single column layout. Previously, in order to read the actual post content, you’d have to first scroll down through sidebars. Now I’ve placed the sidebar code after the content, so it will show up first on mobile browsers.
Like with all changes, it may take some time getting used to this new design. My ultimate goal was to make this blog more readable and visually appealing. I hope I’ve achieved them both.
Throughout the development and design process numerous people helped me out. Just want to publicly give the hat tip to Trond Hansen and Tarquin Wilton-Jones for their help and advice.
I eagerly await your feedback and comments.
If you enjoyed this post, then make sure you subscribe to my RSS Feed.
using
It is cool
using
Finally! Good work!
using
Very well done! I always found it a hassle to read the site using Opera Mini, which was pretty ironic.
I also love the Q&A on the side of the page. Good stuff for people who stumble in the door wondering what Opera is all about.
using
It runs circles around the old design. Much better this way.
using
Very nice! Eons better than the rather boring previous layout.
using
Excellent!
:yes:
using
Hmmm… why did you go for HTML 4.01 Transitional and not XHTML 1.0 (Strict)?
XHTML is supposedly more future-proof and easier to maintain… Also you could do XSLT transformations on it…
using
Dane, Wordpress (which I use to power this blog) dosn’t seem to support XHTML. I had too many errors and pages didn’t validate.
using
looks nice
But reading comments is kinda hard. I would like to see these being seperated somehow, like differet color or something .. you know, something like yellow-white-yellow-white-and-so-on .. I think this is my first comment here, tho I’ve been reading this blog for a while 
using
Very nice, but to me there lacks a bit of colors.
Anyways this one is better than the previous.
using
I love the new design, much easier to read. Also I read this blog alot via Opera Mobile, and always felt like it was a pain to scroll through all the links before I get to the actuall posts I wanted to read.
Anyways, I’m glad you fixed that
Keep up the good work.
using
Very nice work!
using
xhtml strict is a masohistic way compared to xhtml transitional. it achieves the same goal of 100% valid xml, but cuts of possibilities. only very young and naive webdevelopers use it and evangelise others to do so. in practical world, transitional simply does the stuff better, and validation is the LAST reason of telling good site from bad site. if you want it to validate, put every offending code into xmlhttprequest. code would be valid, page as the whole - not.
and xhtml is not BETTER than properly written html 4.01
doing xslt on it with opera.. well.. fails. opera has limitations in its xslt processing, so using xslt should be last thing mentioned on opera site, devs surpisingly ignored few missing bits from it, and well. xslt works, but only as long as you avoid certain parts of it.
using
I like it…nice job Daniel!
using
i agree with above comments - great, refreshing new design, but hard to read - both the posts and the comments. Maybe some sort of line between them at the very least, or alternating colors.
Good luck with this one!
using
OWW… my eyes hurt.
I like the design But it is too bright, could you keep the design and dial down the lumens?
using
Great work Daniel! The ‘Opera Watch 2.0′ is ****, sleek and fresh!
using
I really like the new design, but (now the whining begins :> ) why the ‘See this page in Opera Mini’ button is on top of the sidebar? I think it breaks sidebar order, everything is aligned left except this button. I also agree with EC.
using
Very nice!
It’s good to see an update.
It looks very narrow on my 1920×1200 display, but it still looks ok.
using
Oh, and congratulations on making the whole thing validate. The individual posts do, anyway. The home page seems to fail because you have an apostrophe inside a single-quoted attribute value.
using
Great layout.
Now you only need this plug-in before everything is perfect. At least consider it please
- :):) -
using
Hi…
I read your site very regularly, but I must say that I preferred the layout of the previous design…though I always access it on my desktop.
But given your target audience, I guess the deign works! Would it be possible to add some more colour to the site? It looks somewhat bare right now!
Sorry, if my opinion caused any offence - I certainly do not intend it to!
And while I’m at it, I should also thank you for the info that you put on the site!
Cheers
using
I agree with the above that the comments are kind of hard to read without some kind of block shading or line break between them.
using
Simple but sleek, I totally like it. Big improvement since previous design.
using
Amazing improvement, was never fond of the old design but this looks fantastic
using
Thanks guys for the valuable feedback. In the previous design I had the alternating comment background. I’ll look into adding them here too. I also need to think of something to add between posts on the hompage. I’d rather not add images, as I want to keep the page download quick.
using
Lovely work! Very clean, and spiffy.
The only changes I can think of are probably having titles of posts in bold (so they pop out visually) and maybe having a light grey border for coments or a line dividing them…maybe links could turn orange or red on hover? Just the small details - overall the design is so shiny *__*
using
I just had 10 comments held for moderation, and I accidentally deleted all of them. I’ve personally emailed all of those who included an email address and sent them their comment for them to repost. I didn’t want to repost myself on their behalf, since they don’t necessarily use the same browser version as me.
There were a couple, however, that didn’t include an email. So I’ll repost them here.
Tamil:
Nice.
Opera Tips link has title ‘Interviews’.
Rhonnysparks
Top job! A much more polished and professional look. Love the tabs. Comments could read a bit better.
Daniel I hope you do realise that you can provide a link to a separate style sheet with media=”handheld” which Opera Mini and Mobile will apply instead of the default. There’s no need to change your default design to suit Opera Mini.
Still glad you changed it though!
using
Congratulation Daniel for your nice and clean layout. It is much easier to read. Besides that I especially like the Opera Tips section. Q&A is also nice for new users, although I’d prefer fewer text (other people are different in this point).
Regarding Wordpress + XHTML: my Wordpress blog uses XHTML but it has problems with validation (I’ll look into this when I’ll really use it). I think all this highly depends on the used themes and plugins for Wordpress.
Dane, XHTML is probably future-proof but the next standard will probably HTML5 which developing as new standard is strongly supported by Opera. The code can be quite the same as XHTML and is therefore equally easy to maintain - if properly written.
Wordpress and Opera seem to have some problems. For example searching on this page with incremental quick find using “.” applies a lot of highlights to text which is not easy to get rid of.
I (reproducable) encounter it clicking outside this textbox and search for “XHTML” (type “.xhtml”). Only the occurances inside this textbox are found by pressing F3 and after clicking outside the textbox again most of the text on the page above is highlighted. Selecting parts of the text seems to do nothing (as already highlighted text is highlighted), but clicking on the page again makes the highlights for the previously selected piece of text to go away - while all around the highlights still remain.
using
well done!
using
Nice job, Daniel. Much more readable. I second (or third) the suggestion for improving the delineation between comments but other than that, I think it’s grand.
- A
using
Good design. Very clean and I hope easy to read from Opera Mini.
Maybe some crystal style design could be good to match with Aero and Aqua style’s on modern OS but it would make it expensive to load from Opera Mini I think.
using
I like the new design as well! I’m definitely going to miss the old design
(more familiar), but I think you did an excellent job! I remember when I
first revamped my site, haha, good feeling. Congratz on validating.
using
Old one was better in look. This one more like many others in the web. You could just keep the look same and reorganize a bit more.
using
Dunno if that was mentioned before, but: Why fixed width?
The site looks ridiculous on my screen with almost exactly 50% screen estate wasted with empty gray and the text pushed together into a hilariously tight column.
I would have expected someone affiliated with Opera to know and care about the wonders of dynamic design and the importance of screen real estate. :/
using
pixel3 is right about needing better separation of the entries. It’s sort of hard to read right now. A simple horizontal line in-between each entry would be enough.
Other than that, it’s a nice redesign. I can’t say I’m crazy about a fixed width design, but it looks nice.
using
Christian Walde, readability is said to be best with a text-width around 32em (for a container +padding +margin +border) - therefor you have a lot of screen estate wasted on a wide/big screen, but you don’t have to move your head and eyes that much and you’ll much easier get the beginning of the next line. As you are using Opera it is simple to apply zoom (try “8″ = +100%) to fill the rest of the page - well, you’ll probably complain about too big font size then.
Furthermore you aren’t right with fixed width. You can see it when you make your Opera Window or tab narrower than the main column which will become narrower, too. It’s a perfectly floating design with max-width applied to the main column to greatly improve readability.
And using Opera you can do even more to have it your style: just use either a special userCSS for OperaWatch.com or select View - Style - User to get rid of every style you don’t want.
using
its simply the GREAT!
using
Very nice design Daniel. So much cleaner and easier on the eyes than the previous one. Good work!
using
I was so used to seeing the old design. This is a very new, fresh
look, Daniel. There’s only one thing I’d change: the sidebar
should have a different background from the content so it’s easier
to see them as two seperate parts of the webpage. It’d make it a
little more readable and less crowded. In addition, the comments
seem to be vertically spread out, and could use some seperation
(like background colors).
Overall, though, I like it. It’ll take getting used to; pretty soon
I’ll love it as much as the old one.
This layout, even though it’s new, feels like its layout took a
step backwards, largely because it doesn’t have rounded corners
and colors to graphically seperate content. The tabs at the top,
while cool, feel a little out of place because they are rectangular.
Overally, fairly minor, nitpicky suggestions.
(And thanks, Asa, for being nice. It’s nice to see that you’re changing. Keep it up!)
using
I personally think that the layout needs to seperate things a little bit - like a grey line under the head and towards the side bar (or the sidebar with a different background). Because now the article text and the sidebar float into each other visually, as does the head because it is white on the right side.
using
Nice Layout, I like the new one. I think that this is a great improvement. It’s more simple and easy to about.
using
Are you sure it resizes when you make the browser window smaller than the width of the column? I don’t see it when I do it in either Opera or Konqueror.
Anyway, Daniel the font in the comment form seems a little small on my widescreen (1680×1050) laptop. I guess that’s what I get for buying a widescreen laptop, but nothing with a smaller screen had a decent video card…
using
Impressive.
Two other things I note:
1. The subsribtion links kinda got out of hand. There is one in the menu, that goes directly to the RSS feed. That’s a very strange design choice, for me. Or did you really meant it to link to http://operawatch.com/subscribe-opera-watch/ ?
Also, there’s an overflow of “subscribe” links in the sidebar: two (?) for the feed, with different texts (’By Feedburner’ and ‘RSS Feed’, though they both appear as the latter on OM), and strangest of all, a link to the page to subscribe by email, also with an RSS icon.
I would suggest making it “[feed icon] RSS feed” and “[email icon] Email updates”.
2. When adding a comment on OM, it still seems to me confusing:
Post a comment
[textbox]
Name (required)
[textbox]
Email (will not be published)
[textbox]
Website
You can use these tags…
[textbox]
It’s only apparent later, that the first box is not for entering the comment, the second is not for name, etc.
I would suggest
Post a comment
Name (required):
[textbox]
Email (will not be published):
[textbox]
Website:
[textbox]
Enter your comment below. You can use these tags…
[textbox]
I don’t know how radical you want to get, but putting the Comment input box first is actually a good idea, as it doesn’t interrupt a user’s train of thought.
using
Very much more attractive than the previous design, which I really didn’t like…
using
Good work Daniel, I like it much better than the old one! Nice
using
please, bigger titles !
A graphic designer
using
Hey! Blast from the past! Reminds me of the old opera blog on blogspot
Would be great if the blog content width was wider…these tiny columns of text with bucketloads of space on the right and left really annoy me. I mean who seriously has monitors with such bad resolution these days DX
But other than that pet peeve, good job, keep up the good work
using
Hi Daniel,
Great to see things go live!
Keep up the good work
Trond.
using
I decided to imagine what the site would look like with a few simple changes, like a sidebar and and alternating comment colors. I got a bit carried away into a multi-hour project. It’s now 4:30AM where I live. Wow, I had way too much fun playing around with my image editor. Anyways, here’s the final result with some annotations made in the margins.
using
Taking into account the average paragraph size Daniel writes, those arguments are completely irrelevant. If i look at the the rss feed in M2 i can read the same text on a width of roughly 1000 pixels without moving my head at all, and most paragraphs are at most 3 lines long.
Sometimes, when realizing that a suggestion is silly, it’s best not to suggest it at all.
You seem to be using fit-to-width.
I know all about these things and have some heavy userjs modification already in place, but i try to restrict those to sites who *do it wrong* and where there’s no hope of any correction.
using
hey, this is a nice design… i like it
using
I just added the alternating backgrounds to the comments.
As for a distinguishing the sidebar from the main content, I’ve yet to find a good solution for that. I tried adding a background color to the sidebar, but that makes the text less readable. Maybe a border would do the job.
Thanks for your feedback… It’s still a work in progress.
using
That wasn’t nice…
Anyway, Daniel thanks for the alternating background colors for comments.
using
Daniel deleted the comment I was referring to…
Oh well, it’s not the first time that’s happened.
using
GT500, this guy posted about 5-6 comments under my name. I won’t tolerate that.
using
I must admit I liked the earlier design better. It was more spacious than this new one, which to me feels a bit cramped.
I understand the advantages for mobile browsing, but for someone behind a rather large monitor the screens feels a bit narrow, it’s all vertical.
Apart from this, I liked the fact the earlier design was slightly different from other Opera sites. Now it looks rather the same.
But I will have to get used to it, I think.
Sorry, Daniel. But, as you say, it’s a work in progress. I’m very willing to be convinced! (The content of your site remains excellent, of course!)
Jez
using
I liked the old one better. This one may drive me from this sit, it just doesn’t look good.
using
I liked the other version better. Felt “specific” to Operawatch!
using
Daniel, I would have deleted such comments on my blog as well.
using
“posted about 5-6 comments under my name”
- well at least you noticed!! I was beginning to wonder….
That is why I said, “get a ’sign-on’ ..” - no ‘imposter’ would be able to, he would need the password!!
using
nice design (and thanks for the alternating backgrounds in the comments. one criticism from me: the feedburner counter looks completely out of place: above the individual blog post it looks like it’s supposed to be in the empty space to the right of “email updates”. And visually it simply doesn’t fit to the rest of the design, i.e., colors and font and all. It’s not quite as annoying in the “subscribe” section on the right side, but still awkward.
But again: nice design!
using
Sweet Dan, Really Sweet!
using
Congrats on the alternating background colors for comments, Daniel.
For the sidebar background color, try the same color as the background colors for comments. If that still makes sidebar text difficult to read, then try a vertical dashed or dotted line seperating the content from the sidebar.
Another thing I noticed is that on the home page, every article has two links to the comments section of each article–you only need one link.
Nice progress so far!
using
IceArdor, having links to comments in the beginning and end of the post will hopefully encourage readers to join in on the discussion and comment.
using
Looks good, Daniel!
using
looks much better on the iPhone too
using
Here’s the old website layout: http://web.archive.org/web/20050324022137/operawatch.blogspot.com/ Thought it might be interesting to go down memory lane. I can hardly remember this site looking like that.
using
IceArdor, good catch.