Create an Awesome Home Business » Web Basics

1 Easy Way to Improve Cross-Browser Compatibility

Martin — Thu, 29 Jul 2010 08:39:17 +0000

For those who build websites by hand (rather than on a platform like WordPress or Joomla) one of the hassles is making sure your sites render consistently in different browsers.

Internet Explorer is notorious for screwing things up, mostly because in the past they’ve never adhered to the W3C standards. That said, IE8 is better than previous versions.

However, there’s an easy step you can take that will address a large proportion of cross-browser rendering problems.

It’s not a complete fix, because some browsers still cannot handle some CSS attributes. But it will address most layout and spacing inconsistencies.

Assuming you create an external stylesheet to define the style and layout of your sites (and if you’re not then you should be), you can add this code right at the top:

Here’s the link to the text file containing the code, so it’s easier to copy.

What that does is reset all the default browser CSS values to zero, but only when it’s displaying your pages.

That means that the margins, borders, padding and other attributes you set to define layout and positioning will render consistently because they’re all starting from the same base (0 pixels).

It removes the problems caused when browsers have default CSS attributes defined. When these are defined they are added to any attributes you define in your style sheet when the page is displaid.

So if you set the right margin on images to be 10 pixels and the first browser has a default of 5 pixels for image right-margins, your images will render in that browser with 15 pixel margins to the right.

The next browser may have a default of 10 pixels – you can guess the rest.

As I said earlier, this is not a complete fix for cross-browser compatibility problems, but it will definitely help to make layout and positioning render consistently.

Cheers,

Internet Marketing Basics for Small Businesses

Martin — Tue, 27 Jul 2010 04:59:26 +0000

I’ve been lucky enough to pick up two new contracts recently for web design services for small companies in a totally non web-related industry.

And, in both cases, the current providers have been giving a poor service.

Understandably, their customers (my new customers) are totally unfamiliar with the web and the basics of promoting a business online.

But sadly, instead of providing support and guidance, and being open and transparent with what they’re doing, the service providers in question have been doing the opposite.

So for small businesses who are thinking of marketing online, here are some basics which it’s well worth getting your head around.

Take the time to understand these things, at least at an elementary level, so you can ask the right questions of your service providers.

You need to know enough to know when you’re being taken for a ride.

Basic Elements for Small Businesses Operating a Website

A website designer/builder

You’ll need a website – your online shop window. Find someone who offers W3C compliant sites (the World Wide Web Consortium – the body that sets the standards for the web) to design and build it.

They should be able to show you a W3C badge on their site as proof.

Avoid people who use Flash heavily. Flash, while capable of producing beautiful looking sites, is not good for the search engines because they can’t read it.

And if the search engines can’t read your site you won’t do well in the natural search results.

For a small business, with a new site, you need to be able to do as well as you can in the search results, as early as you can.

Make sure you get some sort of service level commitment out of them.

As a starter, I offer simple SLA’s to my new customers. These relate to the time I’ll take to get new updates published, but you can ask for any SLA you like depending on your needs.

A domain name

This is your address on the web, like www.google.com. It will probably cost you somewhere between US$7 and US$15 a year, depending on whether it ends in .com, or something else.

Ideally it should be your company name or it should be based on a keyword relating to your business.

Hosting

This refers to the server that contains (hosts) your website code and makes it available to people searching the web.

It will cost you anywhere from nothing (free) to around US$20 a month. You can get some really good deals (quality hosting at a good price) at around US$10 a month.

Free hosting should definitely be avoided if you’re promoting a business.

SEO

Does the person who’s going to build your website understand Search Engine Optimisation (SEO)?

Make sure they not only understand it, but they can describe it to you in a way that you can understand.

(SEO is a bunch of best practices for getting your website to feature well in the search results).

They don’t need to be SEO wizards, but they do need to understand it well enough that they can describe it to you in clear, simple language and set up your site properly.

Don’t be afraid to ask questions to clarify anything. The bullshit-baffles-brains approach is used frequently – don’t be intimidated by it!

Build from scratch or on a platform

Find out whether they plan on building your site from scratch or on a platform (like WordPress, Joomla or Drupal).

Building it on a platform is good because that means you generally only need to worry about the styling, but make sure it’s not proprietary.

If it’s a proprietary platform you risk being locked in because other potential service providers won’t know how to, or won’t be able to access it.

Make sure you’re happy with the styling before handing over the final payment.

PPC: Pay Per Click advertising

If you look to the right or top of the results page next time you type a search into Google or Yahoo you’ll see some entries under the heading ‘Sponsored Results’.

These are Pay Per Click ads.

As an advertiser, you pay each time a searcher clicks on your ad and gets directed through to your website.

PPC can bring you quick returns but it can be expensive. Extremely expensive, if it’s not set up right.

So be sure to get someone who understands about relevance, targetting and quality scores in Pay Per Click advertising to set it up for you.

And make sure that, if they talk about Search Engine Optimisation, they’re not trying to persuade you that being top of the Sponsored Results indicates good SEO.

It doesn’t.

Social Media

This is about promoting your site through places like Facebook and Twitter. It can also involve you setting up a blog on (or linked to) your website.

When it’s working well, Social Media is a highly cost effective alternative to PPC but it takes time before you see results. It also takes time (every day) to keep your blog, Twitter, Facebook and other accounts regularly updated.

A social media campaign is a lot of work if you want to make it successful.

A good, balanced promotion campaign for a new website should contain both PPC (or other paid channels) and Social Media elements – make sure the company you’re talking to understands this and offers it.

Hacking

This is when someone accesses your site illegally and adds spam code to it. If this happens the search engines will find out very quickly and your site will be removed from their indices. This will, literally, trash your visitor traffic.

Make sure you have backup copies of your entire site stored locally (on your PC) because the best (and often the quickest) solution when you’ve been hacked is to delete your entire site from the server and re-upload it.

Make sure you keep your PC clean and free of viruses. A keylogger inserted onto your PC can capture your FTP login details and transmit them to the person who inserted it.

That will enable them to get access to your site code and do bad things.

Backups

As with any data, you should always have a recent back up copy – an exact copy of the data on your site.

Make sure you understand (and are happy with) the backup routines in place through your hosting company or the person setting up your site.

Create your own back ups if you’re not sure.

Summary

If you’re a small business considering advertising online for the first time, those are some of the primary things you’ll need to think about.

You should also ask your service provider (website designer/builder, Marketing guru, etc) to explain anything you’re not clear on.

Make sure you cover them all with whoever you hire to set up your site so that you understand what you’re paying for, and you pay for what you’re getting.

Like I said at the start: you need to know enough to know when you’re being ripped off.

If you don’t want to take that level of interest in your online marketing you probably shouldn’t start in the first place.

Cheers,

What is WordPress?

Martin — Thu, 29 Oct 2009 08:50:15 +0000

In this post I referred to a question I saw in one of the forums: what is WordPress?

Given that I write this blog for people who are new, or relatively new, to working on-line, and it contains over 40 articles on WordPress, I have been remiss in not writing one that describes exactly what it is.

So here you go: WordPress is a free, open source platform that is primarily used for blogs but can also be used to create normal static sites, forums or content management systems.

Bet that helped..!

OK – here’s WordPress in plain, simple terms:

It is, as I mentioned above, an open source application and it was originally designed to provide a blogging platform.

But, because it’s open source, and because of the vision of its founder, WordPress is now used to power many different types of sites.

It’s also used by some very big names to power very big sites – like the Larry King Live Blog and the Wall Street Journal Law Blog.

That’s not meant to be discouraging, by the way, if you’re new to this. It’s meant to demonstrate that it’s a pretty good system.

And, as I said above, it’s free.

Because it’s open source, a huge developer community has grown up focused on building add-ons (called plugins) and themes (often referred to as templates) for WordPress.

Today there are over 4000 plugins available to download from the WordPress site (plus more that are stored on the developers’ sites) and many thousands of themes.

In addition to all that WordPress itself contains widgets.

All these things enable you to add as much personalisation as you want, and pretty much any functionality you can think of, to the base WordPress application – usually with just a few clicks of the mouse.

The Basic WordPress Platform

The basic WordPress platform enables you to set up a simple blog or website that you run on-line.

That means that you don’t need to bother with HTML editors (there’s one built in) or FTPing your website from your PC to the server.

There are two types of WordPress: WordPress.com is a site that hosts WordPress blogs and where you can open an account and start a blog very quickly and easily, without the need for any technical skills.

It provides a similar service to Blogger – another free blogging site where you can set up and run a blog.

The second type of WordPress is one where you download and install the software on your server.

It’s called self-hosted WordPress or sometimes it’s called WordPress.org, because that’s the site from which you download the application.

Self hosted WordPress gives you more control over the look, feel and functionality of your site than WordPress.com blogs do. But the downside is that you need to manage and maintain your blog yourself.

That’s not complex, by the way, but it means you have to do upgrades when they’re available (only a click of 1 button) and if it all goes horribly wrong you’ll need to get help from someone who knows about WordPress.

WordPress themselves have made the entire process of installing and maintaining your self hosted blog as painless as it’s possible to be.

Plus, there’s so much help available on-line through forums and blogs (like the one you’re reading now!) that you’re never going to find yourself stuck.

So let’s look at some of the components that make WordPress (self-hosted) so powerful.

WordPress Widgets

The first thing that enables you to personalise your WordPress site are the built in widgets.

These are modules that sit in the sidebars. Many of them are preprogrammed to display specific information like your last posts, the tags you’ve used, links you have to other sites and so on.

There’s also a text widget that enables you to insert anything you like as long as it’s HTML based. That means you can install scripts (for things like an Aweber opt in form, or a You Tube video) or you can dream up and install your own creation.

It’s the equivalent of an HTML page – but displayed in your sidebar.

There’s no limit to the number of text widgets you can add to your site. So you can add opt in forms, ads, widgets from social sites or whatever else – and as many of them as you like.

Widgets are easy to activate or deactivate – and there are instructions on how to do so here.

WordPress Plugins

The next thing you can use to personalise your WordPress platform are plugins.

There are more than 4000 plugins available to download from the WordPress.org site and they add almost any kind of functionality you can think of to your platform.

You can add plugins to improve protection against spammers and hackers, to make it easy to back up your blog database, to improve search engine effectiveness, to add a forum, to add image galleries and almost anything else you can think of.

Most plugins are free to download and install, although most also have a PayPal donate button. It’s good form to donate when the plugins are good and do their stuff, but it is voluntary.

Most plugin authors provide support for their plugins, including upgrades with new functionality and security improvements.

Finding and inserting plugins is very straightforward. There are instructions on how to find them here and on how to install them here.

WordPress Themes

The third thing you use to personalise your site are themes or templates.

Themes define the layout of your site – the number and positioning of sidebars, colour schemes, fonts, the header and footer, and so on.

As with plugins there are thousands of free themes. More than 650 on the WordPress.org site alone, and thousands more that you can Google for.

If you’re looking for a specific type of theme – e.g. a music based theme – you can simply Google for ‘WordPress music themes’ and you’ll get more results than you can shake a stick at.

There are lots and lots of excellent free themes but there are also some very badly coded ones, including ones where spam has been inserted into the code.

So you need to be careful if you’re looking for free themes – and be sure to get them from reputable sites.

Premium (or paid for) themes are generally well coded and also have support forums and regular upgrades.

There are usually two pricing options. There’s a Personal option which allows you to use the theme on one of your own sites and a Developer’s option which allows you to use it on as many sites as you like, but usually your own. Check the T’s & C’s of the theme you buy to be sure.

The bar on premium themes is being raised all the time and, for example, the Thesis theme, which I’m using on this site, is more like a supplementary platform than a theme.

It enables you to drop some SEO plugins and enables non technical users to make good use of WordPress’ flexibility much more easily.

There are instructions on finding WordPress themes here and on installing them here.

Summary

OK – so that’s WordPress.

It may seem daunting at first but, like anything, once you get to play around with it and see how it works I think you’ll find it very easy and intuitive.

If you’re interested in moving to WordPress one of the best ways to do it is to set up a free WordPress blog at WordPress.com.

That way you can learn how everything works and become familiar with the User Interface.

Then, when you move to a self-hosted version, you’re already familiar with the logic and the transition will be a lot easier.

If you have any questions leave a comment below, and if you’d like a complete tutorial on how to install it, configure it, add widgets, plugins and themes, write and promote your first article you’ll find it here. (It’s on-line, so it’s absolutely free).

Variable Width Websites: An Update

Martin — Thu, 01 Oct 2009 03:15:20 +0000

A while ago I wrote about converting some of my websites to variable width.

My thinking at the time was that, for someone using a wide-screen monitor, the appearance would be better if the content expanded to fill a larger portion of the screen.

Having got a couple of them successfully converted I had second thoughts. I decided that it wasn’t such a good idea after all.

After pondering for a while, I eventually closed one of the sites down and converted the other one back to a fixed width.

Here’s why:

Variable width works best where your page is largely text. That’s why so many forums use variable widths.

But where you have images, or any other design elements on your page, it all becomes a bit messy because it’s difficult to get your page looking exactly as you want it at all possible widths.

In the process of converting my second site I came up against this issue and decided to limit the amount by which the width could vary.

But still, however much I fiddled around with it, the site looked better on a narrower screen because this forced it to display at the width at which it was originally designed.

So I decided to convert it back to a fixed width – and I’ve never looked back.

Best Solution: Use a Combination

The most recent site I built uses a combination of fixed and variable widths – and this works well for me.

The header and footer are both variable width – in both cases set at 100%, so they fill the entire width of any screen they’re viewed on.

All the rest of the content is styled and positioned within a page-container div (fixed width and centred).

This means that I have complete control over how the content appears to readers, irrespective of the width of the screen they’re using. And the variable width header and footer help to improve the appearance on wider screens.

The best of both worlds. (Here’s the site in question).

What’s All This SEO Stuff?

Martin — Mon, 06 Jul 2009 11:47:30 +0000

When you first start working online the amount of jargon and acronyms you see can be extremely off-putting.

Which is no different from starting any new type of activity, by the way, but for people who may be a bit nervous of technology it can be enough to keep you from getting started.

So let’s de-mystify one today – Search Engine Optimisation or SEO.

Here’s what SEO is about.

This first thing to understand is that SEO is not a black art. It’s common sense, nothing more.

The second thing to understand is that the search engines see their customers as the people doing searches for stuff. They do not see webmasters (anyone building a website or blog) as their customers.

But they do encourage webmasters to work with them to help provide a good search experience for their customers.

So how does that knowledge help us?

Knowing that the search engines are competing against each other to provide the most relevant and highest quality information in response to a search, tells us that good quality content is one of the basic building blocks of a site that’s well optimised for the search engines.

Or it should do.

The volume of actual business done on-line is growing day-by-day, but the majority of people still use the Internet as a source of information.

And they’re looking for the most relevant and highest quality information they can find.

As a result, and in their drive to gain competitive advantage over their rivals, the search engines are getting better and better at assessing the actual information on a site.

Often called contextual relevance, the search engines can dig deep into your site and assess the depth and breadth of information you have there.

In fact, it’s reasonable to assume that it won’t be long before the search engines are able to assess the quality of articles on a site – meaning spelling and grammar – and give greater priority to better written sites.

After all, spelling and grammar checkers have been around for years and it’s unusual now to find a website where you’re entering information that doesn’t highlight what it perceives to be mis-spelled words.

So the first and most basic rule of good Search Engine Optimisation is this: plan and develop a site that has in-depth, good quality, well written information.

And, while we’re on the subject of rules, here’s the second: if anyone tells you they can guarantee to get your site into the top spot on Google within a week/month/or whatever, don’t believe them.

No one can do that, and here’s why:

The only people who know the algorithms that the search engines use are the people who program them. And, because of the competition I mentioned earlier, those rules are kept more secret than the CIA’s information sources.

Plus – the algorithms are changed on a regular basis for two reasons:

To shake off the black hatters – people who try to game the system
To improve the quality of search results they can deliver.

So claiming that a specific SEO technique will get your site into Google’s top 10 may be possible one week – but it will probably see you down at page 150 the following week.

Which brings us back to content. It’s all about content: good, regularly updated, accurate and well written content.

Having said all that, here are some things you can do to help (and work with) the search engines:

Site Navigation

Just as people use the navigation (menus and links) you provide to find their way around your site, so do the search engines.

So make your navigation clear and easy to follow.

Avoid using Java or DHTML based drop down menus – you can do those using CSS. The search engines can’t read Java and, if someone has scripts and flash disabled in their browser (as many do), they won’t be able to read your navigation either.

Page headlines and sub headers

Headlines and sub headers help people to understand quickly what your page is telling them. By using your H tags to style your headers and sub headers you will also help the search engines get a quick understanding.

META tags

META tags are standards-defined bits of information that tell the search engines what your site is about. They’re also used to tell the robots that crawl your site where they can and can’t go, how often to re-visit and a whole lot more.

There are loads of free META tag generators available on-line. All you need to do is fill in the template they offer with information about your site, click the button and – hey presto – you’ve got an entire set of META tags that you can copy into your site.

Use them.

Many will tell you that META tags are no longer relevant – in which case I’d refer you to basic rule number 2 above.

At the very least, using them tells the search engines that you’ve taken the trouble to structure your site properly, and within the agreed standards.

Create a sitemap.

There are lots of free sitemap creators online too. Create and install a sitemap for your site, and remember to create a new one each time you add or remove a page.

Sitemaps tell the search engines about all the pages in your site, so if they miss a page in your navigation menu they can find out about it here.

Read Google Webmaster’s Tools

Google Webmaster’s Tools is the way Google extends the hand of co-operation to webmasters.

There’s a huge amount of very valuable information in Webmaster’s Tools and I strongly recommend you activate it within your Google account and absorb as much as you can.

At the very least read the Google Webmaster Guidelines. It expands on the principles I set out earlier.

So how would I summarise all that?

Step 1: Plan and build a site which contains high quality, well written articles. Update it frequently as new information comes out.

Step 2: Look at your site from an outsider’s perspective: is it logically structured? Is it easy to find your way around?

Get a friend to give their view as to how easy and intuitive your site is.

If it’s easy for people to find their way around your site, it will be easy for the search engines.

Step 3: Create and use META tags

Step 4: Create and use a sitemap

Step 5: Absorb as much as you can from Google Webmaster’s Tools – and implement it!

Do I Need to Learn HTML?

Martin — Thu, 18 Jun 2009 04:45:54 +0000

Do I need to learn HTML and SEO? This was a question I saw in a forum today.

For people new to working on-line learning these new skills with strange acronyms can be daunting.

In another post I talked about how I tried to start my Internet business without a website because I didn’t want to learn about FTP.

But the fact is, if you’re serious about working on-line, you do need to learn the basic tools of your trade.

Here’s why:

Tools and services that are readily available today mean that you can get a website up and running with zero technical skills. Setting up a new blog on Blogger is the perfect example.

But even tools like these will get you better results if you understand how to make use of the basic tools of your trade.

Take SEO.

On page SEO is about setting your website up according to the agreed web standards. These are not complicated. In fact they’re straight-forward common sense.

But if you don’t understand SEO, and how the search engines work, you can still put the wrong information into the template fields that many of these tools provide.

And that will reduce the SEO effectiveness of your site and penalise you in the search for traffic.

And if you don’t understand HTML it’s going to be more difficult to sort out things that go wrong.

Take, for example, publishing articles in WordPress.

WordPress is another tool that enables you to build great looking websites without using HTML. But even using the excellent HTML editor that WordPress provides can still sometimes lead to things going wrong.

For example in a recent article that I wrote, the first few words of the first paragraph were a link. I later decided to add an image that would be positioned to the left of the opening paragraph, so I used the ‘Add Image’ tool to do that.

But, even though I put the cursor absolutely in the ‘home’ position, when I inserted the image I found that it had been made into a link. It had got mixed up with the HTML for the first few words of the article that were already a link.

Nothing I did in the text editor view would fix it, but fixing it by switching to the HTML view and editing the HTML code was an absolute piece of cake – it took less than 30 seconds.

If I didn’t understand HTML I would have had a problem – even with an application as friendly as WordPress. But because I do know HTML fixing it was a breeze.

So my response to that question on the forum was a resounding ‘yes’.

Learn HTML, SEO, CSS and all the rest, because if you’re serious about working on-line they’re the basic tools of your trade.

You don’t need to become the world’s best expert in these technologies – but learn enough to know how things work and where to look when things go wrong.

A great place to start learning about these web design technologies is w3schools.com. You can find tutorials there on HTML, CSS, XML and a whole host of other technologies you’ll need.

They’re all well structured and easy to follow – and you can find them here.

What is CSS?

Martin — Thu, 11 Jun 2009 12:28:27 +0000

In this post I said that CSS is one of the codes or languages that have been developed to work with HTML, to improve the efficiency with which the fonts and styling of a website are defined.

So what is CSS?

CSS stands for Cascading Style Sheets and it’s the way the themeing or styling of modern websites is achieved.

Here’s how it works.

Website styling prior to CSS:

In the early days of websites, before CSS, you had to define each element of your website’s look and feel by hand, and page-by-page.

For example, if you wanted your links to appear in a particular colour you had to define this at the top of each page of your site.

If you later wanted to change the colour of your links, you had to go back to each page of your site and change the settings.

You can imagine how laborious that would have been for someone with a large site – say several hundred pages.

You can also see the scope for mistakes or inconsistencies to creep in – resulting in your links being styled differently on different pages.

Web pages were originally based on tables. That’s how the page was divided up into the different columns or areas (sidebars, for example).

These tables also had to be defined and styled on a table-by-table basis.

Not only was this highly labour intensive, it meant that each web page contained a lot of code – the stuff that tells the browser how to display the files – and that tended to slow down page-load times.

So CSS was developed, to improve the efficiency of managing the look and feel of websites.

Website styling with CSS.

Prior to CSS the content of the site, and the code that defined the styling, were inter-mingled.

With CSS the principle is to separate the content from the styling, so you can manage each individually.

The advantage of this is that you can first define the look and feel you want for your website then, once that’s done, all you need to do is focus on the content.

Plus, by managing the look and feel separately, you no longer need to change each page when you want to change a styling element.

Taking the example I used earlier: if you want to change the colour of links in your site you only need to make one change in your stylesheet and the new colour will be applied consistently throughout your site.

Much quicker, and no more risk of inconsistencies.

So how does CSS work?

CSS is driven by a file called a Stylesheet. You create the stylesheet as a separate file and you put a link to the stylesheet file in the HEAD section of your website.

This tells the browser where to get the information about how to layout the page.

The stylesheet file is one of the files that the web server will send to the web browser when the link requesting the page is typed in. The description of how that works is here.

With CSS you no longer use tables to define the layout of your page. Instead you use divisions, which are called divs.

So now, when you want to define a sidebar in the page of your site, you no longer have to define the table and all its attributes. You simply insert the name of the div as an HTML command. The web browser then takes the div’s definitions from the stylesheet and applies them.

As a result there is a lot less code on the page (in relation to the content) so the page loads more quickly.

The better you become at using CSS the more efficient you can make the styling of your site.

So, to summarise:

The principle of CSS is to separate a website’s styling from its content so they can be managed separately
CSS is driven by a separate file called a stylesheet, which tells the web browser how to layout the page.
To change the style of an element in your website you only need to change that element in one place: the stylesheet.
CSS uses divs, which are defined in the stylesheet, not tables to create separate sections of a web page.
By separating the styling from the content and eliminating the need for tables, CSS reduces the amount of code in relation to content on a page, which results in faster page-load times.

What is FTP?

Martin — Mon, 08 Jun 2009 12:16:30 +0000

Before I started building websites FTP was one of those terms that I heard but never understood.

In fact, I initially hoped I could run an on-line business without ever needing to build a website just so I didn’t have to deal with things like FTP

Well, I found out the hard way I couldn’t do that – so I ended up getting to grips with it.

And here’s what it is:

FTP stands for File Transfer Protocol and it’s simply the means by which you move files from your PC to your web server and back again.

In this article I said that a web page is made up of lots of files that Internet Explorer receives from the web server and arranges on your screen, so you can see the web page.

In many cases web designers work offline, creating the files that make up their pages using tools that they have on their PC.

For example, the graphic I have at the top of this page is a single file, which I made by editing a much larger picture and adding the text. To do that I used a graphics tool that sits on my PC.

Having made up the file I then had to transfer it to my web server so it can be displaid whenever anyone types the link to this page.

I used FTP to do that.

Luckily, today we don’t need to know the ins and outs of how FTP actually works, because there are software packages that take care of all that for us.

All we have to do is learn how to use the software packages – there’s a description of how to do that here.

In this post I talked about Internet Explorer on your PC being the client because it’s what the server serves web pages to.

Many programs that people use to work online need a version that sits on the server and a version that sits on your PC.

These two versions work together to make sure they can carry out whatever they’re designed to do.

That applies to FTP. So there’s a version that sits on your PC, which is called the FTP client, and a version that sits on the server.

There are lots of FTP clients available and they all work to the same standards, so that they can communicate and work with the server end.

They also work in pretty much the same way at the client end (your PC), but the user interface (what you see on the screen) looks different as each manufacturer tries to make their version more user friendly, or give it distinguishing features.

All you need to do, then, is to install an FTP client on your PC, make the connection with your FTP account on the server and you’re good to go. Here’s a description of how to do that.

Using the FTP client on your PC is exactly the same as using Windows Explorer. You simply drag and drop your files where you want them to go and the FTP client takes care of the rest.

Couldn’t be easier, but for a more detailed description read this.

How Does a Website Work?

Martin — Wed, 03 Jun 2009 12:55:12 +0000

A friend told me the other day that although he read all my articles he didn’t understand any of them. Not one.

Which gave me an idea …

Why not set up a new category and write a bunch of articles for people who are absolutely, completely new to the web (and possibly a bit nervous of the technology)?

Sounded like a good idea to me, so here’s the first one:

How a website works.

How are web pages made up?

A web page is made up from lots of different files: pictures, text, diagrams and so on.

When you surf the Internet from your PC you’re using a web browser – Internet Explorer for example.

So when you look at a web page on your PC, Internet Explorer receives all these files and puts them together to display the web page as you see it.

All these files have to be stored somewhere centrally, so that anyone using the Internet can see the web page from anywhere in the world.

The place where they’re stored is called a web server, or simply just a server. This is because it serves websites to people who ask to see them.

And the tool that you use to pass this request to the web server is your web browser – Internet Explorer.

Your web browser is also known as the client, because it’s the party to which the server serves the files.

So what happens when you type in a link?

When you type a link into your web browser this is what happens:

Your web browser (Internet Explorer) sends a request to the web server that stores the files (1 above)

The web server looks up the page that’s been asked for, collects all the files that make up that page, and then sends them all back to your web browser (2 above).

Your browser receives the files and lays them out on the screen so that the web page is displaid for you to read.

Nothing too complex there, right?

Great – you now know how web pages work.

So what about all that jargon and those abbreviations?

The base language (or code) that web browsers use is HTML. You’ll hear that mentioned quite a lot.

But HTML is a pretty basic language and, actually, very simple.

So other languages (or codes) have been developed to enable more and more functionality to be built into websites.

These codes all have to work with HTML. So think of HTML as the base platform which all these other codes sit on top of.

Some of these codes use the power of the web servers to manipulate information that people visiting the web page type in. They’re then able to take pre-defined actions based on the information they see.

For example, if a site is age restricted and someone types in an age that’s below the limit, a language like PHP will take that age information, check it against the age limit, see that the viewer is too young and prevent them from accessing the site.

Other codes, like CSS, have been developed to improve the efficiency with which things like font styles and colour schemes are defined and displaid.

The last code type you’ll hear about are scripts. These are bits of code that take the same action each time something happens.

For example, statistics on the number of visitors a site receives are often driven by scripts. Every time someone uses their web browser to look at a page which has the script on it, the script will send a message to its server telling the server there’s been another page view.

So, to summarise:

The files that make up a web page are stored on a server so they can be accessed by anyone from anywhere
When you type a link into your web browser, it sends a request to the server. The server collects all the relevant files for that page and sends them back to the web browser
The browser receives all these files and lays them out on your screen
The base language that web browsers use is HTML
Other code languages are used to add additional functionality: PHP, CSS and Scripts are the main ones, but there are lots of others and they all have to work with HTML.

Next time we’ll look at another term you’ll hear a lot of: FTP.

How to Build a Variable Width Website

Martin — Sun, 18 Jan 2009 02:06:36 +0000

Why would you want to build a variable-width website?

Because the range of screen widths on which people browse the internet now ranges from around 12 inches to twice that size.

And if you choose to view your PC through your TV you could be viewing web pages on screens many times bigger than people were using just a few years ago.

So if you build a fixed-width site that fits onto a 12 inch screen, the person using a wide-screen is going to see your site as a narrow strip down the middle.

Which doesn’t look so good.

Luckily, building a variable-width site is very easy, as long as you’re using CSS. And if you’re not yet building your sites with CSS you should really start. It greatly improves cross-browser compatibility and enables faster loading.

Building a site with CSS (as opposed to tables) means you need to think of the content of your site as being enclosed in a series of containers. These containers are called ‘divs’.

You start with your main container, or div, and then create smaller containers which sit inside it and which you position by telling them to float left or right. This creates the layout of your pages.

You style your divs (background colour, text alignment, font type, etc.) by defining those attributes in your stylesheet. And there are loads of free CSS editors that makes this process a real cinch.

You then put your content – text, images, scripts etc. – inside the relevant containers (divs), based on where you want it to appear on your page.

If you’re new to CSS and would like to learn there’s an excellent tutorial here. This is the tutorial that got me started on CSS and it’s really worth a look if you’re new to CSS and interested in getting started.

So how do you create a variable-width site?

The easiest way is by specifying the width of your main div (the one that contains all the others) as a percentage value, rather than a specific width.

That will cause it to adjust to the specified percent of the width of the screen it’s being viewed on.

Some of your divs (for example the divs that form your sidebars) will probably have fixed widths specified. That’s fine, and they’ll retain their fixed width within your main div.

You do, though, need to make sure that the div containing your main content does not have a fixed width specified.

For example: if your page has a div which contains your primary content and a right sidebar which contains testimonials, you would typically specify the width of the div containing the right sidebar (for example 200px) and tell that div to float right.

You would then specify a right margin of 200 px for your content div, which would cause the divs to sit side by side. (Remember – these are enclosed within, and bounded by, the main div so they position themselves in relation to that).

However, although you’ve specified a right margin of 200 px for your content div, you’ve not specified a width.

This means that when the width of your main div expands because it’s being viewed on a wide screen, your content div is able to expand as well.

It will still retain a right margin of 200px and your sidebar div will retain its fixed width of 200 px, so the relationship of those two will not be changed.

A couple of things to keep in mind:

Make sure that your header and footer are designed so that they can accommodate varying widths.

That means that if you use an image in your header you need to put this into its own fixed width div, which will then sit (centred) inside your header div.

The width of the header div will expand and contract with the different screen sizes but your fixed width and centred div containing your header image will stay centred and in place.

You also need to consider images contained within your content.

As the width of your content div expands it may reduce the number of lines in a paragraph. So on a 12 inch screen a paragraph may have 6 lines but on a 24 inch screen this may reduce to 4, because of the extra line length.

Therefore you need to consider whether this would cause images contained within text to become incorrectly positioned.

I’ve just converted one of my sites (one of my secondary blogs which I didn’t mind experimenting on!) to a variable width site. I’m pleased with that one, and I now need to get started on the rest.

Update 7th May, 2009

I wrote another post expanding on this one when I came across a problem while converting my second site.

You can find it here.

Update 1st October, 2009

I eventually decided to move to a combination of fixed and variable widths – and wrote an updated article explaining why. You can find it here.