Firefox Plugins for Web Designers and Developers

June 24th, 2009

Firefox is a very popular browser nowadays, especially among the designers and developers. Not only it is fast and comfortable to use, but also offers dozens of fruitful add-ons that every designer will appreciate, these Firefox plugins will make your work faster and easier.
Well, I’ve prepared a selection of the most helpful plugins that simplify the lives of many designers and developers.

Aardvark
This powerful selector utility selects elements. It will show the HTML element type and its class or id if they exist and let you do various actions with the selected elements like delete the element or set the element’s background to a random color for instance.

Firebug
This powerful plugin integrates development tools into Firefox thus allowing you to debug, edit and monitor CSS, HTML, and JavaScript right in a web page.

HTML Validator
Shows the number of errors of a HTML page in your status bar. Very handy tool for developers

ColorZilla
This one is a great tool that lets you select any color you liked then adjust it and put in any other program.

Web Developer
This plugin adds a menu of various web development tools. It has window resizing options, validation tools for CSS, HTML and links and gives info on various objects on the page.

X-Ray
This Firefox extension lets you view a webpage code

Pixel Perfect
This Firefox extension requires Firebug and allows you easily overlay a web composition over the top of HTML you developed.

Total Validator
Great plugin that gives true HTML validation using the official DTDs.

Font Finder
This simple plugin identifies CSS details of the text you select. Gives such info as color, font, decoration, spacing and element details.

Window Resizer
You’ll find this plugin great for testing your web designs in different screen sizes. Supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions.

Do you use Firefox extensions in your work? If so, which ones do you find to be the most useful?

Tags: , ,
Posted in How To | 1 Comment »

Web Design Tutorials for Beginners

June 9th, 2009

If you are starting your web design career you might find these tutorials useful. Most of them are Photoshop tutorials, as it is the most common software for designing a website.

Website Building Tutorial

Very detailed description of the process of building a website from choosing the niche for your site to website monetization and maintaining the ready online presence.

Buttons, menus, and headers in Photoshop

Web 2.0 style buttons

Web 2.0 style is still very popular especially in business web designs, thus here is a simple tutorial on how to design web 2.0 buttons with Photoshop for you to practice.

Big Buttons

Comprehensive tutorial on creating big stylish buttons in Photoshop.

Dark Modern Header

Very simple way of creating a beautiful, stylish header for your website.

Creating a Professional Header

Another good Photoshop tutorial on creating a stunning header.

Clean Blue Navigation Box

With this tutorial you’ll learn how to create a navigation box for your web page.

Clean style navigation bar

Here you will learn how to design a very nice and colorful menu for your website.

Practicing these tutorials and learning how to use the tools and techniques you’ll start creating your own designs very soon.

Below are tutorials on how to design a whole website layout using Photoshop.

Create a Sleek, High-End Web Design from Scratch

Elegant Blog Layout in Photoshop

Modern Web 2.0 Web Layout

Designing a Simple but Professional Website Design

Being a web design beginner you’ll most definitely find web templates membership a useful tool, downloading an unlimited number of web templates allows you to create your own web pages in no time.
Well, have fun and remember – practice makes perfect!

Tags: , ,
Posted in How To | 2 Comments »

Make your website load fast

May 27th, 2009

No one likes websites that take ages to load. You won’t disagree that long wait always irritates. In the world of severe competition it is extremely important to make your website comfortable for the users. Make sure that your visitors won’t leave your so-very-informative page before it actually loads. What can you do to make your visitors lives more comfortable and safe their time with your fast page loading? Well, here are some useful tips for you to use on every stage of web site development – designing, programming and maintaining. Following these tips you’ll for sure make your website loading fast, more comfortable for your users and thus will leave your competitors behind.

making a website load faster

* Optimize your HTML code.
Errors, broken links, unwanted tags, all these things slow down your page load. Make sure your website doesn’t have any errors and is optimized for load time.

* Lessen the use of images, graphics and Flash.
This is the easiest and most optimal solution for designing the fast loading page. The more images you have on your web page the slower it loads, thus try to reduce the use of graphics. Of course they are important for the attractive appearance of your website, but try to be reasonable. The simpler design is better.
As for the Flash animations, well, they indeed are catching and rather useful for attracting your visitors, but if not properly utilized they can slow your page load immensely.

* Create simple icons with tables.
Do not neglect the simple ways. Using tables creatively can bring brilliant results, thus you can get not only great designs but also achieve the faster loading time.

* Use text links.
Try to reduce the use of graphic buttons. Instead use text links. To be able to make them attractive learn some CSS.

* Optimize heavy files.
Reduce the sizes of the images, Flash files and scripts if possible. You can easily do that with the help of Photoshop, Adobe Flash or Fireworks software.

* Stick to simplicity.

The minimalistic and plain designs are more and more popular nowadays, thus your website will look more modern and stylish and will load faster. Isn’t it an awesome plus to the great and professional looks?

Well, have I missed something? Feel free to add your tips on making websites load faster in the comments below.

Tags: , , , ,
Posted in General Talk, How To | 13 Comments »

Best Text Editors for Programmers, Web Developers and Designers

May 22nd, 2009

If you at least once tried to code by your own you know how extremely important a good and reliable text editor is. The ease and comfort of your work commonly depends on it. The majority of you would assume that the best text editor is Notepad, if not the best than the easiest one. But Notepad isn’t a simplest solution. It lacks such useful features like a tabbed interface and search and replace functionality for instance. Many programmers and developers agree that the choice of a text editor is a matter of habit. Well if you still do not have a favorite text editor or are not satisfied with the one you’ve got, I’ve picked the most reliable text editors for you. Who knows, maybe you’ll find the most convenient tool to work with among them. I tried to include the most popular tools not only for work on Windows but also Mac and Linux as well. You’ll also appreciate that all these tools are free. Thus, here they are:

* Notepad ++
A good and very popular tool for work with Windows. Among the most useful features of Notepad ++ I can name an auto-completion feature, tabbed interface, code folding, side by side text comparison, zooming in and zooming out and many more.

* Text Wrangler
A great multi-purpose text editor for Mac. The features include built-in FTP controls, support of useful BBEdit plug-ins and function browser.

* Komodo Edit
Deservedly named one of the best XML editors, this tool supports all operating systems, thus works great on windows, mac, and linux. Has many useful features including code completion and call tips. Supports such template styles like CSS, HTML, JavaScript, PHP, Python, XML, Perl, Tcl, HTML-Smarty, RHTML, Template-Toolkit and Django.

* Smultron
A very easy to use text editor for work with Mac. The main feature that makes it so easy to work with is the plain and simple interface. Except the basic features the tool has an obility to split thus allowing you to view files side-by-side, besides you’ll appreciate the code snipplet library that allows storing your most used code blocks. But the most of you most likely will be thrilled by its full-screen mode.

* Gedit
This one is created to work with Linux, actually it’s the official text editor of the GNOME desktop. Among the features are tabbed interface, syntax highlighting, spell-checking feature and a plugin system that allows to add new features.

* Bluefish
This open source editor is quite popular among programmers and web designers that work on Mac and Linux. The main thing it’s famous for is its speedy function.

* Vim
Great tool that runs in all the major platforms, that is: Windows, Mac OSX and Linux. There is a great number of features which makes it a bit complicated to work with it.

* NoteTab Light
This is another text editor that works with Windows, Mac and Linux. It is a free Notepad replacement. You’ll appreciate its built-in FTP client, tabbed interface and a reliable search interface.

Well, what is you favorite text editor?

Tags: , , ,
Posted in General Talk, How To | 2 Comments »

Test your website for cross-browser compatibility

May 14th, 2009

It is hard to believe that not that long ago there were only few internet browsers to choose from, when today there are literally hundreds of them. Well, the technology is developing fast and we have to deal with it. While there are so many browsers for users to choose from, the presentation of your website on each of them becomes more and more unpredictable. You can say that the majority of people use Explorer or Firefox and don’t bother about the presentation of your website on the other browsers. But a website can be performed differently in the different versions of the same browser. And do you really want the users of those other browsers to go past your website? So, how do you actually check your website’s compatibility? Install all the browsers out there and check it manually? Well, I think it’s hardly possible. For those of you who prefer their websites to be perfect everywhere I arranged a list of the best and most comfortable tools for cross-browser compatibility testing. The other thing except being easy to operate you’d love about these tools is that they can be used for free.

* CrossBrowserTesting
A very convenient tool that allows a full testing of your website’s interactivity not just in screenshots. All you have to do is to log in and select a machine with the browser and begin testing.

* BrowserShots
Awesome tool that allows testing in almost any browser you can remember. The only thing that may diasppoint you about this testing tool is that it can sometimes be rather slow.

* Litmus
Tests on all major browsers and gives you a bug report to help you correct the errors if you’ve got any. Unfortunately the free version is rather limited.

* BrowsrCamp
Tests on Safari/Mac. You’ll really like the speed of rendering screenshots.

* IETester
This completely free tool tests on every version of Internet Explorer. Just download, install and specify which IE version you’d like to browse in. The tool allows to compare two versions side-by-side.

Feel free to add more cross-browser compatibility testing tools in the comments below.

Tags: ,
Posted in General Talk, How To | 4 Comments »

« Older Entries
Newer Entries »