I haven’t put on a Spectacle for a while, but I’ve been feeling the urge. Its harder to find free time these days though. When it does go down again, I’m definitely interested in recruiting Matty Adler. Check out some of his pop art.

FoodMenus are pretty straight forward. Each menu is made up of one or more groups such as “Starters” or “Entrees”, and each group contains specific food items such as “French Fires” or “Crispy Seitan”. Items can be dragged and dropped into a preferred order, or they can be moved between groups.

Here is a short screencast showing how to use the FoodMenu system to create a new menu. It covers creating groups and items, editing, reordering, and deleting. You’ll probably want to view this in full screen for better detail.

So, just like everybody else, I heart jQuery. I’ve got a lot of code that already uses Prototype/Scriptaculous, which works fine, but I just have more fun writing with jQuery, and I think the syntax is cleaner. Plus, I’m always finding sick new plugins for jQuery, so I think a lot of other people are also in love and its like a group thing. I’ve been periodically converting some of my older Prototype code to work with my new young hip love, but sometimes its just easier to adapt something new than rewrite, which brings me to the integration of a WYSIWYG editor.

Lately I’ve been favoring the idea of “edit in place” over a backend admin page, at least for clients, because they can see their text directly in context, and navigate naturally to what they want to change. I like the way jEditable works, and I started using jWYSIWYG after finding the jEditable custom input plugin that ties the two together. Its good for simple things, but I wanted more power, which brings me to CKEditor.

CKEditor is the new-ish rewrite of FCKEditor. Its faster than its predecessor, cleaner, and more flexible. Sounds like a winner. My problem was just getting it to play nice with jQuery, and also to work as a custom input for jEditable. I couldn’t find anything for this online already, possibly because it turned out to be very easy to do, but I figured I’d take a stab at it myself. Most of the work was already done by Mika Tuupola in the WYSIWYG input for jEditable, and I really didn’t take the time to try and out-pimp anything in his code.  Its all pretty straight forward anyway.

There’s probably another way to do this, but being lazy, I didn’t take the time to dig in further into CKEditor just yet. It seems like CKEditor.replace() uses the id of a textarea to find it, so I needed to set a custom id on the textarea that jEditable created for the in-place edit. jQuery doesn’t have a built-in function like Prototype’s Element.identify() I looked around and found a generateId jQuery function by Mark Gibson and decided to just include that because I’ll probably end up reusing it. Also, I found it necessary to destroy the CKEditor instance after submitting the data, otherwise there were issues when I tried to edit the same text a second time. Maybe I could just look for an existing instance of the editor before trying to just replace the textarea, but it was easy to just clean up each instance after using it.

There was one other issue I ran into while setting it all up. My custom CMS merges all the javascript on a page into a single file and minifies it to speed up loading. CKEditor didn’t like being included in the bundle that way; it caused some kind of invalid operand error. I think something was getting screwed up by putting the already minified ckeditor.js file through my merger module’s minifier filter. The problem disappeared when I excluded CKEditor from my merge process and just loaded it separately, so don’t double minify.

Here are the files. You could merge them into a single file but I kept them separate since my system crams everything together in the end anyway. If you keep them in separate files just remember to include the generateId file first as the plugin depends on it.

jquery.generateId.js

jquery.jeditable.ckeditor.js

Over the weekend I was flipping through a copy of JPG magazine. I turned to one page that looked exactly like a modern web layout … chunky image header section, a wide column content area, and a narrow column sidebar. There must have been other subtleties that I’m not describing now, but my first impression was definitely, “this is a website, not a magazine page.” (The image above is not the page I’m referring to, but its a fair example.)

I’m sure this won’t be a revelation to some people, but I find it interesting how print design and web design are cross-pollinating each other’s gene pools. This is probably quite natural; web and print are both text and image based, and we’ve always used print-like references to solidify concepts of the virtual web, which is why sites have “pages” and we move “forward” and “backward” between them, as if we’re navigating a book instead of a sewer system.

When I first started paying attention to web design styles, it seemed important to forget the limitations of print when working with web pages. A book has a fixed width, there’s no way around it, but on the web, a site’s available page width depends on each visitor’s browser window dimensions. This difference in “physics” introduces a variable and requires flexibility; the web is fluid. This difference distinguishes web from print. It creates a world of possibilities, but also creates a few headaches. Your design must work in any browser sizing, and must flow correctly when resized. And I’m not even getting into differences among browsers (I’m thinking of one in particular that seems to get everything wrong, but is still popular enough to require supporting — IE6 — which, at this point in time and in this analogy, is like a rich kid who only made it through school because his parent’s were rich, and now he just keeps hanging out in the parking lot trying to pick up high school girls, because even though he gets older, they stay the same age. Please, don’t be a dumb high school girl).

The alternative to natural fluid layout is to impose a fixed width restriction and work within a boundary you set. Its consistent, making it possible to divide the space into predictable pieces, just like in a book or magazine. The trade off is the visitor is forced to view the page at your chosen dimensions, even if they have a 3-foot wide monitor … but who can actually read comfortably on a canvas of that size? I never maximize the browser window when I’m using the iMac with its wide view. Its unnatural; we’re used to reading “page” portions. The real trick with fixed width is not to set the size larger than a visitor’s screen dimensions, which would give them an annoying horizontal scrollbar and generally frustrate them away. While my first reaction to that is, “I’m sorry you suck, but 800×600 is just so 1995,” I know that doesn’t really fly. Luckily most people are browsing the web with their screens set at least to 1024×768. That might still seem narrow to some, but we’re forced to go with some averages here.

I’ve been interested in, and experimenting with, “magazine-style” layout on websites for a little while now. This usually means a fixed page width, multiple columns, big framed (and often captioned) images, and lots of white space. I think I’m attracted to print designs used on websites for several reasons including personal taste, but also something philosophically post-modern. Its easy to be overloaded with information, especially on the Internet now. Enforcing fixed spaces to work inside gives us some rigidity, something stable to stand on, to hang our information from. We’re not as overwhelmed by infinite possibilities when we have a fixed view port, a reference to the finite and the physical, perhaps a more human perspective. I know I’m stretching it a bit here, but I don’t think like this every day, so a little exercise shouldn’t hurt right?

Thanks for reading.

We’re in the process of launching a group of sites for Ocean Atlantic Sothebys. The core theme is still under development but its getting close to done. The agents will be able to customize the theme themselves, drag and drop widgets around, change text and colors, etc. Pretty cool stuff that I don’t think many other people are offering, at least not to real estate agents.

Here are a couple of the sites:

• http://resideindelaware.com
• http://sandiatthebeach.com
• http://lovedebeachlife.com
• http://christinestrauss.com