Archive for the ‘Web development’ Category

h1

Still supporting multiple versions of IE?

November 5, 2009

If you still have to support multiple versions of Internet Explorer, then you’ll want to take a look at this Smashing Magazine article about how IE 6, 7 and 8 treat various elements of CSS: http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

And for those who scoff at the idea of anyone still using IE6, I’m currently working for a large global corporate where they’ve only *just* changed from IE6 to IE7. And some people there are still on IE6.

[Links last checked November 2009]

h1

Short list of website testing tools

November 2, 2009

There are plenty of tools out there that can help you test your website. But perhaps you’re overwhelmed for choice. If so, then start with this short list of tools: http://www.testing-web-sites.co.uk/testing-tools/

This site lists testing tools in these categories:

  • Validators and Accessibility Testing
  • Browser Compatibility
  • Link Checking
  • Site Performance Testing
  • Stress or Load Testing
  • Usability Testing
  • Split Testing
  • SEO Tools

[Links last checked September 2009; thanks to @sue_sd for tweeting this resource]

h1

Websites 101

October 27, 2009

A while ago, a small department at my current client’s organization asked me to run through with them the basics of setting up a website for their department. By their own admission, they had no clue as to how a website gets created or ‘put up there’ for the world to see. They were thinking of using Word…

Here’s my slightly edited ‘Websites 101′ response to them. Warning — this is long, so you might want to go get a cup of coffee about now.

Basics of a website

Very simply, a website is made up of three parts:

  • the content
  • the domain name (e.g. www.yourcompany.com), and
  • the hosting service where the content is stored and fed out to the world and where the information about the domain name is recorded so that the outside world can find the content associated with it (how this happens is all highly technical and you don’t need to know how — just that it does).

Because a website is made up of these three basic parts, there are several phases where you will incur costs.

Content creation

For a large corporate website, you might have different people doing the writing to those doing the HTML mark-up and CSS coding; for a small one, the same person may do all these tasks.

Aside: HTML tells the browser how to display the content on the web page (make this bit bold, make this bit a heading etc.), whereas CSS tells the browser what styling to use for those bits (e.g. make all level 2 headings red and bold and this big).

This will likely be your biggest cost as it is variable — a very small website might cost you a few hundred dollars, but a large one or a complex one could cost many thousands. I’ll explain the options later…

What I strongly suggest you DON’T do is create web page content using Microsoft Word’s ‘Save as HTML’ option — this is a particularly nasty way to create content as it is almost impossible to style and maintain in the long term.

Domain name

You have to register a domain name with a domain name registrar (e.g. Melbourneit.com.au; namecheap.com and lots of others).

Your domain name must be unique, and you should think carefully about how it displays to the world, how readable it is, and how closely it reflects what you do (be careful of names such as www.therapist.com as these types of names can be misread!).

You also need to decide what sort of domain name extension you want — prices vary greatly. For example, a “.com.au” address is more expensive than a “.com” address. That’s because “.com.au” has controls over its usage — only legitimate companies, entities, trading names, and product names based in Australia can get a “.com.au” domain name (at least, that’s how it used to be; they may have relaxed the rules recently). So you could only have www.vegemite.com.au if you were the company who made Vegemite or were the official supplier of Vegemite. Joe Public could not register that domain name as he has no legal association with Vegemite, whether he lives in Australia or not. However, “.com” has no restrictions on it — anyone can buy a “.com” name no matter whether they have a business or not, and no matter where they live. These “.com” domain names are cheap (typically around US$10 per year, though prices will vary up from there).

HINT: Once you’ve decided on a domain name, register it straight away so that you ‘own’ it, even if you don’t intend doing anything with it for a while.

Hosting

Once you have a domain name and have some content, you need to put that content somewhere. It doesn’t live on an individual’s computer or server — typically, websites live on the servers of hosting companies.

Most of these large data banks of servers are in the US and have stringent ‘up time’ and backup policies in case of the failure of any one server. Hosting companies rent space on these servers (or may even own their own in the data center), then ‘on sell’ space to individuals and companies.

Prices vary greatly. Some of the cheaper hosting services are about US$5 a month for a basic plan, and can go up exponentially from there. Most of the Australian-based hosting companies charge quite a bit, even though many are just on-selling (at an inflated price!) space from these US data centers.

Hosting packages often come with bundles of email addresses etc. and the hosting company will sort out how the internet can see your domain name and thus your content.

The bundled option

Now, having talked about the basics, you don’t have to do all this yourselves. There are plenty of web companies out there who will offer bundled packages for the lot (well, not the actual content, but everything else — domain name and hosting at least). Some of these are independent companies; others are the ISPs (Internet Service Providers).

You will still have to get someone to write the content and mark it up suitable for web display (that’s the HTML and CSS stuff I mentioned earlier). Some of the independent companies may offer their own in-house Content Management Systems (CMS) where you log in, then go to the admin section for your website and make the changes in an editor that looks a bit like Word, and save them — the changes are then immediately available for the world to see and the person creating the content doesn’t need to know any HTML or CSS.

Before I get into the nitty-gritty of this, there are some fundamental decisions you need to make before you decide how you want this website to happen and what you want it to look like. So let’s step back a bit…

Knowing what you want

The critical things you need to understand before you begin are:

Purpose

Why do you want a website? Is it a marketing medium? An informational medium? A sales medium? A collaborative medium (i.e. your viewers can contribute comments etc.)? Or for some other reason?

You must be very clear on this before briefing someone to create the website for you — lots of discussion in your group should happen on this point alone.

Audience

Who do you expect to be the main consumers (users) of the information/sales pitch etc. you are putting out there?

Can you describe them — age, gender, socio-economic status, educational level, geographic location, etc.?

Note: “Everyone in the world” is NOT an acceptable answer. While everyone could *potentially* see your website, in reality there is only a small segment of the world who will be interested in what you have to say and what you have to offer. Clearly define this segment — these are the people the site will be designed for.

Call to action

What do expect the users of your website to do as a result of going to your website? Gain information? Buy something? Be convinced of something? Contribute their knowledge to the website?

Maintenance

Who will maintain the website?

Who will be responsible for verifying the accuracy of the content both at the beginning and over time?

Who will update and/or delete content over time — members of your team, an external person? Do they have the technical skills to make updates? Will they still be around in 2 or 5 or 10 years time?

Who will be the point person for decision-making about the website? There should only be one contact person for the web developer/web designer. This is especially important in the early design stages, but also when the decision is made to revamp it… as typically happens about 2 to 3 years in.

Broad content areas

What facilities and functions do you want to be available from your website? Yes, you’ll have a Home page, but what about the other pages — About, Contact, What we do, Who we are, Support, Products, Resources, Forums, Calendar, etc. are all possibilities, as are many other types of pages. Check other similar websites to get ideas on possible categories for your website.

General design elements

Later on you will need to decide design elements such as a color scheme, layout (navigation on the side? at the top?) etc. A web designer can help you with this, but you need to give them some guidance. For the next few weeks as you’re moving around the internet, look closely at the websites you visit and note what it is you like about them. Also note down what you DON’T like about them! Everyone will have different ideas on this (I like purple /I hate purple; I like menus at the top/I like them on the left/I like them on the right, etc.), but at some stage someone — the point person I mentioned earlier — will need to make a decision on the broad graphic/design direction of the website and communicate this to the web designer.

Remember, design is not about personal preferences — it’s about what will be usable and readable for the users, and also about what they would expect from your organization (a day spa website with Wild West style headings or ransom note fonts will probably not project the sort of image you expect).

Finally, be aware that every change you want to make will cost you, so when you have decided the broad direction of what you want and the designer goes off and creates a prototype for you, don’t go through 25 review cycles of various tweaks to the prototype as this will cost a lot. A really solid brief given to the web company/designer will help keep down costs. And you can only do that if you are very clear about what you want.

Avoid ‘design by committee’ — appoint someone to be the point person. Everything to do with the website and the liaison with the external parties must funnel through them. Give that person the power to make decisions.

People involved

I’ve mentioned some of the roles that may be involved in any website development — I’ll expand on them a little here; remember, some individuals and companies may be able to fill more than one role.

Web designer

Typically designs the navigation, layout, placement of elements on the web page (headers, footers), creates the color scheme, may be involved in the CSS (actually coding the font sizes and colors, for example).

The web designer is usually required until the website is ‘live’, and then again when someone in the organization gets bored with the design and decides it needs to change! For a complex website, this person may be full-time.

Web developer

Typically is involved in the back end stuff, such as the HTML coding, possibly the CSS, and if a database or CMS is involved, will be involved in any programming stuff that needs to be done there (there are many varieties of programming skills, depending on the type of website and the functions you need). Should also be able to create login forms, and registration pages with automated response emails etc.

The web developer is usually required until the website is ‘live’ then may be required on an ad hoc basis for tweaks, fixes, etc. For a complex website, this person may be full-time.

Content writer/editor

Depending on the focus of the website, this could be a copy writer (for a marketing website) or a technical writer (for an informational website), etc.

Even if the writing is done in-house by the team (everyone can write, right? Wrong!), it should still be edited by an experienced — preferably external — editor. A good editor can see errors that the writers can’t, and can tighten up the writing.

Writing content for the web is quite different from writing a report. Understanding how to best ‘chunk’ and link information is a skill of its own.

If you get an experienced technical writer you may find that they have other skills as well, such as HTML and CSS; some also have programming skills.

The writer/editor is usually required until the website is ‘live’ then may be required on an ad hoc basis for tweaks, new content, etc. For a content-rich website, the writer/editor may be required full-time.

Website construction methods

Having defined what it is you want, I’ll now talk about some of the options you have for constructing the website (or getting it constructed) and the relative costs involved. There are likely to be other types of website construction methods out there, but those listed below should be a good start as they would likely cover a large proportion of the world’s websites.

Static website (‘brochure ware’)

A static website is a collection of HTML pages, with a navigation structure and a common layout.

There is no facility for users to interact or collaborate with the website owners, though there may be a registration form (say, for signing up to a newsletter) somewhere on the site and a link to send someone an email. Users cannot contribute to these sites.

These sites typically don’t change a lot from one day/week/month/year to the next. Think of these sites as an online brochure of products, services, information etc.

These types of websites probably make up 75% or more of the websites out there today. They tend to be the the cheapest to create as they require the least skills; however, they can be very expensive to maintain if there are lots of changes to make over time.

The person making the changes needs to be able to understand HTML so they know what they can/can’t change, and they also need to know how to use FTP (File Transfer Protocol) so they can upload the changed files to the host’s server.

You may be able to get a static website for several hundred dollars or low thousands, depending on the amount of content and design involved.

Database/CMS-driven website

These types of websites typically store their content in a database or CMS and deliver it to the user on demand. For example, when the user opens a Products page, the most recent content is grabbed from the database, rendered into the appropriate HTML and CSS and transformed into a web page. Most times you — as the user — have no clue that this is happening and the website looks much like a static website. Amazon.com and most of the News websites are examples of database-driven websites, as are sites such as iTunes.

These sites can be expensive to create as they require the most skills and time to set up. Once set up, they can be cheap to maintain as the person making changes is only changing the content, not the HTML etc.

Generally, no changed files need to be uploaded as the changes are made in real time in the database, usually via a web browser. Only external files (such as PDFs) would need to be uploaded, but this is usually done through the database/CMS interface.

One thing I should mention about these systems, is that often a web design company will have proprietary editing software for making changes and may not have an easy mechanism for you to take backups of your own content — ask! You don’t want to be caught if the company fails and you can’t access your content.

Blogging software website

This is a form of CMS. You may be familiar with personal or corporate blogs, so you may wonder why I have included this type in here. That’s because the software behind them (like WordPress) is rapidly evolving. These days, blogging software allows the creation of what appears to be a static website, while still offering the convenience of immediate changes (made by users with permission to do so), and also offering the option for some or all pages — or none — to allow comments from users. Websites based on WordPress (and probably other blogging software) also allow you to backup your data really easily at any time.

Some colleagues of mine now use the Thesis theme with WordPress to create what appear to be static websites. You can see some Thesis theme website examples here: http://diythemes.com/thesis/showcase/.

Sites created with blogging or CMS software may have a tiny Admin link at the bottom of the pages — this allows a person with editing privileges to make changes directly from their web browser.

Hiring a contractor to set up sites such as these can cost from as little as US$1000. Less, if you do it yourself, but you’ll probably have a lot of heartache and frustration along the way if you don’t know what you’re doing.

Conclusion

That should be more than enough to get you started. Your first steps are to discuss and decide on the big overarching questions, then decide the sort of website you’d like, long before you start investigating individuals or companies who can help you with that. And long before you decide that the website should be green or purple or pink or yellow….

[Links last checked September 2009]

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

Personas 101

October 22, 2009

Brad Colbow, creator of great cartoon-style illustrations and comic strips to explain tech, web and design stuff, has added a new one — The power of personas — to the Think Vitamin blog post: How to understand your users with personas.

It’s a nice explanation about personas, what they are, and how they help in the design process.

[Links last checked October 2009]

h1

Switch your regional Google search page to Google.com

October 21, 2009

Google’s pretty clever. It knows where you are (based on your IP address?) and so your ‘home’ Google address if you’re in Australia is google.com.au; it’s google.co.nz in New Zealand; google.co.uk in the United Kingdom; google.no in Norway, etc. Even if you type in google.com you still get your local Google. American readers may not even know that this regional redirection occurs as they always see Google.com.

But what if you DON’T want Google to use the regional variation? There are two tricks you can use to stop Google using the local Google:

  • To temporarily use Google.com for the current browsing session, go to this URL: http://www.google.com/webhp (webhp = web home page???)
  • To permanently turn off the regional variation and always use Google.com, go to this URL: http://www.google.com/ncr (ncr = no country redirect). You may need to clear your browser cache and cookies and perhaps reboot for this to work permanently.

If you use the Google Toolbar, you can change the default regional Google.com site you use in the Options. So, if you’re a Norwegian living or travelling in Australia, you could set the default Google home page to the Norwegian one (NOTE: I haven’t tried this when travelling, so I can’t verify that it works exactly like that!).

[Links last checked September 2009]

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

Pre-populating email links

October 8, 2009

A client wanted to have an email link, which would open Outlook and populate some of the email with boilerplate text. This was for an intranet, so email address security wasn’t an issue — I knew I could use a simple mailto link. Easy.

Except that I wanted some line breaks between parts of the message body. A bit of Googling and I found a solution that works! Here’s the syntax…

  • Link to email address: mailto:name@company.com (where you substitute ‘name@company.com’ with the real email address)
  • Subject line: ?subject=Subject line (substitute ‘Subject line’ with the real subject)
  • Message: &body=Message (substitute ‘Message’ with the real message)
  • Line breaks in the message body: %0A (that’s a zero, not an ‘O for orange’); use %0A%0A for two line breaks, %0A%0A%0A for three line breaks etc.)

Here’s an example:

Mailto syntax example

Mailto syntax example

And here’s how it looks in Outlook:

How it looks in Outlook

How it looks in Outlook

Please note: You can only have one ? in the string, so if you need to pre-populate the CC field, the Subject field, and the message body then do it like this:

mailto:name@company.com?cc=another.name@company.com&subject=Subject line&body=Message

Also, populating the Message Body will overwrite any automatic signature you have in Outlook. You will have to re-insert your signature manually.

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

New to CSS? or just need a refresher?

October 6, 2009

Chris Spooner has compiled a list of 15 must read articles for CSS beginners, which is available on the Line 25 website. The articles he’s linked to are:

  1. Resetting your Styles with CSS Reset
  2. Learn CSS Positioning in Ten Steps
  3. Internet Explorer and the CSS Box Model
  4. Specifics on CSS Specificity
  5. Faux Columns
  6. Sexy Ordered Lists with CSS
  7. Divitis: What it is and How to Avoid it
  8. Using background-image to Replace Text
  9. CSS Sprites: What They Are, Why They’re Cool, and How to Use Them
  10. How to Create a CSS Menu Using Image Sprites
  11. 10 Examples of Beautiful CSS Typography and How They Did It…
  12. CSS Shorthand Guide
  13. Push Your Web Design Into the Future With CSS3
  14. How to Use Headings in HTML
  15. 10 HTML Tag Crimes You Really Shouldn’t Commit

I’m not sure that all these articles are ‘beginner’ articles, but they are articles that can help you solve many of the ‘What happened?’ and ‘How do I get it to do that?’ questions.

That link again: http://line25.com/articles/15-must-read-articles-for-css-beginners

[Links last checked July 2009]

h1

Beware the ‘more work for you’ line

October 3, 2009

From the pen/stylus of Brad Colbow:

More work

h1

HTML tooltips: The easy way

September 30, 2009

Dave Gash, a great friend of mine and a terrific conference presenter on user assistance, has written an article on how to add fading tooltips to HTML links — the sort of thing that’s ideal for presenting little snippets of help (aka user assistance) to users as they are filling in a web form, for example.

His step-by-step article is here: http://www.writersua.com/articles/fadingtooltips/index.html.

fading_tooltip

[Dave has been a technical writer and online Help author for years, but originally comes from the world of programming (though we don't that against him!). So he's really good on all the 'techie' stuff and has a knack for explaining it to novices so they understand. Dave's currently available for hire -- you can contact him at dgash@hypertrain.com.]

[Links last checked September 2009]

h1

Before the coffee kicks in: 404 error

September 26, 2009

From the pen/stylus of Brad Colbow:

404 coffee