6 Websites for Animated AJAX Loading GIF Images

Lately I was making a template which had a working AJAX Contact Form, at first I struggled a little for the loading image, but then I realized there are couple of websites where we can actually get(and generate) amazing loading GIF images easily according to our specifications, most of these sites also provide a wide range of images to chose from. Thus I am sharing some of those websites, hope this is helpful.

Preloaders.net

preloaders.net   Free AJAX animated loading gif s   3 dimensional  3D

Ajaxload.info

Ajaxload   Ajax loading gif generator

Chimply

Chimply generates your images

Web Script Lab

Web Script Lab » Ajax Loading Gif Generator

Load Info

Load Info   gif generator

AJAX Activity indicators

AJAX Activity indicators   Animated GIFs designed to indicate your site is doing something

Immaculate Portfolio Template v1.0 Now Available

I have made another free template “Immaculate”. This one is a single page website template, with smooth scrolling, has 6 skins included in it, working ajax contact form, useful shortcodes and a lot more. This one also uses HTML5 and CSS3 and is fast loading while being cross browser compatible. You should definitely head over to its release page at https://priteshgupta.com/templates/immaculate/.

You are free(And recommended ;-)) to share and use it. You are free to use it for your personal as well as commercial projects as it is released under New BSD License. If you have any issues related to it, you can contact me via the contact form at https://priteshgupta.com/contact/.

Here is a small preview of one of the skin of the template, go to the Release Page for full details.
Immaculate
You can see the live preview here and download it from here.

Optimize Website Load Time | Compression Tools and Techniques

While making websites we often consider using a lot of scripts and styles in order to increase interactivity and make the website richer. As a result, we end up with slow website, while you can of course remove those scripts and styles to make it load faster Or you can make is load faster without removing any functionality by doing some easy tricks.

Compressing JavaScript

While compressing JavaScript is most recommended and has a great impact in website load time(Generally they are already compressed for many jQuery plugins). There are many tools and methods using which you can compress JavaScript, few most common tools are Yahoo’s YUI Compressor, Dean Edwards’ Packer, Douglas Crockford’s JSMin, Dojo ShrinkSafe and gzip or htaccess(explained later), these things may be sounding strange, but using them is very easy. These JavaScript minification tools preserve all the features of the JavaScript code, but reduce the code size by compressing them. There is no ‘best’ JavaScript compressor, each one of them have  their plus and minus, but you can always compare between the compressors at http://compressorrater.thruhere.net/, its really a nice tool.

Compressing CSS

CSS compressing is also a good technique to optimize website’s load time, there are many CSS minification tools too. Here is a great article on Design Shack for CSS Minification, you should definitely head over: 18 CSS Compression Tools and Techniques and one more at Cats Who Code which explains how you can do it just by PHP: 3 ways to compress CSS files using PHP.

gzip and htaccess

Understanding simply, if you use gzip or htaccess compression, what happens is your website files gets compressed, and the compressed files are send over to the web browser, and the web browser extracts it and shows it to the users. It reduces response time by reducing the size of the HTTP response, this trick is definitely beneficial. There are many tutorials for gzip compression, a good one is at Samuel Santos’ blog: Improving web performance with Apache and htaccess.

Compressor Tools

There are many websites where you can compress your code, here I am including some of the noteworthy ones.

CSS Drive Gallery- CSS Compressor


CSS Drive Gallery  CSS Compressor

Compressor.Ebiene.de


Compress javascript and css. Amazing code compression. Quick easy and free

/packer/


packer

Javascript Compressor


Javascript Compressor   compress code online for free

CSS Compressor


CSS Compressor   Online code compressor for Cascading Style Sheets

Minify/Pack Javascript Online


Minify Javascript Online   Online JavaScript Packer

Online YUI Compressor


Online YUI Compressor

Performance Tools

There are few extensions/add-ons too using which you can check the performance of your website and suggests ways to improve the performance. One of them is YSlow by Yahoo, it has a Firefox Add-on as well as a Chrome Extension. There is one more web based tool Page Speed Online hosted at Google Labs, which is equally good. There is also a simple gzip test tool: GIDZipTest.

Conclusion

Our website’s performance is an important factor, and one of the main things in it is the website load time, if our websites are slow, there are chances that user won’t return. Also, these compression techniques are easily doable by editing the .htaccess file or by adding simple snippets using php or using those web based tools. Thus, you should definitely consider doing these tricks.

 

Dummy Content for Websites

When making or developing websites, web designers often need sample content and creating sample content again and again is a chore. Thankfully there are couple of places where we can get dummy content for our websites, we just need to copy and paste them and showcase it to clients and some tools too which create dummy contents in a click for your CMS.

<html>ipsum


html ipsum
Here you can get preformatted sample HTML content, it has various formats like ul, ol, table, form etc. I think this website is really handy while making websites, especially because of the dummy content’s multiple formats, you should head over and check it out definitely.

For WordPress

Lorem Ipsum Test Post Pack
While there are many dummy content import files for WordPress, but there is no use for a dozen of them if one does the job fine, you can head over to WordPress – Lorem Ipsum Test Post Pack and check it out. The Test Post Pack has formatted text for 30 posts, test pages, categories, sub categories, etc. Alternatively, you can also try out WP Dummy Content plugin.

Dummy Content Generators

Fillerati – Faux Latin is a Dead Language


Fillerati - Faux Latin is a Dead Language
I you are bored of using Lorem Ipsum in your websites then you can try this website, the website is made using HTML5. Rather than Lorem Ipsum text, this website gives extracts from English literature.

Dummy Text Generator, Lorem ipsum for webdesigners


Dummy Text Generator, Lorem ipsum for webdesigners
This website helps you create dummy content in various formats and layouts.

Dynamic Dummy Image Generator – DummyImage.com


Dynamic Dummy Image Generator - DummyImage.com
This website creates images of custom dimensions and allows you to chose between background and foreground colors, you can even add dummy text, use multiples formats(.jpg, .png, etc) and do a lot more. For me it is a really nice tool.

Placehold.it – Quick and simple image placeholders


Placehold.it - Quick and simple image placeholders
Something like DummyImage.com only.

Elegant Press Website Template Version 1.0 Now Available

So I have finally completed my website template “Elegant Press”, it has been made using HTML5 and CSS3, it is cross (modern)browser compatible, has web fonts, jQuery plugins, etc. Overall, its awesome and totally free! Its licensed under New BSD License, read more about it here, you should surely give it a try. You can see its release page at https://priteshgupta.com/templates/elegant-press/, you can download it for free from there.

Feel free to share and use it. You are free to use it for your personal as well as commercial projects as it is released under New BSD License. If you have any issues related to it, you can contact me via the contact form at https://priteshgupta.com/contact/. Please note this theme is not made for older browsers and looks funny on them, but who cares?

Here is a small preview, go to the release page for full details.
Elegant Press
You can see the live preview here and download it from here.

Design Kindle: Awesome Website for Free Web Design Files

Design Kindle is a community driven web design resources website which offers premium quality web design files like graphics, vectors, icons, textures, etc for absolutely free with no required membership. Isn’t this awesome? Thats not all, all the stuff here is royalty free and we are free to use them in our personal and commercial projects, without the necessity of linking back to them.You can visit the website at http://www.designkindle.com/. I personally liked their free graphics collections a lot, they are totally amazing and very useful in creating websites.

If you know any other website like this, feel free to share.

Best Websites for Stock Free Photos

We quite often need to use images for our websites or blogs and for getting legit images we always end up buying them, and spend a lot of $. But there are many websites on Internet which offer free Royalty Free Photos. I sharing some of the best websites which offer Free Stock Photos. Please drop by if you know any other too.

stock.xchng


stock.xchng - the leading free stock photography site

Getty Images


Royalty Free Images   Photos  Unlimited Use   Getty Images

FreeDigitalPhotos.net


Free Photos - Free Images - Royalty Free Photos - Free Stock Photos - FreeDigitalPhotos.net

morgueFile


morgueFile free photos for creatives by creatives

Corbis Images


Corbis Images – Premium Quality Stock Photography and Illustrations

everystockphoto


everystockphoto - searching free photos

Public Domain Pictures


Public Domain Pictures - Free Stock Photos

Stockvault.net


Stockvault.net - Free Stock Photos and Free Images

Jupiterimages


Stockvault.net - Free Stock Photos and Free Images

freerangestock.com


Free Stock Photos at freerangestock.com - Totally Free Stock Photography and Textures

Stock Images on deviantART


Stock Images on deviantART

Flickr


Welcome to Flickr - Photo Sharing

Dreamstime’s Free Stock Images and Photos


Dreamstime - Download Free Stock Images and Photos

Fotolia’s Free Stock Images and Photos


Fotolia's Free Stock Images and Photos

iStockphoto’s Free Stock Images and Photos


iStockphoto's Free Collection

Creative Commons Search


Creative Commons Search

Typography Resources

You must have already seen many websites with fancy fonts and advanced CSS text effects. Web Fonts and Web Typography has totally evolved in last 2 years. Using Web Typography now you don’t need to have images for “cool” text effects and it has replaced heavy designs. Now you just need to code a little for a beautiful text line rather than creating its image on Photoshop. And with Web Fonts libraries, using typographies by designers and developers has been made even easier. In this article I will share few good Web Fonts Directory and links to Typography resources.

Finding Web Fonts

With Web Font libraries it has become very easier for designers and developers to find opensource fonts and use them in their websites. There are many good websites to find Web Fonts, I am including “Free” in parenthesis for sites which provide opensource fonts. Some of them are:

Google Web Fonts (Free)

Google Web Fonts

Adobe Web Fonts

Adobe Web Fonts

Open Font Library (Free)

Open Font Library - Open Font Library

Typekit

Open Font Library - Typekit

WebINK

WebINK Web Fonts

Font Squirrel (Free)

Font Squirrel   Handpicked free fonts for graphic designers with commercial-use licenses.

Fonts Live

Fonts Live - Expertly Crafted Web Fonts from Monotype Imaging

Fontdeck

Fontdeck web fonts  Real fonts for your website

Fonts.com Web Fonts

Fonts.com Web Fonts

Fontspring

Desktop and  font-face fonts   Fontspring

exljbris Font Foundry (Free)

exljbris Font Foundry

Webtype

Webtype

CSS3 Text Effects

There are already many tutorials written for various kinds of advanced CSSTtext Effects, you can visit here to see a list of 22 Advanced CSS Text Effects. Please be careful that these text effects might not be compatible with all web browsers. Though all web browsers support typographies very efficiently, and the WOFF is supported by all the major web browsers lately(Firefox 3.6 and later, Google Chrome 6.0 and later, Opera 11.10 and later and Internet Explorer 9).

Further Reading: There is a great article on Steven Snell’s Blog for Web Typography resources, dont forget to read it here.

Sending HTML Emails using your Web-based Email account | Gmail | Yahoo | Hotmail

Yes, you can send your custom made HTML Email using your Web-based Email account account like Gmail, Yahoo, Hotmail, etc. Many people think HTML can only be send using Email Clients like Outlook or Thunderbird, etc. To send an HTML using your Web-based Email account, you need to do make a valid HTML Email Template first, like with in-line CSS, using Tables, absolute paths etc. Read here how to write an HTML Email. After you are done making it, upload it to your server or if you dont have one you can use a free web hosting service here or any other which you like. Make sure your HTML Email has absolute paths for everything, your readers are going to be at all different locations.

When done, open your Web-based Email account, click on Compose/New Mail, make sure you have Rich Formatting enabled. Also, open your HTML Email using your Web Browser. Select all on the HTML Email page using Ctrl+A(On Windows) Or Command-A(On Mac) and then paste it on your Rich Text Editor(where you are writing the Email) using Ctrl+V(On Windows) or Command-V(On Mac). Send it. Thats its. So easy to do.

Make sure HTML Email is properly formatted, be careful with it. CSS rules vary for Web-based emails, also it is not necessary that the receivers Email Client has HTML support it, it will go as plain text in that case, and if they are not web code friendly, they might just delete it in one go thinking it as some spam. Thus, you should give the receiver the opportunity to choose between HTML Email or plain text. Also if it is a commercial Email, make sure it follows CAN-SPAM Act of 2003.

Using Website Templates: Free vs Premium

Often Web Designers try to provide quick web design services to clients and for a low price to live up the competition. It is recommended in this case to use website templates to save time as well work within the client’s budget. There are ample of templates available for websites online, these templates are free as well as paid(premium). Templates can vary from client to client according to their website specifications/requirements. It is a myth that paid templates are better than free ones. While it is not always true.

Free Templates

In a free Website template you get a well put up website layout, with good CSS and minimal codes. Free Website Templates might not be heavy on JavaScript like jQuery plugins, or at times dont even include a simple image slider or any JavaScript at all. But this doesnt makes it an unfavorable option. You can add jQuery plugins like prettyPhoto for image galleries/lightboxes and you can use Google Web Fonts for typographies. These small customizations take your Free Template to Premium Template standards and are very easy to be implemented on your Template. You can customize these templates to a large extent and change the glance of the template according to your creativity. This would be an example of free website templates site, there are many more, may be many better ones too. But I personally like this one because, the website templates here are clean, well laid out and not messed up, that is minimal. It gives the web designer a good opportunity to work, and be artistic. Thats why for me free templates work as good as paid templates. Though be careful when using these templates, they at times have Copyright/Licensing restrictions.

Premium Templates

Premium Templates are like a ready made websites, most of them already have required scripts like JavaScript for Image Galleries, etc in place, where you just need to edit or add little HTML, they even have the best suited typographies already in them. Some of them have PHP forms also in place for Contact Pages. If time is an important element of your website, then you should go with Premium Templates as they generally require lesser customization, everything is styled in best possible manner with best possible appearance of the website and they have all functionalities needed by a standard website, most of them even provide support too which can help you if you are stuck somewhere. Customizing Premium Templates like changing color scheme, design, background etc is not difficult, they usually have PSDs included in them and at times come with various layout options and color schemes.

Going with Templates

Templates might be an easy way out, good in appearance, saves time, etc, but this doesn’t makes them the best option. Thousands of websites are made everyday, but good Templates are not that many. What happens generally is that those few templates gets used again and again in many websites, which takes away the exclusive feeling of your website. At times the client even mention not to use Templates at all, and fooling them is completely unethical. To overcome these, you should customizing the Template as much as you can, remember over customizing will just end you up in an ugly website. Just make sure your website stands apart in the crowd.

Conclusion

All in all, both the types of templates are good. Free templates just require little more of work than premium templates. Premium Website Templates are like completely cooked dish, and in Free Templates you need to cook little more at times, but you save $ also. In Premium Templates, you generally just need to fit content into it, style a little, and done. Also, if you want to show your real creative and artistic skills, then you can drop the template idea, and can create the whole website yourself, or just borrow a framework layout from your WYSIWYG editor like Dreamweaver.

UPDATE: Check out my free website template Elegant Press at https://priteshgupta.com/templates/elegant-press/.