Cooking For Engineers

New Features

Introducing the New Interface

by Michael Chu
Printer-friendly
Over the last year, Cooking For Engineers has been undergoing a complete overhaul. Everything from the back-end to the front-end has been more or less completely rewritten. Today, the last major update has been implemented - the New Interface. I hope my readers get used to the new layout and maybe even learn to like it...

I started the overhaul in October 2004 when I wanted to introduce a way to list all the articles and jump to the article of choice. Since I started Cooking For Engineers on Blogger, I realized that this feautre did not exist. I had to implement my own database to keep track of the article titles and URLs for the new Table of Contents page. After that a series of database enhancements and code revisions increased the power of the Cooking For Engineers Content Management System.

By the beginning of 2005, all content for Cooking For Engineers was being written in the home grown Content Management System, and Blogger was no longer used on the website except for the management of comments. This was a welcome relief because Blogger's website had a tendency to be down whenever I wanted to make an update or post an article (or it would become inaccessible when I wanted to save an article I had been working on).

In May 2005, I finally implemented a way to store comments without using Blogger. I accomplished this by tying the comments in with the Community Forums. Unfortunately, I couldn't do it with the original forums software and had to migrate to new forum software to accomplish this. The forums have not yet recovered from this move (which required participants to re-register).

Since May (for the last five months), I've been working on designing and implementing a brand new interface that I could truly call Cooking For Engineers. The original interface was a modified version of an original Blogger template called Rounders 4 written by Douglas Bowman. This template, although well suited for Cooking For Engineers, was by no means unique and was the last bit of Blogger left on the website.

So, today, October 14, 2005, I've launched the new interface and layout (after a series of late-night marathon coding sessions during the last two weeks). The new layout's had several goals:
  • The old layout was very narrow. I wanted to increase the width of the page and have it scale with screen resolution.
  • To increase horizontal space, I wanted to get rid of the sidebar. Most of the info on the side bar was used for site navigation. I have replaced the navigation with two horizontal navigation bars at the top of every page. The first bar lists the article categories and will pull down to reveal the article titles. The second bar provides the links that used to be found in the Quick Links part of the sidebar.
  • I wanted the website to be less time bound. The old interface highlighted only the most recent articles. The new interface currently shows the last two articles as well as a random recipe and random equipment or kitchen notes article (random by day). Hopefully, this will help encourage readers to explore some older articles that may be of interest.
  • A lot of readers liked the color and feel of the old website, so I wanted to maintain a similar color palette. I felt the old look was a bit "faded", so I punched up some of the color contrast and used fewer rounded corners.


The interface is by no means complete. There are still several "special" pages that need to be updated to the new look. The Table of Contents, Recommended Reading, and Ingredients Dictionary are just a few. Also, Printer Friendly mode has not yet been implemented, but the Internet Explorer bug that prints blank pages is no longer a problem. However, when printing from Internet Explorer, you may still need to resize the margins or print in landscape to get the text to fit. Never fear, I will be adding a printer friendly mode as soon as I get a chance. Many other upgrades were also suggested (such as the inclusion of EXIF data for the photographs) and most of them will be slowly phased in.

For those of you who haven't seen the old format, click here for a taste of the old Cooking For Engineers.


If you've been wondering why I haven't been writing any new articles, now you know why. Enjoy!
Written by Michael Chu
Published on October 14, 2005 at 02:42 AM
Hide comments
24 comments on Introducing the New Interface:(Post a comment)

On October 14, 2005 at 01:41 PM, an anonymous reader said...
Subject: new layout
some nice design choices! In particular, ditching the sidebars and increasing the width to a genuinely readable level.


On October 14, 2005 at 02:21 PM, ScratchyBadger said...
Subject: Awesome
Looks good, clean and functional. Nice one!


On October 14, 2005 at 02:39 PM, an anonymous reader said...
Subject: Comments
Just a nit, but I find the contract of grey on black in the comments section very hard to read, esp. when combined with the small font size.

The grey on dark green buttons at the bottom are also hard to see, but I only need to figure those out once.


On October 14, 2005 at 04:16 PM, oyo said...
Nice, although i usually find text that is as wide as a screen to be too wide for efficient reading - eyes must scan too far horizontally which slows one down. will the old interface remain avalible for new posts?


On October 14, 2005 at 04:25 PM, Michael Chu said...
oyo wrote:
will the old interface remain avalible for new posts?

Yes, I've tried to set it up so that the old layout can be accessed. The index page is at: http://www.cookingforengineers.com/index_2004.php
The sidebar and table of contents have also been updated to link to the correct article pages with the old style.
You should be able to bookmark the above link and it should look like the old page. Please send me e-mail if you find any errors or bugs.


On October 14, 2005 at 04:48 PM, Ben (guest) said...
Subject: Will the atom feed be updated as well?
Congrats on the upgrade; I've been following along for a while on this site and really like both the content and presentation. Just a suggested tweak - there are some validation issues with the atom feed which prevent it being read by e.g. Thunderbird. While you're making all these changes, could you catch that one too?


On October 14, 2005 at 05:40 PM, Alexis (guest) said...
Subject: too wide for tablet
The new layout is pretty, but too wide for my 768x1024 tablet. It would be great if its width were fluid.


On October 14, 2005 at 05:59 PM, an anonymous reader said...
Subject: Re: too wide for tablet
Alexis wrote:
The new layout is pretty, but too wide for my 768x1024 tablet. It would be great if its width were fluid.

Unfortunately, at this time the minimum width for the page is 800 pixels wide. The width is fluid until 800 pixels. This is mainly because the Google Adsense banner is a little less than 800 pixels and I have a margin for pleasant viewing on most monitors. I guess, tablet PC users will need to continue to use the old interface.


On October 14, 2005 at 06:31 PM, Michael Chu said...
Subject: Re: Will the atom feed be updated as well?
Ben wrote:
Just a suggested tweak - there are some validation issues with the atom feed which prevent it being read by e.g. Thunderbird. While you're making all these changes, could you catch that one too?

Every few months I check to make sure that my feed generator is generating content that pass validation with feedvalidator.org. For some reason, everytime my feed fails and I make the appropriate changes to make it a valid feed again.

I just took out a whole bunch of tags that they told me to put in last time - but as of this moment, the feed validates. Let's see how long that lasts.


On October 14, 2005 at 08:44 PM, Bindlestiff said...
Subject: New layout
I would like to second a previous comment that the text in the comments section has insufficient contrast, especially for these 68 year old eyes. Other than that I think the new look is just fine!


On October 14, 2005 at 09:35 PM, Michael Chu said...
Regarding the contrast of the text in the comments section - possibly the contrast and brightness settings on the viewing monitor need some adjustment.
http://www.cookingforengineers.com/pics/contrast.gif
Assuming you are using a CRT monitor: Referring to the image shown above, please try adjusting your contrast to its maximum value. Then adjust the brightness on your monitor until you can just discern the difference between the two shade of black. If you only see one solid black bar and you can't increase the brightness of your monitor any further, then the contrast of the monitor is too low and most likely the monitor has aged beyond its design life. If the monitor is still under warranty, you can probably have a replacement provided by the manufacturer.

The contrast of the comment text and that of the main article are roughly the same. If you still have difficulty in reading the text, then please let me know and I will try to fix it.


On October 15, 2005 at 08:52 AM, Calm_Pear said...
Subject: About the new design
I have been working on a complete redesign of my own website and consequently been fiddling with my monitor settings. I can read everything perfectly and like your design, especially the buttons with the greenish background. There’s just one thing I don’t really like and that’s the white squares behind the articles on the front page. They visually increase the extra white space below the article text and it seems to enlarge the effect that it doesn’t flow like columns in a newspaper. (I hope that makes sense) Making it flow like newspaper columns, eliminating the extra white space and getting rid of the table is going to pretty difficult but splitting the table cells in just two columns shouldn’t be all that hard to do I guess.


On October 15, 2005 at 05:54 PM, Patrick (guest) said...
Although you state that the contrast between the text and background in the article is about the same as the contrast in the comments, an imporant thing to note is that light-on-dark typically needs a thicker line to have the same apparent contrast. Is this sentence easier to read than the others?

This is something that is pointed out when you use my school's (Georgia Tech) logo in a reverse-print situation. They provide a special version of the logo with bolder lines and type.


On October 15, 2005 at 06:16 PM, Michael Chu said...
Subject: Reverse print contrast
It is true that white on black contrast feels like the text is apparently a smaller font than black on white. This was part of my design decision to reduce the "size" of the comment text without changing font sizes. I don't know, if it really bothers a bunch of people then I'll go ahead and change it. If it only bothers a small handful of people, then I won't make a change because any decision that I implement will bother a handful of people...


On October 16, 2005 at 01:06 AM, an anonymous reader said...
So glad you retained the "grid" presentation of recipes. I've always thought it was completely elegant.


On October 16, 2005 at 02:07 PM, tolliepete (guest) said...
Subject: Love Your Site
Though I discovered your site by accident, I quickly added it to my list of favorites. I like your thoroughness and attention to detail. OK, 25 years in engineering colored my opinions. Keep up the good work. :)


On October 18, 2005 at 12:40 PM, nope (guest) said...
Subject: prefer the traditional blog layout
It seems to me that one of the great about blogs is their chronological (linear) arrangement. You've lost all of that. And I agree with the reader who opposes wide horizontal columns; much better to arrange text in narrower columns.


On October 18, 2005 at 11:42 PM, InvisibleJules (guest) said...
Subject: Just found this site
I just found this site (through Slashfood, I think). Just wanted to say it's awesome! It's a great idea and I love the way you implemented it, expecially the recipie diagrams (the box things).
Thanks!


On October 20, 2005 at 04:57 PM, Dillon (guest) said...
Subject: Nice job with the new format
As a designer of submarines, I really dig the pastel green. I also love the site, in general, as well as the intuitive recipe diagrams.

However, I wanted to point out to some of the commenters that, since your site scales now, they can change the width of a "wide" column by not using a maximized window. Just a thought.

Anyway, thanks for the site and keep it up.


On October 22, 2005 at 02:10 PM, elkyle (guest) said...
Subject: Atom feed & Mozilla Thunderbird
Presumably with the redesign, the Atom feed stopped validating in Thunderbird 1.0.6. I just upgraded to Thunderbird 1.5b2, which is available from http://www.mozilla.org/products/thunderbird/. Click the link under the green download box that says "Try Thunderbird 1.5 beta 2". I know that one of the many improvement in 1.5 is increased RSS support. This apparantly has fixed the validation issue, as I can now successfully read the CfE RSS.

One more comment...
I really dislike the comment form popping up in a new window. I really dislike anything popping up in a new window without letting me know first (e.g. "Post a Comment (link opens in new window)")

Other than that, I really like the new design. BTW, the CAPTCHA creation algorithm you are using is easily breakable by anyone who really wants to. And since the image uses only uppercase letters, it would be really nice to accept both upper and lower case letters as the same (it's simple, really...just run stringtoupper($string) on the string holding the captcha input before comparing it to the correct value).

Thanks,

Kyle


On October 29, 2005 at 12:42 AM, Mensa56 (guest) said...
Subject: New Features: Introducing the New Interface
:) Well I guess I am the odd one here, because I truly enjoy the website for its content, the photography etc. Therefore the old layout was not a problem for me, but after reading why you made the changes, I can accept the new format , and what these new enhancements will bring to the reader, however my acceptance is contingent on this........, as long as the photography and content does not change, we are all good!

~Enjoy


On October 29, 2005 at 01:36 AM, Michael Chu said...
I promise that the content and the photography will only improve (at least compared to when I started the site). During the last few months, I've been taking more and more care in the photography and writing -- this is especially apparent as I reread some of my older articles...


On October 31, 2005 at 01:46 AM, jagstyle said...
I can't stand the new interface. Two words come to mind…Aesthetic Nightmare…


On December 05, 2006 at 07:31 PM, an anonymous reader said...
Subject: That recipe summary thingy
Wherever you got that recipe summary thingy (the boxes that list ingredients and then summarize the steps in preparation), that's easily the coolest widget I've ever seen and I'm floored at how simple yet informative it is. Very nice.

: