Apr 02
Just Add Heat, one of the projects I’ve worked on
2007 at 09.38 am posted by Veerle Pieters
Let’s talk about food, shall we? ;) One of the projects I have been working on a while ago is a website design for a company from Toronto, Canada called Just Add Heat. The logo and colors were already in place so our job was to to create a few website templates. This brings the perfect opportunity to share some basic CSS information on how the main template is set up.
Introducing Just Add Heat
If you are busy you'll surely recognize the following scenario. Hard at it and completely gone up in your work you suddenly realize that it is dinner time but there is no food in the house or you don't have time to prepare a decent meal. That's were a new trend called assembly kitchens comes in. It's a place where customers spend a couple of hours putting together a week or a month of dinners they can cook at home. That's what Add Heat is all about, but I let the owner speak for herself:
I just opened an assembly kitchen near Toronto, Canada. While this is a very new concept here (mine is the 9th such facility in the country), these assembly kitchens are spreading rapidly across the U.S. with an estimated 1,100 locations by the end of 2006. It's a large kitchen where customers can come and assemble family sized, healthy meals in record time. It takes about 10 minutes to put together something like a spicy chicken stir fry or pork tenderloin with apricots and raisins. We provide all of the ingredients that are chopped, washed and ready to go, plus all of the mixing/measuring utensils, and freezer friendly packaging (we also clean up!). Just Add Heat opened August 15th and in less than three weeks it has proven to be a much needed service. Part of this success can be attributed to Veerle Pieters as she created a fabulous website that is easy on the eyes and unintimidating for all. It was great working with her because she understood our wants and needs very quickly - making the birth of the website pain free and fast.
It was great working with the people from Just Add Heat and a fun project and subject to design for. I'm very happy and honored they choose Duoh! for the design of their website and I'm double pleased that the business is going so well. It's amazing how you learn about new things in other countries. Assembly kitchens isn't something that is available to my knowledge in Belgium yet.
Setting up the template
Here is a picture that shows you how I divided the different areas of the page:
As you can see from the CSS below and the picture above, I use 2 wrapper ids and within these I have again 2 content areas:
body {font:75%/150% "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;background:#646464;color:#666;}
The body element has the grey color as background and the primary-content-wrapper id and secondary-content-wrapper are stretched over the entire width (100%):
#primary-content-wrapper,#secondary-content-wrapper {width:100%;text-align:center;}
The primary-content-wrapper id has the background image repeated horizontally. The rest of this area is filled with a very light grey color:
#primary-content-wrapper {background: #f0f0f0 url(../images/bg-primary-content.gif) repeat-x;}
The secondary-content-wrapper has a border of 6 pixels at the top:
#secondary-content-wrapper {border-top:6px solid #585858;}
There are probably different ways of doing this and achieving the same result. Some of you might find this piece of code a bit too basic to learn from, but from the e-mails and feedback I get I know that a lot of you are still starting to learn CSS. Hopefully by sharing this part of the project I help you to get a better insight on how to think in divs instead of tables.
However reality is, that you don't always have total control over the outcome. So there are a few things I would have done differently code-wise, but hey, it's already an improvement from a total table-based website. I don't want to be a code-nazi, but the urge is always there to correct. "Let it go Veerle" that's what I tell myself :) Further from that, I wish the people of Just Add Heat all the luck with their new business. I think I would be a regular customer if it was nearby ;)
44served
1
I think this is the way of CSS I would do it too, of course accordingly to final design.
As I see in Photo gallery on that site their logotype is made with ‘Trebuchet MS’ font though. Why you didn’t used it in site’s header?
2
Hey Veerle,
Great site. Really nice design and layout - as usual. :)
Was the site done with ExpressionEngine?
3
Quite nice - the large footer really pulls the lot together.
4
Wow, that’s really nice. It’s all fruity and foody. Beautiful layout and nice clean markup.
5
Thanks for sharing the information, it’s always nice to find design tutorials by the pros I admire the most ;)
6
Thank you all :)
MaRmAR said:
I wasn’t aware of this to be honest. The only information I received were guidelines on the colors and the logo. I never saw these pictures when I was working on the site. The client added the content pages when I delivered my templates. If there was one thing I would have changed, it’s the typeface in the logo. I don’t like the “Courier-like” font.
Neil Bradley said:
No, I don’t know which system they are using. I didn’t do the implementation either. Would have been perfect though, for sure :)
7
How were you able to keep the footer “locked” to the bottom of the browser, regardless of main content size or browser size?
8
The site looks gorgeous. That magenta and hot pink with gray is totally working.
So, it’s them messed up, ‘cause in Firefox2 that central part is not two-columns but one. I mean, “It looks simple because it is simple!” part goes down. It works in IE though.
9
very nice!
I’m one of them :) I find that tutorials like this are very useful improve on CSS layout.
Thank you for sharing this.
10
The post is quite good. Is the webpage JavaScript, HTML, and CSS based?
11
Jackson said:
The body element has the grey color. So where the content stops, the footer starts and from there on till the border of the browser window you have the grey. Does this make sense?
Victoria Pavlova said:
Hm, that’s most bizarre :-/ It seems that a reload fixes it, but it’s bizarre because I’ve seen this behavior once and now I can’t reproduce this. It keeps on loading fine now. No idea what’s causing this. And no, they didn’t mess up this page, the homepage was one of the pages I did the entire XHTML/CSS coding for.
Pink Panther said:
Thanks. Yes it is.
12
Oakville is a bit of a drive for me, here in Toronto, but it sounds like an interesting concept and it looks like you did a great job with their site within the constraints you had.
They should have had you do some finesse work on the wordmark in their logo though. I think the little illustrations are quite nice, but the wordmark font - ick!
13
Very nice job Veerle! It has your signature design! :)
I also have a question:
You mentioned that you designed templates. Did you deliver html files, or those which would fit with a CMS template; where by putting certain keywords, the content will be filed dynamically. Hope I’m clear.
14
I’m so glad you didn’t post this yesterday. I’ve got my April 1st blockers on. Nice site!
15
MaRmaR said:
If you look at the left picture of the shop, you see figures (“13”, “14”, etc) with the “same” font as in the site’s header.
Hmm, I believe :-§
Anyway, we learn a lot with you Veerle, thanks !
16
The tribute from me Veerle is would I go to the site because I want people to make my dinner? (I know that’s over simplified.), No. I would go to the site because the design is everything a website should be.
I just love the sitemap. Only recently I have been thinking about the value of a sitemap and whether or not is it a survivor from the old school. I suppose its all in the execution.
Although I have noticed that there seems to be some encoding issues, on Privacy for example, oh and in Safari.
17
Jackson said:
Veerle responded
I think he means where the bottom of the footer touches the bottom of the browser, I guess using min-height?
18
Thanks for all the great comments :)
Oliver said:
I see what you mean, but I didn’t use any CSS technique to make the footer stick at the bottom, because it doesn’t :) Look at the contact page or pages with almost no content. It does not stick. I’m actually not very fond of creating a big gap between content and footer in case there isn’t enough content to fill the page, I prefer it like this :) This is pure personal taste I guess.
19
Thank you for the post! This is very helpful.
Great job on the site. It works very well for the target audience - busy parents who don’t want to waste time trying to navigate through a complicated site!
You are an inspiration to many, Veerle!
20
Thanks for the great article veerle. it was very helpful!
First time poster btw :-D
21
Hi all, I’m the developer of the site, so I thought I’d chime in and answer a few of your questions. But before I do, let me just say that Veerle did a magnificent job, especially given the constraints of the existing colors and branding. (I’m guessing that typewriter fonts in black and pink are probably not the ingredients of a dream brief.) Not only is the rendered design beautiful, but the markup that generates it is very well structured and concise. (The home page with styles turned off is a sight to behold.) Any of the niggling style/layout/encoding issues are almost certainly due to changes and additions that we have made since.
No, it is a custom system built using the Django framework. We have some fairly complicated reservation and ordering processes as well as a bunch of (private) reporting and point-of-sale features, so we would have been bumping on the boundaries of a regular CMS.
The typeface on the signs is a mistake. The proper branding is the typewriter logo that you see on the site.
It may be. I’m not sure what this is, to be honest. I’ve noticed it a few times, but like Veerle a reload fixed it and I was unable to reliably repro. Something in the markup is causing Firefox to render non-deterministically. If anybody has any ideas…
Anyway, thanks for the write-up Veerle. I hope we get a chance to work together again!
22
Veerle, thing is that in my Firefox 2.0.0.3 div with “Simple…” stays lower whatever I do - I tried reloading but it did not work. Using Firebug I removed text-indent: -9999px; and it helped but not for sure - it needed disabling-enabling floats on those div’s.
Hope you’d nail that bug down ‘cause such a beautiful bright site needs it :-)
23
Great veerle. you are really great.
24
John Martin said:
Thank you John for your clarification and feedback :)
Victoria Pavlova said:
It’s weird I don’t get this effect anymore at all. On Geert’s Mac it appears rather randomly, but mostly “not”. It always disappears as soon as he reloads. I wonder if it has anything to do with the order of loading of things. If Geert disables cache it seems to work fine each time. Something is triggering this effect while loading.
25
Hi,
Just stumbled accross your site. As a fairly new web developer I find your work an inspiration, its excellent.
I have just noticed that your site is powered by Expression Engine. I have never heard of this before. I am starting to develop sites using Wordpress with custom themes. I was wondering if I could open a debate to which platform is the best? Any particular reasons why you have chosen Expression Engine?
Thanks
Adrian
26
Veerle, I’ve been visiting your site since dezember of last year. Don’t give importance to my Encglish, I’m studing.
I love this page! I’m doing an project for my friend ^^ . It’s for an Candy Store. I’m using yellow because the Logo is very “happy” and modern.
If I finish it as soon I’ll post here to show you!
I’m your fan ^^
You are great!
KISSES!
27
Hi Veerle,
I recently looked at your new Just Add Heat site on your main Duoh website, and really thought how nice and neat it looked, with the three different sections distinguished by different content areas and colors and the pretty illustrations. I love the colors too, and the navigation.
Thanks for trying to explain the CSS coding to us. I have been trying to learn more about how to do table-less websites, but find it difficult to make the transition to all divs, but this certainly will be a helpful example - maybe eventually I’ll get it!
28
Great site!
Have you tried applying the clear property { clear: both; } to that div giving you the problem?
-Jason
29
Great post! It’s nice to see what other designers do to achieve their results in their work. I’ll be sure to pick up from these tips, I always wanted to know how layouts that have 2 wrappers were done.
30
Veerle - another great write-up that has given me new insights. The “just add heat” site sure sizzles with your design touch… unmistakably a veerle design, to be sure.
A couple of questions: 1) did you do a mockup of the site using Photoshop? i.e you layout the sections title etc in photoshop and work from that? and 2) what font and font-size did you use on the Nav Buttons? the buttons look to be an image and the text is still so clear even at their small font-size.
@John who said:
“No, it is a custom system built using the Django framework. We have some fairly complicated reservation and ordering processes as well as a bunch of (private) reporting and point-of-sale features, so we would have been bumping on the boundaries of a regular CMS.”
John, there may be perfectly good reasons to use Django, but if you have a chance you owe it to yourself to check out Expression Engine…. “this ain’t your father’s or mother’s CMS….” It can handle whatever you throw at it. I won’t classify EE as “regular”.
Cheers
PS “De Ronde” is almost upon us!
31
Amazing design Veerle.
Your work is inspiring. I’m just beginning to learn CSS so will probably spending a lot of time on your site from now on (wish I had found it sooner!)
32
I love your design Veerle! It also brings together two of my loves - web design and food. I hope I have the opportunity to do design work for a restaurant, bistro, or cafe in the next year.
33
vanni said:
I will do so. I was a little loose with my response, it certainly wasn’t meant as a slight towards EE.
34
Love your work Veerle, you are an inspiration to us all!
35
Just wanted to chime in with a
1. “you have an absolutely gorgeous website”
and a
2. “your work is incredible”
:)
36
Veerle -
I noticed that on your Done Like Dinner page, that title “Order Done Like Dinner Meals” at the top has a registration mark after the phrase. You can superscript the registration mark by enclosing the ® in superscript tags like this:
<sup>®</sup>
—in case you didn’t know. I had to do a lot of superscripting of registration marks recently for a web page that I managed, so that is why I noticed this. Hope you don’t mind me pointing it out. ;)
37
Very nice, I think it has your flair, but it’s obviously similar to their flare because they already had the logo with the heat swirls. They chose the right designer.
“It’s weird I don’t get this effect anymore at all. On Geert’s Mac it appears rather randomly, but mostly “not”. It always disappears as soon as he reloads. I wonder if it has anything to do with the order of loading of things.”
You could be right about that. I’ve had problems with right floats not being in the right place and having to load them before the left float before. I found a better solution in the end, it just took much playing.
Quick question - what did it mean when you used font:75%/150% ? I’ve never seen two values separated by a / for font size before.
38
Hi, I love your work and blog.
I was just curious on which fonts you use for the subjects and posts.
Keep up the good work :-)
39
Just found you site… beautiful work here! I love it!
Keep it up
Oli
40
Jackie said:
You’re right and I knew this already myself, but as good as all content is added by my client and he probably didn’t know this, so I’ll pass this on, thanks.
kristarella said:
It’s the fontsize and line-height separated by a slash. I’m always using CSS shorthand properties for my styles.
Tanya said:
I use the “Century Gothic” (installed on about 80% of the computers) and “Trebuchet MS” as second alternative in the font-family property.
41
The website doesn’t load for me? have they taken it down for some reason?
Anyway very nice site and nice information on the design work, thanks for that.
42
Hi Veerle,
I had no idea you were the rock star of web design - we obviously made the right choice! There are meal assembly kitchens popping up all over Toronto now, and most of them have busy and cluttered websites. We’ve received numerous compliments on our site, thanks again. Business is great and we’ve been receiving a lot of media attention lately.
Sanyo
43
great site again Ms V.
As a web designer, I wish I had you as my boss!
I am too wondering about the footer sticking to the bottom question. Recently i designed one site..but the foote and body had different colors..so had quite a tough time adjusting it.
DO you have any tutorials or suggestions regarding this?
Thanks in advance and all the best…
[ps: can i sill send my cv ;)]
44
The design of the site is awesome. And of course explanation is the best. Thanks for your works!
Commenting is not available on this article.