Standards based Web Design using Stylesheets to Work on all Web Enabled Devices
Our website designers have designed our website with web standards and accessibility in mind. We have broken away from using tables and have used cascading stylesheets (CSS) to create different layouts. This has effectively separated the content from the presentation to make our website more accessible, allow it to work on all web enabled devices and work more effectively in the search engines.
Reap the benefits of using Cascading Stylesheets (CSS) for presentation rather than Tables
- Lower website development and maintenance costs
- Future proof content - content is separate from the presentation so it is easily re-used elsewhere or when your website design is refreshed
- Better search engine performance for your website - the search engines can focus on your content rather than dig through all the presentation code
- Your website is accessible to all internet or web enabled devices (mobile phones, web TV, PDAs, palm computers, speech browsers and assistive technology for the disabled users, etc)
- Easily tailored for specific media devices where required - for example one stylesheet for screen presentation and another for printing purposes
- A faster downloading website - the code is far more efficient than table based website designs
Break away from the grid!
The traditional method of website design uses tables to layout and position content on a complex grid - most web sites are still designed this way. With the use of tables for laying out your web page you are restricting your design to a grid, that cannot be easily changed in the future without modifying the underlying html code. To demonstrate, we have provided extra stylesheets for this website to display how the appearance of a website can be easily changed instantly with a different stylesheet. Yet, none of the html for the content has been changed for any of the different presentations of our site.
Cascading Stylesheets (CSS) are no longer just for colouring and sizing fonts
Initially cascading stylesheets (CSS) were used to globally set the colour and size of fonts as this was their simplest and most obvious use but things have moved on significantly now all presentation and positioning of all the text and images on a web page can be defined within a cascading stylesheet (CSS). The result is that the html code now is much simple and focusses on the simple attibutes of the content (eg headings, paragraphs, bold, bullets and links) while the actual presentation is defined separately in the stylesheet. The code is therefore cleaner, faster and more readily accessible to all manner of interet enabled devices..
Stylesheets are not just limited to browsers either, you can change the layout of your web page for sending to the printer with a different stylesheet. Eliminating the need for printer friendly pages!
A stylesheet for printing is not the only media, with the growth of web tv, PDA/pocket pc's, mobile phones, different stylesheets can be used to tailor your website to these products.
With a table you can make your website work with all computer browsers, yet consistency is not guaranteed from browser to browser or computer to computer (pc to mac for example).
A table also makes accessibility of your website more difficult:
- A screen reader will have to work out how the flow of content should be read to the user
- A user of a PDA will be able to view the website as intended but will need to scroll left & right and up & down to view the content, due to the small screen the user will be using. Not a major problem but it would be hard work for the user
- Printing of table based web pages is troublesome resulting in the need for separate printer friendly pages
Cascading stylesheets will make the web site much more readable whatever internet device is viewing it. The structure of your website would be "back to basics", without styling the pages are still very readable yet with styling the pages look even better and they will render consistently between standards compliant browsers like Netscape 6, Mozilla, Opera, Safari and IE6. These browsers are available to Windows, Mac, and Linux/Unix.
What's the extra cost of designing my website using Stylesheets?
None, your website is likely to cost less to develop and certainly will cost far less to maintain. The reduced amount of html tags used on pages makes the content is easier to decipher. Therefore less work hours are needed to update content on a website. If you want to change the size of fonts, the background or completely change the look of the site; this can be done in a fraction of the time it would take to change a table-based design. A table is inflexible and it is more likely that the html will need to be restructured if the website needs a new appearance.
Not only will your website cost less to produce, the website is future proof. Your website can work for longer without major changes to the html. If after a couple years you decide the website needs a new look or is subjected to rebranding, but the content doesn't need updating, the cost is minimal. You are looking at changing one file instead of redeveloping the whole website.
There is a further significant benefit. With pared-down html which is easier to read, your website will perform better in search engines. Search engines will be able to find keywords better and improve the indexing of your website.
Give it a go, change the look of our site:
Regards
Kevin Payne - Website Designer
kevin@epsilis.co.uk
Epsilis - Website Designers
Business and Technology Centre
Bessemer Drive
Stevenage
Hertfordshire (Herts)
SG1 2DX
UK