I found this great website that helps you instantly create temporary image placeholders for your development websites. Here’s the default example of the temporary image:

I create this image by making the image source (src=) “http://dummyimage.com/480×108”.

The website automatically creates the temporary image with the number. Just looking at their home page, I found that you can also change the background color, text color and replace the dimensions with text. Here’s an example:

The source for this image is:

http://dummyimage.com/470×115/0F6983/fff&text=Temporary+Image+Text

I highly recommend checking out their website at: http://dummyimage.com/

Enjoy,
Ashton Sanders

You’ve probably heard “iframes are horrible with search engines.” Well, they are.

I recently had a client want me to create scroll boxes for their website so they could fit 1000+ words into a 300×457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.

CSS Scroll Box Instead of an iframe:

We’re going to use a css property called “overflow,” and by setting it to auto, it turns a normal div into a scroll box!

#scrollbox {
width:300px;
height:457px;
overflow:auto;
}
<div id=”scrollbox”> *enter endless amounts of words*</div>

So what just happened there is we assigned a div with a fixed width and a fixed height. Normally, if you had an element (ie image or text) that was too big for those dimensions, the element will be pushed larger. By adding the CSS scrollbox property of “overflow:auto” we tell the div to create a scrollbar instead of changing the size of the div.

The CSS property “overflow” does have a possible value of “scroll”, but this adds a permanent scrollbar to the bottom and right-hand side of the div even if you don’t need them. This “auto” value is great because if your content isn’t larger than the div, no scrollbars will appear. And if your content only stretches horizontally, you will only see a horizontal scrollbar!

That’s it!
Ashton Sanders

Well it has been a year since my first post here on Website Design in a Flash, and this will be my 104th post!

This was my first blog that really got me started in the world of blogging, and I have learned a lot. I hope that I can continue to provide useful information for people working to tame the Internet. My posting frequency has slowed down over the last couple months, but I will try to pick it up again.

Here’s to another year of Website Design Tips and Tricks!
–Ashton Sanders

On a separate hobby of mine, I came across Tom’s Boring Mordheim Blog. Tom is a very skilled miniature painter and modeler. After joining his online community, I helped him to make his home page “Snow.”

Check out the link to the blog above to check out (EDIT: see what his header image usually looks like. Now that he has taken down the snowing animation, click here to see the same image Christmas Style. It used to be just a plain .JPG. I replaced it with a Flash Animation, and amazingly, it is a smaller file than the .JPG!

Enjoy,
Ashton Sanders

Knowing the width, height, Image type or attributes of an image can be extremely useful.

I’ve used this once to make a line of images all line up on the bottom. I found out the height of the image and then added a margin to the top of the image to make the bottom of the image always be 300 px from the to. So if the height of the image was 140, I would make the margin on top of the image = 300-140.

Here’s the code to find the height or width of an Image:

<?php

list($width, $height, $type, $attr) = getimagesize(“image_name.jpg”);

echo “Image width ” .$width;
echo ”
“;
echo “Image height ” .$height;
echo ”
“;
echo “Image type ” .$type;
echo ”
“;
echo “Attribute ” .$attr;

?>

Enjoy,
Ashton Sanders

From my years of working on the internet, I have come to realize that the one thing that almost all of my clients desire, is the ability to manage their own website. This way, they never have to wait on their web guy to change a phone number on their website. If they have a new product, they have the ability to add it to their own website.

Because of this huge demand for a CMS for websites, we have developed one that I call “Database in a Flash.” This Content Management System is a very user-friendly program that uses MySQL and PHP. It allows anyone who knows a little bit about the internet to communicate with their MySQL database to update their website.

It really is an amazing program. For more information, feel free to contact us.

-Let me know if you have any questions,
-Ashton Sanders

Yes, in the world of Website Designing, you must make sure your website looks the same in every major browser. This means having all major browsers available: IE6, IE7, Firefox, Safari, Opera, etc. You may even want to go as far as checking it on the Netscape, MSN or AOL Browsers. (Although I recommend never downloading anything from AOL, as I’ve observed legal but slightly malicious coding from them.)

If you’re a PC guy, that means you’ll need to find a friend with a Mac to check your Safari websites. Also, since when you install Internet Explorer 7, it deletes, Internet Explorer 6, you’ll need to have two computers…. right? Wrong!

We can thank TrendoSoft for this beautiful program that will allow you to install multiple versions of IE on your PC!

Now your task bar can look like this:

And if you are using Internet Explorer, I recommend switching to Firefox for a even safer and user-friendly experience.

-Ashton Sanders

There are many different ways to program websites. There a many different ways to program the exact same website. If you gave the same design to 100 different website developers, you would end up with 100 pages (that probably all looked fairly similar) and 100 completely different HTML code. Is it possible to say if one is right or wrong?

The Principle of Web Programming

The first principle of website programming is validating. When you make a website, it better be 100% valid. “Ah but it looks perfect in Internet Explorer…” (but it probably looks horrible in Firefox or Opera.) If your code is not valid, that means you are “doing it wrong.” Only second rate Web Developers are okay with “doing it wrong.”

With HTML, you can do just about anything! From anything as simple as changing the color of a body of text, to aligning tables around your site. But just because you can doesn’t mean you should. HTML is not a styling language, its a formatting language. You should use HTML to enter and position your text and body copy.

Cascading Style Sheets, CSS, is a styling language. It’s purpose it to add color and life to your website. If you remove your CSS from your site, it should end up being straight text with a couple pictures.

By Why Use CSS?

CSS makes life simple! Why else? Every website has certain aspects that will be the same throughout. Take headers for example: On any given website, it will have the same color, font, size, etc for the first title on every page. You could hard program that with HTML on every page, or you could just put it between “<h1>” tags, and then in your CSS document, you tell all h1’s to be a certain size, color, font, etc., etc., etc.

Then when the client comes back and says, “Sorry man, I don’t like that green, lets add 2 points of magenta to it,” you don’t have to reprogram your entire site. All you need to do is change 6 digits in one document, and the entire site changes!

And if that wasn’t enough, it keeps your website code clean! I took a site that was almost 300 lines of code (where everything was programmed in HTML). I converted most of it to CSS, and it ended up being less that 40 lines of code! Search Engines love you! It is just that much easier for the Search Engines to get the text on your site.

“Program like your client is watching you… and they understand what you’re doing.”
-Ashton Sanders

Earlier I wrote a post about the Basics of Search Engine Optimization.

In this post I’ll be delving a little deeper into the basic principles that are used to create the basic rules of Search Engine Optimization.

Text is King I mentioned earlier how Search Engines can only index text. They can’t see pictures, movies, music, etc. Pictures can become a very easy substitute for text if you are not careful. Many clients want that button to have a unique font with a nice shadow, which is totally fine… but not as good as having straight text.

So there is definitely a balance between Design and Search Engine Optimization. You want your site to be aesthetic enough for visitors to not be repelled, but you don’t want it so picture heavy that no one finds your site as the search engines can’t tell what your site is about.

“But you can add alternate text (alt attribute) to your images!”

Yes you can add alts, so that if you image doesn’t load, you can have text appear in its place… but search engines know that there is really no way for visitors to see that text. So alt text will never have as much power as straight text or a “h1”.

On the other hand, if your site is entirely text, with no images, you won’t ever create a conversion. Images are needed to add live and personality and style to a website.

The Balance of Search Engine Optimization and Website Design.
-Ashton Sanders

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
position:absolute;
top:100px;
left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace “left” with “right”.

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here’s what you would do for a 1000 pixel width and centered website layout:

#leftnav {
top:100px;
right: 50%;
margin-right: -500px;
}

Quick Explanation: “right:50%” causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn’t matter what size screen you have, it will always be right in the middle. Then the “margin-right:-500px” moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won’t move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the “right” or “left” in your CSS (leaving only “top:100px”) your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders