« Google Shrugged |
Main
| Fashion Google Trends »
2006年05月18日
Redesign
I have been working very hard to bring this site to a new level. I began by creating a menu interface using those mysteriously useless blocks at the top left under the banner. I had imagined the concept a while ago, but it was only when I discovered how to make animated gifs using GIMP for another project that I decided to go ahead and create the buttons.
Buttons
Adobe flash is often used to create flashy interfaces, but flash requires browser plugins and expensive development software. Using a well known and somewhat outdated technique of javascript image swapping, a cool flash-style effect can be simulated.
There are two animated gifs per button. One steps from the base image to the target through a series of radial blurs and cross-fading and then remains at the target image. The other steps from the target to the base. When the mouse cursor slides over an image or off, the image is replaced with the former or latter respectively.
I had to decide what menu items to include and then, since each base image is unique and specifically positioned, where each menu item should be placed. Once the menu items had been decided I created the target images. They are either designs I created or images I manipulated. A "threshold" filter creates the black and white poster effect. The black images are overlaid on the coloured gradient background.
The number of steps, amount of blur and fade for each step, and time spent on each frame were all a matter of experimentation. Too few frames and the animation will look choppy. Too many frames and the image will be too large (in terms of data). The coloured background stays fixed so that it looks like the ink swirls into a new pattern. Here are the final frames from one image:
Design and testing were tricky so after all the decisions were made, it was simply a matter to create the images. Each transition, however, is unique and there were four frames per image, two images per link, and eight links making 64 individual frames. A tedious process. I could probably have made a script to do the work, but figuring that out would have taken longer than doing it by hand. Since I will probably never use this effect again in the same way, there seemed no point.
Content
After I made this snazzy interface, I needed all the links to point to something. It took me months to get around to this part. Creating the interface was fun and the new site organization was meant so that when I had ideas, I would have somewhere proper to put them. Making a bunch of pages in one go just because I had to was clear grounds for procrastination. Finally, however, I got around to it.
RSS
I wanted a section from where I could read all my interesting news sites via RSS. I have the sites from the right column on the main page here, but will add a few others. If you like the idea of customizing a page with news feeds, you can do this for yourself (and more) using a Google Account.
Gallery
I liked having a gallery section, but I did not like having a giant family album for the whole world to inspect. So I am bringing back a gallery in a more limited form to develop over time.
Technology
Often I discover something new or start playing with a certain technology and learn all kinds of useful things about it. Rather than lose these insights or hoard them in archived notebooks and scraps of paper, it would be better to share them and more useful to me to have them gathered in one place. Explaining something also forces you to learn it better. For now, it is just a summary of all the entries I labelled as "Tech", but I hope to organize it in the future.
Modelling
Boy have I learned a lot about modelling. I want to share some of that information and also create a directory of modelling blogs and sites. For now it just points to my entries labelled "Modelling".
Links
A few sites I like or frequent.
Japan
Like Tech and Modelling, this is just a placeholder for now. A summary of my entries labelled "Japan".
Philosophy
I have a lot of views on how the world does or should work. This is my soap box.
Contact
If you want to talk to me, you no longer have to leave a tentative comment with your email address. Talk to me one-on-one. I'm listening.
CSS and W3C
When I first made this site, I tried to create a layout using Cascading Style Sheets (CSS) because this was the flexible, cross platform, standardized way of the future. Through lack of knowledge and experience, and because other major sites had yet to adopt CSS, I reverted back to a table based layout.
Because I am working on some web based projects I have been revisiting CSS. I have also been considering alternate revenue streams since modelling, as fun as it is, does not pay (me) so well. One compelling option would be to work on web design contracts. It is not exactly something I have a passion for, but it is one of the few fields that really favours telecommuting. Web design ability is also just a useful skill to have and does relate to some of the things I do have passions for. I decided with the new menu design, it would also be a good chance to overhaul the layout and convert it to CSS.
Keeping the top left menu buttons in a properly spaced grid seemed the hardest part to achieve using CSS but turned out to be quite easy. It was trickier getting column spacing correct and image placement in the header. Then when everything was perfect in Firefox, I fired up Microsoft Internet Explorer and it was a disaster. So I had to tweak everything again.
So far I can only guarantee rendering in Firefox 1.5 and IE 6. If the page layout is weird in your browser, drop me a note. This is what it should look like. The CSS code is still quite messy (but valid), and hopefully I will get a chance to tidy it up. The footer was also something I could not place correctly, so I settled for positioning it at the bottom of the middle column instead of spanning the base of the page.
Besides being CSS driven, this site is the only one in my portfolio so it had better be valid markup too! I cleaned up the main page and the newly created sections, but I have yet to fix up the archives. One of the awkward parts of validation was correctly processing the data pulled in from RSS feeds. For instance the ampersand (&) is used as a special code in html and needs to be written "&" If the data from the feed is raw, then the ampersand will break the validation. If it's already processed and I try to "fix" it, then I will end up with "&". This is still something I need to tweak.
Design
Elegant, timeless, and simple this site is not. The menu is not intuitive. The bandwidth usage for all the little graphics is unnecessary. If I redesign the site again, and if I work on future designs for other sites, I plan to make them far more austere and sensible. This, however, is the realization of the site's original concept so I will have fun with it while it lasts.
To avoid latency with the image-rollover, the images are cached on page load. They "spin" once loaded to indicate readiness and to draw attention. For users with lower bandwidth connections, I suppose the menu will take a little while to respond.
One thing I discovered rather late in the redesign process was the Web Developer Toolbar that works with Firefox. It helped me troubleshoot some CSS issues and makes validation testing a keyboard shortcut away. I highly recommend it if you want to build a site.
Conclusion
This has been a huge time drain and one of the reasons I have not been posting anything recently. There are a million little details that become apparent as you go so it is best to keep things simple from the start. When redesigning, rather than make piecemeal adjustments, it is better to break things down to basics and then rebuild. I drew a lot of inspiration from A List Apart, especially this article on Retooling Slashdot.
I hope you like the changes. Many of the changes will have worked if you do not notice any difference. For all you Mac, IE5, or Opera users, I have no idea if the site looks correct any more so if it's snafu, then send me a screen shot. But since the layout is all CSS now, you can always turn off styles and view it plain!
Posted by William at 2006年05月18日 13:05