Thursday, December 4, 2008

HTML Email mailto: link with auto-filled subject

Test Page

This below dosnt work (Apple Mail dosnt get the subject line)
info@yourdomain.com

This works using Apple mail, Safari, FF, also On PC - MS Outlook, from IE6, IE7, FF, Also Opera and Opera Mail and Netscape 8 with Outlook. Havnt tested Entourage.
info@yourdomain.com

info@yourdomain.com

Thursday, November 20, 2008

IE6 fixes

Double margin thingo

display: inline; /*IE fix -- http://www.positioniseverything.net/explorer/doubled-margin.html---*/

From Drupal - zen theme fixes

Horizontal navbar or menu

  • s floated next to each other - not sitting in line in IE6 

      ul.themenu 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.themenu
      {
      _width: 100%; /* Otherwise IE5 treats the ul as floated */
      _w\idth: auto; /* Reset to auto width for IE6 */
      }

  • Monday, November 17, 2008

    Checklist for launching a new website

    This is good!
    First 2 points are GOLD

    Order domain name

    If it’s a redevelopment of an existing site find out as much about the domain as possible including what needs to be done to change it. Domains names are notoriously difficult to work with because they are usually ordered by 2 types of people:

    1. Your new client who doesn’t know anything about domains. They won’t know how to change it nor remember the login details. Your client will want you to deal with the registrar but the registrar will only deal with the client.
    2. A previous web developer. This person will be pissed off that there portfolio piece will soon cease to exist and will usually not be cooperative.
    ... read more here http://imgiseverything.co.uk/2007/11/15/an-essential-checklist-for-launching-a-new-website/

    Wednesday, November 5, 2008

    Roundup of colour management / calibration / cs3 profile etc etc info

    Links to info about this... assumed colour management was only important for dealing with print, but its not. Especially with CS3 - and save for web from illustrator / psd on a mac...

    This looks like a good primer from apple about colourspaces, profiles, calibration etc...
    http://support.apple.com/kb/HT2026?viewlocale=en_US

    Looks like good explainations of various colour issues in these pages
    http://www.gballard.net/psd/saveforwebshift.html

    dont embed ICC profiles in your save for web dialogue if you want to match graphics and coded hex colours seamlessly. see...
    http://www.gballard.net/psd/save_for_web_embed_ICC_profile.html

    that post basically has screenshots of how to have settings in save for web.

    so finally this is solving why when you save for web, photos get dimmer and washed out, they actually only are on my monitor not everyones elses because my gamma is set to 1.8

    but really still in 2 minds about whether to have embedded profiles when saving for web or not. i tick convert to sRGB in save for web drop down.

    1/ ticking embed icc profiles makes a less washed out image when viewing in safari. for some images it actually looks too saturated, maybe because they are incorrect to begin with. note that in firefox the image wont be any different and neihier will it in vista (vista displays it sRGB regardless. so is it worth the xtra 4k.

    i was just about to think yes definately, then i viewed the images on an imac and there wasnt as much difference. and actually the untagged (more washed out) image actually looked better i think because the pic is too saturated to begin with.

    2/ usually you wouldnt tick embed profiles, for web type things, because in safari or colour managed browsers you will get a mismatch between a jpg and a hex coded colour background. (because the hex coded background cant possibly have an embeded profile.

    3/ so i dont know what is the answer. should i embed the profile so that in mac on safari the images look more saturated and similiar to the original image or have consistency between firefox and safari and hex colours and go for the washed out version which actually looks better on some images. and saves 4k per image. and also, on my screen it looks washed out but it wont on every mac screen.

    4/ but mainly the concern was that what if my screen is very similiar to other mac users, and all of them using safari are seeing non punchy desaturated colours on the web when they dont need to be. see calibrating the monitor is actually NOT normal, so if you calibrate your monitor you will see punchy colours but the users still wont so whats the point. id rather leave my monitor to be like theirs, as a reminder that this is what it is going to look like for them and remember then to make the choice of embedding profiles or not.

    also this is the reason why save for web images (without embedded ICC profiles) look different in a Preview or a browser and photoshop. photoshop views them in whatever is the working colour space eg. SRGB whereas Preview's colourspace is 'monitor rgb' which is the washed out one. but if you view a tagged (icc embedded srgb profiled) image in preview, it will look the same as in photoshop.

    im gravitating more now towards tagging (embedding icc profiles) in save for web images, just because it is more correct in general to have a tagged image than an untagged. The tagged image will preview correctly and consistently in the finder, preview, safari and photoshop (but look washed out in firefox or any non colour managed browser but theres nothing to do about that anyway, at least safari users are seeing something closer to correct).

    And especially to embed the profile when 50% of site visitors for the type of site your working on will be creative types on a mac OSX, using safari probably. the ones that count for commercial sites (customers with money to buy the products) will have fast bandwith so no caring about extra 4k, AND if someone has supplied a SRGB image that they have been viewing in photoshop with srgb working space, then i go and untag it and they view it on safari, it will look different and washed out compared to what they gave me. this = not happy.

    just workeed out why the untagged profiles look different on the imac and the laptop. laptops 'generic rgb profile' and 'colour LCD' profile is used in the finder and in preview. the imac uses 'imac' profile to view things ie its own 'generic rgb profile'

    so best thing to do is in your photoshop edit > color settings, you have ticked all those boxes that say profile mismatches etc etcwhen you open and paste files and so on. its a good reminder. it also helps you know what your working with, and you can convert images destined for the web away from adobe rgb to srgb when you open. its really important to be aware of which colour space the things your using were designed in and so on and you can sort of guess what it looked like on their screen.

    whatever work now.

    Friday, September 26, 2008

    Roundup of best ways to do common things in CSS

    CSS Rollover images
    Changing a background image on hover causes the browser to load it when its rolled over, which results in a long pause and a blank space where your buttons meant to be.
    The simplest way to avoid this is this Pixy method - putting your button state images in the one image and moving that back and forth on hover states. Dont know what they mean by a flicker in IE, its seems fine in IE7.
    http://wellstyled.com/css-nopreload-rollovers.html
    A more complex method is here
    http://www.alistapart.com/articles/sprites/

    Li class active in CSS menu - but menu and head is a php include - solution

    You including the main navigation menu on all pages using and .inc file and you also want to have the menu highlight to show which page its on. You could
    • do this by giving the body an ID and CSS styles for each body ID=active or something. BUT my body tag is in an include called head.inc - so it cant be unique on every page.

    you could give the ul containing the menu a unique id on every page and then your has the code below- note - I think it can't be and .inc file anymore, it must be changed to be called .php because its actually executing php inside the menu include now, not just including plain HTML. ALSO - watch out for the " " marks, i don't think they're meant to be the fancy curly ones but the plain ones - retype the code to be safe rather than copypasting.


    VARIATION - You can also change the menu code slightly to make the active page not linkable at all - this will further make the current page stand out from the other menu options. Here is an example of the code you would use for the links:

    ahh cant work out how to paste code without it becoming html - go to the linked page for now

    Tuesday, September 23, 2008

    Recent finds and fixes typography and jquery fades

    OS X and type rendering of knockout text (white text on a black background)

    Normal body text in this situation on a mac looks bold, because of the anti-aliasing engine going overboard on knockout text. 

    /*text-shadow: 0 0 0 #000;*//*makes light coloured text look thinner in safari see http://24ways.org/2006/knockout-type */

    Except theres nothing like that for Firefox. So Im using a lighter font family which is installed by default in macs. 

    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

    and hoping it dosnt look too think with people who have PCs and that font. 

    JQuery fades side effect on Firefox 2 on a mac for type anti-aliasing. Or why on my Jquery gallery pages does the text suddenly look rubbish until I mouse over it?

    /*-moz-opacity: 0.9999; *//*For Ffox 2.0 mac - Jquery fades on a page turn off its text anti-aliasing on that page. This style turns it off permanently so the problem isn't obvious. Double bonus of making knockout text not as heavy on os x. BUT - its makes a peekaboo bug on mac FF2&3 happen to Quicktime / Flash content so it cant be used.  */

    This seemed like a good fix until I checked a page with embeded quicktime and it was making the video display a peek-a-boo type bug when your mouse went near it. Ive read this also happens with Flash content (or your SIFR!). 

    IE7 cleartype (anti-aliasing) being turned off by Jquery

    Theres also a similiar and just a shit problem that happens on IE7 to cleartype, in that the cleartype (IEs versions of anti-aliasing for web text) gets switched off when its part of your fading gallery (on mine text on the page is ok, just text thats being faded up with the gallery images looks rubbish). Aparently a fix is:

    Assign a background colour to the bit thats being faded / the containing element of the text (but this isnt a solution for me because that area needs to be transparent (have no background assigned). 

    this could also be a fix

    http://groups.google.com/group/jquery-en/browse_thread/thread/221169cf3a03d32e/51326b4726541831?lnk=gst&q=text+anti-aliasing#51326b4726541831
    > But for IE7 you need to remove the opacity filter after the  
    > animation completes:
    > $('#myDiv').fadeIn(function() {
    > if ($.browser.msie)
    > this.style.removeAttribute('filter');
    > });

    IE 6 div with class applied weirdness / bug - only applies first class styles in css source order

    quick noteabout IE6 and having a div that has a class applied to it as in the html below. 

    HTML is

    CSS is

    #adivoneverypage {its styles}

    #adivoneverypage.aclassforacertainpage{

    special styles for just one unique page- as a class -but inheriting 'base' styles from above that are common to allpages with this div. (Mainly just to reduce repetition in the CSS file)

    }

    #adivoneverypage.aclassforacertainpage2{

    styles for a different unique page to above- as a class -but inheriting 'base' styles from #adivoneverypagethat are common to allpages with this div. 

    }

    #adivoneverypage.aclassforacertainpage3{

    special styles for a different unique again page to above- as a class -but inheriting 'base' styles from #adivoneverypagethat are common to allpages with this div. 

    }

    so the problem being - that in IE6 -it only applies the special class styles which come first in the source order of the CSS, and none after that!!! its as if these special styles just arent there, IE6 STOPS reading the styling after the first one is applied. You can test by copy pasting the last special class style and putting that first (after the #adivoneverypage styles) in the CSS source order. Then its styles will be seen by IE6 - but not the ones below it. 

    My fix to try is NOT USING class selectors on DIVS to make specific changes, but having just a unique div on every page and repeat the same a few times in the css instead of once and having all the classes inherit it. 

    so the HTML is instead:

    CSS is 

    #adivforacertainpage {its styles}

    and for each page have unique div IDs. Which is a shame because sometimes these divs on each page are practically identical except for maybe a bit of different padding is necessary for a certain page, or something like that, but otherwise they are the same size, have the same margins, positioning etc etc, so its a shame to have to repeat the CSS over and over again. 

    Saturday, September 13, 2008

    Vertical Centering a fixed width and height website using CSS

    Testing out CSS vertical centering methods for a fixed width / height website - have been using horizontal centering via auto margins for ages but vertical centering is necessary for some upcoming work.

    A good explanation of historical methods and tutorial:
    http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
    FIXED HEIGHT CENTERING
    Live example - a simple method using a negative margin floated div like a spacer to do it. it also centers the background image which is great.
    http://www.pmob.co.uk/search-this/center2.htm

    CENTERING WHEN NO FIXED HEIGHT
    Another method thats a bit more complex that works for if the div you want to center has no fixed height. Its uses display:table and some IE fixes.
    http://www.pmob.co.uk/pob/vertical-center4.htm

    Remember background can be centered vertically too, like this:
    background:#000 url(images/vertbkrnd.jpg) repeat-x center center fixed;
    and apparently need also body height 100% like:
    html,body{
    height:100%;
    margin:0;
    padding:0;
    }

    and a note - it dosnt have to be exactly centered, it could be say 30% from the top to be more compositionally nice.

    Wednesday, September 3, 2008

    Inspiration sites

    Lists many sites with new good design etc
    http://www.cssartillery.com/

    Thursday, August 28, 2008

    Roundup of paid CMSs

    Here is a large list of Australian CMS vendors. Guessing that means people that make custom commercial solutions and then help install and set them up custom for whoever buys them. http://www.steptwo.com.au/resources/australian-cms/

    Stuff out there:

    Traffik

    http://www.playintraffik.com/Detailed_Features

    Part of this new breed 'hosted application' type thingy.

    A hosted website CMS / shopping cart / hosting / blog / customer database /community / email marketing / customer database / everything you can think of. Its about $30 per month minimum, goes up to $160 per month. You only pay month by month.

    They offer a 30 day trial where you can build your own thing and see if its good. From brief looking at it it looks like pretty amazing and they have thought of everything. So if its a large site, and your going to be looking at paying $30 per month just for hosting anyway, then this could be good to look at because you get an all in one solution forall the things a business generally neeeds. But its a bit risky because its their own proprietry solution, so your wholebusiness is tied into them - and the web is meant to be FREE. It could get messy if you try and port over to someone else. Still, a neat looking solution.

    Light CMS
    http://www.speaklight.com/how-it-works
    Another monthly paid CMS / hosting solution. Seductive because they also offer slicing services. You could pretty much hand them a psd and then soon enough client would have their own editable site - then they can make the million rounds of changes themselves then using the CMS. Fuck they could even design it themselves in microsoft paint and send it to these guys and i bet theyd be stoked with the result and if they wanted changes there'd just a buy addition paypal button or something on the support ticket I bet. Cant argue with that button. Future is now.

    GOOD
    • They can slice and CMS and host - all in one go. Quick and nasty and done yesterday.
    • They let you brand the CMS and support.
    • They reckon you should markup their monthly bill... (lets all get rich together sort of deal)
    • Good for clients who dont have much capital to invest in a custom CMS right at the beginning. They can pay for it over a few years. By then they'll want a new site anyway. So when you look at it that way - it could actually turn out to be a decent option for microsites and whatever for startups, if they go bust, at least they havnt spent heaps on a custom CMS, just the easy to manage monthly bill - better for SMB cashflow.
    BAD
    • They dont do email hosting - they recommend gmail...
    • Imagine having to chase a client up for their web hosting fees every month or even year - what a drag! Youd spend the money your making admining the payments (or getting overdraw fees for the company billing you monthly whether or not the client wants to pay). Think this only good if you have an accounts department. Or you get the clients credit card details.
    • The internet is meant to be free. (but guess hosting isnt and they are providing hosting in a way. HTML is free, php is free.
    • if the company disappears - you have to salvage the site and recode the cms yourself because its proprietary... what a drag. Thats if you even have a backup somewhere.
    • imagine anything beyond basic youd want to add they would charge you for customisations...
    Still - its a pretty seductive idea- i think it will catch on.

    Roundup of design portals / blogs

    http://www.designshard.com/

    Tuesday, August 26, 2008

    Roundup of Open Source CMS solutions

    Looking for CMS solutions / templates. Want to try them all out and see which is better and what each one is for or best for. Also need to find out how many people use each solution, would want to use the one with the most support and the most new modules and biggest forums.

    CMS Made Simple

    http://opensourcecms.com/

    Need to have a go at trying this out properly. It dosnt look like theres that many modules available compared to what I imagine drupal would have. Theres photogallery though, forums etc etc.

    From the site...

    "The idea behind creating opensourceCMS revolved around the need to have a place where one could completely test content management systems in one place, before taking the time to install one."

    So it seems that its not one solution but it is a source for many solutions, and by searching through different ones maybe theres already one out there that is just what you need, this is interesting.

    From what I can tell unlike drupal which you can edit the content on the actual page your looking at, this requires you to login to an admin section and edit lists of pages. OK for a small site, but I think for a client its easier for them to get their head around the CMS if they just navigate to the actual page they want to edit and edit it. (Although guess to add content they still need to go to a different area.

    Plone

    Plone is meant to be more powerful than Drupal and Joomla and better for massive organisations, but needs a specific setup (a specific server / hosting setup which will probably be more expensive) and has a steeper learning curve for the web designer implementing it. Also it is written in Python, so getting a programmer to make extentions and customisations will be more expensive or harder to find than a PHP programmer to work on Drupal / Joomla.

    Joomla!

    From a quick browse of reviews, Joomla (like Drupal), is good for non-profit organisation websites. It is considered very easy to set up and get going and to learn to use. However, it isnt considered as powerful as Drupal in some respects. And advantage of it is that it is built with PHP, so if you need a customisation done, this shouldnt be too expensive to get programmed.

    Joomla has a large commercial development community. A shopping cart built in, better calendars and is easier to learn.

    Drupal

    Good for organisations that need a straightforward setup but a fair ammount of power. It sits in the middle of Plone and Joomla in regards to power and ease of use. Soa good compromise. Its written in PHP so again cheap for getting customisations made.

    Heres an excellent table of comparison features between Drupal and Joomla. http://www.alledia.com/blog/general-cms-issues/joomla-and-drupal-%11-which-one-is-right-for-you?/

    Drupal dosnt have a shopping cart built in, it is getting one soon (Ubercart). Drupal is more standards compliant. Drupal dosnt have great event calendars or Templates / Themes (which isnt an issue Id want to design it anyway). Also Drupal has unlimited subcategory levels and cross categorisation. Overall looks like Drupal is the right choice at the moment.

    Pligg

    http://www.pligg.com/

    Open Source: Looks like especially for large community sites, with rating systems. Utilises smarty templating system. Allows multiple authors, private user messaging, user profile pages etc.

    The Secretary

    http://secretary.nivr.net/index.php

    "The Secretary is a different kind of content management system. It is simple, lightweight, easy-to-use and meant for designers and artists. It aims to be transparent by removing itself entirely from the front-end - forget the restrictive themed layouts of other systems and create truly unique websites again."

    Looks really neato for artists portfolios - nice plugins with support for lightbox and cycle galleries. Good for little portfolio sites it seems, and made by a designer so looks really nice.
    It is a content management system not a page management system. ie you just design your static site how you want it, then where you want the dynamic pieces you put in the database calls, just like a custom CMS would have. Anyway going to try it out ASAP.

    Need still to find or see if its got
    - ability to have video objects in portfolio / database
    - ditto music player
    - newer lightbox modules like smoothbox etc
    - text formatting features - like blogger has
    - its just been released - so community and modules are lacking...

    Though - Drupal is still looking good for extendability down the track to adding say a blog, recent news, shopping cart - shit like that with no fuss....

    Drawback with Drupal being templates not designed for primarily portfolios...

    Gallery
    http://gallery.menalto.com/
    Looks like just a gallery feature that integrates into your cms. looks a bit complex...

    eZ Publish
    http://ez.no/ezpublish/
    Used by EMI to manage their artists websites - so handles video and music well. Looks likeits good for large organisations.
    features video, photo galleries, blogs etc. imports from office documents (yuk) has translations. Multiple upload files at once (good for large galleries). And ---- has a permissions workflow thing and you can cross publish content. They also have some sort of paid premium service which gives you extra goodies...

    Plone4Artists
    http://plone4artists.org/products
    hmmmm.....
    does video, audio, photos etc. plus a e-commerce module for selling cds/ artwork etc. theyve really thought about it. good if youve already got a plone site, but not out of the box if you dont...

    Im still sold on secretary at the mo...


    Tuesday, August 19, 2008

    Photo Galleries - Not lightbox style popups

    Heres some galleries Ive recently looked at and will consider using in the future. They are not popups like lightbox.

    http://malsup.com/jquery/cycle/
    A gallery slideshow with multiple possible effects for transitions. (auto cycling through images)

    http://devkick.com/lab/galleria/
    A gallery maker with fade transitions and auto thumnail navigation. Good for a proper gallery but dosnt have choice of transitions as far as I can tell.

    http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/
    Photogallery with slide transition auto pagination for navigation. No back link on photo clicking photo only goes forwards.

    http://smoothgallery.jondesign.net/
    I used Smoothgallery today for a project. It was pretty good and is working in IE6 fine, took a bit longer than lightbox to set up. Spent a bit of time in forums getting around little issues. The great thing about it though is that if the user has javascript switched off the images just list themselves neatly down the page like a blog. Use the downloaded example demoslide.html, and customised it. Basically the problems were:
    • showArrows: false, - this breaks the gallery. To get rid of the arrows do it in the css by making the arrow links css opacity levels be 0 everywhere.
    • Deleting the 'open image' href will break the gallery unless you have added the option embedLinks: false, that has the added benefit of removing the lightbulb from the middle of the picture.
    • Delecting the thumbnail image links breaks the gallery unless you specify the option showCarousel: false,
    • You can easily remove the image title/ caption with the declaration showInfopane: false,

    Tripoli - HTML CSS resetter and layout generator

    Tripoli - HTML resetter. Simply is a base stylesheet that makes pretty CSS styling by default of all the elements from the get go. Blockquotes look great. So do lists, tables, forms. etc. Also has plugins for special typographic goodness/correctness and extra visual formatting...
    Going to try this on the next project - its gives you a great clean place to start with everything looking nice and with browser consistency tested already.
    http://devkick.com/lab/tripoli/sample.php?base=base&visual=visual&type=type

    For extra rapidness - use in conjunction with...
    Tripoli CSS layout tool - great little layout generator for making common web layouts that have already been browser tested. Just add your nav!
    http://devkick.com/lab/tripoli/layout.php?lay=l1&width=wide&style=equal

    CSS typography - Using Helvetica Neue

    Good looking styling I saw today using special fonts for hs. But what is Calibri??

    h1, h2, h3, h4, h5 {
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Calibri,sans-serif;
    font-weight: 300;
    }

    A fix for the min-width problem?

    Test this out it might be a good solution for the problem of not being able to set min-width in IE6. Look into what !important does...

    #id {
    min-height: 100px;
    height:auto !important;
    height:100px;
    }

    Friday, August 15, 2008

    Multiple version of IE on one computer

    FREE WINDOWS XP IMAGES FROM MICROSOFT WITH PRE INSTALLED IE6, IE7, IE8 BETA, ETC!!! it expires in sept 08 but they reckon theyll make new ones.

    http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

    FREE VIRTUAL PC APPLICATION!!!!

    http://www.microsoft.com/downloads/details.aspx?FamilyId=28C97D22-6EB8-4A09-A7F7-F6C7A1F000B5&displaylang=en


    ITS AMAZING!!! WELL I HAVNT TRIED IT YET BUT WILL SOON.

    and theres also this is development too - some sort of emulator app or something

    http://www.my-debugbar.com/wiki/IETester/HomePage

    Wednesday, August 13, 2008

    10 colour contrast checking tools to improve the accessibility of your design

    Colour Contrast / colour blindness: No need to feel paranoid, looks like there are tools out there that check it for you. Follow the link to the article in the heading.

    To see a quick run down of what colour blindness or color blindness is go to this link:
    http://www.vischeck.com/examples/
    Basically to avoid problems in your design use lots of contrast and don't have red / green things on top of each other, or they will disappear, and don't use red/ green to differentiate something. Same goes for oranges, pinks, greens - they will look very similar.
    I guessing you avoid problems too by using tints/ shades of a colour, since no matter what color a person is seeing, they can all see tints / shades of the black or white in the colour. Using white to highlight something is therefore always safe because everyone can see white on a darker background, whether that darker colour is meant to be green or red dosnt matter, so long as its dark enough green or red to provide contrast with the white.

    I tested Sim Daltonism app (mac os x only) quickly and it was rad, you download the app and then it shows you whatever is on your screen around you curser with different colour blindness settings, so you can see webpages OR photoshop/ illustrator mockups. So you can rollover your links and so on in your browser and see what it looks like to colour blind people at the same time.
    http://michelf.com/projects/sim-daltonism/

    The one to remember to check is the most common form which they say is
    "Deuteranomaly (partial red-green)
    Complete or partial inability to see using middle-wavelength sensitive retinal cones making hard to distinguish between colors in the green-yellow-red section of the spectrum. This is the most common form of color blindness."

    The only disapointing this is how aweful my designed looked to a colour blind person - the colours were icky! I guess they're used to this. But I'm going to try and check for Deuteranomaly (partial red-green) in new designs since it is the most common, I even know a few people who have it. I want the colours they see not to look like dogs breakfast even if the site is readable / useable.

    For extra brownie points you could send screenshots using tools like this to your clients to show them you've tested it. Great to use at the (graphic) design stage aswell, run the tests on your mockups before presenting them so you dont have to change your design later for accessibility.

    http://www.456bereastreet.com/ looks like it has much well written info on Accessibility and the like, read more there when time.

    Web development mistakes

    Excellent big list of common mistakes and oversights. Good to read over before starting a new site as a refresher because its so easy to forget these if you havn't been doing web work for awile.

    Looking forward - Internet Explorer and the CSS box model

    For a run down of the Internet Explorer Box Model CSS problem /solutions see this link:
    http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

    To avoid problems with the IE5 Win border box model I have for years just been using the technique below automatically. I'm so used to using this method I'd actually forgotten why it was I did this in the first place. So I looked it up and what I was doing was to support IE5 Win! (Or IE6 in quirks mode - which it will never be because I always use a correct doctype).

    Nesting Boxes Method For Avoiding Box Model Hacks
    "One solution to the box model problem is to not assign padding or border to a DIV to which you have assigned a width. If you don't need a border effect, you can get your padding by simply setting margin or padding on all the box elements (DIVs, Ps, BLOCKQUOTEs, etc) contained with the DIV. If you need a border, simply nest a DIV within that DIV, do not assign it a width (it will fill up its parent DIV), and assign a border to the nested DIV."
    Or more simply "...avoid specifying both width and padding or border for the same element. This ensures that all browsers will use the same total width, no matter which box model they use."

    So, if you now make sites with the sentiment of 'fuck you IE5 Win you dont even exist' which alot of people are doing now, you can stop thinking 'padding is evil'.

    A reminder, the padding/borders were only evil on a div with a stated width. Theres no problem if the div is auto width. Again I was so used to padding / borders being evil I was avoiding them everywhere in favor of margins.

    It is archaic and time consuming to be going to all this extra effort of putting margins on all your little contained elements just for IE5. Or special hack values in your CSS. Instead use padding and borders to the W3C spec, and then if your project really does require IE5 support (lots of users who are old, poor, underfunded etc), add an IE5 only stylesheet using conditional comments, and in that, make the width of your divs be = (width+left border+right border+left padding+right padding).

    One thing I just realised when writing that was that not having padding / borders on fixed width divs in the past made making layout size calculations alot simpler. All I've had to remember using the nesting method is margins+width, which simple to calculate.

    But if Im switching to using padding and borders on my fixed width divs in the future, the calculation becomes: WIDTH MY DIV TAKES UP = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Thats heaps of values to think about! And some times people like to have their text padding in ems so it relates to their font size, so if that is the case, then calculating the width your div takes up becomes tricky, how do you add a pixel and an em?

    So depending on your situation, it could turn out to be better to keep doing the old nesting method on some layouts. But its nice to know you don't really have to anymore.

    Monday, August 11, 2008

    MailMan - Maling List Manager

    http://www.list.org/features.html

    Mailman, the GNU Mailing List Manager
    Mailman is free software for managing electronic mail discussion and e-newsletter lists. Mailman is integrated with the web, making it easy for users to manage their accounts and for list owners to administer their lists. Mailman supports built-in archiving, automatic bounce processing, content filtering, digest delivery, spam filters, and more. See the features page for details.

    isEngine

    isEngine is a website package that lets you maintain your own site over the internet from anywhere in the world. It combines XML storage with HTML templates to produce a searchable website.
    who it's for:
    isEngine is built with artists & the arts industry in mind.
    But it suits musicians, festivals, writers, journals, shops, manufacturers, just about anybody !

    http://isengine.net/
    http://isengine.net/calc.html
    Good calculator / breakdown of costs of different services / add ons. The idea being that the company who made it gets residuals each year from all the sites they have. The customer gets a cheaper price than having it custom made because theyre using a boxed solution.

    Friday, August 1, 2008

    IE6 PNG Transparency Fixes

    Looked for a few solutions for the IE6 transparency problem:

    SUPERSLEIGHT:
    http://24ways.org/2007/supersleight-transparent-png-in-ie6
    Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.

    I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.

    If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
    a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
    position: relative;
    z-index: 1;
    }

    Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.

    ALPHAIMAGELOADER ON ITS OWN:
    If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.

    eg. in an IE6 only conditional commented stylesheet add your fixes
    #adivwithatransbkrndthatrepeats {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
    height: 1% /*might be necessary sometimes to make it have layout*/
    }

    if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
    #adivwithatransbkrndthatdosntrepeat {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
    }

    Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.

    TWIN HELIX:
    Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
    http://www.twinhelix.com/css/iepngfix/demo/

    Some other solutions are listed here with more full descriptions of options:
    http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/

    JQUERY:
    http://jquery.khurshid.com/ifixpng.php
    and following on:
    http://plugins.jquery.com/project/iFixPng2

    This is an example of a site that uses tricky side columns with transparency fixes
    http://www.builtbybuffalo.com/

    Wednesday, July 30, 2008

    Query nice looking forms

    all replace ordinary html forms with better looking ones, but if javascript is off they still see the normal forms.

    http://plugins.jquery.com/project/jNice

    http://plugins.jquery.com/project/jForms

    http://www.agavegroup.com/?p=35

    Friday, July 25, 2008

    Roundup of Links about Charater Encoding and Special Characters and Punctuation

    Really its typography and really should be noticed by designers.

    Rich Punctuation: How To Do It And Why You Should Bother
    http://www.sitepoint.com/print/typographic-punctuation-web

    The Definitive Guide to Web Character Encoding
    http://www.sitepoint.com/article/guide-web-character-encoding/

    This is my favourite, good reference to keep, expecially for macs. Helped me find degree symbols and also fancy quotes, copyright symbol etc etc.
    Special characters not on keyboards
    http://68kmla.net/wiki/List_of_keyboard_shortcuts

    JQuery Scrollers

    All of these are amazing but in demos the scrollbars seem to have jerky behaviour when you use it like a normal scrollbar. They look great when easing to and from certain points, but arent as smooth as the browser default scroller when you drag it like a normal scroller. Still, I like that the jscrollpane degrades to a normal scrollbar when people have javascript turned off.

    Replaces ugly vertical scrollbars with your own pretty version. Also has easing etc.
    http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

    The horizontal version of a fancy scroll bar.
    http://plugins.jquery.com/project/jscrollhorizontalpane

    this is another option, a step carousel. buttons step though the pics in the pane. can also have a got to first andlast button to see a sexy eased sliding animation
    http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

    wow this is pretty extreme- scrolling in both vertical and horizontal. love the bouncy easing example. its very flash like.
    http://flesler.webs.com/jQuery.ScrollTo/Link
    Vertical and horizontal again. Can really see the use of this as it is shown in demo being for menus and sub menus, vertical and horizontal planes...
    http://flesler.webs.com/jQuery.LocalScroll/#section1

    JCarousellite
    http://gmarwaha.com/jquery/jcarousellite/index.php#demo
    nice bouncing effect-page shows lots of customisations to this plugin... good for simple image galleries... like for a blog or something

    JQuery Resource Roundup

    http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html
    Massive. Lots of new goodness and ideas. The site has 3 other similiar articles.

    http://blog.webdistortion.com/2008/06/11/pushing-the-boundaries-of-web-design-the-ultimate-user-interface/
    Another good roundup of effects, some really nice form field effects examples shown here. Round form fields!

    Thursday, July 24, 2008

    Kickass Webdev Resource Portal: Noupe.com

    Looks huge, have to explore it later, lots of new looking stuff

    30 Scripts For Galleries, Slideshows and Lightboxes

    Keeper of a link at Smashing Magazine for 30 scripts for galleries, lightboxes and slideshows.

    Smoothbox - sexy lightbox style gallery



    Like lightbox, but very nice transitions and image caption area thats semi transparent.
    Image shows demo from the developers site.










    Also theres Squeezebox, which has a brilliant jumping out at you effect, the image scales up and it looks really cool.
    http://digitarald.de/project/squeezebox/1-1/showcase/images/

    Monday, July 21, 2008

    How To Burn a cross-platform CD-ROM or DVD

    Say your making a cross platform CD-ROM either in Flash or Director. You'll need to burn it and this is the easiest way I think to burn a cross platform disc when your working on a mac.
    Use Toast 8 Titanium or above. I use Toast 8, and lo and behold the instructions on doing it are in the toast help PDF, which you can open from the Toast help menu.
    Just search straight for "Making a Custom Hybrid Disc" and also "Creating a Temporary Partition " and follow instructions, its pretty straightforward. You can burn it to either a CD-ROM or a DVD disc.

    Notes in general:
    when you create the mac tempoary disc partition DONT have OPTIMISE ON THE FLY ticked, it is EVIL. it makes errors happen on intel or isnt compatible with 'mac osx extended' format or something. error code 43, and other stupid i/o write errors, data fork error etc.

    You'll need to include an autorun.inf file on your CD which will automatically launch your projector when its played on a Windows machine. (If thats what you want to happen). There is no such equivalent for a mac unfortunately.
    Autorun.inf is simply a text file with the following code in it:

    [AutoRun]
    open = Start_Here.exe

    Where Start_Here.exe is the name of the file you want to automatically open/run/play when the user puts the disc in the computer. You can make an .inf file in a simple text editor like TextEdit and just save it with the appended extention .inf instead of .txt

    Also, on a mac the window for the temporary files partition as it is displayed in your finder it open up a window exactly the same when the user clicks on the disc icon on a mac. To see what I mean;
    With the window open of your temporary partition, in the finder, go to View>Show View Options. Change the background colour of the window or something and arrange the files using grid view or however you want. Burn the disc, then on a mac double click the disc icon on the desktop and a window just like the one you made in the temporary partition will open.

    Thursday, July 17, 2008

    Free Button Sounds for Multimedia mp3, wav

    http://www.flashkit.com/soundfx/Interfaces/Switches/Switch03-intermed-3659/index.php

    Flashkit.com provides an excellent library of little sound effects for multimedia projects. Good for buttons, transitions, wipes etc. In mp3 or wav or flash. So no need to drill into old projects and grab old sounds or keep your own library.

    Productivity Etc Blog

    http://www.43folders.com/
    Looks like a blog about time management and life hacks and mac. probably good for a regular reads.

    Flash comboBox Component Bug

    Bugs in Flash comboBox component.
    I used this fix detailed on http://lailablog.blogspot.com/2005/12/flashs-combobox-component.html
    Worked nicely.

    "The ComboBox component in Flash does not behave as expected if used in a movieclip loaded by loadMovie or attachMovie. What happens is that the ComboBox won't open, as if it doesn't react to events.
    1. Drag an instance of the component onto the stage of the movieclip that's loading the movieclip containing the ComboBox. It can then be deleted, the point is that the loading movieclip has the component in its library. This appeared to solve the problem for a lot of people.
    Also theres a lockroot solution which I didnt try but is documented here:
    http://livedocs.adobe.com/flash/9.0/main/00002626.html

    Flash Video Tutorials

    http://www.bluetorials.com/free%20stuff/more_tuts.html
    Good range of tutorials for flash and other software, all as downloadable swfs. Good to watch in spare time. Theres a good one on the comboBox component.

    Monday, July 14, 2008

    SiteSuite

    Make e-commerce sites, from a package deal for a monthly fee. Australia based. The 2008 Sydney Binneale is using their products.

    What is RSS - A tutorial

    Get into this RSS stuff. 

    SEO and General Internet Marketing Tips

    Good
    http://www.sitesuite.com.au/page/community.html

    This guide looks pretty definitive, read it when theres time. seems keywords meta tags arent very useful anymore. description tag is good because it sometimes shows up in a search engine under the title big link. but over all, test content is what is indexed and the title tag is very important.
    http://searchenginewatch.com/showPage.html?page=webmasters

    Blog about SEO and blogging etc etc
    http://www.mccordweb.com/weblogs/index.php

    Blog about SEO but more funny
    http://www.davidnaylor.co.uk/

    Googles webmaster central docs blog help etc
    http://googlewebmastercentral.blogspot.com/

    Web design blog - good step by steps
    http://imgiseverything.co.uk/2007/10/01/nike-trainers-a-keyword-case-study/

    Friday, July 11, 2008

    Sprouts

    This Sprout thing looks pretty swift, make little web aps with images, calendars, links, video, jukeboxes, really freaking simple looking, then you can mass post to blogger, facebook and all the rest. Could be super cool for promotional stuff. And I think some websites could be replace entirely with these... i think you can add rss content to them. All sorts of feeds etc... Its pretty massive. Cool thing is they update on the places you have put them from somewhere else it seems.

    This sort of thing is so new wave to me, theres a whole lot of stuff like this out there I've never looked into. Gotta get into it all.

    Sprouts are widgets, mini-sites, banners, mashups and other forms of rich media content. Here are some types of sprouts that you can build:

    Promotional
    Promotional sprouts are ideal for musicians, politicians, non-profits or any person or organization that has an audience and wants to provide them with content that can be virally spread. Sprouts can be edited at any time, and all copies in circulation are instantly updated, so your audience can be kept engaged and informed.

    Personal
    Personal Sprouts are ideal for...everyone! Create a slideshow, add your favorite songs to a jukebox, add links to your social networking profiles - whatever you want to do to make your web presence come alive! Share with your friends and collect theirs as well.

    Informational
    Informational Sprouts are ideal for any organizations that need to keep their web site content fresh. Informational sprouts can be of any size and can include multiple pages to pack in a lot of information.

    Shopping Cart Roundup

    To Google
    virtuemart 1.1, osCommerce and trading-eye
    and read this:
    http://blog.webdistortion.com/2008/05/03/9-kick-ass-open-source-e-commerce-platforms-reviewed/

    Zen Cart
    http://www.zen-cart.com/index.php?main_page=infopages&pages_id=5
    Free, open source, tableless layout, admin tool, international, looks like it integrates well with credit cards and the like.

    Why should you choose Zen Cart™ to power your e-commerce site? Let's face it. There are 100's of shopping cart programs around, all with different strengths and weaknesses. Zen Cart™ is superior to most in ease-of-use, features and price.

    Zen Cart™ is built for entrepreneurs by entrepreneurs. The program is built by programmers and designers who understand the online selling process from start to finish. Zen Cart™ has included all the necessary tools required to build a successful online store and we are constantly improving and upgrading the software based on our users requirements.

    Shopify

    http://www.shopify.com/design/

    A hosted application with templates and hosting and everything all in thge one spot. Their key selling feature is that you can have a shop up and running in mins using only their services. The hosting is interesting because if the shop gets massive, they are ready with server farms to support it. 

    From the site...

    "Shopify is a full-stack e-commerce package. Everything you need is already included. It comes with full SEO, inventory, and content management.Our customers will tell you that Shopify’s “killer” feature is its design flexibility. If you want to sell your products, you have to sell in style. Poor design begets poor customers."

    Here is an example of a small shop built using the software. http://shop.eboy.com/collections/t-shirts

    Pricing: You can have a trial set up, for free. But the cheapest is $24 per month for basic option. Ultimate option is $299 per month. Each price range is a limit of how many products you canhave in the database which is a bit shitty. They also take a percentage cut from each transaction. (So its really less of a cart software and more of a shopping community idea like ebay, etsy etc.) So ummm... looks like a nice product but having them take a cut of every sale is a bit much - better off using open source software I think. Plus the basic plan dosnt include SSL for the admin panel. It would be great for people who just need something up and running ASAP. 

    XCart

    http://www.x-cart.com/

    - X-Cart shopping cart software is based on PHP Smarty templates, this makes it very flexible and easy to modify. The data is stored in MySQL database.
    - W3C XHTML 1.0 compliance of X-Cart storefront out of the box.
    - You receive a complete source code and SQL tables for MySQL database to make them extended or customized easily.
    - X-Cart is a turnkey package. Installation is handled by web-based step-by-step wizard to make the system running immediately after receiving it.

    Templates look ok, not great typography though and kind of dated looking. Theyre pretty basic looking and would designing to make better. Think Shopify  ones looked better. Example: http://demo.x-cart.com/demo/home.php?cat=112

    http://demo.x-cart.com/demo/home.php?cat=1366

    Pricing: Everything seems to be sold seperately. You buy the software as a package. You buy module add ons. You buy the skin you want. You can host it with them or not. 

    Add On And Partnerships 

    Fulfillment by Amazon - Use Amazons pick and pack experience, warehouses etc etc. Would be great for testing out the American market without having to set up your own warehousing etc.

    http://www.amazonservices.com/fulfillment/pricing.html

    Adobe Exchange

    Download hundreds of easy-to-install extensions, time-saving functions, code and more.

    Project Management, Workflow, Methodology Roundup

    Good discussion on workflow for making applications, eg e-commerce and the stages you should go through. They're talking about FLIP methodology for Coldfusion. No idea what thats all about but its an interesting rundown of A work process.
    http://halhelms.com/webresources/flipout/flipout_3.mp3

    General Points:
    • Don't do briefing specification documents, either you or client. Because its too hard to describe. And they dont know how or what to ask for. Make a drawing like an architect does, make a model, then you can test it, no words... no lengthy emails. Make a 2hr wirefame model with real clickable links, then sign off on that as the requirements document. You can even sit there with them and make it.
    Try this out
    Wireframe Tool
    http://www.bjork.net/index.cfm?fuseaction=content.display&page=wireframetool

    DevNotes (a feed of messages actually on the wireframe page to go through iterative changes)
    http://www.bjork.net/index.cfm?fuseaction=content.display&page=devnotesdeluxe

    Stages of Production
    1. Initial meeting, 'what do you want to do?' jot down a narrative of the requirements, in simple english, in descriptive terms. Then email that back to the client to get confirmation that you understood the scope and what the point of what your doing is. At this stage you explain the design process you'll use, and what the milestones are so they know. This is the chance to educate them about whats involved and what their deliverables will be.
    2. Wireframing. A text based clickable front end in HTML with dummy text. No actual pictures no real layout. Just the functionality and content blocks. It can even become the functional code later. Client must use the thing at this stage, not be passive and just LOOK. They must use it. The great thing is they dont get all emotional about colours and shapes and pictures. They just refine the functionality bare bones.
    3. Prototyping is... making the design and getting it right, looking exactly how it should but without a database etc. (Here you make a 'working model' almost. But never 'present' the model to the client, the client MUST sit down with the application and use it, at each stage. Because when you show them, they dont really listen and just think its great. But when they USE it, they immediately see the problems. You use Devnotes here until its done. What I dont get here is HOW to make it look real, without having real database stuff coming in, or real code. Need to look into how that would work, because for small projects like little shopping carts, it would seem quicker to just make the thing, then see how it works and see whats missing, add extra functionality or tables etc.
    4. Prototype freeze is when they sign off on the look and functionality and they cant change anything after that stage - because the most expensive time on the job is the coders. (BUT if the coder isnt the one on the job whos time is most expensive, then the priorities are different). He says it is important that this stage is a ritual, and you treat it with alot of gravity, it needs to be a real signoff, and it needs to be signed off by THE decision maker NOW, not the lackey who thinks they're in charge. They need to understand that NO changes are made after this. If they do want a change it will cost ALOT. He used the example were he charged someone $12,000 to change one paragraph. He also at this stage removes the Devnotes so they see they cannot make any more feedback.
    5. Architecture. This is when he prints out another copy of the frozen prototype. To markup. Highlighting in one colour all outgoing links (and he names them if they are going to be code actions). Another colour all things on the page that are variable (a dynamic element), like a username, or a form field. He also gives all of the variables names. The objective is to identify dynamic elements and exit points from a page and where they go. Take this highlighted stuff into a mapping app like Mindmapper, or Visual Mind, Mind Jet, Mind Manager. So this is what I'd know as a sitemap but a complex one for database design. Purpose of it is to find holes in things you havnt thought of yet.
    6. Then he goes into coding and other stages but its looks like specific info to coldfusion. The interesting thing is that up until here, no real coding has been done at all.
    Other stuff:
    This article is an excellent description of what a wireframe is, and how to easily make it in dreamweaver.
    http://www.sitepoint.com/article/wire-frame-your-site

    Thursday, July 10, 2008

    Wed Coding Services RoundUp

    Saw these ads, would be interesting to try out or read into sometime. Beware of them just using iweb or something to churn things out...
    Coould be good to get layouts sorted quickly then monkey in duplicate pages.

    XHTML/CSS SERVICES:
    http://www.psd2html.com/order-now.html
    https://w3-markup.com/order

    Mobile Browser Testing Roundup

    Offers remote access (for a price) to real mobile devices with usable GUIs to test heaps of mobile devices
    http://dev.mobi/vdl

    Browser Statistics Roundup

    The counter.com
    http://www.thecounter.com/stats/2008/July/browser.php
    At July 2008.....
    IE7 41%
    IE6 37%
    FF 16%
    Safari 3%
    Opera x 1%
    Unknown 1%
    Netscape x ... 0% hmmm

    Browser Testing Setups and Resources

    Snippets of advice form across the web:

    Since we are developing websites on Macs, we have no more problem with cross-plat-form/Multibrowser-Checks!

    Mac has Firefox, Opera, IEMac and Safari
    Win XP via Parallels has Firefox, IE 3-7 with multiple IEs, Opera, Netscape
    Win Vista via Parallels has it’s IE 7
    and Linux could be installed if needed!

    You can run all of these Browsers at the same time in the coherency-mode without switching a windows, or rebooting at all!

    What Browsers To Test On

    Various snippets from across the web.

    General consensus:
    IE5x dead, IE5mac dead, Netscape dead (its actually stopped being developed). Apples MobileMe dosnt support IE6 which is refreshing, but dont think we can be that bold yet.

    But My Current Paranoias Are...
    1/ For Schools, and government sites, I wonder if that can be the case. Can 5x browsers be dead, what about all those underfunded public schools out there in regional areas on Telstra dialup since 1995... Netscape for sure?
    2/ Furthermore, what about new breed mini school laptops that cost $300 and run on Linux? Surely that means school based sites need to be tested on Linux AND able to display at that mini resolution. Here is a case where a Linux user might not be an UberNerd, and might not be able to upgrade things themselves.
    3/ MOBILE BROWSING... iphone is Safari so thats fine. But what about Blackberrys, you can get Opera, so that makes Opera quite massive...surely... Also they have shitty built in browsers that might need to be tested in upcoming years... PLUS, theres a whole new usability for small screens, like you cant click on dropdowns very easily, or microscopic text links.

    ----------------------------------------------------------------------------------------------
    This is not always true. Safari 2.x often causes me problems, when IE6 is behaving itself. And I believe its market share is big enough to be deemed important.

    Browsers a developer tests on:
    • Internet Explorer 6, PC
    • Internet Explorer 7, PC
    • Firefox (about 1.5+), PC
    • Firefox (about 1.5+), Mac
    • Safari (about 1.3+), Mac
    • Opera, occasionally (and then 9+)

    Browser testing Article

    Browser Tests, Services and Compatibility Test Suites

    http://www.smashingmagazine.com/2007/10/02/browser-tests-services-and-compatibility-test-suites/

    Lists various resources for browser testing, such as iecapture, multipleie, browser statistics, multi-safari, linux stuff, all the 'browser cam' services, acid test, cool png test images for testing what png types are supported,

    A good reminder on whats really necessary when testing:
    There really isn’t a reason to test multiple versions of browsers like Safari, Firefox, or Opera. I say this for two reasons; first, there isn’t the marketshare to do extensive testing for browsers that are in the vast minority; and second, IE6 is effectively the lowest common denominator as far as features and creative CSS/HTML rendering. Generally, when you bend over backwards to support IE6, you’re stripping out a lot of the things that even the good browsers would get tripped up on.

    An unintentional third reason is that users of nonstandard browsers tend to be more tech-savvy and tend to upgrade reasonably quickly when prompted to do so.

    SOME STAT EXAMPLES:

    Netherlands:
    IE 6.0 – 47.6%
    IE 7.0 – 41.1%
    Firefox 2 – 6.1%
    Safari 2 – 1.6%
    Opera 9.2 – 0.7%
    Firefox 1.5 – 0.4%
    IE 5.0 – 0.4%
    Mozilla 1.8 - 0.3%
    Opera 9.0 – 0.2%
    Others – 1.3%

    From a site that gets 80,000 visits monthly, mostly U.S. but worldwide too. We see that Netscape is even lower than Opera. Netscape not worth worrying about??

    1. Internet Explorer 76.96%
    2. Firefox 19.80%
    3. Safari 1.94%
    4. Opera 0.74%
    5. Mozilla 0.30%
    6. Netscape 0.14%
    7. Camino 0.05%
    8. Konqueror 0.02%

    IE Breakdown
    1. 6.0 75.07%
    2. 7.0 24.54%

    Firefox Breakdown
    1. 2.0.0.6 53.57%
    2. 2.0.0.7 32.57%

    -------

    Monday, June 30, 2008

    Resource of web dev bits n pieces

    Javascript, CSS, HTML, etc nicely laid out 

    Wednesday, June 25, 2008

    Flash CD-ROM - Opening PDFs cross platform

    This info works for me using Adobe Flash CS3 and Actionscript 2.0 (AS2) and a Mac Powerbook G4 OS x 10.4.11. Make sure you read the Known Bugs at the bottom of the page before pulling your hair out and retiring to a Armish commune...
    If you notice errors when using this info please correct and post into a comment.

    How to get PDFs opening in Acrobat (or a Word .doc opening in Word and so on) from a standalone flash projector such as would go on a CD-ROM. And you need your CD-ROM to be cross platform.

    scroll down and download the file there called example.zip
    (Cant really remember but think that is the original fscommand example folder i used to start working with. There is possibly another one out there with all the cross platform files called "thefile" but i couldnt find it.)
    Look in that example to get your head around what you need to do in your own flash project. Then copy the fscommand folder into your own projects root folder and rename the files to thefile.exe, thefile.bat, thefile.pdf.

    then follow this....
    (Maybe I'm paranoid but its a good idea if you are copying and pasting code from a blog, to paste the code into the TextEdit Application or similiar and go Format>Make Plain Text, then copy paste that into Flash. Otherwise there could be some hidden text formatting voodoo messing up your scripts.)

    Heres the Actionscript for opening a pdf from a button in a flash standalone projector (AS2). In the examples and instructions the pdf file we want to open is called thefile.pdf:

    Put the below into a frame script:

    //this helps open the pdf cross platform
    function SmartExec(target)
    {
    platform = substring(getVersion(), 1,3);

    if (platform == "WIN")
    {
    // we're running on Windows, target an EXE file
    fscommand("exec", target + ".exe");
    }
    else
    {
    // we're running on a MAC, target an AppleScript file
    fscommand("exec", target + "_script.app");
    }
    }
    //for info see http://board.flashkit.com/board/showthread.php?t=756863. I added in the .app extention after _script myself, because it didn't work without it as was published elsewhere.

    //this is the button on the stage that the user clicks when they want to open the pdf. You'll need to make this button. It has an instance name of "pdf_btn1"
    pdf_btn1.onRelease = function():Void
    {
    SmartExec("thefile");
    }

    //this is the end of the frame script yo!

    How to make the pdf opening scripts (.app, .exe, .bat)
    Mac (.app):
    1/ copy this applescript below:

    --set the name of the file to open
    property fileName : "thefile.pdf"

    --get the path to the containing folder
    set myPath to (path to me as string)
    set AppleScript's text item delimiters to ":"

    set the parentFolder to ¬
    ((text items 1 thru -2 of myPath) & "") as string

    set AppleScript's text item delimiters to ""

    -- find the flash file

    try
    set targetFile to alias (the parentFolder & fileName)
    on error
    --ie if there's no file here by this name, it will quit.
    return quit
    end try

    -- open the file

    tell application "Finder"
    open file targetFile
    end tell

    -- the applescript has ended yo!

    2/ copy paste that script above into applescripts 'script editor' (applications>applescript>script editor) if your not on a mac youll need to google how to make and applescript on a pc at this point.
    3/ change "thefile.pdf" to whatever your pdfs file name is, or leave it as thefile.pdf for now until youve done a test.
    4/ file > save as
    5/ name your file your pdf files name then add '_script' at the end of your file name and before the file extention. so if your pdf is called thefile.pdf then your applescript will be called thefile_script.app
    6/ while still in the save as dialogue box, at file format dropdown choose 'application'. at options, tick 'run only'. click save. save into your fscommand folder where your pdf is too.

    Windows (.bat,.exe):
    1/ simply change the .exe filename to your pdfs filename. so if you pdf is called thefile.pdf, then change your exes name to thefile.exe.
    2/ to make the bat file, simply open the bat file in this template folder in textedit, change the filename in its script to your pdfs filename, then go format > make plain text, then go file> save as and change the filename to your pdfs filename and .bat. ie thefile.bat. you will need to untick the option at the bottom that says "if no extention is used use .txt." or it will mess up your filename. Choose plain text encoding Western Windows Latin 1. save into your fscommand folder with your pdf file.

    Known Bugs:
    i read it here: http://www.atomiksoftware.com/fire-up/index.htm
    theres a bug in flash player 9 when your authoring in cs3 on mac, which will stop the pdf from opening. Even when you say you want to publish your swf file to flash 8, you projector publishes to your most recent flash player version, which is probably 9. To get around it, you need to publish your projector to flash player 8.
    To do this you will need to download the standalone flash player 8 from adobe. http://www.adobe.com/support/flashplayer/downloads.html
    You can download and run the old player from just a desktop folder, it dosnt interfere with other stuff. Drag it to the dock so you can use it for quick opening.
    Now in flash, make your publish settings to be to flash player 8, and a swf, and dont tick macintosh projector. (you can do a windows one if you want). then publish.
    then in the finder navigate to where you saved your swf, then drag that swf into the shortcut you just created in the dock for the SAflashplayer 8, to open the swf in that version of flash player.
    Then when youve got it open, go file> create projector. Then, open your projector and test launching the pdf, it should now launch your pdf using applescript properly.
    test on a pc also, although this bug didn't occur on a pc last time. Think because the proxy.exe (yours was called test.exe when you downloaded it) has a fix in it already
    http://www.northcode.com/blog.php/2007/08/14/FSCommand-EXEC-is-Broken-in-Flash-CS3

    File name length issues / bugs?
    So I thought I had documented the definitive process, then I come across something else! There is a restriction on how long your .pdf or .doc or whatever filenames can be.
    For example I can open a file with these names:
    21characters111111111.doc
    20characters11111111.doc
    19characters1111111.doc
    and under

    But cant open a files with these names:
    22characters1111111111.doc
    23characters11111111111.doc
    24characters111111111111.doc
    and over

    So before you go making all your scripts, exes, bats etc, you'll need to re-name all your files to be under 22 characters long not including the file extension .doc, .pdf etc.

    Yeh I know I'm screaming on the inside too because I just finished making them all.
    NOT TESTED on a PC or from a CD-Rom on a mac. I doubt testing it from a CD-ROM would make a difference. Even if it did, its not any help, because I want to proof my projectors as standalones as I'm working, not burn a CD every time I want to proof it.

    And Lastly... make sure your pdfs, exes, bats, .apps are all inside one folder called fscommand. This fscommand folder should live in your root folder, or at the same level as the flash projector file that want to open the pdf.

    Ill be posting the definitive 'How to burn a cross platform CD-ROM on a mac' very soon, which will make this info complete.