Website planning & design - Optimising
Continued from
page 2 - "Planning site layout & navigation"
Build
Create, just remember to use a tool which gives
you control over the code, rather than a tool
which creates
bad code, code you don't understand or that doesn't allow you to do what you want.
You can always update code you wrote yourself quite easily since you understood it, however if that code
is not yours it becomes harder, and if you do not understand what it is supposed to do it becomes harder
still!
HTML editors do not need to be expensive, lots of people find windows notepad and a copy of a decent "HTML
for dummies", or the "HTML users bible" are a more than acceptable alternative to thousands
of pounds worth of specialist website creation application. Many people prefer to be able to write themselves
for the sense of pride it gives them, not to mention the control!
While you are thinking about that I should just mention a few things which you should bear in mind when creating
webpages. Always remember the size of anything you add to a page beyond the content such as images, backgrounds,
sounds etc. and when you are done just check that the numbers sound right to you for example if you notice that
all the elements that are loaded as page X is shown come to 1.3MB then it's time to see where the problem lies.
Page View
The total size in bytes of each page is often refered to as "page view size" - bear in mind that your
average dial-up user can get around 2K to 5K a second so a 100K page view will take 20 seconds to load completely
for a user running at 5K/sec - if your pages take too long to load people get bored and just go elsewhere, I mean
for any given generic search on google you get at least 100 different sites. A bored user will simply go to one
of the alternates that was suggested, but if they didn't come through a search engine then doubtlessly they will
just close the browser window that contains your site.
Common page view size issues are normally caused by images - firstly check that the source image has the same
resolution as the space you are showing it in for example there is no point having a 1024 x 768 source image
when it simply gets displayed as a 100 x 50 image on the page - shrink a copy of the image down to size and
then use this as the image - linking it back to the main image if needed.
The next common problem is similar - using too many colors. For a small image 256 color should suffice, the
maximum I'd suggest for anything which is part of the loaded page, short of artwork, is 32,000 colors as this
gives you a large selection to work with while actually reducing it from maximum.
The other common problem is image format. Things like bitmaps (
.BMP) are prone to very large file sizes
and so are not suited to being parts of websites, equally things like JPEG (
.JPG), PNG (
.PNG) and
GIF (
.GIF) are better suited as part of their format is they compress their contents, with JPEG having the
option of variable compression is exchange for lose of quality, while PNG and GIF contain compression while
preserving original image quality.
The last point I will make on page view size is that it is not simply and issue of making it a smaller size, it is
also about how fast it renders. A poorly coded page will often render slower than a much larger (but properly coded)
page. Size should matter to you for another reason too - if you ever move to paid hosting then you pay a standard
charge which gets you
x MB of diskspace and
y MB of bandwidth a month - exceed this and you need to
pay more money so if each page view is smaller then you get more pages delivered out of the available bandwidth.
Cascading Style Sheets
Sooner or later you reach a point where you notice you are re-using the same design elements over and over on the
pages you are creating. Wouldn't it it be nice if you had a way to describe those elements in one place and then
just recall those element setting on each page, saving effort and decreasing page view size too?
Well if you are feeling adventurous you can... (the following are quite complex topics in their own rights
and I have no intention of covering them here, if you want to know more about them use a search engine - that
is what they were created for)
For the presentation of elements you can use something called CSS or Cascading Style Sheets, and these are a way
of defining "styles" for elements, so if you always format headings a certain way you could create
a style that contained that formatting and then simply reference it by name for that element - allowing you to
remove all the other information in there. CSS allows you to define fonts, textsize, colors, alignment - it is
pretty much a case of if it is possible to format text a certain way it
will be possible to do that
formatting using CSS!
Scripting
For frequently used scripting (e.g. JavaScript, VBScript etc.) functions you can extract them out into their own
files and then add a reference to those files back into the pages that need them rather than actually having the
same code on each page. This means you reduce the amount of data the user needs to download to be able to use
your page,
and it makes your life easier since you only have to make changes to one file to have all the
pages using that code update. You can include external files in pages by using the
SRC attribute of the
SCRIPT tag.
How this helps
Although each of those two methods involve removing items and placing them in other files they do actually
reduce the total size of the page views! It works because modern browsers remember which files they have downloaded
previously, they can check their file against the file on the server and see if it needs to be downloaded again,
if it does not then they will happily use the older copy.
Now if I use the same files in every page, the pages themselves may need to be fetched but those common files will
not, this reduces the amount of data that needs to be downloaded and means the user will see your pages that little
bit faster.
Improvements / Tweaks
Okay it's built - sit back and bathe in its splendor. What's that you say? "I don't really like that
feature any more! and omg that feature doesn't work!" well that's just natural, it's new and still has
problems. Concentrate on fixing problems since these are guaranteed to spoil the user's visit whereas
"look and feel" issues simply impede their movement through the site.
Once the majority of the bugs are fixed then you can go back and revise those
really poorly designed
features such as the blinking text, and that mouseover image that never changed. At this point I feel my site
has reached maturity, and aside from a few modifications here and there to keep it up-to-date it is a finished
product.
However that said you cannot just forget about it - it is your responsibility, if something breaks you need to
fix it, if a user has a question you need to answer it, and most of all you need to be there to do maintenance
on the trivial matters which can cause problems such as updating scripts which are vulnerable to a certain new
type of attack.