Creating a good website isn’t an easy task, but there’s a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked.
ColorCombos – GRAB WEBSITE COLORS
When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme.
Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. Color schemes can be browsed by colors.
Visit colorcombos.com
LIpsum
Who doesn’t know the extremely popular Lorem Ipsum text? This text is used by webdesigners worldwide to simulate the render of real text on a design.
Lipsum.com allow you to create th desired number of paragraphs of Lorem Ipsum, quickly and simply.
Visit LIpsum.com
What the font?
You just saw a logo or website using a particular font and you enjoyed it. You’d like to use the same font in a design of yours…but you don’t know the font name. At this point, you have only two solutions: Searching for the font during hours, or using the What the font service.
What’s the font allow you to upload a logo or an image containing a font, and it will tell you which font is it. Results are incredibles.
Visit What the font
ConvertIcon
Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. It is also used in bookmarks. Favicon can be in various file format, including the popular .png. The only problem is that using png as a file format for your site favicon will not work on Internet Explorer. Happilly, there’s ConvertIcon a free online service that allow you to upload an image and get a .ico file, for maintaining compatibility with Microsoft’s browser.
Visit ConvertIcon
BgPatterns
background Patterns is definitely one of the current webdesign trends.
On BgPatterns.com, you’ll be able to browse a wide selection of patterns that you can freely use on your designs.
Visit BgPatterns
HTML Encoder
Do you display code on your website? If yes, you probably know how boring it can be. In fact you have to type < to display <. If you have to display a 50 lines code, this may take a while to manually convert HTML symbols. The HTML Converter simply takes a code and returns it to you after converting HTML entities. I use this service daily for displaying codes on my blogs. Note that a HTML Decoder is also available.
Visit HTML Encoder
Xenocode Browsers
In my opinion, Xenocode Browsers is the ultimat tool for checking your website in different browsers. Xenocode Browsers allow you to lauch IE6, IE7, IE8, Firefox 2, Firefox 3, Google Chrome and Opera directly from the web. The only weak point: The service isn’t available for Macs and GNU/Linux powered PCs.
Visit Xenocode browsers
Test Everything
Do you ever wished to be able to test your design in many browsers as well as checking a page PageRank, and even validate your code standards compliance all in one place? If yes, Test Everything is definitely a site that you should visit. It aggregate over 100 different tools to test almost everything on a webpage.
Visit Test Everything
Sprite Generator
CSS Sprites is definitely a great technique to use, mainly because it reduces the number of HTTP requests. Thought, CSS sprites require time and particular knowledges, which make the technique kinda hard to use, especially for begginners. The amazing Sprite generator allows you to send a zip file containing your images. It will returns you your images combined into a sprite, and even better, the CSS code that you’ll just have to paste in your main css file.
Visit Sprite Generator
Buttonator
Sure things, good looking buttons is a must have for any serious blog or website. If you don’t know, or haven’t the time to create some cool buttons, don’t worry: Buttonator is an advanced button generator that you can freely use. By the way, don’t forget to check out our Top 10 CSS buttons tutorials list if you have an interest in CSS buttons.
Visit Buttonator
Load Impact
How many time have you ever seen websites down after they were featured on the frontpage of popular sites as such as Digg or StumbleUpon?
The free Load Impact service will allow you to test how your website can handle various blasts of traffic. The results with sites hosted at WpWebHost are excellent.
Visit Load Impact
IconFinder
Good looking icons are a must have in any professional website. There’s plenty of free icons on the web, so the folks at IconFinder decided to create a collection of free icons for you to use them in your designs. It is definitely easy to find what you’re looking for in seconds.
Visit IconFinder
TypeTester
Testing how fonts will renders on your design is sometimes a fastidious operation. Happilly, TypeTester allow you to test how fonts and their attributes will look. A definitive gain of time.
Visit TypeTester
CSS Tidy
Even advanced developers often needs to optimize their CSS code. CSS Tidy is a free, online application that will fix errors and optimize your CSS code. For example, it can automatically detect redundant styles, a very common problem of CSS codes. Lots of settings are availables, to ensure you’ll be happy with the results.
Visit CSS Tidy
Contact Forms Generators
Forms are a very important part of any website, because they allow your readers or customers to interact with you. By using Contact Forms Generator, you’ll save a precious time by creating your forms, including the PHP, ASP or even Perl code needed for sending emails from your site to your mailbox.
Contact Forms Generator doesn’t even require programming skills.
Visit Contact Form Generator
Website Grader
Is Your Website Working? How well is your website doing? Is it getting traffic? Does it have SEO problems? How popular is it in social media? Find out the answers for free. Just enter your website URL and click Generate Report.
websitegrader.com
Tags: Web design and promotion
How to (and not to) work with a designer
from Will Harris
Imagine that you’re Christopher Columbus. You arrive in the New World and are so disappointed there are none of the oriental silks and spices you came looking for that you turn around and go home, missing all the wonders of the New World.
That’s what happens when you have preconceived notions about design. You can end up with something that’s better, but NOT see or appreciate it because you’re only focusing on the fact that it’s not what had in mind.
Remember you are a vital part of the design process. If you aren’t a good client, then you can’t expect good results.
Preconceived notions are just one of the mistakes people make when they work with a designer. A good designer’s work will make something:
- Work better
- Sell better
- Shed new light on old subjects
- Look better
The trouble is, a lot of people hire designers because they want their site to “look good.” But that’s just scratching the surface of what a designer can and should do. So they don’t know what’s possible, so they don’t get the most bang for their buck.
Just as writers are not just people who can type, designers are not just people who can use graphics programs. Good Design is more than skin deep.
Design is communication.
The way to inspire a designer is to give them the message and feeling you want to convey, and the freedom to convey it in a fresh, new way.
So how do you work with a designer to get their best work? Here are some suggestions:
1) Choose your designer carefully. Look at their previous work. The best designers don’t have a “signature look.” Their sites look as different as their clients do. Awards don’t necessarily mean the design worked for the client. If you’re not sure about a design, go to sites they designed and ask their clients.
2) Leave your preconceived notions at the door. Don’t ask for a site like someone else’s but in a different color. Be open to new, unexpected ideas. Don’t be afraid of something different. Let new ideas sink in.
3) Tell your designer what you want to say rather than how you want it to look. Don’t ask for a color, shape, or style–ask for meaning or emotion.
4) Be clear about specific features you need. You want your designer to create a design specific to your needs. If you try to add features as you go along, the design won’t fit as well.
5) Do your research and be specific about your needs. “I need to sell meeting planners on the idea of hiring me to plan entertainment for their events.” That’s clear and specific about both the product and the audience. The more detailed and specific you are at the start, the better the designer can tailor the site to your needs. If you add requirements later on, the designer will probably just have to shoe-horn them in, which won’t give you the best results.
6) Make sure your message and content are clear. The more of your content you have complete, the better the designer can build your site around it. A good designer may make suggestions to refine your content to get your message across faster or more clearly, but the more content you have complete, the more the designer will have to work with.
7) Design for your customer, not yourself, your friends or your colleagues. Be specific so your designer knows who your customers are and what they want. It’s more important that they like your site than that you like it. Always remember, “What’s in it for them.”
If the design pleases your customers, they’ll please you. If you insist on a design that only pleases you, then your customers may not be inspired to buy your product or service and in the end you will lose.
Have good reasons for your preferences. You can show the designer sites that appeal to you, but dig deeper and figure out why they speak to you. Think in terms of feelings.
Design makes you feel, so tell your designer how it makes you feel. Instead of saying, “I like yellow,” get to the root of it and say “I want a site that feels warm,” or “I want something upbeat and friendly.” Focusing on your logical or emotional impressions give the designer more to work with. Why? Because your customers may not “like” the same things you do, but a good designer can convey the impression you want them to have.
9) Don’t design by committee. No good design was ever created by a consensus. The more people who have a voice in the process, the more watered down the results will be. Your friends and coworkers will often give you conflicting advice and people often have ulterior motives when they give you comments (they may be jealous or threatened if you get something that’s too good, or they may just be ignorant). You can show it to a few trusted people and get their comments, but there can only be one person making decisions. Don’t be wishy washy and try to change direction late in the process.
10) Don’t tell your designer how to design. That’s not your area of expertise. Give a designer your requirements and preferences, but also the freedom to create something that answers them as effectively as possible. If you micromanage a designer, they won’t be motivated to do anything but cash your check.
11) You can’t please all the people all the time. Bill Cosby said “The only sure way to failure is to try to please everybody.” If everyone thinks your site is “OK” then it’s probably too dull to get much of a reaction from anyone. If you design a site with NO personality no one will hate it. Or love it.
12) Trust your designer (you are paying for their expertise).
Then when they start to show you “comps” (design versions), give them specific comments.
Don’t just say, “I don’t like brown.” That says nothing of real value. If you say “I’m concerned that the color looks sickly and we need something that conveys growth,” then you are giving the designer useful information, because you’re talking about content rather than telling them how to design.
Your designer should know more than you do about design and its implications, both emotional and cultural. So if you ask for a color and the designer explains why it isn’t a good idea, believe them. Don’t ask for a color, shape, or style–ask for meaning or emotion.
Yes, designers can make mistakes and take wrong directions. And yes, you need to give them direction. But you must tell them what you need, not how to achieve that goal.
The reason that so many great discoveries have been accidents is because when you set out with a destination in mind then end up someplace else you feel you’ve missed the mark and gotten lost.
The reality is different—you may have ended up someplace different—but better. Yet if you’re only viewing things in terms of “this is where I wanted to go and I’m not there,” you will be disappointed, even with something better.
So when working with a designer you need to step back and ask yourself if you’re just being Columbus, missing the wonders of the new world.
Tags: Digital art
Lotta Nieminen is a graphic designer and illustrator living and working in Helsinki, Finland. She studied graphic design and illustration at the University of Art and Design Helsinki (2005-2009) and the Rhode Island School of Design (2007).
Her work has won honourable mentions at Vuoden Huiput (Best of Finnish advertising and graphic design) as well as in various logo competitions (Aalto Univeristy, divided 2nd prize ; Maritime center Vellamo, 2nd prize ; Nuorisomerkki, 1st and 3rd prize).
She has worked as a freelance graphic designer and illustrator since 2006. As an illustrator, she’s represented by illustration agency Agent Pekka.
Featured in US based Print Magazine‘s
New Visual Artist 2010 review, as one of the 20 nominated designers under 30 years old!
Tags: Graphic design awords
“If you build it, they will come” is not necessarily true on the Web. Putting a website up is one thing, but getting visitors to come to your site is another. The process becomes even more difficult if you have limited resources to market your business.
Here are some shoestring marketing ideas that can help you get the visitors you need at the least cost possible:
1. Create the best content you can with the best products you can possibly offer. Your content is your best advertisement – if visitors love your content, then they will go back and spread the word to others.
2. Make it easy for users to recommend your site. Viral marketing is very important — and easy to tap on the Web. But give your users the tools. Get a Recommend this Site script from websites such as cgiscripts.com and similar directories of scripts. Some even go as far as giving incentives to those who recommend the site to their friends. If only 10 people go to your site, but these 10 people invite 10 more – that’s additional traffic that you get for FREE!
Recommend Site Scripts (various) http://php.resourceindex.com/Complete_Scripts/Website_Promotion/Recommend_Site/
Big Nose Bird Recommend this Site http://bignosebird.com/carchive/birdcast.shtml
CGI Resource Index http://cgi.resourceindex.com/Programs_and_Scripts/Perl/Website_Promotion/Recommend_Site/
Hostscripts http://www.hotscripts.com/PHP/Scripts_and_Programs/Site_Recommendation/index.html
3. Rank well in the search engines (organic search results, not the pay per click). SEs can be a big source of traffic. The key is to create the best content in your niche. If you have good content, other websites will gladly link to you and offer your site as a resource to their audience. Check the on-page factors and be sure to get linked from authority sites in your topic area.
If you are going to read only one piece on search engine optimization, I suggest you read Brett Tabke of WebmasterWorld.com’s “Successful Site in 12 Months with Google Alone: 26 steps to 15k a day.” http://www.webmasterworld.com/forum3/2010.htm
SEO for Google http://www.powerhomebiz.com/052006/google.htm
SEO for Yahoo! http://www.powerhomebiz.com/052006/yahoo.htm
SEO for MSN http://www.powerhomebiz.com/052006/msn.htm
Tying It Together: SEO For The Big Three http://www.powerhomebiz.com/052006/seo.htm
4. Send out press releases. While outfits charge as much as $650 per release, there are free press release submission places on the Web. Press releases allow you to (a) attract media attention; (b) get more back links to your website without sending each website an email request; and (c) get more visibility especially if your press release gets in Google News or Yahoo News. My website (see my profile) accepts free press release submission (no strings attached!)
5. Submit articles. Write articles and submit them to websites accepting author submissions. You get exposure for your business; establishes you as an authority in your field, and allows you to get backlinks for your website. If 50 websites publish your article and it contains a link back to your website, then you easily get 50 links from a single article. The more links you have, the greater your chances for increasing your search engine rankings.
Here is a comprehensive list of where to submit your articles http://answers.yahoo.com/question/;_ylt=AhzreGmnCUicOoyedqypscUjzKIX?qid=1006022407481
6. Improve your conversion. Getting visitors is one thing; getting them to buy your products is a whole different story. Read the article “10 Ways to Convert Visitors to Buyers” http://www.powerhomebiz.com/072005/conversion.htm for tips on how to improve your conversion rates.
7. Post a link to your site for free where it is allowed (always read the Terms of Use). Examples are:
Craigslist http://www.craigslist.com
Google Base http://base.google.com
Classifieds for Free http://www.classifiedsforfree.com/...
Text Link Exchange http://www.txtswap.com/
Recycler.com http://www.recycler.com/
Yahoo Classifieds http://classifieds.yahoo.com/
US Free Ads http://www.usfreeads.com/
Tags: Web Marketing
301 Redirect
301 redirect is the most efficient and Search Engine Friendly method for webpage redirection. It’s not that hard to implement and it should preserve your search engine rankings for that particular page. If you have to change file names or move pages around, it’s the safest option. The code “301″ is interpreted as “moved permanently”.
You can Test your redirection with Search Engine Friendly Redirect Checker
Below are a Couple of methods to implement URL Redirection
IIS Redirect
- In internet services manager, right click on the file or folder you wish to redirect
- Select the radio titled “a redirection to a URL”.
- Enter the redirection page
- Check “The exact url entered above” and the “A permanent redirection for this resource”
- Click on ‘Apply’
ColdFusion Redirect
<.cfheader statuscode=”301″ statustext=”Moved permanently”>
<.cfheader name=”Location” value=”http://www.new-url.com”>
<?
Header( “HTTP/1.1 301 Moved Permanently” );
Header( “Location: http://www.new-url.com” );
?>
<%@ Language=VBScript %>
<%
Response.Status=”301 Moved Permanently”
Response.AddHeader “Location”,”http://www.new-url.com/”
%>
<script runat=”server”>
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = “301 Moved Permanently”;
Response.AddHeader(“Location”,”http://www.new-url.com”);
}
</script>
JSP (Java) Redirect
<%
response.setStatus(301);
response.setHeader( “Location”, “http://www.new-url.com/” );
response.setHeader( “Connection”, “close” );
%>
CGI PERL Redirect
$q = new CGI;
print $q->redirect(“http://www.new-url.com/”);
Ruby on Rails Redirect
def old_action
headers["Status"] = “301 Moved Permanently”
redirect_to “http://www.new-url.com/”
end
Redirect Old domain to New domain (htaccess redirect)
Create a .htaccess file with the below code, it will ensure that all your directories and pages of your old domain will get correctly redirected to your new domain.
The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)
Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]
Please REPLACE www.newdomain.com in the above code with your actual domain name.
In addition to the redirect I would suggest that you contact every backlinking site to modify their backlink to point to your new website.
Note* This .htaccess method of redirection works ONLY on Linux servers having the Apache Mod-Rewrite moduled enabled.
Create a .htaccess file with the below code, it will ensure that all requests coming in to domain.com will get redirected to www.domain.com
The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)
Options +FollowSymlinks
RewriteEngine on
rewritecond %{http_host} ^domain.com [nc]
rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]
Please REPLACE domain.com and www.newdomain.com with your actual domain name.
Note* This .htaccess method of redirection works ONLY on Linux servers having the Apache Mod-Rewrite moduled enabled.
How to Redirect HTML
Please refer to section titled ‘How to Redirect with htaccess’, if your site is hosted on a Linux Server and ‘IIS Redirect’, if your site is hosted on a Windows Server.
Tags: Uncategorized
Tags: package design
Tags: branding
All of us as website owners and search engine marketers have always wanted to know “How exactly Google sees our website”. This information can be found in Google support tries to help webmasters diagnose errors and enhance their website’s search engine visibility.
Google webmaster tools list the preferences on how website listings are handled.
Before you can start with any of these you will to sign up for your Google account. After signing up log into the following page https://www.google.com/webmasters/sitemaps
Verification of Ownership
You will have to verify your ownership of your website that you would like to control using Google webmaster tools. You will have to enter the URL of your website and follow the instructions provided to verify the ownership of your website. This can be done in two ways, one is by uploading a blank HTML file with a specified name and the second method is by pasting a Meta tag provided by Google webmaster tools in the Header part of your homepage. Once you upload your blank HTML page or add the Meta tag, click verify.
This will allow Google to verify quickly that you are the authentic owner of the website that you are trying to control using Google webmaster tools.
The Overview
Once verified, you will be able to see your website’s profile in the Google webmaster tools control panel. You just need to click on the URL of your website whose profile you would like to view under the Manage section. This will take you to the overview page. You will find highly crucial information on your website that will give you great insights into the nature of your website’s traffic. You will also find links to specific webmaster tools in this section.
Diagnostics Tools
The function of these tools is to tell you whether there are any errors in your website as seen by Google when it crawled your website. You will normally find errors such as 404 errors, pages not indexed by Google robots.txt and other indexing issues.
Some of the common types of errors can be listed under the headings such as HTTP errors, URLs not followed, URLs disallowed by robots.txt, not found, URLs timed out, and Unreachable URLs. To ensure that your website is without any error, you must regularly check your diagnostics reports.
Statistical Tools
Google has amazing statistical tools that you can use to improve your marketing efforts. Google webmaster statistical tools include the following:
Top Search Queries
Every webmaster would like to know the top search query through which visitors get in to their website using Google Search. You will be able to see list of keywords for which the highest number of visitors came to your website. One of the most important pieces of information that you will find here is that your position in the SERPs for a particular keyword. There may be minor variation in the indicated number and actual position however, this will get better with time.
What Googlebot Sees
This is one of the best ways of learning how other websites link to your website . You can find three sections here.
- Phrases used in external links to your website,
- Keywords in your site’s content
- The actual content on your website in terms of keyword density
Here you will be able to learn about your website’s pagerank strength. You can see your pages categorized in terms of low, medium, high and not yet assigned. Most often you will find your pages categorized under low but do not get discouraged. Another useful piece of information here is pagerank information of specific pages, which is updated on monthly basis. This is one of the best ways of measuring the effectiveness of your specific link building efforts.
Index Stats
Here you can find advanced Google queries on your website that used some search operators. This includes the following operators site:, link:, cache:, info:, related:, etc.
Subscriber Stats
This particular tool will help you find the status on your RSS feed subscribers. This is one of the new additions to the toolbox and is certainly useful when you are using feed management systems.
Links
This is where you can learn about your website’s internal and external link popularity status. Though this tool is a very limited in terms of the information provided, it will certainly be helpful information when you are trying to work on your website’s online exposure.
Google Sitemaps
This is one of the basic and oldest Google webmaster tools. In fact all the Google webmaster tools were built around Google sitemaps tool. This will help you to manage your sitemap files that are Google specific. You will be able to upload XML files, which will help Google to crawl your website completely.
Tools
The tools area in Google Webmaster Tools is the most resourceful sections. You can find the following tools under this section:
Analyze robots.txt
Robots.txt is a protocol meant for googlebot, which will tell Google how they should go about crawling your website. You can give instructions to googlebot in this file. You can control the crawling of Googlebot to the desired parts of your website as well as block the search engines from crawling certain parts of your website.
Analyze robots.txt tool will help you check the validity of your robots.txt file. Even a small mistake in this file can cost your website’s ranking dearly. So better take advantage of this tool to ensure that everything is in place.
Site Verification Management
This section will help you change the options on your site verification. You will also be able to secure your website. This is highly helpful when you are using a SEO company to handle your webmaster tools. Once you terminate their services with them, your information will still be available to them. Using this site verification area, you can block unauthorized entries to your website.
Crawl Rate
Here you will be able to get Google’s activity on your website and their indexing frequency. If you really want to benefit from this section, you will have to select adjust crawling speed feature. Here are few useful tips on how you can benefit from the activity graphs.
You will have to remember here that will be limited to a 90 day span. You can see variations in the graph based on your website update frequency. Check the graphs closely and compare it with your website activity. You will also be able to measure the effectiveness of your link building efforts. You can see spikes in the graph if your link building efforts have really been effective. The aim here is to make sure that Google is visiting your website frequently and interacting with your website actively. This is important to get new content in your website indexed fast.
Set Preferred Domain
If you do not want your page rank and the effectiveness of your link building efforts diluted between www.yourdomain.com and yourdomain.com, you need to tell Google which will be your canonical URL or which will be your preferred URL. This will have defi nitive impact on your website’s ranking. Google will display the right URLs based on what you have instructed it in this section. Never ignore this section; not many people realize the importance of this section.
Enhanced Image Search
One of the ways of enhancing your website’s online presence is by getting yourself included in the image search. When you select enhanced image search you will be able to gain control on labeling images in your website. You can also make use of Google image labeler to help improve image relevancy. You can find Google image labeler at http://images.google.com/imagelabeler.
Remove URLs
If there are pages removed in your website in your latest update, you should remove those pages from Google indexing. You will be able to do this easily using the remove URLs tool.
Concluding Remarks
When you invest enough time understanding each of the tools available in Google webmaster tools, you will certainly be able to benefit a great deal. All these tools after all are F.R.E.E. for use. Google even allows users to download important information regarding their website. You can set automatic download schedules to have your statistics downloaded. The best download schedule suggested is once in 60 days as Google provides information once in 90 days. When you set 60 days download, you will have overlapping data to interpret the information better.
The data gathered here can be used in multiple ways to gain valuable insights regarding your website’s online performance.
Tags: Google tools
Are you looking to expand your portfolio? Maybe you want a fresh start in a new niche? Or maybe your website isnt the type of website that generates sales … Maybe you dont even own your own website yet …
Mesure your website cost by http://bizinformation.org/us/. Very useful tool for North American web developers!
Tags: web design
Ballistic Publishing and Philip Straub take the fantasy graphic novel to the next level with their latest release, Utherworlds.
Utherworlds combines a fantasy novel with written and spoken languages, maps, and stunning paintings in a large format that shows Phil Straub’s artwork like never before.
Website:
Skins:
About Phil Straub
As an Art Director, Philip Straub has worked with some of the biggest names in the gaming industry including: Vivendi Universal; Electronic Arts; NCSoft; and Big Fish Games. Philip’s work has appeared in over 30 childrens’ books, and he has co-authored three digital art tutorial books including d’artiste Digital Painting.
In the entertainment industry he has worked with many clients including: Mattel; Fisher Price; Disney; Universal Studios; Warner Bros; DC Comics; and Knowledge Adventure.
He also teaches an annual online Concept Art class to students around the globe. Philip is a founding member of The CGSociety and regularly contributes to the illustration and digital art communities by judging illustration competitions including: The Society of Illustrators; PAINTER; EXPOSÉ; and CG Challenges hosted by The CGSociety.
Philip’s licensed designs appear on a variety of products including: books; games; wall murals; scrap-booking; gifts; stationery; apparel; and textiles. As a freelance illustrator his work has appeared on: broadcast media; book jackets; CD and magazine covers; trading cards; feature films; and advertising campaigns.
Rich illustrated books:
Tags: Digital art · creative work
