02 · 07

Why Are My Images Taking Forever to Load?

Media_httpwwwoneminut_yuezt
I have been to many websites where I have had to wait before all the images are loaded. Talk about A-D-D. When that happens, what do you think I do? That's right, I click the back button. Us as a community have become acute to having things FAST! Heck, there is fast food, instant potatoes, etc. Face it, people on the internet want things in a flash. You may be asking yourselves this exact question about your website. If so, here is how to reduce and ultimately eliminate load times for images:

Image Slicing

When we as Web Developers talk about slicing images it basically means slicing larger images into smaller sections to allow for faster load times.

How Many Images are on Each Page?

You will need to limit the amount of images that you place on each page of your website. The more images you have on a certain page, the longer it will take to load. Consider: You only need to have images that are absolutely necessary for that certain page.

Animations

We all know that animated images are cute, and get visitors attention, but they slow the server way down. Animations in my opinion are last season and are not really needed now days. If you absolutely want animations on your website, please limit the amount that you have.

Image Size

What are the sizes of the images on your website? Let's say that you have an image that is 45k in file size and is 400 x 500. If you place that image on a page and notice that it is to big, you just resize the height and width on of the image to fit within the page. You might think that the file size with shrink also. NOPE. Just because you have changed the hieght and width of the image, it doesn't change the file size. It will still have the same 45k file size. You will have to use Photoshop or an equivalent program to reduce the file size of the image so that it will load faster.

Height and Width

When your browser loads images on web pages, it looks at the height and width attributes first so that it will be able to determine how to layout the images and the text within the page. If you are not using these attributes, the browser will have to determine the size of the images first, then load the text.

Formatting

When working with images, there are 3 formats that can choose from. There is GIF, JPG (JPEG), and PNG. Here is a brief description of each:
GIF images are the simple ones that have minimal colors, such as; clipart, bullets, charts, etc. If you have images that are simple, you need to be using this extension. JPG images are more complex and have more colors in them. They include shadows, gradients, etc. When using this extension your images display very well. PNG image can go both ways. The main use of png images are for transparency. PNG-24 (the high-end format) displays a gorgeous, transparent image that retains any enhancements that you have added.
Make sure that you are using the correct format for the images that you place on your website.

CSS

You can also use CSS to source in images for your website. Since the css file is loaded first when loading a web page, any images that are included in the css file with load faster. You will need to use images as backgrounds to use CSS. For instance, let's say you have a region in the header of your website that consists of an image, you might want to do something along these lines:
#div_header {background: url(images/header_image.jpg);}
This will source in the image as a background image for that region. So with these tips, make sure your images are loading in a timely matter.

Over to You

I would love to hear your comments on this subject! Leave them below.
02 · 02

8 Steps to Bring a Website from Nothing to Something

Media_httpwwwadaevide_etjxd
So you have been thinking about getting your space on the ever so growing internet, a website of your own. You have finally decided that it is time to venture into this action and really don't even know where to begin. Look no further. Start here!

1. Keywords

Before you even begin searching for a domain name, you need to be thinking about certain keywords. You need to research all the possible keywords that pertain to you and the website you are planning to create. Having a keen understanding will make the site creation much easier and everything else to just simply "fall into place".

2. Selecting a Domain Name

If a business is already established, it is appropriate to have the business name as the domain name. If you don't have a business established or the domain name is already taken, then you might want to select a domain name with your industry in the name. For example, if you are in the Web Development business in, lets say, Seattle, you can choose a domain that might reflect along these lines: www.seattlewebdevelopment.com.

3. Content Management System (CMS)

If you are planning on having a website that will be large in scale and have content that will change on a regular basis, you should consider a CMS program. This will save you alot of time and trouble when you want to change content. If you are looking for a CMS/Blog program, I will strongly suggest WordPress. If you plan to use a CMS program, you want to check if it is search engine friendly and offers a wide range of items, such as, custom URL's, unique title and meta tags, etc.

4. Structure

This is the most important step.. If you are lacking in structure, then your site might as well be dead. If the content and keywords go together, then you might want to take note as to create pages for them. Start a list of the content you plan to use and then separate each into categories. Make sure that the files are saved in an organized format. Files that have similar content, create sub-directories for each. For instance, lets say you have a website that sells bicycles by brand and model. You might want to have something like this:
Brand A/Type A.php Brand A/Type B.php Brand A/Type C.php
Keeping this structure clean and organized can not only have a visual appeal but also help with your search engine ranking.

5. Navigational System

When you are in the process of developing the website, be thinking of how you are going to make your sites nagivation search engine friendly. If at all possible, use a text based navigation system and style using CSS (Cascading Style Sheets) to make them appealing. The reasons for making your site navigation text based is so that the search engine bots are able to crawl the site more efficiently. Bear to mind that the major search engines are unable to navigate through a website that use images (if not properly done) and JavaScript for their navigation. If you absolutely choose to go the route of using images as your navigation, then listen up. When you use images as your form of navigation, make sure you add the alt tag to your images. This is the description of what the image is. Make sure you add text that is relevant to the link that the image is linking to, this way the search engines will associate this with the link and page.

6. Traffic Stats

Lets talk about stats for awhile. Even before your site launches, you will need to be thinking of having some sort of analytics for your site. You will need to be able to track our website traffic. You can use the basic stats tracking software that might come included through your hosting provider but more times than not, they are unflexbile and reliable in tracking. When I am talking with clients about this aspect of websites I recommend Google Analytics. Google Analytics is very simple to add to your site. Even if you are using WordPress as your website, like me, there is a plugin that will allow Google Analytics to plug-in to your WordPress blog. But if you are planning on developing a non-CMS or blogging software website, it is very easy to implement. If you go to Google Analytics home page, it will walk you through the entire steps to setup tracking of your website.

7. Basic SEO (Search Engine Optimization)

So you are wanting your website to be able to be found in the major search engines. Where do I start, you may ask? Make sure that all the pages within your site have different, specific <TITLE> tags according to the content in the page, at the top of the code. This is an important role is optimizing your site as also significant in search engine ranking.

8. Hosting

This step might will need to be before step 3 above if you are using WordPress or another CMS/Blogging platform. You will need to find a hosting company that is not lite on your wallet but also has great features for the buck. Basically, the most bang for your dollar. You will need a hosting area that is PHP5 compatible, has a range of available databases that you can setup, large amounts of a space and bandwidth. Also, you will need a company that has great customer support if need be. May I suggest WebNet Hosting. They are great and have some of the best customer service representatives I have ever talked to.

But It Doesn't Stop There

Okay so you have finished your website. You have lauched it out on the internet. Everyone has taken a look at it. Now, how do you get continued traffic to it? There will always be an on-going process of promoting your site. This never ends, believe me. One thing I suggest is to begin to use Viral Marketing (Word of Mouth) and Social Media to drive traffic to your site. Many of us already know the major players in Social Media currently. To name a few: Twitter, Facebook, FriendFeed, etc. Go out there and setup accounts with all of these and begin to connect with people across the world. This will bring in FREE traffic to your site and possibly continual traffic. ~ Kyle Reddoch Photo Courtesy of ADA
02 · 02

Finger Football - iTunes App of the Week - February 2, 2009

You remember the school days, right? The great games played at lunch time. Remember Finger Football? Awh, those folded pieces of paper. If you were like me, you loved to play finger football! Well now you can have the same great fun you had at lunch during your school days, right on your iPhone or iPod Touch. Just download the Finger Football app and venture back to your youth!
02 · 02

For Web Designers - Site of the Week - February 2, 2009

I was browsing my friends, Andy Sowards, blog looking at his Daily Nerdy Links and came across this wonderful site. I thought I would feature it in this weeks "Site of the Week". For all my fellow web developers and those who are aspiring web developers listen up. Do you just wish there was a site out there that combines all the knowledge you would need to develop professional, web standard websites? Well look no further! I have found a website to trump all websites for this exact knowledge base. For Web Designers is a knowledge base website that has links to websites that you are looking for that are easily searchable. Great information ranging from Flash, Ajax, Photos, CSS, and much much more... Take a look for yourself. You will be amazed at how much information that is available at your fingertips!
01 · 30

Guest Post - "Icons Can Make or Break Your Design"

Take a look at the icons below. Each pair represents the same website, but brings out a very different feeling. Which icon would you choose for a business and which for a personal website? Why? What would you want people to think when they saw it?
The way that you brand your business is not just the name of the company or the basic design of the site, it is down to the little details of the icons and fonts that you choose. Are you choosing right icons for your business?
I want to thank Kirsten Wright for writing this great guest article.
*These icons are available for free at Smashing Magazine.
Kyle Reddoch

I am an aspiring Web Developer, Android Fanatic, Family Man, and all around Web Geek! I also do Freelance Development work.

About

My Journey through the Interwebs!