No doubt if you have used Wordpress for a website, you have used it’s WYSIWYG to insert images into posts. The class names that it gives images is pretty bad:
So, depending on your styles, you’ll want something like this:
.alignleft {float: left; margin: 0 1em 1em 0;}
.alignright {float: right; margin: 0 0 1em 1em;}
.aligncenter {display: block; margin: 0 auto 1em auto;}
The above styles pretty things a little bit. However, what happens if you have a rogue person editing your content who uses the ‘align’ attribute on your images? How can you standardise the display of images?
Using attribute selectors, it’s pretty easy:
.alignleft, img[align=left] {float: left; margin: 0 1em 1em 0;}
.alignright, img[align=right] {float: right; margin: 0 0 1em 1em;}
.aligncenter {display: block; margin: 0 auto 1em auto;}
In the perfect world that I dream of, no CMS would allow people to use ‘align’ on images (or any other element), but in the immortal words of John Bender: Screws fall out all the time, the world is an imperfect place.
http://www.imdb.com/title/tt0088847/quotes (that’s from the Breakfast Club)
Fantastic little documentary about a letterpress workshop in São Paulo, must see. Keeping here so I don’t lose it.
Occasionally, you will get a client that requires that all external links on their site open in a new window. In the past I have argued against this, on the grounds that a user should be able to decide for themselves where the link opens, but now I don’t really worry about it.
Using jQuery, forcing external links to open in a new window is easy.
What we do is parse the document for any links pointing outside, and add a click handler to them that makes the new window. Easy? Easy.
$(document).ready(function() {
$("a[@href^=http]").click(function(){ //find the links pointing to a URL
if(this.href.indexOf(location.hostname) == -1) { //check if they point outside
window.open( $(this).attr('href') ); //force open the new window
return false;
}
});
});
Magento eCommerce Promises to be an excellent open source solution to a common problem – how best to sell goods on the Internet. On paper, it kicks some serious ass (or arse, depending on your location), The sales reporting is fantastic. Adding new products is relatively easy. It comes stock with support for a whole bunch of different payment gateways. Great!
As I wrap up a large Magento project, there have been some large mistakes that cost us weeks of development. I want to document them here for posterity, and hopefully Google will pick them up for anyone trying to decide if Magento is right for them and their project.
Let it be known that I am a tinkerer, and probably got myself into a lot of trouble for not RTFMing in the first place. I tried to squeeze Magento into a design box that it was not supposed to fit into. It works not, though, so meh.
Magento REQUIRES Javascript in order to function. There is no graceful degradation here – if it’s not on, it does NOT work. No arguments, no coaxing, no nothing. So what did I do? I deleted all the javascript calls and tried to get it to work.
Cost: 1 week
Want to change the text of something in the cart? You need to change it in the source files. Language is not abstracted for a quick presto change, as it is in Zencart or other carts. This sucks!
Cost: a frequent annoyance
How do you spell XML? I’m still not sure. I thought Smarty was annoying, but it is nothing on the xml hybrid system that Magento employs. You don’t want a three column layout? Are you sure? Really? Well, too bad. It’s there – live with it.
Cost: A lot. If you want to redesign a Magento site, just change the colours. Don’t attempt anything fancy, please.
If you are shipping products, and you are not in the States, prepare for a laugh. It’s fun, especially setting up shipping tables. In Australia, we use 4 digit Post Codes. so, I needed to upload a CSV with 9999 lines, each with the cost of shipping to that post code. There must be an easier way!
Cost: Probably not too long, but it was annoying as hell.
Huh? What’s support? There aint none. Traverse the forums for a whole bunch of unanswered threads.
Cost: Depends. Hard to tell.
So, I may add more as time permits. If you are going stock, then I would probably recommend Magento. Clients love the backend interface. If you are a developer though, heed this advice:
Only modify those files that you have to – keep your custom template directory as empty as possible
That is all.
I just sent this email to my mum, so she can send it on to some website owners – I thought I should post it here for reference as well. It concerns a couple of ‘rules-of-thumb’ that consistently piss me off.
Here are some resources concerning usability, accessibility and all-round best practice on the web for sites displaying a lot of information.
Firstly, in my experience there are a number of so-called ‘rules-of-thumb’ that are used to justify a lot of incorrect design decisions on the web. The first of these is the notion of the ‘fold’, a term that describes the content obscured by the fold in a newspaper. This is not applicable on the web – having to scroll (vertically) is not a problem for web users – they all understand how to do this. However scrolling should be done by the browser – a website should not replicate functionality that is already provided by the browser (another example would be ‘back’ buttons – users know and trust their browser to do this job for them).
The other false rule-of-thumb is that a user should be able to get to X in Y number of clicks. A lot of navigation has been massively overcomplicated to achieve this goal. More emphasis should be placed on the innate ‘findability’ of information on the site. Instead of thinking that the findability of a page is based on how many mouse clicks it takes a user (assuming that the user already knows the language, navigation structure etc of the website), a website owner should judge how ‘easy’ it was to find the page. A well thought out navigational structure, with appropriate in-content hyperlinks is always a better option than an overcrowded drop down menu.
Before any design occurs, I would recommend knowing exactly the structure of the information. Because information on the web is generally provided for the general public, it is always a good idea to structure the information that you provide in a manner that is useful for the general public. A lot of the time, I have found that this structure maybe contrary to what the website stakeholders think of is ‘normal’. An example of this would be a government website structuring information according to government department, when in fact it would make more sense to structure the information around the type of thing (e.g. Health, Education. Driving etc).
An easy way to find out how information should be organised is to perform some card sorting tests. These are simple little experiments that can be performed with varying levels of complexity, but the premise is this:
Repeat with X number of participants.
Once this is done, collate the information in a spreadsheet, and compare with the anticipated results. Easy!
There are some excellent resources on this technique:
Card Sorting: A Definitive Guide
Eurostar: A Case Study
A quick Google will give many results.
Only after this rudimentary experiment is completed should structure of the ‘information architecture’ occur.