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.

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.

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.

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 is an ad-blocking extension.

However, have you thought about the reverse? What about the effect ad blockers have 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”.

But do you really have to reason for concern?

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 could never appear 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. 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.

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

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.

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.

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.

Whether you’re looking to learn PrestaShop, or you’re already working with it, this is for you. We’re sharing over 50 PrestaShop tutorials, modules, themes, and resources for learning and using this shopping cart system.

For those who are unfamiliar with PrestaShop, it’s an up-and-coming open source e-commerce system.

PrestaShop is still relatively new, but it’s a nice alternative to Magento or Zen Cart for small to medium sized online shops.

What Sets PrestaShop Apart?

One of the notable features of PrestaShop is that its code is much less bloated than Magento–meaning shops run much faster. Your server’s also less likely to melt down.

PrestaShop also seems to be getting updated a lot more often than Zen Cart. The latest update was just a few days before writing this.

Another thing that sets PrestaShop apart from other e-commerce systems is that the backend is pretty simple. It provides lots of control, but doesn’t seem as overwhelming the 1st time you login (view PrestaShop backend demo)

You can also disable certain sections and menus for other users who don’t need access to some of the more advanced features.

When trying out a new system, finding information and gathering resources seems to take the longest. We’ll look at PrestaShop tutorials, guides, modules and themes to help get your shop up and running as fast as possible.

Contents of Our Toolkit

• Getting Started With PrestaShop
  • Downloading
  • Installing
  • Setting up your online shop with PrestaShop
• Tutorials, guides and where to go to find answers to your PrestaShop-related questions
• PrestaShop Modules (shipping, payments, best practices, creating your own modules)
• Themes for PrestaShop (download themes or learn how to make your own)
• Hosted Option

Let’s dig in!

Getting Started With PrestaShop

There are a few obvious things that need did before diving into PrestaShop.

Downloading PrestaShop

This is the easy part. You can find the latest version in the PrestaShop Download section.

PrestaShop also comes in 32 languages that can be downloaded as language packs from the download section.

Installing PrestaShop

Installing PrestaShop is fairly straightforward and takes maybe 5 minutes once you upload the files to your server.

The PrestaShop Wiki is an invaluable place to start and contains an easy-to-follow install guide. The install guide also provides a list of server requirements.

Advanced users may want to take a look at the System Administrator Guide. This covers setting up PHP and MySQL configuration and setting up extra security for the PrestaShop backend.

Setup Your Online Shop With PrestaShop

The Wiki has a user guide section that gives a set of step-by-step tutorials to help you setup and configure PrestaShop’s shipping, payment modules, currencies, taxes, adding products and categories, and other general configurations.

I recommend following the tutorials in order since they’ll help you learn where everything is in PrestaShop. By the time you finish the first 6 steps, you’ll know your way around PrestaShop and you’ll have most of your store setup.

Additional Resources

• PrestaShop Tutorials (SiteGround)

Tutorials, Guides and Forums—Finding Answers

If you’re just starting out, you’re going to have questions, problems and issues that you won’t be able to figure out off the top of your head.

That’s okay because you can find answers and get help from others–here are a few official places to start:

• PrestaShop User’s Guide
• PrestaShop Official FAQ
• PrestaShop Community Forum

Unofficial Resources

Beyond the official PrestaShop guides and forum, you can also search for answers on sites like:

PrestaPortal
PrestaShop news, tutorials, general questions/answer discussions, tips, modules and related resources.

Hints and Tips (@ Free PrestaShop Modules)
The Hints and Tips section provides many useful PrestaShop tidbits.

PrestaShop Modules

Modules add additional features and functionality to your PrestaShop site–whether it’s on your store or in the backend. Installing modules in PrestaShop is very simple.

While PrestaShop comes with many modules by default, you can add modules created by others or create your own.

Finding New PrestaShop Modules

Here are a few places to find PrestaShop modules:

• List of PrestaShop Modules (@ PrestaPortal)
  A mega list of PrestaShop modules.
• Newly Released Modules (@ PrestaPortal)
  The place to look for announcements of new modules as they’re posted.
• PrestaStore
  Commercial modules for just about every need (shipping, payment, backend, SEO, shop enhancements, etc).
• eCartService.net
  Free PrestaShop modules as well as tips and tricks.
• Free PrestaShop Modules
  A large collection of free PrestaShop modules. The majority of the modules on this site are free, but there are some other commercial modules as well.
• PrestaShop Modules
  Nice collection of modules–some commercial, some free.
• Presta Modules
  Commercial modules, including a 1-page checkout mod.
• AGA Software
  Commercial modules: Price Adjustments, Blog Module, and Forum Module.

Shipping Modules

Here are some useful individual shipping modules for PrestaShop:

• USPS Postage Module
  Calculate postage for United States Postal Service based on zip code (US only).
• USPS Postage Quote Module
  Provide shipping quote by location right on the product page.
• UPS Shipping Module
  Should be compatible with the above USPS module.

Payment Modules

• Authorize.Net Payment Module
• 2Checkout Payment Module
• Western Union

Other PrestaShop Modules

• Better Together
  A great cross-promotion/combination discount module from That Software Guy. Lets you suggest other products that would go well with an item plus offer a discount. This is a port of his flexible Zen Cart module.
• Export Orders
  Exports orders to CSV.
• AddStuff
  Add custom bits and blocks to your PrestaShop site. Very handy for adding custom code to your side while allowing you the flexibility to move the blocks location (think WordPress widgets).
• AddHeader
  Works with AddStuff to let you add/remove stuff from your template without touching your actual theme files.
• YouTube Module
  Easily add YouTube and DailyMotion videos to your PrestaShop site.
• MailChimp E-Commerce 360 Integration Plugin
  Integrates MailChimp tracking and stats with PrestaShop and help you figure your ROI.

Writing Your Own PrestaShop Modules

eCartService.net has an excellent 5-part series of tutorials showing how to write your own PrestaShop modules:

• Writing a PrestaShop Module Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Module Editing Best Practices

One important thing to remember about editing modules and using custom themes: Edit the core PrestaShop files and modules only as a last resort.

eCartService.net once again comes to the rescue with some important tips for editing modules and module templates within the safety of your custom theme.

PrestaShop Themes and Templates

PrestaShop lets you change the look of your shop by applying visual themes.

You can also customize and create your own visual themes–transforming your e-commerce shop into whatever you can imagine.

Premade PrestaShop Themes

There several nice themes created by talented designers. Some are free, others paid, but at the most, you should be able to pick one of these up for $30-$40.

Here are a few places to go if you’re looking to download premade PrestaShop themes:

2 Link

Just about the 4 nicest, most modern free PrestaShop themes I’ve ever seen.

PrestaShopThemes.net

Some nice premium (commercial) PrestaShop themes starting at a reasonable $29. You won’t even recognize your shop with these themes.

I Love PrestaShop

Nice collection of free themes. These themes are very simple, clean and uncluttered.

Other places to find ready-made themes:

• PrestaThemes
  A collection of free PrestaShop themes.
• PrestaShop Themes
  A decent mixed collection of free and commercial themes.
• Themes at PrestaStore
  A large collection of quality commercial themes.
• Template PrestaShop (Updated 11/02/2009)
  A few commercial PrestaShop themes.

Create Your Own PrestaShop Theme

Wanna roll your own design? These resources will help you get started:

• Creating Your Own Theme (PrestaShop Wiki)
  Recommended reading before creating your own custom theme.
• Themes & Graphics Section (PrestaShop Forum)
  Get answers to your theme questions and learn about newly released themes.
• PrestaShop Themes and Guides
  Great tips, tricks and resources for trickin’ out your PrestaShop theme.
• PrestaShop Designer’s Guide
  Helps you work with a quick PrestaShop primer as well as jQuery and Smarty (PHP template engine used by PrestaShop) basics to help you design a great shop.
• ArdianYS
  Contains some useful tutorials and tips for customizing PrestaShop themes.
• PrestaShop Theme Cheat Sheet (JPG) (See full thread)
  Cheat Sheet showing main sections of a default PrestaShop page. Helpful when editing CSS.

Live PrestaShop Stores

PrestaShop has a section of their site dedicated to showcasing live online stores that use PrestaShop. If you’re wondering what can be done with PrestaShop, just take a look.

Hosted PrestaShop Stores

Do you just want to use PrestaShop and skip all the setup and maintenance?

PrestaBox might be just for you.

PrestaBox is a hosted version of PrestaShop that lets you start selling quickly.

Conclusion

PrestaShop is a nice, light-weight, fast open-source e-commerce shopping cart system.

While it’s still a bit young and may lack some of the more advanced features of Magento and others, it is a nice option for small to medium size online stores.

PrestaShop also has a great and supportive community that is continuing to grow.

Suggestions? Tips?

Do you use PrestaShop? Have you got a great tip or resource that we haven’t mentioned?

Share with us in the comments.

Follow On Twitter

Want to know when new blog posts are published? Want more random web and graphic design goodness?

You should follow me on Twitter @esdev.

Photo credits (in order of appearance): Red Toolbox by J. Helgason | Set of Vintage Tools by Timofeyev Alexander | Close Up of Old Books by Andrea Haase | Still-Life In a Studio of the Artist by S-BELOV | All stock photos from Shutterstock.

If you’ve changed the default WordPress admin user name from ‘admin’ to something else, great. However, if you write a post as the admin, your new admin username will be displayed on your blog. Not good.

In order to help you keep your admin username a secret from would-be hackers, I’m releasing a new WordPress security plugin: Admin Post Reminder.

How Does It Help?

The Admin Post Reminder plugin is useful if you’ve got a separate editor account just for posting.

Sometimes you’ll still need to log into WordPress as an admin to change settings, use certain plugins, etc. It can be easy to forget that you’re still logged in as an admin when you go to write a post.

What Does It Do?

What Admin Post Reminder does is simple–it checks to see if the user that’s logged in is an admin. If they are, an alert is displayed at the top of the page, reminding the user not to publish any posts while logged into this account.

Regular logged in users won’t see the message.

Download the Plugin

You can view the plugin page for more details or

Download Admin Post Reminder at the WordPress Plugin Repository

Buy Me a Coffee

If you enjoy this plugin, consider making a small donation–any amount is appreciated. Thanks!

I just had an unpleasant episode that really reminded me of the need to have some kind of encryption on your thumb drives.

I was leaving a friend’s house, got in my truck and drove home. I unloaded my pockets as usual and discovered–no thumb drive.

I did find the flash drive a few minutes later, by the curb outside my friend’s house. But the whole time I was looking, I was trying to do a mental inventory of what information was on that thumb drive.

Fortunately, I don’t store sensitive client information on my thumb drives. Yet, the idea of someone else finding the drive and being able to freely access the other info on the drive was not a pleasant one.

Lesson: Don’t put personal or client/work passwords or other sensitive data on a thumb drive. If for some reason you do have to have some of that information with you, make sure that information is encrypted.

To keep people from viewing your files if your thumb drive falls into the wrong hands, here are some tools, tutorials and products to help you encrypt your thumb drive.

TrueCrypt

TrueCrypt (Win XP+/Mac OS X/Linux) is a free, open-source software that can encrypt an entire partition or storage device (like a USB drive).

Once encryption is set for a volume and then the volume is mounted, file encryption/decryption is done on-the-fly–meaning it’s automatic and transparent (ie not a pain in the rear).

Note: TrueCrypt does not currently (as of Oct 11, 2009) support Mac OSX 10.6 Snow Leopard. View a full list of TrueCrypt’s limitations.

A Beginner’s Tutorial to TrueCrypt

Adding encryption to your entire USB thumb drive or just a portion (say a directory) is pretty simple.

TrueCrypt Security Precautions

Because of simplicity, the beginner’s tutorial skips some of the more in-depth security details, so it’s a good idea to take a look at the extra things you can do to keep your information even more safe.

What if the System You’re Using Your Thumb Drive With Doesn’t Have TrueCrypt Installed?

Since you’re going to most likely be using your USB with more than one computer, it doesn’t make since to install TrueCrypt on every system.

TrueCrypt fortunately lets you run in ‘portable mode‘–meaning you don’t have to have TrueCrypt installed on the system.

You can read more about portable mode and the various options you have on the TrueCrypt site.

Note: You will need to have admin privileges on the system (OS) you’re running under in order to run TrueCrypt in portable mode.

How to Create the Ultimate Encrypted Flash Drive

A New Morning has a great tutorial that walks you through how to use TrueCrypt specifically with a USB flash drive.

IronKey USB Drive

If you’re serious about security, IronKey is the USB thumb drive for you.

IronKey is a USB thumb drive with built-in 256-bit hardware encryption.

Since encryption is hardware-based, IronKey will also run on pretty much any operating system that will read a USB thumb drive–Windows 2000+, Mac OS 10.4 and Linux (2.6+ kernel).

Also, unlike software-based encryption solutions like TrueCrypt, you don’t have to have administrator rights on the system you’re using IronKey, and there’s no software to install.

It uses internet authentication as well to protect the information and site passwords you exchange when browsing the internet via a portable version of Firefox.

James Bond’s Thumb Drive

I could imagine James Bond using an IronKey–yes, it has self-destruct features built into it.

A stolen or lost drive can be remotely disabled, or a self-destruct can be initiated–erasing all information on the drive and/or physically destroying the drive.

IronKey Personal Demo Video

IronKey Enterprise Demo Video

Keep Your Friends Close and Your Thumb Drive Closer

Remember that if you put sensitive information on a thumb drive that it’s always possible that it’ll get lost or stolen. So make sure your thumb drive (or at least a directory within) is encrypted and secure.

Do you use anything else to secure your USB drives? Share in the comments.

Photo credits: USB Flash Drive by Stephen VanHorn, Abstract View of Data Storage and Abstract View of a Data Sequence by irabbiosi via Shutterstock.

Updated: 12/04/2009–Note: This information applies also to pages as well as posts.

Anytime you see suggestions for making your WordPress install more secure, you’re gonna see the regular suspects:

• Change your database table prefixes
• Update WordPress and WordPress plugins regularly
• Change the default WordPress admin username

These are all good suggestions that you should certainly be doing to make your WordPress install more secure.

But I want to address the last one–changing the default WordPress admin account–and a practice that will render this pointless.

The following may be common sense, but the reason I’m gonna mention it is that I have never seen this cautioned on any other WordPress security tips post.

Why Change Your Admin UserName In the First Place?

WordPress automatically generates an account named admin when you first install.

This means every single WordPress install on the planet has an account named admin. If you don’t change it, any would-be hacker/cracker only has to figure out your password–making it much easier to get into your site and muck about.

Don’t Use Your Admin Account to Post

Is there a flaw in your WordPress security?

So you’ve changed your default admin username to something totally unguessable. Then you write a post and publish it from your renamed admin account.

Oops!

The whole point in renaming your account is so pranksters have no idea what username you’re using for your admin account.

True, you can change the display name for your account so it doesn’t show your actual admin username on your site.

However, if your theme displays the post author’s name and a link to sort by author or author feed.

The actual username will be right there in the link address (usually something like: ‘http://blog.com/author/admin-username‘). Oops!

Posting from your admin account completely negates the whole point of changing your admin username in the first place.

Don’t Publish Pages From Your Admin Account Either (Updated 12/04/2009)

Beyond the author link in posts, there are other places the author’s username can show up.

Body Classes on Post and Pages

Even if you remove the link to the post author from showing in your theme, the username of the author also can be seen in classes on the body tag when you view source.

WordPress by default inserts various classes to the body tag. This is so you can target pages and posts via CSS.

One of the classes WordPress creates and inserts into the body tag is the author’s username (not the nickname).

Most of the time it will look like this: author-yourusername (for posts) or page-author-yourusername (for pages)

Most (all?) current WordPress themes do not remove the author class. This means, on both posts AND pages, the author’s username can be easily discovered by simply viewing the source code.

Depending on your theme, a class containing the author’s username may be displayed in other places as well.

Fix It Now

If you’ve changed your admin username and yet have been publishing posts (or creating pages – updated 12/04/2009) using that same account, fix it now.

Don’t worry, it’s easy enough.

Here’s the quickest way:

1. Add a new user who has an Editor or Contributor role
2. Add another user with Admin privileges
3. Log out and back into WordPress as the new Admin
4. Delete the old Admin user (the one you used to publish posts from)
5. WordPress 2.8+ will ask what to do with the posts you previously wrote…
6. Assign the posts to your newly created Editor/Contributor account
7. Only use that Editor account to write posts from now on

That’s it. It only should take 2-5 minutes, and your WordPress install will be more resistant to hacks and general tom-foolery.

More WordPress Security Tips

Here are some other WordPress security tips:

• How To Keep WordPress Secure (WordPress Blog)
• Hardening WordPress (WordPress Codex)
• WordPress Security Tips and Hacks (Noupe – Beware step #9 though)
• 12 Essential Security Tips and Hacks (Six Revisions)
• 11 Best Ways to Improve WordPress Security (Pro Blog Design)
• 20+ Powerful WordPress Security Plugins and Some Tips and Tricks

WP Plugin

(Updated: 10/19/2009) Based in part on the response to this article, I’ve created a new WordPress plugin called Admin Post Reminder.

Updates

(Updated 12/04/2009) Pages and posts also contain classes in the body tag that disclose the author’s real username.

Lately, I’ve been using Thematic–a framework for building WordPress themes faster.

Thematic gives you a solid, bare-bones theme with reset CSS styles, a very basic layout, no color and limited typography. A clean slate.

Don’t Touch That Theme!

To create your theme, you don’t actually edit any of Thematic’s theme files. Instead, you make changes using a separate child theme.

It’s really powerful since you’re not actually touching any part of Thematic. You just get a nice starting place, without worries about future Thematic updates overwriting your code edits.

You don’t have to rewrite a bunch of code all over again–you’re just adding the bits that you want to be different. This works very much like the custom styles on WordPress.com hosted blogs.

I’ve collected together 40+ Thematic resources, tutorials and links to help you get up and running faster.

Thematic and WordPress Child Theme Basics

• Official Thematic Website
• WordPress Child Theme Basics
• Modular CSS
• Theme Template Directory Structure

Theme Hooks

• Thematic 0.9.6.1 Is Live (Updated 2/10/2010)
  Details about newest version. Contains new hooks and filters for even more control.
• Using Action Hooks in WordPress Child Themes
• Theme Hooks
• Adding Custom WordPress Hooks
• Using Filter Hooks in WordPress Child Themes
• Theme Filters
• Frameworks, Child Themes, Filters and Hooks?
• Overriding Parent Theme Functions in Child Themes

Thematic Tutorials

• 10 Design Tips For Your Custom WordPress Theme Built With Thematic
• Edit Your Theme With Functions.php
  Tons of fun by adding functions to edit your theme.
• How I Used a Custom Page Template to Redesign My Blog the Smart Way
  Step-by-step creating a new child theme.
• Replacing WordPress Content With an Excerpt in a Thematic Child Theme
  How to replace the_content() with the_excerpt()–without touching your theme files.
• Add “Featured Posts” to Your Thematic Child Theme
• Use WordPress as a CMS With Thematic: Part 1
• Add a Header Image to Thematic the Easy Way
• Add a Search Box to the Thematic Menu
• Adding Theme Options to WordPress Themes
  Creating theme option pages to your WordPress theme.
• ThemeShaper Forums
  If you get stuck, the Thematic Forums is the place to go for help.

Editing Parts of Your Theme With Thematic

There is a whole series of tutorials on the Thematic website for edit particular parts of your WordPress theme:

• Thematic 0.9.6.1 Is Live (Updated 2/10/2010)
  Details about newest Thematic version. Contains new hooks and filters for even more control.
• WordPress Themes Template Tutorial Series
• Working With the Index Template
• Editing Your Thematic CSS
• Editing the Header Template
• Editing the Sidebar Template
• Editing the Single Post, Post Attachment and 404 Templates

Thematic Cheat Sheets

• Thematic Structure Cheat Sheet
  A visual look at all of Thematic’s main elements–div’s, theme actions, hooks and widget areas. Very, very useful.
• Widget-Ready Areas
  Images of widget-ready areas for each major template and section of Thematic.

Thematic Child Themes

There are already some nicely-designed Thematic child themes.

Acamas

SimpleCart (js) – E-commerce theme

Audry

Gallery

Aether

Sugar Cane

Update: 3HoursTheme (by Matteo Stagi. Also includes tutorials to help you to use the theme)

Cosmos Labs

I can’t include Thematic themes without mentioning Cosmos Labs. They have released several nice child themes. Here are a few.

Byty

Street

Early Morning

Commune

Crystalline

Element Templates

These are not full child themes, but themes for specific parts of a WordPress site that can be used along with another child theme.

• Login and User Registration Page Templates For Thematic
• Replacing the Thematic Menu With a DropDown List of Categories

Hopefully these links will give you a good place to start using Thematic.

What Do You Use?

Do you use Thematic? Do you use some other WordPress framework? Tell us in the comments.

The only problem I have is that it’s only viewable to registered WordPress users with an admin role. Editors, Authors and Contributors can access the WordPress backend, but can’t view the stats.

You could always install a bloated role manager plugin just so you can allow others to view CyStats. But this is overkill unless you need to adjust roles for some other reason.

Here’s a quick way to allow non-admin users to view your CyStats stats:

1. In WordPress, go to Plugins > Editor
2. Select CyStats from the upper right dropdown list
3. Choose cystats/includes/admin.php from the list of plugin files on the right.
   Alternatively, FTP to the wp-content/plugins/cystats/includes/ dir and edit the admin.php file.
4. Notice there are several ‘8’s (or possibly ‘9’s or ‘10’s). These are the numbers for the WordPress user levels/roles. 8-10 are admins, 7-5 are editors, etc.:

   /**
    * Builds admin panem menu for Plugin
    */
   if(!function_exists('cystats_create_admin_menu')){
   	function cystats_create_admin_menu() {
   		if (function_exists('add_options_page')) {
   			add_options_page('CyStats Options Page', 'CyStats ', 8, 'cystats-options', 'cystats_admin_options');
   		}
   		if (function_exists('add_menu_page')) {
   			add_menu_page('CyStats Statistics Plugin', 'CyStats', 8, __FILE__, 'cystats_admin_index');
   		}
   		if (function_exists('add_submenu_page')) {
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Index','cystats')), htmlspecialchars(__('Index','cystats')), 8, __FILE__, 'cystats_admin_index');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Blog','cystats')), htmlspecialchars(__('Blog','cystats')), 8, 'cystats-blog', 'cystats_admin_blog');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Clients','cystats')), htmlspecialchars(__('Clients','cystats')), 8, 'cystats-clients', 'cystats_admin_clients');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Referer','cystats')), htmlspecialchars(__('Referer','cystats')), 8, 'cystats-referer', 'cystats_admin_referer');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Robots & Tools','cystats')), htmlspecialchars(__('Robots/Tools','cystats')), 8, 'cystats-robots', 'cystats_admin_robots');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Pages','cystats')), htmlspecialchars(__('Pages','cystats')), 8, 'cystats-pages', 'cystats_admin_pages');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Time','cystats')), htmlspecialchars(__('Time','cystats')), 8, 'cystats-time', 'cystats_admin_time');
   			add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Options','cystats')),htmlspecialchars(__('Options','cystats')), 8, 'cystats-options', 'cystats_admin_options');
   		}
   	}
   }

5. If you want editors (as well as admins) to be able to view the stats, change the 8, 9 or 10 throughout the includes/admin.php file to the number of the user level your want (ie 7, 6 or 5 for editors).
6. If you only want the admin to be able to edit the CyStats options/settings (recommended), don’t change the final 8 (or 9 or 10). It looks like this:

   add_submenu_page(__FILE__, htmlspecialchars(__('CyStats: Options','cystats')),htmlspecialchars(__('Options','cystats')), 8, 'cystats-options', 'cystats_admin_options');

That’s it! No editing the database.

Note: You’ll probably need to make these changes again when you update the CyStats plugin, so this isn’t a perfect solution, but the CyStats plugin isn’t updated too often.

Enjoy.

Remember the mottoes you learned when you were a kid: “Winners don’t do drugs”, and “Cheaters never win”?

Well, a little cheating never hurt anyone… when it comes to using cheat sheets, that is.

TechPosters has a colossal collection of cheat sheets for just about every program, coding language or OS that uses code or keyboard shortcuts.

Since there’s such a huge list of cheat sheets, let’s look at some of the useful cheat sheets for web designers.

HTML

• HTML 5 Quick Reference Guide
• HTML 5 Cheat Sheet
• XHTML Cheat Sheet v 1.03
• XHTML 1.1 and HTML 4.01 Extensible Hypertext Markup Language
• HTML Help Sheet (HTML 4 and XHTML)
• Form Tags
• Character Entity References in XHTML 1.0 and HTML 4
• HTML – Special Entity Codes
• HTML Common Tags

Note: If you’re looking for more resources for UTF-8 special entities, check out my earlier post, Most Used XHTML Character Entities.

CSS

• CSS3 Quick Reference Guide
• Core CSS Part 1 (by Molly E Holzschlag and published by DZone), Part 2, and Part 3
• CSS Properties
• CSS2 Cascading Style Sheets
• CSS Shorthand Guide
• CSS Shorthand Cheat Sheet by Example
• CSS Property Index
• CSS Cheat Sheet v2
• CSS2 Quick Reference Guide
• RGB Colour Codes

jQuery

• jQuery Selectors (DZone)
• jTouch – jQuery Cheat Sheets For iPods and iPhones
• jQuery 1.2 Cheat Sheet 2
• jQuery 1.2

There are a ton of other cheat sheets for javascript in general, as well as other frameworks like EXT JS, Prototype and an entire category for Mootools.

These can be found in the general Javascript Cheat Sheet category.

PHP

• PHP Cheat Sheet (DZone)
• Symfony PHP5 Framework – Admin Generator Cheat Sheet

Plus Many, Many More

There are also tons of other web design cheat sheets for MySQL, ASP.NET, Flash, Silverlight, XML and more.

Another nice thing about the TechPosters site is that you can subscribe to RSS feeds for each category and know when new cheat sheets are added.

Share

Do you use any great cheat sheets for web design that are not included here? Where do you get your cheat sheets from?

Share your thoughts in the comments.

Drop.io, an online file-sharing, storage and collaboration tool, is very flexible.

I’ve been using Drop.io for almost a year as a project site and repository for various projects. No doubt many of you are doing the same.

But what other ways can you make use of Drop.io?

Here are 10 creative ways to use Drop.io:

1. Memo pad when on the road
2. Record audio podcasts from anywhere
3. Let visitors add audio comments on your blog
4. Let users add files from your site
5. Create an online store
6. Store, send and share photos from your mobile device
7. Extra harddrive for a netbook or Linux system
8. Conference and symposium resources
9. View photo slideshows on your TV
10. Project Sites
11. Collect Design Inspiration
12. Backup Your Website and Blog (Updated 09/15/2009)

1. Memo Pad When on the Road

Great ideas can strike when you least expect them.

Question: What happens when you need to make a note for later and you’re driving or don’t have access to paper?

Answer: Leave yourself an audio message on your drop that can be easily retrieved from any computer.

How It Works

Each Drop.io drop comes with its very own voicemail number and extension.

1. Create a drop for your memos
2. Add your drop’s voicemail number and extension (found in the sidebar on your drop) to your cellphone
3. Call the drop’s number, enter your extension and leave yourself a message

All audio left through the drop’s voicemail number will be automatically converted to an MP3 and placed as a file in your drop.

To make this even easier, add your drop’s phone number, then add a pause (usually ‘p‘) and then enter the extension, followed by the # symbol.

Example:

600-600-6000 x 11111

would become:

6006006000p11111#

2. Record Audio Podcasts From Anywhere

You could also use this technique for making podcasts on the go from anywhere. Just call your voicemail, and talk away.

With a 100MB drop, you can record loads of audio in MP3 format (~400 mins of talk).

3. New Blog Commenting System

Want to set your blog apart? Instead of just providing visitors with text comments, give them the voicemail number of your drop and allow them to leave actual voice comments for you.

Approved comments could then be linked to from your drop and placed on your blog.

Audio comments might be fitting to use on multimedia sites, or blogs that accompany podcasts.

Radio stations or individual radio shows could let listeners phone in and record their song requests.

4. Let Users Add Files Right From Your Site

Drop.io also comes with a widget / code snippet (found under Add > More) that can be added to just about any site; allowing site visitors to upload files to your drop through your website.

This could be handy for people running a photo or music site. This could also be used to let clients add files to your drop without having to log into Drop.io.

How about teachers? Let your students upload their assignments/essays/homework via a website and the Drop.io widget.

There are lots of things this feature could be used for, so use your imagination.

5. Create an Online Store

Drop.io also contains PayWall–allowing you to charge people for access to your content.

This makes setting up an online store pretty easy.

Want to set up paid subscriptions for your podcast or blog? Want to sell a one-time item? All of this is simple with Drop.io.

6. Store, Send and Share Photos From Your Mobile Device

Since Drop.io gives each drop its own email address, you can send, store and share photos from a mobile device like your cellphone, iPhone, PDA or netbook.

Drop.io’s email system works similar to Posterous–attach images to an email, send it to your drop’s email address, and Drop.io pulls out the images and adds them to your drop.

Note: Any text that’s included in the email is added to each image as a comment.

Imagine working with a team–snap some pictures, email them to only one address (the drop’s), and everyone subscribed to your drop can view them in Drop.io–even Gary, who doesn’t have an iPhone yet.

7. Extra HardDrive For a Netbook or Linux

Even though most netbooks are coming with more generous harddrive space these days, having an extra bit of storage space never hurt anyone.

Drop.io has a Firefox extension that lets you add files and photos to your drop just by dragging them into your browser window.

Using this extension, it’s possible to save images and files directly to your drop without saving them to your computer first.

This would make adding files from any netbook simple as pie.

Drop.io FUSE

Drop.io FUSE is a project for mounting a drop as a usable drive space in Linux (or other UNIX-based OS).

It’s still in early development, but looks very promising.

8. Conference and Symposium Resources

This idea’s from the Drop.io API Google Group.

This can also be easily applied to conference/symposium material distribution, possibly using location. For example, a presenter can direct the audience to the app where they have full access to notes, media, etc. Additionally, the conference itself can have geo-fenced material for attendees.

Source:Drop.io API Google Group

9. View Photo Slideshows on TV

Drop.io handles viewing photos from within your drop decently enough. However, you can’t view your photos as a slideshow within Drop.io.

However, you can view your drop’s media fullscreen on your TV or monitor using Boxee and Dropboxee.

Boxee is, simply put, a media center–letting you hook your computer (Win/Mac/Linux/Apple TV) to your TV and watch video, music and photos.

Dropboxee is an application for Boxee that lets you link to your Drop.io drop. Dropboxee pulls in all your media from the drop and lets you view images full screen and run slideshows on your TV.

You can also listen to audio and view video that’s been added to the drop.

10. Project Sites

While using Drop.io as a project site is probably the purpose for which most people initially use Drop.io, I thought I’d touch on some of the benefits and clever things others are doing with it.

Using Drop.io as a project site, you can:

• Keep project files all in one place (no more searching emails for a specific file)
• Accessible from to all subscribers on any computer with internet access
• Ability to comment on individual files
• Less emails required for communication (alerts can be sent to everyone via email when files are added or commented on)
• Built-in text chat (instant team chat and file sharing) and presentation tools, as well as ability to use 3rd-party chat programs
• Receive faxes and conference calls

Here are some apps made using Drop.io and the Drop.io API:

Collab.io

Collab.io lets you create quick digital meeting rooms on the fly, using Drop.io.

Collab.io uses the Drop.io API to make creating meetings simple and painless.

USend.io

USend.io is a web app that offers a nearly effortless way to send and share files.

Just pick files on your computer, enter the email addresses of those you want to view the file, and click the Send it out! button.

11. Collect Design Inspiration

With Drop.io’s Firefox extension and other built-in features like dedicated drop email address, collecting design inspiration and snippets from the web or via your camera phone would be a piece of cake.

12. Backup Your Website and Blog

Updated (09/15/2009):
You can use Drop.io along with plugins to backup your self-hosted WordPress site or blog.

There are a few WordPress backup plugins that you can install on your site.

WP-DBManager and WordPress Backup let you set scheduled backups and have your database and theme, plugins and upload directories emailed to you at specific times.

Your theme, plugins and upload directories can get pretty big over time. Because of their size, this can pose problems for attaching these to emails, so you could use the email address for your drop instead, since there’s no size limit (except the size of the drop itself).

A 100MB drop wouldn’t hold too many backups, but it could be a decent enough option if you backup once a week or so.

Drop.io Resources

These are just a few ideas of what Drop.io could be used for. With the release of the Drop.io API, there’s the potential for even more creative uses of Drop.io in the future.

Here are some resources to get you started:

• Drop.io
• More Drop.io Uses (Includes sample demo drops)
• Drop.io API (learn how to use Drop.io’s API)
• Official Drop.io API Developer’s Blog (Developer news as well as programs/services using the Drop.io API)
• Drop.io API (Google Groups)

How Do You Use Drop.io?

Tell us in the comments below how you use your Drop.io drops.

It’s hard to believe that the Es Developed Blog has been alive and breathing for nearly a year now. This week will see the 100th blog post published, and we’d like your feedback on how we can improve.

The Blog focuses on topics that are of interest to web and graphic designers.

To keep things balanced, each week I publish 2 articles: Monday–web design, and Friday–graphic design.

Over the last year, I’ve seen the number of subscribers to the RSS feed steadily grow. I want to thank all those who subscribe–you’re part of what keeps me motivated to post each week.

I want to continue providing information that you find interesting and useful, so I need your input.

What Topics Interests You?

Please take a minute and tell me what type of posts you’d like to see here on the Es Developed Blog.

Note: The survey will close at the end of Monday, Sept 13, 2009.

Are You Interested in Graphic Design?

If you’re here mostly for the graphic design articles, check back this Friday for the graphic design survey.

We all know how blogs and blog posts are “supposed” to look. However, here are 2 examples of blogs that have an identity crisis (in a good way), and look more like magazines.

Dustin Curtis

Dustin Curtis spends his days crafting UI’s and UX’s.

His site makes fantastic use of type and magazine-style layouts. Each post is carefully laid out and makes you think twice about what a webpage is supposed to look.

The homepage is a table of contents for the site’s blog and the entire site looks like you should be able to pick it up and flip to the next page. Each blog posts includes an ‘issue’ number.

As far as I can tell, the site is simply coded in XHTML; giving it limitless possibilities (layout-wise).

Example Posts:

Your Should Follow Me on Twitter

How to Hack Your Brains Part 1: Sleep

How Niko Tinbergen Reverse Engineered the Seagull

Create the Filter

Jason Santa Maria

Jason is a graphic designer whose site and blog he’s decribed as a bit of an experiment.

Each blog post has its own unique layout, typography style and color scheme. Even the site brand and navigation changes color and style on some posts. Yet each post is built on a grid and still feels like it belongs on the site.

Typography is obvious a focus on this site and yet isn’t in your face. It’s balanced with images and the layout of the page.

What’s impressive is that Jason’s site is actually running on a CMS–ExpressionEngine. Each post has its own template that allows it to have a different layout than other posts.

Example Posts:

The Death Throes of Print?

Hello, My Name Is

What the World Needs

Pretty Sketchy

The Sum-Up

While these 2 sites are certainly pretty, we can learn more than that from them.

These blogs show us what’s possible, both with static XHTML and a CMS like ExpressionEngine.

We see that we’re not limited to the boring header-content-sidebar-footer layouts that we often associate with weblogs.

As my Dad always said, “let that be a lesson to you,” that you can teach an old blog new tricks.

A contract helps to eliminate, or at the very least, reduce the amount of misunderstandings. This is a protection for both yourself and your client and can make your life a whole lot easier later on.

It’s easy to find sample contracts online, so I’m going to focus this article on the reasons why you need contracts and what you should include in order to write effective contracts.

Why Do You Really Need a Contract?

That’s a good question.

Maybe you’re a freelancer. Maybe you’re a studio. Maybe you’re just helping out a friend or a relative. Do you really need to use a contract?

Web Design Contracts: Why Bother? (Digital Web Magazine)

Do You Need a Contract For Freelance Work? (FreelanceFolder.com)

Can I Skip Using a Freelance Design Contract With Friends or Family? (About.com)

Writing a Contract or… What Should be Included in a Design Contract?

Where do you start when writing a web design contract?

Fortunately, you don’t have to moonlight as a lawyer or speak legalese as a second language to write an effective design contract.

12 Points to Include in Your Design Contract (FreelanceSwitch)

What to Include in Your Design Contracts (theDesignCubicle.com)

Let’s Make a Deal – 15 Things You Need in a Web Contract (TheWojoGroup.com)

Writing a Web Design Contract (includes a sample design contract) (Reencoded.com)

Forming a Web Design Contract (StartupNation.com)

Writing a Great Web Design Contract (About.com)

Bulletproof Web Design Contracts (Sitepoint.com)

Sample Web Design Contracts

There are already several contract templates and ready-made forms on the internet that you can either use as is, or use as a starting point for writing your own contract.

Standard Form of Agreement for Design Services (AIGA)

DocStock.com

Zenful Creations Web Design Worksheets

In a Nutshell

Most every web design project should have a contract. Every time you begin a project, you’re putting yourself at risk if you don’t use a contract.

By including just a few standard sections and elements, much of the contract can be written without the need to pass a bar exam, and yet still protect you and your client.

There may be an occasion where you’re out of town and need to know where to find hotspots.

Where can you find wifi hotspots? We’re gonna look at some common and less common places to look for wifi hotspots.

Note: As with anything concerning important files and wireless internet connections, always use SSL and other safe computing practices. Most free wifi connections are not encrypted and do not have any security.

Where Can I Find WiFi Hotspots?

Here are some common places that are usually safe bets for finding a wifi connection.

Public Libraries

Often times libraries offer wifi. If you have a library card, you can access it for free.

If you’re not sure, just ask at the desk about their internet options.

Restaurants, Coffee Shops, Malls and Book Stores

Many coffee shops and eateries offer wifi for their customers.

If you live near a college, you may find that more businesses provide wireless internet in order to draw in busy students.

Malls sometimes offer wifi throughout the building and specific businesses may offer it as well. Just be sure the connection you’re using is actually coming from the mall or the business and not somebody “providing” a fake hotspot.

Bookstores like Barnes & Noble offer free wifi access (and comfy seating) to customers.

Many restaurants now offer free wifi. If you’re really desperate, McDonald’s offers wifi (ask for a wifi coupon at the counter).

Internet Cafes

I’m not really going to say much about internet cafes, except: consider your security and the possibility that the info you transmit is being monitored (and not necessarily by the owners of the cafe).

Hotels and Airports

Most major chain hotels offer either complimentary wifi access, or have wired connections in your room. This is handy if you’re out of town.

However, many hotels do not have a dedicated wifi connection for every single floor of the hotel.

Say you’re on the 3rd floor, you may be connecting to a signal coming from the 1st floor or the 4 or 5th floor. Obviously, the closer you are to the signal, the better your connection.

Try asking at the desk before booking your room so you can choose a room on a floor with a healthy signal.

Airports are a bit iffy when it comes to wifi connections. Some airports offer wifi, others don’t at all, and still others you have to specifically ask for a coupon or pay for a specific amount of time.

Update: If the airport you’re at charges for wifi, you might try just asking for free wifi.

For a better idea of which airports have free wifi, look at the list at OpenWifiSpots.

I also noticed an ad in Fast Company for in-flight wifi on some American Airlines flights.

Other Places to Try

You may also find free wifi at these locations:

• Public Parks
• Public Transportation
• Camp Grounds and RV Parks

Call Your Chamber of Commerce

Since most of the places that offer wifi are businesses, the Chamber of Commerce should have information businesses that offer hotspots.

Give them a call and see if they can help you.

Search Online

A faster option than the ones mentioned above, may be online wifi hotspot locators.

These work great if you know you’re gonna be out of town and in a different area.

OpenWifiSpots

OpenWifiSpots.com is a directory of free wifi hotspots in the United States.

It currently shows the locations of nearly 34,000 hotspots, and uses Google Maps to show the physical location/address of other free hotspots nearby as well.

It’s an open community project, so if you find a wifi hotspot not listed, you can easily add it to the site. You can also rate and add details and notes about the location, including the strength of the signal.

JiWire

JiWire boasts a registry of over 270,000 free and paid wifi hotspots in 140 countries.

They also have an iPhone and iPod touch app available.

Update: LifeHacker posted an article similar to this one a few days after we published this (great minds, eh?). It does include some links to nice web, iPhone and desktop wifi apps for Windows and Mac users.

Wifi User Beware

As mentioned before, always use safe computing tips when accessing the internet via a wifi connection–you never know who’s ‘listening in’.

Some quick tips:

• If logging into an account, use sites that offer SSL
• Always log out of sites when you’re done
• Never enter credit card or banking info if at all possible
• Be extra careful if you’re dealing with client information (obviously)
• Switch off your wifi/disconnect when not using the internet
• If a place/business/location looks like a dive, beware
• Remember that most wifi hotspots have no or limited security

More wifi security tips can be found at OpenWiFiSpots.com.

When you’re building a website in WordPress and using it as a CMS, you’re going to have pages that you don’t want showing in your main site navigation/menu.

How do you keep those pages from showing up in your navigation?

Include and Exclude Specific Pages

There are several methods, but most of them require hard coding the menu to either exclude specific pages from the navigation…

Or including only certain pages like so:

<?php wp_list_pages('include=1,2,3,6,19' ); ?>

These methods work, but are impractical (at least for client work) because they’re not flexible enough.

What happens when you add more pages to the site, or want to add/remove pages in the nav?

Also, could you explain how to make the needed code edits to your clients? I don’t think so.

Use a Plugin

The fastest, most flexible and easiest to use method is to just use a plugin.

My choice is the Exclude Pages plugin from Simon Wheatley.

After you activate it, Exclude Pages gives you a new option on the write panel for each page—’Include this page in user menus‘.

The option is checked by default on all the new pages you create, so if you don’t want the page to show up in the navigation, simply uncheck the box before publishing, and it never shows.

It also removes pages that have already been published.

The Exclude Pages plugin is great because clients (and you) can easily choose which pages to include in the site’s navigation. Unticking a box is a whole lot easier to explain than editing code.

Use Bookmarks For Your Navigation

Another option is to use WordPress’ built-in links to create site navigation.

Justin Tadlock offers an interesting take on using links (blogroll/bookmarks) to create navigation.

This is a pretty creative approach, and it makes logical use of your blogroll.

The only downside I see is that, you’ll have to rework your theme to incorporation this technique—it’s not a quick, drop-in solution.

Do you have any other suggestions for removing pages from your WordPress navigation? Share with us in the comments.