Increasing Website Credibility 7 Do-It-Yourself Web Design Tips for Non-Designers

October 7, 2008 at 6:14 am · Filed under Web_Design

Need to clean up your web site image fast but don’t have a budget for a designer? Following these 7 web site design tips should go a long way towards scraping off the cheese and increasing the credibility of your business web site.

1. Lose the clip art, no matter how cute or clever. Use a nice-looking photograph instead. Preferably a photo that shows your product in use or a satisfied client, but even a well-chosen stock photo would be better than clip art. And animated clip art? Unless you’re a real design whiz, just say “never”.

2. Reduce the size of large photos. If a any single photo is over 350 pixels wide or 300 pixels high it’s probably too big for your business web site. Hint: use your photo-editing software, not your HTML editor, to reduce the size.

3. Unless you really know what you’re doing, remove any patterned web page backgrounds. Choose a nice solid color instead.

4. Remove these special effects (unless they’re part of a Flash piece):

• text or graphics that slide into position
• blinking text or graphics
• spinning text or graphics
• page transition effects
• sound effects

5. Keep extra-large type to a minimum.

6. Remove underlining from any text that is not a link.

7. Use bold, italics, exclamation points, and ALL CAPS very sparingly.

This article may be re-published for free provided the entire author’s bio, along with all active hyperlinks, is published with it.

Keita Del Valle is the owner of Crafty Pixel, a Corona website design company which operates from Southern California’s Inland Empire. Her site is updated weekly with small business website news, tips, articles and opinions, including her Hollaback blog.

Share This

Comments

10 Important Web Design Tips SEO Friendly Website

August 31, 2008 at 3:11 am · Filed under Web_Design

A website should firstly be searched out by visitors before talking about attracting or retaining those visitors. Nowadays, a “well designed website” does not only relate to a web site’s visual attractiveness but more importantly, how friendly it is with search engines.

Below are 10 SEO friendly website designing tips where web designers should pay attention to during the early stage of their web designing process.

1. Avoid creating menu on the left-hand side of a website. If unavoidable, an alternative way is to put some text with rich keywords at the top or above the left-hand menu so that this text will be the first thing to be read by search engines.

2. Headlines are rated more important than the rest of the web page by search engines. To take advantage of this, you should have your keywords in the page headline. Since the header tag (h1) is quite large, you should format it to make it smaller.

3. Every page should contain the “title” and “description” tags with good keywords to describe the page content.The number of words for the title should not exceed 9 and that for the description should not be more than 20 words in order to keep within the limits of most search engines.

4. Try not to use Flash when possible. Flash cannot be read by the search engines to date and will cause slow page loading time and make people run away. If you really have a reason to use flash, try to make it smaller (e.g. as a flash header) and leave other area of your website for keyword-rich content.

5. Think twice on how to use graphics. Make them relevant to your content and use an alt tag with relevant keywords for search engines to read as they cannot read graphics and also for your visitors so that they can have something to read when waiting for the graphics to load.

6. Do not only use images to link out. You should always use text links to link out to important content on your web site. Spiders can follow image links, but like text links more though.

7. Avoid using frames. Some search engines cannot spider web pages with frames at all. For the other search engines that can, they can have problems spidering it and sometimes they too cannot index the web page.

8. Avoid using too complex tables when laying out your page but to keep them simple for the spiders. There are some engines which find it difficult to navigate through to the other pages on your website if the navigation bar is too complicated.

9. Use external Cascading Style Sheets and Java Script files to reduce page size and make the download time much faster. It will allow the spider to index your web page faster and can help your ranking.

10. Use standard HTML. Software such as FrontPage, Dreamweaver or a WYSIWYG editor will often add unnecessary scripting codes that will make the page larger than is needed and make it harder to crawl. It will sometimes add codes that cannot be read by search engines, causing the spider not to index the page or even the whole website. If to use, you should use those web page creator software wisely with a good understanding of html so that you may manually avoid or even delete those unnecessary scripting codes.

Want to learn more about how to design website and how to conduct Internet marketing? Siuchu Suga is a specialist on the above subjects. She is also the webmaster of About-webdesign.com.

This article may be freely distributed if this resource box stays attached.

Share This

Comments

Web Design Using Dreamweavers Layers Feature

August 19, 2008 at 9:12 pm · Filed under Web_Design

I have been using Macromedia products for my web site production for years. I just recently found a new way to design that has made my life a lot easier. Prior to the “Layers” feature, I always found it difficult to make a page look the way I wanted it to due to the fact that I had to put everything into tables or just position my images around my text and hope for the best. Now, Dreamweaver offers this killer shortcut to making a website: Layers. Imagine being able to put anything (text, tables, graphics, whatever) WHERE EVER you want!! This is an absolute godsend in the design world as far as I am concerned.

Now, I just discovered this feature in Dreamweaver 8. There were previous versions of Dreamweaver (MX2004, etc.) that also allowed for this feature. Either way, I am glad that I was able to find it and utilize it because it has made a considerable difference in the design for web sites for me.

The concept is simple: create a new page. To do this you must have first established within Dreamweaver’s site manager a site from with which you will work in. By right clicking on the site name in the properties bar you get a drop down menu with multiple options, one of which is “New File”. Create a new .html file and then double click that file to open it in the main Dreamweaver working window. The next step is to insert your first layer. Under the “Insert” section of the top tool bar go to “Layout Objects” and then to “Layer”. A little blue box will appear on your page. If you click on the perimeter of the box you get these little squares around the perimeter of the box allowing for resizing. You will also notice a small square in the upper right hand side of the new layer which when you click your mouse button on this square it allows for you to reposition the layer to where ever you wish to place it on your site.

You can now place anything you want within this box (layer) including text, flash movies, graphics, tables, library items and so on. The most awesome feature of this is that you have total control over where it is placed on your page and Dreamweaver will automatically write in the html code the exact X & Y coordinates that your browser will translate to show the page properly. It doesn’t get much better than this.

I found this feature to be very similar to working in Adobe Photoshop because with layers you have total control over every aspect of the design, without the stress associated with web design.

Now say you want to add some text to a layer but the text runs far off the page or far off the size of the layer box size you chose. Well Dreamweaver has resolved that issue as well. In the properties inspector at the bottom of the screen you have a drop down box labeled “Overflow”. If you drop down this box you have a few choices, Visible, Hidden, Scroll, and Auto. For the example I am explaining here you would choose “Scroll”. This tells Dreamweaver to write in the code that if your text over flows the size you designated for the layer box to insert a scroll feature allowing your visitors to scroll down the text to read whatever you placed in that layer box. Pretty slick!!

Other features with using layers is that you have a choice to name your layers in the Layers Tab on the upper right tool menu as well as setting the succession of each layer. I do highly recommend that if you decide to use multiple layers that you save yourself a major headache and label each layer in accordance with what it is related to on your screen. This makes editing the layer later on much easier.
Layers allow you to have the freedom within web design that should have been there all along. I suggest you give this a try and play with it and see what creative things you can come up with. Go nuts with this feature and have fun with it. You never know what will come out now that the boundaries have been dropped!

Other features that are pretty slick are the ability to overlap two images on a page. If you were doing an artistic presentation or something similar, this is a kewl feature which can be turned off on the upper right hand side of the “Layers” Properties box. Just put in a check mark under “Prevent Overlaps” and then you don’t have to worry about it. Dreamweaver will automatically make sure that nothing overlaps in the layers. However if you did want to have an overlapping effect of say two images, then make sure that the Prevent Overlaps is unchecked and you will further unlock the magic of this wonderful feature.

In closing, this is a really awesome feature, but it takes some getting used to. It breaks all the rules of what we had previously learned that we could and couldn’t do with web design. This takes that to the next level without making you reach for the aspirin.

A few other options include a command called “convert layers to tables” and “convert tables to layers”. On the top tool bar in Dreamweaver, if you go to ‘Modify’ - Convert - you have the two options I just mentioned. Clicking on convert layers to tables will automate Dreamweaver to start calculating down to the pixel how to design a table out of the information you have given to it by placing layers on the page in certain areas. This feature is mainly used for those web surfers who have a browser that is not up to date (i.e. Version 5 or earlier of Internet Explorer or Netscape) The new versions of most major browsers now support and properly display layer content within the browser window. But if you think that your target audience might not have updated browsers, then you might consider this feature. Personally I don’t use it because it is rare that people nowadays have outdated browser technology with all of the Automated Windows Updates and all.

The exact opposite if you choose convert tables to layers. If you already have a site and you built it in tables, choosing the option to ‘convert tables to layers’ will do just that.

I hope that this helps someone out who is doing their own design and wants to make their page look the way they envision it in their head without the stress of worrying about how to construct the right table and arranging things in that table to make it happen. Web design is moving forward and Macromedia has put the fun back into web design again!

Scott has been a web site designer for over eight years now and his artistic vision and creative skills have earned him quite a few satisfied customers. His innovative and easy to navigate sites have been applauded by the many who have hired his services. He currently has built over 100 web sites and maintains them for his clients. Aside from Web Design, Scott is also an accomplished photographer shooting pictures for Willie Nelson, the Dalai Lama, and Goldie Hawn, as well as fine art photos.

http://www.houstonphoto.net

Share This

Comments