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!

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 <h1> or only in the paragraphs using <p> So this way, as you design your website, whenever you use the <h1> or <p> 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!

I will start from the top and work my way down. I know that you said that you can not do much about those ads. Is this because this is a FREE program? because if so, you should switch to wordpress or blogger. Those ads are insanely distracting and they do NOT need to be on a free blog. You can get a really nice, clean, and free wordpress blog without ANY ads. Here is an example of a free wordpress blog. Its my puppy

So ignoring the ads (which is REALLY hard to do, i must admit)……

Your header image has nothing to do with your content. You should consider getting nice graphical header image instead of just a stretched picture across the top of the blog. What you can do is if you have an image editor, create a new image, pick a font that you like, and re-create what you have on your header now. The big text that says your blog name, and the smaller tag line text. THEN you can do some clipart searching. You can easily find a free graphic of a piggy bank, or something else that shows “saving money” here are some free clipart websites:
Free-Clipart
Deviant Art – my favorite
Free-Clip-Art

If you make your outer background pink and the inner background white, it would look nice -if you can do that. OR you can make your entire background white. That pink just seems to make your website not look as clean and organized as it should, and with all of those ads, you want to make things as clean as possible to avoid MORE clutter added from the advertisements.

Now, your top pages navigation is what is off. HOME | ABOUT | BLOG SERIES | CONTACT LAURA | MOST POPULAR POSTS are all aligned o the right, and you should atleast align them center to make them match up right now. They might be aligned in your browser, I dont know because I do not have IE, but in firefox, they are aligned left and look out of place.

Can you move where the ads are?? If so, i would put the categories and the top of the left column. If you can not, then put the categories as close to the top of that sidebar as you can. Move the entre card graphic down. People will find it if they are looking for it, so moving it lower in your sidebar is not a bad thing.

You sidebar should have the categories at the top, then your recent posts, and then your entre card OR sites like mine. The thing is, both the entre card graphic and the sites like mine links are going to take people away from your blog, and why would you want to do that. Sure, you want to share exciting content with your readers, but not at the expense of readers leaving your blog. You want to make links accessible, but not “in your face”

Your red and blue text makes it very hard to differentiate ads from your content. You want your content to be obviously different from your ads. Black, and a color really close to black like a really really dark blue would be ok if you want to stay in the blue family. See some color codes here.

I think that your posts have some GREAT content. Espeically the “Show you care, teach someone a skill” hehe. Right down my alley!

You contact page is perfect. Nice and complete AND it has the social bookmarks which is a great thing !!

Your BLOG SERIES is a tad confusing, and it’s probably because there’s an ad smack dab in the middle of it!!! And it’s not your fault, so I won’t berate you for that, I will just suggest a wordpress.com blog again. You have such good content and a good sense of what is important to people that its a shame that it is hidden by ads.

And finally, the BIGGEST OF BIGGEST ISSUES.. YOU HAVE TO BE A TODAY MEMBER TO COMMENT!!! Thats such a bad thing. Just think if here everyone had to sign up to comment on this post. I wouldn’t have HALF of the comments that I have.

Your design needs work, with the colors, the header, and the font color.. But the rest you can not do much about.

If you would like some ideas with your header, let me know. I do graphic design as a hobby, and web design as a freelance type thing. So I am ALWAYS willing to give pointers and I offer my services to subscribers.

Someone asked me a non-question the other day. I really didn’t know how to answer it. The question was:

I understand where this question comes from, because I had the same question when I was new to web design. You see those websites that have a bunch of code for an image that you can copy and paste that code so the image shows on your OWN web site. The thing is, you are thinking that the image needs its OWN code, somehow embedded into it in order to use that function.

The reality is, the image is just that. AN IMAGE. When I create images for the internet, print, or anything else, there is no special coding or addons that I apply when doing web site images. An image is an image is an image.. and that’s that.

So where did that code come from? Well, it is simple HTML. If you do not know HTML, take this as your first course, and my first tutorial on it (there will be LOTS more to come)

This is what the image code will ALWAYS look like for those “grab the code and add to your site” things:
<a href="http://yourwebsite.com"><img src="http://yourwebsite.com/imgfolder/imgname.jpg"/></a>

Now I will explain exactly what that is.

All code HAS to start with a ‘<' and then the "a href"

The "a" means ANCHOR which is always used to create a link. ALWAYS.

href apparently means hypertext reference. I had to look this up because I did not know this. What you need to know is you will ALWAYS use this <a href= when you are linking text or an image to some other place.

Then you will ALWAYS put the web page that you will like to inbetween the quotes <a href="http://websitelinkedto.com" and you close this part of the code with '>'

When you close that linking part of the code, you need to open the code that puts the image there as a link. So again you start with a '<'

Then you add “img src” and you can probably guess what it means.. IMAGE SOURCE. The image source the always going to be the file path in which you uploaded your image to. You can NOT put a picture into your website without first uploading it to your web server. If you want to learn more about how to do this, CLICK HERE.

So now you got <a href="http://websiteyoulinkedto.com"><img src=

You will then put the path to your image inbetween quotes. It will ALWAYS be a complete url. So if you uploaded that image into a folder on your server called IMAGES, you will have something like this: "http://yourwebsite.com/images/imgname.jpg"

If your images folder is in a sub folder called “content” then you HAVE to give both because it has to be a complete path. So it would look like this:
"http://yourwebsite.com/content/images/imgname.jpg"

You can test if you have the correct url or path by opening your web browser and then typing in your image source url. If you are correct, you will see your image in your browser just there on a blank page. If its not correct, you need to make sure that you spelled everything correctly, and that you actually did upload the image to that place.

So now you simply close the image code with /> and then you have to COMPLETELY close the link with . The reason you do not close the linking code before you start the image code is because if you did that, then you will not encase the image in the link code and then the image will not be a link!! So if you open with an “a” you have to close with an “a”

When you add all of those steps together, you get this:
<a href="http://websitelinked.com"><img src="http://yourwebsite.com/images/imgname.jpg"/></a>
Alternately, if you wanted to link simple text, you would just replace the entire with the text you want to link.
It will look like this:
< a href="http://websitelinkedto.com">YOUR TEXT HERE</a>

So now you have not only learned what code to give to people if they want to post your picture on their website, but you also learned how to turn an image AND text into a link, and HOW it works.

So I hope all of this makes sense to you.. I was having a hard time coming up with a good graphic for this post..

PRINT THIS POST – put it next to your computer, write all over it.. let it help you
Note: There is a print link embedded within this post, please visit this post to print it.

Recently I was asking the following from a new reader of Web Design for Idiots: