New Site – New Direction
So I finally got around to redesigning my site with the sacrifice of being overworked and silence on my blog over the past month. For those who still stuck around, I appreciate your support very much!
Why the Redesign?
I try to keep a tradition of redesigning my site every year to test my skills and also to look back at my progress. Another reason for the redesign was to fix some usability issues as well as re-organizing my categories and posts. I felt some posts were hard to find and the categories were getting a bit mixed up. This redesign was way over due and I’m happy I’ve finally finished it off so I can move on with my other projects.
The Color Scheme
The main reason why I chose this color scheme was to tie Design Bombs back into my personal website. I wanted to have my blog and the gallery side by side, and having similar color schemes and having the gas mask mascot seemed to tie things into place.
The Blog
-
Blog Top Navigation / Sub categories
I reorganized the top navigation so you can easily find the articles you are looking for. I also created a Beginners and Intermediate section for those who are trying to filter tutorials by their learning levels. -
Side Column – Design Bomb Gallery + Resources
I have been wanting to integrate some good finds on Design Bombs on the site, so now you can keep up to date with the latest and greatest design entries as well as the resources.
-
Full Archives
I’m not sure why I never had this page but now that I have a decent amount of articles, it was a good time to list them for those who wanted to quickly browse.
-
RSS Subscriptions (All posts vs Tutorials only)
You can now subscribe in three ways: All feeds, tutorials only or by email. -
Sticky Tool Box & Switch Article View
In the post level pages (like this page for example), I added a sticky tool box on the left side so you can easily access them as you read the article.Since the site is dark, I wanted the users to still be able to have a choice of reading text on a white background. Reading long articles on a dark background can be straining on the eyes, so now you have a choice on how you can view each post.
Specs
This site was my first attempt at HTML5. I had a lot of fun coding it and I also learned some great things about the new features and benefits. One of my favorite places to research about HTML5 was www.HTML5Doctor.com. It was an excellent source and they do a great job breaking it down. Some CSS3 were also sprinkled on top for those with modern browsers.
I stopped supporting IE6 (if you are a regular visitor and still on IE6, please upgrade!). Knowing that 2% of my visitors were IE6, I felt it was now time to lay this browser to rest. Good bye ol’ friend…
Big thanks goes out to Jeff Star for all the great WordPress tutorials on www.perishablepress.com. I was on his site many times researching various functions and custom hacks.
Also thanks to Rogie at Komodo Media, Nick at Icon Dock, Mark at famfamfam, and Yusuke Kamiyamane for their beautiful icons.
A New Direction
As I was redesigning this site, I tried to view this as if I was the client. I felt the previous site didn’t really show my true personality and didn’t represent who I really was. I would like to switch gears and make this more of a personal blog (on top of the regular tutorials of course). I won’t bombard you with personal gibberish day after day, but I am planning on sharing something I find inspiring or interesting once a week (maybe on Fridays).
Critiques, Comments, & Feedback
I am always open to constructive criticism and feedback. If you have any, please don’t hold back!
Popular Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment100 Peeps Have Spoken Their Minds...
Soh, this looks great! I feel it reflect yours personality a lot more. I love how the social media icons are fixed, but doesn’t cover the comment section. nice touch.
Well done!
This looks good – well organised with a lot of subtle design features. Nice one!
Dude, looks great. Mad props! Well designed and functional.
Oh man! Finally! :D have been entering your site twice a day since march 9th! The new design and functions is awesome! Love the toolbar wich stays top left all the time, and the smooth scrolling to comments or top of article.
The “swich article view” option was very nice too, and all so simple yet so powerful! :) You are a true web-design jedi!
Really looking forward to reading all the new tutorials!
Looking good. I especially like the color scheme. Keep up the good work and have a wonderful day.
Awesome redesign Soh. About time you got it done! :)
Really great evolution! Love it!
Nice redesign! I like it :)
Hey man, congratulations..great design.
I’m a big fan of your work, the way you put accessibility in mind is just…impressive.
Just two notes, try to make the scrollbox stop sliding when reachs the end of the article container, also you should consider the comment textarea JS as it removes the comment text if you unfocus/refocus on it.
Other than that….well done!
I think your new design is awesome! Very stylish! I loooooove the colors and the comment form and the mouseover on the twitter thing in the footer are so cool! Great job!
This is awesome, great job Soh.
i just found one small bug in the comment textarea , when it loses focus and then clicking on it again all the text is gone i`m talking about my text not the default ” Don`t be shy speak up”
Amazing job Soh, the site looks awesome and offers a great experience! Congrats man! :D
Wow.. Its awesome. Congratulations!!
Loving the new design, absolutely great.
I would love a little tutorial on how you done your menu :P
Looks absolutely great!
I’ve been coming back to the site or looking for updates in my feed reader for the past month!
Great stuff! Keep up the good work!
pffmihai
Amazing Site! Been waiting for this since your Quick Update on the New Portfolio & Blog I love the design, and the functionality!
Wonderful new design :) A lot of people tend to forget the contrast when making dark themes but it works great here.
Glad to see some more people switching over to HTML5 / CSS3.
Keep up the good work :)
Soh, it looks great! I love the attention to detail that you use in your work.
Soh, this looks awesome. Incredible original and creative… I’m inspired!
I love it !
I just see that you are a skateboarder too !
Contact me if you pass by France !
See you
I love the new design, much cleaner and easier to use, well done!
Very nifty redesign, definitely lots of fun things here to check out. And the side bar on single pages is very slick!
looks great ;)
I also thought how to integrate something like the “moving sidebar” you got there into one of my sites, but currently cant find a useful section to place it …
Now the big but: Hey, you ripped of me colourscheme ;)
Actually its interesting what comes out based on the same colourscheme .. same base, totally different style and design ;)
I’m currently also in the process of redesigning my site – it was too .. lets call it .. static. And too nice, too. I need something more abstract, including harsher contrasts, so .. the current site is offline (except a screenshot of it, added as temporary replacement), waiting to be redone ..
cu, w0lf.
Very clean redesign of your website, keep up the good work!
Dude your site looks awesome! So clean and professional, congrats.
i forgot to add something , the Switch Article View it would be great to use a cookie so it can remember the preference each time i view the site .
I love the Twitter i icon :)
Look great! Very very nice! Perfect in every parts! :)
Awesome as usual – even more unique than the last version. Love the main nav.
Awesome redesign! Love the color scheme and sticky tool box.
I am not agree. The first one was much better than this one. All site is in Black and Gray that looks so odd to me. The earlier one was eye catching because of vibrant colors in that. Everyone wanted to stick on the website to explore more and more. But, not now.
Nice work!
Been missing your awesome tutorials and tip :)
Loved it! Good work mate!
Really great job, nothing to add really :)
wow…ck ck ck cool
congrat..its for toward css3 & HTML5 certain. shadow will dominate and shall a lot design black theme…
Awesome work Soh!
I love your attention for every bloody detail and I think your new pages are more than a decent follower of your previous ones :)
GJ!
Oh … and I LOVE that favicon :D
Just a solid site…. fresh, fun, user-friendly, great new features….
Great! Just Great. Wonderfull design =) Just you’r works. I like the main menu (:
Don’t know if you’ve spotted that when you scroll to your tweets at the bottom of a page the sticky tool box appears above the tweet graphic ie it’s bleeding through, sorry thought you’d like to know.
Site looks awesome, great redesign and you have inspired me to redesign my personal site.
Like the new site.. just don’t like these bizarre designs.. I guess they’re OK.. Not getting the beaver with no skull or the duck-hand with a cloud pouring out of holes in its head.. I prefer the old site, personally, but I still like the blog. Nice code, otherwise.
Thanks everyone for your feedback and suggestions and critiques!
It seems people either loved it or they really missed the old one (seems the colors on the old site was the big thing). Regardless I am happy that I made this switch and I am back on track again :-)
@Ibrahim and @Gabri thanks for pointing out the input box bug. I will be looking into it!
@Ibrahim The comment scrollbox was supposed to take people to the comment section, so that is why I had it stop at the top of the comment area :-) I would love to hear your thoughts on that if you thought otherwise~
@Julien I would love to check out France, there is an anual street dance contest there called “Juste Debout” (one of the biggest in the world). My friends enter each year but I am planning to check it out one of these years!
@Fwolf Great minds think alike :-)
@Gabri Great idea, I am def going to implement that very soon! Thanks for idea.
@Harry Sorry you felt that way, I hope you continue to stick around!
@KennyBoy7 I think this is a mac issue, I just noticed using my wife’s laptop. I’ll look into it, thanks for pointing that out!
@Grant The illustrations are there since I wanted to incorporate more of my creations and characters throughout the site. The Brain boy is there to play on words with “Speak Your Mind”, and that crazy bird is my version of the twitter bird lol I do appreciate your honest feedback and glad your still sticking around. Thanks!
Geeze Bru excellent redesign [".][",]
Love the new site! takes a few minutes to take it all in but there is so much stuff going on (behind the scene ) :)
Whoaaaa! this is my dream design!!!
Sick new redesign man. E.P.I.C. +1 on a tutorial regarding your new top nav menu. That thing is so smooth. Great job!
So awesome Soh! Love it!
You inspire me to do better in my work – damn you make me jealous! haha!
I am always addicted to creative work and this what i like to have. Thanks for sharing it.
Awesome stuff!
wow!..it’s been a great surprise coming to soh and viw this new re-design…love it!…sncerely!..great job!…^_^
It’s worth the wait., Seeing your new design is so inspiring., Wonderful job., and you have an ads space now.. :D
soh! i came to check in tutorials on css navigation bars, and was surprised to see the blue was gone!
love the new design!
Hey, Your new design looks awesome, nice work!
Simply perfect, soh!
Success for you…
I can’t possibly say anything that hasn’t already been said, but this is definitely one of the best redesigns of the year. Awesome work, Soh. You truly have an eye for clean, detail-oriented design that works in every aspect.
Oh, and in your article, your link to “all feeds” is incorrect. It points to the same location as the “tutorials” feed. :)
Awesome design dude, I would say you are one of the best designers known to me.
Loving the new design, great.:-)
great. I like it
This new design brings in more more personality into you and blend really well with designbombs concept. Thought I would love to have the blog column to be larger for better viewing.
I wondered what your next design will look like. :)
men nice looking :d
better then before :D
Great work and well thought out layout and functionality as usual.
Keep it going :)
James.
Hi Soh,
I really like the way you’ve done the horizontal drop downs and the little animated speech bubbles at the top. It would be great to see tutorials about these for relative newbies like me if you fancy doing them. I’ve got an idea of how I’d approach doing them myself but a tutorial would help to fill n any gaps.
Thanks,
Dan
This is a GREAT design!
awesome!
great design! However, I do miss the old blue sky header…
Fresh new design ! Congrats ! ;-)
magnifique!! i love your designs.. keep it up ;)
was beautiful and the previous one .. but this, i dont know.. a new generation in webdesign. I like.
Any chance of a tutorial on how you took the PSD and translated it into a wordpress theme?
@Ian I was actually thinking of doing one. Just need a little more time :-)
Hey…
It is excellent, brilliant,out standing..am a great fan of u SOHTANAKA.COM.
I love this new design very much..what a stuff! Magnificent. Thank you.
Keep rocking..best wishes.
by SAJEER MOHAMMED, Cochin, India
Thanks Soh! I’m planning on using WordPress as the base for my next website, and it’s rather daunting.
Looks awesome Soh. I love it. You did great.
Awesome design! I always came to reference your website, and lo and behold I was surprised by this new design! A major improvement, Keep it up!
Love it!! Design is so clean and every detail so well thought out!!
I am definitely inspired.
Soh – your redesign is way impressive – you are very talented dude :)
Mad props!! Keep up the great work!!
Hmmm this new design is AWESOME, I LOVE the comments section and the footer !
you rock SOH !! keep up the good work
This is where I can say that CHANGE IS GOOD..
Great step from the older design and looks really sweet. Nice job dude!
Hm, this site redesign has knocked me back for six. Sorry, but it’s not an improvement on your previous design, not by a long shot. Maybe once I’ve poked around for a bit my old memory of your previous design will vanish from my mind.
There are some nice little touches here and there, and despite my apparent dislike for this new design of yours’ I do actually prefer darker designs over lighter ones, but only up to a point.
MacRankin
@James Rankin, Thank you for your honesty :-) I would love to hear your thoughts on exactly what you liked and disliked compared to my previous design?
I am always open to constructive criticism and would love to hear your thoughts so I can keep this in mind for future projects. Thanks for stopping by and sharing your opinion :-)
Hey Soh !!
Amazing work… I believe you thought in every single detail of the site. I really like all elements but the navigation menu is mind blowing !! :-D
Please tell us how did you do that!!
[]s,
Rodrigo.
A lot of peeps have congratulated you on an awesome design, and it is, but only if you can live without the previous one. I haven’t done any web page building for a whiles, so anything I may say might not be of interest to anyone. All I will say is that it does have a clever contrasty look about it. There is also something rather retro about your new web site’s look, though not of course in its use or function.
You know, I really hate having to comment while glancing down at that evil-looking beaver, or whatever it is. That is so retro it’s unbelievable. There is something swearbear about it I think.
Anyway, about your previous web site’s design. I’m pretty sure I emailed you once praising you immensely for the uniqueness of it all, but have no idea what I said. Once or twice I have tried to figure out that design; what inspired you to create it. I’m still not sure, but I’m thinking that the shape came before the actual design. There is a concept in that previous design of yours’ that is so refreshing it could easily be framed and admired by any who have a mind to admire it.
Man, I wish I had made a copy of your old home page’s design (not code), if only to remember how fascinated I was by its freshness and appeal.
I like the new site very much!
Love the new design of the blog.
What did you use for that sticky left bar thing?
@Rodrigo I’ll make a tut for it soon!
@James, thanks for your honest feedback and break down~
You can check out the screen shot here: http://www.scrnshots.com/users/lizaunson/screenshots/101148
I am planning on releasing a wordpress theme for it in the future, I won’t let it go to waste :-)
Thanks again for being upfront and honest, I digg that.
@Steven, I combined both of these techniques here:
http://jqueryfordesigners.com/fixed-floating-elements/
and
http://learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links
Hope that helps!
i’m the 2% of my visitors were IE6…….
Thanks for your reply, I have tried using this tutorial in the past http://jqueryfordesigners.com/fixed-floating-elements/ but came up with some errors, I just thought there was another jQuery plugin for it. Will try again.
I like the clever use of the z-index to the scroller behind the comments.
For those interested there is another similair tutorial on making the fixed side scroller.
http://alexwhinfield.com/mashable-inspired-side-social-sticky-box-using-css-and-jquery/
Hi,
Can I just ask how you would go about deciding on a color scheme, I notice from above you said that you wanted to reflect your other site designbombs, but what if you are just designing a brand new site how would you then decide a color scheme ?
Also what is your font style for your headings ?
I love the new design by the way…
Hi Soh!
I think you adjust the line-height, http://drp.ly/12E042
@James the font is Lubalin – http://new.myfonts.com/fonts/linotype/itc-lubalin-graph/
@Minimac thanks for catching that!
Great job, the site looks great! I love the typography, it really helps establish that voice which I’ve just recently learned is important.
I am blown away. You are a master of CSS/jQuery and accessible HTML. Your design has TONS of personality, subtle details, and functionality!
Smashing site! I am a huge fan of light on dark styling, I just find it far more comfortable to read on. Thanks for the tuts on Jquery, I am not fluent in JS in general and any help with JQ is of a lot of help.
So a big thanks and well done to you.
Very very interesting website you have made SOH, I’m inspired very much, view your blog pixel perfect design source code and seeing how much clear & clean your design… I can’t explain everything what I feel, but I can say you ROCK!
I very like your left navigation style and the “swtich article view” link is more interesting, your website name is not easy to remember for me but I will because of inspiration :) Best of Luck!
and yeah I didn’t shy to say what comes in my mind :P
I love it. It is heavily inspiring my site currently in development – I will post when it’s finished.
I had only seen this new design until you posted the screenshot of the old. the old one is soh nice! ;) Not sure which one I like best, though, they’re both good eye candy. The blog overall is very accessible, I just hope I can customise BlogEngine.net into something similar, hah.
Cheers
Andrew
Hi Soh,
Love your website which I only discovered a month ago… but have since come back time and time again to check out your tutorials.
I’ve got a couple of questions for you:
1) Is this entire site built in WordPress, or just the blog section?
2) Are you any closer to supplying a WordPress tutorial? :-)
All the best!
Marc
@MARC thanks! Yes the entire site is running with WordPress and I still have not started any WP series just yet :-p Sorry!!
No problems Soh, everything I have learnt so far has been excellent so many thanks to you.
Look forward to seeing what else you have in store so will keep an eye out :-)
Wow , the new look is nice
Good stuff indeed. I also try and do yearly redesigns, but they tend to be more bi or even tri-annual these days! Anyways, great job, really does look good, and it’s nice to see a few personal posts from you too. Keep on keepin’ on…
Speak Your Mind...