iFrame alternative

At PrePress Systems we have been trying to circumvent the asp template beyond their original intentions as much as we possibly can to create the best custom web designs possible. My partner had the idea of using iFrames to avoid having the Flash headers from reloading every time someone clicks on something, and that would work, but I am a SEO guy and I can't in good conscious put an iFrame on a web site. Google is phasing out iFrames because they were abused in the past, so we had to look for an alternative. We found several ways to do it with PHP, but they won't work on our ASP sites, so we looked for a javascript solution, but we had no luck with that, and then we found the OBJECT tag. The object tag will embed another site into your website much like you embed a YouTube video on your website.

The only downfall to the object tag is supposedly it will not walk off the server, but that is not true. We got Google to load on a page with no problem. Now comes the SEO problems, we would have a website that is essentially only one page and that is no good for internal linking structure. Will Google index the plain html page we make to load into the content?

If you are looking for a good iFrames alternative, I suggest you try using object tags and see where you can go. They seem to work well, but now we are trying to push them a bit further and I am sure we will break them in no time. I may play with them at Goatsmilktavern Studios and see what happens to my ranking before I try it out on a paying customer.

Open Source is the way to go

I have run into a lot of issues in the past that call for certain programs with features to create the proper solution. Open source programs always seem to be the best, be it something as simple as a browser, or a feature rich coding program. The advantages of open source programs is that users are always developing add-ons to solve problems that everyone runs into. Open source users are people that need flexibility and solutions, now. Web designers need so many tools to create perfect pages that you would never make any money if you had to purchase all the programs need, or would create crappy pages if we only used big business web design programs.

Browsers
Every one knows that Mozilla has been kicking out descent browsers for a while, but the sheer volume of plug-ins available for Firefox makes it worthwhile to keep on your desktop. Plug-ins like FireBug and SEOQuake are essential tools for web designers and fit right into your Firefox workflow. Opera is possibly the best browser on the market, as far as browser functionality. With Opera's plug-ins you can do most anything any other browser can do at twice the speed.

Editors
I am a Mac guy and I love Coda and CSSEdit, but I often work on a PC and recently discovered PSPad. Whether you are a web designer or a web developer, PSPad has all the features you need. PSPad can read and highlight any language and has built-in tools for syntax and validation. If you don't know exactly what the proper way to phrase a command, just start typing and PSPad will give you all your options. I dislike PCs, but PSPad make web design much easier when I am away from my Mac.

Photoshop is the workhorse of web design, but comes at a hefty price, so try GimpShop. Gimp is a great open source company that has so many user generated plug-ins that it has surpassed many photo editors in functionality and customization.

CMS
It seems every client, these days, wants some form of content management system. Not long ago a decent content management system would cost some serious cash, but not anymore. With open source programs like Joomla, Mambo, and WordPress, web designers don't need to fill their brains with complex coding languages anymore. Most open source content management systems are simple, plug-and-play with CSS design manipulation. Web sites like OpenSourceCMS are great places to go discuss and discover content management systems. With the popularity of CMS, the number of plug-ins continues to grow every day.

Open source programs and web apps are the future of the web and will always be more functional. Customization to your workflow is always one of the most important features a program can offer. Stop loading your system up with $20,000 worth of programs that you only use a few of the features, and start using programs that you can make do what you want. I stated a while back that I dislike WYSIWIG web design programs because I don't want "what you see is what you get", which is BS when you test a site in multiple browsers, I rather "what you see is what you want". I am the same when it comes to programs and web apps, I want programs that do exactly what I want, and if they don't I can get a plug-in that will.

54 free directories to submit your site to

Like it or not, directory submissions are still a big part of SEO. I have compiled a list of 54 free directories that every web site should be submitted to. These directories are totally free, if you are just getting started in your SEO campaign free directories are the best place to start before your site begins making enough to submit to the big, paid directories. I have been trying to compile a list of resources for easy SEO, and this is just the tip of the iceburg when it comes to directory listings.

http://dmoz.org/
http://www.gimpsy.com/
http://www.lycos.co.uk/dir/
http://www.wowdirectory.com/
http://www.alistdirectory.com/
http://www.askalink.com/directory/
http://www.directoryws.com/
http://www.pegasusdirectory.com/
http://www.sighbercafe.com/
http://www.1stw.com/
http://www.abotdirectory.com/
http://www.a-free-directory.info
http://www.alistsites.com/
http://www.allbusinessdirectory.biz/
http://www.autumntree.info/
http://www.beedirectory.com/
http://www.best-net-sites.com/
http://www.blackdhalia.com/
http://www.blisswolff.com/directory/
http://www.blogsip.com/webdirectory/
http://www.businesswebdirectory.biz/
http://www.cash-for-surveys.com/dir
http://www.directory-global.com/
http://www.directoryvault.com/
http://www.freewebsitedirectory.com/
http://www.globalbusinesslist.com/
http://www.grafoff.com/
http://www.000harrydir.info/
http://www.imomlinks.com/
http://www.klottra.com/
http://www.linkdir.info/
http://www.littlewebdirectory.com/
http://www.makemepopular.com/
http://www.mercury-directory.info
http://www.network-room.com/links/
http://www.onestoplinkshop.com/
http://www.pedsters-planet.co.uk/
http://www.pop-net.org/
http://www.searchwiz.org
http://www.searchworth.com
http://www.skaloosh.com/
http://www.springsnow.info/
http://www.summerrains.info/
http://www.ldmstudio.com
http://www.the-free-directory.co.uk/
http://www.themedirectory.net/
http://www.theseoking.com/
http://www.thevividedge.com/
http://www.turnpike.net/
http://www.urlshack.com/
http://www.uuiq.com/
http://www.velendi.com/
http://www.websearches.info/
http://www.worldwidedirectory.org/

I hope these are helpful for you.

When web design comes to a standstill

When I create a new web design for a client the design always comes to a standstill when I get to the content aspect of the web design. Content is something that i need time to prepare and to format into the web design. there are two ways to approach content, write it your self, or get the client to write it. The first is probably the fastest, but having the client provide the content for the web design is the most efficient. A web design is not complete until it is fully populated with content, unless the new web design uses a CMS, then your after the design, your job is done.

Sometimes the client is too busy, or doesn't place priority on the content of the new web design in order to provide the proper amount of content for you. In this case you have to write it yourself. When writing content for a new web design, with limited SEO in mind, you have to do a lot of research on the company and industry. A great place to start is the previous web design, if they had one. Another is to get any brochures or materials the company may have and use that material for the new web design. Lastly, and most in effective, is to perform a search on the company. Pull up any old press releases the company may have created, or any business plan proposals by the company.

You may want to consider an online form for the client to fill out with 20 or so key questions that encompass all the pages from the new web design. These questions could lead you in the right direction when you are researching the material for the web design. Online questionnaires seem to work better than email because the clients feel it is another step in the start-up of the web design. Emails tend to get put on the back burner and forgotten as more come in.

Content approval is an essential part of the web design process, especially if you no nothing about the industry. Send a copy of the content to the client via email and have them look at it. Also post the content on the web design on a testing server and send a link to the page for review. Always give the client 2 options, this will increase your odds of having the content approved faster.

When a client gives you content for a web design, never blindly copy and paste the content onto the web design. Always proof the material before publishing it. After you place the content on the web design, step back and make sure it looks OK. You may have to reformat some text and add line breaks to make it flow better with the design.

Remember the web is still a visual media, grab some stock photography and float it in large bodies of content to keep the reader moving down the page. Place images in the seems so the readers will scroll to the rest of the content.

I have run into many clients that think content is just for the search engines and that it doesn't help with sales. This may be true, but the web design is not complete until you have populated it with enough content to satisfy the search engines. Even if you are not a SEO specialist, as a web designer it is your job to get the web site indexed and crawled at least a few times.

Next time you take on a project form someone who "wants a web design", start planning the content from the beginning and try to write as much as you possibly can. If you write content for the web design, many times the client will want it changed, and by the web designer providing a backbone it will make the content part of the design more of an editorial job for the client. A little initiative on the web designers part can go a long way.

Web design function

I had several meetings with clients today and I had a lot of interviewing to do to figure out what the clients needed because they had no idea. These were the second meetings with the clients, the first was the initial hiring meeting, where I got some basic info about the clients. As a web designer it is your job to steer the clients in what they need in their web design, and what they can expect from the web design. Before the conference you need to do a bit of research on the client and their business and prepare a way to design the site that will showcase their products and services. You also need to do a bit of research on the clients competition, notice what works on their site, and what doesn't.

Web Design
You should have a few web designs for the client to choose from when you go into the first meeting. These designs should cover a few different styles. If the company has a defined corporate image, it will be a bit easier to design the web site. When designing the preliminaries, keep in mind the aspects you discovered in your research and stress them in the web design.

If it is a sales page, you want to design the site around the products and keep the navigation as simple as possible. Make the web design easy to use before you make it look cool. When you are designing a sales page make the graphics match the products. Don't make a futuristic gamer-type web design for a teddy-bear website.

SEO is not an afterthought! Whether or not you are and SEO provider, you should read-up on it and incorporate some of the basics in your designs. Make sure your web design is easy to crawl and that your HTML is valid. Use all of the 6 heading tags and make them keywords. Fill in all of the meta tags and create a strong internal linking structure.

Keep in mind that some clients have horrible taste and are very disconnected from web trends. Remember, if you are going to correct someone's personal taste you need to inform them about user trends, and make sure to have an inventory of examples to show them. I always tell my clients when they are asking me to make something that looks horrible. They generally listen to me and no one has gotten up and walked out, yet. It is your job to give your clients the web design they want, but it is also your duty to provide input on what works and what doesn't. I had a client today that wanted me to make the text in the menu 45px tall, that's no good. I showed him every corporate web site I could find and humorously explained that not all of his client are as old or as blind as he is. He saw that smaller text looks more organized and more professional. I have many clients that now come to me and ask my opinion on other design issues in their advertising campaign because they know I shoot straight and speak the damn truth. Don't waste your client's time and money. If a client does have an idea that seems to be a bad design decision, try it out before you defend it, you need to compare the initial idea with your solution to the web design, preparation makes a big difference when entering a design meeting.

Monetizing your blogs & information websites

I just read John Chow's article on when you should put ads on your blog, and I kind liked it. He says what I have always believed, you should place the ads on your blog or information website from the get go. I stress "information website" because, if you are selling a product or service, try to keep ads off the site in order to keep customers on the site. Blogs are a perfect way to make extra money with ads, because you are providing information, not sales.

By placing ads on your new web design from the start will allow you to design the website around the advertisements. The more professionally you can incorporate ads into your web design, the better. You don't want your web design to look like the ads were an afterthought, and you want every element on your web page to flow naturally, including advertisements.

I do, however, disagree with his stance on "don't be afraid of too many ads", I think too many ads can detract from the aesthetics of the site. Too many ads can make your web site too cluttered, and I like a clean site with concise CTAs. Randomly generated ads are often very colorful and designed to get the user's attention and may not gel with the rest of your site. If yo have 6 or 7 elements on your new web design that don't look like the belong your web page can begin to look like some crazy, cluttered classified pages in a penny shopper.

Mr. Chow is a guy who knows his stuff, he is the creator of TTZMedia, and I don't wanna discourage anyone from monetizing their websites. From a web design standpoint, advertisements can clutter and destroy the visual effect you have achieved with your information layout and color palette, which is a part of your branding campaign.

Fingertips and .png files for transperancy

I cut off the tip of my finger yesterday, so todays post will be nice and short. PNG files are my favorite file type to create transparent images. PNGs are much better than .gifs and they don't add those crazy lines around them like .gifs do, but some versions of IE don't support .png files, so you have to use this little work-around.

#header { background:url(header.png); }

All you have to do is apply the background behavior to the #header element:

Also,

img, #header { behavior: url(iepngfix.htc); }

You can do this with every element you’e using PNG transparency on:

img, #header, .class, blockquote { behavior: url(iepngfix.htc); }

The asterisk works too,

* { behavior: url(iepngfix.htc); }

I hope you find this little work-around helpful, I should be back in full force when I can take this bandage off.

A bit about navigation

Navigation is possibly the most important aspect of a good web design, your web sites navigation must be easy to find and easier to use. When designing your menu, always consider your users and the questions they will ask.

• Where am I?


• Where can I go?


• Where have I been?

Intuitive Navigation
Creativity can conflict with usability, and usability can be boring, but users expect the navigation of a site to be in the usual places and to work like 80% of the sites on the web. I understand that there are some great sites out there with some really innovative methods of navigation, but if you are going to re-invent the idea of navigation, make sure to test it. Friends and family are great guinea pig when it comes to cheap testing.

Location
The location of your menu system should be in a visible place, and be consistent throughout the site. There are no rules as to pertaining whether the navigation should be on the left, right or top, but the navigation should be visible and separated from the content. If you have a short page, it is OK to place the navigation at the bottom, but users shouldn't have to scroll to get to the menu. For SEO purposes, remember spiders crawl from top-left to bottom-right. If your navigation is full of keywords, it would be wise to have it indexed first.

HTML Only
I am an SEO guy, and I design sites with SEO in mind, and navigation should always be text based for optimum optimization. If you use images, make a secondary, text based navigation for the search engines.

Multiple Ways to Get to Pages
Your menu is not the only form of navigation available on the site. Make sure to drop links to relevant pages in the content and headlines. Using a strong internal linking system will increase your page strength and you can use keywords relevant to the linked page. Make sure the links stand out, you don't have to make them a screaming color, but you do need to make them different from the surrounding text.

Breadcrumbs and Visited Links
Always keep the user's convenience in mind when designing a navigation system. Colored visited links are always a good idea to let the user know where they have been and where they need to go. Breadcrumbs work especially well for the user, they tell the user exactly how they arrived at that page and how to return on their next visit.

Creativity is the key to a good web design, but always keep in mind the abilities of your visitors.

Why use float based CSS web designs

There are a few ways of creating CSS based layout, I have used absolute positioning in the past, but I have run into a few clients that want the web site to move fluidly when they use the zoom feature that comes with most modern browsers. I had a bit of a struggle with the notion of the end user changing my web design, like why did I spend all that time determining the size of all my headings and other text. Anywho, I have switched to float based designs that can accommodate the end user changing the zoom and proportions of the site.

I started using 2 column designs where both divs were floated left and separated by padding within a fixed width wrapper, and this works in most browsers. However, some browsers don't behave themselves and would place the divs one above the other, and that was no good. So I switched to using percentages. Percentages can be a pain when it comes to figuring distances and when using images, but they will make the client happy when they want to alter the way the site is viewed. Just remember to clear the floats every once in a while, if it is a simple site, just clear the footer and you will be fire.

Liquid web designs just make more sense to me now, considering many people have 19" and 21" monitors. I didn't like loosing all that real estate designing sites that were 995px wide. Now with a web design that is 85%, I don't loose any design space, and by creatively using images with softer, gradient edges, the site can expand and I don't loose any effective imagery.

Creating 2 and 3 column web design with percentage and float based CSS can give web sites the mass and structure you need to convey all your information and eliminate many scroll-bar situations.

New Orleans Web Design Blog

The purpose of this blog will be to discuss web design issues I run into while designing websites and the work around and fixes I use to solve these problems. I will also discuss programs that make web design a bit easier and some that are a waste of time. I primarily use Coda by Panic and CSSEdit by MacRabbit. Though I am much more comfortable on my Mac, I do use a PC at my full time job, so I won't leave anyone out. I prefer to hand code all of my sites and tend to stay away from WYSYG web design programs like Dreamweaver and so on.

I am also a Photoshop freak and I love to show off new techniques for creating web designs and interfaces. My job requires me to surf the web and find what other web designers are doing, so I am exposed to a lot of different web sites every day, and I may just post a list of great inspirations and resources. I believe the key to being a good web designer is constant exposure to new trends in web design and learning the new techniques every day.

I am a full time web designer in New Orleans, LA, and I work on about 4 or 5 web sites and designs a week, so i run into plenty of design issues. The company I work for creates e-commerce web sites that run a complex .ASP back end, and sometimes it reads the CSS a bit funky, so I may bring up issues that not everyone will run into. I also use a lot of javascript to fix browser compatibility issues, but I always look for the CSS or html work arounds first.

I will try to post regularly, and I assure you detailed content for both simple and advanced techniques.