jQuery

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.

 

jFlow Plus: Awesome WordPress Slider Plugin

jFlow Plus is a very cool jQuery slider been since a while, it is based on jFlow by ktan, though implementing these kinds of jQuery plugins isn’t very difficult, but implementing on WordPress at times get messy, especially if the user frequently changes/customizes their WordPress themes. So to overcome these, I made a WordPress Plugin for easy implementation of jFlow Plus, it does not modify the theme or any other gallery and works separately and is very easy to implement, the width and height of the slider can be changed from the settings menu in the WordPress Dashboard along with autoplay option and time to transition one slide. You can head over to its Release Page or go to http://wordpress.org/extend/plugins/jflow-plus/ for downloading it.

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.

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/.