To capitalize on the earning potential of web design industry there has been surge in the number of custom service web design providers. However, only a handful of freelancers are able to sense the change in the industry dynamics and add value to their creative ideas during implementation.

In order for you to stay competitive, effective, and yet innovative with your web designs I propose the following ten guidelines:

1. Design Based on the Customer’s Requirements

More often than not, the web designer concentrates on delivering a low quality site skeleton due to budget constraints.

However, this tactic often backfires since the designer leaves out vital aspects of the customer requirements. The best way to understand the customer is to discover their needs and address them during the design process.

Design fiascos are an aftermath of a poor interpretation of business requirements and sometimes a lack of technical competence on the part of the designer. Therefore, it is imperative that you to brush up on both technical skills and soft skills.

2. Factor Google Panda into Your Design

Design components do not stand alone. In the future, freelancers should align their work to Google Panda standards.

Google has recently included page load speed as one of the factors that determines the page rank of a website. Using heavy design components can slow Http request-response times considerably. This, in turn, may negatively impact the rankings of the site.

So, whether you like Google’s big brother attitude or not–as a designer you should comply with the latest policies of the search engine giant.

3. Work in Sprints–Use the Agile Scrum Approach

Rather than adopting the big bang approach using the conventional SDLC waterfall implementation model, try out agile development.

Why not deliver creative design in a sprint of two to four weeks with dedicated and skilled resources? Agile development is the latest method used by freelancers and customers who want faster results.

4. Manage Review Schedules

The majority of freelance professionals fail to employ an active review mechanism during the course of the project. In order to achieve 100% customer satisfaction and achieve cutting edge design, designers should include a review mechanism and encourage their valued customers to keep up with the review cycle.

5. Benchmark Your Designs

Do you benchmark your creations with the best in the industry?

If not, then you are probably delivering designs that don’t meet the mark. More often than not, without benchmarking, you’ll find that your customers complain about lack of features. As a best practice you should benchmark against innovative design standards to boost business productivity.

6. Do Not Reinvent Everything

Are you the “Apple Computer” of your field?

If you answered “yes,” note that even Apple does not reinvent everything. Standard design templates should be used and scaled up (or down) to meet the customers’ specific requirements. Not all projects require that you start from scratch.

7. Keep Your Pricing Competitive and Attractive

One of the major factors that will drive the demand for web design services in 2012 is the pricing component. The best league designers have already started offering repeat business discounts and freebie deals. Is your freelance business proposal to prospective customers competitive?

8. Maintain a Web Presence

Have you done work for customers, but don’t yet have a website for your own design business?

Not having a website can be the biggest blunder that you can commit as a freelancer. Having a web presence adds credibility to your business and provides you with an opportunity to showcase your portfolio.

9. Learn More with Social Media

If you want to keep up with the latest trends for web design, there is no better avenue than Facebook or dedicated design forums. Ideally, you should follow the best designers in the industry to understand where the industry is moving.

Additionally, it helps to create a dedicated Fan Page to develop hot leads.

10. Don’t Start from Scratch

The design arena has changed radically in the last few years.

Taking an idea from concept to creation can take less time too. There are ready-to-use design frameworks, vector designs and templates available for free (or at competitive rates). These should be leveraged by designers.

Before creating something new from scratch, check to see if there is a tool or template that you could use to save time.

Your Turn

What web design guidelines would you add for 2012?

Image by Francesco Rachello

This then impacts on your next project, since when the copy eventually does show up, you need to revisit a job you should have put to bed weeks ago.

In terms of your income, it can have a negative impact too since you may have agreed not to send out that final invoice until the website was live, or the job’s gone to the printers.

In an ideal world, before we even launch Photoshop or Illustrator, we’d have a nice Word document sitting open containing all the copy we need. Unfortunately, in 15 years of working, this has never happened to me.

So, how do we get that all important Word document from our dear clients? Here are a few pointers:

1. Explain That Content Can Influence Design

Have you ever laid out a homepage design where your introductory placeholder text sat nicely alongside a lovingly chosen photo, in perfectly balanced harmony? You show the designs to the client and they love it.

Four months later they provide an entire page of A4 with their “welcome to my website” message. You explain that on the designs you’d allowed for something short and snappy, three or four paragraphs max–but they insist they need to list all these other services that they completely failed to mention at your original meeting.

The result: you need to revisit the design. Drastically edit their text. Or, bite the bullet and put their life story in there, which then knocks the entire page out of whack.

With the content up-front, this wouldn’t have been an issue.

2. For SEO Purposes, Timing Is Crucial

Clients love this. Any mention of SEO and you’ll put the fear in them. Explain that time is of the essence, and there could be any number of competitors out there, launching their carefully crafted sites in a direct attempt at winning the race to page one and edging your client to the sidelines.

Come on! Type! Faster! More keywords! Go!

3. Issue Contracts with Fixed Dates

If you issue contracts to your clients, it should list all the delivery milestones. By setting a date for content-delivery you’re more likely to receive it on time. If you have a clause in there regarding missed deadlines and how this may affect the ultimate delivery date of the project, this can usually prod them into action. Explain that you’re a busy person and you will have to move onto the next project if they can’t deliver on time.

The client will always prefer to see the job completed before handing over the money, and if you have a final invoice date set in the contract, this should prompt them to keep their side of the bargain.

4. Offer an Incentive

Everyone loves a discount or a freebie. Try to encourage your clients to provide copy on time by offering them something in return. Explain that it helps not only your workflow, but your cash flow too, and dangle them whatever carrot you can.

If you offer hosting, you could give them the first year free, or at 50% off. Or what about an optional extra that was on their project “wish list,” but out with their budget–it might be worth spending a couple of hours on this rather than spend the next four months sending out reminder emails.

5. Hire a Professional

Finally, the simplest (and best) option. Ask them to hire a freelance writer and explain the advantages:

• The client won’t have to stress over the copy
• They’ll get text that works far more effectively for their business
• It’ll make them look bigger, and cleverer

They’ll be putting food on the table of another freelancer, and you won’t have to cringe at another introductory paragraph that ends–“Why not let (insert company name) provide your (insert product or service) today?”

Your Turn

I had hoped to make this a “10 ways…” list, but without including threats of violence, or emotional blackmail/breaking down in tears, I’d struggle to make up the numbers.

Any further suggestions would be very welcome!

Image by Charles Williams

1. Provide or Rasterize Your Fonts

Let’s face it—the likelihood of a developer sharing all the same fonts as you is about the same as finding a unicorn in your liquor cabinet (before the liquor was consumed, friends). For any text that will be part of an image or graphic, it’s usually safe to rasterize the text. For text that will likely be formatted as HTML, the best option is to provide the fonts separately so the developer can change or copy the text if needed. Finally, if you have used a font that will be embedded into the code, be sure to provide the code or a link to the code so developer has access to that as well.

2. Create Seamless Background Tiles

Unless your background is a solid color, your developer will likely attempt to repeat an image across the background to expedite loading time. The problem is, if a background design has any texture at all, the tiles may have seams, giving the site a very 1995-esque appearance. Save them the headache and create your own seamless tile background.

After you create the tile, use it in your design by placing and repeating it. It’s important to do this before you send the file to your client so they see a close replica of what the final output will look like.

Finally, include the tile in the files you send to the developer.

3. Develop a Style Guide

If you haven’t been creating style guides, you will probably find that it is just as useful to you (and others on your design team) as it will be to your developers. Take the guesswork out of styling the site by creating a simple guide showing the hierarchy of headers, body text, and links, at a bare minimum.

Style guides should also include a color palette (with hexadecimal values, please). With a guide in hand, developers can jump headfirst into coding CSS, rather than muddling through your design and making guesses.

4. Include Rollovers

This isn’t something you need to (or should) depend on the developer for—it is, after all, your design!

For each menu or button, include a visual for what it should look like in the unused state, rollover state, and active (or as it is being clicked) state.

The illustration to the left is one example of what this could look like.

5. Organize and Name Your Layers

It cannot be emphasized enough how important it is to give each layer a meaningful name. Clean up the layers palette by grouping major elements into folders, and arrange everything in the same order as you would see them if you were scanning down the page of the design.

At the topmost level, the header, main content, side column, footer, and background should be visible, plus any other major sections of the site. It’s also wise to include each page as folder within the main section, rather than as separate files altogether—that way, if the header changes, it only changes in the one file and you don’t have to make the change on every other page (and the developer doesn’t have to guess which version is correct if you didn’t make the changes perfectly across all pages).

6. Clean It Up

Clear any guides that wouldn’t serve a purpose for the developer, and delete any layers that will not go into the website. Also make sure the file name itself isn’t a mess (website-version6-final-090211-v2 can be replaced with something simpler like website-final). Your developer will appreciate the time it saves from not having to wade through unnecessary elements to get what they truly need from your design.

Your Turn

These are just a few things that can make your developer’s job (and yours, in turn) much easier. What are your tips? Feel free to share them in the comments.

Images by Mandy Barrington

As the battle for rankings in Google’s search results is growing, many web designers are losing focus on the essence of being a designer.

The path to achieving a design that would express beauty is now being put in second place to the path to good search engine results.

Exceptional web design requires ingenuity and technical expertise. It’s important to develop a site that is both results-driven and appeals to the masses. Yet, creating a visually appealing website is only half the battle in the world of Internet commerce. The website must also actively encourage website traffic through link building, web crawlers and other search engine optimization (SEO) techniques. Not to mention, the website must be compatible with all major browsers, as well as, mobile browsers. Whether the user has Flash or HTML5 capability, the website must still function properly.

Achieving all of these requirements is no small order for a website designer. Planning is essential to exceptional design. Web designers must consider every aspect of web design and anticipate their customers’ navigational behavior to create a website design that will attract visitors and convert sales.

The question then becomes, “How can web designers successfully accomplish this goal?” This article will review some of the basic aspects of website design to help companies appeal to the masses and still increase revenue for their clients.

Where Are All the Web Designers?

A simple question is–what has become of web designers?

Do you think that a potential client searching for a designer and looking at someone’s portfolio is actually looking for someone to design their site? Of course they are! So, there’s no need for you to keep telling them that you design websites. Instead, tell them why you do it. Change your message so as not to sound like every other freelance designer out there.

People visit your portfolio, not because they want to know whether or not you design websites, but because they want to see visual images of what you have done. They know what they need and they need you to give it to them.

Also, remember that the success of your designing career does not hinge on your website alone. Word of mouth, reputation and the quality of your work are the strongest sources of clients and it all comes down to you. Keep in mind that you need to have a brand, and your brand is your work.

Let’s now talk about some basic web design practices that tend to be forgotten by the “experts.”

The Need for High Usability

SEO techniques and link building drive website traffic to the site, but once the visitors land on a page, it is the designer’s job to entice them to stay and look around. What are the components of a highly usable website? Here are nine such components:

1. Capture the Audience. The design must capture the user’s attention when they land on the page. At first glance, they should know what the company is promoting and be able to find the most important pieces of information quickly.
2. Keep the Content Simple and Straightforward. The most important information should be readily available. Users should be able to scan the page and find the content easily without reading deeply. Good formatting is essential to keeping the reader’s attention.
3. Include an ALT and Title Attribute for Images. A descriptive ALT attribute and title attribute will allow visitors to navigate to the page they are interested in without waiting for the entire page to load.
4. Leave Text Outside Images to Attract Search Engine Spiders. Text inside images is not detected by search engine web crawlers or spiders. Include text outside the images to attract visitors to the site based upon relevance to search topics. Additionally, many web surfers turn off the images in their web browsers and therefore, will not be able to view the catch phrase or word that may capture the attention of the user. Design for every type of user, and your website will attract more visitors.
5. Ensure that All Links are Working and Intuitively Placed. Ensure that all the links are placed strategically placed on the website. The navigable links should describe the current location of the visitor, the previous location of the visitor and other options for the visitor on the site.
   Ensure the links adequately describe the information connected to the link. CSS may be used to emphasize the links so the user can easily spot the link on the page. Include text links and a text based site map to help lost users find their way on the web site. Text-based site maps are also important in search engine optimization, because web crawlers can easily pick up keywords from site maps. Repetition on each page is instrumental. Depending upon the link building system, there is no way to determine what page the visitor will land on first. Ensure that the visitor can easily navigate throughout the website, regardless of their landing page. Include a link to the home page either through the logo or elsewhere. The links should be consistent and in the same location on every page.
6. Include a Site Search Box. A search box will help navigators find the information they are seeking easily. Include the search box to increase the usability of the website.
7. Increase the Load Speed of the Website. While catchy graphics will capture an audience, they will also deter an audience if the page takes too long to load. Many visitors will navigate to your competitor’s page while they are waiting for yours to load. In the time it takes your website to load, your competitor has already won your visitor’s business. This is not a good strategy.
8. Use Web Crawlers and Spiders to Increase Traffic. Web crawlers and spiders are used by sophisticated web sites to find links to other relevant websites on the web. These spiders scour the web and constantly build links to improve the search engine research position (SERP) in Google’s search engine. Linking to relevant, high traffic websites will increase your company’s chances of improving their SERP. Diversification of the websites your company links to will also improve your SERP. Blogs, social media websites, company websites, community forums and other sites are all considered fair game for link building. This is a continual process that must be monitored regularly to maintain a high ranking in Google. These links should be natural and relevant to be within the guidelines of White Hat SEO techniques. The better and more relevant your links are, the higher your ranking will become in a search engine, such as Google.
9. Ensure Your Keyword Density is High. Keyword density is also essential to increasing web traffic and creating relevance in Google’s search engine. Web crawlers also search for relevant keywords during Google’s searches. The more relevant your keywords, the higher your web page will become.

Make Your Website Design Work on All Platforms

Unfortunately, the only way to ensure your website is cross-compatible on all platforms is to test it on as many browsers as possible. The most popular browsers, currently, are Internet Explorer and Mozilla Firefox. With Internet capability on mobile devices, designers also have to design for these devices.

The three main web design technologies available are:

• HTML
• Cascading Style Sheets (CSS)
• JavaScript

Each is displayed differently by browsers. Websites may load perfectly on one browser and may appear disorganized on another browser. The version of a browser may also affect the loading capability of the website. Ensure compatibility on all web browsers to avoid deterring visitors to your site.

Use an HTML validator to ensure that all of the coding is correct. This will aid in compatibility issues. A validator may be found at http://validator.w3.org. If the code is correct, the website should be optimized to fit multiple browsers. The validator will inform the browser of the version of HTML the site is using.

CSS technology can lead to some web browser compatibility issues. This technology tends to truncate the website as it is viewed. CSS is desirable because this technology does not cause browsers to crash.

Flash often impedes the loading of some websites on computers that do not have this capability. For instance, the new Apple iPad does not feature Flash. A website designed with Flash will probably not load properly. Always design a non-Flash version of the website for users that do not wish to install the plug-in onto their computers. Additionally, recognize that search engines will not track links on a website created with Flash technology.

Most mobile devices require the most rudimentary websites available. To load a website quickly on a mobile device, there should be no use of frames, graphical links or high resolution images. Minimize the graphics for faster loading on mobile devices. Scripting, pop-ups and complex form fields are all difficult to navigate on a mobile device.

Create your website for the lowest common denominator, the mobile device, to improve the usability for all users. Test the websites on actual devices, instead of emulators, to ensure the ease of use of the website. Blackberry, Android and iPhone are the most popular platforms that companies should test first.

Conversion of Flash to HTML5

Because of the increasing popularity of smart phones, clients are challenged to design eye-catching web designs for both the computer and mobile devices. Flash was the primary way to create a visually appealing site as many web designers have done for Nike, Gucci and Coca-Cola. Flash intensive sites, however, do not work well for mobile devices. Thus, HTML5 was created to fill the void.

There are several tools available to aid in the conversion of Flash to HTML5. Two are briefly reviewed below:

• Adobe. The tool allows web designers to export Flash CS5 animations into HTML code, HTML5, Scalable Vector Graphics (SVG) or other tags. The code will perform as though it was still flash but it will be rendered directly in the browser. Since most browsers support HTML5, the website becomes virtually universal.
• Google Swiffy. Google Swiffy also allows designers to convert Flash to HTML5. With this software, companies may design websites with Flash content without requiring a Flash Player. This software has been proven to work for Chrome, Safari and iPad applications. The application will not convert all Flash content. However, simple animations and ads will be converted easily.

Your Turn

Though there are many steps to exceptional website design, clients that pay attention to all aspects will build a website that will attract customers, retain customers and convert sales. After all, isn’t it that the reason why you are developing a website?

What design tips have I forgotten? What tips would you add?

Image by Danard Vincente

As such, when creating an identity for your freelance business, care must be taken to create a logo and brand that portray your unique business mission. While all elements of your business’s design must be chosen with care, few are more important than the colors you use. Here are six tips for choosing the best colors for your business’ identity.

Preceding image by higetiger

Start with Questions

Before diving into the color selection process, it can be helpful to ask yourself the following questions:

• Which colors am I naturally drawn towards?
• Are there certain colors that can represent my design niche the best?
• Which colors would I prefer to avoid?
• What do I want the identity of my freelance business to say to my clients?
• What is the mission of my design work?

By asking these questions, you can begin narrowing down the list of color options to those that are most suited for your design niche. People are instinctively drawn to certain colors and, by selecting those to which you naturally migrate, you’ll be off to a solid start.

Preceding image by The 5th Ape

Know Your Competition

In the freelance world, it’s difficult to size up your competition since the market is so vast. However, if your freelance work is primarily focused within one community, scope out your fellow freelancers from that community. It would be unfortunate to accidentally develop a business image similar to your top competitors. This can be avoided with a little research.

It can also be helpful to research the business identities of those freelancers whose work you admire. Often, the best way to learn something is to follow the lead of those at the top of your industry. While you shouldn’t blatantly copy their identities, you can learn from the elements that are working well for them and incorporate those color principles into your identity. The business cards of Accentuate and Magics Friends show how effective the combination of great designs and proper colors can be.

Know What a Color Says

Each color stirs particular emotions in people. As such, care must be used to not choose colors that stir negative emotions in your potential clients. Colors such as orange and red are sometimes viewed as risky options since they can provoke thoughts of anger and lust.

Many online tools are available to learn how others associate colors with words. Cymbolism is one such tool allowing you to vote on color and word combinations and view the results submitted by others.

Understand Cultural Differences

If you serve an international market with your freelance work, you must pay close attention to differences in cultural color symbolism when using colors in your business materials. While white is a symbol of peace and hope in the Western world, it can mean something very different to other cultures. Many online charts are available to assist with color symbolism to avoid a cultural blunder when expanding your freelance work to international markets.

Mix It Up

When choosing a business color identity, you aren’t constrained to only one option. Instead, create a full color palette with your top choices. By doing this, you may find the perfect way to implement several colors into a streamlined business image.

However, it’s important to exhibit caution when using multiple colors for your logo and other elements. While, independently you may be drawn to particular colors, when combined those colors may produce an unexpected negative result.

Preceding image by fdecomite

Test Your Color Choices

As a responsible freelancer, you would likely never send your designs to a client without first rigorously editing them. Therefore, your freelance identity shouldn’t be officially adopted, nor should the business cards be sent to print, until you’ve tested your color selections.

Send the options to friends and fellow freelancers for feedback. If the responses are encouraging, it looks like you’ve got a new business identity. However, if the responses are mixed, be prepared to revisit the coloring board.

When testing your color choices, pay special attention to such things as how they’ll be interpreted by the visually impaired. Color-blind audiences view colors very differently than others so you must be conscientious of these differences.

Colors are the backbone of every great design. They ignite emotional responses in viewers and can move people to action. Considering the immense power that colors hold for you as a freelancer, great care must be taken to use them appropriately for your business identity. By properly selecting colors, you can create an enduring identity that will portray your freelance mission exactly as you desire.

Preceding image by jikatu

Your Turn

What colors did you choose for your own freelancing website and why did you choose them?

It is worth it to pay as much for development as for the actual design itself. Here are eight web development mistakes that could be costing you business.

1. Slow Loading

One of the first things a visitor notices about your site is how fast it loads. This is especially important now in the age of mobile browsing and mi-fi setups. When you’re stuck with a slow loading site, it can be tough to diagnose (I was once “graced” with this problem myself). Here are a few things you can look at to speed up your sluggish site:

• Images – Do you use a lot of images? Are they web optimized? Try using something like Yahoo’s Smush.it to see if you can compress them some more.
• Database Calls – If you’re using a CMS, it’s possible that it’s calling to the database way too many times, making your site take longer to load. Try going through the code and replacing as much as the dynamic content as you can with static. Does everything really need to be updatable by the CMS?
• Server – I was once with a certain host that caused my site to take over 17 seconds to load! They tried to tell me it was my install of WordPress and the theme I was using, but when I finally switched hosts, the site ran in under two seconds. It seems they simply stuff too many people on one server with too little power.
• Javascript Errors – Another biggy, if you have JS errors, or a site you’re using to host your JS is done, this can make the page almost unloadable. Make sure something like a Tweet or Facebook button doesn’t hold up the rest of your site if their API is down.
• CSS/HTML – Is your code bloated? I’ve seen sites that have had thousands of lines of code that could’ve been accomplished in just a few hundred. Take a look and see if the code itself needs to be pared down, as well as running it through a minifier.

2. Broken Mobile Experience

While the computer is still the #1 way people access the internet, mobile is quickly catching up. New toys like smartphones, tablets and even mobile powered laptops and netbooks are quickly being used in place of a full-sized computer. Your visitors no longer view your site in 1024 or higher resolution, you’re now faced with dealing with a bunch of smaller resolutions.

While I don’t believe every site needs an app, or even a mobile web site, your site needs to at least look and function probably in the mobile world. If it works just as well on these devices as it does on your computer, you’re good to go. If not, you’re missing on a lot of traffic and potential business.

3. All Javascript–No Static

You’ve probably heard about the recent blow up of a popular network–after launching a new version of their site, one error on one like of Javascript caused the entire site to come up completely blank for ever user. Why? The simple version was that they decided to use AJAX and JS to load ALL of their content. Which also meant that devices that have JS turned off by default (some Android devices) can’t see the site at all, even when they fixed the bug.

4. No Testing Needed…

One of the biggest mistakes I see clients make, is that they launch the site before they’ve fully tested it. Contact forms get sent to nowhere, the gallery is broken, and the menu still has address hash-tag placeholders. This not only deters visitors, it also makes your company look like amateurs. Please make sure to fully test the site before you launch – it helps to grab a couple of your friends and let them browse the site as well. You’ll be surprised at what kind of bugs they’ll come across.

5. Invalid HTML

A lot of developers still argue whether it’s important to validate your HTML or not. I say, why not? There’s no excuse not to validate, and validation catches a ton of bugs before they make it into the live version. Especially when it comes to making the site consistent across browsers, validating can be a major, major help. Plus, it really doesn’t take any good developer extra time to do, and it means your site is less likely to have issues when browsers and code standards are updated.

6. Tables

I can’t believe that in 2011 I still have to tell people to stop using table-based layouts. But I do. Don’t ever, ever, ever use them. Tables are meant for tabular data, not layouts. Not only will you waste a ton of time trying to get the site to conform in all browsers, you’ll have unnecessary images from the slice tool, bloated code and other nasties. I repeat, don’t use tables!

7. Naughty SEO Tactics

Some people are obsessed with SEO, but in the real world, SEO really isn’t that big of a deal for most companies. The truth is, there are billions of web sites out there, Google is changing things all of the time, and most visitors probably won’t find you through search.

So that being said, please stop using bad SEO tactics. It’s one thing to optimize your site with good keywords, it’s entirely different to stuff every crevice with them. Don’t cram keywords in the footer and sidebar. Don’t just randomly throw them in your content. The key to good SEO is making the content real and relevant. It should happen without you really trying.

8. Forgetting About Accessibility

One of the key things that people forget, is that everyone who browses the internet isn’t exactly like them. There are blind people, deaf people, people with color blindness and more who want to navigate on your site. If you forget to put accessibility items like alt and link title tags, you can be missing the traffic from disabled persons. Your site is awesome and you want everyone to be able to experience it, right?

Your Thoughts

What are some of the worst development mistakes you’ve seen people make? How does it affect normal users?

In this post, I will share with you some of the best Chrome extensions I have found useful when designing and developing websites, listed in alphabetical order.

1. Aviary Screen Capture

Aviary Screen Capture lets you take a screen shot of any web page. Use the Aviary.com applications after you’ve gotten your screen shot to edit that shot from within your browser. The basic image editor lets you mark up (by drawing arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image.

Features include:

• Save to desktop, host online, or edit in other Aviary apps
• Captures instantly
• Screen capture of the visible portion of all web pages and images
• Capture entire web pages
• Add visual notes like arrows, text and highlights to your capture
• Crop your capture
• Resize, rotate and flip your capture
• Smart select and move of captured elements
• Grab color information from the page
• Quick launch six Aviary design tools including image editor, markup editor, vector editor, color palette editor, effects editor & audio editor

2. Chrome SEO

Chrome SEO provides easy access to search engine optimization tools. These tools help you with daily SEO tasks like competitive analysis, keyword research, backlink checks, page rank checks.

3. Chrome Sniffer

Chrome Sniffer allows web developers to inspect web framework / CMS and JavaScript library running on a website. The extension displays an icon indicating the detected frameworks. Currently, this extension detects up to 70 popular CMS and JavaScript libraries.

4. Eye Dropper

Eye Dropper allows you to pick color from any web page or from an advanced color picker.

5. Firebug Lite for Google Chrome

Firebug Lite for Google Chrome is not a substitute for Firebug (unfortunately), or for Chrome Developer Tools. Instead, you should use this tool with these other tools. Firebug Lite provides the rich visual representation similar to that of Firebug with HTML elements, DOM elements, and Box Model shading. Firebug Lite also provides some cool features such as inspecting HTML elements with your mouse, and live editing CSS properties.

6. IE Tab

The IE Tab is available through Internet Explorer and lets you display web pages in a Chrome tab. This extension is great for web developers who want to cross browser test with the IE rendering engine. (This is a Windows only extension.)

7. Instant Image Editor

Instant Image Editor lets you right-click any image or element on a web page with a background image while holding down the alt key (ctrl key on Linux). You can edit the image instantly in a new tab using Pixlr, which is a fast, easy-to-use app that runs in the browser. When right-clicking an element that is not an image, Instant Image Editor will also try to determine whether the element has a background image that is editable.

8. Lorem Ipsum Generator

The Lorem Ipsum Generator generates random “Lorem Ipsum” text using a minimalist and attractive design.

9. MeasureIt!

MeasureIt! lets you use a ruler to get the pixel width and height of any elements on a web page.

10. Pendule

Pendule provides extended web developer tools for Chrome. Use this extension with the built-in developer tools, which include view, reload and disable CSS, view JavaScript, forms editing, view, hide and get information about images, color picker, ruler, topographic view, markup validators and more!

11. PHP Console

PHP Console is an extension for Lagger (lightweight and flexible open-source PHP library for errors/exceptions/debugs handling in PHP) that displays PHP errors/debug messages in Google Chrome console and in notification popups.

12. Speed Tracer

Speed Tracer helps you to find and fix performance problems in your web applications. This extension visualizes metrics taken from low-level instrumentation points inside of the browser and analyzes them while your application runs.

This application helps you understand where time is being spent in your application. This includes problems caused by:

• Javascript parsing and execution
• Layout
• CSS style recalculation and selector matching
• DOM Event handling
• Network resource loading
• Timer fires
• XMLHttpRequest callbacks
• Painting
• and more …

13. Web Developer

Web Developer adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox.

14. Webpage Screenshot

Webpage Screenshot is a fast and simple extension to capture the whole web page. Even long pages are saved in one image file. This extension lets you save PNG/JPG image of any web page with just one click.

Features include:

• Has drawing tools: line, ellipse, rectangle, arrow
• Lets you add text to your screenshots
• Fast Crop your image to desired dimensions
• Start Editing even before image is ready
• Upload and share to Facebook, Twitter, Gmail, MySpace
• Print: Image Sent directly to printer
• Save to HD: The only extension that let you save large images to your Hard Drive
• Can capture local files: Can capture “FILE://”
• Comes with Color Picker: Remembers the last color you used.
• Can capture horizontal websites as well

15. Window Resizer

Window Resizer resizes the browser’s window to emulate various resolutions. This extension is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).

There are three screen types available:

• Desktop (standard; resize the entire window to the specified resolution)
• Laptop/Notebook (same as Desktop, but different icon; makes it easier to scan the resolutions list)
• Mobile (different than the previous two; this applies the specified dimensions to the viewport, not to the entire window, because mobile browsers usually have no borders)

Your Turn

Do you use any of these extensions? Do you use other extensions for your web design and/or development? Which are your favorites and which do you use most often? Please share in the comments below.

Many freelancers I speak to say maintaining a blog is the key to a successful website. Blogs work particularly well if you want to position yourself as an expert in a niche area, because they allow you to focus attention on specialized aspects of your field. This means your website will gain higher rankings for keywords in your area over time, and an increasing number of potential clients will find you through search engines like Google. You won’t get new clients overnight, but you will find you can build your freelance business in a sustainable way over the longer term.

Key Factors for Your Professional Website

To make your website the ultimate client acquisition tool, make sure it:

• Contains plenty of fresh content related to your field, preferably in the form of a blog. This acts as search-engine fodder.
• Has a good network of links to other freelancers.
• Clearly demonstrates your unique professional brand.
• Includes interesting reference material.
• Has a clean, professional design.

Freelancers and Technology

Some freelancers love technology so much, they are happy to spend their evenings installing updates and plug-ins on their website’s content-management system. For others, it is enough to know how to use Microsoft Word and PowerPoint.

The most popular open-source website software among freelancers is probably WordPress.org. It is relatively easy to use once installed and customized with a design template. But, WordPress is primarily a blogging platform, and can require a few adjustments if you want to use it to build a website. WordPress also needs regular updates for security reasons, and this can be complicated and time-consuming.

You can certainly learn how to do all this yourself if you are keen. Let’s face it–learning to use technology is not everyone’s idea of a good time. Thankfully, there are now enough systems out there to satisfy even the most technophobic of freelancers.

The Advantages of Using a Website Builder

Why tweak code when you can drag and drop?

A new generation of website builders has made it easier than ever to avoid getting bogged down in the technological details. Instead of grappling with FTP clients, PHP scripts or endless security updates, just sign up with a provider of your choice and let them do all the hard work for you. All you have to do is customize your new website at the click of a mouse.

Most website builders have a library of design templates that you can adapt in an editor very similar to Microsoft Word. Personalize your new website by simply dragging and dropping the various elements, such as the layout, navigation, images, or even contact or newsletter subscription forms.

Most providers allow you to create (or have someone else create) your own design from scratch using HTML and CSS. So, there is no need to worry about not finding the right design.

And what if you run into technical problems? Providers also offer fast and competent technical support, which is great for beginners.

The Best Website Builders

What are the best website builders?

There are plenty of website builders on the market that are still stuck in the era of Geocities and have yet to wake up to the best features of Web 2.0.

However, I have seen freelancers get very good results with the following providers:

• Weebly or Jimdo. These systems are known for being extremely easy to use and offer an array of features to choose from, including plenty of designs, a blog, photo gallery, video widget, online store, password-protected areas and lots of hosting space. You can go for either a paid account or a free account if you don’t mind ads, although it is probably not a good idea to go for a free version if you are trying to attract clients. Paid plans start from as little as USD $5 a month.
• Webnode. This has a slightly steeper learning curve, but is packed full of professional features such as multilingual website management and powerful search-engine optimization.
• Wix. Another system that allows you to create stunning websites using Flash technology. Artists, models and designers all love these design-rich sites, but they tend to be slower to load and not as easy to optimize for search engines.

Don’t Forget to Check Out Your Provider

It sounds too good to be true… where’s the catch?

It is important to realize that if you chose a website builder, you will be relying on your provider for some time to come. So you need to be sure that the provider will continue to add new features, that the site will load quickly and that they will remain in business.

Take a close look at the company behind the system–no provider can survive on free accounts alone, so how it is financed? Does it release new features regularly? (Tip: check their blog for announcements). What other feedback can you find online?

Nor can you expect the same degree of flexibility or choice in terms of designs or add-ons, compared to open-source systems. Saying that, there are plenty of other external widgets such as surveys, forms or music players that are incredibly straightforward to install.

Why Wait?

If you have been putting off creating your own website, you have no more excuses now: website builders require little technical knowledge and most freelancers find them very easy to use.

There is so much business potential on the internet that every freelancer should ensure that they have a well-maintained website. The sooner you get online, the sooner you can start building your search-engine ranking, gaining a following for your blog and developing your brand online. Just follow a few simple guidelines and I am confident you will quickly and easily attract potential clients from all over the world. Even if you prefer to source your prospects through more traditional channels, having an attractive online presence is always worth it.

Your Turn

Have you used a website builder to create your own website? Or, are you a die-hard WordPress fan?

Leave a comment and let us know what you think.

Image by jeffedoe

But, if you’d like to blow the mind of the freelance designer you so greatly value this holiday season, why not make an attempt to fulfill this wish list? I’ve taken liberty to share with you the 12 gifts most freelance designers only dare to dream of. Enjoy my version of the 12 Days of Christmas:

1st Day: a Consistent and Ongoing Client

Every freelance designer would love to have at least one client who continually brings new projects, keeping a steady flow of work and building a mutually beneficial relationship. The beauty of this gift is that it can even be given to the freelance designer who supposedly already has everything–we can never have too many of these!

2nd Day: Two Days Off Every Weekend

Yes, we want it all: the benefits of freelancing and being your own boss but without the need to work every waking moment, including weekends. What a gift that keeps on giving, not only to the recipient but to their loved ones as well.

3rd Day: Three Revisions and Not One More

It’s pretty standard to offer three revisions on a design for each project, but many freelance designers find themselves tweaking and adjusting the design ‘just a little bit more’ to get it just right. What a refreshing gift it would be to not have to revise the design more than three times, every time! Enough to make any designer let out a hearty, “Ho ho ho!”

4th Day: Four New Inspirations per Month

Creativity can be contrived, and many would even argue that there is nothing new under the sun. If that’s the case, how’s a designer supposed to keep coming up with new ideas? With what amounts to a weekly subscription to fresh and unique inspirations, the lucky recipient of this gift would never have to worry again about getting the creative juices flowing.

5th Day: Five More Minutes of Sleep

The snooze button on the alarm is pretty much everyone’s best–and worst–friend. It allows us to fall back asleep without any worry that we might oversleep, but it also shouts loud and annoying reminders that clients are waiting and there is work to be done. While no freelance designer would complain about having work that beckons, another five minutes of sleep is always a welcome bonus.

6th Day: Six Free Upgrades on Design Software

Design standards and corresponding software change so rapidly, yet every new version of software that comes out forces the freelance designer to choose between staying current and competitive or sending their children to college. Design software suites can cost at least $2,000 with upgrades almost every one to two years costing at least an additional $600 to $1,000. I’d be willing to bet most freelance designers would be ecstatic to only have to pay once.

7th Day: Seven Figures in Annual Income

Yes, I know almost anyone of any profession would not mind a seven-digit annual income, so why not the freelance designer? The truth is that none of us probably anticipates getting rich doing what we love, but we certainly wouldn’t take this gift back to the exchange and returns line.

8th Day: Magic 8-Ball with All the Right Answers

Freelance designing is full of choices to make, and it doesn’t take long in the profession to realize it is built on a foundation of lifelong education, fraught with mistakes, learning experiences and challenges. Wouldn’t it be amazing to have a magic 8-ball that made the decisions so much easier? Fits nicely in a stocking, too!

9th Day: Nine o’Clock Start to the Day

A not-too-distant relative of ‘Five More Minutes of Sleep,’ I am certain many freelance designers would love to rest until nine each morning without having to work until midnight as a result. I honestly can’t remember the last time I slept in until nine–my work day starts at 5:00 a.m. What a beautiful thing it would be to start each day at a somewhat normal hour!

10th Day: Ten Fingers Never Tiring

Freelance designers use their hands all day long. Whether drawing, sketching, typing, or using a mouse, we need fingers that never succumb to arthritis or any other debilitating pain or weariness. For some it’s almost as if our fingers need their own personal trainer and gym just to keep them in shape and build their stamina. Maybe the gift would be a membership to that finger fitness program!

11th Day: Eleven Projects Already Scheduled

I know it would be nice for every freelance designer to be able to look at their calendar and see that eleven (or more) projects are already lined up and in waiting, rather than wondering when the next one will come or having to pound the pavement in hopes of drumming up business. Peace of mind is a priceless gift anyone will cherish.

12th Day: Twelve Months of On Time Payments

Can you imagine it? An entire year of every single client not only paying, but doing it on time? I topped this list off with the most magical gift almost every freelance designer dreams about. What a holiday this would be!

Your Wish List

Do you have other items on your own list that you would love to see under your tree? Please share them in the comments below.

Did you know that by combining specific plugins, you can quickly specialize your WordPress installation or make it incredibly flexible and powerful, without doing any coding?

In this post, I’ll share the best WordPress plugin combos with you.

Unleash the Power of Widgets

WordPress comes with some default widgets for displaying categories, pages and posts, but there are not many settings. What if you want to display the three most recent posts from the top three categories only on certain pages?

Well, thanks to Widget Logic, you can use conditions for displaying the widgets, Widgets Reloaded gives you tons more options to display categories and Query posts will allow you to fins control the recent posts widget.

This combination will allow you to have total control on your widgetized areas. Use the following plugins:

• Widget Logic
• Widgets Reloaded
• Query Posts

Using WordPress as a CMS

Want to use WordPress as a CMS? Then you should use custom post types. And usually when you want a custom post type, you need custom fields as well.

Well, the More Fields and More Types plugins give you an easy to use interface for creating post types with specialized fields that allows you to build any type of website from WordPress.

Use the following plugins:

• More Fields
• More Types

Designing a Total Security Plan

Worried about your site’s security? Well you should be!

But, with this powerful plugin combination, you can really harden your default WordPress install.

Stop hackers from trying passwords, scan your folder permissions and change your database prefix. These plugins will automatically apply security enhancements to protect your website.

Use the following plugins:

• Block Bad Queries (BBQ)
• Login LockDown
• Secure WordPress
• WP Security Scan

Optimize Your Website for Speed

Google now takes into account the loading time of websites to rank them. By default WordPress is not optimized for speed. With these plugins, you can apply the Yahoo best practices for website optimization really easily. You’ll immediately see the difference in loading speed.

W3 Total Cache optimizes the caching and minifying of web pages, while WP Smush.it compresses your images to reduce file size.

Use the following plugins:

• W3 Total Cache
• WP Smush.it

Optimize Your Website for Search Engines

Another part of website optimization is the SEO and analyzing your traffic. With these two plugins from SEO guru, Yoast, you’ll be set to increase traffic to your site!

WordPress SEO is a relatvely new plugin aiming to combine and replace previous plugins from the same author, which means you also get the benefit of needing to install less plugins. It also includes functionality from Robots Meta plugin, which allowed you to control how pages and posts are indexed by the search engines. Plus, you can define SEO optimized titles and meta descriptions for individual posts and pages with a clever preview area that shows you exactly how the meta description will look on the search engine results page.

Use the following plugins:

• WordPress SEO
• Google Analytics for WordPress

Add Some Interactivity

Engaging and interacting with your visitors is paramount, and with these plugins you can allow visitors to rate your posts and create a customized page with all their favorite posts. Imagine combining these with a video or photoblog. It will make your website seem like it has some of the features of YouTube.

Use the following plugins:

• WP PostRatings
• WP Favorite Posts

Create Your Own Custom Membership Site

Do you want to allow registration on your site, but you want it to be a seamless experience for your visitors. Do you need to collect more information than the default WordPress registration form allows?

Well, this last combo will allow you to completely transform your WordPress site into a membership community. You can hide administrator menus from the registered users, you can apply the site’s design to the log in and registration forms, and you can request that the new members provide their Twitter account ID or accept the terms and conditions upon registration.

This is a truly powerful combination.

• Adminimize
• CIMY User Extra Fields
• Members
• Them My Login

What About You?

I hope these WordPress plugin combos gave you some cool ideas for your next project or to enhance your current site.

What are your favorite WordPress plugin combos (and how do you use them)?

Share your answers in the comments.

Image by functoruser