My Thoughts

I have been working a website which required me to display a checkbox but disable it, to ensure nobody viewing the page is able to toggle it before they submit the form.

I thought I would achieve this with javascript, but to my surprise you can actually do this using the disable property of the checkbox. See the examples below.

Disabled Checkbox Enabled Checkbox

Code to disable a checkbox

<input name="checkbox" type="checkbox" value="checkbox" checked="checked" disabled="disabled" />

Posted by Dean at 12:18 PM | Permalink | Comments (0)

More so than ever before I find myself regularly using the abbreviation <abbr> and acronym <acronym> tags, and yet I have never really known which tag to use… until today. Hopefully this blog will inform other confused web designers out there the correct time to use each tag.

Since I design websites with accessibility issues in mind, I realise it is always a good idea to include either the abbreviation or acronym tag. These tags ensure people with screen reading software can interpret the web pages content correctly, and provide a useful way for others to find out what the letters actually stand for by hovering the mouse over the letters.

These are examples of abbreviations and accronyms. Hover your mouse over each example to find out what they stand for.

• HTTP


• USB


• UFO


• BBC


• NATO

Now which of the above are abbreviations and which are accronyms. Well they are all abbreviations other than the last example which is an acronym.

The Abbreviation and Acronym Rule

The rule is, if the letters are pronounced as a word it is an acronym, in our example we refer to the letters NATO as "NAYTO". If we pronounce the individual letters like BBC it is an abbreviation.

Posted by Dean at 03:43 PM | Permalink | Comments (0)

I am amazed at how many web design companies there are in Kent, they seem to be popping up all over the place. When I graduated from The Arts Institute in Bournemouth nearly six years ago, and I returned to Kent actively seeking employment within a web design company as a qualified graphic / web designer, I found it extremely difficult to find any position based in Kent. Now the Garden of England is absolutely saturated with web design companies, all you have to do is search for 'Web Design Kent' in a search engine and you can wade your way through over 14 million results.

I am not sure whether this glut in web design companies is a sign that Kent has become a popular area for web designers who have left web design fims in the big smoke and set up business in the Kent countryside, or more to do with locals, who have found that with the increase in web based technology and higher broadband speeds the need to move out of Kent is no longer a requirement. I expect it is a combination of the two factors which has resulted in the overwhelming amount of web design companies now based in Kent.

Whatever the causes, it is pretty evident that a web design company based in Kent, now has a lot of competition. When I started working in the design industry, I was fortunate enough to find employment with Spanner Software who are based in Broadstairs, Kent. As well as web design, Spanner Software offered domain name registration, web hosting and database design. At that time the majority of the companies we were working alongside were based in London, only a hand-full had their offices in Kent.

I remember thinking when I was offered a full time position at Spanner Software it was a miracle to find a web design firm so close to home. I was set on having to move to London or further a field to get a job as a web designer, simply because there were so few Kent based web design companies. If I was to have graduated today and had come back to Kent, I would not have the concerns I did back then, about trying to get my foot in the door of a local web design company, my concerns would be more about 'out of all these web design agencies which will be best to work for?'

My current role as Web Designer at White Gate Design has meant I have been able to further extend my web design skills, work alongside very talented designers and get to work in a picturesque Kent village near Folkestone.

Whether people have decided to move to Kent or have always been based here, one thing is for sure, Kent is a lovely place to be a web designer!

Posted by Dean at 03:03 PM | Permalink | Comments (0)

In my capacity as web designer at White Gate Design I have recently completed a long term web design project for The King's School, Canterbury. The project involved a complete redesign of the site to bring the project inline with the schools existing corporate identity and print material. The previous website was old, and had become time consuming to maintain. From the outset as well as a redesign of the website, it was decided that the school would benefit from a content management system to help the school manage the website's content.

The King's School project was my first website that used a content management system, although I have been involved in web design projects that use content management systems, this has always been an area others members of the team deal with. Normally my designs are used for the front end and the content management system is integrated into my designed templates. Whereas this project would mean I had a much more involved role in using the content management system after the templates were built.

At the beginning of the project I new there was a serious learning curve ahead of me, but now after completing the project, the knowledge I have gained will be invaluable for future projects. As it is predicted that content management driven websites will increase significantly over the next few years, these new skills will hopefully serve as a good foundation for the future.

The content management system used by the King's School website is provided by Edeptive™. Working alongside Andrew Bailey and Neil Perry from Edeptive to build the website was a real pleasure. The Edpetive™ content management system is so powerful, easy to use and the support throughout the project from Edeptive™ was first rate. As a result the new content management system will enable the schools non-technical staff to easily and efficiently manage their website, keeping content current, and of interest to pupils, teachers, parents and prospective visitors to the school.

The website utillises the Edeptive Gallery system and a sophisticated Calendar which uses the latest web technology to deliver a highly functional event diary. Microsoft Vista users are able to add a Kings Calendar Gadget to their desktop to easily keep up to date with forthcoming events.

For those of you who are not familiar with content management systems, let me enlighten you, a content management system, often abbreviated to (CMS) is a web application or software used for content management.

A content management system facilitates the organisation, control, and publication of a large number of documents and other content, such as images and multimedia resources. Content management systems are ideal when collaborative creation of documents is required. A web content management system is a content management system with additional features to ease the tasks required to publish web content to websites.

Web content management systems are usually used for storing, controlling and publishing specific documentation such as news articles, upcoming events, technical manuals, and marketing brochures.

Web content management systems are more than just a way of managing documents, a web content management system is a computer system used to manage and control a large, dynamic collection of web material (HTML documents and their associated images).

A web content management system provides the following key features:

Automated Templates
Standard page design templates that can be automatically applied to new and existing content.

Easily Editable Content
Having content separate from the visual presentation of your website, makes editing much easier and quicker. Most content management software include WYSIWYG editing tools allowing non-technical individuals to create and edit content.

Scalable Modules
Most content management systems have plug-ins or modules that can be easily installed to extend an existing website's functionality.

Web Standards Upgrades
Content management systems usually receive regular updates that include new features and keep the system up to current web standards.

Workflow Management
Workflow is the process of creating a system of sequential and parallel tasks that must be accomplished in the content management system. For example, a content author submits a news item, but it is not published on the website until the content editor cleans it up, and the editor-in-chief approves it.

Document Management
Content management systems provide a means of managing the life cycle of a piece of content, from initial creation time, through revisions, publication, archive, and document destruction.

Hopefully this explanation has given you a better understanding of what a content management system is, and what it could do for you or your organisation.

Posted by Dean at 09:49 AM | Permalink | Comments (0)

Two posts in the same day, and not a single post for about 6 months before hand!

I was puzzled to find that one of my clients was having a problem with a site I had been working on for them. The problem was they use a background image which is tiled across the browser window. If you visit www.stourvalley.com you will note there are a series of logos which have transparent backgrounds that sit over the top of the background image.

I achieved this effect by using PNG's. GIF's were not suitable because you either get jagged edges when using a transparent background, or have a halo of colour around the extremities of the image. PNG's do not do this, you get a clean edge and a transparent background. In all the browsers I had tested on, the PNG's worked fine. However Internet Explorer was proving to be a pain in the butt. It was rendering the PNG's with a horid blue background for some reason.

I looked into this problem and found out that there is a known issue with Internet Explorer when rendering PNG's. Fortunately there is a little bit of javascript you can use courtesy of Bob Osolar which corrects the problem.

Fortunately this PNG rendering issue has been fixed in Internet Explorer 7.

I hope that this information proves of help to someone in the future, it sure did for me.

Posted by Dean at 01:53 PM | Permalink

I have been working on a project where the client wants to display their entire homepage in the browser window. Now this is not normally a problem, I always design my sites to fit on screen resolutions of 800px x 600px maximised which gives me 760px by 420px to play with.

However this particular project has several important elements to the home page which must be present, and however I laid out these elements on the page I was unable to reach a solution which worked for the client.

The alternatives were drop some of the home page content or design the site to fit in a browser window for higher resolution screens. I wanted to find out 2 things which I found were not that easy to come by so I could advise my client whether designing for a higher resolution screen was an option.

The following screen resolution statistics are correct at the time I publish this entry, as time goes by you can expect these figures to change. Through my research I have found most users have screen resolutions set to 1024x768 and higher, but 17% still have 800x600. A very small number, roughly half a percent, still have 640x480.

544x372 (MSN-TV / NTSC):
There are about a million MSN-TV users, which equates to approximately .05% of page accesses. This figure is not likely to change in the near future but longer term changes depend on how people embrace such technology.

640x480:
People with this screen resolution accounts for ~0.5% of page accesses. Most users have older model computers. The number will quickly drop as these computers are superseded by newer models.

800x600:
This accounts for ~17% of page accesses. Some users have old computers, the rest likely have new PCs whose resolutions are set lower because many new PCs are sold using a lower screen resolution by default. It is predicted this percentage will decrease steadily as higher resolution displays become common place.

1024x768 and higher:
Today this screen resolution accounts for ~80% of page views. Most new computers have enough video memory to handle high resolution displays, but many are set to a lower resolution because the machines are shipped with a default lower resolution. The percentage of high resolution screens will continue to grow.

Now I new that ~80% of people viewing web pages had monitors which display at a higher resolution, I needed to know how much space I had to work with if the home page was designed to fit in a browser window when the screen resolution is set to 1024 x 768.

From my research I eventually found the following information. The first figure is the amount of space available to a designer; the second figure is the actual screen resolution setting. If you are wondering why not all the space is available to a designer is because you must allow for the space used by tool bars, scroll bars, status bars etc.

Screen resolution
536 x 196 (640 x 480, Default)
600 x 300 (640 x 480, Maximised)
760 x 420 (800 x 600, Maximised)
795 x 470 (832 x 624, Maximised)
955 x 600 (1024 x 768, Maximised)
544 x 378 Web TV

What I have learnt today is although the majority of users do use have a screen resolution set to 1024 x 768 you will be alienating a considerable amount of people if your site is designed for that resolution. As an alternative for this particular project I will be designing the home page to fit into 760 x 600. This will give me the depth to ensure all page elements sit elegantly on the page, and anyone with a lower resolution will still be able to view the site but just have to scroll down to view the full content.

The other alternative is to design your pages to be scalable, so rather than defining fixed width and height measurement you use percentages which allow your page to grow or contract to the available screen space. In this instance it is not an option for me as the site will be a fixed width of 760px.

I think at this point It is important to note that (1) the screen resolution of a user’s computer says little about the size of the browser window, not everyone will view your page with the browser window maximised, and (2) users can easily resize the browser window. Consequently no particular browser window size can ever be assumed.

Posted by Dean at 02:51 PM | Permalink

A couple of weeks ago I posted an entry in the My Thoughts part of my site asking if anyone could shine any light on how best to implement relative font sizes. I want to make my website accessible to as many people as possible and have taken several steps in doing this, but the relative font size issue just span me out every time I tackled it.

I read through lots of articles and threads on the internet about how important it is to use relative font sizes but all solutions seemed to be using different ways of getting the relative fonts to display correctly.

Well after a bit of experimenting and reading up I have found a solution which works for me. I have tested it in most modern browsers on both Mac and PC, and have not got any issues so far. I decided to use ems as my measurement of choice, as absolute-size keywords still seem to be unpredictable on some browsers I tested on. I believe this is because the different browsers have different values for these different font keywords. Obviously not a good method if consistency across browsers is desired.

You can't use percentages as these still compound in some browsers on nested items. There is possibly a work around as I know the % measurement is still relative to the browsers default font settings but the inheritance of styles causes fonts to be displayed smaller than you would anticipate. If there is a work around I will leave that for another day!

Through experimenting with font sizes I found that 1em is roughly equal to 12pt in size, 1.1em is roughly 13pt and each time you increment a font size by 0.1em it is the same as increasing the font size by 1pt.

Relative Font CSS

body {
/* Sets the base size of all fonts used in site */
/* Scale fonts so 1em ~= 12pt */
font-size: 75%;
line-height: 1.4em;
}

h1 {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-weight: bold;
}

h2 {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.7em;
font-weight: normal;
}
a {
color: #333;
}
a:hover {
color: #1094C2;
text-decoration: none;
}

Using the above CSS code in your style sheet should give you a solid foundation to begin creating your own styles which are accessible to those with visual impairment and will display consistently across different browsers.

If you do have any comments or questions just post it here and I will get back to you.

Posted by Dean at 05:15 PM | Permalink

I have been aware for years about the importance of scalable / relative units when defining fonts in your CSS. I have read numerous articles over the years but have never been able to locate a decent, easy to understand article which walks you through the whole process.

There are umpteen different /*HACKS*/ which I can not always make sense of what they are actually doing. Hiding it from one browser, inheriting style and so on. It all starts to make my head spin very quickly.

Do you use em, %, font keywords or picas? I have used percentages in previous projects but I always have to write CSS styles which compensate for the way the font gets smaller every time a style inherits the percentage of the text wrapped in another style.

I would really appreciate it if anyone who stumbles across this xx-small cry for help and has found a helpful article or book which deals with relative fonts could post a comment that will send me and any others out there on the path to relative font enlightenment.

Posted by Dean at 10:48 AM | Permalink