Web Design Technical Specification
I do not use Dreamweaver, Frontpage, nor content management systems. The websites I create have a totally hand coded, concise and semantic structure, and every piece of code has a purpose. Text, images and flash components are carefully implemented to achieve W3C strict standards compliance, accessibility, optimal speed and performance. Javascript and PHP are kept to a useful minimum.
Better by Design
Layout / presentation
Layout and positioning are achieved using CSS in line with modern web design standards. The look of each site is tailored to customer preferences, company logo, styles and colours; everything is designed by myself - third party templates are not used.
As with this website, I use a combination of fixed and fluid layout so the whole site efficiently stretches to a coherent maximum width on larger screens whilst maintaining a workable, scrolling minimum width for smaller screens and lower resolutions. Important features, such as navigation, are always in view while the visitor scrolls through the content.
Screen sizes and aspect ratios now vary from that of a small net-book to very large flat-screen monitors. A website that stretches and shrinks to complement more resolution settings will look more modern and cohesive; it will also be easier to use. Other websites are often designed for just one size resulting in more scrolling and wasted browser space.
Coding: what's under the surface?
The sites I design comprise of hand coded external style sheets, standards compliant HTML and correctly implemented text, images and flash displays. All HTML and CSS code is validated and certified for W3C standards compliance to HTML 4.01 strict.
What does it mean?...and why is this better?
What this means, in practical terms, is that your website will load faster and more reliably, will be easier for search engines to index, and will look and read as it should on everyone's computer (across different browsers and operating systems). Also, updating and making presentational changes to you website will be far easier and quicker (hence less expensive) than they would have been had old fashioned web design practices been used.
Optimised accessibility
People with visual impairment can easily resize text in their browsers, and those with little or no vision can use screen readers, or braille output devices to read content in a semantic and orderly sequence without being hampered by non-compliant code, formatting tags, or old fashioned nested table based layouts. For similar reasons, DHTML, flash menus, dynamic transitions and data derived pages do not feature in the sites I design: only properly coded HTML, CSS, optimised images and mindful use of flash presentations.
Additional Features
The following features can be added to your website:
Animated Flash
Animated flash is a great way to display text, graphics and images in a small area. There's only so much room in a browser window and an animated display (such as at the one at the top left of this page) can make efficient use of it whilst catching readers' attention, being impressive and informative.
Flash displays are implemented using swfobject.js - an open-source method for embedding flash using javascript and retaining strict standards compliance .
Static text and images can be coded beneath the flash for accessibility of those using screen readers, braille output devices, or are otherwise without a flash player for whatever reason. Also, as search engines don't generally read flash easily, this text will serve a similar purpose as the "alternate text" of images, allowing the content to be properly indexed.
Flash Photo Slideshow
A flash photo slideshow is an excellent way to display all your favourite images coherently and efficiently without having to scroll and navigate. The slideshow can have a number of albums which are accessed from its menu. Each image within an album can carry a caption that is displayed when the visitor mouses over the display; they can also be hyperlinked to a separate page.
The flash itself is embedded using the same javascript method described above and has the same compliance and accessibility benefits. An example of the flash photo slideshow can be seen at the index page of the Digital Photography Enthusiast website.
Contact Form
A contact form can be a useful addition to your site if you require visitors' enquiries. Not every visitor to your site has proper access to email, and you might not want your email address published on you site for spammers to harvest.
The form will send you all the information the visitor has completed, via email, including any file attachments; however, your email address is not directly accessible as it is nicely hidden away in the PHP code. You can, of course, display your email address with a mailto tag for those people, such as myself, who prefer to use a proper email client.
The contact form can either be written in HTML and styled via the external style sheet, or as a flash embed with associated XML and PHP files. Both methods require PHP on the hosting server; if you already have a hosting service, I will be able to advise if you have the necessary requirements.
