You can learn almost anything from the internet these days. All most all of my knowledge in web design has come from the internet. In fact there is simply no better source for up to date information. It’s a limitless resource and if you really want to learn something, you simply have to search for articles and tutorials then put in the time to learn. So on that note, if you are looking to improve your web design skills and learn a few new tricks, you might check out this recent post at noupe.com. They have compiled a nice list of links to tutorials that mostly focus on using Photoshop to make designs for portfolio websites, blog websites, e-commerce websites and more. Check it out, “The Ultimate Collection of Brilliant Webdesign Tutorials“.

Also, if you stumbled upon this site in search of a lake tahoe web designer, check me out!

I’m proud to announce a new completed website at Klaraos.com. Klaraos came to me with their old static website, built in tables and their wordpress blog and said they wanted the two combined. The solution was to redo the site in the Joomla CMS, which worked out very well for this application. I redid the graphics to match their needs and current branding then added content including the previous blog content. Then a few extras were added like links to social networks, social sharing on articles and a live Twitter feed. I also incorporated a fantastic 3rd party plugin that auto generates newsletters every week. The newletters contain the articles that were posted that week, all hands off and automatic. Joomla was a pleasure to work with and I plan to work with it again in the future. Click to visit Klaraos.com now.

Music Video Jam - Watch and Rate Music Videos

I have a new personal side project up. It’s called musicvideojam.com. I love music videos, so this is a way for me to save ones I like, as well as share great music videos with anyone else who wants to see them. It’s a wordpress blog. I wanted to keep it real simple, but acheive a few key functions. One was to incorporate The Disqus comment system and the other was to make the posts and thus the videos rateable and have “charts”. I also acheived this through the GD Star ratings plugin. We’ll see how it works. I haven’t tweaked the graphics or background yet.. but I have some cool ideas in the works.

Check it out! Watch music videos and rate on your favorites at MusicVideoJam.com!

A client of mine runs a non-profit organization called Bianca Children’s Studio, and in respect of the recent tragedy in Haiti, has made a page for people to help the children of Haiti. Any donation amount is accepted, big or small.

Go ahead and click here to help the children in Haiti Now!

Everyone has to start somewhere right? This extremely helpful video from css-tricks.com covers the “first page” of learning what HTML and CSS is all about. If you are brand new to web design, this might be a good video to watch to grasp the fundamentals. Learn basic tags, what they do and how they work. Learn the basic structures of how html and css files relate to eachother. The video is just over a half-hour in length and can also be downloaded in Quicktime .m4v format. Check it out now on css-tricks.com

The presenter talks about good text editors to use to edit your html/css but is on a Mac. If you are a Windows user, I personally use and recommend the free text editor, notepad++. ( This is what you want, via sourceforge.net)

If you are a designer, I know you’ve heard crazy stuff like, “Lets get this background in a dark-ish purple-green”, or “how about this icon in a mellow avocado creme color”. Ok, I’ve never heard “mellow avocado creme”, but you know what I mean! And then, of course, you attempt to create the color and it’s nothing like what the client wanted, and time is wasted.

First you have to explain what HEX codes are real quick. Pretty easy right? Six digit codes starting with the “#” sign that represent a specific color. Then you might send them to this site:

ColorPicker.com
Couldn’t be much simpler. A webpage with a color picker almost identical to what you see in Adobe Photoshop. The color you are “picking” shows up in the square to the right. Use the vertical box to browse the color spectrum, then fine tune the color tone and intensity in the large square. Finally get your six digit “hex” color code starting in the “#” symbol from the box at the top.

This one threw me for a curve at first so I thought I’d share the solution. Lets assume you have a cart with a pre existing shipping method, like UPS and a bunch of regular products. But then you have a few products, say for example, gift certificates, (my problem) that weigh next to nothing, yet the minimum UPS charge is still around $6. Customers would hate that right? So we need free shipping for those products ONLY, then simply mail the Gift Certificates out via regular USPS mail and eat the cost of the stamp. (Of course this is just an example, which happened to be my problem. You may want to have products with free shipping for all kinds of reasons.)

So, the method is two-fold. First you must ALLOW free shipping to even exist in the first place in the system -> configuration. Second, you will create a custom “shopping cart price rule” to assign the free shipping to only the desired products.

Step 1

In your magento admin, first browse to system, then configuration.

Under sales, select the shipping methods category.

Open the Free Shipping tab. You only change two things.
For Enabled:  YES
For Minimum Order Amount, enter some crazy huge number. I entered 999999999. This is half of the trick. It enables free shipping as a “possibility” within the cart, yet no regular order would ever reach that level. If you already have this enabled (free shipping for orders over $50 etc..), then skip to step 2.

I’m not sure if it’s required, but I did the same thing under my standard shipping method as well. (for me it was UPS)

Free Shipping for Minimum Order Amount: Enable

Minimum Order Amount for Free Shipping: 999999999 (same crazy huge number as before)

Click the orange “Save Config” button to save your new settings.

Step 2

From the main Magento Admin menu at the top, go to Promotions, then select Shopping Cart Price Rules.

Click the Orange Add New Rule

Rule Information Tab:

Rule Name: Whatever You want
Description: Whatever You want
Status: Active
Customer Groups: As a default, Select all. (Hold the CTRL key and click)
Coupon Code. NOTHING (don’t enter anything here.)
Uses per coupon: 1000000000 (some huge number)
Uses per customer: 1000000000 (some huge number)
From Date / To Date: Leave blank to start now / end never.
Priority: 0 ?
Public in RSS Feed: no

Conditions Tab:

No changes needed, at least in my case.

Actions Tab:

Apply: Fixed amount discount for Whole Cart

Amount Discount: 0
Max. Quantity Discount Applied to: 0
Discount Qty Step: 0
Free Shipping: For Matching Items Only
Stop Further Rules Processing: NO

Apply the rule only to cart items matching the following conditions

This is key.
Click the green + button to add a new rule.
Select SKU.
Click “is” and change it to “contains“.
Click the “…“, enter the unique segment of the SKU on you free products. For example the SKUs for my gift certificates were gift25,gift50,gift75 etc.., so here, I entered “gift“. You may simply want to append your free product SKUs with the word “free” for clarity, then enter “free” back here. You can do this however you want, but be sure to not use anything that may be contained in a regular products SKU.
So for me that line read:
SKU contains gift

Click the Orange Save Rule Button.

That’s it! Try it out.
There’s another method I came across which is the same, except instead of anchoring the Shopping Cart Price Rule (promotion) to a products SKU, a custom attribute is created for that product and then the promotion is tied to that attribute instead of an SKU. See it here.

magento

After having used a couple different open source shopping cart solutions and feeling like they came up a little short, I decided to try Magento for a recent e-commerce enabled website. Overall, I am pretty impressed with the result. Magento has some solid development momentum behind it and they have already put lots of thought and time into their product. That said, “open source” or even commercial carts will have issues, bugs and hurdles to overcome. Here is a random list of issues and solutions I encountered during my tour of duty. Hopefully they can help you out with your own Magento experience.

Getting Started With Magento

So you’ve downloaded and installed the latest version of Magento and it’s running fine on your server. Now you want to start changing how it looks. The template system in Magento is a little different than others and is the target of some griping. First off, they have categorized the system into “stores” and then “store views” So you can run multiple stores on the same Magento installation. It’s a powerful feature, though I’m not sure how needed it is. The whole block of cheese is explained here in the designers guide. The second different thing is the files you will want to edit for your template ( Layouts, Templates and Skins files ) are stored deep in two different locations. So, browse to your local copy of Magento. In the root directory there are 2 folders to pay attention to. /app and /skin. The nuts and bolts, things like template files to change functionality and layout, localization files and layout files are stored in the /app folder. Graphical and design items such as css files and images are stored in the /skin directory. This Magento guide page explains it well.

The layout .xml files, ( /layout )  the localization files ( locale ) and the .phtml template files ( /template ) are located for the default theme in

/app/design/frontend/default/default/

The design related files like .css, .js and images are in

/skin/frontend/default/default/

YES, it’s a pain to navigate between these directories, especially via FTP, but after a while you won’t even have to think about it.

I wanted to try out a fresher theme than the default. The “Modern” theme is provided free at Magentocommerce.com. But nooo, you can’t simply download and install the theme. You are forced to use the “easy” download system built into Magento called “Magento Connect”. Found in the administration under system/magento connect/magento connect manager. Log in with your regular admin creds. Paste the extention key you got from the previous page in to the box and click install. Now cross your fingers. What’s supposed to happen is the theme is supposed to install dircetly onto your server, into the proper directories and everything. It’s a neat concept. Id rather have a manual install, as you need the local files later anyway. In any case, it did not work for me. I tried twice and it seemed to stall out, not installing all the needed files. So I finally found this page which actually had a .zip of the modern theme, though at version 1.1. So you could try that, it worked for me, or hunt for a newer copy of the modern theme, as Magento is up to 1.3 as of this posting.

So, using the above folder structure your folder structure would look like this:

/app/design/frontend/default/modern/
and
/skin/frontend/default/modern/

Enable the modern theme through Magento admin: System -> Configuration -> Design and under the Theme section, put “modern” for Templates, Skin, Layout and Default.

How to edit the Magento default “contact Us” page.

The default page is a PHTML page caled form.phtml

/app/design/frontend/default/[your-theme]/template/contacts/form.phtml

I took this chunk of code:

And made it into this chunk, which achieved all I needed to do. A quick hack, but it may get you started.

Magento won’t work with AOL!?!

Yep, AOL America Online strikes again. It happened that my client and all her friends and relatives were on AOL. So, while I had hours into the site and it appeared fine to me in IE and FF, to her it was “broken”. Apparently, on the IE 6 based AOL browser, the index.php page just refreshed when any link was clicked. I did some snooping and finally the good people on the Magento forums shed some light on the subject. (thread). Appearently AOL works through proxy servers which trip the alarms for Magento’s default settings for session validation. In other words, A user from AOL would appear to jump from IP address to IP address as the AOL proxy moved them around and Magento would see this as possible browser hijacking and stop the connection. So the following is a temporary hack at best.

Change the following settings in the admin
system / configuration / general / web / session validation settings

Validate REMOTE_ADDR “NO”

Validate HTTP_VIA “NO”

Validate HTTP_X_FORWARDED_FOR “NO”

Validate HTTP_USER_AGENT “YES”

Some people reported their sites working with only Validate Remote_addr turned off, but not for me, I had to disable the other two. Now, as these functions protect against session hijacking, it’s not really great to turn them off. Don’t display card details on the site. Hopefully there is a better fix in the future. Use at your own risk!

Edit the default Magento eMail Templates

How to edit the default Magento Email templates. The are stored in:
\app\locale\en_US\template\email\

Be aware that not all files in the folders need editing, and some templates have info in different spots, so be attentive.

Edit the following info:

replace alt=”Magento” with alt=”your store name”

replace Magento Demo Store with your store name

replace mailto:magento@varien.com with mailto:email@yourstore.com

replace dummyemail@magentocommerce.com with email@yourstore.com

replace (800) DEMO-STORE with (0800) YOUR STORE NUMBER

replace Monday – Friday, 8am – 5pm PST with your own store opening times and timezone

To replace the logo image, make a new image, (The default magento image is 169×49 for reference) name it logo_email.gif and put it here:
/skin/frontend/default/modern/images/logo_email.gif

You may also change aspects of the templates in the magento administration under
system –> transactional emails.

Clearing Your Magento Test Orders before going live

So, you are all set, everything works but you have a bunch of test orders you placed through the cart while trying everything out. As of this posting, Magento does not offer a way to fully delete orders. So the work around is to run an SQL query on the database, deleting the proper data, and reseting the store to “zero”.

Instead of running through all this I’m just going to link you to the site that helped me out, eliasenteractive.com

Be aware that you must replace the instances of YOUR_DB_NAME in the script with your actual database name.

Assigning Free Shipping on a Per Product Basis

I actually wrote a separate post about this. Click here to check it out now.

I hope these tips helped some of you out. Feel free to sign up and leave more tips, questions or set me right on a mistake I may have made in the comments.

Defeat the Freelancer Blues!

Freelance Switch has a useful article today, “14 Golden Tips for Beating the Freelancer Blues”. I don’t know about you other designers or developers out there, but I definitely get the “Freelancer Blues”. Usually they come around when I haven’t done any large or fulfilling projects recently. Freelance Switch’s article tries to tackle this problem with 14 tips. You know what? Not one of them is “spend more time on the computer”! It so important to not forget the basics, friends, family, exercise, good food, loving and FUN!

Read “14 Golden Tips for Beating the Freelancer Blues” at Freelance Switch now.

The pros at Smashing Magazine have put together a real nice resource for free vector image downloads. This looks like one of the best free vector pack collections that I’ve seen, and defenently one for the bookmarks. They’ve got over 50 different resources put together with subjects including, trees, abstract, waves, circles, bubbles, arrows, swirls, skulls, animals, birds and more. It basically covers the essentials if you need a quick asset for your vector based project. Enjoy!

Click to visit Smashing Magazine’s Free Vector Image Compilation

Edit: Whoa, If that wasn’t enough,
Here’s 50 more sites with free vector images, via HongKiat