Web-page Layout


Why valid HTML and CSS are useful versatile tools and not to be feared

One of the things writers often ask when setting up a website is about the layout – coming from print design backgrounds generally they want everything rigidly laid out in certain colours, spacings, fonts and sizes. And this is where the shock lays – the internet doesn’t work like that.

Most of them start having panic attacks at this point but they shouldn’t, and this is why. Everybody has a different computer set up – some people use big screens others small, some use e-readers and some use phones.

Some people use speech synthesis to navigate sites or need to have certain coloured backgrounds and text to be able to read, they need things to appear in different sizes.

Then there is the thorny problem of which operating system they are using and which web-broswer – Windows, Mac OS, Linux, NetBSD etc… each one of these displays the websites slightly differently.

And this is why CSS, HTML and some useful stuff like PHP is designed the way it is. CSS stands for Cascading Style Sheets and is the most useful thing ever – combined with HTML it means that you can format your page – you can have headers in different sizes – eg, title, sub-title, name. You can designate a preferred font and then if the viewer is on a system that can’t show that font you can put in second and third choices. You can request colours and sizes, and unless the viewer has overridden the colours for some reason, you’ll get that colour. You can request the size of the text relative to the viewer’s preferred normal text size; if they need large text as they are partially sighted, then they will still see your headings as being larger than the body text.

Your site will work on all these different platforms, with all those different size screens being used by all those different people – in other words, your work will be accessible.

You use HTML tags within your writing/article to get the styles to show and everybody’s happy.

Writers are asking me how they can make their writing look nicer on the web – the answer is CSS and if you haven’t got time to learn the intricacies then get someone in. If you are using a blog that supports it you can use a simpler notation than HTML known as Markdown to change sizes of text and mark paragraph boundaries etc…

It is tempting to force control of text styling by placing an image of text on your site. This is often unavoidable for things like corporate logos, but for the main text of a site, it’s unacceptable. Imagine a blind person reading your site with a speech synthesiser; their software can’t read out text that’s in an image.

Just knowing a few of the tags would help you greatly in having a more aesthetic appeal, even if it is not universal – after all a blind person isn’t going to care if your title’s pink or blue. For the visually non-impaired a header image might read My Wonderful Site in lovely swirly text but for those with screenreaders it would just say “unknown image” unless you hide a text version in the HTML using an ‘alt attribute’, but that’s not suitable for anything more than a few words.

This isn’t just a matter of getting your stuff out there accessible and looking pretty; it is also about the discrimination laws. And though no one has yet been taken to court over it – when there is stuff in place to make websites accessible it seems folly not use it.

And don’t be scared of CSS and HTML if you don’t know them there are plenty of forums and help guides out there for you to peruse.

And another good thing about CSS is that you can put stuff into the ‘skeleton’ of your site that only things like google see – so you end up in the right place in search queries. It will also help indexing sites list you, which if you’re looking for lots of visitors can’t be a bad thing.

Web-Empire’s Blog is proudly powered by WordPress and themed by Web-Empire based on work byMukka-mu