Web Design For Idiots is getting a complete make over. I put together this blog as a test. It was a way for me to get used to wordpress and share that experience with my readers as well as my clients. Wordpress has grown from a blogging platform to a full service content management system, and as a web designer, I need to know the ins and outs.

So this little blog has grown and gained readers on a level that I did not expect, and this blog is a reflection of me, and the work that I can do. The unfortunate thing is that the design of this blog is NOT a reflection of me and what I can do. Its just a quickly thrown together design that I did in the matter of a few days – half days at that.

So I am here to announce that Web Design For Idiots will be under development for a while while I come up with a better design. One that reflects my own personal design skills and trends. The website will still be opened, however. So you are welcome to stop by, comment, and use the tutorials as you see fit. If you come by and something seems broken, please email me and let me know, but chances are, you stopped by while I was in the middle of working on things.

So I am taking suggestions and hoping that you folks can help me build a prettier blog. Also, have you recently redesigned your blog? Have a before and after? or did you write a post about the redesign? I would LOVE to see it.

I just got an email announcing Adobe’s new “hosted services” At first I was thinking, “Lovely, Adobe is hopping on the hosting bandwagon. What’s next, Adobe ready made websites reminiscent of GoDaddy’s Website Tonight feature?” But alas, I was wrong..

This is not hosting for your websites, but instead it is web hosted features for you to add to your design arsenal along with your local Adobe Products. There are two new feature/services that work seamlessly with Dreamweaver to allow you to offer your web design clients complete control over their content, and give you, the developer, a tool that can save you hours of time testing your websites in different browsers.

Adobe Incontext Editing (click on Online Services) is probably one of the most revolutional things to come out of Adobe in ages. We all know that Adobe is great at what they do, but they have been doing the same thing for so long that we kind of forget that Adobe is still there, trying to continue to revolutionize the way we, as developers, view the web.

InContext Editing is Adobe’s response to the boom of CMS users. Web designers are heeling to the needs of their client’s control issues, and most are utilizing basic CMS (Content Management Systems) to build a creative and unique website while still allowing the client the ability to easily add content and change the basic appearance. My assumption is that with this boom of CMS, less people are using Dreamweaver and more are using freeware text editors.

Dreamweaver is an amazing tool for starting a website from scratch, but if you do not know a little bit of coding and a lot about standards, if you just let Dreamweaver code your website for you in WYSIWYG mode, you will end up with a tangled knot of code and content. Dreamweaver does what is function, but not what is “right” and most of the times, it’s great of getting started, but then you have to head in and clean up what they did. Thus the turn to CMS (like wordpress). CMS already have a coding base, there is already a main structure which you can build upon and change, and the massive amounts of free templates out there, if a web designer wants to create a quick basic website, all they need is a skeleton template and they are more than halfway there! But enough about CMS, I am not here to tell you all about what a CMS can do for you.

I am here to talk about Adobe’s respone to the CMS craze. InContext Editor allows web designers to design a website from scratch using Dreamweaver, but it also allows the client to edit their websites from their own browsers similar to that of Wordpress. The developer can design a website and give it editable “Hot Spots” These “hot spot” will work similar to that of the FCK editor that we are all familiar with, or TinyMCE. When a developer is done designing their website, they create the editable regions and then add the website to thier InContext account. Now, it is important for me to mention that although the preview is free, there will likely be a monthly charge of $10-$20 to use this service. I am not entirely sure how I feel about this, I would rather pay a one time fee and get some sort of “plugin” for Dreamweaver, but that is where they are not.

InContext will allow the web developer to invite users and grant them access to different web pages and sites. You, as a developer, can control the permissions of each user in order to limit the type of editing each person can do. Users can upload pictures using the build in “behind the scenes” FTP connection that you would have set up when you added your site. They can also change fonts and other styles that you define when coding the website. You can strictly limit the extent of which the CSS style sheets can be edited, or you can leave them completely open for the user to do what they will with it.

InContext’s user interface is extremely easy to use, and very “newbie friendly” There is very little training, if any, that will need to be done in order to show your “users” how to use this feature. Its very self explanatory, which I believe it needed to be in order to compete with the likes of Wordpress and Blogger.

The other new feature that was announced in the email was the “Browser Lab” Now, I was a lot more excited about this before I found out that you had to pay for this service, but none the less, it is really cool. Browser Lab is what is sounds like. It’s quick and easy UI makes for a smooth experience, unlike the browser checker over at browsershots.org. I have used Browser Shots since I started web designing, and I honestly do not think that I will ever pay for this feature, but I am sure that accessability and smoothness will appeal to some and it could be worth spending the money to have access to this at all time. The onion skinning of the various shots along with the ability to organize the shots side by side or full screen view make this feature a little bit more appealing than the free Browser Shots.

I am going to continue to play with these features since I now have a free trial account, and i will definitely report back with any findings and my overall experience.

Have you used any of Adobe’s Online Products? What do you think of them? Anything you could do with out or couldn’t live without? I want to know!

If you are into design, then you absolutely know the importance of text and typefaces in design. If you are into web design, you know the important of plain text in web pages for search engine’s to index. The dilemma – you can only use fonts that are available on everyone’s computers (system fonts) when you design a web site or you have to use a graphic of the text with the font of your choice. Obviously you generally have to make a sacrifice somewhere  – give up the font or give up the indexable text.

Now, one of the things that people will say is to use “alt” tags in your images, this puts indexable text into your image. This works for search engines, but from what we know about how google specifically indexes a website, there is a different “weight” put on the different elements in your website. For instance, lines of text with a head tag (<h1> or <h2>) will be considered important text on the web pages. “Alt” text is not as high up there in the ranks, so although alt tags can be useful, they arent ideal to replace text.

So that still leaves the web designer in a place where they have to compromise one for the other. SEO or DESIGN?

Well, not any more!!!!

There have been huge movements in the direction of making many fonts available for use on the internet, and this is a wonderful thing. About a month ago I discovered and wrote about Cufon (you can read it here). It was a new technology that I had not really wrapped my head around, but seemed like it was going to be an amazing tool. This tool, however is very complex and seems to take a lot of knowledge and has a pretty big learning curve. I have yet to delve into this program, and as soon as I do, I will post here about it. I would love to know, if you have used it, how you like it.

But now there is an even newer movement towards fonts on the world wide web. Typekit is a web application that will likely be subscription based, that will basically open up a world of fonts that you can use on your web pages. This is extremely exciting to us web designers because now there is absolutely no need to compromise, you can have your text and eat it too!

The movement towards web wide fonts is not just flowing through typekit – it has been something web designers and developers have been pushing for. W3C has been working on a movement towards a standard for using fonts in websites, unfortunately like with all large changes in web coding, this will be very sketchy at first and unlikely to be a great option until all browsers are confirmed to be compatible with this new coding. The use of @fontface is available but again, sketchy at best and unlikely to yield as good results as typekit will. This new CSS3 rule also has the type foundries up in arms about the possibility that their fonts will be available on the web with clearly written file paths to each font used on the page. Much like when you view the source code of a website and you can see the file path to the external javascript and css files, you will be able to see the location of the font files. Clearly you can see why this is not ideal for those who create and sell their fonts and the foundries have taken steps to prevent this by stating in their user lisences that the font is not to be used on the web (which means even though you can you shouldn’t)

So back to TypeKit.

TypeKit plans on creating a subscription based product where TypeKit will own some type of resellers license for a preset list of fonts that will be within their font library. When you sign up, you will pay a yearly fee and have access to various numbers of fonts. They are unsure of how the pricing structure will work still, but in my mind, the best option would be to set price break levels. So people can sign up to have 5 standard fonts, 5 premium fonts, 10 standard, 10 premium fonts and so on. Where the standard and premium are defined by their price level at the basic licensing value. This is just what i think would be best, this is not specifically what they are going to do.

One of the best things about TypeKit is, it is going to make this usable for everyone. Adding a font to your website will end up being as simple as copying and pasting code from their website into your website, or as complex as coding your own calls to the TypeKit servers. TypeKit will encrypt the fonts and pass it through a tool that will decode the fonts and display them on the web. They hope that this will help to entice the type foundries to offer web licensing specifically through their company because of the added layer of security that you would not typically have with a font hosted on your own server using the @fontface code.

I hope that whomever it is that comes up with the end all be all of fonts on the web script, it happens soon. It is my biggest hurdle to jump when trying to design for the web, and having most of these fonts available on the web would be an amazingly awesome step in the right direction.

KEEP GOING ON TYPEKIT!

So here is probably the single hardest step in designing a really eye catching and memorable website. Conceptualizing it. Before you start coding, you have to have an idea of what you want your website to look like, where you want the navigation to be, and the overall layout. The average designer working on a basic website will consider this an easy step. There are rules that you can follow to make a website that is very easy to use for the visitor. There is something called F shaped viewing. There was a study done that tracks where viewers immediately look at a website, and how they scan it. The majority of people in this study viewed a website in the same way. Have a look at this image to get a real idea of what an F shaped viewing looks like:

As you can see, no matter the layout of the website, people generally view the top left, center, and right first. On e-commerce sites, the shopping cart is generally in the top right, and page links are across the top, and the categories are on the left side. This is very standard and people are used to it.

This is great knowledge to arm yourself with, however you can not let this stifle you in creativity. Giving yourself guidlines for a good user experience is not a good excuse to have a bland website. I have seen amazingly wonderful websites that have the exact layout that I mentioned, and I have seen horrible websites with that same layout. If you take oscommerce for example, the layout of the stock install is exactly what it should be. (you can see it here). However, here you can see another website using oscommerce and the basic layout but this site has a much better impact using design, graphics, and images. (you can see it here or here).

So, now that you have looked at some examples of what good design can do to a rather bland layout, you will have to figure out how you will make your website stand out. It is all going to be different based on what you are selling, offering, and writing about. That clean look of the ono tea website might not work for you, or that very grunge look of the assault t-shirt line could be over doing it as well. This is where the designers work comes in. You have to feel out what you want the website’s design to portray and start working.

For instance, I am working on designing my graphic design company’s website. The conceptualization part was the hardest for me. My husband and I sat down and tried to figure out what we wanted to portray. With a graphics company, you can go one of two ways, really simplistic with putting a lot of emphasis on typography and the work in your portfolio, or graphic heavy with a lot of emphasis on the website’s design as a part of my portfolio.

We sat and came up with a bunch of concepts which range from simple to color heavy, and finally settled on a concept. We are combining photography with illustration in a nice clean looking design that still has a lot of graphical content. We are working on designing a horizontal layout where instead of scrolling top to bottom, you scroll left to right. Using a jquery plugin to create an animated scrolling experience ads a little more uniqueness to the design and overall layout. With a portfolio website, you can really take a lot of liberties, mainly because you are showing off your “chops”. You are not really concerned with making sure that the person finds the product that they are looking for, and you have a lot less pages to deal with. However, even with the liberties taken with a portfolio website, I will still be working with the same basic layout of navigation at the top, content in the center, and some lists on the left side to work as internal page links, similar to categories.

The moral of the story is, stick with what people know, and people will have a happier user experience, but do not let it stifle your creativity. Push the envelope a little.

Here are some sites that I feel have done an exceptional job and creating an easy to use website, with a very unique design that is unforgetable.

Sequence Branding

B.N. Weiss

We Bleed Design

So, building a website takes a lot of technical knowledge and skill. When you talk about coding with someone who’s technical experience goes as far as attaching an image to an email, they look at you like you are a super genious when it comes to websites – whether you are or not. The thing is though, that when people are surfing the web and looking at websites, they hardly ever think about all of the coding and customization work that went on in the back end. They are looking and the design of the website.. So really, someone could argue that an eye catching design is more important than customized code and fancy little gadgets that serve no real purpose to the usability to the website.

All too often I seen websites that have a thousand little cheeky gadgets on them that serve no purpose, and it really shows the lack of skill on the designer. One item that I see everywhere is the “carousel” Its ugly and hardly ever works right. You can see an example here (link). As you can see, it can be “cool” but not every website should have it and it really needs some good quality images in there.

So yea, that brings me back to DESIGN! Designing a website starts with a concept, and that is where I am now with one of my projects. I am designing my web/graphic design’s company website and I would like to take you through the process, step by step.. Right now, there is not much to talk about aside from ideas..

This is how all websites should start!

With a pen and paper and some brainstorming. So many people skip this step, but it is the single most important step in creating a successful website. Most people grab a template, add their logo and change a few things and they consider themselves done. This approach is ok if you need a quick website and you don’t care about being unique. For instance, if you are selling electronics, you do not need to be unique, you just need to have a professional look that is easy to navigate. The goal of a website like that should be to exude professionalism because we all know there are loads of electronics scams out there.

However, if you are selling a unique product, or are offering a unique service, then you absolutely should create a unique and memorable design. For instance, all too often I see people who are selling crafts online. These people, decide to design their own website, but they skip the creativity that they put into their crafts and just try to get it done… WHY? How come people feel that ANY web presence is ok.. Thats not true! If you really do value your business, you should showcase your business online with the professionalism that you would within your store. You wouldn’t have a store with monopoly money, a few milk crates and a piece of plywood for a table, why would you build your web store with the same concept? Whatevers free and get the cheapest possible if you HAVE to pay for something. Kind of not smart.

The thing with the digital age is, people will look you up online whether they plan on walking into your storefront or purchase online. If someone decides that they want to go to the local “widget store” but they do not know where it is, what do they do? They go online and do a search for “Widgets in my town” and up pops a handful of sites. From there they will click on the links to check you out. Now, if you have a nice looking website, even if you arent selling anything from there, it is more likely that someone will swing by your store first if it is within a few miles of the others. The same goes for people buying online. If they search for “widgets” to purchase online, they take out the location, you are now competing with the biggest of big companies. So the big box widget maker is going to pop up first, they always do. Now, if you want an online presence that will also make you some money, you will HAVE to compete with the big box widget store.

How do you compete with the big box guys online?

Well, there are two main things that people are looking for online. There are a few bullet points that people would be willing to sacrifice to get the other. The first is price. People now are always looking for the best price online, but this brings us into the second thing people look for. Professionalism. If your website looks like it was slung together by a highschooler in their bedroom, the user might sacrifice a lower price for the security of knowing that they are working with a good company that takes themselves seriously and will take care of them.

So how do you show that you are as trustworthy as the big guys?

Well, there are a few things, but MOST of them have to do with the design of your website. You want to have a website that shows professionalism. A template can do that for you, but a unique design is ideal. Why do people equate design with professionalism? Well, because they figure companies who have a nice looking website took the time to research their design and pay a designer to build it. That then turns into the customer feeling the seller takes their business seriously and will provide what they need to. People just do not feel comfortable putting their credit info into a website that looks like it might not be a legitimate company. The other way to show your customers that you are legitimate is to post a customer service phone number, an address, and other information about your actual facility – even if it is out of your house (you can talk about the warehouse your good come from). Adding things like SSL and a Better Business Bureau seal of approval. No matter what you have added, your desing will be the first thing people look for, and studies show that people make up their mind about buying on a website within the first 30 seconds of viewing. In 30 seconds people are not going to look for contact info or read your content about how great you are.. they are going to look at your website as a whole.. the design.

So i was just looking at some of the best graphic design company’s websites for inspiration. I am designing our graphic/web design portfolio and I am having a hard time coming up with a concept that I am happy with. One thing that I know is that I would like a lot of it to be based around typefaces and text. I would like our images and graphics to speak for themselves, and have the text just be there to support it.

But if you have ever worked with fonts and web design, you know that you do not have a lot of options. You basically have the font families and standard fonts. If you use a unique font, you have to hope that your target audience has that same font installed on their computers otherwise they will not see it. If you do not understand what I am talking about, think about it this way:

When you read this website, you notice that there is one main font for the content of the website, in bold and italics, but it is still the same font. You will also notice that anywhere you see a font that is “unique” that it is actually not text, but an image. This is basically what most designers do when they want some type of fun header or a graphical style font for a project. Using an image is fine if you just need it for a header, but it is not ideal. The first reason it is not the best option is because the text in images is not indexable (is that a word?) by search engines. Headers generally have important key words about the following text, so this can be detrimental to your search engine optimization. Now, you can use “alt” tags in the images, and if you do not know what I am talking about you can read about those here:(link). But “alt” tags are not held as high in search engines as actual headers.

So what do you do?

Before I found this, NOT MUCH! I had looked into Cascading Font Sheets, which would basically tell the browser a list of fonts to look for.. So if you were to browse to my website and I wanted Myriad Pro to be my font of choice for all of my content, I would first use Myriad as the font. The browser would look for that font, and if it did not find it, it would look for the second option, then the third, and so on. You can basically give as many options as you want, but again – this is not ideal. I mean, fonts are important. They tell a LOT about your content, your design, and your business. You choose a font for many reason, but to choose a first, second and third choice, you are just setting youself up for a lot of headache. You basically design for your first choice and hope that all the others look as good or close.. And if you are looking at using a REALLY unique font, well, then you are SOL because the chances of someone having it are slim to none.. and your second choices will not look anything like your first choice.

So now.. lets talk about this CUFON. I wish I knew more about it, but from what I can tell, it really is an amazing tool! You can go here to read about it:
CUFON USAGE

From what I understand, you upload your font of choice to their generator. This generator takes the information in the font file and turns it into a javascript file. It basically tells the letters how to behave, creating a new font. It then gives you a new javascript file that was created from your font file. You call this in the head of your document as if you would any javascript file. Then, in the head of the document, you tell the document where you use this font. So you can use it only in the headers by telling it to use it in &lt;h1&gt; or only in the paragraphs using &lt;p&gt; So this way, as you design your website, whenever you use the &lt;h1&gt; or &lt;p&gt; tag, you will see your newly created font!

The install and usage seems VERY VERY easy. I mean, this seems almost too good to be true.

I do not have much more to tell you about this, as I have no yet used it. I was so excited when I found it that I just had to run here and write about it. If you have ever used this, or have this working on your website, I would love to see it. Please post a comment with a link, or tell me your thoughts on fonts in websites.

I will post back when I get my design website up and running AND working with my favorite font!

So you just spent hours working on adding some plugin or addon to your website, and you save, and then go to see your handwork and your heart sinks – or maybe you feel like you are going to throw up, or throw your computer.. Well, don’t worry. Or at least, don’t start worrying until you have checked out a few things.

Generally, when you end up with a blank page, it is simply because in your host’s control panel, the function of error reporting is turned off. There is a good reason to have error reporting turned off, but it definitely should not be turned off if you are working on something. To turn on error reporting yourself, you will have to add this code to your .htaccess code
php_flag display_errors on
php_value error_reporting 6143

Error reporting is simply the ability for a browser to display errors in your website. This is invaluable as a code breaker like myself, because errors tell you a lot about what you did wrong. For instance, if you get the following error:

Fatal Error: can not redeclare …………………………….. previously declared on …..

This means that whatever function that is explained here has already been declared. Declared kind of means DEFINED, and a function is just that, a function. So if your website has a function that shows the categories box in your oscommerce store, and you copy and paste the code for that into the header so that you can have categories in your header too, you will have the same function delcared twice, hence this error. The lovely thing, it tells you where the error is, and where it was declared previously. From there, you can delete one of the two, or rename the function by putting a 2 at the end; like this: functionname2 and then go to where the function is being called from, and rename that one function2 as well.

Parse error: parse error, unexpected T_STRING in ………. on line ….

This is an error that is not as easy to define. A parse error means that there is likely something wrong in your syntax. That can mean anything from a missing curly bracket, semicolor, or quotation mark. As a newbie coder, you might need help. You can try and help yourself by looking for code within your own website that is similar to the one that you were working on, and compare it. For instance, when I first started, I was trying to add a new link in my header, but I wanted to use the proper php syntax using (tep_href_link) but it is a lot more complicated that linking using HTML. So what I did was find a place where I knew there was a good example of a link (in the header where the banner is) and copied it and pasted it where I wanted. Then I just changed the text and/or the name of the image.
**you should note that the line number stated in the error is not always where the error or missing piece of code actually is. generally if the error is not on that line, it means that you missed a curly bracket somewhere within that code.

Warning: Cannot add header information – headers already sent by (output started at /…………….:9) in….

This is the absolutely most simple error to fix – usually. It is generally caused by a white space at the beginning or the end of your code. HTTP headers must be sent before any output from your code, which means that a header function must be placed before any html or even a white space. So generally, you fix this by looking for an empty space before the first  &lt;?php tag or after the last ?&gt;. You do this by putting the cursor at the tag, and deleting any white space before/after it. There should not be one single space or line before the first and after the last.

Warning: main(/index.php): failed to open stream: No such file or directory in…

This error simple means that the file mentioned does not exist in the directory that it is calling it from. It will tell you where in the code the file name is being called from, and where it should be. This is a pretty self explanatory fix. You need to either check and see if the file is there, or if the file name was typed incorrectly.

Other common errors that you see especially in oscommerce stores are from the database. The php code generally is trying to get information from a table inside of you database, but if those tables do not exist you will get errors like these:

1064 – You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near ‘ products_id from orders_products where orders_id = ‘70” at li

select orders_products_id, products_id, products_name, products_model, products_price, products_tax, products_quantity, final_price from, products_id from orders_products where orders_id = ‘70′

[TEP STOP]

This means that the code in your files that literally look exactly the same as this one is wrong. Each addon or installation will have different values listed for the tables. The second paragraph tells you all of the database tables that the code is trying to access. If you want to try and troubleshoot this error for yourself, you can log in to phpmyadmin on your host’s control panel, and click on your database. Then you will look for the tables with those names. They are organized very nicely and if you are familiar at all with excel and spreadsheets, you should be able to figure this out. If the tables exist, there might be some other error. If those tables do not exist, then that is your problem and you likely missed a step somewhere. It also could be the syntax in which you are trying to call for the database that is throwing this error, so it could likely be more complicated.

There is also the error that tells you that the tables do not exist, and these look like this:

1146 – Table ‘db_dbname.orders_status_history_transactions’ doesn’t exist

INSERT INTO orders_status_history_transactions ( `orders_status_history_id`, `transaction_id`, `transaction_type`, `payment_type`, `payment_status`, `transaction_amount`, `module_code`, `transaction_avs`, `transaction_cvv2`, `transaction_msgs` ) VALUES ( 328, ‘1JV740438A749591H’, ‘CHARGE’, ‘INSTANT’, ‘COMPLETED’, 36.87, ‘paypal_wpp’, ‘Yes Address and five-digit ZIP’, ‘Match CVV2′, ” )

[TEP STOP]

This is similar to the last one I mentioned in that it is tell your specifically that those tables do not exist, and you missed a step somewhere. Likely, if you were installing an oscommerce addon, you did not input the mysql “code” or you did not import the file to have the code run. If you do not know how to do that, keep and eye out. I will write a quick tutorial on how to do this.

So the moral of the story is… read. If you simply take your time and read your code, instead of instantly copying it and pasting it into a help forum screaming PLZ HELP!!!! you will teach yourself more about the inner workings of your website, and you will learn how to fix your own errors! Breaking the code is how I learned about this stuff, so dont worry if you break it – just always keep a backup!

***also remember to remove error reporting when your store is live. If you keep it on and an error shows, it can give a possible hacker some deadly information like the name and location of various information in your database. ***

Forget about searching through all of those thousands of addons over at addons.oscommerce.com. Just get this book. When I first started designing my first e-commerce store, I went to Borders and sat on the floor in the web developement section, and read through books upon books about php coding, basic mysql, and even Dreamweaver books. Then I realized that all I needed at the moment was to learn OSCommerce. Yes, if you really want to learn how to completely customize Oscommerce, you should learn php and mysql. But for people who just want to adjust their websites to make them look the way they want, and function the way they want.. then, just learn oscommerce inside and out.

While sitting there, and browsing Border’s online books, I found these two books and ordered them right away.

The first is by Monika Mathe. Its a great book written as a recipe book, and its about as easy to follow as a recipe. It gives you step by step instructions on how it impliment the most nessecary changes to you Oscommerce shop. So instead of going in and out of the addons.oscommerce.com web page, and hoping that you chose the right version without any bugs, refer to this book first.

The second book that I purchased was by David Mercer called OSCommerce: Beginners Edition. This is a great book to start out with. It will teach how things work, and why. Its the best option for those who look at their website, and go “WHAT IN THE HELL??” I’m sure thats most of you reading

This book will walk you through installation and basic customization.. But if you need more. If you want something a little bit more indepth, there is a second book called Oscommerce:Professional Edition

The professional edition with just go deeper into customizations and the inner workings. I ended up skipping the “beginners guide” because I had already spent weeks playing with oscommerce. I wish that I had found these books sooner, simply because those weeks could have simply been days. But you live and learn, and this is what I am showing you!

I hope that these help you all out. I know that most people who end up here want to just get an e-commerce store up and running, and want to do it now. Unfortunately, there is a reason why web developers charge a pretty penny for designing websites. Its because it takes a lot of skill and knowledge, and that does not come cheap. If you can give yourself 3 months to get your website up and running, you can have a really nice looking site that works.. Just use as many resources as you can, and start with these books. I promise you that you will get your money’s worth out of them.

In the past I have had a blog with colours I loved but they weren’t the greatest (or kindest) choices for readers of my site. Even the people who really did like me found it hard on the eyes to look at my site, let alone read it. Try looking at your site from a short distance away, in a darkened room and you will get some idea of how much eye strain is a factor in the design.

This doesn’t mean you can never use bright, bold or dark colours in your websites. You can use them in creating a splash page. A splash page can give your site a grand entrance, a dazzling front door.

But, not everyone likes this plan. Splash pages used to be infamous for being full of long loading animations and scripts. They often had nothing useful to add to the site. Waiting for them to load was annoying. So, if you do decide to go with it, make sure you have three things:

• no scripts or images so it can load right away (no delay),
• very simple to use and easy to find navigation
• enough information about your site to lure people to click through to it.

I think the best way to do it is just using a background colour, no images. Pick your colour: deep red, full black, sunshine yellow and add a table of contents to your site. List all the important categories if you have a blog. This gives you a functional splash page (your grand entrance using the colour you love) and readers can go directly to whatever part of your site they like, so it’s not useless. It has function and because no one has to spend time reading there you can make the colour as eye popping or dramatic as you like.

Make sure the navigation and index  links are clear and don’t disappear into your background. Always check the links you have in this index to keep it current and useful. If any single page moves make sure you reflect changes to your splash page right away. Never let it sink into link rot.

It’s very easy to change your background colour, just look for this code (below in graphic) and change the hexidecimal code to the one you want.

The Client/Vendor relationship… maybe this will make it to some of “those” customers.