web site development :: graphic design :: logos :: animations

Edian Design Blog

February 24, 2006

Why use CSS

Filed under: Web design — admin @ 8:01 pm

The design and creation of websites goes around in circles. I remember how inspired I was ten years ago by those wonderful sites created in Director or Flash! In fact I got totally hooked on them and produced some funky pages, sites & presentations.

Then reality hit me. Neither the search engines nor the average users liked them. Apparently, the SEs could not read the files, and people could not be bothered to download the plug-ins. So I panicked. How on earth am I going to recreate my sites without using Flash or Director?????

I stared to experiment with Javascript and Java applets. To be honest they were just too complicated for me and use a lot of scripts. As far as layouts were concerned, I also found tables and cells frustrating - something never worked with them, or if they did work, they worked in IE but not in Netscape and vice-versa. It used to drive me crazy!..

Then I discovered CSS - cascading style sheets. I was suspicious at first - not another non-standard tool that could make my life hell???? I was right, nothing seemed to work properly - or the same old scenario of working in one browser but not in the other kept happening.

Gradually, however, I got used to it, I got the hang of it, I got even quite good at it… and now I’m loving it! Why?

CSS gives total flexibility in designing layouts

You can have many divisions (i.e. what Netscape originally called layers) and position them wherever you want on the page. 

Using CSS results in clean pages

It’s best to create an external style sheet and attach it to the pages. This creates a clean HTML or PHP page, that is quick to load and can be read easily by the SE robots.

CSS can be used to make websites creative again

Just check out the Zen garden templates. It’s amazing what you can do with a bit of imagination and some knowledge of CSS. Basically, the coding is the same for all those examples - it’s just the CSS that is different.

CSS versus flash?

My verdict is that the combination of animated gifs and CSS can create just as good and creative pages as Flash can - and, of course, it’s open source i.e. free!

Another good thing about CSS is that it’s now becoming more standardised across the various browsers - so if you haven’t yet given up on tables to position your objects it’s really time for you to learn some CSS! emoticon

• • •
 

February 7, 2006

blogging

Filed under: Web design — admin @ 5:49 pm

Why blog??

You are now probably quite familiar with blogs, the web phenomenon of the last couple of years.  Blogs, or weblogs, started as personal journals and now are taking over the internet. Why ??? emoticon- I hear many people asking..

Firstly, you don’t need to have your own domain & hosting it. There is no need to worry about designing or maintaining your site. You can just go to blogger.com or blog.co.uk, choose a name, choose a template and off you go.

Free of charge - free of hassles.

Secondly, blogs are no longer used just for personal diaries. They are very effective venues to sell your products and services or attract more visitors to your main site. You can easily publish new information, update your posts, upload pictures & images, organise your posts & categories etc. You may also allow others to comment on your posts or invite them to write about related subjects.

Thirdly, given that blogs are mainly text-based and updated regularly, the search engines love them. So if you want to rank high in the SEs - adding a blog to your site  could help you to achieve this. In fact it’s much easier to publish news, information, articles etc in your blog than adding new pages to your existing site. Wordpress is free and can be easily installed under your existing domain.

Here you can find look find a suitable theme  - here you can download themes for Wordpress.

Happy blogging!  emoticon

If you’re unable or too busy to install a blog on your site, please contact us and, for a small fee, we’ll be happy to do it for you.

• • •
 

July 8, 2005

Image optimisation for digital use

Filed under: Web design — admin @ 3:18 pm

In this category I’m going to give a few tips on digital graphics, logo design, image optimisation, image manipulation, web animations etc. Feel free to ask questions or add comments..

Image Optimisation

 A web page should not take more than 10 seconds to download. Viewers get bored with waiting and click elsewhere. So, if you want to use graphic images and/or photographs you must take this fact into consideration. On your front page you should only put small images - and not too many of them. Small I mean as in kilobites - not in pixels. I know this is very confusing - most non-designers don’t seem to understand this concept.

I’ll try my best to explain it. Let’s say you have a photograph that you’ve scanned in or taken with your digital camera. It has two sizes - one measured in pixels the other one in cm(or inches). The latter determines its real i.e. printing size whilst the former determines its digital size - i.e. how big the picture looks on your monitor. If you want to print this picture - you focus on its real (printing) size. However, if you want to email this picture to your friends or use it in any kind of digital format (in a slide show, on a CD, on a web site) the printing size doesn’t matter. Only the pixel size matters. For example - our picture would be 12×16cm - the pixel size 800X600. The pixel size depends on the DPI setting of your scanner or digital camera. The higher the number - the better the quality - goes the theory. This is true but, again, this matters if you want to print the picture. For computer & web use, the dpi should be between 72-150.

The best thing to do is to scan your picture (or take your picture with your digital camera) or image at a high dpi, then do the following:

1, lower the dpi setting to maximum 150 (72 if you want to have the picture looking small on the monitor)

2, this will automatically reduce the pixel settings of your image - note: the real (or printing) size will not change

3, decide how big your image you want to be on a monitor. If you want to email it to someone aim for about 400x 350 pixels (never bigger than 640×480)

4, if you want to put it on your web site - you must optimise it. Use Photoshop for this and click on "Save for web" . Here you have choices to save your image as a gif or jpg or png. Normally jpg is better for photos, gifs are better for graphics. But not always. Just experiment with the settings - click on the optimised box and it will tell you the size of the optimised version.

By the way I use this even on pictures to be emailed to friends/clients. Why? Because an image (let’s say 400×300pix) of 400 KB gets reduced to 12KB. It’s fast to email - and fast to download on the other side (whilst the quality of the picture is not harmed).

So size matters. By optimising your pictures your pages will download faster. In theory your pictures/images should not be bigger than 15K. In fact aim for 2-5K small images (maximum 10 per page). These can be little animated gifs or still images as long as your viewers don’t have to wait more than a couple of seconds (each) for them to download.

• • •