Monday, March 10, 2008

Garden of Inspiration

One project I am currently working on, as and when, is redesigning my artist website (www.mydepictions.co.uk) and moving it to a CSS (cascading style sheets) based design. The current site was built using HTML and uses tables for the page layout. I quite like this approach and I actually enjoy working with tables, but they are somewhat old-fashioned nowadays in terms of web-standards, and take longer to load in the browser window. So, I am on a mission to produce a "tableless" layout for my website using CSS with XHTML, and, as with the current site, it will be hand-coded.

I will be keeping my code clean and error-free by making regular use of the extremely handy W3validator, and also (with more user-friendly coments) the Wedesign Group CSS Ceck up. (Both of these allow you to upload your page for checking from the PC, so no need to have live pages on the web in order to check.) While valid code isn't essential in website design, I feel it is best to have valid clean-code unless you absolutely know and understand what you are doing. Some errors may have serious consequences in terms of your website being crawled and indexed properly.

One of the bug-bears with style sheets is the way different browsers display the page. A decent website should look good in all the major browsers. This is much more of a challenge with CSS and CSS is generally more demanding technically, so I would definitely recommend gaining a firm knowledge of HTML before learning CSS. Browser statistics currently show a large proportion of internet users still using Internet Explorer 6, 21% (and rising) using Internet Explorer 7, and 37% (also rising) using my favourite Firefox. Perhaps we can look forward to a day when most of the world will be using Firefox! In the meantime, I will not be going live with the new design until I am convinced it looks good in all the top browsers. Its a shame this cannot be said of some commercial sites, I have noticed one or two that are not rendered correctly in Internet Explorer 6.

On my journey of learning CSS I keep visiting the Zen Garden for inspiration..and to see how others have gone about style sheets. Web design is my hobby, not my profession so I do not expect to reach these standards! Just look what some of these guys have accomplished using CSS in the Zen Garden Design List..the HTML is the same in all cases!

Related posts: Building an artist Website

Mydepictions Web Design Resources Page

Another handy validator:Total Validator..you can have a desktop version of this, and there is a Firefox extension which gives you a one-click validator icon.

     


2 comments:

Artyfax said...

And the very best of luck!

I started learning HTML mamy moons ago, and now I can say I understand most of it and can use some of it but I think I will stick with the limitations of hosted sites. I don't seem to have the time for art/craft let alone the hard slog of building a site from scratch. And as for CSS it looks great but as of today It is a complete mystery to me.

Hope to see some tips appearing on the blog to complement your existing tips. Be nice to hear what issues you come across and of course it will be geat to see the final, completed work unveiled in due course.

John

Naj said...

TY John.

I find I retain the information better by hand-building, plus all website builders insert some unnecessary, and even invalid code. I was once told the first thing you should learn with computers is to type correctly..alas I think that is true! A typing error can take a while to spot sometimes..hence my heavy use of validation to help spot mistakes!

Featured Gadget: BBC News With Images

So far as I can tell this is the only BBC news iGoogle gadget with images and choice of news section. I've chosen to add BBC Technology news below. I've also placed a BBC Arts and Culture news version in the sidebar. Basically you choose the news content category to fit your personalized page, blog/websites topic area e.g. If you have a interest in/blog about health you might add a health news version of the gadget.

To add to your blog:

Method 1: Go to Dashboard>Edit Layout>Add a Gadget>Add your Own (delete the "http://" prompt) then copy and paste in the gadget url found in the BBC News You Choose with Photos listing. You will then be able set up you preferences.

Method 2: Go to the Google directory listing, set up your preferences then copy the code for adding to a website. Go to Blogger Dashboard>Edit Layout>Edit HTML/Javascript, then paste the code into the content box and save.

I've noticed when adding the gadget using method 1, the blogger preview won't show you the news content category you've choosen, only the gadget's default. This is a blogger issue with the preview only, your choice will still work.

Gadget Tips