How to integrate web apps (CMS, forums, shopping carts, etc..) into a site's design

Posted on June 3, 2007 in HTML-CSS, with 0 comments.

The open source movement has spawned an enormous amount of free, quality web applications. Instead of learning php, and spending a week programming your own message board, you can simply download one free of charge, with all the bells and whistles we’ve come to expect.

But things can get complicated (and frustrating) when you try and incorporate one of these web apps into your existing site’s design. Most forum, content management, and e-commerce software
come with layouts and HTML templates already. While it may be easy to change the colors and/or font’s to match your site, making the integration virtually seamless is another task altogether.

Use Plug-Ins

If you already use a content management system, like Textpattern or Wordpress (I know it’s technically a blogging platform) there are many plug-ins or mods available that can help you integrate these different apps painlessly. Otherwise you’ll have to get your hands dirty. Here’s some things I’ve learned about integrating web apps into a design:

Do Your Homework

There are a ton of different open-source solutions for just about any web app you can think of. Figure out what features you’ll need, and what type of software you’ll be comfortable with.

Most of the open-source, web app stuff I deal with uses PHP/MySQL. You may need something different. If you work exclusively with Windows products, for example, you’ll probably need something written in ASP.

Table-Based Layout vs CSS

Also, decide if you’ll need an app that produces good semantic HTML, and layouts in CSS, or not. Tables, for example, are still heavily used for layouts in forum software. Depending on what type of application your looking for, though, there should be at least a couple that produce clean, valid code.

Test Out The Software First

If you’re able to, test out the software first to see what the default layout looks like. There may be times when you’ll have to implement an app on a site that’s already up and running, but if you can do so, design your site with the app in mind.

A Square Peg (In A Round Hole)

If you do get stuck with the task of fitting a web app into your site’s existing design keep these tips in mind:

  • Why – Don’t just assume that you have to seamlessly integrate every single app. If your client is ok with his/her shopping cart looking a bit different than the rest of the site, then don’t bother.
  • Pricing – Allow yourself a good chunk of time, if you plan to seamlessly integrate a web app into a client’s site. It may take a lot longer (and cost the client a bit more) than you think to get everything line up right, and looking the same.
  • Be flexible – Some software is just gonna be tough to deal with. If you did your homework, hopefully you’ve picked out an easy to use solution. However, be aware that here might be some little features, or font-sizes, or something else, that you cannot change, without major alterations to the software itself. Be flexible. Look for creative solutions, rather than pixel-perfect headaches.

Links

Links to comparisons of various web apps:

Comparison of ecommerce solutions
Comparison of forum software: PHP
Comparison of forum software: ASP
Comparison of content management systems

OpenSourceCMS is a very useful site that lets you test all of the major CMS’ as well as other forum software.

My Favorite Apps:

Textpattern – An excellent, open-source CMS, that’s well-suited for bloggers, or extensible enough for complex sites. Easy to use, a bit of a learning curve, and clean/valid code.

PunBB – A very lightweight, and easy to integrate forum. Table-based layouts, but completely customizable.

No comments yet

Leave your comment


Textile Help



Metadata

Posted
Sunday, June 3, 2007

Category
HTML & CSS

Social Bookmarking
del.icio.us, Newsvine, StumbleUpon, digg

Recent Entries click to close

Most Popular Entries click to close

Categories click to close

Entries By Month click to close

Advertisements