LOL @ Google

Why does Google send SNAILMAIL for promotions?? Overseas?? LOL!!!

They um, have my email address...

The future is now

Shopping Cart Options - Small Business / Indie Labels - Part 2

And the winner is...
Big Cartel http://www.bigcartel.com/
For a new startup indie jewellery label.

Why:

• Low entry level cost $9.99p/m
• Simplicity; of options, of admin, and conveyed through thoughtful interface design throughout their offering
• I don't have to host it 
• Has a 'store directory' for promotion within the community
• Has a sizable community / forums
• Allows a custom domain
• No commissions, just flat store fee, paid monthly no contacts
• Paypal only, no mucking about with merchant stuff, eg. no liasing to make this happen
• The client had already signed up for a free store and seemed comfortable with the admin section, so this was a good sign it would be pain free for them (me).

Result?
I'm pleased with this shop solution, it was up and running at signup, and customising the 'Sexy' theme with basic CSS to personalise it and match the clients website was done and browser tested in under a day. I havn't tried more intense theme customisations / filters as there is no budget, and no need I can see for now.

The non-technical client was able to use the BigCartel admin without instructions to add images and pages, colour options, descriptions, prices, categories etc etc.
The only caveats was explaining how to crop / resize photos in Photoshop properly... as there is no inbuilt crop / resize app in the CMS. (Photoshops better anyway).

It check it here: (Still under construction in terms of content)
http://www.yinjoux.bigcartel.com/
or here when the domains been setup
http://www.shop.yinjoux.com/

Not sure how it goes with SEO etc, but for this sort of client main traffic will come from design blog referrers, online mags and the like, so its no biggie at this stage, and they have a Wordpress main site which can be customised for the SEO goodness.

Shopify's affiliate options are enticing though, I'll keep them in mind for future, larger volume shop clients with a larger budget.

Publish to HTML5 from Illustrator using plugin

This is cool, HTML5 canvas support for Illustrator:

http://rwillustrator.blogspot.com/2010/10/web-designers-rejoice-again-new-html5.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+RealWorldIllustrator+%28Real+World+Illustrator%29

The content displays and animates flawlessly. What’s totally cool about this plugin is that it almost turns Adobe Illustrator into Adobe Flash Professional—only it publishes to HTML5 instead of SWF. It kind of blows your mind.

Wonder if this HTML5 stuff is going to be around for the long haul or if its just a fad... already seen a few job ads for specifically HTML5 developers even though its only just been released far as I know.

Browser testing - new stuff

This is a really good rundown of browser testing and resources associated
http://harrikauhanen.posterous.com/an-ultimate-guide-to-browser-testing

Good point, has testsuite of legacy browsers, modern browsers, and future browsers, for the latest beta of next browser version. Id only go so far for IE though, other just get better really.

Heres a nice list of browser specific hacks
http://paulirish.com/2009/browser-specific-css-hacks/

Heres where I found a standalone Safari 3.2 and safari 4 beta(?useful)
http://tripledoubleyou.subtlegradient.com/stuff/Standalone%20Safari/
sadly the 2.0 versions link not working anymore.

Couldnt install IE9 beta on the windows vista virtual image, maybe it needs to go on my windows 10 machine.

By the way - the newest Macbook Pro has Bootcamp - really simple way to boot into Windows on your mac, no extra vm hardware required...

Drupal latest Zen theme css browser fixes for a sub theme

The latest Zen theme for Drupal 6 has been redone it seems, and I've had very little trouble with x-browser stuff this time, except for being due to trying to make a tricky liquid header with lots of floated blocks, causing the usual problems in IE7 and below with float bugs galore.

Not used nicemenus dropdowns this time, so thats probably saved some testing time.

Added into the zen themes 'html-reset.css' (v 1.6.2.2 2010/06/26) a few YUI2reset or Eric Meyer Reset styles, these were:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0; /*YUI2Reset*/
padding:0; /*YUI2Reset*/
}


table {
border-spacing:0;/*EMReset*/
}


td {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}


caption {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}

acronym {
border:0; /*YUI2Reset*/
}



fieldset {
border: 0;/*YUI2Reset*/
}


address, cite, code, dfn, var { /*YUI2Reset*/
font-style:normal;
font-weight:normal;
}

Then here are some other fixes I added to html-reset.css:

#content th, #content thead th, #content tbody th, #content thead{
word-wrap:normal;/*For benefit of Opera (10), not giving table headers proper width automatically, figure theres rarely going to be a long unbroken url or something that needs breaking in a table header...*/
}

/*Fixes for squashed body text tables in safari and opera when occur after floated image*/
#content .section #content-area .node .content table {
clear:both;
}

And some to ie.css

legend { 
color:#666666;/*IE makes it blue...*/
*margin-left:-9px; /*for IE7, Legend is indented otherwise, IE8 fine*/
}

And a zoom:1 to something containing floats

And for ie6.css
The usual double float margin bug fixes (display:inline) and transparency fixes, some zoom:1 for HasLayout, and this one I havn't come across before:

#block-menu-primary-links ul li a { 
display:inline-block; /*List white space bug [5]*/
}


#block-menu-primary-links ul li a { 
display:block; /*List white space bug [5]*/
}

And for print.css
In addition to zens pre setup print stylesheet I added these changes or additions


/* Un-float the content */
#content,
#content .section,
#content-area {
float: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide sidebars and nav elements */

#header,

#skip-link,

#navigation,

.region-sidebar-first,

.region-sidebar-second,

#footer,

.breadcrumb,

div.tabs,

.links,

.taxonomy,

.book-navigation,

.forum-topic-navigation,

.pager,

.feed-icons,

.warning,

.sticky-header {

  visibility: hidden;

  display: none;

}

/* Otherwise, Firefox clips the content after the first page. */
#page-wrapper, #page, #main-wrapper, #main, #content, #content .section, #content-area, .node, .node .content
{
overflow-y: visible;
display: inline; /*Important for Ffox content clipping after first page, and makes content full width of page*/
*display: inline-block;/*Fixes text clipping on right side in IE6, IE7*/
}

#page

{

font-size:12pt;

}

#content{

_textalign:left; /*Ie6 is centering text...*/

}

Clearing Floats... modern methods and explanations

Probably the best explanation of using clearfix by Suzy I have seen, including explaining errors and now obselete parts.
http://www.sitepoint.com/forums/showthread.php?t=567147&page=2

There is such confusion between 'clearing floats' and 'containing floats' and 'triggering HasLayout'. They are all called clear fixes but are different things really.
eg this comment from http://stackoverflow.com/questions/2467745/ie7-float-and-clear-on-the-same-element

That is for pushing down the bottom edge of a container to wholly contain its floated children, which is a different problem altogether.

Totally! So much focus on 'containing floats' methods.

I've come across a situation where I actually need a float to just clear the one before it for layout purposes, because IE7 cant handle float and clear on the same element, it's actually not a float containment/hasLayout problem, but a serious limitation as it just cant do this layout it seems, its a real bug, no type of clearfixing/HasLayout is helping. It dont care if the float parent contains the children or not, I just need it to clear!
See demo, it is situation #3:
http://www.brunildo.org/test/IEWfc3.html

I actually think I need to use an empty clearing element in the markup... the author of that demo says elsewhere that there is no solution.
Cant even use the :after pseudo class for this weird purpose since IE7 dosn't read that...
only solution that keeps coming up
http://stackoverflow.com/questions/2614566/ie7-and-ie8-float-clearing-without-adding-empty-elements

Other good resources on modern clearfix use:
Good post explaining block formatting context, more indepth use of clearfix and how it can cause more problems if your not thinking about it.
http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/

This is an evolved clearfix hack, using a space instead of a period. (see comments for using a unicode space, and line height etc to make it even more invisible.
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

eg see the hack at the end for clearfix on the 960 grid css. uses a unicode space  and zoom:1 for IEs. I prefer zoom:1, its simple, dosnt mess with overflow, and is clearly just for older IE, and goes just in IEs stylesheet. I like it since I always rememebr what its there for, whereas an overflow property might be there for a different reason and if you forget to comment it, you might not realise its a haslayout trigger.
http://960.gs/css/uncompressed/960.css

A nice roundup of IE6 specific fixes for HasLayout and a few specific things
http://www.onderhond.com/blog/work/ie6-core-bug-fixing

A JQuery plugin that shows you when your floats aren't cleared!!!! this is cool!
http://code.google.com/p/samaxesjs/wiki/CSSFloatPlugin

IE7 CSS float bug, Never put float and clear on same element

A day of IE hell worse than any I can remember... 

Nasty encounter with a bug that happens when float and clear is on the same element, which is floated in an opposite direction from a preceding float, nothing you can do will clear the preceding float, it seems, except adding an empty div or similar to clear, in between the 2... yuk...

Mental note: Never put float and clear on same element

I did, with the floats in opposite directions, and I got this bug, situation 3
http://www.brunildo.org/test/IEWfc3.html

So I restructured the PAGE TEMPLATE, so my elements could have the floats going in the same direction. But no dice, what I got then was this bug

http://www.brunildo.org/test/IEWfc.html

The culprit being that I still had float and clear on same element. IE7 just dosn't like this. The solution luckily for me, was to remove the clear:both from the 2nd last floated element. I realised I could do this by using firebug and checking out what I could do without, and low and behold, removing the clear didn't make any difference, because of the elements length, it was longer than the space available that I was trying to clear it from.

Thats not really a fix, but it works in this layout, it self clears because it simply wont fit alongside the previous floats, lucky me.

The only other option would have been to add an extra clearing wrapper and wrap the floats above in that, or put an empty clearer div preceding the floats I wanted cleared.

Shopping Cart Options - Small Business / Indie Labels - Part 1

Compiling some for a friends jewellery label online store... low / no budget option required

Heres a quick article overviewing some of the major options, including just throwing in some paypal buttons on your existing site. (My instinct tells me it wont be half as easy as it sounds... and what about inventory etc...)
http://www.askingfortrouble.org/crafts/2008/04/23/guide-to-setting-up-shop-online/

Hosted solutions:

Shopify

Seriously considering, although the product limit is stingey.

Cons: Takes a 2% swipe at your sales.

Pros: I can be an affiliate and get some kickbacks from my friends sales... nice. This is enticing... But doubt it'll be a huge amount. 

Big Cartel

Seriously considering, product limit of 300 is pretty decent for $30p/m. And I like the word Cartel. And it has AUD currency, and it seems nice and indie, and has free trial. 

Cons: its limited to Paypal payments it seems.

Does it have an affiliate program...?? No, dosnt look like it, otherwise id be sold. Actually im over this im sold right now. 

Local company love...
Amazing Price for custom design shop, under $1K (initial cost):
http://www.magicdust.com.au/shopping-cart/shopping-cart-prices.html
http://www.magicdust.com.au/shopping-cart/shopping-cart-features.html
Although, the hosting / ongoing cost is expensive, $49.50p/m, its a good option for a small initial outlay AND a custom design.
Heres an example:
https://beatpoet.net/store/

Actually... the above is a pretty good deal IF you have the initial $895+GST, Id say this is the best deal out there... because for that price your getting a custom design AND a hosted solution. No fucking around templating / server troubleshooting.  The software feature list is impressive too, including email newsletters etc... the space, 100MB and the bandwidth, 2GB im not sure if thats enough, probably would need to upgrade to larger hosting plan, so cost might increase.

Actually when you compare other hosted solutions, eg big cartel, and shopify, this is a pretty good deal, because there is no limit on how many products you can have... just the hosting size restriction. eg. Big Cartel is $30p/m, for 300 products, and shopify is $24 for 100 products. If my client had $895 to spend Id probably go there and be done with it...

More local people:
Not sure of cost but does local designers shops
http://www.nichefashion.com.au/pages/niche_web.php

Wordpress
Theres some nice templates out there, but im wary because of WPs security stuff, do i really want to be patching updates for my friends shop for free for the rest of my life... no.

Magento: 
Never used magento, maybe because it is $2995 per year, theres a community option but not sure if it would be just for people that know what they are doing. Im guessing Magento is for serious stores, rather than smaller / hobby stores. I wonder how it compares to wordpress e-commerce? There seems to be lots of templates for it.

ZenCart:
Im thinking of going with zencart, since its free and dedicated for e-commerce, its bound to have way better features than wp shops. one things ive not considered is the actual usability for the store owner, eg printing invoices, packing slips, sales reports, inventory, etc etc, eg the back end rather than the pretty front end. this is what really counts. handling of tax etc etc. AND security. WP is so insecure and fuck all those updates.

Actually, on further inspection fuck that. I dont want to host this thing for free on my hosting, monitor security, update it, and get some SSL certificates and all that, its just a whole lot of faffing around for a no budget favour job.

Prestashop:
This looks cool, reckons has large community, here a setup tutorial
http://www.1stwebdesigner.com/tutorials/beginners-guide-prestashop/

Paypal
User needs to sign up with a merch account, heres some info
https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=merchant/compare_wp_products
(aside, the paypal site is kinda confusing to use... just like amazon and facebook, why is this so?)


Random reviews from round web:

Wordpress
I’ve had the same problem with WP-Ecommerce and I’ve had it fail on PCI scan for cross-scripting vulnerabilities. They simply don’t comment back on their forums. Its quite frustrating. I’ve had a problem where the tax was not being send to Google Checkout. Without support resolve issues like that. Its pretty much useless to my clients.

http://www.websitetemplatereviews.com/my-list-of-the-best-e-commerce-website-templates-a-big-chart
Disadvantages include having to integrate shopping cart functionality and perhaps having to upgrade your hosting to an SSL certificate level.

http://wordpress.org/support/topic/plugin-wp-e-commerce-problems-that-must-be-addressed-before-this-plugin-can-be-taken-seriously

http://www.tyroneshum.com/wp-e-commerce-review-for-wordpress/
 review of the plugins features...

Shopify
http://www.ashwebstudio.com/reviews/shopify-great-for-simple-e-commerce
Cost – As always, the cost is always an important factor when determining which e-commerce solution to use. Shopify has multiple plan levels each with their specific cost, but in general the average website will be paying a monthly fee of $24 and 2% per transaction. Many other (decent) shopping cart systems can cost around $500 just for the software. Shopify is a hosted solution meaning you don’t need to pay for web hosting and they have their own SSL certificate. With hosting being $10-15/month and SSL certificates about $10/month, that basically covers the monthly Shopify cost meaning the only thing you really pay them is the 2% per transaction fee. For smaller shops with few transactions or small transactions, this 2% is not very much and can easily be overcome with a slight shipping cost increase.
@Adrian We are upfront with our clients about Shopify, we do not try to “hide” it in any way. You can’t hide it anyway since they see Shopify’s logo every time they login! We have our clients setup an account on Shopify (using our referral link, of course) and then we get admin access and go from there. Trying to inflate the monthly cost is not possible as they will quickly find out they can get the same thing for less. Just passing the cost on to the client, through you, is a waste of everyone’s time since the client can simply pay Shopify automatically each month.

http://forums.shopify.com/categories/1/posts/39087

From my former free-lancing experience, I can tell you that Shopify is much easier and fun to theme and customize. It also has a wonderful Restful XML API that lets you do anything you want, except 1) create orders (but you can capture payments, fulfil items, close, and re-open orders with that API) and 2) generate discount codes. Everything else goes. It also has an AJAX API that returns JSON. Shopify integrates with FEDEX, UPS, USPS, Amazon, etc. It integrates with all these payment gateways, using open-source ActiveMerchant which is also used by other e-commerce platforms. Shopify contributed Liquid and ActiveMerchant as open-source projects. Liquid was inspired by Django, and is currently the best templating engine in the world (yeah, me saying).

Shopify scales very well. You have to pay more with BigCommerce to be able to sustain high traffic. With Shopify, you don't have to. Also, we use a Content Delivery Network, this means that pages load as fast anywhere in the world - and that for me is a must.
Shopify has a great theme store with lots of great free themes, its own app store (very reasonably priced apps and many free apps, by Shopify and independent developers like yourself).
I think that it is best for any independent designer / developer to know 2 solutions well in whatever field he/she specializes in. Try and make those 2 favorites not solutions that are too smilar. For example: Shopify and Spree could be a good killer match in an e-commerce-oriented toolset.

IE9 and CSS3 What can we start using?

http://www.impressivewebs.com/css3-support-ie9/

Exciting things new in IE9, CSS3:
Means Im going to use these by default, provide degraded versions to older IEs, such as no curved corners.

Opacity (no more little trans pngs)
Border Radius (woo!)
Box shadow (nice)
RGBA colours, another neat way to get transparency.

It dosn't support CSS gradients yet.

sooo... opacity best practice??
from: w3c http://w3schools.com/Css/css_image_transparency.asp

  /* for IE >9*/

  filter:alpha(opacity=60);

  /* CSS3 standard, works in IE9*/

  opacity:0.6;

but here is a note about IE8 in compatibility mode from http://www.quirksmode.org/css/opacity.html

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!

filter: alpha(opacity=50); // second!

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

Which I just tested, and its not true? IE8-as-IE7(compatibility mode) still shows transp. even without the first line, maybe because doctype is strict? (read somewhere)
also random note, for IE6, 7, they need the element getting transparency to "have layout".

**BACKPEDAL**
The children of the opacity element inherit the opacity settings. Just tried it on a menu and makes my menu list items pink rather than white because some of them are over some red graphic. Not ideal. The fix here involves messing with the markup structure, not ideal for CMS skinning, especially just to use a tricky CSS3 property. Back to transparent pngs for now... sigh. Heres the 'fix' for the situation that might come in handy in certain situations if you're set on using the opacity property.
http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html