Content Management Systems or CMS

You can add a lot of professionalism to your websites by adding a back-end functionality for easy posting and updating. There are free solutions to this on the web with Content Management Systems, backed up with an active and ingenious community.

Wordpress is one of the blogging platform kings. But it can also be turned into a powerful CMS capable of controlling all the content of your website. There are many valuable resources freely available on the Internet that can teach you how build your own Wordpress theme from a PSD mock-up design. One of wordpress' main attractions are its' numerous user generated plugins that can save a lot of time when trying to implement a star rating system or a "share this article" social media icon banner. Wordpress is also known for it's great SEO compliant markup and has plugins for optimized Search Engine Optimization of your pages.

Wordpress is easy to use once you get used to it (I built my first Wordpress website last week) and can bring a lot of functionality to your pages.

Joomla is among the most preferred CMS because of it's "extentions" which are essentially the same thing as plugins for Wordpress, just under a different name. Joomla has very good documentation on how to get started with their system.

Drupal is another well known and widely used CMS. Because of it's extensive use to build websites, a lot of free content is available for reference when building a Drupal theme.

CushyCMS is also a CMS application, and it very easy to implement. The application simply let's you add a class item to your xhtml tags and makes the content editable from the website's control panel after you log in.

Try one out, I'd recommend Wordpress for a first time as a lot of blogs have answers to troubleshooting questions, and their documentation isn't bad either. You can try building your own theme using WAMP that I mentioned in a previous post.

IconFinder, Cyclo.ps, and Smush.it

I have three new web tools to feature this week, all working with images.

Our first one is IconFinder, an icon search engine. They have a collection of over 120,000 icons to search from and offer .PNG and .ICO as the download options. Great little tool to add some positive user experience to your website.

The second tool is Cyclo.ps which is an image search engine, but it aggregates search results from BigStockPhoto, Cutcaster, Flickr, Fotolia, Photos.com, Shutterstock, stock.xchng, and stockvault.

The last website I have to feature is Smush.it, hosted on Yahoo! Developer Network. Smush.it is a lossless optimization tool, meaning it will reduce your image file size without jeopardizing your image's quality. This comes especially handy when you need to optimize your websites speed.

Online Storage

"Online storage? To store back-ups and other archives?" No, no, no. Not that kind of online storage. I'm talking about the kind that runs as a remote access drive, in real-time, allowing you to access your files from anywhere. In this post I'll talk about the benefits you could enjoy by switching to online storage and we'll look at a couple companies that offer this kind of service.

I recently started looking for online storage solutions to host my music library, have it stream to my iPhone over the 3G network and eliminate the need for me to sync with iTunes libraries which can be a real pain and cause a big mess.So I tried using DropBox (which also has an iPhone app).

DropBox installs itself as a folder, but all of it's content is accessible through the DropBox website and to who ever you decide to share a folder with. The free accounts offer 2GB of disk space, with an additional 250MB for every friend referral. If that's not enough space they also offer a 50GB and a 100GB plan which run at $9.99 and $19.99/month respectively.

I had issues with streaming music to my iPhone through DropBox and I wasn't exactly ready to put that much money into online storage so I kept looking.

Another online storage solution I found is ZumoDrive, which mounts itself as a remote drive.

ZumoDrive's free plan only has 1GB of space but they offer 10GB all the way to 500GB starting at $2.99/month. ZumoDrive also has an app for the iPhone so I signed up for a 25GB plan.

ZumoDrive works the same as DropBox by allowing you to share folders and also by having an interface for you to see your files through their website.

But I recently stumbled upon Online Storage Solutions which offers a much more interesting price. Their website says that they support file sharing and give you unlimited storage for $19.99/year. The service supports WebDav folders, FTP, transfer over SSL, backup with rSync, unlimited drive mount and claims to have a 99.9% uptime. What a deal!

Check out all the specs:

The only downside is they don't have an iPhone app for the service, which would require you to get ezShare lite (free) or ezShare Pro for $6.99 from the iTunes App Store. EzShare supports WebDav folder connections and can stream files to your iPhone, with the added capabilities to connect to Google Docs, FTP servers, Amazon S3, MobileMe, iDisk, Box.net and a couple others...

I think I'll be signing up with Online Storage Solutions soon. Having all of your files online means you don't need to worry about backups and they can be accessed from anywhere as long as you have an Internet connection. Combine that with a 16GB flash memory netbook and hello cloud surfing.

3 CSS tools that will save you time and optimize your code.

In this post I'll show you 3 CSS tools that will save you time and optimize your code when finishing up a project.

The first one of this list is blueprintcss which resets the CSS to allow cross-browser formatting and also provides a template of tags to speed up coding time.

W3C CSS Validator's name speaks for itself, it checks your code for errors and gives you tips on how to consolidate your code.

The last one is CleanCSS which gets rid of any unnecessary markup or spacing, converts to shorthand and compresses your code.

With these tools at hand you should end up with and optimized and compliant CSS file which will be more readable for browsers and will speed up loading time.

WAMP Server

I remember about a year ago when I first started to build websites with PHP and MYSQL, every time I needed to edit something I had to re-upload it to the server and click refresh, which wasted TONS of time of mindless dragging/dropping in FTP.

Until the day I discovered WAMP Server, which installs PHP 5, Apache and MySQL on your computer so you can test your pages on a local server.

Just save your website files in its root folder and point your browser of choice (I hope it's not IE for your sake) to localhost/. From there you can open your projects, manage your databases and find the documentation for the full extent of WAMP's Server powers. WAMP is my best friend and it will be yours too.

HTML Editors

Any designer should back their skills with a little bit of coding knowledge. Out of any coding languages, designers should know HTML, PHP and CSS (as well as their updates, i.e: HTML 5 and CSS3 are still in development, but will be the new standard soon). They are the most important as they broaden your skills and allow you to code your designs for the Internet.
In this post, we'll see what HTML editor you should use.

Dreamweaver from the fabulous Creative Suite by Adobe has a pretty clean and organized interface. It also supports multiple coding languages. I personally started coding with dreamweaver as it made my first steps towards coding easier with "auto-complete" of coding syntax.
A free trial is available on the Adobe website, but if you ever decide to buy it, you'll need to break the bank for a solid $399.

After my free trial of Dreamweaver expired, I started looking for other HTML editor, but this time, free ones. It's not easy finding a free HTML editor that doesn't look like it was built in the 1990's, and after trying 2 or 3 of them out and uninstalling them from my computer, I stumbled upon Coffee Cup HTML Editor which has a free version. The only difference with the paid version is a orange bar at the top of the window that nags you to buy the software ($49). Personally, the orange bar doesn't bother me at all, there are no other restrictions, and the quality of the software is definitely worth it.

Here's a screenie with the orange bar that appears in the free version:

Coffee Cup Free HTML Editor is worth a try. If you know of any other free decent HTML editors, please post in the comments.

Now go learn your coding skills over at W3 Schools.

Blogs and Websites - Valuable Resources

The Internet is crowded with web pages and blogs. Some of them good, some bad. And finding the good ones isn't always the easiest task. So here is a collection of the most valuable sites I have found for design resources such as textures, icon packs, fonts, vectors and brushes. Some of these also have great tutorials and articles on how to be a more successful designer.


Textures, vectors, brushes, tutorials and other freebies:

http://www.designm.ag
DesignM.ag is a great for all things design including freebies and articles.

http://www.bittbox.com
BittBox is a collection of free vectors, fonts, brushes and textures. It is an excellent collection of freebies for any designer's library.

http://www.webdesignerdepot.com
Web Designer Depot is a great place to find inspiration for projects with resources, examples, tutorials, tips & tricks and guidelines on how to be an effective and successful designer.

http://www.desizntech.info
Desizntech is yet another place to find cool icon packs, textures, illustrations. Don't be fooled by the .info extension, and check out this post, the quality speaks for itself.

http://www.abduzeedo.com
Abduzeedo is my favorite blog to look for inspiration pieces before I start on a project. Their daily posts "Daily Inspiration" are full of user submitted pictures and videos. Abduzeedo has great community input and is a very popular design blog.

http://www.colorburned.com
Color Burned is yet another place to find good resources to work with Photoshop.

http://www.webdesignledger.com
Web Design Ledger is great place to find tutorials and inspirational pieces.

http://www.grungetextures.com
Grunge Textures is a great places to find textures. They have a collection of over 1,300 high-resolution images.

http://www.ilovetypography.com
I Love Typography is a blog featuring fonts, different typefaces, styles and all things related to typography.

http://www.dafont.com
DaFont is a website with a very large collection of fonts to chose from. They feature trial fonts, and free fonts that are classified in categories.



Other resources:

Having a full-blown designer toolbox for Photoshop with all your textures, brushes and other files is a huge step in become a more productive designer. But what about the non-crafty part of web design? Here are a list of blogs that identify trends, discuss branding/marketing techniques, and give some helpful insight on approaching web design as a career.

http://www.smashingmagazine.com
Smashing Magazine is one of the corner stones of design on the web and if you haven't been there yet, I highly suggest you give them a visit. They are very informative about the latest trends and techniques in Web development and are definitely in my RSS reader (check out their freebies page).

http://www.alistapart.com
A List Apart is another one of my favorite blogs. They post 2 new articles every 2 weeks and are written by professionals in the field.

http://www.makeuseof.com
Make Use Of is a blog with technology related articles featuring new software/hardware and other techie things.

There are many more blogs and useful resources out there but these are some of the places that earned a bookmark. Feel free to post additional resources you feel should show in this list in the comments below.

Adobe Kuler color palettes

Having a hard time finding a color scheme for your project? Head over to Kuler.
Kuler is a wonderful color palette tool created by Adobe for matching color schemes together. This is perfect for when your client isn't sure of what colors they want to use in their logo or website, and best of all: it's a web-based application.
Kuler allows you to create your own color scheme and fine tune it with built-in options. You can also browse palettes created by other users, rate them and comment on them. The best feature about Kuler (and the icing on the cake) is the ability to export the color palette you generated to a swatch file that can then be opened in Illustrator or Photoshop.
Kuler can be run as an online application or can be downloaded for the desktop with Adobe AIR.


Adobe Kuler is one of my favorite tools for designing. It has saved much time in trying to figure out what palettes to use, and has always been a great source of inspiration to try out new color schemes in my projects.

I hope you enjoy this tool as much as I have and that you'll make use of it when your next design mockup comes around. (Post your Kuler swatch in the comments?)

Cheers!