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)

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

Anyway, I’m proud to bring you the final release of Yukata Summer, which works across all browsers (except IE6.. for now) and all resolutions starting from 800×600. There are a few features I added that are worth mentioning since they may help WordPress theme designers.

• WordPress Dynamic Menu Highlighting
  This highlights the page you are currently surfing on your navigation bar. For this site, the highlights extend to the sub-pages. For example, you are currently surfing this post, which is filed under archives, in turn ‘Archives’ in the navigation is highlighted. Check out the WordPress Codex on Dynamic Menu Highlighting for the base code and Conditional Tags to customize this code to suit your needs – like I have done.

• Updated WordPress Thread Comment
  As some of you may already know, Nanyate?! uses WP Thread Comment to allow responses for comments. I think it’s a nifty tool that, although possibly takes away from the design, allows for conversation amongst the commenters and the author. Having a community of bloggers is the best part about blogging for me. So I will pay a great price to have everyone interact with everyone.

  Anyway, this updated version now uses AJAX and has added a feature to email a commenter when the author replies so…Would you personally like to be notified when I reply to your comment? Thanks a lot! Your responses will really help me!

• Resolution Dependent Javascript
  This is by far the coolest addition I’ve made to Nanyate’s layout!! By adding this javascript, my stylesheet will change according the resolution you are using. Actually if you even change the size of your window, you will see the changes between an 800px window and 800+px window. The 800px’ers have the background scrolling with a serving of dieted version of the content column. Everyone else has the background fixed.

  I adopted this Javascript as a compromise for the scroll-happy people who were complaining that having a scroll background hurt their eyes and the 800×600 resolutioners, who because of the height of their screen can’t see much of the background if it’s fixed. I normally don’t like catering for people’s surfing habits or the 800×600 resolution – especially since the Web 2.0 world has RSS feeds if you feel my design doesn’t suit your tastes. But I’ve made this compromise in the name of the illustrator’s pride. That flower took me many hours and 100+ layers to complete. I wasn’t going to throw it away for those with small resolutions and scroll-happy kids who I don’t expect to understand the pain of designing a translucent layout for all browsers and all resolutions.

  Anyway, this javascript might be useful for those of you whose layouts are designed with 800×600 resolutions only or 1024×748 and above only. I have to admit, I tweaked the javascript little to suit my needs. So, just let me know if you need help with the tweaking.

And finally, I’d like to end this post with a big thank you goes to:

• JJ Magazine for the yukata inspiration
• My housemate for lending the magazine to me
• 72Quadrat.de for the layout inspiration
• Seishido.biz for the cherry blossom brush. It was $1 well spent.
• My subscribers, visitors and commenters whose presence and comments continue to inspire me to work harder on this site.

Related posts:

1. New WordPress Plugins!
2. New Theme For Spring (Alpha)!
3. New Theme: Yukata Summer (Beta)

The layout is currently in beta mode. The background is incomplete. I wanted to add a couple more embellishments but I haven’t received my brushes from Seishido as of yet. And of course, there are bugs to kill and the layout doesn’t work on IE 6 at all. Most bugs will be fixed by tomorrow. IE6 compatibility will have to wait. Busting out my old Sony Vaio to re-code half the site is just…argh.

I’ve been at this for 2 days. 1 day for drawing the background. 1 day for designing + coding. I haven’t slept for 20 hours. So, pardon this rough post and rough layout.

I’m exhausted. Off to bed.

UPDATE!:I received my brushes! Here’s the new background! Most bugs for the Mac Firefox, Safari and Opera are squashed. I’d expect that their Windows would react the same way. Now all that’s left is that nasty IE6, which I don’t have access to – not even from my old Sony VAIO! IE NetEenderer isn’t powerful enough for me to refresh every 5 seconds, so coding for IE will have to wait until I go to my school’s library.

Sorry, IE6 users. On the other hand… you really shouldn’t be using IE6. Microsoft is already developing IE8 and even had a beta release! I can’t imagine what kinda security flaws you IE6 users have to deal with. The browser’s free for goodness’ sakes; all it takes to upgrade is some free time. Think about it this way: just 10 minutes less of porn, infinite increase in security. Time for a upgrade, people.

Related posts:

1. New Theme (Still in Beta)
2. New Theme For Spring (Alpha)!
3. WordPress Updated; Beta No More

Seriously, Microsoft, it’s impossible for a Mac user to code for Internet Explorer since you stopped producing IE for the Mac. Yes, I know there is a nifty tool called IE NetRenderer, which job is to enable Mac users to view screenshots of their sites rendered through Windows IE. But honestly, a screenshot is no match for the real page. I can’t freaking see how the footer ends even on a page with no content.

If you think by halting IE production for the Mac, you will lure Mac web designers into using RAM-eating Windows Vista, you are dead wrong, my friend. In the end, we will get fed up enough to stop coding for IE altogether and your troublesome browser will lose all of what little the browser market share you have left.

In case you haven’t noticed, the number of IE users in the past few years have been exponentially decreasing. 99% of my visitors in my old sites have been surfed and served via IE. Now 4 years later, it’s dropped to a mere 29%. Hmm, I wonder why? Oh yeah! IE-less Mac users have increased exponentially; Firefox, Opera and Safari can read code more efficiently and compliantly. So, if you want to stay in the game, please, please, bring back IE to the Mac, and improve on its code rendering.

Do you, designers, find cross-browser coding a pain too?

Special thanks to Iva, for pointing out the footer problem on IE.

No related posts.

Anyway, Springley was named for a practical design purpose: to ensure that the header would be balanced between the water lily. The palette inspiration came from a must-have for all designers, Pattern + Palette 2 (which my boyfriend got me for V-day). The actual ‘spark’ of an inspiration came from the anime series ARIA the ANIMATION, where life on Mars is portrayed as paradise on Earth, where everyone is kind, everyplace is beautiful, and everything bad is… never reflected. The world that is portrayed is so unreal, so perfect that I couldn’t help but be sucked in, and eagerly wait for my daily 20 minutes of paradise through YouTube. I know there are not many anime fans amongst my visitors, so I decided to bring their fantasy via Nanyate, the only way I know how – pastel colors, rudimentary code and crappy drawings worthy of an F in art class.

I hope you enjoy your fantasy through Springley, as I enjoy mine through ARIA.

Related posts:

1. New Theme For Spring (Alpha)!

I will edit this post when Nanyate?! goes on Beta mode.

Related posts:

1. New Theme (Still in Beta)