A new blog look & feel
This blog has been running continuously for over 10 years now. And while I think that the level of content has improved somewhat over the years (certainly my command of English did), I’m afraid that we never really touch with the design.
This blog theme was taken from (if I recall properly) dasBlog default skin with some color shifting to make it a bit more orange. And I kept that look for the past 10 years, even when we moved between various blogging platform. This has grown tiring, and more to the point, the requirement that we have today are not nearly the same as before.
Hence, the new design. This include responsive design, mobile friendly layout and improving just about every little bit in the user experience.
One major feature is the introduction of series, which will allow reader to easily go through an entire related series of post without them (or me) having to do anything.
I would appreciate any feedback you have.
Comments
Oh my god ... it's flat and round and web resposive and ...
what a change !
I'm still in shock , but @Ayende - NICE WORK
I liked when your blog looked like something hosted by Geocities or Angelfire!
Hi,
Looks good! Particularly like the 'series' feature. One minor usability niggle is that everything is in reverse date order, which I found surprising when I tried to read a whole series as I sorry of expected them to be in reading order. Still, I can get used to that if it's by design.
Nice! A vast improvement. I assume you are still using RaccoonBlog behind the scenes?
If blog name, logo, phone number and other decorations are more important than the actual blog content, then i guess design is ok, otherwise it's a huge distraction and step back! Post content is totally hidden behind other unnecessary visual elements (just look at the size of that date! Its almost bigger than Title!), not to mention it looks like $5 theme from ThemeForest. Its strange to see so obsolete design while all other blogs are trying to follow medium/ghost/material/metro design, structure and read flow.
Like the update Feedback as requested
Hmmm, I posted the previous comment once and it immediately showed up twice with times hours apart, as though shown in different local times. Funky! :)
I think I'll give some feedback as well:
Nitpicking: - The fact that the side columns are not equal, and the content does not look centered and emphasized, is somehow disturbing visually. - The left sidebar is a bit too wide and too prominent. I do understand that it is supposed to give a particular feel to the new design but I think it needs to be toned down a bit and maybe pushed to the visual background.
Overall: - It's a very stylish look and I especially like the orange/ purple/white combination - I think it needs a separate layout for "read mode" that focuses on the content (IE: when reading a single article) - I think fonts need to be slightly bigger.
I would agree with a previous poster in that the sidebar is way too big. I would guess your purpose for this blog is to share information with your readers, and hope that along the way you can promote yourself. The size says quite the opposite, that your primary purpose is to promote yourself. To read this blog I believe one must take advantage of the responsive design and make the window small enough as to rid the window of that hideously large billboard to the left. Content is king.
Nitpicking: - The fact that the side columns are not equal, and the content does not look centered and emphasized, is somehow disturbing visually. - The left sidebar is a bit too wide and too prominent. I do understand that it is supposed to give a particular feel to the new design but I think it needs to be toned down a bit and maybe pushed to the visual background.
I agree that the sidebar is too big. Plus a two column layout on a larger screen isn't comfortable IMO. It is just so natural when your eyes need to follow down one axis to the next post.
Others have made some of my points, so I won't repeat them. The one item not mentioned though is some of the font coloring.
The yellow font on some of the backgrounds washes out and makes it very hard to read. Particularly, the yellow on white gray in the google+, facebook, twitter, and tag balloons just under the post content.
Looks good. Two issues here on my Windows Phone: - Login with Microsoft account doesnt work - Strang white column at the right hand side
Looks way better. "Welcome to the 21st century" better. :-)
Left sidebar might be too big is my only nitpick. Everything looks great. Color theme goes well with Raven website and Studio. :-)
I like it. I like the asymmetry of the columns. Don't change it.
Looks very decent on my Lumia 1020, well done!
Great! I liked the emphasis on you real name, since I believe almost everybody call you "Ayende" :)
New blog looks great!
I like the single-character name and email fields. (I'm viewing at 1200x1920 at the moment.)
Also, no theme detection post showed up in my RSS feed. Yay!
Whoa this is a lot different from when I first came here in 2007 to watch your Hibernating Rhinos screencasts! I'm not a designer, so I can't really criticize but some of the elements feel too big such as the social buttons in 'stack view' and the date container across both views.
The colors are beautiful... that's the hardest part imho
Ouch, that hurts my nostalgia :D
But seriously, it looks quite good and it seems even faster than before.
Nitpicking corner:
Wondering what code markup will look like:
public class MarkupCheck<TMarkup> { public static string WhatWillThisLookLike(IEnumerable<TMarkup> aTest) { return aTest.Select(x => x.SomeThing).Single(); } }
Looks great on my Moto X.
I remember the screencast that really blew my hair back was your service bus that you designed & built in 45 minutes flat. What a marvelous thing to witness. Thanks for giving so much to the community Oren.
Yay! Much nicer! Much crisper! I really like the feature to group posts into a series.
Just viewed the page source, looked at <link href="/blog/Content/css/custom/ayende?v=JP2xhAi5jodaDeGeCQR-JLUKVNidxcWdgybMm1yc9-Y1" rel="stylesheet"/>, and found this:
/* Minification failed. Returning unminified contents. (7603,12): run-time error CSS1036: Expected expression, found ';' */
Looks like the offending line is: z-index: ;
In general I like the design (certainly a lot more than the previous version) and the new series feature sounds fantastic. A couple of points:
It is a big improvement, so kudos!
The background for the left panel is over 250kb, really lags on 3g.
Great job
My feedback :-)
*The default text color in the searchbox should be lighter then the text you actually typing. *The default text in the searchbox should dissapear on focus (and appear on defocus when empty) * The yellow buttons beneath your post (twitter, FB etc) needs a bit more contrast.
* this form, the purple background of the label is too much. Get rid of the purple background and make the labels purple and bold. * maybe the datetime fields can be in the users browser local format ? Maybe time zone converted? But the last one is maybe to much. * I actually wanted an native Ayende App for IOS and Android ;-)
Jason, The comments are flat by design. We want to keep a single thread of discussion, not go of in multiple tangents.
Fair enough. I would posit that threads still go off in multiple tangents, they will just be more difficult to read. For instance, we've gone off on a tangent but there are multiple comments between my first one and your response and I only know that you are responding to me a) because I got an email notification and b) I know the context. Anyway, it's your blog so it's completely up to you and I don't mean to bash because I do like the new design a lot
More blink tag.
Nice! But I think the font can be bigger.
I usually read your blog in feedly, but I had to check out the change. I love the new design, but I almost feel obliged to call your phone number. Just like when you just walk on the walkway and a shop's automatic door opens and it feels awkward to just ignore it and walk on.
Great design! I like it :) the animation and the colors simply beautiful!
only two suggestions: 1. increase a bit the font size 2. decrease the left sidebar width
As I small (and completely unnecessary) UX enhancement - might I suggest that the Rhino logo have some form of animation on hover? This seems like a missed opportunity :)
I love the new design!!!
I found a few minor glitches, I guess related to the font choice.
Here you can see them: http://img42.com/collection/nA8Oe
I'm viewing the site on Chrome 42 on Mac OS X Yosemite, no zoom applied.
I like the design, however what I'm missing from the old blog is the ability to just read all new articles by scrolling down a page. I'm usually visiting your website a few times a week to see if there is any new content. Now I'm forced to click my way through the page to read all new posts.
Maybe instead of having various columns, there could be a single list with posts which can be expanded inline.
Commented too fast. I just realized you can switch into "stack view". In my eyes this should be the default view though ;-)
Great job!
Thomas, There is a stack view instead. We intentionally show the grid view so you can look at a glance at all the recent posts.
I think my only comment is I agree the left sidebar should be slightly different when viewing a post
Maybe with a popup full version when you hover over it
Congrats on the new design, it looks slick and modern. Also, I like the fact that I can choose between Stack and Grid view, most websites enforce the grid view for desktop and the stack view for mobile.
The new site looks great!
I came here to complain about the grid view, but then read the comments and realized I could switch. Yay for reading.
This might be a hint to work on the UX of the grid vs. stack button, place it somewhere more apparent to new users. But that's a hard problem to solve with low return value.
ahhh your copyright (left bottom) is expired in 2012
Awesome, I see both my "nitpicks" were addressed (side bar size and a comments preview feature). Thanks.
Using the preview, I still have trouble figuring out how to add a code block. This works mostly:
But still requires manually escaping the "<" character, although it appears (https://github.com/ayende/RaccoonBlog/blob/master/RaccoonBlog.Web/Helpers/DynamicContentHelpers.cs#L55) that this could/should be taken care of by the blog engine.
Comment preview