Blog
What is a Forum?
Many of you probably use forums everyday; but for those that are unfamiliar, a forum is a place to have online discussions between many people. Forums are sometimes called Bulletin Boards, and have a very specific setup. Usually you have a few different forums for different categories of topics. Within each forum you have a series of Threads or Topics. These Topics contain many Posts or Replies to the original Topic. The content is arranged by date, so you always see what’s new first. And that’s about it.
How can I use a Forum?
Normally when you think of a forum you might think of a large online community centered on a certain topic. Maybe it’s to talk about games, car stereos, or maybe just a place to talk to friends. However just like with Blogs, Forums can be an extremely useful tool for your business.
The most common way to use a forum for your website is for Customer Support. With a support forum, your customers, or potential customers can register on your website and ask you a question. You then answer their question in the forum for everyone to see. Now you have an avenue to keep an open line of communication with your customer.
Think about this; forums not only give your customers a way to ask questions online, they also provide a record of those questions. That record will always be on your website, so the next person with that question will already have the answer. Not only that, but search engines will pick up that content, which will draw more people to your website.
If you’re a small business owner, it’s likely that you are a master of your trade. A forum is a great place to share your knowledge not only with your customers, but also with the rest of the world. Beyond a Customer Support Forum, you can setup a General Questions Forum. This will give your website even more content that is great for search engine ratings.
Setting up a Forum
There are many great forum software packages out there, however they all require you to install software on a server and configure everything yourself. These packages are great for large community sites, however there is an easier way for a small business support forum. Doodlekit comes with forum software baked right in. All you have to do is give it a name, and you’re ready to go.
You can setup multiple forums, each with their own subject. One common mistake is to setup too many different forums. This will confuse the users, and they won’t know where to start. Its best to start out with the minimal number of forums, and create more as needed. For example you could have a “Customer Support Forum”, an “Ask the Pro Forum”, and a “Just for Fun Forum”. It’s common to have a Just for Fun, or Off Topic Forum to promote a friendly and constant dialog.
Keeping Track
When you setup a forum, it can be easy to just forget it's there. You never know when your customers are going to log in and ask a question, and you certainly don’t want to leave them waiting. Fortunately most forum software comes with an RSS Feed, which is basically a list of the latest posts in a format that can be read by many applications. By setting up this feed in the reader of your choice you can know right away when someone has posted a message on your forum.
Getting your customers to use your support forum can be extremely valuable to your business. When questions are asked, anyone from your staff can answer them at anytime from anywhere. You get content and search engine ratings for free, and you establish a good relationship with your customer. Considering how easy Doodlekit makes it to setup a forum in minutes, there’s really no reason not to.
I submitted an entry to the Sitepoint CSS Design Contest yesterday. They have a pre-made HTML page that you add your own CSS and graphics to. At first, I glanced at the HTML page and thought this would be an easy contest – there wasn’t a whole lot of HTML. Once I started working on it however, I realized it was going to be harder than I thought.
SitePoint had intentionally made the HTML a little – shall we say – difficult! They had imbedded img tags inside of h1 tags, div’s with the same class name imbedded within each other, very few tags to work with, etc.
Man! Trying to get everything to go where I wanted it and to line up evenly was an incredible challenge – but fun! I really enjoyed doing this design. One thing is for sure – this contest for hand-coder web developers only (which I am, of course!). It separates the boys (WYSIWYG designers) from the men (hand-coder designers). This is a great example of why you should hand code your sites. I encourage all web designers to participate – it was a good challenge.
Here is my contest entry.
I doubt I win, but that’s not the point. Each time you enter a contest like this, it exposes more of your work and builds up your portfolio. Not only that, but it might draw in a few potential clients if they like your design! Add into this the fact that you are getting hits to your website when people view your contest entry, thus increasing your Google page rank, and it’s hard to find an excuse not to enter the contest.
So have at it! I challenge all you hand-coders out there to enter! Its good practice and good marketing!
I have learned so much in the last year about web design. My skills have quadrupled regarding CSS, XHTML, HTML, Photoshop, etc. All because I finally quit my corporate job as Java web developer and became a full-time, self employed web designer. Doing what I love to do, and doing it 65+ hours a week, has been the best training and experience I could have ever asked for. No extra college courses, no books, and no job working for someone else could ever do that for me.
That being said, when I pushed out Doodlekit, just a few months ago, I was well below the design level I am now. Just in the past few months, I have learned so much more. That's when I started "itching" to change the design. So I did it. The timing wasn't the best, but I had to do it. If you're a web designer, you probably know what I am talking about. You always seem to want to redesign again - and again - and again.... The trick is knowing how to control that.
But when it came to our website, I couldn't hold back. If ever there was going to be a site that I wanted to be perfect, it was going to be ours! Of course, the reality is that it is far from perfect, but I think it's a vast improvement over our old site. I am sure, in time, I will want to change it again. But that won't be for a while (I swear!).
I wanted the site to better reflect the ‘doodle' aspect of Doodlekit. I love that word... doodle. It sounds so... fun! That was why we named our company Doodlebit. And when we came out with a website builder & CMS a few months later, it only seemed natural to call it Doodlekit. I have had some people suggest that the name is not very professional, but that doesn't bother me. Ever heard of ‘Google' or ‘Yahoo'? Those don't sound very professional to me at all! But they sound fun... and Doodlekit is fun!
Because of this I decided to use actual illustrations instead of photos. Doodling implies drawing or painting. I searched and searched for images until I finally found some I liked. They were not exactly what I wanted, so I had to make a lot of changes to them. I also paid special attention to the details. Every button, textbox, icon, etc. To me, this makes all the difference.
Because of this site, I am now determined to make all Doodlekit layouts just as nice. All details will be dealt with. Maybe I am a perfectionist, probably too much so, but I love what I do. I hope everyone likes the new changes to Doodlekit. Feel free to post any comments about the new design (good or bad). I do use feedback to make changes. So you won't offend me if you have suggestions!
I put an ad in at SitePoint a few days ago for ‘CSS Web Designers" to try out Doodlekit for free and to offer 3 of the best designers a free website. What did I get? I got a handful of people who only knew Dreamweaver or some other WYSIWYG editor apply... but none that actually understood or worked with HTML/XHTML and CSS.
Wow.
So I started looking around the web. Maybe I wasn't using the right terminology. Looks like I was correct. The appropriate word I should have posted was ‘hand-coder'. Hand-coders are those individuals that write their own HTML/XHTML and CSS (like me).
There has been a large controversy over whether or not those individuals who use Dreamweaver, Front Page, and other WYSIWYG tools should be considered web developers. Both sides have good points. Below are some links to discussions/articles about this very subject:
- http://wisdump.com/web-programming/handcoding/
- http://www.456bereastreet.com/archive/200509/hand_coding/
- http://www.sitepoint.com/forums/showthread.php?threadid=421250
To me most if it falls into this type of analogy about breakfast at a restaurant:
- You can have breakfast served to you in 5 minutes created from frozen pre-made items that have been heated up in a microwave and served with a cup of generic coffee. Most of the time it's OK... but sometimes your hash brown or egg biscuit is still frozen in the middle or over cooked.
- You can have breakfast made from scratch, where the cook knows every ingredient and can change those ingredients for each individual plate - served exactly the way you like it - but it takes a little longer and costs a little more.
Which is better? Of course, that depends. If your in a hurry and need something done within a certain timeframe, on a tight budget, and are willing to take chances on quality - choice #1 would be best. If you are into quality and are more of a perfectionist - choice #2.
I will say this however - no WYSIWYG will ever be comparable to a hand-coder (unless it's a bad hand-coder!). There are just too many situations where you have to pop the hood to find out why something isn't working the way it is supposed to be. And even if you know a lot about HTML/XHTML and CSS, when you use a WYSIWYG, you get stuck with a generic "framework" that might not have been the best choice. You can throw some salt and pepper and maybe even some ketchup on that egg McMuffin, but its still just an egg McMuffin.
The best example that I can think of for becoming a hand-coder vs. a WYSIWYG user is this:
What I mean is that dkadvanced is all about overwriting existing CSS from our DoodlekitTM website builder to customize your layouts. You cannot do that with any WYSIWYG. And it's not just this site... there are lots of web products that allow you to customize your look and feel by overwriting and creating your own custom CSS. Not to mention the complexity of intertwining backend code into your front end code. If you don't know CSS and HTML that well... that can be disastrous.
In conclusion, I would like to say that using a WYSIWYG editor or ‘hand-coding' depends upon the individual/company. There are lots of McDonald's restaurants out there and lots of people who like McDonalds. But there are plenty of people who like an omelet made with cheese, peppers, mushrooms, bacon, and some Tabasco - cooked a little runny, with some homemade jelly and toast on the side!
Here at DoodlekitTM, we make breakfast from scratch!
Before you draw anything, you will need to figure out some things first:
1) What resolution do you want to develop to?
2) What layout do you want to use?
3) Will your content be static, dynamic, or mixture of both?
The first thing to figure out is what desktop resolution you are going to develop to. Based on information from http://browsersize.com/, all web user desktops worldwide can be broken up into these percentages:
1024 x 768 - 56%
800 x 600 - 22%
1280 x 1024 - 13%
1152 x 864 - 3%
other - 6%
When actually drawing a website design up in an image editor, don't forget to subtract 30px from the width for your layouts. This is to accommodate the scrollbar that will appear to the right when content exceeds the screen height. Example: for a resolution of 800x600, your design should be 770px in width.
The main number you want to look at here is the width (the first number). Scrolling down is fairly well accepted as normal behavior for a website by all users. So the height is not as important as the width. Scrolling across is a different story. You will never want your design to have horizontal scrollbars at the bottom of the page. You will need to pay special attention to the width of your design when developing. If someone's desktop resolution is smaller than the resolution you designed to, they will have scrollbars at the bottom of their page and this will be deemed to be an unpleasant "viewing experience" for that user. The lower the resolution of your design, the more people that can be included in those that will have a nicer "viewing experience".
Before you just jump to the highest used resolutions (1024 x 768), consider your market. Who are you developing your website for? If your website is a forum about Java Web Development or CSS Web Design, then it's probably safe to figure that most of your users will be tech savvy. That means they will probably have nicer/newer computers, which means that you could probably develop to 1024 x 768 without worrying about to many people having a bad "viewing experience". On the other hand, if you are developing a website for a non-profit organization that provides free food and clothing to families with low incomes, you probably want to stick to 800x600. Your target audience probably can't afford the latest computers and may more than likely have older computers that were given away to them or purchased at a very cheap price. Another example is older people with bad eyesight - if your website draws in lots of senior citizens, they will probably want to see things at a lower resolution to make text and images larger.
You might also want to consider whether or not you want to ignore a quarter your market's "viewing experience". If your website is for a company that markets to the general public, I doubt their marketing department will like this. They will more than likely want something that looks appealing to everyone. This can be done easily by designing to 800x600 desktops. In fact, sometimes it's nice to have a background for your design. For those people who use higher resolutions, you can create more of an esthetically pleasing look to your design by having a background.
The second thing to figure out is what layout you want to use. A layout is how headers, footers, content, sidebars, etc. are placed on your page. Not every page has to have the same layout. For instance, you may want a unique layout just for your index (entry) page. That's fine, as long as most of the other pages on your site are consistent in their layout.
There are all sorts of layouts you can go with. There are those with menus on the side, menus on the top, some with sidebars and side boxes, and some without. There are those whose width stretch to fill your screen (liquid) and those whose width is a set size (static). Lots of possibilities here. A good place to look at some example layout can be found at the Layout Gala: http://blog.html.it/layoutgala/. This site provides the code for some of the most popular base layouts used in web design. All these layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. A great starting point for your web design. Again, keep in mind the two types of basic layouts: static and liquid. If you use a liquid layout, you will still need to determine the minimal width. It should be equal to the width of the resolution you have decided to design to. Your content should "float" appropriately as the browser is resized - either to the left, right, or center until they overflow, at which point they should float downward, pushing all your content down. Once you have reached your minimal width you have designed your site for, you are no longer accountable for your users "viewing experience". The content can overlap and run into each other... this now acceptable. You can try and force it to be static once it has reached its minimal width, at which point it will show horizontal scrollbars. This is sometimes deemed to be more pleasant than letting your content overlap itself. This is up to you.
Finally, you need to consider your content. Is it going to be fairly static? Will the content be updated by users frequently? Is there dynamic data that is used for content that comes from a database? Does the site use a content manager? The important thing here is to design to your content. In general, you should avoid designing static height pages... they should stretch appropriately to accommodate the data that is present on the page. This is one of the mistakes I see a lot of from graphic designers that don't know anything about the web. They code a watermark background that looks cool for a page of an exact height of, say, 600px because that was how big the page was with its content. But then a month later someone goes in adds some more content -now the website has an 800px height, and there is 200px at the bottom of the page that doesn't have a watermark and is even a completely different color/look than what was used for the first 600px. As a web designer you have to be aware of when to use "repeatable background images" or colors for backgrounds with dynamic data. Sometimes you can use static images or horizontal repeating images at the top or bottom, as long as they gracefully blend into the main background eventually.
This is also important for menus. Using a static image, like a tab, is fine as long as you are willing to go into an image editor and create a new tab every time you need to. However, you might consider using repeatable images/solid colors with text that automatically stretches when content is added. To do this is more complicated, but will save you time in the future. Plus, if you're using a content management system, this will be mandatory. You will have no idea how long someone might make their menu link, so you will need to be prepared for links that wrap and/or stretch dynamically. Again, solid colors or repeatable background can be used here. The Doodlekit Website Builder tool is an example of when you would want to consider this. Advanced web designers that use this tool will need to consider these rules when developing. Some of the more complicated designs used by Doodlekit have repeatable images/colors in the middle, and static images at the top and bottom, or on the left and right sides that blend into the middle.
Once you have figured out the resolution you want to design to, picked your layout, and determined how dynamic your content is, you are ready to finally start drawing! Keeping these in mind will determine how and what you design. When it comes time to convert it to an actual website, your web designer/developer will thank you!

