40 Incredibly Useful Web Design Tools You Should Use Daily

This article will showcase tools which should and could be used by designers daily. If you need some inspiration – you can visit the most popular and recommended design showcase sites to find really good works and examples. Check out design related tools, online generators, free font sites, template sites, great websites helping to test and manage websites – those all have been created to save your time! Remember –  not always the best way is to create everything by yourself. Be smart and you will accomplish your tasks much easier and quicker without struggling!

I strongly suggest you to go through this article and bookmark tools, which could help you or just bookmark this page and come back whenever you feel discouraged or struggled! Enjoy!

Inspiration

1. Deviantart

Deviantart is one of the largest artist showcases on internet. You can find some great inspiration here.

2. Web design library

Web Design Library is an internationally refereed resource that provides a platform for the dissemination of design thinking and research. It covers all theoretical and practice-oriented aspects of the effective, efficient and attractive presentation of information on-line.

3. Stylevault

Stylevault.net is a design showcase where web designers can show off their talents and get inspiration as well as giving it.

4. Behance

Behance is a very great place for inspiration, because there are more professionals with stunning designs.

5. The design inspiration

The Design Inspiration is created by a group of designers who are seeking various design inspiration every day.

Design tools

6. Colour lovers

COLOURlovers is an international community of designers and artists of all kinds who visit the site to get color inspiration, ideas and feedback for both their professional and personal projects. COLOURlovers’ loyal members create colors, palettes and patterns to nurture their ongoing love affair with color.

7. Adobe kuler

Adobe kuler is a web-based application by Adobe that helps you create and share color themes.

8. Color hunter

Color Hunter is a place to find and make color palettes created from images.

9. Colorotate

With ColoRotate, you can work with colors in 3D, in real time, and in a way that matches how our minds process color.

10. Stripemania

Stripemania is a simple and free web 2.0 tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.

11. Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

12. Dafont

A great website which allows you to browse fonts alphabetically, by themes, or by date. Most of the fonts are free to download.

13. Icon finder

Icon search engine with over 100 000 free icons.

14. Whatthefont

Seen a font in use and want to know what it is?

Submit an image to WhatTheFont to find the closest matches in our database. Or, let cloak-draped font enthusiasts lend a hand in the WhatTheFont Forum

15. Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Coding tools

16. Typeteste

The Typetester is an online application for comparison of different typefaces. Its primary role is to make web designer’s life easier.

17. Typeface.js

With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images.

18. Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScriptlive in any web page.

19. Smush.it

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality

20. pForm

HTML form creator.

21. Zend Studio

Zend Studio 7.0 is the next generation of our professional-grade PHP application development environment. It has been designed to maximize developer productivity by enabling you to develop and maintain code faster, solve application problems quickly and improve team collaboration.

22. Fire FTP for Firefox

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

23. Expandrive

ExpanDrive acts just like a USB drive plugged into your Mac or PC. It lets you open, edit, and save files on remote computers from within your favorite programs. ExpanDrive enhances every single application on your computer by transparently connecting it to remote data.

24. W3C Validator

The W3C validator is a free service by W3C that helps check the validity of Web documents. Also available CSS validator.

25. jQuery UI

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

26. Clean AJAX

Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology.

27. Refelction.js

Reflection.js allows you to add reflections to images on your web pages. It uses unobtrusive javascript to keep your code clean.

28. Blueprint CSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

29. CleanCSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

30. XHTML Character Entity Reference

This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.

31. Pingdom

Pingdom offers cost-effective and reliable server, network and website monitoring. We use a global network of servers to monitor our customers’ sites 24/7, all year long. The service includes statistics for uptime and response time, and can send out alerts via SMS and email.

32. Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

33. WIX

Free flash page builder.

34. Best free templates

BestFreeTemplates.info offers exclusive CSS templates of various categories, available for free downloading. Our free templates can be easily called one of the best free templates in the Internet. Qualitative CSS layout, absolutely unique professional web design – all this being an incontestable advantage of our free webtemplates. That’s what allows us to characterize our website templates as the best free templates.

Testing and managing site

35. Browsershots

BrowserShots is a web-based browser compatibility check tool that lets you easily preview how your website looks in all popular browsers. No email or registration required, submit your web URL and wait 3-5 min for BrowserShots to generate screenshots for each browser.

36. Browsercam

See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.

37. Are my sites up?

Are my sites up is a simple service that notifies you when your sites goes down.

38. Google analytics

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way. With Google Analytics, you’re more prepared to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites.

39. W3Counter

W3Counter is your free, hosted website analytics solution for answering the key questions about your website: who’s your audience, how they find your site, and what interests them.

40. eLogic

Track and monitor the activities of your website. Knowing what your web page statistics are is the key to running a successful online business.

13 Useful Code Snippets for WordPress Development

WordPress has grown to be commonly defined as the core solution for your blogging needs. It is the most recognized and sought after Content Management System by writers and designers. Consequently, over the past few years there has been a voluble increase in WordPress blogs, this has caused the “need” for useful tips, tricks, and hacks, all made to allow the customizing of your WordPress powered site. Here are 13 code snippets or hacks that will help you extend the capabilities of your WordPress site.

Customize the Logo of Your WordPress Login Page

After constantly having to visit your WordPress login page, having to see the same logo and design over and over can be a bit boring. This is where this hack comes in handy. All you have to do is place the following in your functions.php file, and replace the image.

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

Source

Detecting Mobile Devices Accessing Your Site

Mobile web surfing is continuing to evolve on a larger scale. This is why detecting those users who are visiting your WordPress blog through a mobile device and redirecting them to a mobile version of your site is important. In order to achieve this, you first have to get the code from detectmobilebrowsers.mobi and upload it to your theme directory.

Then, all you simply have to do is open your header.php file and place the following at the top of the file. Remember to edit line 5 to where you’d like to redirect mobile users.

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  header( 'Location: http://your-website.com/?theme=Your_Mobile_Theme' ) ;
}

Source

Automatically Resize Images

If you’re accustomed to displaying large quantities of images on your blog, then you know how tedious it can be to have to always resize your images manually. Now you can use this hack to automatically resize any image you’d like to whatever width and height you choose for a more organized look. To do this, copy the following script and create a folder for it anywhere on your site (i.e. scripts) and name it “timthumb.php“. Now, you can use the following syntax to add an automatically resized image to your blog post:

<img src="/scripts/timthumb.php?src=/images/whatever.jpg&amp;h=150&amp;w=150&amp;zc=1" alt="" />

Direct Source

Displaying Your Tags in a Dropdown Menu

Tag clouds are often hard to read, especially for a more busy site. Eliminate this problem by using a dropdown menu to display your tags. You must place the following code in your functions.php file.

<?php
function dropdown_tag_cloud( $args = '' ) {
	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
		'exclude' => '', 'include' => ''
	);
	$args = wp_parse_args( $args, $defaults );

	$tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => 'DESC')) ); // Always query top tags

	if ( empty($tags) )
		return;

	$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
	if ( is_wp_error( $return ) )
		return false;
	else
		echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}

function dropdown_generate_tag_cloud( $tags, $args = '' ) {
	global $wp_rewrite;
	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC'
	);
	$args = wp_parse_args( $args, $defaults );
	extract($args);

	if ( !$tags )
		return;
	$counts = $tag_links = array();
	foreach ( (array) $tags as $tag ) {
		$counts[$tag->name] = $tag->count;
		$tag_links[$tag->name] = get_tag_link( $tag->term_id );
		if ( is_wp_error( $tag_links[$tag->name] ) )
			return $tag_links[$tag->name];
		$tag_ids[$tag->name] = $tag->term_id;
	}

	$min_count = min($counts);
	$spread = max($counts) - $min_count;
	if ( $spread <= 0 )
		$spread = 1;
	$font_spread = $largest - $smallest;
	if ( $font_spread <= 0 )
		$font_spread = 1;
	$font_step = $font_spread / $spread;

	// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
	if ( 'name' == $orderby )
		uksort($counts, 'strnatcasecmp');
	else
		asort($counts);

	if ( 'DESC' == $order )
		$counts = array_reverse( $counts, true );

	$a = array();

	$rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : '';

	foreach ( $counts as $tag => $count ) {
		$tag_id = $tag_ids[$tag];
		$tag_link = clean_url($tag_links[$tag]);
		$tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
		$a[] = "\t<option value='$tag_link'>$tag ($count)</option>";
	}

	switch ( $format ) :
	case 'array' :
		$return =& $a;
		break;
	case 'list' :
		$return = "<ul class='wp-tag-cloud'>\n\t<li>";
		$return .= join("</li>\n\t<li>", $a);
		$return .= "</li>\n</ul>\n";
		break;
	default :
		$return = join("\n", $a);
		break;
	endswitch;

	return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}
?>

Now, to finalize your dropdown menu you have to open the theme file where you want the list to be displayed (i.e. sidebar.php) and insert the following code:

<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
	<option value="#">Liste d'auteurs</option>
	<?php dropdown_tag_cloud('number=0&order=asc'); ?>
</select>

Source

Custom “Read More” Links for Your Posts

This is a really useful hack if you want to better define or customize the look of your “Read More” links for posts. The first thing you have to do is to edit your posts and create custom fields. Give them custom_more as a key, and whatever text you want to be displayed as the value. Then you have to edit your index.php file (and also your category.php, search.php, etc) and find a line similar to this:

the_content("Read more");

Now just replace it with this code:

<?php $custommore = get_post_meta($post->ID, 'custom_more', true); ?>
<?php if (!$custommore) { $custommore = 'Read More &raquo;'; } ?>
<?php the_content($custommore); ?>

Source

Scheduling Posts for RSS

If you regularly publish articles and you care about the quality of your posts then this is a good hack for you. The main purpose of this hack is that it lets you schedule your posts to be viewed in your RSS at a later time, this will allow you enough time to get those last minute fixes and additions in before your post is forever published in your feed. Place the following code in your .htaccess file. In order to change the length of the delay, change the value of the $waitvariable on line 9.

function publish_later_on_feed($where) {
	global $wpdb;

	if ( is_feed() ) {
		// timestamp in WP-format
		$now = gmdate('Y-m-d H:i:s');

		// value for wait; + device
		$wait = '5'; // integer

		// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
		$device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR

		// add SQL-sytax to default $where
		$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
	}
	return $where;
}

add_filter('posts_where', 'publish_later_on_feed');

Source

Display the Most Commented Posts of 2009

As the New Year is about to role in, it would be fun and resourceful to let your readers know which of your posts were most popular in the past year. This hack will allow your visitors to view the top 10 most commented/popular posts of 2009. This is a great way to give your posts a second shot at being noticed. In order to do this, you’ll need to place the following code on your sidebar.php file, or wherever else you’d like on your theme:

<ul>
<?php
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2009-01-01' AND '2009-12-31' ORDER BY comment_count DESC LIMIT 0 , 10");

foreach ($result as $topten) {
    $postid = $topten->ID;
    $title = $topten->post_title;
    $commentcount = $topten->comment_count;
    if ($commentcount != 0) {
    ?>
         <li></li>
    <?php }
}
?>
</ul>

Source

Allow Only Your IP Address to Access the wp-admin Directory

If you don’t have multiple writers or contributors to your blog, then realistically speaking only you should be allowed to visit the wp-admin directory. Especially since a great deal of security risks entail the wp-admin directory. All you have to do is enter your static IP adress on line 8. You can add more IPs if needed, by creating a new line. Place the following in your .htaccess file.

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName "Example Access Control"
AuthType Basic
<LIMIT GET>
order deny,allow
deny from all
allow from xx.xx.xx.xx
</LIMIT>

Source

Styling Your WordPress Comments

When your blog has lots of comments, then it’s a great way to get visitors to interact more by styling the way your comments are displayed. If this is what you’re looking to to, then open your comments.php file and replace your comments loop with the following code:

<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
	<?php // The extra stuff to get commenter's role
	$user_id = $comment->user_id;
	$role = ( isset( $roles[$user_id] ) ? $roles[$user_id] : '' );
	?>
	<li>
	<p>By <?php comment_author_link() ?> - <?php comment_date() ?></p>
	<?php comment_text() ?>
	</li>
<?php endforeach; ?>
</ol>

Now to structure your comment you’ll need to open your style.css file and place the following code:

#commentlist li { border:2px solid white; } /* not logged or subscriber */
#commentlist li.administrator { border:2px solid red } /* blog admin */
#commentlist li.editor { border:2px solid blue } /* editor */

Source

Remove Widget Areas on Your Homepage

If your WordPress powered site is more than just a blog, then you probably want to get rid of the widget areas in your default sidebar and create your own. This hack doesn’t require any editing, just code insertion. Now, all you need to do is add the following to your functions.php file:

<?php
add_filter( 'sidebars_widgets', 'disable_all_widgets' );

function disable_all_widgets( $sidebars_widgets ) {
	if ( is_home() )
		$sidebars_widgets = array( false );
	return $sidebars_widgets;
}
?>

Source

Insert Author Bio for Each Post

A multi-writer blog usually means everyone who writes or contributes a post will have section that speaks about them. If your blog doesn’t have this feature, then start giving your authors proper credit by inserting the following code into your functions.php file. An author bio will be automatically be displayed at the end of every post.

function get_author_bio ($content=''){
    global $post;

    $post_author_name=get_the_author_meta("display_name");
    $post_author_description=get_the_author_meta("description");
    $html="<div class='clearfix' id='about_author'>\n";
    $html.="<img width='80' height='80' class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>\n";
    $html.="<div class='author_text'>\n";
    $html.="<h4>Author: ".$post_author_name."</h4>\n";
    $html.= $post_author_description."\n";
    $html.="</div>\n";
    $html.="<div class='clear'></div>\n";
    $content .= $html;
    }

    return $content;
}

add_filter('the_content', 'get_author_bio');

Source

Remove Certain Categories From Being Displayed

Place this code inside The Loop and whichever category you choose, it will not be displayed. This can be an interesting hack for those who only wish to display a certain category to chosen or registered users.

<?php
if ( have_posts() ) : query_posts($query_string .'&cat=-1,-2'); while ( have_posts() ) : the_post();
?>

Source

Redirect Your WordPress Feed to FeedBurner

If you’ve found out how useful FeedBurner really is after you’ve set-up your WordPress site, and you have a few RSS subscribers on your default WordPress feed, then you’ll need to redirect your feed to FeedBurner. Every time a user follows a link to your default feed (i.e. http://www.yourblog.com/feed) they will be redirected to the location of your FeedBurner feed ( i.e. http://feeds.feedburner.com/yourblog). This way, even if a user manages to somehow subscribe to your old RSS feed, they will always be redirected to your new feed. Place the following code in your .htaccess file.

# temp redirect wordpress content feeds to feedburner
<IfModule mod_rewrite.c>
 RewriteEngine on
 RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
 RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
 RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/WebDesignLedger [R=302,NC,L]
</IfModule>

Source

Related Posts

Here’s some other articles that you will definitely find useful.

Top 8 Dreaded Favors Asked of Web Designers

10 Simple and Light Weight CMS Solutions

The Most Common HTML and CSS Mistakes to Avoid

Top 5 Content Management Systems for eCommerce

20+ Tools for Quick and Clean Code Development

Source : http://webdesignledger.com