sheen effect image

Tze-chiu Lei

Web Developer


Category: Web Design

Responsive now!

OK, I just finished re-styling this site to be responsive!  Let’s call this phase 1, ‘cuz the blog’s hidden on small screens.

If you really miss the blog on your smartphone, please leave a Comment!  I’ll monitor this post, and if enough Comments say include the Blog on small screens then I’ll do it.  I just don’t think people read and respond to blogs on a phone, that’s all.

The site-image hover popup with site details are not ported yet to touch-screens — a TODO item for later.

Bottom line, you won’t have to squint when you view on a phone anymore.  I’m planning to redesign the whole layout this Summer, so this pass was a quick one.

Going Responsive

Well, I’ve been waiting for opportunities at work to do Responsive Web Design (RWD), but GM has mobile redirect instead to a separate server and all mobile work is being done by another agency.
I’m just gonna start doing it myself, starting with THIS site.
Stay tuned!

Bow Reviewer likes

Black Swan Archery siteI never expected my project to get any press at all — the site’s for a one-man business working on pure word-of-mouth.  Well, never say never!

A bow reviewer at Archers Review just gave the site some very nice compliments while reviewing one of the Black Swan bows:

The website is slick, it’s easy on the eye, sophisticated, stylish with a monochrome colour scheme, it’s been put together by someone who knows exactly what [Arvid Danielson’s] bows stand for and how he wants them to be represented, there is no clutter, no extraneous stuff you don’t need to know…. just some pictures and the pure facts… I very much like the website and it made me feel that I was about to receive something very special, the lack of sales speak, hard sell and clutter made me think that if the website had been put together with such single-minded focus then the bow itself would probably be as forthright in its purpose.

Couldn’t have said it better myself!  😀 Redesign

TzeMan test site

I just started a redesign of my TzeMan music site.  The current site is looking outdated, and I wanted to use everything I’ve learnt so far at MRM Worldwide to improve the look-n-feel.

The desktop layout and functionality is almost done, but there’s still much work to be done for mobile.

Head on over to the test to see what I’ve got there so far, compare it to the current, and LET ME KNOW WHAT YOU THINK!

Thanks in advance for your feedback!

Hidden Heroes via Webbys’ Netted

Hidden Heroes

I discovered this nice Flash site through The Webbys’ Netted online newsletter, which I highly recommend…

Hidden Heroes is an online exhibition hosted by Vitra Design Museum to spotlight designers of common items in daily life.  The subject matter is what piqued my interest at first, but I also found the Flash work appealing and inspirational.

Not only am I learning about industrial design, but also getting great ideas for Flash development.  What more an I ask?  😀

Check it out, and let me know what you think!

Improved look-n-feel

Biggest bang-for-the-buck I ever had with just an image swap!  The new background not only refreshed the look, but also enhanced the feel — it added depth to the look, and made the feel much more engaging.

I’m very pleasantly surprised at how much better the site looks now, with my recent updates to the background and layout.

" homepage"

The old background was tiled with a canvas-textured image, which looked fine when I rushed the site out the door for my job interviews last year.  Over time though, it started looking a bit stale, and by last month, I was actually finding the tan color a little revolting — how familiarity breeds contempt!  😀

I spent several days Googling for background image tiles to replace the tired tan canvas, but didn’t find any that suited my tastes.  Then I remembered how great looked after I made the entire layout look like a photo portal, so I started searching for stock photos instead.

I tried photos of the sky, the ocean, landscapes of national parks, city skylines, and even office environments, and although I didn’t particularly liked any single option, I noticed that the photo backgrounds immediately added a sense of depth to the look-n-feel.  The “page” no longer looked like a page, and the site felt more like a true environment than a flat screen.

I continued my search for the perfect photo, one that provided a sense not only of depth but of environment.  Office photos were out, once I realized I didn’t want to feel like I was still stuck at work.  The sky, the ocean, and the national parks gave a nice sense of grandeur, but didn’t feel relevant.  Then it dawned on me…

I had always wanted viewers to judge my work as art, because for me it’s more important to showcase my design talents than to illustrate my technical skills.  Yes, showcase — that was the operative term here.  And where do you usually find works of art on display?

That’s how I ultimately chose the interior of the Guggenheim Museum of Art in New York City for my background.  It evokes all the sensations I want for my site: depth, environment, and art-meets-tech.  Plus, I’ve always admired the architecture of Frank Lloyd Wright, and my father’s a retired architect, so this choice felt very much like a sentimental favorite.

Hope you like it too!  As always, chime in and let me know what your think!

P.S.  While I was tweaking the layout for the new background, I thought I might as well add rounded corners to the homepage’s portfolio images.  Now the layout looks perfect…  At least for now.  😀

WordPress Blog customized!

WordPress logo

I just finished WordPress customization for this Tze1 Blog, and you’re looking at the results here right now!  I wanted the Blog to look and feel like the rest of, and I’ve achieved it.  It went smoother than I expected.  I had anticipated lots of head-scratching while trying to understand WordPress’ complex architecture, but its clean separation of styling from functionality made my customization straightforward and relatively painless.

The biggest challenge here wasn’t the styling customizations, but rather the functional modifications to match usability/behavior to my own requirements.  Beyond digging deeper into the template code, I also had to determine which code snippets were functional and which deprecated.  Like with so many other software projects, there’s “garbage” code that’s no longer used but never deleted.  This seems to be a widespread challenge in the development process, where developers are wary of deleting code for fear that it’s still in use by something else outside of whichever portion they’re updating.

I’m a bit of a stickler when it comes to usability, and I strongly disliked the default Twenty Eleven Theme’s Comment/Reply form.  Somehow, WordPress broke it’s own dynamic form title functionality — the title didn’t adjust itself to indicate whether you’re Posting a new Comment or Replying to an existing one.  I had to add my own code to restore the dynamic title, and while I was at it I also made the message input label dynamic for even better usability.

I know my customization isn’t 100% perfect just yet, but I wanted to roll the Blog out now to start our Conversation!  So, CHIME IN and let me know what you think so far!!