I create the invoice and an email with a link to the invoice gets emailed to the client. The client reviews the invoice and can choose to pay right from the invoice.

They have the option to pay using their PayPal or Google Wallet accounts. Since not everyone has a PayPal or Google Wallet account, they can also pay by credit card via the PayPal and Google Wallet websites.

It’s a system that works and I’ve heard no complaints.

However, I decided that the current invoices needed to be easier to use. What prompted the change?

A Good, Not Great Solution

I never really considered the way my invoices worked as a great solution for 3 main reasons.

1. Clients had to leave the invoice and go to another website to complete payment
2. Whatever their reasons, some clients don’t trust either service (PayPal, Google Wallet)
3. It’s a little confusing for those who want to pay by credit card because the mention of PayPal and Google Wallet may not seem like the option they want to use
4. The payment instructions included with each invoice were overly wordy and probably ignored by most of my clients

A Better, Easier Solution

The solution I decided to go with was to add Stripe.

Stripe works similarly to PayPal and Google Wallet (except less in your face) and addresses all the issues I had with the previous invoice payment flow.

Some added benefits of using Stripe as a payment option:

1. Less confusing. A simple ‘Pay Invoice Online‘ link (accompanied by credit card logos) is less confusing than ‘Buy with Google‘ or ‘Checkout with PayPal‘.
2. Easier. Clients no longer need to leave the invoice to complete payment. The Stripe form is right on the ‘Make a Payment’ page of the invoice, and it’s the 1st option.
3. Seamless to the client. The Stripe payment details form blends in with the look of the rest of the invoice. Again, they never have to leave the invoice.
4. Future options. If I ever decide that either PayPal or Google Wallet is not a good fit for me and my clients, I have Stripe as an option that’s already in place.

All in all, this makes the addition of Stripe a great solution to my clients’ invoices.

The Stripe add-on from CurdBee does cost extra ($2/mon or $20/yr), but the pay-off is that it’s much easier for my clients to take care of their pending invoices. I consider it worth it.

There’s zero coding (just had to copy my Stripe API keys and pasting them into CurdBee), so adding it was a piece of cake and I was up and running within 5 minutes.

Disclaimer: I am a paying customer of both CurdBee and Stripe. This post is not a promotional post—I’m just sharing what worked for me. Though the article does contain some affiliate links for CurdBee, I recommend both services regardless.

The post Making Invoices Easier to Pay With Stripe appeared first on Es Developed - Fresh Website and Graphic Design.

BigCommerce

Recently, BigCommerce announced that they are phasing out FTP support in favor of WebDAV.

This mostly won’t affect store owners, but it will have an impact on those to manage a BigCommerce store — web designers and developers who need access to the store’s template files.

The instructions BigCommerce currently have on their website for setting up WebDAV are geared toward those running Windows and Mac OSX. Unfortunately, there’s a sizable percentage of developers who work on Linux. For those using WebDAV on Linux, the details currently on the BC site will not work.

If you use Ubuntu (or any other distribution that uses Gnome, I assume), getting setup with WebDAV is pretty simple.

Enable WebDAV Access

We first have to enable WebDAV access in the store’s BigCommerce control panel.

1. Log into the store’s control panel
2. Go to the Users section
3. Find the user for whom you want to allow WebDAV access and click the Edit link
4. Under the Permissions section, tick the option Yes, allow this user to use WebDav
5. Save

Find Your WebDAV Login Info

Now that you’ve enabled WebDAV access for the account (and making sure you’re logged into the control panel as that user), you can grab the login details.

1. Go to Settings -> File Access
2. Note the details under the WebDAV tab

Setup the WebDAV Connection In Nautilus

Ubuntu (I’m currently running 12.04) and Nautilus should have everything you need for accessing WebDAV share, so you should not need to install anything extra.

1. Open Nautilus
2. Go to File -> Connect to Server…
3. Use the following details:

• Select Secure WebDAV (HTTPS) as the Type
• Port 443 should work (it’s default)
• Default folder is fine left at ‘/‘
• Use the BigCommerce control panel username and password for the user that you gave WebDAV access to, and tick the Remember this password option

Note the WebDAV path that was given to you in the BigCommerce control panel. It probably looks something like this:

https://www.yourstore.com/dav

While this URL apparently works in Windows and Mac OSX, you will not be able to connect using this address in Linux. Instead, replace https:// with davs://

davs://www.yourstore.com/dav

Enter that address into the Server field in Nautilus and click Connect.

If all the details are correct, you should see the contents of your BigCommerce store loaded into Nautilus, and will show up as a mounted drive/filesystem in the Nautilus sidebar.

Update (09/18/2012): Depending on how your domain name is registered and setup, it may also be required that you keep the ‘www.’ in the URL. If you get an error message, double check that you’ve included the ‘www.’.

Bookmark It

I recommend bookmarking the server so you can find it easier.

1. In Nautilus, right-click on the name of the WebDAV share in the sidebar
2. Select Add Bookmark from the menu

If you manage multiple BigCommerce stores, you will want to change the default name of the WebDAV share to avoid confusion.

1. Once you’ve added the share as a bookmark in Nautilus, go to Bookmarks -> Edit Bookmarks…
2. Scroll down the list of bookmarks, select the new WebDAV share, and change its name to something more meaningful
3. Bonus: You can drag and drop the bookmarks to reorder them
4. Click Close to save your changes, and you will see the change reflected in the Bookmarks section in Nautilus

The post Edit BigCommerce Stores With WebDAV in Linux appeared first on Es Developed - Fresh Website and Graphic Design.

I work with CMS’s every day, and have for several years. But today Statamic CMS launched to the public and I’m giddy not unlike a school girl.

So why am I so excited about Statamic? Why should you consider it for your next client project?

What Is Statamic?

At its most basic, Statamic is a flat-file CMS. This means there’s no database, unlike 99% of the CMS’s out there.

CMS’s like WordPress and ExpressionEngine store information and content in a database. The downside to this approach is that while you can do a lot with the information stored in a database, having to consult the database each time a page loads slows things down. Caching plugins and server tweaks can help, but when content changes, it must consult the database again. Databases also need a good cleaning every once in a while to keep things running smoothly.

Because Statamic doesn’t use a database, it can load pages faster than even a fully cached/optimized database-driven site.

How Does Statamic Work?

Statamic uses static/flat files instead of a database. It uses a simple tags system (similar to ExpressionEngine) to pull in content from other files.

Your site content can be formatted in:

• Markdown (default)
• HTML (.html)
• Textile (.textile)
• Plain text (.text, .txt)

Templates and Themes

Statamic Server Requirements

Statamic has only 1 requirement: PHP 5.3+

I’m on BlueHost which has not automatically upgraded to PHP 5.3. But you can upgrade to 5.3 yourself by just changing the PHP Configuration settings in cPanel. I selected the PHP 5.3 (single.ini) option and a minute later I was running Statamic.

If you don’t currently run PHP 5.3+ on your hosting, I recommend Googling your host and PHP 5.3 for instructions on how to upgrade.

A second highly recommended (but optional) requirement is Mod_rewrite (.htaccess) support. Otherwise you get ugly URL’s.

Super Fast “Install”

Statamic can be installed in about a minute. Actually, you don’t really have to “install” Statamic since there’s no database to setup.

How fast is super fast? Unzip the files, change the contents of 1 file to match your domain details, drag into your favorite FTP program, and refresh your browser. You’re done.

If you want to use Statamic in a sub-directory, you do have to make a couple changes to the settings file (/_config/settings.yaml), but still–very fast.

You can read more about how to setup Statamic on their Requirements & Setup page.

Easy Upgrading

Upgrades are easy as well; requiring you to replace just 2 directories (/admin and /app).

You don’t have to touch any of your main site files. Again, since there’s no database, there’s no risk of hosing your site due to database-related issues during the upgrade.

Simple, Responsive Control Panel

Statamic’s control panel can be summed up in 2 words: simple and responsive.

The control panel in Statamic is very uncluttered and focuses just on managing pages and content.

The control panel is also fully responsive and works just as well on mobile devices as it does on the desktop.

Who Can Benefit From Statamic?

I believe in using the right tool for the job. Using Statamic benefits both our clients as well as us as web designers.

Clients

WordPress and ExpressionEngine fit a certain client/site need. However, they don’t always fit every site’s needs and can be overkill and overly complicated for clients to use due to the fact you have control over practically every setting from the control panel.

Statamic works for clients who just need a simple way to add/edit their content. Since site settings are controlled via editing the config files, Statamic’s control panel lets clients actually manage content.

Statamic leaves changing the looks and behavior of the site to the web designer; letting clients focus on their content.

Since content can be in Markdown or Textile formats, clients don’t have to learn HTML. They can also use the simple formatting tools in the control panel to add/edit pages and blog posts.

Designers

Statamic is much like ExpressionEngine (minus the learning curve and complexity) in that you can focus on building the site without thinking much about the limitations of the CMS. Code and structure the site as you want in HTML/CSS and then use Statamic tags to pull in content and make it dynamic.

Since you don’t have to worry about connecting to a database, you can do most of your coding and design without an internet connection and just using your favorite editor.

With no database, this speeds up development even when you’re testing tags and dynamic content.

You can also easily version control your site since your site’s made up of just regular files.

Learn More About Statamic

I’ve just touched the surface of what Statamic can do.

I recommend you give Statamic a try and look through the excellent documentation on their site.

Let me know your thoughts on and experiences with Statamic in the comments.

Photo credit: Mountains by Zach Dischner

The post Statamic – Fast and Powerful CMS Without the Database appeared first on Es Developed - Fresh Website and Graphic Design.

Pagination navigation is a set of links that allow users to navigate through paged content.

Pagination navigation is common on blogs and forums. It’s usually in the form of numbered page links that appear at the bottom of each page, and may also include previous/back and next/forward links, as well as links to the 1st and last pages.

Let’s look at why pagination is needed, things that make pagination difficult to use, and how to fix them (best practices).

The Reasons For Pagination

Most blogging and forum software enable pagination navigation by default for posts or topics that go beyond what a single page could reasonably contain.

The value of pagination (breaking content into pages) is understandable. A blog or forum topic could have many (even hundreds) of pages worth of posts or discussions. Trying to load all of this into a single page would cause excessive strain on servers, excessive load times in browsers, and would likely crash browsers, servers, and the user’s system.

So pagination of some sort is often needed.

WordPress’ Plugins and Themes directories make good use of pagination. It’s easy to use and setup in a way that’s easy to understand.

However, there are some problems with how pagination is currently handled on a majority of blogs and forums.

The Problems With Pagination

The problems with pagination has been touched on in an article on Smashing Magazine, but I wanted to expand on some of these points, as well as point out some problems that weren’t touched on at all in the article.

Pagination navigation, in theory, is used to help people continue reading through content or continue reading a conversation.

However, when little or no attention is paid to this navigation, then it becomes less useful.

I recognize that the following are mainly theme/skin-related issues, but they are issues nevertheless.

Links Are Too Small

If the links in your page navigation are so tiny that visitors feel like they’re playing a game of Operation, they are too small.

Yet a majority of blogs and forums have page link navigation that is so tiny that you need a magnifying glass to see it. This makes it difficult not only to see the links, but also to click on the correct item.

The frustration just gets worse on mobile devices.

Pagination Links Are Cramped

Many sites’ previous page/next page and first page/last page links are so close together that it’s difficult to click the correct link.

Many use < and > for previous/next page links and << and >> for links to the 1st/last pages. At small text sizes, it can be difficult to tell where one link ends and the other begins.

For example:

<<< 1 2 3 >>>

Now, I don’t care how many sites I’ve be through–this makes me stare at my screen far longer than I should in order to pick the correct link to go to the next page.

Pagination Links Don’t Appear as Links

Some sites remove text-decoration from page navigation links. I assume this is either a carry over from CSS link styles used in the rest of the site, or the desire to make the links look “pretty”.

The results however:

• It’s more difficult to spot the navigation
• Coupled with the previous issue, it’s almost impossible to distinguish previous/next links from 1st/last page links without hovering over them with your mouse (which is not an option for mobile device users)
• The current page number of the page you’re on right now may not be obvious unless they highlight it in some other way. However, many systems simply do not make it a link. If so, you’re in trouble.

How To Fix Site Pagination

Make Limited Use of Pagination

Do you really need to list pages by number in your navigation?

Since numbered links do not add any kind of context or clue as to the information that appears on each page, numbering pages have limited usefulness.

You may find that letting people navigate to the previous or next page of posts is all they really need. There’s a good chance that your visitors are not even using the numbered links. Decreasing their options will make it easier for them to use your site.

Rand Fishkin wrote a nice article on when to use pagination and how it relates to SEO.

Rethink Pagination

Twitter and CoTweet are good examples of taking a different approach to pagination.

Instead of using pagination links to take you to other pages containing more updates, Twitter loads more content automatically when scrolling down the page.

CoTweet provides a full-width link/button that lets you load more updates onto the current page.

These approaches both solve the main issues that standard pagination attempts to solve–reducing server and browser load. Their solutions also bypass the usability issues of pagination as well.

WordPress Pagination Plugins

There are a number of WordPress plugins that provide a similar Twitter/CoTweet solution for loading more content.

Ajax Pagination Plugin

http://wordpress.org/extend/plugins/ajax-pagination/

This plugin provides a button to load more posts onto the current page, similar to Twitter.

Twitter/Facebook Style Pagination

http://wordpress.org/extend/plugins/wp-twitterfacebook-style-pagination/

Another similar plugin that lets you load more content dynamically.

Increase Link Size and White Space

For pagination to be usable, link text should be at least as large as body text.

The margin and padding of each link should also be sufficient to make the separation of links clear and unambiguous.

More attention should be paid especially to link padding for mobile device users. Increasing the link padding and margins around links will make it easier for users to select the correct link.

Here are a couple more WordPress plugins to help you out.

Widget Pagination

http://wordpress.org/extend/plugins/widget-pagination/

Widget Pagination helps make pagination more usable and more easy to be seen by giving you various options for paging navigation. The default text size still seems a bit small to me, but a step in the right direction.

Better BuddyPress Pagination

http://wordpress.org/extend/plugins/buddypress-better-pagination/

Improves the default pagination in BuddyPress for forums and group discussions.

Treat Pagination Links As Links

The links in your paging navigation should always look like links or buttons to avoid confusion.

Making the current page number stand out will also make the pagination more usable. Some sites increase the current page number’s font size and/or embolden it.

Describe Actions

Instead of relying solely on icons or character entities to convey the action a link will carry out, we can include text.

For example, on WordPress.org, they use « Previous and Next » instead of simply the double quote arrows. This makes it very obvious what will happen when clicking each link.

Your Ideas

Agree? Disagree? What do you think about the pagination navigation? Tell us in the comments section.

The post Better Site Pagination: Best Practices appeared first on Es Developed - Fresh Website and Graphic Design.

Updated: 08/03/2011 – Added a live example of blocked non-ad images.

Note: This post is not condoning tricking users by trying to slip advertisements past ad-blocking plugins. The purpose of this article to to help keep actual content from incorrectly being labeled as advertisements, and thus hidden from visitors.

As someone viewing websites on the web, ad-blockers filter out adverts for “enhancements”, and a bunch of flashing, ugly advertisements. Not only this, but ad-blockers can help protect you from potentially sneaky and malicious code.

This is why one of the most popular downloads for Firefox and Google Chrome is ad-blocking extensions.

However, have you thought about the reverse? What is the effect of ad blockers on your website or the sites you design for clients?

Is my coding style or design choices limiting what’s viewable to visitors because it’s being incorrectly identified as advertising content by ad-blockers?

Choose Your Class and ID Names Carefully

You may reason, “I don’t have to worry about ad-blockers because I don’t have any advertisements on my website”.

While you may not have a single ad on your site, the names you give your classes and ID’s matter.

Classes and ID’s containing keywords like banner, ban, ad, advertisement, etc may get flagged incorrectly by a visitor’s ad-blocking plugin.

Important sections of information may never show on the screen because of this.

Avoid:

<p class="panel banner" id="bannercontent1">Real content. Not an advertisement. But still blocked.</p>

Better:

<p class="panel section" id="section1">Real content. Not an advertisement.</p>

Remember, elements with classes and ID’s that contain any filtered keywords run a high risk of being blocked by ad-blocking extensions. In theory, an ID or class named ‘bandaid‘ may get filtered as an ad.

Safe Choices For Classes and ID’s

What are safe choices for classes and ID’s?

While there’s no way to know exactly what custom keywords people will add to their blocking list, a good rule of thumb would be to look at the keywords that are contained in the default filter list. This list can usually be found in the ad-blocking extension’s settings.

Avoid using classes or ID’s that contain any of the keywords on the filter list.

Choose Your Images Carefully

You should also pay attention to your choice of images.

Since ad-blockers cannot actually view the contents of an image, they identify advertisements by relying on both the image filename and image dimensions.

Image Filenames and Directories

Images that contain banners, ban, ads, advertisement, and so on in their filenames may very well get flagged as an advertisement and get removed.

Let’s look at a real-life example of this in action:

IQ’s website lists their expertise: Strategy, Digital, and Advertising. Each has it’s own image/icon. However, with Adblock Plus installed, the icon for Advertising does not appear at all.

IQ's Advertising icon blocked by Adblocker Plus (Firefox)

As you can see, the image that should be above the Advertising header, is completely gone.

However, with Adblocker Plus disabled, the image appears (see below).

IQ's Advertising icon appears with Adblocker Plus disabled on the site.

In this case, the reason the image is incorrectly flagged as an advertisement is the filename: advertising_0.jpg.

Now in this case, it’s a perfectly appropriate filename. However, this image is clearly not an ad.

I have seem other sites that suffered from this issue in more obviously unfortunate situations (image that was blocked was not in a section dealing with advertising). So this is something to keep in mind. I once had an image blocked because it had the word ‘cookie’ in it. But that was a rare case.

You should also be aware of the directory names you choose. For example, using directories that contain words commonly used in banner advertisements are fair game for ad-blockers.

Image Dimensions

Your images’ dimensions matter. Images that have the same dimensions as common banner sizes run a high risk of getting wrongly blocked.

Common ad sizes (in pixels):

• 728 × 90
• 468 × 60
• 234 × 60
• 180 × 150
• 125 × 125
• 250 × 250
• 88 × 31
• 120 × 600
• 160 × 600
• 336 × 280
• 300 × 250

Source: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

If Unsure, Test

If you’re not sure, download an ad-blocking plugin for your browser and test your design before going live.

This may involve checking your ad-block plugin settings as well. You may have set some rules that apply for your own site, so it’s always good to re-check your settings to be sure it’s turned on for testing.

The post Don’t Let Your Sites Become Victims of Ad Blockers appeared first on Es Developed - Fresh Website and Graphic Design.

Solution: Use the nifty Simple Add Pages or Posts plugin.

What It Does

Simple Add Pages or Posts does exactly what you would expect. It adds multiple pages all in one go. All you do is enter the titles of the pages (or posts) in the plugin’s text area–1 per line–and the plugin creates the blank pages for you.

You can even create nested pages and generate the site’s entire structure at once:

Parent Page 1
-Child Page 1
-Child Page 2
-Child Page 3
--Grandchild Page 1
--Grandchild Page 2
Parent Page 2
-Child Page 1
Parent Page 3
Parent Page 4

Simple, huh?

You can even add multiple pages to a site with existing pages. Just select a parent page and all the generated pages will be added in relation to the parent.

What It Does Not Do

Simple Add Pages or Posts will not automatically generate page content or allow you to select the categories of posts. It also will not let you change any attributes (other than page/post author and page parent) such as page templates or keywords.

However, if you are wanting to just setup the page structure, then it’s an excellent plugin that will save you lots of time.

Remember to use the Simple Add Pages or Posts plugin to quickly add multiple pages (or your whole site structure) on your next new WordPress site.

The post Add Multiple Pages Instantly On New WordPress Sites appeared first on Es Developed - Fresh Website and Graphic Design.

Disclaimer: This is not a paid or sponsored post.
I am an Authorized Reseller for BigCommerce and this review does contain links that pass my referral info. However, I try to be as objective as possible and highlight both the strengths and weaknesses of BigCommerce.

When I first decided to try out BigCommerce (a hosted e-commerce shopping cart service), I was hopeful, but honestly a bit skeptical.

Over the years, I’ve tried several different full-fledged e-commerce systems—Magento, Zen Cart, PrestaShop, CubeCart—as well as a couple WordPress-based e-commerce plugins.

They all had at least 1 major issue that made it difficult to recommend them to clients.

Some were resource hogs and had terribly inefficient control panels. Others were a nightmare to customize (table-based layout) and produced incoherent URL’s. Some were glitchy and unstable, while others were not kept up-to-date or promised features that simply were not fleshed out enough to be used on a production shop.

That’s not to say that these shopping cart systems are unusable. Many will work just fine depending on your requirements. However, finding a good, solid e-commerce system that you can recommend to clients is sometimes a daunting task.

BigCommerce: Not Perfect, But Closer Than Most

First off, if you’re looking for the perfect e-commerce system that will work for 100% of projects, you might as well stop reading. If I’ve learned one thing over the years about shopping cart systems, it’s that you will never find a system that works for every single store.

That said, BigCommerce is far more likely to work for the average shop than other systems out there.

What BigCommerce Does Well

BigCommerce has a lot going for itself. Here are some of the things that BigCommerce gets right.

It’s Hosted

BigCommerce is a hosted e-commerce shopping cart system.

Usually that means that you don’t have any real control over your data or the look of your site. And to a certain degree, that is true. You do not have absolute control of your site like you would if it were self-hosted.

However, BigCommerce gives you an amazing amount of control over your product and customer data, as well as how much you can customize your store.

Flexible Templating System

One of the most frustrating things about working with e-commerce systems is the maddening, 1990′s-style markup many still use.

Sure, you may be able to get a site up and running, but having to put on armor to battle table-based layouts and out-dated template code is frustrating.

BigCommerce comes with many high-quality templates (96+) by default. The templates in BigCommerce use XHTML/CSS-based code, along with panels, snippets and their own tagging system that is simple to use.

But if you’re a designer, you don’t want your site to look like everyone else’s, so you’re gonna want to create your own design.

If you already know how to build sites using XHTML/CSS, then you know about 95% of all you need to know.

Page templates are just .HTML files. There are proprietary tags used to ‘include’ reusable code (either other HTML files or snippets of code) similar to PHP includes.

In BigCommerce templates, custom template files override the originals in must the same way as WordPress.com stylessheets and Thematic themes.

In other words, you only have to add files that have been changed. Instead of copying every file from the original template and then making changes, you only need to include files that you’ve edited. If you like one of the themes, but only want to change the layout of the footer—just include a modified Footer.html file in your Panels directory and you don’t have to touch any other template files.

This makes it very easy to manage changes that you’ve made to the original template.

You can also create custom product and custom page templates which adds to the flexibility of your store design.

As easy as it is to understand BigCommerce’s templating system, they have thankfully included a Design Guide (PDF) that outlines how to design a site in BigCommerce.

FTP Access To Template Files

While you can edit your template files from within the BigCommerce control panel, I prefer FTP’n into the server to make changes. BigCommerce gives you access to template files via FTP.

That is a huge plus right there.

Completely Customize Your Store Designs

It’s possible to get many different looks even when basing your design on the same template.

For example, I created a shop for Long Road Travel Supplies using one of BigCommerce’s standard templates. Using the same standard template as a starting point, I also designed the store for EarPops™ Bandless Ear Muffs.

Both the above sites are based on the same template, but, since you have so much control over the design and layout, you can do practically anything.

This is one of the advantages of BigCommerce over Zen Cart. With Zen Cart it is a job of work to customize a shop, and unless you go through practically every aspect of the templates, you can tell it’s a Zen Cart site. Not so with BigCommerce.

Search Engine Friendly URL’s

Another area where BigCommerce shines is the URL’s it generates for both static pages and product pages.

If you’ve ever looked at the URL’s that Amazon uses, you can see how ugly they are. BigCommerce product page links look similar to this:

http://yoursite.com/Products/Super-Duper-Product.html

While static pages look like:

http://yoursite.com/Pages/Privacy-Policy.html

Moving from Zen Cart to BigCommerce helped one of my clients go from the 2nd page of Google to the #2 spot on the 1st page in under 1 week for 1 of their major keywords.

Your results may vary, but this was pretty impressive to me.

Easy-To-Understand Variations System

Entering products with multiple variations (options) is very quick in BigCommerce.

Instead of taking the literally hours it took to add all the options and possible combinations for products in Magento, I was done in just a few minutes.

You can also adjust images, SKU’s, and prices per variation.

While the current variations system is not perfect, the developers are working on a new, improved, more flexible system for managing variations.

Better Checkout

Some cart software require would-be customers to register for an account with the store before completing their order. This is just another step that gets in the way and can cause many people to bail out of the checkout process and never come back.

BigCommerce allows people to complete their order as a guest, without having to sign up for an account.

While the ‘create an account’ option is selected by default, it can be changed to select the guest account option by default with a fairly simple template edit.

BigCommerce also allows for 1 page checkout. This results in more completed orders and fewer abandoned carts.

Simplified Control Panel

When you first log into the BigCommerce control panel, you won’t be overwhelmed with unnecessary information.

Order information and simple order total statistics are found on the front page.

Other areas of the control panel are accessible via drop-downs and tabbed pages.

While some of the information could be organized a little more logically, still; very easy to get around.

Documentation

A shopping cart system is only as useful as it’s documentation.

BigCommerce has a very useful PDF user’s guide, as well as guides for designers and developers.

BigCommerce also has a useful knowledge base and forum that includes video tutorials.

It’s pretty easy to find answers to questions or suggest new features. Many of the current features are there because users suggested them.

Support

When you’re paying for a product or service, nothing is more frustrating than dealing with poor or non-existent tech support.

BigCommerce provides support via phone, support tickets, and email.

Also, when you sign up for a trial account, a representative is assigned to your account. They are very helpful in answering questions. If they don’t know the answer, they will suggest who to contact in order to find answers.

Plays Well With Others

You can accept many different methods of payment in your BigCommerce store. You can accept payments via credit card through your own merchant account, or accept payments through Authorize.Net, PayPal, Google Checkout and others.

You can also call in shipping calculations from UPS, USPS, FedEx, Canada Post, and more.

BigCommerce also makes it easier to share your products with others.

Email Marketing

You can manage your email marketing by connecting to MailChimp or iContact for newsletter management. BigCommerce can place customers into mailing lists based on which products they bought.

Facebook and Twitter Integration

Visitors can like your products on Facebook, tweet about them on Twitter, and share them on other social media sites right from your product pages.

You can also export your entire product line to Google Base/Merchant Center for inclusion in Google Shopping results.

It’s also possible to sell products via Facebook or eBay and allow product comparisons via Shopzilla, Bizrate, PriceGrabber, Shopping.com and others.

You can also test variations of your store design with built-in Google Optimizer settings.

Mobile Devices and Mobile E-Commerce

BigCommerce also lets you sell to mobile users visiting your site through a mobile device such as iPhone, iPod Touch, iPad, Android-powered phones, Palm Pre and Blackberry devices by automatically serving up a mobile version of your store.

While most modern smart phones will work just fine rendering the regular design of your shop, there may be reasons you want to serve up a mobile version to mobile visitors.

For instance, embedded videos and large images can take much longer to load, depending on your mobile network’s speed. Faster browsing equals more sales.

In the control panel, you can easily select which mobile devices you want to to serve your mobile templated shop to.

BigCommerce also has an option to purchase an SSL certificate that supports SSL encryption on mobile devices.

Reasonably Priced

BigCommerce offers a free 15-day trial. Just like MailChimp’s free plan, you don’t have to enter any credit card info to start your trial.

The trial store they give you is not crippled—you get access to all the features you would have if it were a paid account.

All plans do charge a 1-time initial setup fee of $49.95. Pricing starts at $24.95/month for the Bronze Plan, which includes up to 100 products (variations/product options do not count toward the number of products).

They have 5 plans available, which will meet most of your clients’ needs—including 2 different unlimited products plans.

No Transaction Fees

Unlike most hosted shopping cart services, BigCommerce does not charge any per transaction fees. You pay your flat monthly plan, and you get to keep your profits.

What BigCommerce Gets Wrong

While there are many things that BigCommerce gets right, there are still some things that need work.

Discounts and Variations

While quantity discounts (ex: Buy 1, get 1 free) are listed among BigCommerce’s features, they are limited to products that do not contain variations.

This is very limiting since most shops contain at least some products that have options (colors, sizes, etc).

The good news is that the BigCommerce/Interspire team is working on revamping the current variations system and this is one of the areas that they are hopefully addressing.

A work around for this is that you can still apply discounts to the items in the cart, or use coupon codes to provide discounts. The coupons option is nice because you can see how many people used a particular coupon and view their orders.

Easier Product Page Customization

While it’s simple to customize nearly every page of a BigCommerce store, product page customization still takes more work that one might think if you want to rearrange the layout of the product pages.

The issue lies in the fact that some of BigCommerce’s special tags and global variables will only work on certain pages. While it is possible to create custom product pages, if you want to drastically change the layout of the page, it may take you a while.

If you need help with this, let me know and I can give you some pointers.

Removing Newsletter Forms

Not everyone uses newsletters. While it is possible to remove the newsletter sign-up forms from the sidebar panels by editing the templates, this required editing many different template files. Also, none of this removes the newsletter sign-up option in the 1-page checkout.

Anyone who signs up for a newsletter goes into limbo if there’s not a newsletter option setup for the site (MailChimp, for example).

There needs to be a single option in the control panel to disable newsletters and newsletter forms site-wide. This is much more preferable than manually editing numerous templates.

Changing Product Names Changes URL’s

Say you have created a product, but later on want to change the name of it. Be careful, because changing the name of the product will generate a different URL for your product.

This could have serious SEO impacts if you already have links from other sites going to the previous product URL.

You can always assign a 301 redirect via BigCommerce’s control panel to forward traffic to the new URL, but it’s still a big inconvenience.

No Language Translation Options

While you can accept currencies from other countries, BigCommerce is only available in English and does not support translating your store’s text into other languages. This, unfortunately, leaves out non-English-speaking customers.

The ability to change or set your own global language variables would be a nice addition. Perhaps this feature will come in upcoming versions, but if you need this functionality right now, then it’s a no-go.

It’s Hosted

This is kind of a 2-edged sword. One one hand, you don’t have to worry about the security of your server, and you don’t have to worry about PCI compliance.

On the other hand, although you can export your data, you do have less control over your data than if you were running the cart software on your own web host. For some, this may be unacceptable.

And while BigCommerce has a paid self-hosted version of BigCommerce (Interspire Shopping Cart), it does seem to lag behind the hosted solution a bit. However, this might be a good option if you need more control.

If your store relies on certain affiliate systems or 3rd-party services that require passing certain extra information along with orders, this may not be possible with BigCommerce.

Conclusion

BigCommerce does many things well like having a flexible template system, search engine friendly URLS, integration with many popular services and sites, a great 1-page checkout process, and fantastic documentation and tech support.

However, BigCommerce is not perfect for every store’s needs and there are some things that need fleshed out and improved upon. However, it’s the easiest e-commerce shopping cart system I’ve ever worked with.

Shameless Plug: Also, if you need help setting up your online store with BigCommerce or need a custom BigCommerce template, give me a call at (618) 508-4960 or contact me via the email form on the Contact Us page.

BigCommerce Resources

Here are some helpful links to more information about BigCommerce.

• BigCommerce Designer’s Guide (PDF)
• BigCommerce User Guide (PDF)
• BigCommerce Developer API Documentation (PDF)
• BigCommerce Features (Summary)
• BigCommerce Features (Full List)
• Features For Designers

The post BigCommerce Shopping Cart Review appeared first on Es Developed - Fresh Website and Graphic Design.

Brought to you by Next Day Flyers; offering custom printed postcards, business cards, tickets, posters, and more.

Every profession has their own lingo and specialized terms. While terms differ from industry to industry, they all have one thing in common—no one outside their field understands what they’re talking about.

For web designers, we have terms like web standards, progressive enhancement, search engine optimization, stylesheets, and mockups. We also have clever little abbreviations like HTML5, CSS, XML, and UX.

When we try to talk to our clients and use these terms, most don’t have a clear understanding of what we’re talking about.

But even beyond these specialized terms, there are concepts we talk about that our clients don’t completely understand.

For instance, a client may wonder why it could take 24-48 hours for their site to transition from one host to another. How do you explain how propagation works?

Let’s look at 4 ways we can help our clients understand us better.

#1 – Stop Trying To Be Smart

Or more accurately, stop trying to sound smart and just say what you mean.

Personally, when I hear someone hurling a mass of techno-talk and important-sounding phrases at me, I instantly trust them less.

It’s one thing to use web design terms when talking to other designers. But limit using the terms we know our clients don’t fully understand. Rather, use simple phrases to avoid buzzwording your clients to death.

This alone cuts out some of the barriers and keeps you from sounding like a pretentious jerk.

But what about deeper concepts we may have to explain? How can we help our clients understand?

#2 – Do You Really Need To Explain?

Our clients are people with differing levels of experience and different backgrounds. Some are very tech-savy and can grasp what we’re talking about most of the time. For these people, you don’t have to explain every principle because they already understand well enough.

On the other hand, there are many who are less familiar with the concepts that we take for granted. For those, we may need to spend more time explaining what is going to be accomplished, the need for it, as well as the benefits.

We can start to get an idea of their level of knowledge just talking to them. Use this in deciding what needs a brief explanation and what does not.

Over-explaining things to your client can be insulting to them, plus it wastes both your time.

Remember too, in order to get a great website, the client doesn’t have to completely understand every aspect of web design any more than you have to know the internal workings of an engine for your mechanic to tune up your car. So pick and choose what you need to explain.

#3 – Illustrate and Illustrate

From here on out, we’ll just assume that an explanation is necessary.

However, sputtering out facts, statistics and even more buzzword-laden jibberish is only gonna make matters worse. Our explanations need to be easy to understand.

This is where illustrations (visual and verbal) come in.

Illustrate (Visual)

Depending on the subject, drawing a simple diagram may go a long way in helping a client grasp a concept.

Grab a piece of paper and a pen and draw away, or use some other visual aids. This approach is especially useful during initial meetings (assuming these meetings take place in person or over video conferencing ;) ).

Illustrate (Verbal)

Another great way to explain things is to compare what they don’t know with something they do. Tell a short story, or use a metaphor or simile to get the point across.

The 2 main ingredients of a good illustration are: relatability and simplicity.

Make It Relatable

Consider your client; who they are, their interests. Consider their geographic location. Make sure the illustration is based on a familiar subject.

If your client is a businessman who spends most of his days in an office, an illustration involving knitting or camping may only make matters worse.

Pick neutral topics. Explanations based on commonly understood subjects can be used no matter the situation and appeal to a wider audience.

Keep It Simple

The most relatable illustration in the world will do your client little good if it’s buried under a pile of unnecessary information, so keep it simple.

Don’t worry about explaining every little detail to them—just help them grasp the basics.

If using a metaphor or simile will accomplish your goal faster, do it.

A good illustration will be relatable and simple enough that you’ll only have to offer a very brief explanation, or none at all.

#4 – Give Em Homework

The reason you’re doing all of this is to help your clients understand what you’re talking about so you can get on with your discussion. Don’t spend so much time explaining one thing that it derails the rest of your meeting.

If your client wants more than just a basic understanding of a subject, offer to send them some links for them to look up later. There are more than enough resources out there that you can point your clients to.

Giving them ‘homework’ benefits them because they can read up on the topic when they have the time. Plus, it frees up your time that could be better spent working on the actual project.

It’s All Related

All these points work together like pieces in a puzzle; making it easier for our clients to understand us.

If we keep industry-speak to a minimum, our clients will have a much easier time understanding us. In turn, we won’t have to explain as many things. This frees up more time to focus on their project and contributes to happier clients.

Photo Credits: Very confused looking guy by doglikehorse | Businessman wearing a black suit and orange tie by Patrick Breig | Rear view of a woman in lab clothes by Diego Cervo. Royalty-free photos provided by Shutterstock.

The post Help Your Clients Understand Web Design Terminology appeared first on Es Developed - Fresh Website and Graphic Design.

Where do you find inspiration for your designs?

There are many places to look, both online and off. The important thing is to not limit yourself to just one source of inspiration.

Online Design Galleries

Many new designers begin looking for design inspiration from online galleries.

While there’s nothing particularly wrong with online design galleries, they do seem to showcase similar sites. One gallery finds a design they like and before long there are dozens of other galleries showcasing the same design.

Another problem I find with online galleries is that they often showcase designs that follow a certain trend. Trends are fine, but when everyone is following a trend, where’s the innovation? Where’s the variety?

The online galleries that are the best places to look are ones like Creattica that showcase more than just website and logo designs. Creattica, for example, features designs in categories like business cards, skateboard and snowboard art, posters, motion graphics, book covers, icons, tshirt design, and more.

However diverse they may seem, you should not limit yourself to just online design galleries.

Photo Galleries

Many designers find inspiration in photographs. It’s no wonder that many turn to Flickr to jump start their creative juices.

Flickr is very handy for finding new and interesting color schemes.

There is also the very useful Compfight, which allows you to search Flickr. What makes this stand out is that is displays just the images in the search results. Plus it loads a tons of photos on each page, which means you don’t have to spend all day browsing through your results and clicking ‘Next’.

Of course, you can also find inspiration offline.

Books and Magazines

I’m a big fan of finding new ideas in magazines. In a recent guest post for Inspired Magazine, I discussed the benefits and advantages of seeking design inspiration from magazines.

Just a few of the advantages include becoming a better designer, improving your typography chops, and finding interesting a new layout ideas.

As I mentioned in my Inspired Magazine article, if you want better results, get out of your comfort zone. This can be done by looking in magazines that deal with other subjects (other than graphics, web design, or technology).

Books and book covers are also great places to look for new design ideas.

The Book Cover Archive is a great place to start online for your search of great book covers. But you might want to just get out and go to the library. There you will find even more unique designs to infuse your brain.

Product Design

You can also get out of your element and find inspiration in product designs from around the world.

In order for their products to stand out of the shelves, companies spend a lot of time on finding unique way of displaying their products.

Sites like The Dieline showcase these unique product designs.

Want an offline solution? Go to the grocery store. Go to a mall. Walk down the isles and see which products grab your attention first. Then try to determine why? It’s a good exercise and it can help you come up with new ideas to use in your next design.

The Real Test

The real test of any form of inspiration is the results you get.

Everyone thinks differently, learns differently, and are affected by what they see, hear and experience differently. So if you’re stuck in a rut or you just want a change of pace, try different means of getting inspired.

Some of the best results come from getting out of your comfort zone, so get crazy and have some fun!

Image Credits: Bewildered Man by Primusoid. Light Bulb Isolated on White by Nikolay Okhitin. Royalty-free photography from Shutterstock.

The post Finding Design Inspiration Online and Offline appeared first on Es Developed - Fresh Website and Graphic Design.

Because of their small size, icons used in UI’s (user interfaces) should be kept fairly simple.

This is especially true for user interfaces for mobile apps and devices like the iPhone, iPad and mobile devices using the Google Android OS. Since the resolution and screen sizes on these devices are small, monochromatic icons and symbols work very well.

I’ve gathered together 15 simple, single-color icon sets that could be used for UI design.

These icon sets are free for commercial use unless otherwise stated. However, be sure to check the licenses for each set before using on any projects.

Wireframe Icons

The folks at Gentleface have released the free Wireframe icon set–a collection of 244 icons that are free for non-commercial use.

Icons are available in 16×16, 32×32 and 48×48 pixel sizes. The icons come in PNG format.

Munich (PC.DE)

The Munich icon set is a selection of 60 simple single-color icons that would be great for a user interface.

The set includes icons in 2 sizes 16×16 and 32×32.

Gesturecons

Gesturecons is a unique icon set featuring hands performing 35 various multi-touch actions.

This set would be useful for those creating iPhone and Google Android apps. The icons are in vector format, so they could be resized easily and used in tutorials and help guides for multi-touch devices.

Available in vector formats (PDF, EPS, AI).

Iconic

Iconic is a simple icon set of 114 icons that’s very easy to see even at small sizes.

Icons are available in 14 colors, 5 sizes (8×8, 12×12, 16×16, 24×24 & 32×32 pixels) and in PNG, SVG, SWC and OmiGraffle formats.

Brightmix Icon Set

Brightmix has released their icon set for free for use on your projects.

The set includes 104 icons in vector (EPS) format.

Token

Token is a very nice set of 128 icons created by brsev.

Icons are available in light and dark versions, as well as 16×16, 32×32, 128×128, 256×256 pixel sizes. Icon formats PNG, ICO (Win).

Token is free for non-commercial use, though an option is available to purchase a royalty-free license for commercial projects.

Axialis

Axialis has several single-color icon sets in various sizes and colors that would be great for use in mobile app user interfaces.

Android Icon Set

Great for Android developers, the 30 letter pressed icons that make up the Android Icons set come in PNG format.

They also include the source file (EPS) for customizing.

Creative Nerds Letter Pressed Icons

100+ letter pressed icons available in PSD format.

108 Mono Icons

Tutorial9 has released an nice set of 108 monochromatic icons.

Icons are 32×32 pixel PNG.

Glyphish (iPhone and iPad UI Icons)

Glyphish is a simple set of 130 UI icons that is designed to work for work great for iPhone and iPad apps in toolbars and tab bars.

Set comes in PNG, PSD and AI formats.

iPhone Toolbar Icon Set (PixelPressIcons)

Free icon set for iPhone toolbars. Contains 50+ 30×30 pixel PNGs.

Guifx v2 Transports Font (Dingbat)

Technically, this isn’t an icon set, but rather a font with dingbat symbols. However, this contains many useful audio/video control symbols and icons.

Deziner Folio UI Icon Set

Deziner Folio has released a free 30-icon vector icon set.

The set in available in PSD.

iPhone UI Icon Set ($69 USD)

The iPhone UI Icon Set contains 160 PNG icons for use in any iPhone app. Optimized in 2 sizes for the toolbar and tab bar.

This is a high-quality icon set and $69 is not a hefty price if you’re using it for a commercial project.

Licenses

As always, check the licenses and terms of service for each icon set before using it.

Photo credit: Business Woman Pressing a Touchscreen Button by Olly via Shutterstock.

The post 15 User Interface Icon Sets appeared first on Es Developed - Fresh Website and Graphic Design.

Smashing Magazine is a great web design blog featuring fun and useful articles and tutorials for web designers.

When they announced they were releasing a book–The Smashing Book–I was eager to read it.

Disclaimer: This review is not a paid review. However, I did receive a copy of this book free from Smashing Magazine.

Who Is the Book Written For?

The Smashing Book ($29.90 / €23.90) was written specifically for web designers—both beginners and those that have been at it for a while.

What Topics Are Covered in the Book?

The 313 page book focuses on basic, but fundamental areas of web design, such as:

• User Interface Design
• CSS-Layouts
• Typography
• Usability Principles
• Color Usage
• Website Optimization
• Increasing Conversion Rates
• Site Branding

I was initially worried that the book would center on a specific topic or technology. Or that it would just be a rehash of previous posts from the Smashing Magazine site. I was relieved that the book focuses on these core basics.

I think that many web designers that are self-taught have not been educated on many of these main principles of web design, so I think the book does a good job of covering these basics.

What is Not Covered in the Book?

Since the book focuses on underlying principles of web design, there are some tech-specific things not covered.

First, you won’t find much mention of CSS3 (except @font-face) or HTML5 in The Smashing Book.

Secondly, CMS’s like WordPress, ExpressionEngine, Joomla, etc are only mentioned in the interviews. Even then, nothing very specific there.

Still, taking into account the focus of the book, this is not surprising.

Also, the book is not a long list of how to do this or that on your client’s website. Again, it stays focused on the fundamentals of design rather than get into every little thing you can do. You won’t find any 50 ways to super-charge your WordPress site sections in the book.

What Did I Like the Most About the Book?

So what did I like the most about the book?

Web Designer Interviews

The interviews, oddly enough.

I usually don’t read many interviews, and I usually find them a bit dull. However I really liked the format the book used for answering the questions.

A panel of 24 web pros took turns providing their answers and opinions. These included Dan Rubin, Jason Santa Maria, Paul Boag, Andy Budd, Elliot Jay Stocks, Veerle Peters and others.

I found it pretty insightful to learn their opinions on questions like:

• What are your first steps when beginning a project for a client?
• What universal principles of setting type do you follow in every project?
• How do you know when a design is complete?

Typography

A close (very close) second would be the typography section.

The book deals not only with use of type and fonts on the web, but also explains typographic terms such as baselines, bowls, cap height, ligatures, majuscles, x-height, etc.

I think that every designer should be familiar with the principles of typography—both on and off the web—and this book is a good starting point.

Other Things I Liked About The Smashing Book

1. Didn’t focus on technology-specific subjects: While it focused on some technology, it didn’t focus too much on specifics that will change quickly.
2. Nice written style and easy to understand.
3. Nice reference: Even if you know everything there is to know about 1 or more of the topics covered in the book, it’s still a nice reference.

What I Didn’t Like as Much About the Book

1. Book size: While it is fine for reading, the small size–specifically the width of the book (5 ½ inches)—makes it impossible to leave the book open and follow along with the code.
2. May be too general for experts: Since this book focuses on the basics of web design, if you’re already well-versed in all the areas discussed in the book, you may not learn that much. I found myself skipping a couple of the sections.
3. Shipping and packaging: Many have complained about the shipping delivery speed. I think the packaging materials should have been more rugged. Mine came in the mail in a thin box with no padding. The bottom corner was smashed (ironically) and the book’s corner was damaged, though not ripped.
4. Editing errors: There were a few spelling errors that my inner editor found distracting, but nothing unforgivable. (And yes, I know it’s lame to harp about spelling, but a couple of them could have been caught by a spell-checker.)

Consensus

What The Smashing Book covers are the fundamentals of web design–the underlying principles that every designer should know. In this, the book does a nice job without focusing too much on specific technologies that will change before long.

What it covers, it covers well.

I definitely recommend the book to any web designer as a good reference and the expert interviews are great for getting into the minds of the top designers.

For those with strong backgrounds in the topics covered in the book, you may not learn much more than you already know. As alternative, you could borrow a copy from a friend first.

The post The Smashing Book Review appeared first on Es Developed - Fresh Website and Graphic Design.

Even as a designer, there are times when you have to speak before a group. This is especially true if you’re an individual freelancer.

Sometimes you need to pitch ideas for a project. You may be showing a design to a client for approval. Maybe you’re giving a speech to a group at a conference or other event.

What do you find to be the most difficult part of public speaking? [Take our poll]

I’ll Take Death, Please

“According to most studies, people’s number one fear is public speaking. Number two is death. Death is number two. Does that sound right? This means to the average person, if you go to a funeral, you’re better off in the casket than doing the eulogy.”

—Jerry Seinfeld

Most people are not born with the ability to comfortably speak in a public setting.

Even those who are good at communicating with others in casual social settings are not necessarily at ease speaking to a group in a formal setting.

So what can help you overcome stress when speaking in public?

How To Overcome Stress

The source of most of the anxiety that comes with public speaking comes from the fact that we sometimes focus too much on ourselves.

Here are 3 tips that can help you be more at ease speaking in front of a group.

1. Know Where You’re Headed

Photo credit: straymuse

You already know a lot about the subject you’re going to be talking about—otherwise, why would you be speaking to the group in the first place.

Yet a brief outline is a good idea when speaking in front of a group, just as a map is a good idea when taking a trip. An outline will keep you headed in the right direction.

Write down ahead of time your main points and a few supporting thoughts. Don’t write things word-for-word—just a few brief words to remind you.

When you know what you’re going to say, you’ll focus more on your audience and less on what you’ll say next. This will help you relax.

2. Help Your Listeners

Photo credit: Jeff Kubina

To conquer your stage fright, you need to focus on those to whom you’re talking—your audience.

If you’re speaking at a conference, for example, you’re wanting to be informative or motivate those in attendance to take some sort of action.

Instead of being overly concerned about what you’ll say, try to focus your mind on your objective—helping others.

Really, the majority of the time, at least one of your objectives is to help those listening in some way.

Even if you’re pitching an idea to a potential client that would result in income for you, you’re really offering to provide a service or product that will benefit them, their business, or their clients.

Instead of merely focusing on the financial benefits to you, concentrate on how what you’re saying will help them.

Stop selling to them—talk to them.

Showing concern for your listeners and having their interests in mind will help you to focus on them more, and on you less. You won’t be as self-conscious and your interest in them will show in your face and tone of voice.

3. Your Audience Is Nicer Than You Think

Photo credit: Jesper Rønn-Jensen

Your audience is probably not plotting your demise as you stand up to talk to them.

Most of them have had to speak in front of a group in the past, so they no doubt remember how stressful it is. They want you to succeed.

Also, remember that the reason you’re speaking to them in the first place is likely because you have something useful to convey; something valuable to share. Again, focus on that fact.

Keep these things in mind and you’ll be less self-conscious and more relaxed.

Just the Tip of the Iceburg

While overcoming stress and your nerves is an important part of being a good public speaker, it’s really just one aspect.

I’d like your feedback. What is the most difficult part of public speaking for you?

Take our poll

The post 3 Tips For Overcoming Stress When Speaking in Public appeared first on Es Developed - Fresh Website and Graphic Design.

This week, we’re looking at 10 outstanding and uniquely styled TV series title sequences.

Many people refer to the title sequence as the opening credits even though they are not really the same. However, I’ll be using the two terms interchangeably in this post.

The title sequence / opening credits is usually accompanied by visuals and sound that set the mood for the series. This usually includes the theme music for the series (if any).

Previously, I showcased a couple of title sequences from other shows that use specific effects, such as Poirot and Dollhouse. Since I’ve already featured them here on the Blog, I’m not going to include them in this list.

The title sequences chosen for this post are ones I feel are particularly memorable or out of the ordinary.

Human Target (Season 1, FOX)

The opening credits for Human Target immediately made me take notice.

The title sequence makes great use of a grunge/watercolor effect. It borrows a bit from the Bond movies, but everything works well together and fits the theme of the series.

I also like the tilting and suddenly jerk effects (for lack of better terms). This gives the sequence a more ‘real’ and less digital feel, which goes well with the watercolor and grunge effects.

Murphy’s Law (Series 3, 4 and 5, BBC)

Murphy’s Law as a series changed quite a bit from the beginning of season 1.

Season 5′s title sequence was a big departure from the opening credits of the previous seasons but fits with the shift in the subject matter of that season.

My favorite part is the way the Murphy’s Law text/logo appears to be painted onto shards of glass which move toward the viewer at the end.

I couldn’t find the opening credits for just season 5 by itself, so the video below contains the intros for seasons 3, 4 and 5.

Caprica (Season 1, SyFy)

Whether you like the opening credits for Caprica or not, you have to admit that it’s a very unique intro.

I haven’t seen anything quite like it. Beyond the slick CGI and effects, it sets up the plot of the series and is almost like a mini episode.

Hustle (BBC)

Hustle, a series about a small group of grifters (con-men), doesn’t often take itself overly seriously and the title sequence plays to this well.

While the title sequence changes after season 3, both the earlier and later versions use vector-style animation which fits in really well with the show’s fun theme.

If you watch the title sequences, you’ll see some great visual metaphors within the animation (the fat businessman falling for the trap).

Plus, I dare you not to start humming or whistling the theme song.

Hustle Seasons 1–3

Hustle Season 5

Mad Men (Season 1, FOX)

Mad Men‘s opening credits are a mix of vector illustration/animation and retro photographs which is very fitting for the theme of the series.

Eureka (Syfy)

Eureka‘s opening credits are a bit unusual in that they use an “animated images”/Ken Burns style.

It also mixes a small town look with retro-futurism elements and a muted palette.

Chuck (Season 1, NBC)

Chuck‘s title sequence combines vector-style animation, ninjas, and a theme song from Cake that won’t get out of your head. Win, win, win.

Conclusion

The above television series’ title sequences are some of my personal favorites.

As such, I’m sure there are many others that I have either forgotten about or never seen. What’s your favorite television title sequence? Tell us in the comments.

The post 10 Outstanding TV Series Title Sequences appeared first on Es Developed - Fresh Website and Graphic Design.

It’s only been a couple weeks since the newest version of Mozilla Thunderbird–Thunderbird 3–was officially released.

This new version of Thunderbird includes several new features.

Let’s look at 4 features in Thunderbird 3 that can help you stay more organized and work more efficiently:

1. Sync all your email accounts
2. Better Gmail integration
3. Better Email Search
4. Manage tasks, calendars, Google Wave, webmail and more within Thunderbird 3 with content tabs

1. Sync All Your Email Accounts

The ability to keep all your mail in all your accounts synced is not a new feature in Thunderbird 3. However, it is awful handy and makes keeping up on all your correspondence a breeze.

The easiest way to do this is to make sure all your email accounts use IMAP instead of POP.

Incoming email, sent emails, drafts, spam, and folders within your account all get synced (assuming your mail server supports this) when you use IMAP.

If you haven’t moved your email accounts from POP to IMAP, do yourself a favor and take a day and just do it. You’ll be glad you did.

Thunderbird 3 also has a new migration feature that will make moving your emails easier.

2. Better Gmail Integration

While you could setup your Gmail accounts in previous versions of Thunderbird, Gmail setup was more complicated than it should’ve been.

Now, Thunderbird 3 detects and sets up Gmail accounts with a super-fast wizard.

Just choose the Gmail option, enter your name, email address and password. Thunderbird 3 finds all the right settings and creates your account. The whole process took me about 15 seconds.

If you’re a Google Apps user, you’ll still need to use Google’s IMAP instructions and settings to set up your email.

3. Better Email Search

Thunderbird 3 has a new mail search which includes filtering and timeline tools. This makes it easy to search emails from all your accounts–including webmail accounts.

Search results open in a new tab so you can work back and forth between your results and regular emails.

Thunderbird 3′s search also seems to have been sped up as well–delivering results much faster than TB2.

Search also searches Gmail emails just fine.

4. Embed Webpages In Their Own Tabs Within Thunderbird

Content Tabs (or Content Browsing) is by far the simplest and yet most exciting feature in Thunderbird 3.

Content Tabs enable Thunderbird to display remote content in a tab, which users can browse in (mostly) the same way as with a browser.

Content Tabs – Mozilla Developer Center

This makes it easy to access Twitter, tasks apps, online calendars, or whatever web-based services you want right through Thunderbird.

How Do Content Tabs Work?

Using the Error Console found in the Tools menu, you can add just about any site to Thunderbird and have it in its own tab.

Want Google Wave within a tab in Thunderbird? How about Google Voice, or your favorite online calendar or tasks web app? You can add them to their own tabs in Thunderbird.

For example:

Components.classes['@mozilla.org/appshell/window-mediator;1'].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("mail:3pane").document.getElementById("tabmail").openTab("contentTab", {contentPage: "http://www.mozillamessaging.com/en-US/thunderbird/nightly/whatsnew/"});

Pasting this line of code into the Error Console and clicking Evaluate would create a new tab in Thunderbird containing the webpage:

http://www.mozillamessaging.com/en-US/thunderbird/nightly/whatsnew/

Lifehacker has a great article showing how to add Google Wave to its own tab in Thunderbird 3.

You can also add Google Voice in its own tab like this:

Components.classes['@mozilla.org/appshell/window-mediator;1'].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("mail:3pane").document.getElementById("tabmail").openTab("contentTab", {contentPage: "https://voice.google.com/voice/?"});

You can add any page to Thunderbird easily this way.

More Control Over Content Tabs

Some have reported that when you close Thunderbird, any content tabs that are open will close and you have to paste the code back into the Error Console.

Personally, I haven’t run into this with TB3 on Ubuntu 9.10.

But if this is an issue, you might try installing the Custom Buttons² extension. The extension also lets you add custom buttons to Thunderbird’s toolbar that will let you open tabs for individual sites as needed.

Staying More Organized

There are several new features added to Thunderbird 3 that will speed up the way you work with your email and access information.

Look for more ‘Stay More Organized’ articles coming soon.

You should also follow us on Twitter.

The post Stay More Organized With Thunderbird 3 appeared first on Es Developed - Fresh Website and Graphic Design.

• Handles AI, EPS, PDF, SVG and a slew of other vector and raster formats
• It’s open source and free
• Runs on all major operating systems–Windows, Mac OS X and Linux

Last week, Inkscape’s newest version, 0.47, was released.

What’s new in Inkscapes latest version? Lots.

What’s New in Inkscape 0.47?

Improved UI and Desktop Integration

So you want to know what the new version of Inkscape looks like?

It’s not a radical departure from the previous version, but it has some streamlining and small tweaks that’s been given it. Mainly, it seems to integrate better with whatever OS it’s installed.

You can view some screenshots of the new Inkscape interface and examples of what’s possible on the Screenshots gallery page.

Above: Obligatory Megan Fox vector illustration

Additions and Improvements

Here’s just a brief list of additions and improvements. You can read the full list of changes on Inkscape.org.

• Autosave with adjustable preferences
• Spiro splines for the Pen, Pencil, and Node tools
• Auto smooth nodes
• New modes in Tweak tool
• Reworked snapping and grid system, plus a Snapping toolbar
• New path effects, including sketch, hatching, envelope deformation; effects can be stacked and assigned to groups
• Tons of filters found in new Filters menu
• Typography–Base support for creating SVG fonts
• New and improved extensions
• New cairo-based PS and EPS export: improved quality, more features supported, fallback rasterization for filters and transparency
• Spell checker for text objects
• Many new extensions: restacking, calendar, printing marks, cartesian and polar grids, interpolating attributes
• Optimized SVG code options
• Better desktop integration. Better Gnome integration (Linux) with improved icons. Also includes themable icons.

New Path Effects

New Sketch path effect in Inkscape 0.47

There are several new path effects in the new version of Inkscape.

• Sketch makes an object or path look like it was rough sketched
• Hatches draws hatch and “scribbles” within a shape
• von Koch creates fractal images
• Knot makes a knot from a flat self-intersecting curve; giving the illusion of a knot
• Spiro Splines is a useful alternative to Bezier curves. This could be handy for those creating type or fonts
• Construct Grid
• Envelope Deformation lets you deform an object or group of objects by deforming any of its principle sides (top, bottom, sides). Can be edited with the Node tool.
• Create ruler marks along a path with Ruler
• Interpolate Subpaths “tweens” (think Flash) shapes along an editable path

If you haven’t tried Inkscape or haven’t tried out the newest version, download Inkscape today.

The post New Features and Tools in Inkscape 0.47 appeared first on Es Developed - Fresh Website and Graphic Design.

Here’s the claim code: DFGXTHDG96RW

Now, back to our regularly scheduled broadcast.

The post Technorati Code appeared first on Es Developed - Fresh Website and Graphic Design.

In a previous post, I wrote about 10 creative ways to use Drop.io. Drop.io is a free online file sharing/collaboration service.

One of the ideas was using Drop.io’s voicemail as a way to let visitors leave audio comments.

Audio Blog Comments—A New Idea?

Short answer, no.

The idea of audio comments isn’t new.

Paul Boag, of the excellent Boagworld, allows (or allowed–can’t seem to find it now) visitors to post audio comments. Paul also has posted audio responses to text comments on some of his posts (via AudioBoo).

This is logical because of the podcasts they publish. Audio comments could be used in future podcasts.

People could record a message to MP3 and then save it to their computer. Boagworld gave visitors an option to upload the saved MP3 file to their site right from the comments section.

This is a nice idea, but unless you’re really motivated, you’re probably not going to go through the hassle of doing all this just to leave a comment.

Easier Audio Comments By Phone With Drop.io

So far, I haven’t really found any sites implementing audio comments on their site besides Boagworld (though I’m almost certain to be proved wrong ;) ).

How could you make it easier for visitors to leave audio comments on your blog?

Every drop you create with Drop.io has its own phone number and extension.

The simplest idea would be to create a drop, then place the phone number and extension at the end of the post or right in the Leave a Comment section.

Visitors will find this to be fairly easy:

1. Simply dial the drop’s phone number from any phone
2. Type in the extension at the prompt
3. Start talking and hang up when finished

Since all comments are automatically converted to MP3 by Drop.io, a lot of comments could be left on a 100MB drop.

Site Admins

For site/blog admins, email alerts can be setup in Drop.io. When new audio comments are left, the admin knows within seconds.

1. The site admin can listen to the message
2. Copy the embed code for the MP3 from Drop.io
3. Create a new comment on the blog post
4. Paste the embed code into the comment

Using the embed code allows a player to be added right in the comment itself so others can listen to the comment right on your blog without the need to download the file or go to Drop.io to listen to it.

Another option could be to set Drop.io to tweet links to the audio comments to your Twitter account. Though this is automatic, so you wouldn’t have any control over the comments and couldn’t really moderate them.

See It in Action

How does it work? You can see hear it in action, by going down to the end of this post to the comments section and listening to my sample audio comment.

You can also try it out for yourself—Leave us an audio comment—call this blog post: (646) 495-9246 ex: 62621

Pros

• Setting up a new Drop.io account is a piece of cake and takes practically no time
• Simple to implement on your existing blog
• Dead-simple for visitors, which means they’re more likely to leave audio comments
• Most people have mobile phones with free long distance, so the call would cost nothing

Cons

• Only useful if most of your visitors are from the United States. The drop’s phone number is a New York number
• If the phone number or extension is mis-dialed, the comment will either be lost
• No option for the commenter to redo or delete an audio comment once they start
• More work for site admins since they will have to listen to each message and manually add the link to a comment
• No easy way for people to add a link to their site or email address in their audio comments

Actually, Drop.io has an API that could be used to automate a lot of these things. Maybe set up a button similar to a Google Voice call widget?

It would require more work for the site/blog owner to initially set this up. But it would also make it easier for people and easier for themselves in the long run.

Other Ways To Add Audio Comments to Your Blog

The Drop.io option is an easy way for people to record their audio comments even if they don’t have a mic handy.

Here are some other options for adding audio comments to your blog.

• Riffly–Free online service for adding audio comments to your blog. There’s also a Riffly WordPress plugin to make adding it to your blog even easier. There’s a Drupal plugin too.
• Wagwire–Paid voicemail service that can be used for audio comments and feedback. There’s a dialing widget available as well.

Pros

• Specifically designed for audio comments
• More automated that the Drop.io option
• Both of the above services offer either plugins or widgets, so adding them to your site is pretty hassle-free

Cons

• Visitors must have a microphone
• What if the service goes belly-up? Do you have the option to download the MP3s to your computer like you do with Drop.io.

Suggestions?

Have you implemented audio comments on your site, or do you know of sites that do?

Have a better solution for audio comments?

Tell us about it in the comments.

Better yet, leave us an audio comment—call this blog post: (646) 495-9246 ex: 62621

Note: This is a New York number. Long distance fees may apply.

Have fun!

Photo credits: Silver Microphone Near Laptop by Yevgen Timashov. Sound Waves Oscillating by clearviewstock. Stock photos from Shutterstock.

The post Exploring Blog Audio Comments appeared first on Es Developed - Fresh Website and Graphic Design.

There are only 26 letters in the English language, and yet so much that can be done with them.

There’s just something unique about vintage and retro typography. I could spend hours looking at all the different styles.

1908 Sears, Roebuck Catalogue

I was clearing out a garage a couple weeks ago for an older lady and found an old 1908 Sears, Roebuck catalog catalogue in among some junk.

I immediately brought it home and started thumbing through the pages.

Did you know you could buy tombstones from Sears? Blacksmith tools? Home dental equipment? A swastika hat pin? Lithium tablets?

Amazing Retro and Vintage Type

Anyhow, among the velocipedes and stereoscopes was some amazing vintage type.

The headings are very bold. There’s even a touch of art deco thrown in (see the armchair page below).

I wanted to share a few of the pages (out of over 1100 pages!) I pulled from the catalog, so I scanned a few of the highlights.

The images and fonts below were created pre-1923, so they are public domain.

PS: My favorite is the “automatic liquid pistol”. Read the suggested uses.

The post Authentic Vintage Typography appeared first on Es Developed - Fresh Website and Graphic Design.

If they keep making music long enough, every music icon will eventually release a “Greatest Hits” or “Best of” album. These albums cover some of their best songs.

In a similar vein, this week’s post is a bite-sized recap of some of the best icon-related posts (get it?) that may have slipped by you since they were 1st released.

Let’s rock!

12+ Mega Icon Sets

This is actually one of the very 1st posts published on the site. It showcases over 12 huge (in number) icon sets.

Free Icon Search Tools

Need to find a few icons for your project? Take a look at my review of some of the best icon search engine sites.

10 More Free Icon Sets

10 icon sets from DryIcons. These sets are very useful, unique and free.

Grab Free Web Design Icon Sets

While this post was targeted primarily at web designers, all the font resources listed are great places for graphic designers to find icons for use in their projects as well.

Free OpenX Admin Icon Set V2

Are you using OpenX for serving adverts on your site or blog? It’s a great system, but the backend is pretty rough looking.

That’s why I created a new set of icons (from Fugue) to “reskin” OpenX’s admin section. Think, an OpenX theme pack.

That’s Not All Folks

Expect more icon-related posts to keep on rockin on in the future here at the Es Developed Blog.

In the meantime, you should follow me on Twitter or subscribe to the feed for updates every Monday and Friday.

Photo credits: Man Playing Electric Guitar by Regien Paassen | Time Exposure at a Concert by dwphotos | Crowd Raising Hands at a Pop Concert by G Light | Stock photos from Shutterstock.

The post Icons: The Best of appeared first on Es Developed - Fresh Website and Graphic Design.

Fugue is a free icon set created by Yusuke Kamiyamane–free for personal and commercial projects.

Let’s look at Fugue and how you can quickly add icons from the set to your site via the Fugue CSS Sprite Framework.

Fugue – A Huge Icon Set

This icon set currently has over 2000 16×16 pixel icons (in PNG format and PSD) and more are constantly being added. With this many icons, there’s usually at least 1 or 2 suitable icons for whatever you’re wanting to represent. Each icon is available with or without a shadow.

This set would be great for any web app–it contains many interface and UI icons among others. For example, I used Fugue for my OpenX Admin Icon Set v2.0.

Customize Fugue Icons With the Devkit

Yusuke has also graciously included Photoshop files (PSD’s) for every icon in the set; letting you tweak and combine icons if what’s there is not exactly what you want.

License

Fugue is available under a Creative Commons Attribution 3.0 license.

If you prefer not to provide attribution (or can’t), you can also buy a royalty-free license for $49.

Fugue Sprite CSS Framework

If you’re planning on using several icons from Fugue on your website, you might consider using Fugue Sprite CSS from Alison at AlisoTheGeek.com.

The Fugue Sprite CSS framework works on the same principle as any other CSS sprite technique–only easier and faster. Way easier, because you don’t have to do anything by hand.

How To Use It

To use it, just place the single sprite image in the same directory as the Sprite CSS file. To display an icon, use the icon key that’s provided, find the name of the icon, and use that name as the class for your styled element.

Example: You want to display the leaf icon. Find the leaf icon in the list of icons in the key and copy the name of it (fugue-leaf). Include it in your CSS by adding a ‘.‘ in front of the icon name (.fugue-leaf). Fugue Sprite CSS takes care of the rest.

Considerations

Since the sprite framework contains all the icons from the Fugue set, the framework’s a bit large (684 KB total). But if you’re planning on using quite a few icons from the Fugue set, it’d be worth it.

Give Fugue a Try

Give Fugue a try if you haven’t.

If you’ve downloaded it in the past, chances are there are tons more icons added since.

And if you like the set, consider buying the royalty-free license.

The post Fugue Icon Set and Fugue Sprite CSS Framework appeared first on Es Developed - Fresh Website and Graphic Design.