Tech Blog Fantastic

virtual pc 2007 on windows 7

2011-07-09T22:10:00.000+10:00

see here and
http://blogs.msdn.com/b/virtual_pc_guy/archive/2009/08/19/running-virtual-pc-2007-on-windows-7.aspx

If you get the "This program is blocked due to compatibility issues" on the Windows 7 RTM then you need to do the following:

1) Have to remove Virtual PC from the

- Control Panel > Programs and Features

- Then click on the "Turn Windows features on or off" link on the left

2) Uncheck "Windows Virtual PC". After this you will need to reboot.

3) Then you can install the new Virtual PC 2007 SP1

Note: you cannot just install the Virtual PC 2007 SP1 without disabling the Windows 7 built-in Virtual PC feature.

Virtual pc 2007 can be installed here:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=24439

Offline wordpress theme development - localhost map and virtualhostx

2011-05-26T12:55:00.000+10:00

heres what worked today, and see older post for more links

to setup mamp etc
http://bitbob.com/mac-web-development-made-easy

how to install wordpress for localhost
note, I didnt use the 8888 mentioned, and just altered the settings slightly till they worked to bring up the mamp page for installing dbs
http://jayrobinson.org/2009/08/10/setting-up-your-mac-for-local-development-using-coda-wordpress-mamp/

Sidewinder theme - new sideways scroll theme from graphpaper press

2011-05-03T09:19:00.000+10:00

new theme form graphpaper press

good for artist portfolio on the cheap.

also good because it incorportaes a blog template, apart from the gallery pages

and custom shortcodes, to make columns of text on content pages, so its really flexible...

i dont really like the thumbnails nav, id just make the scroll buttons bigger so people use them instead

how to fix virtual pc 2007 internet connectivity

2011-04-27T23:15:00.001+10:00

do this when first setup

http://www.tipandtrick.net/2008/fix-virtual-pc-2007-shared-networking-nat-internet-not-working-in-windows-server-2003-2008-and-vista-guest-os/comment-page-2/

then do this
http://www.mydigitallife.info/unable-to-connect-to-internet-in-virtual-pc-with-nat-shared-networking-nat-on-windows-xp-guest/
this is basically turning the virtual pc off (proper shut down) and then vpc off and restart vpc console.

of course the internet has to be working on the host machine, this method is to get the wireless connection working.

so if its all setup but the office internet gets chaned or fiddled with, try the off and on method, to reset or reget the details

when this worked, the wireless was on and working in the host machine

also maybe in the DNS imputting screen, click on advanced, and find the 'enable netbios' radio button options. try auto vs enabled and the restart method together.

video for youtube - codecs and workflows

2011-02-17T19:11:00.002+11:00

when to transcode to a diff format
http://www.kenstone.net/fcp_homepage/when_to_stay_native.html

got youtube, seems 1080 or 720p are the go, square pixels.

h.264 is the output format, but you cant edit in FCP in that, transcode to prores 422, edit, then output.

Photo Video backup workflow, intense

2011-02-17T18:55:00.002+11:00

pro photo video workflow system
http://www.youtube.com/watch?v=Y-6EQo6it7Y

Mac OSX maintenance, routine maintenance

2011-02-17T12:59:00.000+11:00

Speeding it up if its slowed down
http://www.index-site.com/Macosxspeed.html

other links for maintenence
http://support.apple.com/kb/HT1147
http://www.macworld.com/article/133730/2008/06/maintenance_routines.html
http://www.macworld.com/article/133671/2008/06/macmaintenance1.html
http://www.thexlab.com/faqs/maintainingmacosx.html
http://discussions.apple.com/thread.jspa?threadID=1772235
http://www.macattorney.com/ts.html

safari speedups
http://reviews.cnet.com/8301-13727_7-10328447-263.html?tag=mfiredir

Checklists for good HTML and efficient CSS

2011-02-14T17:43:00.000+11:00

Efficient CSS

cascading reminder:
http://www.w3.org/TR/CSS21/propidx.html

Efficient CSS - for:
http://css-tricks.com/efficiently-rendering-css/

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942

Against:
http://clipperhouse.com/blog/post/Please-dont-write-efficient-CSS.aspx

GOOD HTML coding standards
http://css-tricks.com/examples/CleanCode/Beautiful-HTML.png

http://faq.programmerworld.net/web_publishing/a-web-standards-checklist.html

http://www.peachpit.com/articles/article.aspx?p=24011&seqNum=3

Also:
Use widths and heights for images

Video for the web - 2011 updates - HTML 5 video etc

2011-02-11T16:03:00.000+11:00

Quicktime Embed
-Nice easy export from the old Quciktime Pro 7 'Export for web' with iphone capable versions and a poster frame, and it makes some code for your site. Seems to work nice out of the box. Makes and m4v file...

Questions:
if iphone dosnt support flash, how come youtube works if that is flash video?? is it actually h.264 on the flash player, whcih iphone plays on quxiktime
http://www.apple.com/pr/library/2007/06/20youtube.html
To achieve higher video quality and longer battery life on mobile devices, YouTube has begun encoding their videos in the advanced H.264 format, and iPhone will be the first mobile device to use the H.264-encoded videos. Over 10,000 videos will be available on June 29, and YouTube will be adding more each week until their full catalog of videos is available in the H.264 format this fall.

ok so its not flv, its h.264... its flv on youtube desktop??

SKINS
A free QT skin that looks like JW player... free for non commercial use.
http://www.zenwebware.com/webware/zenqt-player/

HTML 5 Video!!!
http://en.wikipedia.org/wiki/HTML5_video
it dosnt seem ready

demos
http://www.html5video.org/demos/

!!! Definitive article on HTML5 and video formats for web 2011
http://diveintohtml5.org/video.html

Finally some instructions:

For maximum compatibility, here’s what your video workflow will look like:

1. Make one version that uses WebM (VP8 + Vorbis).

2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.

3. Make another version that uses Theora video and Vorbis audio in an Ogg container.

4. Link to all three video files from a single element, and fall back to a Flash-based video player.

Miro video encoder for all the latest formats:
http://www.mirovideoconverter.com/

go to the bottom of the above article for the full code to use for these formats, includes video tag and object tag for flash... yay!

Dummy images right size generator

2011-02-04T11:54:00.002+11:00

makes those placeholder images
http://dummyimage.com/

rich black and plain back all about

2011-02-03T15:25:00.001+11:00

http://www.printernational.org/rich-black-plain-black.php

main points:
careful with photoshop blacks and converting from rgb, which makes a rich black by default.
-careful with matching a seemingly black image with a plain back box ion a page layout program, sample acolour acurately.
-rich black can cause registration problems if type is small or line art, or reversed.
-a printer recomends low value to be safe: 30c, 30m, 0y, 100k.
-dont use rich black fro body copy, mainly for large blocks of black.
table fro here

Overview of black inks

Name	CMYK	Usage or description
Standard black	0C, 0M, 0Y, 100K	Normal black.
Rich black	63C, 52M, 51Y 100K	The 'old' adobe photoshop black.
Cool black	60C, 0M, 0Y, 100K	Black with a bluish tone.
Warm black	0C, 60M, 30C, 100K	Black with a redish tone.
Registration black	100C, 100M, 100Y, 100K	Used for registration marks.
'Designer' black	70C, 50M, 30Y, 100K	A dark slighly cool black.

also go to this page for recommended books about print design.

see also:
http://photoshopninja.com/techniques-print/better-cmyk-black-printing/
http://www.typophile.com/node/17683

TO do -write up a FAQ and make these assets for new web projects

2011-01-30T15:18:00.000+11:00

COMPILE / WRITE FAQS AND ASSETS for new web projects, KNOWLEDGEBASE.
or collect online tutorials into an FAQ page instead of making ones from scratch

What size should I make it?

show 960 x 600 page, and a grid.

give a template/instrutions for setting up in photoshop and illustrator, in pixels... if they are a designer.

about text and fonts.

about namehosting, hosting email.

how to setup your email to come into applemail. (always a problem)

make a form with all your vital passwords etc on it... (with some encryption method thingy and instructions on how to keep it secure and FTP issues)

ftp and so on tutorials

briefing questionairre template

tutorials for mac and PC.

Ultimate guide to setting up wordpress after an install

2011-01-30T15:13:00.002+11:00

http://www.problogdesign.com/wordpress/the-ultimate-guide-to-setting-up-wordpress-after-an-install/

New Indesign / print stuff

2011-01-28T19:10:00.000+11:00

GREP - find change queries
http://livedocs.adobe.com/en_US/InDesign/5.0/help.html?content=WS1952D538-1335-4b1d-BA5E-FA5A176FDC9F.html
http://www.kahrel.plus.com/indesign/grep_query_manager.html

CS5
CS5 also is meant to be unstable and slow, dont update just yet, many on forums are preferring CS3 for speed and stability...

To do:
-Find a list or automated script of common type checking like hyphens, double spaces etc etc and things to watch out for in a print doc.
-Read up once and for all about colour profiles and settings and PDF, create presets for the correct settings.
-Read up on print in general and typesetting.

Freelance / Design Business Sites - Good Examples

2011-01-28T19:03:00.002+11:00

Rounding up examples of websites that do a good job of promoting creative or production services.

Here is an example of multi-service offering company, but with each service clearly explained in a way that sells it to the prospective client and probably cross sells services they hadn't thought of too. Also there is some good articles on the blog.
http://theindesignguy.com/web-design-services/

I like the descriptions of the services, breaking up visual design services and development service, and explaining Wordpress benefits. Also very clean visually and good blog.
http://www.oliverker.co.uk/services

Good example of a portfolio site whilst employed. Friendly tone, lists and explains skills, mentions interested in freelance.
http://stina.co.uk/

New links

2011-01-20T13:25:00.000+11:00

wireframes
http://wireframes.linowski.ca/
http://wireframes.tumblr.com/
wireframes look kinda fun

page grid calculator invaluable
http://www.problem.se/labs/gridcalc/

filmmaking/video blog
http://filmmakeriq.com/

really should set up delicious...

LOL @ Google

2010-12-15T14:16:00.000+11:00

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

2010-12-15T13:51:00.000+11:00

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

2010-12-13T19:14:00.000+11:00

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

2010-12-10T00:10:00.000+11:00

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

2010-12-09T15:47:00.002+11:00

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

2010-12-07T14:53:00.000+11:00

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

2010-12-06T21:21:00.001+11:00

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

2010-12-03T10:44:00.002+11:00

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?

2010-12-02T16:37:00.001+11:00

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

Learning Resources

2010-11-30T10:54:00.000+11:00

HTML generally
http://webdesign.about.com/od/htmlxhtmltutorials/p/learnhtml.htm

HTML forms
free class
http://webdesign.about.com/c/ec/1.htm
overview of forms
http://webdesign.about.com/od/forms/a/aa031599.htm

Learning PHP
http://php.about.com/od/learnphp/p/learn_php_free.htm

W3C schools
HTML quiz, and do these certifications, and certificates
http://www.w3schools.com/html/html_quiz.asp
http://www.w3schools.com/cert/default.asp

HTML 5
http://www.html5rocks.com/
http://html5gallery.com/
http://html5demos.com/

Security malware etc, free virus scanners, external drives

2010-10-19T14:02:00.000+11:00

http://blog.trendmicro.com/new-autorun-worms-utilize-action-key/
Roland Dela Paz Says:
May 26th, 2010 at 2:37 am
@Mpu-elcom Thanks for sharing us these procedures.
After successfully disabling Autoplay in your machine, it is also a good practice to first open your removable drive via command prompt and look for suspicious files using the command "attrib". Usually, malware files have the following attributes, or any combination of the following:
System Hidden Read-only
You may also check hidden folders using the command "dir /ah". I personally practice this since worm malware like the one described above will automatically execute by just merely opening the drive via Windows Explorer (even w/o Autoplay).

Try avast and avg
free for windows - use to check exe files etc
http://www.avast.com/en-au/free-antivirus-download#tab2

http://www.avira.com/

http://housecall.trendmicro.com/au/

os x security, and network security

2010-10-14T12:36:00.000+11:00

http://www.obdev.at/products/littlesnitch/order.html

good discuss of how to get rid of a rat
http://forums.macrumors.com/archive/index.php/t-658685.html

microsoft
http://technet.microsoft.com/en-us/library/dd632947.aspx

viruses and precautions etc
http://www.webologist.co.uk/internet-news/gumblar-virus-threat-to-the-internet-how-to-remove

encryption of files
http://trac.filezilla-project.org/ticket/5530
http://blog.unmaskparasites.com/2009/09/01/beware-filezilla-doesnt-protect-your-ftp-passwords/
http://www.codefuzion.com/applications.html
http://josephbales.com/2009/01/05/encrypted-text-files-on-mac-os-x/

ftp/ ssh
http://en.wikipedia.org/wiki/SSH_File_Transfer_Protocol
http://www.panic.com/transmit/

wifi
http://stopdesign.com/archive/2005/02/07/secure-email.html

also searh corsaire whitepapers securing mac os x - good walkthrough of alot of stuff
http://research.corsaire.com/whitepapers/technical.html

Things you can do with HTML but not XHTML

2010-09-10T02:06:00.000+10:00

News to me...
http://www.sitepoint.com/forums/showthread.php?t=393445
Create parts of the page dynamically with JavaScript while the document is still loading (e.g., using document.write()).

but in XHTML you get CDATA, which is handy...

read this when time... kinda wtf I thought XHTML was just better... maybe its just too late at night and I've forgotten.

more from that article...

Is XHTML supported by all browsers?
No. Only a few mainstream browsers support XHTML, like Opera, Firefox and Safari.

Most importantly, Internet Explorer does not support XHTML at all.

If you follow certain guidelines you can serve XHTML documents as text/html (see below). That means the document will be seen as HTML, which all browsers can handle. Virtually all browsers have a parser bug that ignores the slash in self-closing tags.

Should I use XHTML or HTML?
That depends on who you ask. There are a number of technical issues with this question, which preclude a simple and short answer. In reality, the latest W3C recommendation with widespread support is HTML 4.01. Unless you actually need any of the features that XHTML offers over HTML, there is no technical reason to use XHTML.

In order to actually benefit from using XHTML, you really need to understand the fundamental differences between XHTML and HTML. Such a site will only be available to a small minority of the surfing population, however.

Some web designers and developers prefer XHTML's syntax rules over HTML's. By following certain guidelines, you can use this syntax without technically using XHTML at all (see below). There are a number of potential pitfalls with this approach, but it is a possible way forward for those who absolutely want to type
instead of
.

Cool HTML coding quality checklist / reminder

2010-09-10T01:58:00.002+10:00

Good to read through before you start a job if its been awile or check through before you launch a template etc.
http://sweatte.wordpress.com/usability/html-tips/

Make Illustrator cs3 pixel perfect for web design and slicing

2010-09-03T20:55:00.002+10:00

Ok every time I get to slicing there is some trouble with Illustrator slices being off and I forget what I did last time to make it right. Here it is.

In General:
Illustrator is more like a drafting program, and can definitely achieve pixel perfection if you set it up right.

When your drawing boxes, think in pixels from the start, and key in the values of your box dimensions as you go. If you resize then, don't randomly free transform, but key in the dimensions, or, free transform using snap to grid/pixel. Its less to clean up later on.

Page grid:
For designing and rough draft stage I like to have my page grid set to:
Preferences > Guides and Grid > Gridline every 60px, subdivisions 6, which gives a 10px grid and works well for the 960grid designs. Snap to grid and 'try' and draw your boxes using whole numbers as you go.

For slicing stage I change it to Gridline every 60px, subdivisions 60. So it is now a 1px x 1px grid.

Before slicing I go through the boxes and make sure all heights and widths and x,y,-co-ordinates are whole numbers, and zoom right in to affirm they are on the pixel boundaries. Sounds laborious but usually there aren't that many things to slice with CSS3 and favouring a minimalist aesthetic.

For boxes with old school drop-shadows of say precisely 3px, it is really important to get pixel perfection, or drop-shadows will be cut off and boxes misaligned.

Also for your setup, View > Check 'Snap to grid' and View > 'Pixel Preview'. Toggling pixel preview makes the 'snap to grid' item change to 'Snap to pixel'. If you cant find 'Snap to pixel' then try toggling 'Pixel Preview' on and off.

Slice tool caveats:
CS3 slice tool is unwieldy and annoying. It is easier to control the slice tool by first dragging near where you want the slice, then adjusting the slice using the x,y co-ordinates and the width and height (in toolbar across the top). This way you place the slice in exactly the right location to the pixel.

Knowing intimately what size your slices are will help anyway when it comes time to code the layout. I find slice stage a good time to write down the dimensions of the boxes, padding, hex values and the like on a paper printout of the layout, so all the values are right there to glance at when you want to code it up (find glancing at paper faster than switching between windows)

Don't expect to batch slice your entire page in Illy and have it be perfect, my version definitely has a 1px shift buggy thing that crops up.

Save each slice one by one by going File > Save for web and in the web previews, zoom in to 400-800%, and check the slice boundaries are on the correct artwork boundaries.

I found the slice boundaries were sometimes shifted exactly 1px to the left when saving for web.
Not the width, just the location of the slice moves.
Don't ask why, simply go back to the artwork, and shift the x-coordinate of the slice box 1px to the right (eg add 1px to the x-co-ordinate value). Then, when you go 'Save for Web' zoom in again, the slice will be aligned magically on the artwork boundaries.
So the x-co-ordinate of the slice is technically incorrect now, but if it slices in the location you want it to, that's all that matters.

This is the artwork and slice on the artboard, both have their left edges located at x=660px

But this is what the (bottom of the) slice looks like in Save for web preview window at 400%, it is actually slicing exactly 1px to the left of the artwork box.

So change the actual x-co-ordinate of the slice to be 661px, which, as you can see here is NOT aligned with the artworks left edge in reality...

But in the save for web preview window - it is now aligned with the artworks left edge! Go figure!

Time to buy CS5, apparently CS5 does great pixel prefect slicing and artworking.

More tips:
Set stroke alignment to be 'Inside' or 'outside' not center.

For 1px lines, make the stroke 0.999px or something, otherwise it gets blurry.

Also it is easier to align 1px rectangles to a pixel grid than 1px lines, which naturally sit on the centre of the gridline.
So try and draw filled rectangles rather than using the line tool with a stroke.

css3 buttons

2010-09-02T22:18:00.001+10:00

The technique described here is is my favourite its benefits are:
http://papermashup.com/pretty-css3-buttons/

Newer CSS3 browsers get rounded corners, text shadow and box shadow and gradient.

Non CSS3 capable browsers get a square coloured gradient button, which looks styled enough to suffice as a button.

I prefer not to have the gradient in CSS3 for two reasons
1/ I want non css3 browsers to get some love
2/ I want the button code to be adaptable to different coloured buttons easily, and simply use the background property for changing the button colour.

Uses a transparent .png for the gradient, which means it is adaptable for any colour button, AND can be seen in IE7, IE8, and IE6 with alpha image loader filter if you care.

see also:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
http://somadesign.ca/2010/realistic-looking-css3-buttons/

http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/

Drupal Zen theme IE fixes

2010-09-02T20:56:00.000+10:00

IE7

When using a background image as a bullet for a custom bullet list, IE7 was showing the default bullet AND the background image. Solution:

On ul:

list-style-image:none;

list-style-position:outside;

list-style-type:none;

and on li:

list-style-image:none;/*Benefit IE7 else double bullet*/

list-style-position:outside;/*Benefit IE7 else double bullet*/

list-style-type:none;/*Benefit IE7 else double bullet*/

this made the default bullet go away.

Background image bullet 'centering' vertically, a bit off on IE when text size is set to 'larger'.

....

floated block links like for navbar etc, if they show up in IE6 as stretching to the full width.

/*Fixes from above as suggested for .primary and .secondary used here for .nicemenus*/

ul.nice-menu-down li a

{

_display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */

_di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */

}

ul.nice-menu-down

{

_width: 100%; /* Otherwise IE5 treats the ul as floated */

_w\idth: auto; /* Reset to auto width for IE6 */

}

possible bugs

weird, ie6, 7, 8 all display the same...

http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/d03ccc6e-bd74-4ce1-af96-b4e496704d85

As you can see, div.floatleft should have a bottom margin of 10px but it doesn't appear in any of the IE versions. It only happens to left-floated items, and the margin is correctly applied to right-floated items in the "clearfixed" container. There are work-arounds like using padding instead of margins but this is a bug and I was disappointed that it didn't get fixed in IE8.

this seems to be happening to me, using padding on the bottom altered layout across IEs which seemed to be ignoring the margin., except im using 1.0 strict doctype... all validates fine.

a- doctype isnt written correctly

b- IE8 is in quirks mode or emulating IE7

test with padding that will show it up. also might mean the doctype is not correctly written.

wtf ex http://www.webmasterworld.com/css/4041519.htm

Which makes me wonder if your site isn't listed in the blacklist MSFT keeps of sites that get IE7 mode forced onto them, and hence IE8 will continue to act up like IE7 does till you manage to get out of that list.
IE8 shows that list on this pseudo URL: res://iecompat.dll/iecompatdata.xml
Or if you managed to turn on the "display all sites in compatibility mode switch".
Brings us to establishing you do to have IE8 in that dreaded compatibility mode.

Equal Height Search Forms

2010-09-02T19:19:00.000+10:00

I have long thought it was impossible to have equal height search forms cross browser.
Equal heights for form text and from submit button are really important when the search field is embeded within a banner design with a specific position, margin etc. The header instantly looks messy if this form element isn't styled to be equal heights and pixel perfect.

The search form in Drupal is a common header element block, I'm hoping to come up with generic styling for it that is cross browser, using some nice css3 properties. Ideally, to adapt it to each site, one only needs to change the background and border colours of the form elements.

Anyway this solution looks promising:
Example text page
http://www.onderhond.com/testpages/search-form.html

Write up and code:
http://www.onderhond.com/blog/work/equal-height-search-form

Email signatures / Outlook Stationary / HTML email

2010-08-25T02:03:00.005+10:00

Having branded email stationary is great but you need to do it right or it will look screwy. If your only emailing from Outlook users to other Outlook users, much of this can be disregarded, just make your signature etc in Outlook.

Email signatures generally

Really nice email signature designs, inspirational gallery, good prices. they use images for main signature, and then html text above for customisations, it seems. i imagine this is more reliable than trying to get html formatting to work.
http://www.stationerycentral.com/sitesamples/signature-ss2.html
instruction for use
http://www.stationerycentral.com/pages-signatures/TryIt-09.html

adding a signature for Outlook, Gmail and Mac Mail
http://brassblogs.com/lab/creating-an-html-signature-file-for-just-about-anything

adding sig to appdata and hoe to show hidden folders (must be .htm not .html)
http://help.lockergnome.com/office/Outlook-2007-signature-issues-images--ftopict944451.html

Stationary Generally
Loading the signatures
http://www.dakno.com/blog/loading-email-stationery-in-outlook-2007/

Good FAQ on capabilities of supplied stationary/sigs
http://www.website-factory.com/FAQ.htm

add stationary to App Data instructions
http://www.office-outlook.com/outlook-forum/index.php/m/578302/

Outlook 2007 related
Basically Outlook writes over your HTML, in signatures or stationary files. It uses its own, and is very unreliable and wacky when replying multiple times to a different mail client, even to and from Thunderbird. Don't bother coding HTML carefully if your planning to use it as an Outlook stationary or signature, because Outlook will mangle it anyway. Its probably easier to half design it in Outlook if that is what your client will be using. DO NOT think you can send pixel perfect HTML email from Outlook. Use Campaign Monitor or Mailchimp, as they don't mangle your code.

There is a known problem with Gmail and Outlook where Gmail adds double spaces. This is a gmail thing. Combined with an Outlook thing of people typing hard returns ENTER when they want soft returns (SHIFT+ENTER). Either set your
margin styles in outlook to something, and press hard return only once not twice. Press soft return when simple wanting a line break.

This is a really useful write up on how to code FOR Outlook, with a simple and more complicated example. recommends not to use div, p or table tags, as MS OL inserts a hard return after these. ??
http://oomoo.wordpress.com/2008/08/19/outlook-and-the-double-spaced-signature/
He puts the line break self closing tag inside the span tag and Before the text of each line.
also makes a span for just containing line breaks which are a smaller font size.
also, can use the outlook hard returns to your advantage in design.

Tutorials for clients screencasts from MS on how to create and switch email sigs and the like
http://office.microsoft.com/en-us/outlook-help/multiple-signatures-for-your-multiple-roles-RZ001189227.aspx?section=17

This is how to add signature file as a htm into the App Data folder, using Run command....
http://how-to-solutions.com/html-signature-outlook-2007.html
ditto sortof
http://lilypie.com/help.php?s=answer&id=320

how ot get body background image in outlook
http://www.campaignmonitor.com/blog/post/1777/body-background-images-outlook/

Outlook 2007 double spacing problem
fix permanently for all messages, from:
http://thebackroomtech.com/2008/04/23/howto-fix-the-outlook-2007-double-spacing-problem/

Follow these steps in order one by one…
Open a new message.
Click ‘Format Text’ in the tabs at the top.
Left click on ‘Quick Styles’ so that it drops down.
Right click on ‘Normal’ and choose modify.
Where it says ‘Style for following paragraph’ choose ‘No Spacing’.
Then select the radio button below that says ‘New documents based on this
template’.
Click the little format button near the bottom of the dialog window and
select ‘Paragraph’ from the drop down.
On that new window, make sure line spacing is set to single.
Make sure the Spacing -> After value is set to 0pt.
Ensure that there is a check in the box that says ‘Don’t ass space
between……’
Say OK to that window.
Say OK to the window under it.
Close that new message.
Start a new message and try some typing …

there are other optional fixes here, few different methods.
http://www.slipstick.com/problems/dblspace_html.htm

HTML in email Generally

Quote from: http://www.epigroove.com/posts/66/html_emails_vs_gmail_yahoo__hotmail

When I say every single element has to have its own inline style, I mean every single element. Unless you want to leave the styling up to the web mail client, you have to set the style of each element yourself. You couldn't just set the font family and size of a tag wrapped around a tag, you had to set the font styles in the tag.

* You can't have hover and visited states for links. Since you can't set the link colors and states globally, each link has to have its style set manually, and there's no way to set the hover and visited states this way (that I know of).

Great HTML email template and advice with rounded corners and 2 columns, here: http://commadot.com/cross-client-html-email-v2/

Losts of info listed here on what you can and cant do
http://www.reachcustomersonline.com/2010/01/23/09.27.00/

Design Guidelines
http://www.campaignmonitor.com/design-guidelines/

Primer on HTML in email and Outlook
http://mailformat.dan.info/body/html.html

Flightchecking HTML email code
Great table of what CSS properties you can use in what Mail clients
http://www.campaignmonitor.com/css/
Great table of what is supported by Outlook 2007
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
http://msdn.microsoft.com/en-us/library/aa338201.aspx#Word2007MailHTMLandCSS_SupportedHTMLElementsAttributesandCSSProperties
Or use this validator that probably checks for you
http://www.microsoft.com/downloads/details.aspx?FamilyId=0B764C08-0F86-431E-8BD5-EF0E9CE26A3A&displaylang=en
This is also a good list of thing
http://www.reachcustomersonline.com/2010/01/23/09.27.00/

List of things to check in your code and things to avoid:

Some good ones here (June 2010): http://www.slideshare.net/stevehong/coding-html-email-4240061
Use of:
Padding: Outlook 2007 dosn't support on a p or span tags but does support on h1, h2, h3 etc, a tag.
Margin: Hotmail apparently dosnt support CSS margin. This will make for messy paragraph spacing....
Display: eg put display block on an a tag so it can have padding top. Outlook 2007 supports display on an a tag.
background-color: to be safe, also put bgcolor= in html on the td tag or table tag you want a background color for.
Style the alt text for images: Put styles onto the containing td or a tag that contains an img. If the image is turned off, the alt text will usually be nicely styled. Good for logos etc in banners.
background-repeat: gmail dosn't like, use html to stretch the image to full table height

Havn't personally encountered yet but good to be warned:

font-family: Gmail doesn’t like quotes in font names. Don’t use “font-family:’Lucida Grande’,” but rather “font-family:Lucida Grande”.
Line-height: Gmail doesn’t like percentage values for CSS line-height. Outlook 2007 creates too much line-height when em sizes are used. Use pixel sizes.
background-image: Gmail and Hotmail don’t display background images declared with CSS, so use the background attribute of the table and td tags. STAY AWAY FROM BACKGROUND IMAGES IF POSSIBLE THEY ARE BUGGY / HARD.
img: Hotmail sometimes adds extra space in cells with images. Try a line height of 70% of the font size like this: 12px font, 8px line-heights.
Also, no need to have self closing image tags (it aint XHTML). And image tags don't have an end closing tag, neither do break tags.
td: Yahoo uses non-standard align and valign default values on table cells, so set them explicitly.
cellspacing: Yahoo has styles that make cellspacing ineffective on tables. Use cellpadding instead.

Gotyas
Dont use test in the subject line for your emailing testing, it might get flagged as spam, use something else like lorem ipsum.

More tips here, very useful ones
http://blog.michaelfasani.com/2008/07/12-tips-to-help-you-build-robust-emails/
of the most poignant:
list of browsers and clients to test on... (24 in total, drag...)

AOL Email (IE6, IE7, Firefox, Safari, Opera)
GMail / Google Mail (IE6, IE7, Firefox, Safari, Opera)
Yahoo Mail (IE6, IE7, Firefox, Safari, Opera)
Windows Live / Hotmail (IE6, IE7, Firefox, Safari, Opera)
Lotus Notes
Mac OS X Mail
Outlook 2003
Outlook 2007

Tables: Recommends not using ANY table cellpadding, cellspacing, border, and I think also margin, padding on tables. This is a bit purist I've found a bit of cellpadding is ok and some non essential td padding works most of the time. But good point, use td tags with widths on them to make the padding etc, like columns rather than padding.

This is the most important point

RULE 4: AVOID TAGS WHICH MAY HAVE LINE-HEIGHT APPLIED TO THEM BY THE CLIENT
Avoid using the P and the BR tags as differences in line-height will cause your email to brake and appear differently from client to client. Instead use tables and cells with fix widths and height to pad out your content and create paragraphs and margins.
Use spans if you can, spans seem neutral to this effect.

Also, I've found SPANS ARE YOUR FRIEND. Wrap them around misbehaving things and they work some magic, especially for Outlook 2007.

Recommends a very specific link tag html and css - check the site to get the example.
Remember add Display:block for hotmail on img tags

Found this relevant today, also important for a tags inside tds. Best to avoid ANY blank space in TD tags. Careful when using DWs autoformat code, youll have to remove the spaces by hand afterwards.

RULE 9: ENCAPSULATE IMAGES INSIDE THE TD TAG
If you have images inside TD tags, make sure you delete the white-space around them. Some clients will turn this whitespace into a new-line or a and just generally do weird things which can break your design.

Email Ettiquite and Disclaimers
http://www.emailreplies.com/#disclaimers
http://www.emaildisclaimers.com/Sample_disclaimers.htm

HTML Emails and email marketing resources

2010-08-17T22:29:00.003+10:00

Brushing up on HTML email design, it's been a while...
Testing
This lets you screenshot your email on different clients and highlights wrong code
http://www.emailonacid.com/

So does this - also on phones
http://litmusapp.com/email-previews

Mailchimps does too...
http://www.mailchimp.com/features/power_features/inbox_inspector/

Guide to css support in email clients:
Great quick reference table
http://www.campaignmonitor.com/css/

Design Helpers and Templates
Convert regular CSS to inline after designing using this app
http://premailer.dialect.ca/

Templates
http://www.campaignmonitor.com/templates/

Design Tips
really good general article
http://www.reachcustomersonline.com/2010/01/23/09.27.00/

Basic points summary from my research

Make it under 600px wide
Use tables not divs
Images should be hosted on a fast public server, not embedded
Some clients eg outlook 2007 don't support background images (is there any other way to get a background image?)
Use inline, unabbreviated CSS
Use nested tables rather than borders and padding
Assume images will not be shown in preview, dont rely on images for critital info, make layout still be solid without images eg by providing a background colour for the area where the image would go and specifying a height and width of each image. (unless you want them to disappear from view when not shown... this could be useful.)
Dont use one big image it is considered spammy
Keep image to text ratio weighted on the side of text
Keep it simple
Add a link to view the email as a webpage or as plain text
Add a forward to a friend link in the footer
Test it using an online testing tool, and also test its spam rating
Comply with spam act
Do double subscribe action to keep list only with people who really want to be there
Unsubscribe people after 3 failed deliveries
A professional email sender service eg Mailchimp is less likely to be considered spammy than BCCing to hundreds of people.
Keep images small and well optimised, dont make people wait of clutter their inbox
Offer unsubscribe link and physical postal address clearly visible and readable in the footer, and a link to privacy policy.
Use jpgs rather than pngs
Permission reminder - to reind people why they are gettings your emails
Always include a plaintext version (and if you can, format that for easier readability)
Get receiptients to add you to their address book / whitelist ... need more info on this
Use alt attribute for images esp for gmailers
explicitly set margins for each paragraph
Create a background colour using a 100% width table, nest fixed width table inside this (600px wide max... narrower if targeting mainly iphone etc.
Put your logo in top left corner, near edge, never right as it might not get seen. Brand recognition is very important, if they don't know who you are they might flag you as spam.
Style links explicitly otherwise they may be styled by email client
DONT use borders on tables, they render inconsistently, use extra tds around the td you want a border for
DONT nest tables unless you need to, it gets complicated... (other say nesting is more reliable though for margins and padding replacement.
Hotmail adds random padding to images, to remove this add a style = display:block to all your img tags
Character encoding - this is where a wsiwug email designer app comes in handy for clients making their own emials. changing " to " - I dont thinnk this is really that important, but its most bulletproof.
You cant reliably use background images...
New hotmail removes background colour and table centering... using div though... in hotmail viewed in other than IE? http://blog.exacttarget.com/blog/features/0/0/design-tip-of-the-week-email-rendering-in-hotmail-recent-changes

Really good article from 2009 with code examples of common pitfalls and workarounds
http://24ways.org/2009/rock-solid-html-emails

Excerpt from Mailchimp its a great service, this is a good primer article and lots of good links and info about spam laws etc:
http://www.mailchimp.com/articles/stupid-html-email-design-mistakes/

Tips for image-to-weight ratio:

Lots of small thumbnails seem to work better than lots of big graphics. Even if you have lots of text to balance things out.

Just can't include tons of text? If your content is just one or two lines of text, don't insert more than one or two graphics into the email.

We've seen emails with very little text, and one giant graphic get past spam filters. But the image was very well compressed, and the HTML code was spotless.

and:
http://mailchimp.blogs.com/blog/2007/04/how_your_email_.html

So here are a few tips for anybody that designs or writes email marketing campaigns:

1) Assume your recipients will have images turned off by default. How does your email look?

2) Assume your recipients will only read your emails in their preview pane. Does enough content display in that limited slice of real estate? Here's an email in AOL9's preview pane.

3) Assume that your email will be reviewed by an IT person who will take all of 3 seconds to judge whether you are a trusted sender, or a spammer. Are you trustworthy in the blink of an eye?

Technique to get background image working
http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/
other experiements with text over image... looks hard...
http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

Other interesting info
From:
http://www.smashingmagazine.com/2007/10/16/best-practices-for-bulletproof-e-mail-delivery/
This article also contains useful links to spam testing software

Sending email Tuesday / Wednesday 2-3pm = Increased Response. Source

Slow down your newsletter delivery.

Instead of using tools which boost your newsletter through mail servers to achieve “instant delivery” prefer “slow” delivery tools. Avoid sending mails to multiple (dozens or even hundreds) recipients using CC:-attribute. Use professional newsletter software or professional e-mail-delivery services. “When ISPs detect a flood of email, it looks like the work of a virus or a spammer.” Source

HTML is OK, but only if MIME-Multipart is used.

When sending newsletters as HTML make sure that also the plain text version is attached. Messages sent in MIME-Multipart-Format are automatically sent in a way that subscribers without active HTML-Viewer still get a decently formatted e-mail. It is important that both plain text and the HTML-version have the same or very similar content. The percentage of text should be higher than the percentage of HTML or images. Keep your message size between 20 and 40 Kb.

Content Tips
Offer value, dont piss people off. Send good relevant content and good special offers.
From: http://designshack.co.uk/articles/css/10-tips-for-designing-html-emails

As a designer, help them resist this urge by designing a template that showcases a little information extremely well rather than a lot of information very poorly.

The key here is quality over quantity. No on will read a thousand word marketing email. You have, at the very best, 3-5 seconds to grab the average reader’s attention before they hit delete. Accomplish this with fast loading, attractive visuals, concise copy and clear descriptive headers.

Include Permission reminders in the copy or footer. "You are receiving this email because.... It can be part of your unsubscribe link text

http://www.mailchimp.com/blog/what-makes-a-good-permission-reminder/

Funny quote from this:

But the permission reminder isn’t just for your recipients’ sake. You see, sometimes email gets reported as spam, even if it’s not. ReturnPath did a survey where 14% of people said they always hit the “report spam” button, even if they signed up for the email. People forget. People are lazy. People are mean.

Really good tip from this. Theres detailed info about why lists should be segmented and ideas of what to write in the permission reminder if you have actually bought the list or are sending to another organisations list:

Setup differnet lists, and send very different welcome emails to them, each with different permission reminders.

Instead of writing, “You’re receiving this email because you’re a customer” try something more like, “You’re receiving this email because you’re a customer who opted-in for emails when you purchased something from our online store.” Or, “You’re receiving this email because you signed up for email specials while making a purchase at one of our stores.”

CAN SPAM Act
http://www.ftc.gov/bcp/edu/pubs/business/ecommerce/bus61.shtm
All advertisements must be identified as an advetisment.

The actual process of email marketing and things to consider...
http://www.digital-web.com/articles/ten_tips_for_email_campaigns/
segment lists planning, set up a newletter from account, clean emails from the account

Design Inspiration
Here is some pretty darn good looking email designs.
http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

Wow here is a whole archive of html email newsletters, including commercial ones from some big companies, you can browse through and look at their coding techniques to get ideas...
http://www.newsletterarchive.org/

Money
Campaign manager lets you mark up the clients email delivery costs invisibly, so that every time they send email you profit. This is a pretty good feature.
http://www.campaignmonitor.com/features/powerful-templates/

But I don't want to use that monkey website I don't have time to learn a new software just to email...
So Mailchimp campaign manager etc makes it really easy to send emails, but what if the client dosn't want to use this? What if they want to send their emails from Outlook?? / Thunderbird / Seamonkey or whatever...

Why not to use outlook:
Not outlook related, but people using outlook probably also want to send from their OWN email address from their own email host provider...
you can do it by adding it in as a signature or stationary, but from this really good article why this is a bad idea http://www.reachcustomersonline.com/2010/01/23/09.27.00/

People usually ask this question because they want to send html email from their internet account. Don’t. Unless you know every person on your email list, too many bad things can happen if someone tags your email as spam. If you send email through your business domain name, for example, all your email will be tagged as spam. And you will be left to figure out how to get off any blacklists. Even if you know everyone on your list, your internet provider may have a limit to how many messages can be sent and may boot you off their service. It’s far less hassle to pay an email service provider to deliver your email and worry about spam blacklists.

http://www.mailchimp.com/articles/top-html-email-coding-mistakes/
from mailchimp but they have a vested interest...

Trying To Send HTML Email Campaigns With Outlook Or Outlook Express

Lots of people try sending their HTML email newsletters with Microsoft Outlook, or Outlook Express. This is a big mistake. For starters, Outlook won't send your email in "multipart-alternative" format. Multipart format means that an HTML email is sent with a plain-text alternative embedded along with it. That way, if someone's email application can't read HTML email, the plain-text version displays instead. Also, Outlook will send all your images along as attachments, which won't always work. Images in HTML email must be hosted on a web server, and your HTML code should point to them with absolute paths. Add to all that the fact that Outlook won't help you track email clicks and opens, manage unsubscribes, or process and clean bouncebacks from your list. Finally, using your desktop email application to send email marketing campaigns is a bad idea because your ISP may suspend your account after a certain amount of bandwidth has been reached (and some ISPs limit outgoing email to 500 per hour).

Outlook generally and Outlook Stationary

Site describes how to make an email in HTML format in Outlook, but what I want is how to use a template. I think this is called 'Stationary'
http://www.emailaddressmanager.com/tips/html-email.html

Tutorial in screenshots of how to load a HTML stationary theme in Outlook 2007.
http://www.distinctionhq.com/Blog/January-2010/Microsoft-Office-Outlook-2007-Email-Stationery

More instructions for loading the theme
http://www.bigpromoting.com/index.php?page=adding-stationery

Where else can put the outlook stationary template
http://www.eggheadcafe.com/software/aspnet/35073696/alternation-file-location-for-stationary.aspx

Stationary templates must be .htm rather than .html
General discussion of email signatures, different metods in different versions of Outlook
http://merill.net/2008/03/creating-html-signatures-on-outlook-2007/

@apwalsh this recommendation was for setting up a personal signature. For your scenario I would recommend using a batch file to create the signature when users login to the domain. The batch file can pull the image from a central location and update it on the user's profile.

This is how our corporate signatures are created at my workplace.

Drawbacks of sending ghetto HTML emails made in Outlook / Mail / whatever.

You're right, stationary is essentially HTML, but it sounds to me like the big difference here is that Apple Mail is embedding the images in the email itself (Which I believe is also true of Outlook stationary). This works fine for casual mailing but has major drawbacks for bulk mail (eg: massive increase in bandwidth, higher chance of being caught in spamfilters, etc...).

Outlook bulk email marketing add -on
http://download.cnet.com/Send-Bulk-Email-Marketing-using-Outlook/3000-18483_4-10972627.html

Helps with email personalisation and putting correct 'to' field details to help avoid spam...

Politemail
integrates some marketing and subscribe features into outlook, and email sending etc. can host the software/server on your own server. seems pretty expensive, the main thing is the outlook integration, its what people want really.
http://www.politemail.com/screens/

Thunderbird
stationary add-ons - stationary works like outlook.
https://addons.mozilla.org/en-US/thunderbird/addon/4394/

Summary
So heres some questions that need to be asked before doing the email newsletter job.

How many emails / how often are you sending emails? Big difference between 4000 and 100. With 100 and a small personal, inter organisation or member newsletter, you can probably get away with using clients business email server, if they are confident that all the mailing list is 'clean' and people wont report it as spam, and they have enough bandwidth to allow the sending volume. It is still good to host images externally I think, at least the graphical elements of the email.
Are they random 'news' emails or pitch like sales & marketing emails, and are they aggressively building the list with people who may not really know they have opted in, if so then DONT use the businesses own email server, use a mail service like Mailchimp. Getting blacklisted sucks.
Who's doing the email newsletter? What are their skills? Do they understand image optimisation, do they know HTML, do they understand the fundamentals of good typography? If the answer is no, then they should use a well designed template which is locked down for most fields and a WSIWUG type editor, like Mailchimp provides. They should never be given freedom to move around the layout tables unless they will spend time testing the design before sending it. They should probably also be given a 'brand guidelines' manual and electrocuted or hit with a big stick every time they try and emphasise their 9 point Times new roman body copy text by making it bold red. Or change the font and type weights randomly throughout the document disregarding the template or stylesheet. Sigh groan to people that think word processing, graphic design or powerpoint is 'creative'. It isn't, it is a science, that makes use of colours and shapes to achieve a defined communications goal, such as "make a trustworthy, professional impression whilst making the text easy to skim and read, and ultimately leading user to buy a product."
Does the person responsible for the email newsletter know how to write and proofread? If they don't it will be seriously embarrassing rather than promotional. Don't assume employees know how to write or proofread, most kids these days don't. And don't assume typing is writing. Writing for web is a skill they need to learn. User will give your email less than 5 seconds, so don't let employees spend a week writing the email in a verbose flowery style unless this suits your purposes.
Also what is the POINT or PURPOSE of the email? This should guide the design. If theres no point to it then it shouldn't be done.
My personal opinion is that HTML email is a waste of time, money, effort. I think our society can (and needs to) use its time (and bandwidth) more wisely than this if it want's to stay competitive with other countries and actually achieve useful progress. If you have a good offer, a really good offer, just write it in text, one sentence with a link to the website... If i'm interested in your products I'll open your emails, if not I delete without opening. I have a feeling most tech oriented people feel the same way, eg. the more hi fi your skills are, the more you appreciate getting lo-fi communication and no-frills simplicity.

Cool social services email signatures - Wisestamp

2010-08-17T17:10:00.000+10:00

http://wisestamp.com/goodies/category/signature-examples/page/4/

With this you can now have cool email signatures in gmail, or many other web based email systems.

good learning php resource

2010-05-06T21:13:00.001+10:00

short simple lessons explained well

http://www.homeandlearn.co.uk/php/php3p6.html

cool site - paid forum for hep with wordpress and bounties

2010-05-06T20:28:00.003+10:00

wordpress community is pretty helpful anyway, but this is a cool site that lets people pay others to help them. i know everyone helps people for free, buts its great if you have an urgent question or if you need some extra beer money.

cool if your down with wordpress, you could earn some quick cash replying on these forums when your stuck on public transport or something. or slow on work... or waiting for your client to show up to a meeting, or whatever. wp has a pretty steep learning curve for people not used to php and trying to do special things, so i think itll really take off.

http://wpquestions.com/question/show/id/206

Interesting CSS split a UL into 3 equal columns and keep top heights aligned

2010-05-06T19:14:00.002+10:00

use negative margins. i might be using this soon, for a 2 or 3 column menu list

http://www.wpconfig.com/2009/07/28/the-definitive-guide-to-using-negative-margins-2/

referance:

ul {list-style:none;}

li {line-height:1.3em;}

.col2 {margin-left:100px;}

.col3 {margin-left:200px;}

.top {margin-top:-2.6em;} /* the clincher */

Website Pre-lauch checklist

2010-05-06T15:17:00.001+10:00

http://www.gatopanda.com/index.php?option=com_content&view=article&id=54:pre-launch-checklist&catid=36:management&Itemid=59

cool list to go through, i love checklists!

why blogger is better than wordpress (self hosted) for beginner bloggers

2010-05-05T21:04:00.003+10:00

beginner bloggers, i think should use blogger.com or wordpress.com

self hosted wordpress.org is a whole other kettle of fish

heres some learning curve of topic ive been googling since setting people up on wordpress... joy...

-apache

-.htaccess (you dont want to know)

-server file and folder permissions (ditto)

-security (ditto)

-regular updates. youve GOT to update everything at least once every 3 months, but your better off doing it the DAY that the update is released.

-phpmyadmin

-php. you really cant get far without learning how to say and, not else all of that stuff, unless you find a paid theme that is exactly what you want. mainly, menus and image galleries have required the most investigating. plugins usualy only get you half way there.

-css, but you need that on the other platforms too if you want to change your theme drastically.

basically, hosting something yourself means that you are now the IT GUY, and YOU have to investigate any incompatibilities between wp and your host.

hosting on blogger and wordpress.com, you'll never even think about it.

HOWEVER, if you have money you can pay a web designer to build and install a theme and test it all before you start, with all the features and plugins you need. BUT, you'll probably want to pay them a retainer to keep it all updated.

random wordpress and seo links

2010-05-02T21:10:00.002+10:00

about meta descriptions

http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with-meta-description.html

about meta tags generally

http://www.google.com/support/webmasters/bin/answer.py?answer=79812

seo plugins for wordpress

also theres all in one seo but gregs sounds good right now

http://wordpress.org/extend/plugins/gregs-high-performance-seo/screenshots/

http://wordpress.org/extend/plugins/404-plugin/installation/

http://wordpress.org/extend/plugins/light-seo/ evolution of all in one apparently.

http://yoast.com/wordpress/meta-robots-wordpress-plugin/

random 101

http://www.pandia.com/marketing101/3-html-code.html

funny article about photo websites having poor seo.

http://blog.photoshelter.com/2009/04/is-your-web-designer-full-of-c.html

i would counter all this by saying that one client actually didnt WANT to be found on google, because they didn't want 'randoms' contacting them. (such as work experience students, clients with no budget, people after 3 quotes etc etc.)

i sort of agree, theres something premium about not NEEDING web traffic, even not NEEDING a website. it says, im so good, im not desperate for work, etc etc. it communicates exclusivity or something. also, i think it looks a bit desperate and spammy to have proper seo title tags with all those keywords your targeting and so on. for certain industries and services, i dont think its always appropriate, and the correct branding and tone of voice implied by all those little details of content needs to be considered. seoers forget that not everyone NEEDS to be found, they already have loyalty and credibility and their site is sometimes just a portfolio to easily present to clients, an exact replacement for the old heavy book ones, that they personally showcase to clients and agents, but not the entire world. who wants to pay for all that bandwidth anyway for some students too browse or something?

yes designers should be learning seo implications of their work, but web designers shouldnt be over pedantic and forget the brand message of their client, which might include not needing to rank highly, as good 'customers' never come from an online channel, or there is nothing online to 'convert' anyway.

All about Wordpress permissions and security

2010-05-02T18:52:00.007+10:00

Im finding it hard to get a straight answer on what is the step by step best ever settings for wordpress install folder and files permissions.

Whe i try and use the wordpress media uploader i get this error message:

"The uploaded file could not be moved to /xx/xx/xx/wp-content/uploads."

Im running into problems on a new host where even though everything seems to be 755, its not letting me upload images, and is asking for the ftp password everytime i install or delete a plugin. Im guessing this is a host specific permissions problem.

While I'm solving this problem, I also want to set all the files and folders to the best most secure permissions so its ready to go when launched.

permissions info generally

http://codex.wordpress.org/Changing_File_Permissions

I tried to change permissions from dws ftp and it dosnt do anything. so now i have to find out how to cmod

http://www.washington.edu/computing/unix/permissions.html

brief look and my files seem to be 644, and folders 755... config is 644, so is ht access. i notice it dosnt have execute access which is probably why wp couldnt write to it??

(whats weird is, the exact same wp installation worked on the old server, has this new server changes the folder permissions??? i dont get it... how? it is the exact same files...

weird uploads in 766, which makes me think i changed it to that, but i try and change it again and it dosnt seem to work, does it take a day to implement?? i change it back to 755, but it not work...

ok so i look in hosts control panel, and the permissions changes i made in dws ftp HAVE taken effect, just dosnt show in dw for some reason!!

Steps I have taken:

1/ I tried making a new folder and ftping it called media and uploading to that rather than uploads. dosnt work right away, i check the permissions and it is 0. even if i make the folder in the ftp program, it is still 0. so, i doubt it should work, need to figure out this chmod thing since dw dosnt seem to change the permissons.

2/going into the hosts cpanel and seeing if i can do any permissions stuff there. yes, and actually, i see that permissions HAVE been changed from dreamweaver, but dreamweaver dosnt show it.

3/ so, i try and upload images to my new media folder which have 777 permisssions. it works. but 777 bad, so i remove and test. 755 - dosnt work. 766, dosnt work.

wordpress forums:

very helpful read reply by SanchoPancho http://wordpress.org/support/topic/253778?replies=39

Directories should have, at most, permissions of 755. If you have a directory that is 777 then that can be written to.

Files should be, at most, 664. If you use the WP editor, you might need these files to be 666 but you really should revert them back to 664 after making any changes. You must never ever have ANY file at permissions greater than 666 unless you are directed specifically to do so.

777
Some hosts will only allow you to upload images (using WP) if the images folder is 777. That leaves your site at a certain level of risk. Email them and check what the minimum permissions are. Despite what they first say, this is NOT a WP issue - it's a security issue.
If your host insists that 777 is the only number, start looking for another host. 755 can be done by hosts (my directories are all 755) that take security seriously.

from wordpress forums:

http://wordpress.org/support/topic/362098

set the wp-content and folders below it to 777 just for the upload, then change them back to 755

should try this first, just to get past this probelm so can at least get photos in.

also if it turns out only 777 works... see

http://wordpress.org/support/topic/361512

Host is ok. They changed php rules for this account so that group can write as 775.

Basic links -use these to compile my own summary to go through

http://www.noupe.com/how-tos/wordpress-security-tips-and-hacks.html

http://blog.taragana.com/index.php/archive/20-wordpress-security-plug-ins-and-tips-to-keep-hackers-away/

http://socializedsoftware.com/2009/07/13/securing-wordpress/

http://www.antezeta.com/blog/top-wordpress-security-tips

From here changing the table prefix to something obscure
http://semperfiwebdesign.com/documentation/wp-security-scan/change-wordpress-database-table-name-prefix/

For some people the database table name prefix changing functionality of WP Security Scan doesn’t work. In that case you may use the following instructions to change it manually.

1. backup your wordpress database to a sql file (you can use phpmyadmin)
2. open that *.sql file (make another copy first) using text editor, then find and replace all “wp_” prefix to “something_”.
3. now, drop all tables of your wordpress databases (don’t drop the database)
4. import the *.sql file which has been edited before into your wordpress databases.
5. and lastly, edit your wp-config.php file and change the $table_prefix = ‘wp_’; to $table_prefix = ‘something_’;
6. you may find that your plugins are deactivated automatically when this happens, so you’ll want to activate them again if that’s the case… I’d recommend deactivating them prior to doing this anyway as a precaution.

SEO - google ignores the meta keywords tag, but others don't...?

2010-04-28T20:47:00.003+10:00

As far as google is concerned, keywords in meta tag are out. But, theres still other search engines and indexing services that use them, probably. so dont disregard them just yet, but dont spend hours agonising over them either.

http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html

Description meta they say isn't really used either, except for snippets in the search results, which I read when I search, so better to make them snappy and inviting because they are seen by people. descriptions should be unique to the page.

Whats also scary is that I read that google now takes page load time into account in rankings.... uh oh for large image heavy sites. but hopefully competitors sites are also of similar size, eg photographers would all have big images, right?

wordpress as a cms - dont load parent link in menu, go straight to sub menu item

2010-04-26T21:42:00.003+10:00

code is here

http://www.wprecipes.com/wordpress-page-template-to-redirect-to-first-child-page

you make a page template, and use that page template for your parent page, which is just a redirect. i like this neat redirect style, not plugin based, and your url still has the right heirachy but you dont end up on any boring inbetween pages, or have to use jquery to open and close the menu.

this is a function for use thats a bit smarter, for wider use, such as doing a certain thing if your a child of a certain branch of content...

http://css-tricks.com/snippets/wordpress/if-page-is-parent-or-child/

Moving wordpress to a new host and to a new domain name tips

2010-04-24T22:25:00.004+10:00

Finally worked this out, and was able to move entire wordpress with all posts and settings intact from one host and domain name to a new host and new domain name. It's the first time I've really used phpmyadmin for exported/imported databases aswell.

I wanted to practice moving the whole thing over, so I know what's involved for next time if theres a big mission critical site. Previously I had been just doing fresh install to move sites from testing to live, adding theme / plugins and settings manually, as there usually aren't posts etc for new sites, its still fiddly going into each admin setting page for everything page by page.

Basically I followed the process described here 'Moving wordpress to a new server'

http://codex.wordpress.org/Moving_WordPress

Here's things that tripped me up:

1/ Old server .htaccess: With the downloaded entire wordpress install folder, I also downloaded the old servers .htaccess file and uploaded this to the new server, which caused some funny error where the browser wanted to download the .php file of the page - very dodgy. The .htaccess file was obviously for the specific server that it came from, so it had to be deleted.

2/WP config file/new database setup: Then I got an error when trying to visit the site. Something like 'can't contact database'. In the wp-config.php file, I had used the wrong db user name. On the new server i created a new database, and imported everything using phpmyadmin, but the new server automatically adds a prefix to that username I made, which i didn't realise, so adding the prefix in the config file made it work. I simply hadn't looked in the hosts sql manager to look at the databases listed and their users, and how they were written.

(Also used fantastico on the new server to install wordpress as a test, just incase the server was bungling wordpress, rather than my settings. When it worked via the fantastico install, I downloaded the wp-config.php file and look at the settings it used. This also gave me a hint about the prefixes the server was adding, but mainly I wanted to check that HOSTNAME variable was set right aswell, I had guessed localhost, but some hosts have a special setting.)

3/Permalinks: All my plugins and everything seemed to be there, just as it was, but when i tried to navigate around the site, i get 'not found', because permalinks is screwed. Go to settings > permalinks and you see a helpful little note that your .htaccess file isn't writable. (actually it dosn't exist because as I said I deleted it before). So I make a new one and upload the code from that message and presto, its all working. Also, I see that the offending line then in the old .htaccess file I deleted must have then been "AddHandler php5-script .php"

Its still saying its not writable, so maybe later, look at the correct permisions to set on it, and the other files. http://codex.wordpress.org/Changing_File_Permissions

4/ File download time: The process of downloading all the WP core files twice and uploading took about 4 hours and made the internet slow. I should have done some zipping thing, so the files are zipped before downloading, I'll look up how to do that next time.

Another way to do it, is just to export the wordpress posts etc using the export / import feature in wordpress install. But this dosn't keep ALL settings, so it may or may not be faster/easier (so you do new install on new server etc) http://wordpress.org/support/topic/284535

Depends really. Personally, I just export the XML from dev environment and import to WP install in client's server. Upload customized theme along with a couple or so plugins in new server. Arrange settings and options for plugins as needed and you're done in 30 minutes or so.
In some cases, database export and import is required and I follow these instructions

Further stuff to do when moving domain names:

Also, if the site your moving was a live site , with lost of backlinks to it from out there on the web, you'll loose all those referers unless on your old server you... (from: http://www.wptavern.com/two-wordpress-migration-tips )

Redirect Old domain to New domain (htaccess redirect)
Create a .htaccess file with the below code, it will ensure that all your directories and pages of your old domain will get correctly redirected to your new domain. The .htaccess file needs to be placed in the root directory of your old website (i.e the same directory where your index file is placed)
Options +FollowSymLinks 
RewriteEngine on
 RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]

Latency - more important than bandwidth?

2010-04-22T16:29:00.002+10:00

interesting to look into, latency increases with international visitors, also on mobile phones.

latency is number of files the page loads (many external CSS stylesheets a bad idea then??)

but then again this is only important for first uncached visit right...?

reckons unicode bullets are good alternative to using images, has list of all the cool unicode characters

http://nadeausoftware.com/articles/2007/11/latency_friendly_customized_bullets_using_unicode_characters#Comparingloadtimes

adobe meermeer

2010-04-22T15:45:00.002+10:00

http://www.sitepoint.com/blogs/2008/12/04/adobe-meermeer-will-change-the-way-you-test-web-sites/

Dreamweaver will have a browser testing screenshots functionality / service attached. Like browsershots service.

I personally don't see the point, testing dosn't mean LOOKING does it, its a browser looking service, not testing.

With most browsers these days pretty good at CSS and IE6's CSS issues easily predictable, little rendering differences are arguably less important than the AJAX fancy stuff that could get broken. If you can't test full functionalities and navigate around the site in the real browser, you just can't tell if its working.

For example, I visited a company's portfolio site the other day in safari 3, I'm guessing the big white box on homepage was meant to be a fancy slideshow, but all i saw was a big white box. DOH!!! epic fail. White box was only thing on the page!

More and more sites, especially minimal portfolio style sites are reliant on fancy Jquery type galleries and effects, or have fancy menus or popups for essential content. If the gallery script fails or is unbearably slow on a certain browser, its just not acceptable to not know about it. I can handle not knowing exactly what typeface konquerer has rendered my body copy in, but I cant handle that if some random nerd happens to find the site that major parts of content are completely inaccessible. Then again said nerd will hopefully understand and empathise...

Mobile Browser Testing - what browsers to test on?

2010-04-22T15:19:00.002+10:00

Great list here:
http://www.quirksmode.org/mobile/browsers.html

also, what phones to buy and setup
http://www.quirksmode.org/blog/archives/2010/04/mobile_browsers.html

i just want some emulators an then look on iphone.

this is a cool opera mini emulator... wonder if i should log into something using it online though, prob not.

http://www.opera.com/mobile/demo/

its a cool browser, it resizes the columns with text wrapping! no need to make extra stylesheet hurrah!

learning Jquery and PHP resources

2010-04-18T15:25:00.003+10:00

looking for a series of easy lessons and tutorials - like a course, to work through when on public transport or waiting around. best if its podcasts, but also would be great if it was interactive with little quizzes and tests to actually try writing, not just watching. wonder if anyone has done this??

jquery book
http://www.manning.com/bibeault/

cool video tutorial series
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

jquery series lessons
http://woorkup.com/2009/10/05/jquery-lesson-series-introduction-to-selectors/

SEO links to keep (SEO 101)

2010-04-08T15:29:00.001+10:00

http://www.vertical-leap.co.uk/services/search-engine-optimisation/

http://www.adtastichosting.net/Search-engine-optimization-SEO.htm

http://www.pandia.com/marketing101/3-html-code.html

http://www.pandia.com/marketing101/5-popularity.html

SEO 101
http://www.pandia.com/marketing101/6-submit.html

Supercheap website solutions for stingey clients

2010-03-29T12:49:00.004+11:00

this has great intro presso - build it yourself, $60 per year, includes all that naf stock photog that they seem to love. and apparently spits out code suitable for searching.

http://www.homestead.com/

also, googles online presso about 101 online marketing watch when time, might be good to pass onto clients to help educate them of process

http://www.10steps.com.au/

Thinking for stingey clients who want the moon but only have a small budget and don't value branding, typography, usability, good photography, accessibility, load speed, xbrowser, they basically want a online version of a shoddy print shop brochure but it should show up first in google. (but look and function as slick as their competitors $30K websites and have a CMS and the video content must shoot, edit and encode itself... sighhh. slight exageration but its funny.)

Perhaps their entire budget is best spent on hiring a professional web copywriter/SEO dude to rewrite their copy and restructure their sitemap with landing pages, calls to action, all that. (as they think the way it looks is unimportant anyway and 'branding' is just sticking their logo designed in MS Paint in the top corner :)

Then, with that copy and sitemap in hand based on the copywriter/SEO experts advice, they can use a tool like homestead to build a site themselves that dosn't look like anything inparticular but has mad SEO optimisation.

Perhaps they need a building tool completely unfocussed on graphics. Sort of plain text wireframes, with their logo in the corner of course for clear branding.

Not really sure if that would work, the building tool would have to have decent SEO features so it all comes out right in the code. But its an interesting proposition and question, what's most important, rank in google or clear branding, user experience, etc?

For a small biz, they think always rank in google must be highest priority, except what happens when a potential customer gets to their site using IE6 and the main nav is unusable, or worse has the message 'this site may harm your computer', customer thinks hmmm dodgy these people don't seem that trustworthy I cant even find their contact details and whats with the shit logo and I cant read the text it's black on a red background in 9pt comic sans (for example :)

So what is the point of getting first in google if you can't follow through with something that looks professional and trustworthy?

Homestead templates look like a decent stop gap option for initial stages of growth or companies not needing a specific online strategy. Too bad if your competitor chooses the same template...

DIY wordpress themes roundup:

The thesis theme.

Its a commercial theme framework, as well as a WSIWUG theme.

http://diythemes.com/plans/

resonable price of $164 plus $40 per client site.

Good for quick setups, looks easy to customise as blogger. Also apparently has an easy to customise menu for wp as a cms. Id have to trial it for real though to test, menus are hard in wordpress!

But with the base price and say 2 days of setting up and customising the colours and options and plugins, that might be adequate for some clients to get them started online.

Id like to also trial if using the DIY controls in this theme is actually faster than doing it in css. since you cant seem to preview the changes LIVE in the same screen like you can with firebug, I'd guess its a slow process to make a change and check it each time. But for someone who dosnt know css it would be really helpful.

Apparently it also has a feature that help you make custom hooks into the theme functions, which is what I'd find really handy, i don't like too much php.

actually, watched some videos, benefits include:

-simple navigation menu addition, renaming and ordering. (looks to be only one level, not child pages but need to check) its good not to need a plugin for this.

-easily add software scripts to header etc (or... you could just add them to your templates but whatever)

-seo options for each post/page without using a plugin, its all there on the page editing. this is good ya.

-updates. someone else updates the base theme with new versions of wp. I dont have to do it. That is a huge bonus really for the future. not my responsibility! and support if it breaks helps to have one other brain on it.

-the code output is really neat when you view source. even when you alter the design in admin panel, it dosnt write any screwy code, it seems to write to the css or swap stylesheets or something.

Still, it is pretty blog centric. Id like to see thesis as a cms specific features and layouts.

Screen Resolution ultimate 960 grid too big??

2010-03-25T17:25:00.003+11:00

researching opinions on what is ultimate screen resolution these days...

- been using the 960 grid vibes and target sizes lately as a default web design standard usually basic mockups are 960 x 600 or so = 1024x768 target.

but future seems SMALLER not larger... uh oh....

eg. eee PC 800x450px resolution - that dosnt account for browser chrome. others are 800 x 400 - not much left vertically at all...doh!!

found this article with a helpful suggestion in comments on approach - js resolution detection

http://www.web-development-blog.com/archives/website-layout-dimensions-today/

if (screen.width>=1024 && screen.height>=768) { window.location="highres.html"; } else { window.location="lowres.html"; }
of just include the right CSS style sheet after the resolution is detected.
But anyway you have to develop multiple websites to serve all the resolutions.

so if hi res, show this, anything smaller, show something else, makes sense so you dont have to design everything really skinny. you could maybe have a 960 grid thing that narrows a certain column like body text column down depending on resolution...

reminds me of a blog i saw recently that was about 450px wide. Think phones etc are 480px wide, so it optimised for phones. anyway it looked cool. maybe my personal portfolio will be optimised for phones...

other opinions

http://www.freshleafmedia.co.uk/blog/vertical-resolution-web-design-and-netbooks/

Well, as with the case of my client, many of the netbooks have quite a decent screen width. Most have a 1024 by 600 resolution – and many of our corporate website designs sit around the 960px width mark, so no need to worry there. What we might need to consider, though, is what sits ‘above the fold’ (i.e. what is visible without scrolling).

some good points listed here too:

from: http://www.awebapart.com/home/faq/Web_Design_Width_and_Web_Screen_Size

cool diagram google!!!!!

http://browsersize.googlelabs.com/

90% users - 960x500 is max.

when you get to 630px high it drops to 50% - pretty drastic.

new jquery stuff, easyslider

2010-03-19T16:23:00.002+11:00

easyslider - for a sliding across gallery, has buttons, auto, lost of features, easing etc

http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

http://cssglobe.com/lab/easyslider1.5/05.html

motionpack.js

http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/#slideexample

idisk unavailable

2010-03-19T12:18:00.002+11:00

possible fix to try when time- think snow leopard and keychain got screwed. already tried signing in and out and deleting library>filesync

http://discussions.info.apple.com/thread.jspa?threadID=2266770&tstart=0

FIX THAT WORKED FOR ME

Ok I went through to the help chat.
http://www.apple.com/uk/support/mobileme/

1. system prefs > account > sign out
2. Try to Sign in with a fake acc - apple/123456 - whatever. Will fail
3. Sign in again.
4. Try idisk in finder. if it works... great if not goto 5
5. spotlight > search for an open keychain access
5. Top menu > KEYCHAIN ACCESS > Keychain first aid.
6. Enter your user and pass > checkbox verify. Start.
7. If verification failed > checkbox to Repair > start
8. Verify
9. Reboot.

Why are windows PCs so fucking hard to connect to the internet??? (and virtual pc connectivity troubleshooting)

2010-03-18T14:01:00.007+11:00

WHY!!!!!!!!! macs OSX just work and connect with no problem.

seriously, its takes ages to connect to home and office wireless networks.

whats with the usability logic of all these hidden pop-up windows that you find but cant remember how to get back into again, like thing > properties > thing > properties > advanced > thing > properties > REALLY VITAL SETTING BURIED HERE AND CALLED SOMETHING UNINTELLIGIBLE AND LOOKING UNIMPORTANT!

WTF am i meant to get a degree in IT just to connect to the fucking internet?

First step -Does your router filter its wireless by mac addresses (hides itself from everyone except certain chosen computers you have told it are ok) If yes - then you are now finding the mac address of the PC to put into the router so the wireless network can be seen by the PC - had to do some command line thing RUN > cmd > ipconfig /all

got the mac address, aka 'Physical address' put into the router.

Now, can see the wireless network showing up in the 'wireless network connection' > 'choose a wireless network'

select it, click connect, put in the WPA network key /password.

Now its just hung on 'Acquiring Network Address'. This I havn't seen before.

Looking in forums,

-tried some cmd flushdns thing, didnt work.

-http://www.tdaxp.com/archive/2005/02/05/acquiring-network-address.html

tried run > services.msc > dhcp cleint > its not stopped or disabled, its 'started' and 'automatic'. restarted it anyway but no fix.

-also have gone to 'network connections' > right click 'wireless network connection icon' > properties > general > Internet Protocol TCP/IP > properties > and yes it is set to 'obtain IP address automatically' and 'obtain DNS automatically'.

IT Does say here - ask your 'network administrator' for appropriate IP settings... This is a clue, perhaps it just cannot get the settings and we need to manually imput them. Fine. What are the settings then...

Now in a window I can't remember how to get back to, I saw that the computer was not being assigned an IP address, it was 0.0.0.0 also submnet mask, default gateway bla bla etc all blank. So I see the PROBLEM, is that the router? or whatever, the computer is not getting its IP address for some reason.

So - we need to either figure out WHY its not getting assigned an IP address, or find out how to give it one that will work. option 2 sounds less time consuming.

well fuck me - the WPA password I typed was wrong. So instead of saying "WRONG PASSWORD try again", its says "ACQUIRING NETWORK ADDRESS" WTF WTF WTF WTF?? this feedback is so illogical... its NOT doing what it says because the password is wrong. why would it say its doing something when it is NOT. Grrrrr I just went on a big google forum trail search for nothing, because the wrong feedback is given.

heres a huge thread on other possible fixes for the same problem

http://www.tdaxp.com/archive/2005/02/05/acquiring-network-address.html

----heres some more fixes anyway for next time this error message happens but for a different reason. Its amazing how many possible fixes there are for this error.

Because when I re-entered the WPA shared key for my home network (open the Wireless Network Connection Status / click on Properties / Select the Wireless Networks tab / select the relevant network from the list under “Preferred Networks” / Select properties / Re-enter the Network Key — note: I found my network key in my router's settings after connecting by wire to the router and visiting 192.168.2.1 — the IP depends on your router), … then all was immediately solved. I had tried many of the things suggested above without any luck.

---

I had the same problem that began right after I renewed my Trend Micro subscriprion for another year. Turns out Trend Micro installed the “Trend Micro Common Firewall Driver” which was causing this. I found this in the network connection properties and duly uninstalled it.

After rebooting the problem was gone for good!

---

If you are trying to connect to a wireless network with win xp and hangs on “connecting to network” it may be the MAC filter on the router.. You must add your wireless adapters MAC to this list before connecting..

---

I think that the last explanation I found a few months sounds plausible in my case. The D-Link router doesn't refresh its address table unless you turn it off and on. That means you have to always go to your router and turn it off in order to reconnect your computer. This is beause Microsoft is more closely aligned with the wireless spec than D-Link is.

---From what I read, the problem we are experiencing is often caused by two points: many routers only reset their DHCP wireless connections upon reboot of the router, 2) windows xp sp2 has follows security protocols more stringently and therefore cannot circumvent #1. The simple solution for me was to use the Alternate DNS configuration tab in Windows XP, which will use some default settings if the IP address is not acquired. This takes a bit longer, because the computer sits tries to first acquire the IP address using DHCP, and only then uses the Alternate Configuration, however, this has worked without any problems. The other option may be to get another router, one which resets the wireless DHCP connections more frequently, but I don't know which routers have this problem, and which don't.

ok round 2: pc internet virtual pc 2007 fuckedness (or AIRFOIL (AIRTUNES?) CAN BREAK YOUR VIRTUAL PC CONNECTIVITY)

so today im happily using my vista virtual machine inside virtual pc 2007 on an XP sp3 host, and then the internet stops working. 'internet explorer cannot display the webpage'. fuck fuck fuck.

illogical. nothing has changed. router hasnt been switched on or off.

internet works in host pc just fine. it was working last night and just now.

how can it just stop working in the virtual PC???? unless someone has hacked them just now. surely not.

i spend an hour looking for solution, changing around settings. then i find...

other person on same wireless connection in another room had turned on AIRFOIL on their mac. not exactly sure how its all setup, but sending the sound (streaming internet radio) from their computer to the loungeroom speakers receiver.

what is weird is that the host machine has no problems with connecting when the airfoil is in use, JUST THE GUEST INSIDE THE VIRTUAL MACHINE. (and just vista guest i think)

i also turned off browser, virtual pc machine, and host machine reboot after the AIRFOIL was turned off. also did the 10 second reset on the modem somewhere in the mix.

an viola, when restart it all, it just works again. WOOOOO!!!

and there is also an extra step i had already done to get it working initially for connecting the virtual PC vista guest to the hosts connection, described here:

http://www.tipandtrick.net/2008/fix-virtual-pc-2007-shared-networking-nat-internet-not-working-in-windows-server-2003-2008-and-vista-guest-os/

and note that in virtual pc console, for each machine click on settings button and networking and the setting should be 2, and 1st is 'shared networking' (NAT) and 2nd is the actual connection. eg. pci fast ethernet or wireless bla bla bla...
---------------------------------------
also, there is a thing in XP virtual pcs, "address not valid" which you might need to press f12 (in browser i think), and untick 'enable proxy servers' for internet to work.

----------
ok so today was having troubles with vista with a new virtual image

-in the vritual pc consoles list, go settings and choose network, shared networking NAT and then for number 2 select wi fi.
-put in the IP manually in the virtual vistas network settings(see original post for exact way to do it.)
-then went to advanced settings, WINS tab and selected enable netBIOS over TCP/IP (just to do it incase it helped)
-did a 10 sec power cycle on the modem
-shut down vista entirely
-then shut down the host machine entirely

-then on reboot, i clicked on the wireless network connection status properties, fiddled with another airport network on our network by reimputting the password. but then didnt connect to it, just connected to the other one which was connected before but had a dialogue like cannot find a certificate for the network. after looking for network address or something in the status, it showed connected and excellent (in host machine). google worked.

-when i opened the vista virtual pc, started to look for etehernet controller to install, then must have accidently clicked on 'set network location', (possibly in the network icon in bottom toolbar) and chosen private, with the city tower building icon, and it sort of auto configured something. when that was done, it worked...

why i dont know but that is the trouble shooting process for vista virtual machine connecting through an xp host that is connected to a airport wifi.

now for the new xp images....

good article on security for small business

2010-03-16T13:49:00.002+11:00

http://www.computerworld.com/s/article/9161298/Enterprise_security_tips_on_a_small_business_budget?taxonomyId=145&pageNumber=3

theres so many links in this article to check out. read the site also...

quote:

For those of us without the luxury of their own domain, or who are worried that someone might be able to easily guess their myspace@alicejones.net addressing scheme, a few e-mail masquerading services are available. My favorite is Sneakemail.com, which lets you create an unlimited number of e-mail aliases for a modest $2 per month. This way, you can use one unique e-mail per Web site, and all the messages get forwarded to your "real" mailbox. The service even handles replies, so that the Web site never has your real address

running patches for all browsers, adobe, os etc etc.

im concerned cause im running old IE6 for testing purposes...

need to get some virus checking software etc... look into costs etc.

quote - this is didnt know:

The risk of malicious software from P2P (peer to peer) networks far outweighs any legitimate need for BitTorrent or KaZaa. On your personal computer, I still don't advise its use, but I can understand that there are several legitimate reasons for using it. Use reputable Web sites to obtain shareware applications.
If you must participate in P2P, use a separate, nonadministrator user account for those functions. Never run software that you download from a P2P network in your administrator account, and always scan these downloads with several antivirus packages. Virustotal.com is a good place to do a quick scan of a dubious download if you don't already have a solid security package such as Norton Internet Security 2010. If you're a tech-savvy power user, run P2P software in a virtual machine to insulate your host operating system.

virtual machines insulate host machines?? did not know this... i wonder if i could set up clean virtual machines say every month, never use the actual host machine for ANYTHING, never connect it to the net, etc, and just make new virtuals often enough. so if one is compromised then it gets deleted soon enough anyway.

WIREFRAMING APPS

2010-03-16T12:49:00.002+11:00

alts to omnigraffle or the thing i made:

reviews etc

http://www.snipe.net/2010/02/wireframes/

this cool app you can draw wireframes in it - and output sketchy style, so client dosn't think its a design. - online and offline app avail, etc

http://iplotz.com/

this one too

http://www.balsamiq.com/products/mockups

drupal nice menus navigation, filter the function, make it allow html? , wrap two word list items over 2 lines solution

2010-02-18T23:03:00.003+11:00

this example changes the output from lis to tds.

http://www.ravendevelopers.com/howto-theme-nicemenu-in-table

also here http://drupal.org/node/350645

this is about making html imputable in drupal menus

http://drupal.org/node/346910

a module that adds checkbox to allow html input in menus, im going to test it with nicemenus and see if it works.

http://drupal.org/project/menu_html

yes! this module works with nice menus, dosn't affect it adversly at all, nice little html checkbox on menu link configure pages, and yay break tags between my menu items, and, no fucking up the template functions with my messy copy paste hack efforts!

so much less complicated than trying to say if a menu item has 2 words make a break, or change the space to a break in a function, put the break in where its easy to, IN THE CMS! also means you can add pictures, whatever you want.

so cool.

for me, this solves a huge problem of making the menu items "wrap" when they are 2 words, without using table output for the nav, and even then i dont think it would work properly, and especially it would royally fuck up a fragile drop down module im using which i have gotten perfect except for this last thing, wrapping 2 line menu items, when they are 2 words.

if you add a break to the li in code, the nav items simply shrink to fit the text, like in a one line menu, so it dosnt look weird having huge gaps if the menu items all have the same fixed width.

CSS sticky footer or stretch footer

2010-02-18T21:53:00.002+11:00

How to implement a sticky, stretchy footer in Drupal

(It removes #footer from the #page div, and puts it below that, then you can style it to stretch / be liquid. )

http://drupal.org/node/491478

used it, and for a zen fixed width theme, all I had to do was comment out the #page margin:0, because my margin: 0 auto; and it is sorted.

general sticky footers example pages

http://ryanfait.com/sticky-footer/

http://www.cssstickyfooter.com/

(cute demo page)

drop shadows css technique for drop-down menus

2010-01-25T19:06:00.002+11:00

http://www.positioniseverything.net/articles/dropshadows2.html

also

http://www.cssplay.co.uk/menus/pro_drop11.html

drupal site using nice menus well

http://www.cmsmatch.com/

photoshop and illustrator tutorials - 3d effects arwork and logo tutorials

2010-01-14T14:38:00.003+11:00

http://www.thesofthelp.com/2009/10/36-create-3d-stunning-effects-on.html

also good

http://nikhilmisal.wordpress.com/2009/04/21/10-rocking-logo-design-tutorials/

glossy icon in just psd

http://designreviver.com/tutorials/icon-design-tutorial-designing-a-new-icon-in-illustrator/

cs4 - 3d objects in photoshop, great for 3d logos etc

http://blog.rocka-graphics.de/tutorials/how-to-create-a-3d-logo-object/

3D ribbon logo tutorial

http://www.blog.spoongraphics.co.uk/tutorials/logo-design-process-and-walkthrough-for-vivid-ways

illustrator

http://www.smashingmagazine.com/2009/06/16/50-excellent-3d-adobe-illustrator-tutorials/

simple example

http://www.ndesign-studio.com/resources/tutorials/3d-logo

really simple extrude and bevel example... fast.

http://tutorials.deviantstyle.com/2009/11/cool-3d-logo/

cool

http://transfuchsian.blogspot.com/2009/04/illustrator-vector-3d-lighting-text.html

Text cleaner for cms clients pasting from ms word into cms

2010-01-14T14:01:00.002+11:00

this screenshot - magically cleaning up ms word garbage code, for clients using the cms. paid application, but supposedly good...

http://xstandard.com/en/documentation/xstandard-screen-shots/04/

drupal module for it

http://drupal.org/project/xstandard

Cyber security

2010-01-12T14:48:00.001+11:00

blog of someone in the industry
http://stvrly.wordpress.com/

cyner security awareness week.
http://www.staysafeonline.org/ncsam

css only tooltips

2009-12-23T21:46:00.001+11:00

css only tooltips

http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/

photoshop colour for web design

2009-12-22T19:16:00.001+11:00

really important article on how to setup photoshop properly for web

http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/

drupal links - compact login block etc

2009-12-22T15:25:00.002+11:00

compact login block - but IE7 has problem looks like

http://drupal.org/node/146023

with jquery but theres problems cross browser with form prefilling

http://www.topnotchthemes.com/blog/081204/horizontal-user-login-block-using-css-and-jquery

how to add function to change the text of the labels or submit button

http://elementalmarkup.com/ramblings/theming-user-login-block

this looks like a good drupal module to use for compacting the login block

http://drupal.org/project/compact_forms

----

other drupal stuff

----

a module makes the code formatting look good and can remove ms word tags put in by content adders.

http://freestylesystems.co.uk/blog/drupal-beautify-module-released

-----

http://www.elegantchaos.com/projects/login

white background flickering in IE, chrome

2009-12-17T22:20:00.002+11:00

dark css background, wordpress install, when switching/loading between 2 pretty much empty black pages, i see an offensive white flash, nowhere do i have background-color:#FFF in my css, what gives!...

website speed tips

2009-12-17T22:15:00.002+11:00

http://developer.yahoo.com/performance/rules.html

http://www.mooladays.com/2009/12/05/22-ways-to-optimize-wordpress-to-load-even-faster/

swfobject 2 and great examples of use code

2009-12-09T17:09:00.002+11:00

http://pipwerks.com/swfobject/

swf as a background image examples... not using z-index, just absolute positioning

http://pipwerks.com/swfobject/z-index/2.0/index.html

this example dosnt use z-index, but position relative on a wrapper, inside which the overlay content is given position absolute... source order of overlay and content not important as long as all in the wrapper...

reckons tested in Firefox 3, IE 6, and Safari 4

Flash Preloaders

2009-12-08T18:27:00.005+11:00

Here are some preloaders I want to try out, just need a simple thin line with cutomisable colour, or full page wipe.

AS2

full page line, looks slick. dosn't work for some people.

http://activeden.net/item/fullscreen-ultra-thin-preloader/full_screen_preview/10734

good helpful comments, can be made to go fullscreen... no complaints.

http://activeden.net/item/full-custom-preloader-component-v1/8343

customisable lines and percents

another line loader- colours customise with changing movieclip manually.

http://activeden.net/item/all-in-one-preloader/full_screen_preview/7979

this is cool it goes from middle outwards, not many purchases or info about it, but its nice and a bit different... hopefully can turn off the auto fade-out... no complaints yet, not much feedback. it might just blend ok with the other lines in the file...

http://activeden.net/item/thin-wide-preloader/59634

AS3

looks good, fullscreen, customisable by code, all features, includes a fade into the flash file... new not much feedback.

http://activeden.net/item/fullscreen-line-preloader/51093

this looks ok thought check ffox3 on PC see if it works...

http://activeden.net/item/as3-preloader-progress-bar/34770

JQuery Slideviewer and Supersized (lg bkrnd img) and fancy thumbnail

2009-12-08T17:48:00.006+11:00

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
fancy thumbnail hover effect with JQuery - great for a little portfolio - would work cool as a massive grid....

JQuery Supersized

http://www.buildinternet.com/project/supersized/

-for large background image slideshows. adjusts the size of the image proportionally. )

-i might just use for that function, not for slideshow.

JQuery Slideviewer

This is worth a second look.

-from unordered list

-Has slide across transition, including customisable easing if desired.

-dont need to set width and height.

-Click image for next or use pagination (no thumbnails)

-preloading

-recently updated

-tooltips on pagination if required

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

wordpress cms plugins

2009-12-02T14:11:00.000+11:00

http://themeshaper.com/wordpress-cms-plugins-the-bare-minimum/

New typography links and examples.. for great body copy, . and css font stacks research

2009-12-01T22:33:00.004+11:00

is it just me or is it hard to find a fully sans serif website these days? everyone has jumped on the serif is ok as a headline trend like a rash... and serif does look nice, but it think it still looks too classic and antiquated for some brands.

my 2 cents, the next big thing in web - is making it look like print. clean, spacious, grid based print.

anyway looking for type inspiration examples.... and typography reminders

im thinking the key to elegance is NOT having liquid body copy... body copy should have set width for good line length... i think it butchers readability to stretch body copy. think between 450px and 500px seems to be good... and text should never wrap around a body image or thumbnail, but stay columned... (dont know how to do this in drupal css... )

(remember to post that bike shop, had amazing use of times new roman uppercase... )

and this little note about off white and dark grey instead of black and white... from pretty good primer / reminder, good ref of css sizing of fonts.

http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography

The best thing to do (in my opinion) is to utilize an off-white (#F8F8F8) font on a black background and a dark gray (#252525) font on a white background. It helps the contrast become minimal and doesn’t strain the eyes as much for your visitors when they’re reading your content.

also - font size 13px, line height 18px, p margin bottom 18pxis good.

reminder about fonts... surely it cant be true that windows dosn't have helvetica... cry... might be time to try the new windows fonts cambria, etc etc...

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

and a testing page and grid of whats installed in what

http://media.24ways.org/2007/17/fontmatrix.html

except- calibri here, tested against helvetica, its smaller x height, looks really different. the abovelink i noticed 'microsoft sans serif...' looks like arial..

http://forabeautifulweb.com/blog/about/lead_weight/

survey of serif fonts for win/osx/linux, remember it good to include a unix font as cheap school computers might run linux etc... corbel, calibri etc are only rated at 50%... so for sans serif, microsoft sans serif is the go...

http://www.codestyle.org/css/font-family/sampler-SansSerif.shtml

this site http://www.ars-informatica.ca/article.php?article=89 reccomends this font stack for arial/helvetica, includes the unix font too: (yuk, arial is preferrenced, why cant everyone get helvetica dammit..)

font-family: Arial, "Microsoft Sans Serif", Tahoma, "Nimbus Sans L", Helvetica, sans-serif;

and this for verdana based (more open letters, better at smaller sizes)

font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", Geneva, "URW Gothic L", sans-serif;

it looks like corbel is useful for replacing verdana, and its much nicer looking, calibri is ok, guess its a nice change form arial, but using these means testing different typefaces on different systems... i dont want a mac and windows sseparate stylesheet, i cant use calibri because of the x height problem mentioned above.

or simply...

The ‘wide’ sans serif stack: Verdana, Geneva, sans-serif
The ‘narrow’ sans serif stack: Tahoma, Arial, Helvetica, sans-serif

heres a cool interactiv font stack builder...

http://www.codestyle.org/servlets/FontStack?stack=Arial,Helvetica&generic=sans-serif

http://articles.sitepoint.com/article/eight-definitive-font-stacks/2

helvetica/arial based stack, except i would not include calibri it is small than others. theres an explaination of this font stack here. http://articles.sitepoint.com/article/eight-definitive-font-stacks/3 personally, i think its too much, i already have to test my site for zooming, resolutions, oss, browsers, text resizing, if i throw in these font choices, then i need to also test for different combinations of font installations... each variation multiples the testing by itself. bar that, id reverse this list, except for a headline or something for a designer audience if it has a fancy headline with adobe fonts. i want to see each font in action on each o/s on my sites before i approve of its use.

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

verdana based stack. except i would delete corbel it is smaller.

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

this list at the bottom has a good examples of sans serif font stacks.

http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

some sites on this list are using lucida, for body text. must check this out, never considered it.

http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/

MAJOR RESOURCE POOLS

this is really the source...

http://typesites.com/

SANS SERIF SITES

i think this is my favourite body copy so far...

http://buddycarrskateboards.com/

all...

"Helvetica Neue",Helvetica,Arial,sans-serif

and 471px wide body copy...

but think the size is going to be too small for the job im researching. shame. its really nice.

this body copy is good too...

http://www.aisleone.net/2009/design/myths-misconceptions-about-grid-systems/

unexpected body copy font stack... verdana??

Helvetica,"Helvetica Neue","Lucida Grande","Lucida Sans Unicode",Sans-Serif,Verdana,Arial

but generally, type colour and line length good... 450px wide box...

sizing is probably the smallest i can get away with.

http://astheria.com/design/learn-about-design-not-making-things-pretty

Font stack: “Helvetica Neue”, Helvetica, Arial, sans-serif;

http://www.helveticons.ch/

just helvetica. (designers audience)

http://hellyeahdude.com/about/

example of a lucida font stack for body copy.

http://www.everyblock.com/about/

just arial

http://typesites.com/about/

i like this... lucida for body copy, helvetica for headings...

body copy... font-family:"lucida grande","lucida sans unicode",geneva,arial,sans-serif;

headings... font-family: helvetica,arial,sans-serif

(interesting the css property 'capitalise....' i hvant sen it before... good for cms's)

also like the block highlighting rollovers...

http://www.designingthenews.com/

purely arial body copy but i quite like it, more condensed...

font-family:Arial,Helvetica,sans-serif

like this too... the r/ship of body copy and header / intro text... , although too small for my users. also really like the no nonsense clean sidenav.

http://www.open-comms.com/about-us

everything..., font-family: Helvetica,Arial,Verdana,sans-serif

wow, just using font-family: sans serif! let the computer decide!! just have great type heirachy and leave the rest to whims of the o/s....

http://wearehunted.com/info/

this does ok for 14px body copy... 570px ish column width, guess to incorporate the larger size... bit gappy though not that elegant.

http://webdesignledger.com/category/inspiration

er good.

http://www.good.is/departments/transparency/

all arial... except some lil italics in georgia... and some column headings they have done as a picture... especially liking the 12px all caps footer headings... good example of a 'nodes' type styling... and just black.

just nice type heirachy, small text (11px) is holding up well. good example of san-serifs being still good to use.

actual post width is 580px, 14px type isze.. i prefer the 12px excerpt size... actual post copy isnt that great.... but readable...

this site has mackin body copy, bit light though.

http://www.australiacouncil.gov.au/news/news_items/australia_council_announces_artstart_initiative

font-family: Arial,Helvetica,sans-serif

wtf, line height is set to normal... hmmm... font size 75%, no margin bottom. is it a fluke..??

i really dont get how they have differentiated the top page header from the blurb, they look like completely different thicknesses, but nothing fancy inthe css, just 10% larger... think im missing comething... its really minimal actually on the css... tricky... anyway heartening that arial can look ok, its going to be my entire font choice.

580px line length for the body copy area..

also, look at the news pages, good example of what to do if they sometimes add node images, sometimes not...

this is good too

http://haveamint.com/about/requirements

its another ludica for body copy, helvetica neue for headings... 388px wide body copy, nice, narrow...

gotta find out if lucida is on pc and mac... it could be nice feeling change from all arial.. and looks great with helvetica headings.

a good reminder to notice, to get the headings looking sleek , not fat and ugly, they need font-weight-normal... otherwise they default to an ugly bold. also, i think verdanas bold is ugly, lucidas is much nicer... helveticas is a bit shitty too, at small sizes, arials is better.

actually, im hating on verdana for body copy now, too gappy... shit bold, only good for small footer text etc. sleek = arial, helvetica or lucida...

----

on a very side note, this is an awesome design test

http://www.andyrutledge.com/creativity-is-not-design-test-2.php

Grids... fluid 960 grid...

2009-12-01T22:32:00.001+11:00

http://www.designinfluences.com/fluid960gs/

swf as a background image (or seemingly) using swfobject and z-index

2009-12-01T16:06:00.003+11:00

this looks like the solution... but needs testing...

http://groups.google.com/group/swfobject/browse_thread/thread/9567050d5fa4ded7

other options for a wp gallery

2009-11-26T20:28:00.003+11:00

this is meant for a banner, but it has a nav built in...

http://wordpress.org/extend/plugins/wp-crossfade/screenshots/

jquery page transitions?

2009-11-20T00:08:00.002+11:00

links

fade out body onclick, slowly, use body unload too...

http://www.nodans.com/index.cfm/2007/9/25/Running-An-Effect-on-Body-Unload

experimenting with fancy page loading, (without visible ugly browser refresh) definately important for smooth seamless experience... ) bit advanced for me to try right now... hasnt someone made a plugin yet??

http://www.electricfairground.com/2009/10/31/ajax-content-jquery-page-transitions-and-why-you-should-ditch-the-browser-refresh/

maybe i can preload all my gals, and show/ hide them using jquery, so the page dosnt jump between albums... just

http://stackoverflow.com/questions/893764/how-do-i-add-a-page-transition-when-leaving-page-with-jquery

wordpress gallery plugins that use the gallery shortcode

2009-11-19T23:26:00.004+11:00

1/http://wordpress.org/extend/plugins/image-gallery-reloaded/

ok i have tried this out, and it is great but has a weird bug in IE6,7,8 where the large image dosn't always autoload when you visit the page for the second time, a release of next version is in the works, so check back when thats ready, but for now I cant use it.

2/ http://graphpaperpress.com/2008/05/31/photo-galleria-plugin-for-wordpress/

its like devkick galleria, but for wordpress.

ok ive just tried this out, is promising, but ironically it has the same problem in IE browsers as above! no first large image loading. (MAY have to do with the fact I am testing the gallery on single post, or single page.)

a guy called ALEXANDER posted on the comments of the plugin a version he made, which you can download, where he adds some if is_single statements, and it then works, on single Posts, since i actually am planning to use on a single Page, is change the 3 ocurances of is_single to is_page, and now it works on pages, but broken on single posts of course, which dosn't bother me.

Wordpress tutorials and stuff

2009-11-19T23:16:00.001+11:00

GENERALLY A WORDPRESS RESOURCES PAGE MOVE THIS ELSEWHERE

http://www.webdesignerwall.com/tag/wordpress/

making a custom theme tutorial, good one, do this when have a second, recommends doing a html version first,

http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/

really really good list of common useful wordpress hacks

http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/

and this is good too

http://www.wprecipes.com/

wordpress as a cms tutorial

http://www.cozmoslabs.com/2008/09/14/use-wordpress-as-a-cms-with-thematic-part2/

CSS display:table - the end of the floated div?

2009-11-19T13:45:00.003+11:00

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

basically, the old html table structure now is available in CSS making it much easier to make 3 column equal height layouts and image caption grids and so forth... - im trying to find out what browser support there is for this - like does IE6-7 have css display:table-cell properties??

ahh if you read the comments, it lacks...

-workingness in IE6-7

-ability to change around the source order for ultimate SEO

-buggy with % based widths that contract relationally

also

A problem for within-content-area layouts is that you loose the ability to position items absolutely within relative blocks. see...

http://alastairc.ac/2006/06/css-tables-verses-layout-tables/

heres an example of a tutorial on this that includes IE 6+7 workarounds. it is interesting but involves giving IE table tags in the source within conditional comments. I dont like how jumbled the markup becomes... it will all have to be removed eventually....

http://www.projectseven.com/tutorials/css/3-column-flex-display/part2.htm

im not really into this, although i have used a table display thing to get vertical centering before which worked ok.

Nice websites inspiration - css large backgrounds

2009-11-18T23:58:00.002+11:00

http://www.webdesignerwall.com/trends/80-large-background-websites/

and how to examples, this 'bad example is actually exactly what i need... the background and the content are 'fixed' together, and slide around as a unit.

http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

http://www.webdesignerwall.com/demo/large-background/bad-example.html

this example is fine in IE6, dammit it bkrnd slides around in IE8 (at least the version i have installed, from april 2009... (try newer version??), IE7 is fine. Except for all IE versions, the size of the background image is the maximum window size you can stretch to... weird, i wonder what this looks like on a large res screen, how weird to constrain the window size to the background image size....

body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; /*stops the background image from shifting when you resize the browser window in FF and..saf?*/ display: table; /*stops the background image from shifting when you resize the browser window in FF and..saf?*/ }

and tip from there

Although large backgrounds at website look very nice it kills bandwidth and scares of visitors with slow internet connections.
So here are some tips&tricks how to use large background images and still have a fast loading speed:
- use the .gif extension (max 256 colors, with transparency support)
- use the .jpg extension with a higher compression (between 60 and 70)
- split the large image into smaller chunks, but requires some extra CSS
- load the background at the bottom of the HTML, requires some extra CSS

and this helpful things to note

Markup4U team
October 20th, 2008 at 1:38 pm

@Tor, Aaron Bassett
Setting a background for an html tag (thus, forcing the browser to calculate the width and height of the html element) will cause the body tag to be rendered as div and *not* fill the browser window’s full height (only as far as the content goes).
In such cases height/min-height properties should be set additionally.

@Colin
display:table works here because the body is not *shown* as table, but *rendered* as table, i.e. the minimal box width is calculated. No side effect on seo/semantics

@Cédric
Notes for IE6
1. setting expression like property for body’s min-width will fix this issue.
2. In some cases the width of the image needs to be wider than the container’s width.
For example:
* html body { width: expression(document.documentElement.clientWidth < style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">}
Please note that such css selector is not valid so it should be placed in a separate CSS file and linked using conditional comments. 904px is a value for webdesignerwall.com site’s min-width.

Great. This tutorial would have helped much when I tried to put a fixedbackground on my site. http://la-cajita.es/blog/

If anybody is willing to try it, the CSS would look like this:

body {
background: fixed url(’./images/lacajita.jpg’) no-repeat center;
color: #333333;
}

This way, with “fixed” and without “top”, it stays completely centered, even when you’re seeing just a little part of the website through a small browser window.

I would be more careful with huge backgrounds in terms of using website for different browsers - and I’m not talking about chrome/safari issue. Major problem is still pixel rounding which is different in different browsers.
E.g. FF3 will put offset 1px to the left, while IE7 will do it other way plus 1px more. Issue is appearing mainly when ‘center’ is in use.
Personally I found the way doing backgrounds in separate divs (one below body) with ‘top left’ or ‘top right’ (image is still fixed with pixel size, so shouldn’t be any problems with it). That way makes it safer for cross-browssing & saving your time to make fixes in IE.

I hope pixel rounding will be unified one day in all of the browsers (knowing market actually, proofs me wrong).

And heres a solution for centering massive things in content not just bkrnd images, works in IE6, like a large flash file, that dosn't bump up against the edge of the browser

http://shawncope.com/2008/06/css-trick-center-content-that-is-larger-than-a-browser-window/

incase the page disappears heres the css:

body {  margin:0;  padding:0; }  #wrapper {  width:(element width);  height:(element height);  margin: (1/2 height) 0 0 (1/2 width);  padding:0;  position:absolute;  left:50%;  top:50% }

starting to think this is going to be too cross browser buggy (my plan was to exactly pixel perfect join an img, and elsewhere a swf, with a background image line, and have it all stretchy and centered... ... might just use one big image / flv centered like as above.... with some z-index magic over that... breaking up the image into different bits is asking for trouble..

Embedding Fonts in Flash

2009-11-18T00:47:00.004+11:00

I just got a bit paranoid that fonts were not embedded in a Flash project properly. (for a exe / projector going into a CDROM)

How to test for this when I don't know what the users computer will have installed and what it defaults to? How do I see this result if I have the font installed?

DER moment, just drag that font your dynamic text field is using out of your (on a mac) System > Library > fonts folder and anywhere else it is installed. (search for the font name in spotlight). Drag the font file onto your desktop or something and your computer will think that the font isn't installed. Then test your projector (built before 'uninstalling' the font of course), and low and behold, if you havn't got your fonts embedded in your projector, you will see the default font, which is Times. This will very clearly show you if your fonts are embedded in every dynamic text box instance in your project. (you need to click the properties panel 'embed button' for every text field on stage, or do it via actionscript and adding the font to the library. If you don't see Times font with your font 'unistalled', then your fonts are embedded properly, to test try on one dynamic text field clicking the 'embed' button and clicking 'unembed', then publishing your projector.

If you don't drag the font out of your system fonts folder to test this and your fonts are not embedded properly in the flash projector, the dynamic text field will use the intended system font if its available to render the text, which actually looks very similar, but different (heavier) to what the font looks like when its embedded properly in the flash file. Without an eagle eye you might not notice this. But your end user certainly will if they don't have that font and see the dreaded Times instead! If your using a dynamic text field in Flash, embedding the font of choice is essential (unless you need a really small file size for the web delivery and don't care about font consistency).

A really helpful resource to learn about text in Flash is called "Foundation Flash CS3 for Designers" By Tom Green and David Stiller and Friends of ED. Chapter 6 "Text in Flash CS3" explains almost everything you need to know about fonts, embedding, aliasing etc.

wordpress as a cms plugins list (not the usual culprits)

2009-11-12T16:03:00.004+11:00

http://www.jonbishop.com/2009/10/31-wordpress-cms-plugins/

i especially like "custom admin branding", "magic fields", "wp-cms", "more fields", "side content" "wordpress navigation list plugin NAVT", "Ryans simple cms"

all these sound useful and worth a test.

Hotlinking

2009-11-11T18:19:00.002+11:00

read this about how to stop people hotlinking... it good... esp for photo based sites...

http://desizntech.info/2009/04/16-tip-to-make-you-a-better-web-designer-and-blogger/

Setting up a local server for wordpress development on a mac

2009-11-09T18:37:00.004+11:00

and... i want it portable....

on a mac, download mamp:

http://www.mamp.info/en/index.html

follow these instructions

http://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP

or these (includes CODA app setup)

http://jayrobinson.org/2009/08/10/setting-up-your-mac-for-local-development-using-coda-wordpress-mamp/

and then to localhost multiple sites here is the neatest description for editing apache file and other tricky things...

Adding a Virtual Host is a 2-step process:

Add a new entry to your computer's hosts file.

A hosts file can be used to point requests for a domain to a particular IP address--in other words, it lets you re-direct communications to a particular domain. In the case of a virtual host, it can tell the computer to NOT go out on the internet when you type a particular URL like http://clientA/, but instead look for that particular domain on your own computer.

Edit the Apache configuration file to accept Virtual Hosts and define the particular Virtual Hosts you want to setup on your computer. The first step above, merely redirects requests from a particular domain to your computer, but this step prepares the Web server on your computer for handling those requests. In this step, you not only provide the name of the Virtual Host, but also tell Apache where the files for the site are located on your computer.

http://expressionengine.com/wiki/MAMP_setup/

cross check the instructions with this, it includes a method for backing up the hosts file so if you muck it up it can be recovered. i think ill follow this...

http://www.sawmac.com/mamp/virtualhosts/

and this...

http://discuss.joyent.com/viewtopic.php?pid=182288

this guy says to open hidden files with textwragler rather than terminal... i think...

http://njmac.blogspot.com/2008/07/mamp-virtual-domains.html

another one

http://net.tutsplus.com/tutorials/wordpress/how-to-set-up-a-killer-wordpress-testing-environment-locally/

more about virtual hosting

http://patrickgibson.com/utilities/virtualhost/

some advanced way of setting up virtual hosting, including an install script...

http://postpostmodern.com/instructional/a-smarter-mamp/

This is a cheap app that does the apache config and hosts file scaryness for you... and works with MAMP. others say just buy MAMP Pro, but this is cheaper. actually, its free to test, if you want to host more than 3, you buy it.

http://clickontyler.com/virtualhostx/

i just installed it following these instructions. http://bitbob.com/mac-web-development-made-easy at first it didnt work, either appache or mysql wasnt giving the green light in mamp. i tried quitting, opening mamp again, and resetting the ports to the defaults or something. i noticed the mamp window opened saying you have successfully installed mamp, so maybe it wasnt finished being installed before. i reran the virtualhostx setup wizard, made a test site folder etc, still wasnt working (no apache light i think). i think i had opened and started it the first time from the dock application. this time i opened it from the actual MAMP app, went into MAMP prefs again, and it had changed the ports i was sure i set, from the default 80, 3306, to 8888, 3306. which is weird, it seems the setup script of VHX was changing the ports? anyway, i changed them to 80, 3306, and OK, and restart things, and finally green lights for both.

so summary, if it don't work, check mamp is actually finished installing, and that the ports are still set at 80, 3306.

considering portability of my setup between machines, ive considered using the "export server settings" feature, and import on new machine... i hoping this saved all the site setups... (they prob need same OSX version...) doing this, and drag replacing the mamp apps folders, should give me a portable setup (actually, a backup and write over files process)... eg: on the new machine....

1/ drag and write over old MAMP app folder which contains your dbs (MAMP is meant to be self contained)

2/ import the old computers VHX server settings file into new computers VHX to get your virtual hosts setup as in the other computer. (not sure if this is wrong to do or not... have to try it...)

3/ dev your sites on your portable external HD (pointed to in VHX)

4/ for the FTP stage, use a text editor (not dreamweaver) that easily allows for site info (eg FTP info) to be stored with site files... migrating DWs 'manage sites' info is a major multi step pain. I have read somewhere textmate does this...

OR... (and its looking better by the second...)

install a bootable copy of OSX on the external HD itself...for ultimate portability, use this copy for your web dev work, eg when working with small files... dont install all your crazy apps on there, just web dev associated... it might slow you down like this botting up for it, but it seriously seems like the closest to the holy grail of keeping all your web site dev data (virtual hosts, dbs, apps, prefs, FTP infos, and of course the files, in one PORTABLE place. (other than developing online like through the wordpress admin panel! load reload = SLOW though. )

how to view MAMP sites on your mac from your testing pc... (insecure) i think ill just test PC from live server for now...

http://tomscottmalden.wordpress.com/category/web-development/testing/

if you dont use Coda here is articles about dreamweaver settings and MAMP setup

http://www.adobe.com/devnet/dreamweaver/articles/setting_up_php_05.html

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_05.html

and if your making emailing / notification forms, setup a local mail server too so that it quicker to test emails aswell

http://cutedgesystems.com/

This is all well and good except I work between 3 different computers depending on where I am, I have all my work in progress files from an external HD.

I have been searching for a solution to NOT have the sites db in the Applications/MAMP folder, but all portable on my external HD... or just an easy way to move the files between computers, what needs to be backed up and saved in the MAMP folder I don't know.

A solution I just thought is to partition my external portable HD and boot OSX from it, if that is possible... then I can have my Apps/MAMP folder on the external HD, and all my dbs etc. Its a bit drastic but it might be the actual best solution...

Install MAMP as a disc image alias for portability, looks promising, i don't know how it would work with the hosts file terminal thing for multiple sites, guess can only try it and see...

http://blog.netteo.net/2007/07/23/installing-apache-php-mysql-on-an-usb-flash-drive-on-mac/

CODA / MAMP workflow with interesting tip on using WP starter fresh install to speed things up. also like the .dev naming coonventions, gets around a problem I imagine that might happen when you go live to .com

http://groups.google.com/group/coda-users/browse_thread/thread/80323da5039c2581?pli=1

Since you'll be working with fresh copies of WP (and whatever
additional WP plugins or themes that you find yourself adding in by
default), grab a copy of the CreateProject plugin for Coda, and set it
up with whatever your default install of WP is. Speeds up initial
setup like you wouldn't believe.

So far, here's your initial workflow:

1) Create a new Site within Coda

2) Run Coda's CreateProject plugin to generate a default site within
your MAMP Pro's httpdocs directory. I actually have MAMP Pro pointed
at the Sites directory in my user's home directory (i.e., /Users/bob/
Sites/ ), but to each his/her own...

3) Set up a new virtual site in MAMP Pro and point it at the new site.

You're done with initial setup!

Also, with MAMP Pro, you can set up actual domains for your sites. I
use ".dev" as my TLD, so I don't have to go to http://localhost:80/~sitename
or whatever... I can type http://mydomain.dev and access the local
site.

Anyway.... that's a start. Hope this helps you and anyone else looking
for a Coda/MAMP (Pro) workflow.

and then tips for uploading to the webserver

video tutorial

http://www.lockergnome.com/computerwhiz1/2009/04/09/quick-tip-9-how-to-transfer-mamp-site-to-a-web-server/

more uploading (key is to not use one click install or wps install script but to import the db and connect manually.

http://wordpress.org/support/topic/222789

and

http://codex.wordpress.org/Uploading_WordPress_to_a_remote_host

moving wordpress generally, and changing its location

http://codex.wordpress.org/Moving_WordPress

personally i think its easier to dev the theme offline, using dummy text and images, then install wp on server fresh, upload just the theme, add your real text and images online rather than export/import db mess, do final testing online. populating the sites content is often not my job anyway...

CONCLUSION:

stop searching, just follow this tutorial...

http://bitbob.com/mac-web-development-made-easy

install MAMP and virtualhostx (on all computers??) for the virtual domains thing (proper domain names in their root folder for future setup usefulness for more complex sites), and then, drag / drop MAMP app folder to and fro on different machines to keep the DBs up to date... once I've got that setup working proper, try this for making an alias to the apps folder...

http://blog.netteo.net/2007/07/23/installing-apache-php-mysql-on-an-usb-flash-drive-on-mac/

but its less important.

I will need to review this setup and test it properly - for something bigger where the DBs are going to be populated offline, or already existant on a site... but for now this should be adequate just for WP theme development across multiple separate sites.

---heads up for mamp settings...

I created a subdomain on the live server for local testing, that way it matches my host setup, much better this way.

If on local only, I would recommend using Mamp Pro, and use the mac default ports so you don't have :8888 issues on the live server.

[ [
contemplating the meaning of existance, what else would I be doing
] ]

and

Well, to answer the OP, or to help another fellow Mac user without getting into "is mamp good or bad", I can tell you, instead of accessing http://localhost:8888/second_site, you should attempt t access http://second_site:8888

Before you can pull this off though, you should place second_site in your /etc/hosts file.

First, enable show hidden files in finder (google it) or use PathFinder.

Second, go to the alias /etc/, find the file called hosts and copy it to your desktop (You can't edit it in place). Also, make a backup in case something goes wrong (it shouldn't, but it's always smart to back up when you're about to change stuff). In your desktop, open the hosts file and go to the last line. Hit enter to create a new one and type 127.0.0.1 second_site. Save the file, exit, and then copy it back to its original location (/etc).

It might ask you for an administrator account password. Authenticate.

Close all the windows of your browser and restart. Then, attempt to access second_site:8888 or second_site:8888/drupal .

Hope this helps anyone.

more about using certain ports and MAMP info setup

http://www.sitepen.com/blog/2008/05/16/supercharge-mamp/

percaution of mamp pro if you use time machine to backup

http://blog.mirthlab.com/2008/04/05/mamp-might-break-your-time-machine-backups/

other stuff:

server on a stick (USB drive)

http://developmentseed.org/blog/2007/aug/03/getting-web-server-run-usb-drive

interesting workflow for wp theme dev

http://blog.circlesixdesign.com/2006/12/25/wordpress-theme-development-workflow-for-osx/

JSP app in similar category, catslapper...

http://blog.archive.jpsykes.com/129/mamp-pro-catslapper/index.html

Tutorials on creating a wordpress theme and WP as a CMS

2009-10-30T15:34:00.005+11:00

This a an amazingly comprehensive tutorial, shows you how to make all aspects of a theme, even 404 pages, and CSS frameworks. By the trusted Themeshaper blogger. Go here first.

http://themeshaper.com/wordpress-themes-templates-tutorial/

another tutorial

http://wordpresscms.ithemes.com/basics/getting-started/

PHP 101

read this...

http://devzone.zend.com/article/627

theme dev checklist - really good checklist for a full theme

http://codex.wordpress.org/Theme_Development_Checklist#.22Theme_Unit_Tests.22

mcafee security info etc read when time

2009-10-28T19:39:00.002+11:00

http://home.mcafee.com/AdviceCenter/Default.aspx?id=ad_itp

except it dont look like they make mac software. find some mac software

cms security

2009-10-28T17:23:00.003+11:00

lots of info about wp security and cms in general, comments contains lots of info. beware ftp hacks, on your actual pc, you infecting the sites from your pc... (keep pcs very secure)

http://www.prelovac.com/vladimir/warning-website-virus-attack

wp security plugins

http://wayan.web.id/9-best-wordpress-security-plugins.html

protecting wp-installations... IMPORTANT

http://www.mattcutts.com/blog/three-tips-to-protect-your-wordpress-installation/

JQuery demos and learning resources

2009-10-17T02:16:00.002+11:00

great site for common learners bits and pieces

http://jquery.cherryaustin.com/

this is great for a grid of images with rollover captions.. and the images rollover zoomed

http://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial

this is for those slide to sites where it slides up or across the page... (use scroll-tp pluin instead??)

http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

self playing slideshow of images with fading and a grey transparent caption at the bottom... good for portfolios etc and could be adapted into other uses.

http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

it would be cool to have a basic gallery site, that you can just click and choose the type of animation...

grow and shrink an image without other things around it being affected...

http://justinfarmer.com/?p=14

disjointed rollovers - great for portfolio site or visual menu. it is a rollover version of 'frontpage slideshow' great for a 'preview of menu items. i can see it as a list of links, but when you rollover it shows a preview of that, all in one box.. (would need a combination preloader.. )

http://justinfarmer.com/?p=6

this is amazing, sequenced loading of images... id love to do a whole grid of sequenced images, or randomly sequenced images in a grid... ... its great for a nice page load too, to hide the page, then load divs in a sequence that you want... really really nice....

http://www.chazzuka.com/blog/?p=87

jquery basic rollovers

http://www.shopdev.co.uk/blog/jquery-rollovers-using-this/

fade in and out menu images... (id like just text to fade in and out

http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect

menu ideas roundup

http://query7.com/jquery-menu-roundup

other wordpress customisations

2009-10-03T22:33:00.002+10:00

MAKING A MENU:

this makes the links widget the main menu with categories and pages.

http://www.matteostagi.it/a-customizable-menu-for-thematic-for-wordpress/

wordpress / thematic tutorial

http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/

More horizontal scroll resources

2009-10-03T00:50:00.004+10:00

buy this wp theme??? it has horiz scroll....
http://themeforest.net/item/photo-scroll-wordpress-gallery-2-in-1/full_screen_preview/41544
also, this,
http://themeforest.net/item/photo-nexus-wordpress-gallery-2-in-1/full_screen_preview/38530
for just thumbnails and fades...

this is a scrolling window that dosnt use the scrollbar, just opposite of mouse effect
http://valums.com/scroll-menu-jquery/

a jquery plugin 'anything slider' scrolling pane 4 portfolios

http://css-tricks.com/examples/AnythingSlider/

tutorial on it

http://css-tricks.com/anythingslider-jquery-plugin/

horizontal tony scrolling script, could be useful:
http://lab.centralscrutinizer.it/the-tiny-scrollings/

smooth scrolling plugin - maybe avoid other plugs and just have this for the back link niceness.
http://www.thechetan.com/smoothscrolllinks/#header

css zen garden example
http://www.csszengarden.com/?cssfile=037/037.css

a tutorial on actually building a jquery slider yourself, like the apple store has, with in window scrollbar

http://jqueryfordesigners.com/slider-gallery/

Photographer Site - Horizontal Scrolling of page to view gallery

2009-09-29T01:07:00.004+10:00

solutions so far...(make a page display its content aross the page, not down, and its width is variable as content is CMS based... )

recommends using tables, or jquery...

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

the problem here is that it looks like it relys on each 'item' to have a width set in css, but each of my items will be photos, with differing widths but same heights... it needs to be smart enough to grab the widths from the actual items as they load.

shows a demo with and without jquery

http://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html

and heres a horizontal website showcase

http://www.cssleak.com/Category/Horizontal-Scrolling-Websites.html

this in particular is really nice...

reminds me that can porbably use jquery scroll.. maybe... and to have the nagigation all in the left side...

http://www.album.alexflueras.ro/

this is also kickass...

http://www.alingham.com/

Tech Blog Fantastic

virtual pc 2007 on windows 7

Offline wordpress theme development - localhost map and virtualhostx

Sidewinder theme - new sideways scroll theme from graphpaper press

how to fix virtual pc 2007 internet connectivity

video for youtube - codecs and workflows

Photo Video backup workflow, intense

Mac OSX maintenance, routine maintenance

Checklists for good HTML and efficient CSS

Video for the web - 2011 updates - HTML 5 video etc

Dummy images right size generator

rich black and plain back all about

TO do -write up a FAQ and make these assets for new web projects

Ultimate guide to setting up wordpress after an install

New Indesign / print stuff

Freelance / Design Business Sites - Good Examples

New links

LOL @ Google

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

Publish to HTML5 from Illustrator using plugin

Browser testing - new stuff

Drupal latest Zen theme css browser fixes for a sub theme

Clearing Floats... modern methods and explanations

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

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

IE9 and CSS3 What can we start using?

Learning Resources

Security malware etc, free virus scanners, external drives

os x security, and network security

Things you can do with HTML but not XHTML

Cool HTML coding quality checklist / reminder

Make Illustrator cs3 pixel perfect for web design and slicing

css3 buttons

Drupal Zen theme IE fixes

Equal Height Search Forms

Email signatures / Outlook Stationary / HTML email

HTML Emails and email marketing resources

Cool social services email signatures - Wisestamp

good learning php resource

cool site - paid forum for hep with wordpress and bounties

Interesting CSS split a UL into 3 equal columns and keep top heights aligned

More Website speed and optimisation links, http headers

Website Pre-lauch checklist

why blogger is better than wordpress (self hosted) for beginner bloggers

random wordpress and seo links

All about Wordpress permissions and security

SEO - google ignores the meta keywords tag, but others don't...?

wordpress as a cms - dont load parent link in menu, go straight to sub menu item

Moving wordpress to a new host and to a new domain name tips

Latency - more important than bandwidth?

adobe meermeer

Mobile Browser Testing - what browsers to test on?

learning Jquery and PHP resources

SEO links to keep (SEO 101)

Supercheap website solutions for stingey clients

Screen Resolution ultimate 960 grid too big??

new jquery stuff, easyslider

idisk unavailable

Why are windows PCs so fucking hard to connect to the internet??? (and virtual pc connectivity troubleshooting)

good article on security for small business

WIREFRAMING APPS

drupal nice menus navigation, filter the function, make it allow html? , wrap two word list items over 2 lines solution

CSS sticky footer or stretch footer

drop shadows css technique for drop-down menus

photoshop and illustrator tutorials - 3d effects arwork and logo tutorials

Text cleaner for cms clients pasting from ms word into cms

Cyber security

css only tooltips

photoshop colour for web design

drupal links - compact login block etc

white background flickering in IE, chrome

website speed tips

swfobject 2 and great examples of use code

Flash Preloaders

JQuery Slideviewer and Supersized (lg bkrnd img) and fancy thumbnail

wordpress cms plugins

New typography links and examples.. for great body copy, . and css font stacks research

Grids... fluid 960 grid...

swf as a background image (or seemingly) using swfobject and z-index

other options for a wp gallery