Baby steps to make design

I’m a writer not a designer, not a cheapscape, not one with any money yet, but one who has hacked out some wretched table-based designs in the past.

My new main web presence has to be tableless css/xhtml/MODx. You can see that I’ve gotten the domain hosted and have begun dorking around with MODx. Very way cool. I’m really excited about this.

Once I can pay a designer whom I can simply hand off work (and money) to (my own and that of my clients), life will be much simpler, but for now I’ll have to do this design myself. I’ve got a huge writing/illustrating contract that I just won. The actual work starts next week, so I won’t have time to continue to learn MODx as I have begun to do.

Please help me get started with the attached design. Knowing something about what’s under the hood is a very good thing, but historically I really can’t keep myself interested in the techie end of things.

I really look forward to your responses, and please let me return the favor. To paraphrase renowned marketing guru/Stanford MBA Tom Peters, it’s all about relationships, faith, good will, and hard work. Please do ask me to do something for you (writing, research, editing, technical illustrating, translating English/Spanish/Portuguese/French (wife is Mexican, I speak Spanish/Portuguese, buddy is from France).

Humbly,
-Dave

4 columns of type where the text flows across columns is really tricky and will take a JS solution that will inevitably be difficult to maintain and flakey in some browsers. Is that a real requirement?

Indeed. Very bad idea! What I would do, after a look at the screenshot, is make each of those sections a separate document (with your home page as their parent/container document), and use Ditto to display summaries and "read more..." links. One or two of the most important ones could even be incorporated into the sidebar, or a top section as in the Andreas2 template or Andreas 08.

As a bit of personal experience, the very first website I designed was a "brochureware" site for a vintage windup toy seller, and I basically just used his dead-tree brochure, scanned images and all. It was a very clever and successful dead-tree brochure, and looked like crap as a website. It got redesigned real quick, and I learned a valuable lesson. As Lucy said, what works great in print doesn’t always work at all in web design, and the client probably doesn’t know that (although I would expect an SEO consultancy to know).

I’m going to echo suggestions that it is a bad idea to use a print layout for the web. If you look at the most successful print media websites they use a vertical single column approach to content. Not to mention that the largest criticism of the new search engine cuil.com is that it used(s) a columnar approach.

People are willing to scroll vertically as it is a learned behavior but scrolling up and down and up and down increases the physical and cognitive burden on users.

I’d focus on a more usable aproach of a RTL Top to bottom design. If your client/project balks at it I’d cite usability (there is a lot of research on this) and successfull execution despite many media outlets breaking this.

Such frankness. Priceless! I am SOOOO reassured, even inspired to have found MODx, meaning the MODx community. Not to sound all corny, but the passion, the excellence is just all over MODx. The positive synergy that I get from this group influences other areas of my work! If I can get this group of impartial experts to sign off on what I do, I am assured of success, because I’m assured of using best practices!

Please take a look at the revised mock up. Just as MODx is not YAPS, I didn’t want my homepage to be yet another ho-hum multi-column layout. A layout I did once before based on an adaptation of a magazine page received high ooh-ahh ratings from everyone I showed it to, although it was spider hostile what with the wretched table-based hackery I used.

In the design of my new home page, I definitely don’t want to use anything that is not spider friendly or not SEO in any way, especially hackery or flakey code.

Improvements in the new mock up:

• No "mini article" continues from one column to another, so reading each "mini article" would not require any scrolling.
• Susan, your ditto solution is perfect (please see new mock up).

Thank you so much for the responses so far! If I had not gotten such help, I was prepared to hack whatever I had to if necessary from http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm, from http://www.mandarindesign.com/troops.html#magazinestyle1, and especially http://www.mandarindesign.com/troops.html#magazinestyle1.

I eagerly await your replies!

-Dave

"Proven dedication to your message in words and pictures" would probably be more effective if there were actually a picture there.

Studies have shown that readers of western languages tend to focus first on content in upper left corner of web page. Make the best possible use of that valuable real estate!

Doooop... Good point. I’m on it!

I’ve downloaded http://andreasviklund.com/templates/andreas08/ and http://www.myfreewebsitebuilder.com/. I’m going to customize the "andreas08" template with my own content. That is the plan anyway.

-Dave

OK. I’ve managed to break my site utterly...

I can’t keep fooling with this right now. I’ve got to go away for a bit, but BRB.

I used Andreas 8 here http://www.phpusers.org/home.html

Very much under construction; I’m doing this as a freebie, and with little feedback, but it’s slowly beginning to come together.

Looking good, Susan. Do you ever sleep?! I broke my site so bad that I can’t even get the orginial default page back. What I did was rename "index.html" as "indexOld.html" and then uploaded the "index.html" that comes with "andreas08." Since then I went back and deleted "andreas08" and renamed "indexOld.html" as "index.html" again, but the breakage persists (http://www.TalentNation.net).

I hate to hack... I’m so embarrased. For now I’m aggrivated, but if I can’t get my site functional by the beginning of next week I’ll be panicy.

-Dvae