Some Helpful Links for Developers

There are a lot of unknown little knick-knacks spread all across the web to help Web Developers out. Everybody knows about different programs that they can purchase, and even though those would be very helpful, some people just can't spend that kind of money. So what do you do? Well, I have some links here that may make it a bit easier. Well, we can only hope, right?

My first link is to a website called www.tredosoft.com. They have some nifty freeware there, and one that I am particularly fond of is their Multiple IE software. Microsoft has made it very difficult to be able to install many versions of Internet Explorer to be able to debug and test out your websites, but this little tool helps you get that done.

Downloaded here, you can check out all of it's features with a few screen shots and some small descriptions of it. Multiple IE's will install Internet Explorer 3.0, 4.0, 5.0, 5.5, and 6.0. It dates back pretty far into Microsoft's history, and it is helpful because you can use it to test just Internet Explorer 6.0, or you can be really cautious and test back as far as 3.0. I would highly recommend downloading this one.

Another useful thing that has recently hit Windows is the Safari browser. Although still in Beta, it is available for public download and use. Although it will not run exactly the same on Windows as it would on a Mac, it can still be helpful for getting an idea of what your site may look like in the Safari Browser. That can be downloaded here.


Another good thing about this is the Private Browsing feature, which no other browsers have(as far as I know). When this is turned on, Safari will not save any cookies, searches, or page history. But once you turn it off, it will start saving it again. And unlike Firefox, where if you clear all of your cookies and history than they are gone forever, Safari will only clear the history of sites when you are in private browsing. So all the sites you visit before going into Private Browsing mode will still be saved. Pretty neat, huh? I would recommend downloading this, but it's not a necessity.

The last thing that I want to mention here is something that I am sure you have heard about a lot, and maybe you already have this. I have found this Firefox Add-On extremely useful, and any JavaScript coder will too. It's called Firebug, and it's a small Plug-in for Firefox. It basically sits in the bottom of the toolbar and either shows a green check when the page is clear of JavaScript errors, or it shows a red X when there is 1 or more errors on the page. You can them click the button to bring up a menu to show you all of the errors on the page. If you are trying to make a JavaScript code, this may just be the one Plug-in that will save your life. You can download it here.


In the screenshot above, I am using Firebug to check out G4TV's JavaScript code, and the small green arrow in the right hand corner shows me that it's all okay. And not only can I check out their JavaScript, I can also see their CSS, HTML, DOM, and much more. Firebug is possibly the most helpful addition for Web Developers, and I would very highly recommend downloading it, even if you are a little against using it at first. You will slowly learn to love it just like I did.

Well thanks for checking out some of these links, and hopefully I can find some more helpful links and post up some more in another entry.

And if you want direct download links, here you are:
Multiple IE
Safari Browser
Firebug(since this is an add-on, there is no direct link, so just click the "Install Now" button).

Navigation Exploration - Part 2

In the last segment I talked a bit about two common types of navigation, at lease placement and interactivity-wise. Now I want to go a bit more in-depth with these and really examine some new types of navigations that you can use on your sites. If you are new to web development, the best place to get inspiration for new ideas is off of other people. A neat blog entry I found is actually on a German blog called Dr. Web Blog, which has loads of pictures and links to sites that exhibit the new trend of navigation menus: Web 2.0 Navigations.

Dr. Web Blog

So when choosing what type of navigation to use, it's important to sit back and get a feel for the site. If you are designing a website for a small business, then you will probably need anywhere from 4 to 8 links in your navigation, which could easily be fit into the head section of the web page. If you have around that range, it's a good opportunity to let the creativity fly. Browsing around other websites that have similar themes can help you get an idea about what exactly you are trying to do.

Some sites that use good simple themed navigations are mostly the new Web 2.0 sites. Technorati has a great navigation. Even though the site is an immense search-engine style, the navigation is just a small bar near the header. It contains only the main links that you will need, and that's it. Maybe a little too simple for this monster of a site, but a good navigation none the less.



Another really simple navigation is found at Stikipad. This is an online wiki where you can store information. Although this is not a hugely popular site, it would still need to have some staple links in the navigation. As for how they did it, it was just blended into the very head of the website right next to the logo. I am actually a big fan of this navigation because it is very easy to spot where it is, whatever page you are on us underlined with a large green bar, and it's just easy to understand. If you are questioning how to lay out a navigation, I would suggest taking a look here for inspiration.



Let's say that you have a lot of information that needs to be accessible on the site, so you actually need the navigation to have some space. However, you don't want to confuse older people who visit the site and look at a long list of links and go "this hurts my eyes too much!". Well, a simpler way could be either to have drop-down menus(yuck!) or to use tabs that open up sub-menus. Listed below are three computer websites: Best Buy, Circuit City, and CompUSA. Best Buy and Circuit City use the drop-down menus, while CompUSA uses a sub-menu style.

Best Buy has done a good job with their navigation. Although I am not a fan of the large drop-down menus, they did fit it in really nicely. Plus, once you mouse-over the buttons, the menu is very responsive and appears quickly. The Circuit City menu, however, takes a second for it to actually appear, which is tedious to get through the menu. Although the colors do match the site nicely, it's just a pain to wait when Best Buy's is much more responsive.







Both of the menus do fit nicely to the site either way, so that is one option to consider. Another to consider is loading up the different topics into sub topics and then allowing your visitors to sort of pick and choose which one they want to find. CompUSA uses this style of menus, and I find it pretty nice.

Some styles of this menu will change when you mouse over the area, and some you actually need to click on. Either way, they work very well for people. Even though you are still listing a lot of links, you are doing it horizontally, which is easier to read that vertically in a list.



Their pages take a little while to load as well, so it's not very responsive as some sites on the web that use this style of navigation. However, as you move through the topics, the top part of the menu changes the tab color to highlight where you are, which is nifty and helpful for the user to remember.

So as for choosing between the styles of menus, that's up to you. But once you find out what you want to use, just Google things to see what you like and what you can find. You may be very surprised with what comes up, and it may lead to a site that helps you design the navigation of your dreams.

Navigation Exploration - Part 1

A lot of people fret over creating a perfect navigation, and for relatively good reason. Navigations are the key to any website, and it's what allows people to find your content. If your navigation is difficult to work with and needs an instruction manual to learn how to use, then your users will just head on over to the "back" button and choose another site. There are some key things to consider when choosing to make navigations, such as space, color, design, etc. But we can start small.

Any important site on the web today takes careful consideration of their navigation placement. This is very important, because if the user can't actually see the navigation, they may have a hard time using it. However, you don't want the navigation to be smack-dab in the middle of the page, because that's where the user is going to be spending their time with your content. So, there are two popular placements for navigations: at the top near the header, or off to the left/right side.







The way to decide which one to choose depends on the amount of content that you have, and the type of site you are designing. Let's examine these each and weigh the pros and cons.

Head Nav's

The main types of header navigations are sites that only have about 7-8 main pages. I say main because you may have smaller pages that branch off of your main pages, but they do not actually need a place in the header. This saves room for other important pages that the user may specifically be looking for. These types of menu's can be incorporated into almost any site, and they work well. Some websites will have headers with a main menu, and then a sub-menu. A good example of this is on the social networking site Digg.com:



Digg incorporates searches for the top stories by clicking on a specific category, and then you can click on sub-categories to choose from an even larger list. This can be very helpful on many different types of business sites. One of my favorite sites to incorporate this double menu style design is Template Monster.com:



Note that there are many, many websites that will use this strategy, so there are many other sites that have this design. The ones I have posted here are just for examples.

The positives about using menus like these are that it is very flexible, such as design wise. Since you only need to worry about it fitting into the length of your website, you can make very creative menus with different styles of fonts and graphics, which can bring out the ultimate creative side in many designers. These are also good menu styles to choose because it doesn't overload the user when they look at it, which can sometimes happen when they see a long list menu off to the side.

Side Nav's

Ah, the fantastic side navigation. Who doesn't love it, right?(I can think of a few thousand). The idea behind side navigations is that you have a lot of pages on your website, all with very important information that can't be linked from other pages. There can be websites with lots of information and do this in the header using JavaScript to create a drop-down style of a menu, but there are many issues with those.



First issue with these is that they look really outdated. With all of the new Web 2.0 styles of navigations coming out, these old CSS and JavaScript-based menus do not mix well. Sometimes, websites do have the ability to pull off a nice look to them, but the majority of them just look foolish and unimpressive(in my opinion). Another issue with them is that it can be stressful getting exactly what you want to drop down.

Say you want to go under a navigation titled "main", and underneath that there is a section called "about". You move your mouse towards the about link and BAM! All of the sudden, your mouse has somehow triggered the next navigation menu in line, and you now have to work your way back to the first nav to click on about. Pain in the ass, huh?

This type of thing will not usually happen with drop-downs, but when they do happen, it can be such a pain to deal with. That's why I think it is a lot easier to just stay on the safe side with either a simple header navigation or a side nav.

Wow, got a little off the topic there, but I think I got my point across with using drop-down navigations.

Anyways, back to the side nav's. The most common type of website to use a straight list of links on the side is... DING DING DING! Gaming websites. Want to know why? Because video games have a lot to cover. Secrets, enemies, strategies, abilities, items, stats, levels, characters, plot...and that's just for one game!

Now don't get me wrong, there are most certainly other websites that use this style of navigation, but game websites and fan-sites(which are websites created by fans of certain video game series') are the greatest users of these. The most common layout with these styles is the three-column layout, meaning that there are three columns that hold your website stuff:



Your left and right columns will usually hold your links, affiliates, other helpful sites, etc. Then your middle column will hold all of your data and such. However, we can save the site designs for another entry.

The pro's of using a side navigation is definitely the simplicity of it. You do not need to create images and choose complex fonts to fit the need, you can just choose the regular font that fits your site, and then edit the CSS to create some pretty rollovers with the a:link, a:visited, a:hover, and a:active states. You also don't need to just list all the links in a row, nor would I advise that. I would say that you could create some type of small little themed graphic or styled header font to split up the navigation into sections.

When choosing placement of your navigation, try to take these both into consideration. When choosing between the two, it shouldn't be too hard. Do you have so much important information that it would just be easier to list it along the side, or should you try to make it a navigation at the top of the page? A good idea with most business websites and popular businesses of adults is to choose a header nav, because not all adults these days are familiar with websites and using navigations, and long lists may cause dizziness and indigestion :).

So until the next entry, hopefully this filled you up a little bit on the understanding of a great navigation system.

Web 2.0 Links to Del.icio.us, Digg, and More!

I have noticed that a lot of websites have links at the bottom to multiple Web 2.0 style sites, with social networking and loads of other goodies. I have also noticed, as I have run into many times, it is difficult to find many sites with easy to understand links to add. So, Here it is! All of the code here is the most basic that it can get, no real PHP or scripting language knowledge is needed. I have replaced part of the URL with [YOUR URL HERE], which you must replace with your actual URL.

I hope these can help, even a little bit. I know that it can be frustrating trying to find things on the web, and these are another little knick-knack that you can keep in your bookmarks. The images I have hosted on Photobucket, so you will have to savethem either from this blog or from another site and upload them to your own server for use, just so it's a bit safer.

And if I have missed any cool or important Web 2.0 style sites that you think I should add, either E-mail me or comment this entry saying which ones to add. I'll be glad to edit the list for any legit entry, so post 'em up!


Del.icio.us

http://del.icio.us/post?url=[YOUR URL HERE]


Digg

http://digg.com/submit?phase=2&url=[YOUR URL HERE]


Technorati

http://technorati.com/faves?add=[YOUR URL HERE]


Newsvine

http://www.newsvine.com/_tools/seed&save?u=[YOUR URL HERE]


Ma.gnolia

http://ma.gnolia.com/bookmarklet/add?url=[YOUR URL HERE]


Furl

http://www.furl.net/storeIt.jsp?u=[YOUR URL HERE]


Reddit

http://reddit.com/submit?url=[YOUR URL HERE]


Co.mments

http://co.mments.com/track?url=[YOUR URL HERE]


Del.irio.us

http://de.lirio.us/rubric/post?uri=[YOUR URL HERE]


Blinklist

http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=[YOUR URL HERE]


Mister Wong

http://www.mister-wong.com/addurl/?bm_url=[YOUR URL HERE]


Fleck

http://extension.fleck.com/?v=b.0.804&url=[YOUR URL HERE]


Blue Dot

http://bluedot.us/Authoring.aspx?%3Eu=[YOUR URL HERE]


Wists

http://wists.com/s.php?c=&r=[YOUR URL HERE]


ThisNext

http://www.thisnext.com/pick/new/submit/sociable/?url=[YOUR URL HERE]


Taggly

http://taggly.com/bookmarks.php/pass?action=add&address=[YOUR URL HERE]


Spurl

http://www.spurl.net/spurl.php?url=[YOUR URL HERE]


Slashdot

http://slashdot.org/bookmark.pl?url=[YOUR URL HERE]


Simpy

http://www.simpy.com/simpy/LinkAdd.do?href=[YOUR URL HERE]


RawSugar

http://www.rawsugar.com/tagger/?turl=[YOUR URL HERE]


Popcurrent

http://popcurrent.com/submit?url=[YOUR URL HERE]


netvouz

http://www.netvouz.com/action/submitBookmark?url=[YOUR URL HERE]


linkaGoGo

http://www.linkagogo.com/go/AddNoPopup?url=[YOUR URL HERE]


IndianPad

http://www.indianpad.com/submit.php?url=[YOUR URL HERE]


Feed Me Links

http://feedmelinks.com/categorize?from=toolbar&op=submit&url=[YOUR URL HERE]


dzone

http://www.dzone.com/links/add.html?url=[YOUR URL HERE]


DotNetKicks

http://www.dotnetkicks.com/kick/?url=[YOUR URL HERE]


Connotea

http://www.connotea.org/addpopup?continue=confirm&uri=[YOUR URL HERE]


BUMPzee

http://www.bumpzee.com/bump.php?u=[YOUR URL HERE]


BlogMarks

http://blogmarks.net/my/new.php?mini=1&simple=1&url=[YOUR URL HERE]

Adobe CS3 Gradients

Well, I was thinking about what to actually do this this blog. For this post, I have decided to post up something pretty easy, and I find it sort of neat. I took a few hours out of my night last night to create the gradients for Photoshop that resemble the new, and quite controversial, Adobe CS3 icons. I think they are pretty neat, but many people may argue otherwise. I got most of the names for software that isn't released yet from luxuryluke on flickr, located here. All too often it seems that people look at something and rule it out immediately, which brings on the saying "don't judge a book by it's cover". This saying holds true in this case, considering Adobe holds the digital editing and creation market pretty tight, no matter how ugly the icons look.

For those who don't know, or just aren't familiar with Adobe's new look, here is the style:



Well anyways, for using these in Photoshop, the gradients will usually come out better if you use the radial gradient, but you can get away with the linear gradient if you position it correctly. Anyways have fun with 'em!


Digg this    Submit to Del.icio.us