Heathbits - Latest Blog Entries

Doodlekit Makes PCWorld!

Mon, 17 Dec 2007 09:07:00 -0600

Doodlekit was reviewed by PCWorld this morning, but with one caveat - it's the Danish PCWorld! Hey... we are not complaining! The very first few sentences (translated) read:

"The time's most beautiful, quickest and mostly advanced web page gets one with Doodlekit . Next month a new web service has maybe taken over the leading position, but just now Doodlekit is the enough strongest online web page programme."

Read the translated article yourself (scroll down a bit).

Doodlekit Gets TechCrunched

Sat, 01 Dec 2007 17:49:00 -0600

Yesterday TechCrunch did a write up on the Doodlekit Online Website Builder. The article compared it to some other online website builders and pointed out some of the more advanced features that Doodlekit has over its competitors.

The only thing that was a little disappointing about it was that you could tell from some of the comments that a few people thought Doodlekit was just another website building tool like every other service provider has. This is not true. Doodlekit has a lot more advanced CMS features than those static website creators do. Not to mention the ease of use compared to these tools.

But that’s OK. A lot of other people mentioned the fact that there was a need for businesses websites to have more advanced features beyond static page creation. Advanced tools for collecting data, organizing users, etc. that Doodlekit provides that these other companies don’t.

Then there was the web traffic. Wow! We have already more than doubled our traffic since a few weeks ago when we first released the latest version of Doodlekit. We have been pretty excited about that. But the last 30 hours since the posting of the TechCrunch write up has generated us over 6000 extra visitors and 600+ new Doodlekit websites!

The past few days have been pretty exciting for us and there is more to come! We have some interviews lined up for next week so we will see how those go. Watch out world… here comes Doodlekit!

Heathbits (Version 2) Complete

Tue, 27 Nov 2007 09:17:00 -0600

The last few weeks have been a whirlwind. I have been super busy. I have been dealing with the following:

Doodlekit’s fast growth
Working a large custom website contract
Working Google / Yahoo / Other advertising issues
Visiting friends and family for the holiday
Picking up some extra chores around the house for my wife (she’s 5 month’s pregnant – with twins)
Fixing up the house to sell (we need a bigger house for the twins)
Selling both our vehicles and getting new ones that accommodate two child safety seats
Jury Duty (they didn’t pick me thank God)
Oh yeah… and working on Heathbits’ new design.

Any guesses as to which one got the lowest priority?

Needless to say, I finally finished up Heathbits’ new design and pushed it to production today. I picked a unique color theme I liked and went from there. This took a long time to create. I designed, and redesigned, and redesigned again. Creativity comes with a price – time. Once the final design was complete, it only takes a few hours to convert into valid XHTML/CSS. The hard part is always coming up with a unique design.

Anyway, I hope you like it!

New Heathbits Design

Sun, 28 Oct 2007 14:17:00 -0500

With the new version of Doodlekit having been successfully released, I thought I would turn my attention back to Heathbits for a while. The new upgraded version of Doodlekit required that I make lots of changes to my original website design. Instead, I opted to use this as an excuse to make a new design for Heathbits!

For those of you who know me, this is probably not a big surprise. Knowing how much I love web design, the new Doodlekit release afforded too much of an opportunity for me to pass up.

The new design will be out in a few days. I just finished up the index page and am now working on the main layout. I will probably be including an extra section that shows my favorite website designs. I will be posting some rules on how to submit designs to me for review. Of course, as always, all designs will be required to be W3C compliant in XHTML/HTML and CSS.

Now that the hard work is over releasing Doodlekit – it’s time to have a little fun!

New And Improved Doodlekit Launches!

Wed, 17 Oct 2007 13:50:00 -0500

Ben and I are very excited to officially announce the biggest Doodlekit release to date. We've packed it full of new goodies and gave it the expected DK polish.

What does this mean?

Even if you have little or no web-building experience, or simply don't want to spend any time writing code, you can have a personal or commercial, fully-functional web site at your fingertips in no time.

Open an online business
Blog to your heart's desire
Sell products
Create a narrated photo album to share with friends or family

Here's what's new:

Advanced Content Editor

Upload just about any image or file
W3C compliant HTML so your site loads faster than ever
Style formating so you have an instant professional look and feel

Shopping Cart

Use your own Paypal account
Simple to create
Start selling immediately

Google Adsense Integration

Just enter you Google ID and start making money
Ads match your color theme

New Layout & Themes

More colors
More backgrounds
Change your entire look and feel with a click

Stock Photos and Image

A huge new library of photos and images

Plan Changes

The basic web site is FREE! Just give us a try
Personal site with all the bells and whistles
Commercial site with a fully functional, easy to use shopping cart

Check it out for Free. We know you'll have fun using it.

Header And Repeatable (Tile) Background Images wanted in Photoshop (psd) file format.

Sat, 01 Sep 2007 13:50:00 -0500

Overview

I am looking for some unique Header Images and Tile Background Images for our Doodlekit Online CMS/Website Builder Tool. I will pay $10 for each image. These should be simple pattern designs that are fairly easy to make (see examples). If we purchase 20+ images from you, I will post a small paragraph about you and a link back to a site of your choice on our Doodlekit "Partners" page (not yet created). The link will remain there for at least one year (longer if we continue to do business with you).

Requirements

Files must be in Photoshop (psd) file format.
Files must be compatible with Photoshop CS2
Each image must have 3 layers, each layer a solid color (making it easy to change that layer's color). The bottom layer should be a medium color, the second layer a light color, and the third (top) layer the darkest color. Just like in the example file.
Headers images will be static (770x150). Background images must be a repeatable (tile) design, and should be no larger than 400x400.
All graphics you use are royalty free and your design.
Designs should be generic, put unique. Something that lots of people/businesses might use on their website.
Must submit at least 5 images at a time. We pick and choose those we want.

Example Files

Example files can be downloaded here:

header_example.psd

tile_background_example.psd

Submitting Your Work

Email submissions to: graphics (at) doodlebit (dot) com.

Payment

Payment will be done via Papal or by check once we receive the files we chose.

Questions / Comments?

Please post your questions here.

Major New Release For Doodlekit Coming Soon

Tue, 07 Aug 2007 11:14:00 -0500

Anyone that’s been working with or following our Doodlekit Online Website Builder Tool has probably noticed that the waters have been pretty calm lately. Not much is going on – on the surface. Below the surface, however, we have been working around the clock on a major new release. We are very, very, very excited about it. There are going to be some major new features added to Doodlekit. We hope to release this newer version sometime around the end of September 2007. Below is a list of some of the more major upgrades that we will be implementing:

Doodlekit will be FREE!
Yep, we will be releasing a free version of Doodlekit for all to use, indefinitely. No more 30 day trials. The free version will have the following:
- Blog
- Photo Albums (up to a 100 photos max at any one time) with Slide Shows.
- The ability to add up to 5 extra pages/sub pages in addition to the photo album pages, blog, and contact form.
- Full access to all our layouts, color schemes, and background images.
- Access to Stock Photos for headers and content.
- Access to the CSS Override Editor for advanced users who know how to code CSS. Advanced users will be able to upload their own design images and write the code to design their own websites.
- Free websites will be sub-domains of www.doodlekit.com.
Doodlekit will have a Shopping Cart!
Doodlekit will offer an advanced plan that will allow you to create your own shopping cart via a PayPal account that you have created.
All Doodlekit websites will be W3C Strict XHTML & CSS compliant!
While most Doodlekit users won’t care much about this, web developers/designers will understand the significance of this and appreciate it (especially those who will use our CSS Override Editor).
Doodlekit will have a New & Improved Page Editor!
The new doodlekit page editor will be more reliable and easier to use than the older editor. It will allow you to create one, two, and three column layouts as well as add images directly to your web pages from you computer, Doodlekit Photo albums, or other websites.
Stock Photo/Image Repository.
We have added a searchable library of Stock images to use in your website headers and content. We will be starting with over 2000 images and adding more every day! You will be able to swap out images in your content & headers as often as you like.
Doodlekit will work with 94.1% of all browsers world wide.
Doodlekit websites will function properly with the following browsers: IE 6.0+, Firefox 1.5+, Opera 9+, and Safari 3.0+.

Let us know if you have any questions or comments. We look forward to hearing from you!

Another SitePoint CSS Design Contest Entry

Wed, 11 Apr 2007 16:25:00 -0500

What can I say? I love doing these contests – they are like puzzles. I created another design and entered it a few days ago.

Here is my entry #2.

This one was a little harder because I used the HTML tag to put in a background footer that stretched and with the browser size but always remained at the bottom of the page. I also developed this site to 1024x768 resolution. The contest winner will be announced shortly. I doubt I win anything, but it was fun trying!

The SitePoint CSS Design Contest

Sat, 10 Mar 2007 15:00:00 -0600

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!

New doodlebit website soon to come…

Mon, 26 Feb 2007 23:34:00 -0600

I started the morning off working on a customer invoice, responding back to a few client emails, and wrapping up Doodlebit’s tax return. I then proceeded to finish up all the new buttons, links, and footer changes I had started last week. Real exciting stuff. I am starting to figure out that running a web design/development company takes more than writing up a few lines of code and/or drawing up a few designs. I now spend a good 1/3 of my time doing administrative/sales/support work. I suppose that’s good, but I would really like to get into a position here soon where we can hire someone to do this kind of stuff for us full time.

Around noon I started working on the new Doodlebit website design. We plan on doing some marketing here soon promoting Doodlebit (not Doodlekit). We are going to focus directly on small businesses. These advertisements will be pointing to our Doodlebit website. Because of this, I thought it would be a good idea to update that site. I have most of the design done, but I am still ironing out a few design wrinkles. I hope to have it finalized by Wednesday, if not sooner. The design is the hard part. Once I have decided that, then slicing it up into HTML and CSS will be fairly easy. I’m really starting to get the hang of it now.

That being said, I will hopefully have the new website out by Friday. I will keep everyone posted!

Buttons, Links, and Footers

Fri, 23 Feb 2007 19:34:00 -0600

That’s what I worked on all day today… updating buttons, links, and footers. Ben updated the forum and blog software, taking the edits out of ’quick edit’ mode implementing them into the layouts. This means I have to update every single layout we have currently, coding in the new CSS and HTML changes.

The main issue I wrestled with here was the ‘display: -moz-inline-block’ bug associated with text-alignment. This is a common problem, because lots of people (like me) like to convert anchor tags from links into buttons, and have them all line up on one line. Incredible as it sounds, it was Microsoft IE that did things right (for once) and Firefox that was screwed up. With IE, you just simple do a ‘display: inline-block’ and you can center your text within the width and height you set for the anchor. Not in Firefox. It ignores the height and width. So you use their special Mozilla property to get it to work, but then it puts each link on a sperate line. UUUGGGGGHHH! I searched everywhere for a solution, and most them were horrid and ugly. So I cheated. I put the two links I wanted side by side inside a two cell table. I know… I know… your not supposed to use tables for layout. But hey… until EVERYONE in the browser world gets their crap together, I’m not gonna feel guilty about doing such work arounds.

I took this updating opportunity to also go ahead and implement some other changes we have been wanting to do to all layout, mainly updating the footer so you can update its CSS properties. Basically, this is an undoing of code that was implemented about 6 months ago. I hard coded all the CSS properties in-line to the HTML on the footer to keep people from hiding our logo at the bottom using the CSS override tool. This, of course, caused more problems than it fixed, mainly from the fact that we want to encourage re-sellers to use our product. This would prevent them from putting their own footer in… so we decided to yank out the in-line code and go back to the original design.

It has been tedious and down right boring making all these changes… and I’m only half way done. I will hopefully have them complete before Monday so I can start working on other stuff!

Paperwork, Contracts, and Lawyers

Thu, 22 Feb 2007 20:11:00 -0600

First thing I noticed this morning was an email from one of my clients. We have been working on a custom web application for them. Looks like my main contact there has left for Iraq. He got activated when we first started working on things and had to go to Camp Pendleton for a month. We communicated via email and phone gathering and hammering out requirements. Yesterday he finally got shipped off.

In his email he introduced me to another person from his company who will be taking over responsibilities for this application. I’m kind of worried because we were 95% done when he left. Now, with a new person, I know they are going to want to have a whole bunch of new stuff added.

Actually, that’s fine, as long as he understands that this will have to be a separate project, with a separate bill. I’m sure it won’t be a problem - I’m pretty used to dealing with this kind of stuff after developing software for over 12 years now.

Ben and I have spent a lot of extra time working with this client. We way under bid this project, but that’s OK. It was mostly because of the legal paperwork. Man… I had no idea how time consuming this stuff is. You have to fax/refax, sign/resign, negotiate/renegotiate contracts with your lawyers and your client back and forth four or five times before everything gets worked out. We had to purchase business liability insurance and jump through a few other hoops as well.

The beauty of it all is that now that the hard part is done, we are in! We are their only preferred vendor for all IT work, so from now on, when they need something, its just a PO that gets created and signed – that’s it! They have several more jobs for us, so this has been well worth it. Ben and I plan to work hard to keep them happy, and hopefully, we will remain their single source for all IT issues from now on.

Mixing things up…

Wed, 21 Feb 2007 20:18:00 -0600

I’m gonna try something new concerning my blogging. I just haven’t been keeping up with it as much as I would like. So officially, starting today, I’m going to TRY and do a daily entry about what it is I have accomplished for the day (Monday - Friday). It may not always be interesting, and I probably won’t want to do it sometimes, but I think it’s worth it. I am sure that other people will be able to learn from my mistakes and possibly offer up some good advice that I will gladly listen to. So this marks my first official entry…. I guess I’ll be talking to you soon!

Creating a Website Design Using an Image Editor.

Sat, 13 Jan 2007 13:08:00 -0600

Anyone can draw up a design in Photoshop. That doesn't make them a web designer. I have worked with artists and graphic designers that can create some pretty cool looking "layouts" but the problem is they can't be converted to a web design. You don't just paste an image into an HTML page and call it a website... it has to be cut-up and laid out with lots of thought and care. Knowing the rules, limitations, and constraints of web design will dramatically effect what you draw up in an image editor.

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!

I learned a new word today... ‘hand-coder'.

Sun, 07 Jan 2007 23:11:00 -0600

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:

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:

DKAdvanced.com!

What I mean is that dkadvanced is all about overwriting existing CSS from our Doodlekit^TM 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 Doodlekit^TM, we make breakfast from scratch!

The beginning

Mon, 02 Jan 2006 14:37:00 -0600

I love being a web designer/developer – but its not easy. No… there is way more to it than just drawing up some cool pics and posting them on a website. Being a true web designer/developer means learning all the tools of your trade – Photoshop, Illustrator, CSS, HTML, XHTML, JavaScript, Flash, etc. It means hand coding your websites. It means understanding W3C code compliancy. It means knowing how to work with your clients, your target audience and how to gather requirements.

I may never become an expert on all of these – but that won’t stop me from trying. This blog is a record of my journey as I pursue excellence in my career as a professional web designer/developer.