The New Path

95 comments (Comments closed)

1. At 6:28am on 9 jul 2003, Anne van Kesteren wrote:

It’s look good, only the :hover color (red), doesn’t look good. Were you inspired by minitabs from SimpleBits or not?

2. At 6:28am on 9 jul 2003, Dan Allen wrote:

This is a terrific looking site!
Thanks for taking the time to provide such a detailed description of the process.

3. At 6:48am on 9 jul 2003, Doug wrote:

Anne: I certainly saw Dan’s Mini Tabs example, which is nice. But no, this design and CSS for the AP site were originally created back in February, several months before Dan published it in June on SimpleBits. We’ve been tackling the site in small chunks since then when we have spare time, and have just recently finished designing and pushing the entire site live.

As for the red in both the :hover states and the title colors, it may be changing soon. A minor communication error caused me to think the red was an accent color in their corporate color scheme. Apparently it’s not, and was just a relic of the original design.

4. At 6:51am on 9 jul 2003, Simon Willison wrote:

Love it. That’s some sexy CSS. I imagine it’s pretty accessible already thanks to the structural markup but have you considered adding a few of the less well known accessibility features such as link elements, accesskeys etc? I only ask because I plan to use the site as an example of “best practise” web development in a course I might be teaching in a few months time.

5. At 7:29am on 9 jul 2003, Ed wrote:

Quite snazzy! The page load times are especially nice.

Raising a glass to your first site out of the gate. (clink)

6. At 7:36am on 9 jul 2003, Arikawa wrote:

I’m sure I’m alone on this, or at least in the minority. Yet, I really like the red accents.

As much as we are taught that green and red are complementary colors, it’s just difficult to make them play well together.

In this case, you actually pulled it off. I had intended to post lauding your green/red efforts, only to read on and see that it was a miscommunication!

Mistake or not, you managed it without it coming off like the Adaptive Path Christmas Special.

Well done!

7. At 8:17am on 9 jul 2003, Jason wrote:

Looks really great. I do most of my browsing with IE5/Mac, and the site looks fantastic. Only thing that stood out to me — and this may be an issue specific to IE/Mac — is that the sidebar on the homepage displays nothing above the paragraph of text (no photos or anything, just a large empty space where content would seem to appear). This also happens on the team page - there’s a large swath of white space between the headline and ‘Who We Are’.

Very sweet site, though. Nice to see what you’ve been working on.

8. At 8:28am on 9 jul 2003, Blakems wrote:

Good job, Excellent layout. I noticed that you went with the property float for your main columns. What advantages or disadvantages did you find with using that over absolute positioning.

Very cool how you did the float on each page with the body tag.

9. At 8:37am on 9 jul 2003, Adam Polselli wrote:

Gorgeous, Doug. Your attention to typographic detail never ceases to amaze me.

Like others, I think the red accent looks fantastic. It was implemented to perfection.

Well done!

10. At 8:39am on 9 jul 2003, Paul Scrivens wrote:

Amazing how you packed so much information into such a small space (fits nicely in 800x600) and yet give it a very clean and intuitive look. Always great to see another beautiful site done in XHTML+CSS so that we may move towards a better web. Nothing but envy coming from my side.

11. At 9:19am on 9 jul 2003, Keith wrote:

Wow, nice work man, it looks and works great. I really love what you did there and as others have mentioned it’s great to see another great example XHMTL and CSS used to build a great site with a design that’s right up with the best out there.

Give yourself a pat on the back. Cheers!

12. At 9:46am on 9 jul 2003, Sharif wrote:

Wow! The site is amazing…clean, crisp, and good looking.

Plus, it’s great to see the Web continue its steady move towards standards, one site at a time. (Can you tell I’ve been brainwashed by “the orange book”?)

13. At 10:33am on 9 jul 2003, Constantine Hannaher wrote:

A quick look at the source of the index page shows that you are using named entities, » for “right angle quotation mark”, for example. I am curious about this choice to use named entities if the character set is UTF-8?

14. At 10:41am on 9 jul 2003, lane wrote:

Oh, I can answer that last one. Everything with a named character entity is being pulled out of an MT database, and existed before the site’s transition to clean, pure XHTML. When I went through and cleaned up the archives, I only fixed up those things that actually upset the W3C validator, figuring that the rest of it would drop off of the site eventually. There’s only so much time in the day, you know?

Also, Doug, I really like the red, too. Pay no attention to that Jeff guy. Seriously, what does he know about the Web, anyway?

15. At 11:26am on 9 jul 2003, todd fahrner wrote:

ooo shiny - i’ll be studying. thanks for yet another standards-savvy beautiful site to spank the img/table/br/nbsp masses with. i think the red could tilt happily more toward orange.

16. At 12:01pm on 9 jul 2003, scottandrew wrote:

Holy crap, that’s beautiful.

17. At 12:11pm on 9 jul 2003, avianto wrote:

Great work! Another case study to put into my fine collection of good implementation of web standards. Again, toast on your design.

18. At 2:08pm on 9 jul 2003, Bertilo Wennergren wrote:

Good design, but there seems to be some not so good restrictions on size in the team photo section. It’s not fluid enough. With my settings in Firebird (minumum font-size 16px) the text overlaps in an ugly way (kind of spoils the rest of the good looks). I’ve put up a screen shot. Look at the names Jesse James Garret and Mike Kuniavsky.

19. At 2:09pm on 9 jul 2003, Terry Melanson wrote:

Crisp, clean, fast and streamlined. Inspiring work! Good content deserves a good design and you have delivered in spades.

Looking under the hood to see how you accomplished the picture/li swap, I must say I am impressed with the teampics id selector. Nice job!

20. At 3:31pm on 9 jul 2003, Doug wrote:

Everyone: Thanks for all the positive comments so far.

#18 Bertilo: You’ve stumbled across the one bug I knew of with this approach and implementation. I haven’t been able to find an acceptable solution, but would like to. None of the alternatives I’ve thought of so far are very appealing:

[1] Avoid grouping the names into two columns. Let them each share their own row stacked one on top of the other. This would allow each name plenty of room for width expansion. As you might guess, this option isn’t very appealing because of the extra vertical real estate it would consume, and the wasted space that would exist to the right of each name.

[2] Reverse the absolutely positioned element. This may be the best option, although it will make the markup a little uglier. Instead of positioning the name, position the image, so that the names fall under normal flow (and are thus aware of each other’s heights and any necessary wrapping). I’d need an element to position the image separately from the name. But the element could not surround the text — it would need to be it’s own empty element. I know the span used there already is junk. It’s there only to be a style hook to position the text outside the <a> element. But to use it for the image, the span would need to exist on one side of the text, yet still within the <a> to continue the :hover change effect. Each list item would need to look something like the following:

  <li class="lane"><a href="/team/lane.php"><span></span>Lane Becker</a></li>

[3] Use <img> elements in the markup. Follow option #2 above, but insert <img> elements into the empty spans so the spans don’t seem so lonely and meaningless. This would require additional code, but may have a potential benefit of including the image regardless of style sheet presence.

[4] Switch name & photo order. In this particular instance, it’s the length of Jesse’s name which becomes the problem (through no fault of his own, obviously). If Jesse’s name could be moved to the last position in column one, and a small amount of additional padding were added to the bottom of the whole list, Jesse’s name could wrap when needed without obscuring any names below. However, the partner names/photos are supposed to be displayed in alphabetical order. So while this might be convenient for presentation’s sake, it’s not really a valid option.

Anyone else who has additional ideas (which work in all targeted modern browsers, not just Opera or Mozilla), feel free to post them here, or send directly to me. Thanks.

21. At 3:36pm on 9 jul 2003, MikeyC wrote:

Very nice. I especially like how that rollover of faces uses absolutely zero javascript. I think I saw something similar on Eric Meyer’s site, but not nearly as cool! Going to start dissecting right away!

22. At 4:30pm on 9 jul 2003, J. Porter wrote:

This and adaptive path a very good examples of proper HTML with CSS enhancement. What people often forget is desgins like these also allow readable content on things like my sprint phone with no changes to the page layout. Now if people could only learn HTTP and the meaning of URIs we’d be in a perfect world.

23. At 5:05pm on 9 jul 2003, Brian Peddle wrote:

Amazing Job. I have gone back several times today to admire your work.

24. At 5:23pm on 9 jul 2003, Martin wrote:

You sir rock the casbah! Well done.

25. At 5:45pm on 9 jul 2003, Ruth wrote:

This essay

On the following page, the image content_inventory.gif [path: /images/publications/essays/content_inventory.gif] breaks the page layout - it extends from the main content column into the right column.

But I’m nitpicking - this site, overall, is excellent. I’m working on a fairly large CSS-based redesign myself (a tables-based high school website originally slapped together by a FrontPage junkie), and this has given me a heightened appreciation of the hard work you have put into Adaptive Path’s new site. Great job, and congratulations!

26. At 5:53pm on 9 jul 2003, Jough Dempsey wrote:

Doug,

Another beautiful standards-compliant design that I can send prospective clients to that need convincing that XHTML/CSS really *can* be used on sites other than personal blogs and content-limited home pages.

Bravo!

27. At 6:08pm on 9 jul 2003, Robert Kissinger wrote:

Wow, that is some kick-butt CSS! I’m still battling my footer to get it to sit at the bottom of the longest column. Color me jealous… ;)

28. At 7:04pm on 9 jul 2003, nick wrote:

you’re a frickin’ ninja.

29. At 7:45pm on 9 jul 2003, Will wrote:

Doug,

You are an inspiration to a designer starting his own firm doing XHTML/CSS designs. You and Zeldman are my heroes, I hope to meet you both someday.

Cheers.

30. At 10:43pm on 9 jul 2003, UltraBob wrote:

Very very cool! I now need to dissect and figure out a few of the tricks you used here. The two-way image rollover for one, but the footer at the bottom of the longest column one is something that would serve me well in nearly everything I design right now. Thanks for the well written synopsis of the features of the design.

One last thing: I’m in the camp that thinks you pulled the red off really well. Then again, there isn’t really a compelling reason for it to stay red either, and a dark green would probably provide more visual consistency without being any less useful, and without hurting the overall aesthetic of the page.

A brilliant design overall, and I’ll be taking this apart with pleasure. Great job you all did!

Keep it Up!

UltraBob

31. At 11:05pm on 9 jul 2003, red_one wrote:

Why are you using XHTML?
http://hixie.ch/advocacy/xhtml
http://lists.w3.org/Archives/Public/www-archive/2002Dec/0005.html

32. At 11:30pm on 9 jul 2003, David S wrote:

You’re work is truly beautiful Doug. I don’t even know why I bother. Next time in SF I’m gonna buy you a beer. Or coffee.

33. At 11:42pm on 9 jul 2003, sonia wrote:

Doug,

Great looking site. Above all, the typography is incredible - who needs images when you can do that with CSS!

One point - Although things are positioned so that the main content isn’t too far down the page, would it be too difficult to implement a ‘skip to content’ link?

Having to sit through the link to home, that menu and the breadcrumbs may be something that would ‘degrade the experience’ of some users (Irony: The main home page ‘text’ states ‘the value of experience’).

34. At 11:44pm on 9 jul 2003, benvolio wrote:

hey there doug,

another great site!

benvolio

35. At 12:05am on 10 jul 2003, Johnny Amos wrote:

Very nice. I’ll be dissecting it soon.

I did notice some problems while using Moz 1.4 on XP. I’ve taken some screenshots for your perusal.

Since red doesn’t suit Jeff, try acid green.

36. At 12:45am on 10 jul 2003, Morgan Roderick wrote:

Amazing!

Finally someone managed to do a “corporate” site in GREEN.

37. At 1:34am on 10 jul 2003, Joe wrote:

Just adding to the well-deserved praise above — Well Done!

One teeny-weeny thing: on the Team Page, under Who We Are, you have saavy, should it not be savvy? I know it’s not hip to point out typos like that but the site is so good it would top it off if it was fixed.

38. At 2:45am on 10 jul 2003, Owen wrote:

Woah, baby. This kind of work is an inspiration. Simply marvellous. All power to your CSS chops, or similar.

39. At 3:07am on 10 jul 2003, Jean-Marc Fontaine wrote:

The site looks absolutly great and I will look at the code to learn many things.

I also have one comment: when I try to visit the site using IE 6.0 instead of displaying me the site, it shows me the save as box as if it was a file to download. The downloaded data are just junk. Am I the only one who experienced that ?
BTW on the same box everything is ok using Mozilla FireBird.

40. At 3:08am on 10 jul 2003, Olly wrote:

Wow. Thats pretty damn spangly. I’m liking that a lot!

41. At 3:13am on 10 jul 2003, Jean-Marc Fontaine wrote:

Oops sorry for my comment about the IE issue. Now it is working.
That’s very strange since I tried several times before posting. Maybe that’s another joke from our firewall. :-/

42. At 3:39am on 10 jul 2003, David Mantripp wrote:

amazing… you’ve solved the footer problem. Brilliant idea!

43. At 4:10am on 10 jul 2003, Ronald van der Wijden wrote:

I’ve been pointed to the Adaptive Path site through Jeffrey Zeldman’s Daily Report; excellent piece of work! Clean, straight-forward page, outstanding use of styles; simply awsome! I especially like the subtle, fluid background effects on the header and footer; I have to admit I spent some time figuring out how you pulled that off. Very inspirational.

44. At 4:14am on 10 jul 2003, Richard wrote:

Really cool idea to use a body class to change the width of page elements. I shall steal that idea.

Just wondering if the length of the CSS file is, or would be, a problem?

45. At 4:57am on 10 jul 2003, Paul Michael Smith wrote:

Take a bow Doug!

Very impressive stuff, I shall be striving for your level of excellence in CSS based design. Money well spent by Adaptive Path.

46. At 5:14am on 10 jul 2003, Kris wrote:

/me gives Doug a handshake and thumbs-up.

47. At 5:24am on 10 jul 2003, Ben Ryan wrote:

Doug, I’m not totally sure if this would work, but was just thinking a possible solution for the issue raised in #18 might be http://www.w3.org/TR/REC-CSS1#list-style-image

Couldn’t you set the person’s image as the list image marker, then set a height for the list item that is that of the image?

Love the site (and this one).

48. At 5:53am on 10 jul 2003, Ben Ryan (again) wrote:

Sorry, when I said height, I meant line-height, so that if they flow to a second line, they’d adjust for each other.

49. At 5:57am on 10 jul 2003, Fred Smith wrote:

I’m ready to start using table-less design. Are there any recommended books on how to get started? I prefer a big stack of dead trees to learn new material.

50. At 6:39am on 10 jul 2003, steve wrote:

Curious to know if the site is using a content management system.

51. At 8:41am on 10 jul 2003, huphtur wrote:

steve: “and to Jay Allen, who helped Adaptive Path build out most of the pages and PHP scripts, and customized Movable Type for them to generate and publish key portions of the site.”

52. At 8:54am on 10 jul 2003, Ryan Schroeder wrote:

Doug,

I, and I assume many others here, would love to see a brief technical write up on the techniques used in you layout css code. I’ve started to go through it and it seems rock-solid but it’s always much more informative to hear the hows and whys in addition to the whats. Thanks.

53. At 9:00am on 10 jul 2003, Leonya wrote:

It would also be great to see some technical details about the programming side - MT plugins used, tricks, etc. I’m doing development with MT, so such details can be very helpful.

54. At 9:04am on 10 jul 2003, Robert Roberts wrote:

Terrific Site! I preach web standards and accessiblity to an online class each month, and this site will be a great example, particularly for those whose reluctance includes the notion that usability/accessibility equals boring.

55. At 9:22am on 10 jul 2003, Scott Heath wrote:

Sorry to point out typos again, but on the team page, a few words before “saavy” is “practioners.” At least these are both obvious typos and not (technically) spelling errors. But isn’t that just always the case: really brilliant and polished design, but with some silly content error…

56. At 9:35am on 10 jul 2003, lane wrote:

i’m all for typo-fixin’ — and feel free to send all typo reports to me, since i’m the one that can do something about it, and i suspect that deep down doug just really doesn’t care about them.

also, can we say “spelling” instead of “content” error? it just wigs me to see the word content used in that context.

57. At 9:39am on 10 jul 2003, ForgetFoo wrote:

very nice, clean, and inspiring :) really like the nav/sub-nav and of course, the double css-imageover is just downright sweet!

58. At 9:44am on 10 jul 2003, Patricia B. wrote:

While I do agree that the Adaptive Path redesign is a nice, clean design, I find it hard to believe that a company who promotes themselves as being Experts of User Experience can’t seem to get their forms right. I managed to register for one of their workshops choosing their credit card payment method (not through paypal) with fake information. Where is the form validation? Where is my summary of what I am purchasing? I should see this information before typing in my credit card. Why can’t I return to the Adaptive Path site after the form is complete? These are simple issues which greatly hindered my user experience of this site. Doug, were you responsible for the form design? If not, do you feel that this is a reflection of your work since this is a site you are featuring in your portfolio? Although the site is great, fixing these issues would make it much better.

59. At 9:48am on 10 jul 2003, Jason wrote:

Excellent as expected. Loved it all.

60. At 9:51am on 10 jul 2003, Sam wrote:

Wonderful!

My only nit-pick is the dashed links, which really are meant to infer help links, as opposed to hyperlinks…but that’s a pretty minor issue ;o)

61. At 10:10am on 10 jul 2003, Greg wrote:

Very nice design! However, I also noticed some major usability issuses regarding registering for events. For example: I can still register for a past events. Also, why would Adaptive Path offer payment by PalPal (secure) and Visa (not secure)? Offering both payment methods could present itself as confusing to the end user. I too noticed that there is no credit card # and expiration validation and when I enter personal information and choose PayPal the information is not being distributed in the correct fields - in which case I must reenter the information. For example: See Telephone Number. I want to reiterate that the design is really well executed, but common mistakes in usability can affect the user experience.

62. At 10:24am on 10 jul 2003, Pete Hopkins wrote:

Wow… very slick. I hope that you can write in more detail about some of the tricks (in particular the image-rollover and the changing from two- to three-column pages).

Perhaps an A List Apart article?

63. At 10:26am on 10 jul 2003, Jimmmy Mack wrote:

I liked Nick’s comment above. Your are a ninja. Love the redesign. I like that you keep finding new techniques for site elements. Keep it up. It really helps out the community.

One question or comment really. I used to think the print css was the best idea under the sun, but now I’m torn. After seeing Zeldman at a Web 02 last year I started using the print css the way you implemented it here on adaptivepath for our intranet site, but I’m getting some interesting feedback. People want to see a more graphical presentation in the when they print. I’ve been finding that it really confuses them if they don’t see what they think they are going to see. One employee even told me his printer was messed up. That it was screwing up my pages when he printed it out to read them…. (whole other topic) But you know, I’m starting to agree. I’ve switched the print css to only swap out images that are more suited for print and things like resize some of the columns. Where do you see this going Doug?

64. At 12:11pm on 10 jul 2003, Lars Holst wrote:

Absolutely stunning. And damn, does it load fast!

This has to be one of the most complete sites I have ever seen: informational, functional, standards compliant, and beautiful. It has it all.

Or, as the Germans would summarize it:

Quadratisch, praktisch, gut.

65. At 12:11pm on 10 jul 2003, Tantek wrote:

http://tantek.com/log/2003/07.html#L20030709t2247

66. At 1:55pm on 10 jul 2003, Dave wrote:

Very nice. One problem (?) I noticed was that the red text when hovering over the photos or names doesn’t revert back when the mouse leaves it. I’m using IE5, Win2K.

67. At 3:30pm on 10 jul 2003, Ian Adams wrote:

Gorgeous site. Absolutely stunning. I love the hover effects on the face/names, like many others I also feel that the red hover works well on the links, stands out. However, I feel that the underline should not have been spotted due to the convention of using that as an aid in defining terms/helps. Though the spotted underline does work well from a purely visual point-of-view. Like everyone else, I hope to see more articles from you on how and why you did what you did. Love it.

68. At 3:49pm on 10 jul 2003, Snaddo wrote:

Excellent work. Here’s my nitpick…

In IE5.5/Windows when you rollover the names of the team on the homepage the cursor is set to cursor:text rather than cursor:pointer.

69. At 4:37pm on 10 jul 2003, Doug wrote:

#66 Dave, and #68 Snaddo:

Don’t associate the problems you’re seeing with the technique or the design. IE5.0/Win and IE5.5/Win are quite ridden with bugs and lack full CSS support. Technically, IE6 has a lot of problems too, but at least it’s more reliable — but that’s entirely off subject. I tried to make sure the AP site displays and functions as best as possible in all modern browsers (including down to IE5/Win), but some sophisticated tricks just aren’t worth trying to reproduce in every browser, or at least in exactly the same way.

For Snaddo, your browser is ignoring this rule in basic.css:

#teampics li a:hover span {
  color:#c00;
  cursor:pointer;
  background-image:url("/images/new/bullet_red.gif");
  }

which specifically addresses hovering over the text.

70. At 6:00pm on 10 jul 2003, Nick Finck wrote:

http://www.digital-web.com/new/2003_07_01_archive.shtml#105779561143791273

71. At 11:05pm on 10 jul 2003, janco wrote:

I like this design (not in the last case because if the nice Acid Green). Especially because it doesn’t use loads of images to make up the design!

72. At 6:13am on 11 jul 2003, Sam wrote:

#teampics li a:hover span {
color:#c00;
cursor: hand;
cursor:pointer;
background-image:url("/images/new/bullet_red.gif");
}

I believe this should fix the problems #68 is having. IE5 supports a slightly different version of the cursor property.

73. At 7:01am on 11 jul 2003, emm ess wrote:

Doug,

You kick large A

Now how do you convince clients that their site still looks _professional_ in non-std-comp browsers although it doesn’t look _identical_

Am I merely not persuasive enough?

How I yearn for the day when I get a client like this

Great job Doug, great job letting Doug do his job AP

74. At 7:43am on 11 jul 2003, Simon Jessey wrote:

I’d like to offer my congratulations on a superb effort. I am constantly impressed by your attention to detail and fine grasping of What Looks Good. I confess I like to browse your work just to look for design ideas. These are the elements I like in particular:

   1. Use of green
   2. Use of typography
   3. OMG A working footer!
   4. Clean markup

I don’t like the dotted underline on the hyperlinks very much (I’d reserve that effect for help text) but apart from that, I think your work is tremendous. Now can we see a detailed explanation of the design and construction techniques in a book or ALA article?

75. At 7:50am on 11 jul 2003, Joseph Seeley wrote:

The text area on the Contacts page is really small (IE 5.5).

Overall, thanks for allowing others to learn from this site. There is much worth learning.

76. At 9:02am on 11 jul 2003, mothernatrsson wrote:

Personally, I think the Adaptive Path site looks like hell. This site as well. The fonts look like little broken lines and not fonts at all until you increase the size 150%. It may be “cool” but I do not see any “Clean, elegant aesthetic. Straight-forward structure”. If I have to resize the text to be able to read your page, I probably won’t and will not return. Is it that difficult to make it legible?

MNS

77. At 9:15am on 11 jul 2003, Dan Rubin wrote:

Terrific job Doug! As usual, you have provided more than just an outstanding end result to your client, but an inspiring example to designers everywhere, both visually and behind the scenes.

As for the footer, I can’t believe so many folks are that amazed by it — is it really that difficult? I’ve been doing it on SuperfluousBanter for a while now, and I didn’t have to use any tutorials or instruction books, it just worked the first time I tried it…

Of course, now I have to go back to the drawing board for my corporate site design, since you’ve just raised the bar… damn you! ;-)

78. At 10:30am on 11 jul 2003, Doug wrote:

Yes, Dan, the footer deal is pretty simple when using floats for columns instead of absolute positioning — which is one of the answers for Blakems’ question in comment #8. Though this was certainly an issue for the Wired News design since it used absolute positioning for the two side columns. Confining the WN footer to the main column width was a decision I never liked.

For those who’ve been asking, yes, there will certainly be a write-up coming soon to explain some of the decisions and techniques used for the AP site.

79. At 11:15am on 11 jul 2003, radu wrote:

just one issue regarding print.css: setting the body background-color to #fff would prevent the ink cartridge going empty… since some users may have “print page background” set as default.

the rest is great!

80. At 12:37pm on 11 jul 2003, Jay Allen wrote:

Leonya wrote: It would also be great to see some technical details about the programming side — MT plugins used, tricks, etc. I’m doing development with MT, so such details can be very helpful.

Hey Leonya, most of the backend for Adaptive path is pretty simple right now. The whole site is controlled by four Movable Type blogs: Appearances, Essays, News and static content.

The appearances blog outputs team appearance content on http://www.adaptivepath.com/team/ and http://www.adaptivepath.com/team/appearances.php.

The Essays blog controls output of the individual essays as well as the essays index and the essays archive index. It also produces a listing of the latest essay by each team member on each of their individual pages. Each entry in the blog is a full essay with excerpt and is categorized by author and subject which makes for easy indexing down the road as well as the conditional output to the team members’ pages.

The most exotic wrestling with Movable Type on the AP site is the news blog which contains all of the other dynamic content on the site (including Articles Elsewhere, Essay Announcement, Interview and News). These seemingly disparate types of information are output differentially using categories (as with the team members essays).

The static content blog is something I started doing recently with Jad Fair (http://www.jadfair.com). Essentially the blog contains no entries, but only templates and template modules. In a perfect world (which AP will reach when we finish up later this year), every single piece of static text and all image tags will be editable through the Movable Type interface obviating the need for anyone to go in an edit files on the file system or to hunt through hundreds of Movable Type templates.

With Jad Fair, I made a gateway page with direct links into every part of the system that Jad would have to use (screenshot). This was important because Jad’s system is even more complicated than the Adaptive Path site is currently and Jad is a novice when it comes to web design so I didn’t want to present him with a very steep learning curve.

If you look at the screen shot, you’ll notice that from that page, Jad can not only access every part of his site, but can also get many different views of all of the entries in the system in every blog. There are also links to create new entries and, in the static content section, links to each template module containing static text. This is essentially what will happen later with Adaptive Path.

We also strived to keep repeating elements out of the templates so every page sets a certain number of variables (main/sub page flag, layout type, and title) and includes the header, footer, announcement box and mailing list box via PHP.

The header file is not static HTML but in fact a full-blown PHP script which sets up functions for use throughout the site and handles differential HTML output between sections as well as top-level pages vs. subpages (e.g. /team vs /team/veen.php) and more…

Lastly the announcement box is a nice piece of coding which essentially dynamically outputs the most important announcement relevant to the current section being viewed. The script initially searches for the top-level (site-wide) announcement file in the web document root directory. If it exists, the contents are read and displayed as the PHP include on a site-wide basis.

If the top-level announcement file does not exist then the top-level section directory is searched next. For instance, if you are loading this essay, then the script would look in the /publications directory for an announcement box relevant to the publications section and that would be displayed regardless of how deeply you descend in that section.

In this way, each section can have its own custom announcement box, or, if there is really big news, they can all be overridden by the main announcement box file.

Needless to say, all of these files can be edited via the static content blog described above.

There are many other things in store for Adaptive Path later in the year, but I’m not going to give away any surprises at the moment. Eventually, as soon as I get some time NOT developing sites, I’ll write up a lot of these things that I do with each client in an article in an online web design zine to be named. I will also explain how, with my most recent client, I pulled together the Movable Type and phpBB user authentication systems for a universal login and seamless integration on the site. Fun stuff!

In closing, I will say that a large part of making PHP and Movable Type work for clients is customizing the MT interface for their needs and making things drop dead simple. After development has ended, my account becomes the administrator account and can be used to control everything and anything but is rarely accessed. All user accounts are set up with permissions to do only the things that are necessary for each blog. On a blog with no categories, no one has permission to edit categories. On the static blog, the only two actions available to people are template editing and rebuilding. This strips down the interface to the bare essentials. Of course, in the case that a gateway page exists, it’s hardly necessary to even navigate with the MT system itself since all links are direct links to the parts of the system needed.

That’s all folks!

P.S. Hey Doug. Sorry to take up so much space… :-)

Update: (inserted by Doug on 15 July 2003) I copied and pulled Jay’s comment up to a main entry a few days ago, which now carries its own comments thread.

81. At 4:32pm on 11 jul 2003, kirkaracha wrote:

It’s great design and a very impressive XHTML/CSS implementation.

I have a couple of minor issues.

The section headers are coded like this: <h4><strong><span>Services Sections:</span></strong></h4> Shouldn’t the h4s be h2s? And couldn’t you define font-weight: bold for the headings instead of using the (seemingly redundant) <strong>?

On the Contact page, shouldn’t the list of partners be a definition list, similar to the list of services on the Services page? And why not use address for the address?

82. At 5:06pm on 11 jul 2003, Doug wrote:

#81 kirkaracha:

I’ll admit right up front: The <strong> tags are nested inside the h4s as pure hooks for more complicated styling. I wanted extra “bits” (my term for the small rectangular images which echo parts of the logo) in the design, but I didn’t want these decorative images present in the markup. To do this, I needed an extra element so that I could work with two independent background images which anchored themselves to the left and right side of the browser within the same block. The h4 gets the white/dark-green “bit” image that appears in the right side of the header, and the strong tag gets set to display:block and provides the second element for the large main header image which appears on the left.

The extra span element is used to hide the text via the FIR method, described in this tutorial.

As for whether this hidden object gets marked up as an h4 or h2? In my opinion, this minor text label didn’t warrant the second highest heading level, so I bumped it down two notches.

Your suggestions for the Contact page are dead on though, and worth implementing when we get a chance.

I don’t make any apologies for adding in these extra elements as hooks for additional styling. These elements may be redundant in some cases, but they don’t remove any semantic value. I try my best to keep the code I produce as simplified as possible. But I’m not a semantic purist — look elsewhere for that. I’m a designer. And I’m tyring to work with what we’ve got to produce the most aesthetically pleasing designs I can.

83. At 11:12am on 12 jul 2003, Michael Hebron wrote:

One second while I pick up my jaw…alright. You and the Adaptive Path development team are a great inspiration. The Adaptive Path website’s subtitle "the value of experience" perfectly conveys my feeling that this site is a valuable experience for Adaptive Path’s clients and web users the same.

84. At 1:08pm on 13 jul 2003, Mike Reeves-McMillan wrote:

I have noticed, both here and on Wired, that if I increase the viewing size to “larger” in IE6 the text no longer sits within the columns correctly. Very likely an IE fault rather than a CSS fault, but still annoying.

85. At 3:16pm on 14 jul 2003, huphtur wrote:

ey doug/lane, i have a question. what happens with the teamlist thumbnails if adaptive hires a new person? how is an 8th team member going to fit in the column?

86. At 3:34pm on 14 jul 2003, Doug wrote:

Huphtur: The easy answer is: it won’t happen. They’ve added members to the team in the last year, but they’re unlikely to change the number of Partners (with a capital “P”) anytime soon.

However, if the number of partners happened to go up or down by one, it wouldn’t be difficult to either resize the images so they fit within the same width (or a close one). Or we could resize that column. If the number changed by more than one in either direction, I’d probably just redesign that box somehow, once I knew the parameters.

The whole team photo section is bound to be changing soon anyway, as the partners get more “official” (read: professional) photos taken in the near future.

87. At 11:08am on 18 jul 2003, luyen wrote:

One of the benefits that you wrote about was ease of updating, can you clarify a bit here.

When i look at the CSS for adapative path, or any large CSS for that matter that unavoidably sets lots of specific rules, ends up being quite difficult to read.

No doubt it’s less consuming than going into markup and changing things, but at the same time, I see a definite learning curve if you pass on a stack of CSS tags to someone who perhaps is an editor or not familiar with it.

88. At 12:05pm on 18 jul 2003, Doug wrote:

Luyen: One of the benefits that you wrote about was ease of updating, can you clarify a bit here.

This usually refers to the ease of maintaining the content and markup, not necessarily the CSS file.

[1] By removing all the presentation junk from the markup, it gets much easier to see content and proper structural tags. Content changes can be made without needing to wade through tons of table and font tags.

[2] With the way I set up AP’s style sheet, they can simply change the body class to switch a two-column layout to a three-column, and vice-versa — no tables to reformat.

[3] Design changes can be controlled site-wide through one file. AP can focus on adding content or making changes to their site, without worrying about the design details and the extra cruft that used to hold their site together.

[4] Most of the site is now pure text, styled with CSS. In the old version, headings, subheads, pull-quotes, and navigation pieces were all made with images (and in some cases where javascript rollovers were used, multiple versions of each image). Now that almost everything is text, AP can simply change it whenever they feel like it, without needing someone to boot up Photoshop, change multiple images, re-export them as gifs, then upload them to the site.

Yes, when you’re doing everything with CSS, the style sheet usually grows larger/longer than some people are accustomed to seeing. This is why I use comments to break the CSS into logical sections. I also try to use easy-to-understand id or class names if they’re needed. It’s important that long style sheets stay as organized as possible, just for the reason you point out: sometimes someone else comes along who needs to make changes to the style sheet. If it’s sloppy, unorganized, and the rules have no consistency to them, it will be much more difficult for a new person to come in, make sense of what they see, and find what they need to change.

89. At 5:19pm on 20 jul 2003, Jay Allen wrote:

Also, style sheets (that are linked, not inline) are far better than individual page markup because the style sheet is read ONCE and cached. Essentially, after your first page load, your browser is educated about how to style the entire rest of the site before you even click on your first link.

90. At 9:33pm on 22 jul 2003, anderson.mendes wrote:

Its simply amazing having someone like yourself talking and using standards and coming out with beautiful designs like this and giving descriptions. Thanks for the unvaluable inspiration.

I’ve been trying to convince co-workers that we should use CSS only, unfortunatelly most complain that japanese fonts are hard 2 control.

After I bought Eric Meyers New Riders book I realise that css goes way deeper than I thought, actually really want to buy others and learn more.
Keep up the good work.

91. At 7:52am on 7 aug 2003, Don Durkes wrote:

A very impressive development indeed. As a newbie to MT and Blogging in general, it’s great to see some of the extremes to which the technology can be taken.

Easy to use, great looking and a seemingly simple design.

92. At 7:33pm on 19 sep 2003, Consultoria wrote:

Impresionant!

93. At 7:34pm on 19 sep 2003, Diseño web wrote:

Good css use.

94. At 7:36pm on 19 sep 2003, ofhost wrote:

And good adaptation.

95. At 10:43am on 22 sep 2003, Erik Lillestol wrote:

Very nice site. I’ve been watching adoption of CSS from the sidelines. Your explanations along with examination of the source and style sheets gives me some better understanding of proper use of div’s vs. class statements.

What tool(s) do you use when developing a site like this (Adaptive Path)? I’ve read that Dreamweaver MX 2004 has better support and rendering of CSS (if you paste the AP pages and sheets into current Dreamweaver, it’s really impossible to tell what’s going on).

Comments no longer open for this entry.