About the Re-Design

This theme is all about serenity, simplicity and balance. I’ve cut out a few redundant pages and removed some unnecessary design elements, so that it’s minimal enough for you to focus on the content but still design-arty enough for my site to retain some of its personality.

The nanyate lantern has always been quite special to me. It reflects my state of soul, in some ways. It spent the last year submerged in water, overwhelmed by waves and drifting along with no land in sight. Now it’s hovering on top of water. I think it represents that I’ve spiritually and psychologically grown in the last year — that I could hold my own and no longer be swept around by the whims of society and the world.

The theme’s also got an awesome new font. For years, I’ve been looking for a something that’s loud, artistic and peppered with a little Asian-styled humility. I’m so, so psyched to have finally found it in Estrya’s Handwriting.

Behind the Name: Flow

The new theme is called Flow. It’s named after a popular psychology book by Mihaly Csikszentmihalyi. The book talks about a state of mind where you are so immersed in what you do that you can experience beyond yourself and your surroundings. It’s an amazing feeling to experience, and it’s something I definitely feel when I design my blog. I’m so engrossed in the code that I often forget to sleep and eat….and it’s all strangely therapeutic and energizing despite the terrible eye bags I have now.

Feedback, please!

As usual, I’m too excited about my theme to properly test before I launch, so it’s still in beta mode. I’ll be testing for browser compatibility and accessibility over the next few days. So far, it’s been tested on:

• Mac: Chrome, Firefox, Safari, Opera, Camino and Rockmelt
• Windows: Chrome, Firefox and Internet Explorer 7
• Mobile Devices: Android

With that said, I could use all the help I could get, so do drop me a comment or email if you find any bugs.

Related posts:

1. New Theme: Seigaiha
2. Nanyate 2010 Re-design: Nami
3. New Theme For Spring (Alpha)!

So last week, I visited the Infocomm Accessibility Centre at 24seven‘s invitation. The centre is designed to help disabled people to train in infocomm technology, so they have a shot at employment.

The visit was an eye-opening experience for me as a web designer, because it puts web accessibility into perspective. Web accessibility is the practice of designing a web page that is accessible by the assistive technology used by disabled people.

For more photos, visit Selwyn’s Flickr set.

Here are some examples of assistive technologies. The yellow keyboard is designed to have a high contrast so that people who are partly visually-impaired can see better. And the trackball mouse and joysticks are designed for those who suffer from movement-impairing disabilities such as stroke or muscular dystrophy.

In my last 15 years online, I’ve met many bloggers — some who are disabled. I never really thought about how difficult it is for some of them to go online because it didn’t occur to me that they were using anything else but a normal computer or a mobile device. So to be able to touch and play with these devices really put things into perspective for me — especially as a designer.

Often, in a midst of designing a site or even just writing a blog entry, we forget or simply ignore the details such as putting a simple alternate tag on an image. As able people, we tend to forget that there are many others who never get to visually experience the wonders of our design or photos. All it takes for us, as bloggers or designers, is to spend an extra 10 seconds to write a descriptive alt tag so they could have a chance to imagine what we’re sharing.

And then there’s the debate between making a site more accessible vs cutting some corners for aesthetics reasons (such as using Flash or nonstandard code). I’d like to be fair here. I think it depends on your site’s target audience. If you’re designing a government, banking or utility portal, I think it’s important absolutely necessary to have an accessible site because these organizations are serving essential services to general public; they should strive to treat all their stakeholders equally. But if you own a small-time blog like I do, I think you can relax a little. You don’t have to painstakingly conform every single line of code to the standard, but it’s good aim at least for the bare minimum, such as minimizing the unnecessary use of tables.

Anyway, I hope this entry will inspire other web designers and bloggers to give more thought about web accessibility. Web accessibility isn’t about being a code nazi or being inflexible; it’s about respect. Respect for your readers, respect for humanity, and respect for equal access by all.

To check whether your site is accessible, go to cynthiasays.com.

So readers, what do you think of web accessibility? Is it important for you? If you’re a designer by trade, how do you persuade your clients on the importance of web accessibility?

PS: If you’re Singapore and you’d like to support the cause, join the mass tweet meet on 26 June. And if you know disabled people, please nominate them for a course at the Infocomm Disability Centre. These courses give those who otherwise may not have the opportunity, a chance to finally become a fully-contributing member to society.

No related posts.

For those who are interested, here are some technical improvements:

• New font: The font used for Nami‘s logo is “Vegur Light”.
• 960 grid: Before Nami, I’ve always designed according to a self-made Photoshop grid, which was more flexible. But I wanted to give standardized grid a chance. And I’m glad I did since saved me so much time.
• Gravatar: My commenters have been faceless for so long. So um, hello faces!
• jQuery overload: I’ve never liked putting unnecessary scripts on my blog. However, I just couldn’t envision this theme without an animated menu, so I caved in.
• Threaded comments: I’ve finally updated to the WordPress default comment function. Styling it was quite a pain though.

Like all my theme releases, Nami is currently in beta mode. [edit] It’s been tested on all major browsers and is validated. This theme doesn’t support IE6.[/edit] I’ll also be re-writing the about page some time soon. It’s almost 3am. I’ve been coding for 6 hours. Time to get some shuteye.

Your feedback is appreciated.

Please do let me know if you find any bugs! But spare me IE 6 errors. Me and IE 6 don’t get along.

IE is being mean to me

Just thought it’s an appropriate time to share this video.

Related posts:

1. New Theme: Seigaiha
2. A Revolution in My Web Design Philosophy
3. Nanyate?! Gets A 2009 Redesign

How Seigaiha was born

It’s probably the most difficult theme I have ever designed. Finding the motif was the easy part. I discovered seigaiha months ago while I was at the supermarket. The packaging for this Japanese-inspired bread was so unmistakably nanyate-esque, I knew I had to make a theme out of it.

But because of the change in my design philosophy, I had a very hard time conceptualizing it into a theme. I wanted my theme to be unique yet functional, but didn’t know how to merge them…

…until one day, the idea bulb finally switched on. The answer was typography; typography is the key to marrying design to function. It can improve readability, yet it is an art in itself.

Unfortunately, I am no David Airey. To be honest, I don’t know anything about typography. All these years I just stuck to basic sans serif fonts because everyone else uses it. So I scoured the ‘net for weeks to see what the experts used. Then, I stumbled upon Mohd Huzairy‘s Extreme Georgia.

Who knew that Georgia could actually be so beautiful? I was always under the impression that serif fonts were all old and dingy like Times New Roman. But Georgia’s sophisticated, rustic feel was the perfect companion to seigaiha’s ancient Japanese roots.

But something was still lacking; the design just lacked a certain va-va-voom. Then I came across The Netsetter. The concept of its design was simple: big, humongous type that improved readability.

So with seigaiha as the motif, Georgia as the type and The Netsetter’s gigantic font size, Theme Seigaiha was born.

Still in Beta Mode

With that said, it’s still in beta mode. Here are some outstanding issues:

• Not tested on IE yet
• Not validated yet
• Lifestream not customized yet. For now I’m using WP Lifestream as a stand-in.

So, what do you think of the new theme? And it’ll be great to let me know if you spot any errors (aside from the ones I’m fixing). Thanks!

Related posts:

1. New Theme For Spring (Alpha)!
2. A Revolution in My Web Design Philosophy
3. New Theme: Torii (Alpha Release)

Not that it’s going to look revolutionary or anything; it’s my design philosophy that has been revolutionized.

For the longest time I struggled to find an answer when asked “why do you blog?”. I have neither extraordinary insight nor life to share with the world. And then it hit me. I didn’t start out on the web by blogging, I started out on the web by designing. The past 11 years of blogging had just been an excuse for me to adorn the web with pretty colors.

For the past 11 years, I was trying to create the prettiest, most original-looking blog. So I tried to never draw inspiration from other websites but from different mediums like anime, fashion, culture etc. I would mull over concepts and colors for weeks, consulting various color theory books, sketching 100s of variations, before I decide to photoshop a prototype and ultimately code it.

A lot of times, this design philosophy served me well and ended in some recognition.

But the last 11 months has changed all that for me. Overseeing web design and development work at an enterprise level has taught me to appreciate another facet of design; a facet that I have downplayed all these years – the function of design.

So the new theme’s concept and color combo only took me 5 minutes to gather. Even the prototyping stage on Photoshop took me less than 2 hours. I’ve just been fussing over typography and usability.

Hopefully, one day when I get skilled enough, I can combine both the art and function aspects of design to design masterpieces. But for the next theme, it’ll be all about the details.

Dear readers, what is your philosophy for web design? Which aspect of web design do you like best? What do you dislike? Do share links of your favorite designers and websites too!

Related posts:

1. Best WordPress Design Award
2. Nanyate?! Gets A 2009 Redesign

A la Teddy‘s recommendation, I decided to participate in WPWebHost‘s Best WordPress Design Award. Nanyate?! doesn’t quite fit in any category, so I’m just going to go for Modern and Elegant like everyone else.

Let’s hope Nanyate?! makes semi-finals and you can all vote for me.

[/narcissism]

How to participate?

Your website must be powered by WordPress.

• Write a blog post (or announcement) about joining the Best WordPress Design Award (and mention which category you are joining) in your website.
• Submit your URL in the comment form here. (trackback works too)
• Done! (are you expecting more?)

Picking the winners

Like our previous competition, the WPWebHost team will select a top 10 websites of each category and the public (YOU!) shall vote for the winners.

Prizes

The winners will get a badge (think of it like a trophy) which link back to the page stating the winners. And like all the awards, it’s all about glory and not so much about the money. That being said, we are giving away $200 COLD HARD CASH (via PayPal) to the winner of each category. If you are already not hosted with WPWebHost (a lot of WordPress blogs already are), we’d love to throw in a life-time hosting sponsorship offer too (we will waive your future bills if you are a customer).

Related posts:

1. New WordPress Plugins!
2. Problematic WordPress Upgrade
3. WordPress Updated; Beta No More

Searching for a personal brand, an identity

It was quite a challenge coming up with something new. With my job now related to the Singaporean social media scene, I wanted to create some sort of identity for myself and for nanyate?!. I’m not sure about professional web designers, but I always get stuck when it comes to creating a brand for myself. The stress of wanting to be perceived a certain way, and the questioning the accuracy of my perception of myself is all too overwhelming. And of course, I still have my readers from my previous political blog, and those who just stalk my site for new designs, and those who’s become online friends with me since my first blog in 1999 – with the amalgamation of such a diverse audience, I no longer knew how to cater to everyone’s liking.

So for the first redesign, I illustrated an Edo Fuurin – Edo-styled windchime – ornament as nanyate?! logo.

But it was too contrived. It does reflect the anime otaku in me but that otakuism doesn’t quite define me, and more importantly, what I write about. So it was promptly scrapped.

Then I remembered what my rhetoric professor would say when we got stuck with essay topics or research: “when in doubt, keep it simple”. So, came theme “minimetamorphasis”.

I was initially proud of this theme, since minimal layouts that rely on typography and a solid grid system aren’t easy to create. But when I showed the prototype to some friends, they all said that it was just too blah.

Blah?! There’s no way I’d want to come off as a boring person, with a boring site. So it too was scrapped.

And suddenly, it hit me. Why did I need to go through such great lengths to design something so different than what I usually design, just because I wanted to have a more permanent identity? I mean, it’s not like I didn’t have an identity in the first place – I just didn’t consciously think about it. So came Zen, a remix of my previous theme – just louder, bolder with more SEO and Web 2.0 than ever before!

So What’s New?

Search Engine Optimized Coding

Well, it’s not like I never had meta tags, or didn’t search engine friendly URLs before, but I just never paid too much attention to the nitty gritty. And by that, I meant the coding.

Some examples of the SEO coding including paying attention to the H1 – H6 titles and content frontloading. Search engines give priority to the words used in H1 – H6 codes, that’s why you should always make sure to use H1 – H6 for titles instead of [span] to customize your headings. Search engines, like humans, will also read your code from top to bottom and give priority to what you put on top. So you should place your content code on top, and your menu and/or sidebar at the bottom.

To see how your site looks like to a search engine spider, visit SEO-browser.com.

Relevant, Targeted Content

I could write a book on my life, add 300 fanlistings and rant about my lunch. Unfortunately, no one would actually bother to read it. The only people that would are probably only the new visitors. They want to know what this site is about, and who the owner is – and they want it fast. So a short biography should suffice – what I do for a living, where I’m from, what I stand for. And with that in mind, I re-wrote my about page.

Typography

What’s branding without font? So I scoured, and searched, and sunk into the depths of Internet to find that one true font destined to take Nanyate?! to the next level only to end up with the pre-installed Apple font, Kozuka Gothic Pro Extra Light. (If you have the font installed, I use it for my title tags. If you don’t, it’s the font on the nanyate?! logo.)

I am exploring the use of sIFR (this script that converts text into flash) so that everyone can read my site in Kozuka, but haven’t had time play around with it yet. Will get to it when I can scavenge for time.

Lifestreaming (coming soon)

I’ve become very busy with work lately, so Twitter and his bigger cousin, Tumblr, have become a more effective avenue for me to stay connected with people and express my opinions. As a result, I’d like to have them play a more central role on nanyate?!.

And then the incredibly hot talented dude called YongFook developed exactly what I needed: a lifestream to allow me to stream all my feeds into my blog. (Although, I have yet to play around with the script.)

Well, I guess you could say it’s the epitome of narcissism to stream your entire life on your blog. But I prefer to see it as the epitome of Web 2.0 social networking, where your blog is now more than just a place to express your opinion; it’s now a place to display your life, reach out and connect with others.

Still Work in Progress

So I hope you enjoy the re-invented theme and content, and my mini pitch SEO and social media. “Zen” is still on beta release, as there are still some bugs that need ironing out – especially for my arch nemesis, Internet Explorer 6. The navigation menus for the sub pages are also in dire need to be more user-friendly. And I also need re-write quite a bit of content. There a few more things I’m exploring to do to this site, but it’ll have to wait until I have time to spare.

So, look out for those changes in the near future, and do let me know what you think of the new design and the new direction nanyate?! is headed for. If you’re a web designer, do share your experiences on how you developed your brand online.

(Sorry, for all the grammatical errors. Will fix it in the morning).

Related posts:

1. Nanyate: Springley Edition (Final)

A new theme at Nanyate?! will always be accompanied with some awesome new plugins. So here are the chosen ones.

1. @Reply with Comment Preview Plugin

Since I wanted to keep this design clean, I have reluctantly removed WordPress Thread Comments and WP Paged Comments. It is now replaced with a Twitter-esque comment system, where you place @name to reply to comments. This plugin allows you to display the comment you’re replying to when you hover the @name. To use it on Nanyate?!, click on “respond to this comment” in the comment box you want to reply to. The HTML code that displays the @name will then be transposed in the comment text area.

I personally don’t think that this plugin’s potential is fully maximized, since it is not very friendly to those who have no knowledge of HTML. I would much prefer to see something like [@name] than a line of HTML code. (Plugin author Marcus Himmel, you hear me?) Also, the CSS and the XHTML are neither easily accessible nor valid for those who those customizing Web Standards Nazis. With all that said, it’s still an innovative plugin that might catch on in the near future – provided that it is improved upon.

2. WordPress Mobile Plugin

With the advent of iPhone, HTC Dream and other mainstream internet browsing-centric phones, I think mobile web surfing will be the next big thing in the very near future, and likely the norm 2 – 3 years. So, it’s best to start catering to them now!

This plugin turns your site design into a mobile-friendly one, when it detects a reader is browsing from his or her phone. The CSS is fully customizable. In return, the author requests you put a small Google Mobile or Admob ad, and demands a small share of the revenue. Alternatively, you can pay the author 25 Euros to remove all advertising.

There are alternatives out there, but most of them route to another URL and place ads on them. Until a fully free mobile plugin is released, I think this plugin is a pretty good deal.

3. Author Highlight Comments (not a plugin)

I wanted better control of my comment highlights, so I dug out a couple links from my rusting favorites folder “design resource”, and lookey what I found: Matt Cutt’s Highlight Author Comments

It’s better than the plugin Highlight Author Comments, which does not allow for flexible CSS-styling. And better than most other tutorials that determines the author based on email, which would clearly be very vulnerable to impersonations. Matt Cutt’s tutorial bypasses all that by using the WordPress admin ID to determine the author. So unless the impersonator-to-be knows your password, you’re pretty safe.

Embarassing story: it took me a few hours to get this code working because I am PHP-stupid, and got so overwhelmed by the new code that I was completely oblivious to the error in my CSS. Long and boring story. Basically, it was my CSS that caused the problem, not the PHP.

Anyway, if you’re as PHP-stupid as I am, or afraid of tweaking your comments.php, please read this excellent step-by-step guide by Colin King; just don’t follow the author highlight tutorial given. Alternatively, feel free to ask this PHP-stupid web enthusiast, if you run into any trouble. Just leave me a comment or send me an e-mail.

Hope you found this WordPress plugins review useful!

Thank You, Commenters!

Lastly, I’d like to thank those provided feedback to my layout. Theme Torii is now in Beta release. I’ve made the header marginally smaller, and changed the footer. Theme Torii now works on the following browsers: Firefox 3, Opera, Internet Explorer 6 + 7, Safari and Google Chrome.

Related posts:

1. New WordPress Plugins!
2. New Theme Finalized, New Plugins & Code
3. Problematic WordPress Upgrade

This theme is called ‘Torii’, which is the gate into Japanese shrines. The illustration is inspired by the ending song “Natsu Yuuzora” from the anime “Natsume Yuujinchou”. I drew the torii, and used a brush for the bamboos. (I forget where I got the brush from, sorry!) Oh and I decided to be cheeky this time and have the Nanyate?! written in Japanese instead.

By the way, Torii is still in alpha mode. I haven’t had the time to look through my codes and design.

Edit: I changed the footer, since I found some time to illustrate a lantern. For those who are curious, it used to be miniature version of the bamboo in the header. Please continue commenting on the layout – especially if you’ve found a bug! IE-users, I will check out the layout on IE tomorrow. Be patient with me!

In the meantime, here is Natsume Yuujinchou’s Ending for you to enjoy! Alternatively, you can find the full song on the Nanyate?! radio.

Related posts:

1. New Theme For Spring (Alpha)!
2. New Theme: Yukata Summer (Beta)
3. New Theme Finalized, New Plugins & Code

Until that’s fixed, I’m won’t be updating since it’s affecting every nook and cranny of this site – including entry posting. It’s not an easy fix as it’ll need my web hosting company’s cooperation.

Oh WordPress! How I loathe and love you at the same time. I shall write a bittersweet poem for thee.

Maybe not. Grr.

Related posts:

1. New WordPress Plugins!
2. Host Review: Crucial Paradigm
3. WordPress Updated; Beta No More