As you might know, yonasu.com recently went through a pretty big design change. That design change was pretty popular and I got some really nice feedback for it. However, that design ended up being too complicated, too time-consuming and just not wide enough. I’m becoming more and more interested in photography and video and I want to be able to share all of that in a bigger resolution than the previous 618 pixels. Posting took a lot of effort before too, as I used three different custom fields, I had to manually create 2 or 3 thumbnails for each post. The good thing about the previous layout was being able to show more content on the front page. That was very ambitious of me, but something I couldn’t keep up as I had to post a lot to make it look active (it just wasn’t possible while working 5 days/week with a pretty bad schedule).
There were also technical issues involved. With the previous design I used a lot of plugins, plugins that prevented me from using automatic upgrading of WordPress for example. Also before this update I couldn’t use the flash uploader which was nothing but a freaking pain. There were also speed issues, mostly noticed on admin pages however.
I did like the previous design, so I didn’t make this change because I was sick of it or anything like that.
This design was made to fit in a 1280px width (sorry 1024 users, it’s time for an upgrade). Everyone with a resolution less than 1280px will still of course be able to read the blog, but the sidebar will be cut off. The main content width is 800px and the sidebar is 300px (not counting margins, paddings etc.). Since the blog has a lot of big photos I’ve decided to use Lazy Load to make the site load faster (that sounds ridiculous, haha). Lazy Load is a must have for layouts like this imo.
As for fonts, I use Lucida Grande and it’s Windows/Linux equivalents (Lucida Sans Unicode and Garuda). Other than that there’s really not much to it, it’s a very simple and clean design.
While coding it was tricky (coding isn’t really my strong side ^^;), the hardest part was designing it so that it didn’t turn out too much like Danny Choo’s site, seeing as we have a very similar color scheme and because I wanted a small header. I think I managed to get around that pretty well, and I will have to say thanks to Ragnar of OTAKUPHONE once again, he didn’t code anything for me this time, but I did use him as a design consultant.
There are still things that need some tweaking though, and it will take some time to fix all the old posts for this layout. But if anything is out of place, please let me know.
Oh and yes, I did change the permalink structure, of course doing so without losing pagerank and the old permalinks will redirect to the new ones. Also, the blogroll will be added within the next week.
Known Issues
- The text’s alignment in the search field at the top in the sidebar is slightly off in Safari and Opera (nothing that I find annoying but I’ll look into it).
- The site supports IE8+ (if you use IE6 or IE7, upgrade right now, or just switch to Firefox already).
- The content/sidebar divider is broken on post pages just above the footer in Opera.
- All posts haven’t yet been moved to their appropriate categories.
Thanks for reading and let me know what you think!
Related posts:
{ 42 comments… read them below or add one }
Holy freakin hell sir! This is damn hawt! :D I must say, this is one hell of an awesome design, love it!
And heh, seems you have beaten me in the speed of killing off the 1024 users. Right now my site barely barely just fits on 1024 – not entirely sure when I’ll cut that support, but probably sometime soon.
Oh and absolutely love your new mascot! ^_^
Thank you kind sir!
It’s good to support 1024 since there’s a lot of netbooks out there with that resolution. But it’s not like I’ve completely given them the finger, it’s just the sidebar they’ll miss out on anyways^^ It’ll be an easy update for you if you decide to make the content column wider, that’s another good thing with a layout like this!
I’m a 1024 user :( Although not for much longer
@Joe, I see. I’ve tried using it in 1024 and I don’t find it that annoying actually, even though you can’t see the full site without scrolling, the important part is the main content column after all.
Good thing you’re going to upgrade though!
Looking slick, nice clean layout and user friendly.
Also My new banner has Airi in a bikini … awesome!
Thanks! I hope you don’t mind if I use that as my banner^^ It doesn’t get much better than Airi in a bikini…
Man, yeah, now that it’s live, I really like it. Looks so freaking hot. And, man, how I like the spirit of 1024/ie-go-and-upgrade spirit of yours, honestly. ^^
Man, you actually inspired me, now I feel like I should start doing a nice and simple design for me as well, you know, until I manage to finish my main design – this one is really hard to finish, haha.
Thank you!^^ Well as long as the IE users use IE8 it’s all good, I don’t really give a crap about the older versions anymore.
Yeah, your design is more complex, much like the design you coded for me. Make sure things are more automated with thumbnails and stuff, doing it manually is such a turn off :P If it’s only one thumb per posts it’s okay though.
Content is still king though ;)
My work notebook supports max 1280×800 resolution. So I am OK. Tho I have to check how it will look on iPhone3G. Have you thought to make an iPhone or Mobile version in case we want to get our daily dose of Jonasu on the go? :D TBH The anime figure plus the orange still reminds me at Dannychoo a bit. ^^; But as I check your site more often it’s not a problem.
I’m not sure, I don’t know anything about developing apps for the iPhone, but maybe someday^^
Very nice design, I really do love this clean themes and the images that fade into view, I will eventually find the time and get on with creating a new theme myself.
Thank you. I also like the fade effect, though I’ll have to ask someone with a slow connection how it works, I might have to increase the threshold a little bit…
Wow the new Yonasu looks really great, light design, good colours! Keep up the great work!
Thank you and I will! I’ve kind of inspired myself with this change^^
Hey ;)
Just as a follow up to our last tweets, I’m posting a few honest comments here. Hoping that will help you.
First, and this is slightly off topic, the first time I saw you site about 2 months ago (sorry I’m late), the very first thing that came to my mind, without browsing deeper than your first page is: “Oh, that’s a Dannychoo clone”. Which is not bad I mean, not only Dannychoo has the right to blog about Otaku culture and Japan. Really what made me say that, were the extra-close orange colors and typography choices. And that is still the case, 12px Lucida Grande on both sites, same link colors and style, – same color scheme, but you miss the light green – exact same page shadow etc… But that’s okay. Plus I really liked some of your personal layout ideas in the past version, both on top page and articles ones.
Now about the new version. I already told you on twitter that to me, this new layout just feels like a MichaelFlux.com 2 – or a Dannychoo skinned MichaelFlux.com. The main layout looks based on Michael’s site, using wide pics and lazyload just make it more obvious. But again that’s okay. Michael’s as a very nice new theme, I can understand that one can be inspired by his work. I had thoughts of using his layout for my site too, but it doesn’t suits my needs and I don’t have time to write that much.
What I don’t understand is that in your article, you explicitly say that you tried to step away from Danny’s design… Where? Why don’t you start by dropping the typography, color scheme and graphics elements (shadow)? I was also surprised that you tweeted a lot about that new version that just turns out to be a little deceiving. I was expecting something more personal, but hey, not everybody can improvise himself web designer.
Okay, now that you hate me from the bottom of your heart with my lame comments, I’d like to congratulate you about the 1200px wide layout. This is just crazy, very ambitious and I love the idea that somebody finally took the risk of doing something that’s actually wider than 960px. I’m a web designer myself, following and studying trends closely, and I was always thinking about that day when pages layout would become wider. Now that I see your site, I know this won’t happen soon. Here’s why:
While this is a very ambitious shot you called here, you directly bump into the problem that most of people don’t have their browser window opened that wide. I’ve got a 24″ that’s running on 1920×1200 and yet I can’t see your sidebar. Well actually I can see it but not entirely. Which means I don’t click on your advertisement, nor on your categories. That’s too bad because you actually have pretty slick ones…
Second, the typography issue. As I said earlier on your twitter, it is known that short lines are easier to read than long ones. Which means that when you write huge blocks of text like you did here, even if it’s interesting, lots of users will skip because it’s a pain to read. First thing to do is to increase that font size if you don’t want to shrink your main column. Remember that using book sized fonts on a screen is wrong, simply because your eyes aren’t at the same distance when you read a book, and when you read on screen.
Random thought: try to open more space between articles on the top page, that would definitely help differentiate your posts.
Anyway I’m pretty sure that you’re still tweaking it on the background. So I can only wish you good luck. But really, first thing to do is to drop those Dannychoo rules from your stylesheet. Which won’t be an easy thing as the girl in the footer just use that color scheme. How about giving her new cool colors in photoshop and match your chart on her? There’s a lot of handy sites out there that features just color charts for inspiration.
Hope my comment helps in a way… This must be the longest comment I ever wrote. Take care and keep up.
First off, I have nothing against you for giving me constructive criticism, it’s useful and doesn’t hurt my feelings :)
I’ve surely been inspired by Michael and his blog, but it’s really not based on either his or Danny’s site. I wanted a 2 column layout with a wide content column, that’s a pretty normal layout, it’s not just me and Michael using it. I did however find out about Lazy Load via Michael, but that’s not copying anything, I need it so that I can have more content on each page while at the same time having a decent loading speed.
The color scheme did not originate from Danny’s site at all, I started using that scheme because of the premium theme I previously used (http://www.elegantthemes.com/gallery/artsee/). So it’s a mere coincidence that we happen to have a similar color scheme and I have no intentions of changing it, at least not in the near future, seeing as I’ve rolled with it for a long time now. I had no idea he used Lucida Grande though, I was just looking at a table (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) of web safe fonts and decided to use Lucida.
As for the 1200px wide layout, I was inspired by hikky at http://austrianotakulife.wordpress.com/. I might however look into making the sidebar smaller if there’s more “bad” feedback. I used the word divider for the shadows which I shouldn’t have. I knew Danny used shadows as dividers, using one on each side however changes the look significantly in my opinion. I can of course use another type of border but I like the way the content column “pops out” when using it on both sides.
As for the long lines, I am aware of this and I’m thinking about adding a padding on the right side to make the lines shorter.
Oh and the mascots aren’t made by me, Dave from Watermelon Studios is my artist.
And actually I think it looked much more like a Danny Choo copy before, as I used 80x80px thumbs with post excerpts and post meta just like he is.
One more thing I just recall when I saw your new version, I thought that you actually bought to Dannychoo a light version of his engine. Also having 2 tabs open with your site and Danny’s is very confusing.
I really don’t want to be mean, but honest. Don’t take those comments against you, I actually like the content of your site ^^
I see what you mean, it’s not confusing if you’re on the front page, but if you scroll down on a post to the point where you don’t see the sidebar anymore, it can be confusing. I don’t think it is but I definitely see what you mean.
Oh and I’m sorry for any spelling/grammar mistakes, I’ve only slept for 3 hours, and now I’m off to work!
I like the design but I have a 1280 capable computer but I don’t use full screen for the browser. So 1024 works well for me but I guess it depends on what your majority visitors use.
Thanks. I know people still use 1024, I have a 13″ MacBook myself (although connected to an external monitor at home) and I don’t use it in full screen either. However, stats show that the sidebar isn’t used by a lot of people so if it’s cut off for some, it’s not that big of a deal. But I might look into making the sidebar smaller sometime anyways.
Nice moves, yonasu, great redesign. Like I said, really like it when things are shaken up, and it looks like here it’s definitely worked out well!
Thank you! I think it’s got a more modern look than the previous one^^
lookin’ good yonasu! it’s clean and a good use of real estate. although, i have to agree with tomakun on the wide paragraphs of text. a little daunting at first glance.
Thanks! And yeah, I’ll fix that with some padding :)
Well I have 1024px and it looks ok. It isn’t cut off, it’s just… mmm… haha can’t explain, lol. So bad my screen isn’t that big.
It looks fine and really clean! I like it ♥
I see, well that’s good, you still see the important part of the blog^^
i can see the Danny Choo and Micheal Flux similarities but thats not a problem.
Love the layout. A lot of my users use 1024 so I’ll have to hold off on widening my page for now.
Great upgrade, looking forward to you video posts! Did you see my first youtube upload that you helped to inspire?
Thanks! No I haven’t seen it, but if you let me know where it is I’ll take a look^^ I’m 108 items behind in my RSS reader right now so I probably haven’t gotten to it yet!
I like the layout and I think you have a nice blog. I usually don’t follow the Japanese-themed blogs (except Misspent Life), but he has a more personal blog.
What I don’t understand here is for example Tomakun, why do you bother what kind of blog Yonasu has? It’s really hard to be original on the internet, especially when it comes to blogging. So what’s the big deal? So what if some blogs look a like. The layout is the first impression, yea, but to have people following you, one needs to have interesting content. You could spare Yonasu your long comment and just focus on the good things. These comparisons are silly, because bloggers inspire each other, especially those who write about the same topic, Japan, in this case.
How about we bloggers give some positive feedback to each other. It’s so easy to tear somebody apart, how about giving constructive compliments? Maybe not as easy.
Just my 2 cents…
Good luck, Yonasu. :)
Thank you MKL!
Indeed it’s very hard to be original on the internet, and that’s an “issue” in this niche actually. I’m not talking about the design though, I’m talking about the actual content. Sometimes you see posts about the same thing on 4-5 blogs (or more), not always a bad thing but a little annoying at times. As you’re saying, the design is just the first impression, and the actual content is king!^^
I agree with you in some way MKL. I wasn’t trying to tear him apart at all but to give really honest feedback on first impression from a design point of view. Not about content.
You say “How about we bloggers give some positive feedback to each other”, I say yes, but what’s the point of having only “Oh! I like it”, “Oh! that’s great”, “Oh! Beautiful”-like coments all over the place? How is it gonna help Yonasu know if his new layout is good or bad?
Check out the comments in this post, even if mine might feel a little bit rough, it is honest and actually the most constructive as it gives Yonasu another kind of feedback + solutions.
So no, focusing only on the good things doesn’t help him there. You guys did your job, I did mine. And I’m pretty sure Yonasu is happy with it.
Tomakun, I did not see it as a constructive criticism. You basically said he used to be a Dannychoo copy before and now he’s like MichaelFlux.com 2. What is constructive about this? For me you imply that he’s unoriginal and therefore a copycat of these 2 blogs. I think you were to hard on him. You criticise him according to your subjective opinions how his blog should or should not be. You are just one opinion. I don’t mind stating your views, but you know it’s a lot of work to do a makeover of a blog and usually we hope that we will get some positive feedback. You say it won’t help him if you give him positive feedback. Well, I guess that’s your character. Because you think your opinion is so good, that you can affect people to change things accordingly to your suggestions. I’d never tell another bloger what you told Yonasu, I guess that’s my character. I mostly comment content related, where someone has to defend the things he said. That’s a healthy debate. But to go and tell what colors and font and how many sidebars one should have, I’d never do something like that. if you visit someone’s house, you also don’t tear apart the interior design and personal taste, even if you felt you’ve seen exact furniture and wallpaper in someone else’s house, do you?
That’s just how I see it. I’m not saying you had bad intentions, I just felt like you are someone who feels what’s right and what wrong and that by following your advice you help someone… No offence, just my 2 cents :)
Really digging this new look. Very clean, very simple, and very much about focusing the reader on the content. I also like that round little orange guy, and the comment you used for the RSS link. ^_^
Thank you! :) That was definitely one of my goals with this, focusing on the content that is. The orange guy’s name is Guu, will write about him sometime^^
@MKL
Sorry but your last reply is lame. It’s easy to end with a paragraph with ‘no offense’, when you are actually judging me without knowing me, reducing and distorting my ideas.
“Because you think your opinion is so good, that you can affect people to change things accordingly to your suggestions.” What’s that suppose to mean anyway? Have we met already? Now this wasn’t the purpose of my comment in any way.
In the second part of my comment which you cleverly ignore in your reply, I was actually giving -objective- advices, because I actually know what I am talking about. Yonasu is free to do whatever he wants with that. I actually reacted to his content and the part where he says he wants to be different from Danny’s site.
“You say it won’t help him if you give him positive feedback” – Here I meant “-ONLY- positive feedback doesn’t help”, and you know it – don’t make me say what I didn’t.
Anyway I apologize if it sounded too rough for you (I agree it actually sounds too hard) – English isn’t my first language either – although Yonasu seemed to understand my approach clearly as his first words in his reply to me were: “First off, I have nothing against you for giving me constructive criticism, it’s useful and doesn’t hurt my feelings :)”
And that’s perfect because my comment was directed to Yonasu.
While your comment was indeed a bit on the harsh side, you had some good points. I’ve been on the internets for far too long to take things like this personally.
I probably should’ve been more detailed when I said that I wanted to move away from the Danny Choo look. I meant that I wanted to do what I could with the idea I had in mind. When I look at it now, I think the resemblance is next to none as long as you don’t dig into the details.
Tomakun, I did same to you what you did to yonasu, constructive criticism. I’m a bit surprised about your reaction. I didn’t want to go to every point you make, I was talking about the impression I got. I don’t know you, never claimed to do so. I am just a random blogger, who happened to stumble upon this blog. I didn’t wanna start a kindergarden-fight, for that I am sorry, yonasu.
Whatever you guys have, it’s up to you. I felt you were too harsh on him. Man, you almost wrote a longer comment than yonasu’s post and that was my impression and the rest is history.
Don’t worry, I won’t do something like this again, because it’s a dead-end street.
I must say I cant see what the fuss is about with your design, there are 1000s and 1000s of blogs/websites etc out there that use similar colour schemes, designs and much more. Just because you use orange and have a clean look doesn’t mean your in any way copying Danny Choo or Michael Flux its your own design and its not like you’ve copied there sites as your site looks nothing like either of them if you look at it less picky.
I intend to use orange and a clean theme myself, orange being my favorite colour and the fact I love sites with a clean feel to them, does that mean I’m also copying? If so then I’m pretty screwed as no matter what colour scheme and design that I go with there will be other sites that have a similar look.
The only time I can see such a complaint being justified is when its a direct copy of the site or somebody has basically copyed a site and made a few changes then I can agree its not right.
That is true, and indeed, if you look too closely on the details you’ll see that there are many sites that look alike. I also like orange a lot, and I think blue is one of the few colors that goes well with it.
So you’re going to use orange on a clean theme too? Let me know when you’re finished! ;)
I may end up just using a premium theme from somewhere as lately I haven’t much time to design my own. I like some of those on the elegant themes site you posted and compared to many other sites they are pretty cheap.
Let me know when/if you decide on a new premium theme! :)
{ 2 trackbacks }