Basics of Web Layouts

Web Layouts Should be Simple and Clear

Most designers tent to overlook the design layout when creating web designs.  They will work on how to do a layout (CSS, tables, frames, etc.), but often ignore the basics of Web layout completely. 

Space and Whitespace

Use the entire space, but don’t be specific in your use i.e. use relatively sized layout sections, so they can expand and contract to fit browser windows. Keep screen resolution must be kept in mind.  A majority of computer users have moved away from 640 x 480 resolution, which must be born in mind when designing.  Customers leaving because all they can see is a logo on their monitor, does not amount to good customer service. Make use of colour to define spaces.  If, you need a page of a specific width, centre it on the browser screen and give a different colour to the background page.  This helps the page resize for different browsers.  Large browsers show more background colour, while smaller browsers show less or no colour. 

Images and Graphics

Make sure all your images are perfectly aligned. Don’t make the common mistake of slapping images willy-nilly on to a web page, without thinking out its layout.  Using an image tag and then writing text to follow it, results in a image with one line of text to the right of it.  Use the align attribute to help make your images part of the layout. Balance graphics and text on a page.  Don’t get carried away and use lots of images and animations, as they will only serve to make the page hard to read.  While, planning out your layout, remember images are a major part of the design, not just afterthoughts. 

Text Width

Give adequate thought to text width, which often referred to as scan length, refers to how many words are displayed on one line.  Seven to eleven words on a line can be read comfortably by most people.  Longer than that, and the text gets hard to read, shorter than that and it looks disjointed and distracts.  When designing web layouts, ensure the major text area displays the text in a readable width. The first layout technique a new designer learns is the centre tag, which means they centre everything on their pages.  But, centring text is inadvisable, as it is difficult to do and often hard to read.

XHTML – Part III

We take up from where we left off in XHTML – II.  In this section we will look at XHTML relating to text, covering:

• Headings with <h1> through to <h6>,
• Subscripts and Superscripts with <sub> and <sup>,
• Line breaks with <br>,
• Non-breaking space with
• Soft Hyphens with ­ and
• Pre-formatted text with <pre>.

 It is important to remember that all elements should be used for their meaning and not their visual effect.  This will make your site much more accessible to disabled users and those who are using alternative browsers, such as, Personal Digital Assistants and in-car browsers.

Headings with <h1> through to <h6>

Long documents need to be split up into sections to be usable.  To mark headings in your XHTML there are six elements, each relating to deeper levels of sub-headings as the number goes up.  The six elements are:

•  <h1>,
• <h2>,
• <h3>,
• <h4>,
• <h5> and
• <h6>. 

Always start with <h1>, followed by <h2> for sub-headings, <h3> for sub-sub-headings, and so on.  If, you start with <h1> don’t go straight to <h3>, or start with <h2>.

Earlier, web designers did start with <h2> or <h3> to get a visual effect of smaller text which <h1> did not offer but, as already mentioned this can be achieved with style sheets.  So, it is not a valid reason for starting your headings with anything other than <h1>.

Headings are block level elements with space above and below them.  Using heading elements to mark headings ensures users understand your document structure.  Including helping get higher search engine rankings, as search engines understand better what the document is about by examining the headings.

Take a look below at a sample three level document.  From it, you an work out what a document with deeper levels would look like.

<h1><b>XHTML Web Design for Beginners: Introduction</b></h1>

<h2>Introduction</h2>

<p>This article is for readers who have either no prior experience...</p>

<h3>Colour</h3>

<p>I have used colour in the example...</p>

<h3>No Programs</h3>

<p>I will not be showing you how...</p> 

Generally, most XHTML documents should have only a single <h1> element.  Don’t use more than one unless you are sure they are two separate topics and there is good reason to have them on the same page.  If, two topics are on the same page, it means they are connected.  You should have a single <h1> describing both topics and then <h2> for each sub-topic.

Subscripts and Superscripts with <sub> and <sup>

Subscripts are letters or digits which appear smaller and at the bottom of the line e.g. 2 in H₂O.  Superscripts are again smaller and appear at the top e.g. th in 15^th February. To mark subscripts and superscripts in XHTML, <sub> and <sup> elements are used.  For example:

<p>The symbol for water is H_20.</p><p>

This example was written on the 13^th of February.</p> 

Line Breaks with <br>

When writing documents, if you wish to indicate that a new line should be started without closing a paragraph, use the <br> element.  <br> is an empty element so the empty element syntax must be used by writing it as <br />.  For example:

<p>The Road goes ever on and on<br />            

 Down from the door where it began.<br /> 

Now far ahead the Road has gone,<br /></p> 

This is an element that has no effect outside visual browsers.

Non-breaking space with &nbsp;

Web browsers sometimes split a set of words onto two lines, which you may not want.  Using the entity reference  , which stands for non-breaking space can solve the problem.

If you insert a   between your words instead of a space, with no spaces on either side, that text will be treated as a single line without being broken up.  Here’s an example:

<p>This is a solid line.</p>

Soft Hyphens with &shy;

­Soft Hyphens indicate a point in a word where you would like it to be split on to two lines.  It makes for a nicer appearance when space is limited, as text in a thin column. To use it, simply insert it in the word at the point where you would like the potential split to be.  For example:

<p>I have no idea what antidisestablishment­arianism means.</p>

Pre-formatted text with <pre>

Remember when we covered white space in the last section and I told you that it is always collapsed into a single space? Well there’s one exception, the <pre> element allows you to layout your text in the same way you want it to appear in a visual user agent. <pre> is a block level element which to remind you means that it has space above it and below it.Using <pre> is simple, let’s redo the example we did with <br> above using <pre> instead:

<pre>The Road goes ever on and onDown from the door where it began.<pre>

 Summary

That’s it for text elements.  What is left is three different types of lists i.e. ordered lists, unordered lists and definition lists.  As well, adding graphics to your pages and how you link your documents together and to other documents/sites remains to be looked at. 

XHTML – Part II

We take up from where we left off in XHTML – I.

Advanced XHTML Building Blocks

Before looking at any more elements there are a few more basic XHTML building blocks we need to cover for a better grasp of the subject.  You must have a good understanding of elements, start tags, end tags, the basic structure of an XHTML document and text elements. In XHTML – II we look at the topics listed below:

•  
  • Character References and Entity References,
  • White Space and
  • Comments.  

Character References and Entity References

Not as scary as they sound, character references exist for a reason which we need to find out about before we look at how to code and use them.As well, you know, not every keyboard allows you to type a copyright symbol © or an inverted exclamation mark ¡, right off the bat.  Or, imagine you as a Web browser (User Agent) reading a Web page file have come across a left angle bracket <.  How will you find out whether it is the start of a tag or an angle bracket used in the content of the document?  Answer, it is difficult for you to know, however the solution to both these problems lie in the title of this section i.e. character and entity references.

Entity and character references being extremely similar in XHTML are often the cause of confusion.  Basically, people end up telling Web browser (User Agent) to insert a certain character in their place.

If, you don’t know what a character is, it’s a catch all word for a letter, number, punctuation mark etc.  A is one character, AB is two characters, and counting the space in between, N!P 3 is five characters.  Get the idea!  A character or entity reference represent one character in XHTML, though entity references can represent more than one character in SGML or XML, which is a different story, we don’t need to worry about right now.

The difference between a character and an entity reference is that character references use numbers while entity references use names.  Let’s look at the copyright symbol we saw above.  To insert a copyright symbol into a document, we would use either of the following:

•  &copy;  ©
•   ©
  

  ·         Try the © character reference

  ·         Try the © character reference

 If, you try the examples above, you will see a copyright symbol for both examples.  As stated before, the entity reference uses names (copy), the character reference uses numbers (169).  And, observant readers will notice that character reference also has a sharp symbol #.  Take a closer look.An entity reference begins with an ampersand.  This is then followed by the name of the entity reference, which is followed by a semi-colon, much in the same way that you use a left angle bracket and right angles bracket to denote (delimit) the start and finish of a tag. Character references begin with an ampersand followed by a sharp symbol.  This is then followed by the number of the character reference, which is again followed by a semi-colon.  Whether, you use an entity reference or a character reference is up to you.

 Ampersands and Left Angle Brackets

Although it is possible to enter ampersands & and left angle brackets < with most keyboards, always use an entity or character reference when they appear in your content.  This is as mentioned before, there is no way for a computer to know the difference between the start of an entity / character reference or a tag from an ampersand or a left angle bracket respectively.  Using character or entity references for those characters avoids this problem.The following code contains an ampersand and a left angle bracket:

·         <p>Never use a < or an & directly in your content.</p>

The above code is wrong and should be written in one of the two following ways, firstly with entity references and then with character references:

•  
  •  <p>Never use a < or an & directly in your content.</p>. 
  • <p>Never use a < or an & directly in your content.</p>.  

White Space

White space means any characters in your document that do not serve any purpose other than creating space.  This includes spaces, tabs, line breaks and zero width spaces.  A line break is the character (or 2) at the end of each line that tells the computer to start a new line.  A zero width space is used to separate words in languages such as Thai.  There are two issues relating to white space that you need to be aware of:

White Space Between Words

No matter how much space you use between your words, Web browsers (User Agents) will always reduce it to a single space character.  By words I mean any characters that are not white space and have no white space between them.That might sound a bit complicated, but it’s not, it just sounds complicated when you try to describe it. 

If you view the above example in a visual Web browser (User Agent) you will see that all of the content is on a single line with a single space between each word.  That’s all there is to it.  This feature comes in handy, it means that you can use tabs, spaces and new lines to make your code easier to read and not worry about your document looking funny in a visual Web browser (user agent).

Space Around Tags

Be careful about putting white space around tags until you get used to this rule.  If you want a space before or after a word that is contained by an element you should put that space outside the element or before the start tag and after the end tag.  If you put it inside you might not get any white space between your words.  <p>Always leave white space <strong>outside</strong> your elements when you want it and not<strong> inside </strong>.</p> In the example above the strong element containing the word outside has white space outside the tags, which is the way it should be.  The strong element containing the word inside has white space inside the tags and not outside.  On some Web browsers (User Agents) there may not be any space displayed between the words not and inside.

Comments

When creating documents, you may want to leave information for yourself or for others viewing the document code but not in a Web browser (User Agent).  To do so, use what we call a comment.  A comment has the following syntax: You should be careful not to use two dashes together within your comments as this could be thought to be the end of the comment (even without the right angle bracket).  Here’s an example:

·         <!– This is the first Web page I ever created. –>·         <p>My first Web page.</p>·         <!– This is a comment·         spread over two lines. –>

As you will see if you view the above example, the text in the comments is ignored.  Comments are useful for leaving yourself reminders for later such as what still needs to be done to a document.

Summary

And, so we complete a look at the basic building blocks of XHTML and have seen how to use special characters in our pages with character references and entity references, how white space is handled and how to add comments to your code. What is left is coverage of elements relating to text including, amongst others, headings, line breaks and pre-formatted text, which we will cover in XHTML – III.

XHTML – Part I

Introduction

 If, you have no prior experience of Web Design or very little, then this article is for and read on. If, you have tried exporting HTML from Microsoft Word, or played around with FrontPage a little, then this article will help you understand what you have been doing. Understand what XHTML is and how you can start producing the next generation of Web pages.

Don’t use programmes to write code, get your hands dirty and write it yourself as programmes that produce HTML for you, often produce Web pages that go the long way round doing things. Coding pages by hand gives you an an intimate understanding of what you are doing. And, you can actually make the Web page file as small as you like. This reduces download times making your pages quicker to upload and your users far happier.

Using programmes to generate HTML, gives you no understanding of how your page is built internally, since its all doen for you. You can hardly call this a problems is everything works, but what if it doesn’t? If, you find your Web page doesn’t display properly in Internet Explorer 4, and many of your users use that browser, you will need to sort it out. Which means ditching the programme and looking at the code yourself. Problems will occur and it is far better to understand how to fix them than get stuck without a clue.

The Internet is no longer limited to people with computers viewing web sites through one or two different Web browsers. These days, everything has a Web browser from mobile phones, televisions, personal digital assistants, cars, even fridges. Blind users ‘view’ web sites using speech synthesis or Braille devices. There is no way you can test each page you produce in all of the possible ways it may be used. But, there is a way to give you the best chance that they will work. This is achieved through producing pages using the standards laid out by the World Wide Web Consortium (W3C), the people who work on XHTML and other Internet standards. Once you have produced your pages the W3C provide a validation service to check that your page meets the standards and therefore has the best chance of being used on any device. There are no HTML generation programmes that produce valid code.

Why XHTML?

 Since 1990, HTML or Hyper Text Markup Language has been successfully used as the language recommended for writing Web pages. However, HTML has its fair share of problems. Without going into specifics, HTML has become a mess. To sort this mess out the World Wide Web Consortium, the standards body for the Web, came up with XHTML in 1999. XHTML stands for eXtensible Hyper Text Markup Language and is written in a language called XML or eXtensible Markup Language.

As the name implies XHTML has the capability of being extended. You can use extra modules to do things with your pages that weren’t possible with HTML. The long-term goal is that your Web pages will be able to be understood by computers as well as humans.

You may be thinking that computers already understand Web pages because you use a computer to view them. This is true. But, computers only understand how to display your pages, not what they mean. Imagine if computers understood what they meant, you could tell your computer to go and visit all of your local supermarket’s Web sites and tell you which one is the cheapest for this weeks shopping. Your computer could visit the news sites around the world and bring back the latest headlines that relate to things you are interested in. The possibilities are endless.

Now, you see why XHTML is important. Since, there is no beginner’s XHTML tutorial, we’ll do it from scratch as it seems logical that if you are starting learning Web Design now, then you might as well use XHTML from the word go. So if you’re still with me, we’ll go from here to XHTML – Part II.

Creating The Perfect Web Page

WEB PAGE

Page Title

Every time a page is bookmarked, the page title appears along the top of the page.  This is why the page title of a perfect web page should be able to capture the essence of the page content in just a few brief words.  Saying it all, it should be both informative and descriptive, as well.

Content

The page content should compel and hold the interest of people searching for or chancing upon it.  People visit web sites to gather information; a web page that doesn’t give them what they want, will not see them coming back.

Page Length

Your page length should only be decided upon after checking how it will look on most browsers.  It should not be too long as people will not scroll to read it, neither should it be too short, as insufficient information will not keep them on your page. 

IMAGES

Image Size

Keep images smaller than but no bigger than 12Kb.  For larger images, use a thumbnail (a smaller version of the image resized by a paint programme and not the browser), readers can download in case they wish to.

Image Links

Image links should be clear links and not a bad idea at all to have image maps with text links elsewhere on the page.

Image Quality

Defer from adding images to a web page because you like them.  Images should be relevant to the page content, serve a purpose and lend to the message the page is trying to convey.

Image HTML

Besides, the image tag should have all the necessary HTML, including width, height and alt text. 

LINKS

Link Text

Mostly, the problem with web navigation is that people don’t know where they are going.  So, instead of using dull ‘Click Here’, try linking to a more descriptive text.

Link Annotations

Provide a description for your links.  If, it is good enough to be linked, it should merit an explanation, as well.

Link Quality

All your links should go to active pages, even if it means spending time every week making sure links work. 

GENERAL ISSUES

Feedback

If, you haven’t provided a feedback form on your web page, do so immediately.  Hiding your identity only makes your site look fake, while spammers will be able to find you with or without it.  Besides, feedback from your readers will only help you improve on it to make it better.

Last Updated

Update your page frequently indicating when it has been updated.  This will help readers determine whether a visit to your site is going to reveal something new on each visit.

Valid HTML

Ensure your HTML meets the standards.  It is vital to use not only HTML standard tags, but correct HTML, as well.  Browser specific tags should only be used after adjusting for differences on different platforms.

Correct Spelling and Grammar

Last but not least, a spell check should be done for spelling and grammatical mistakes.  They should be fixed immediately as simple typos can destroy the credibility of an otherwise wonderful page.  

Affordable Web Designs

Designing an affordable web page that looks completely professional is not so tough, if only one keeps a few important key points in mind.  For example, simple but eye-catching graphics, an easy to manouevre round web page layout, easy to read font style will ensure that your web page design is a total sell-out.

Always keep graphics small, no more than 10-12 KB per image.  This is as pages with larger graphics are annoying slow to upload / download.  And, of course, ensure that your graphics are relevant to site content and there because it caught your fancy.

Oh, and forget the pop-ups, the blinking, moving, changing, rotating or flashing images.  If, they can’t be done without, then use them sparingly, as distractions of this sort are the reason a person leaves a page, without reading it.

Stick with standard page layouts, an easy up and down scroll, not a scroll all the way to the right or those that don’t allow one to scroll down.  Keep the layout simple and think in terms of popular newspaper style two or three column layouts.  Boring to design, but popular nonetheless with those who read them.

Don’t forget to keep some whitespace or the effect it has on how a web page content is viewed.

Use graphics as important elements of a web page layout, allow text to wrap round the image, an indication that it is essential to the layout of your web page.

Keep in mind that certain fonts are easier to read on computer monitors, while others strain the eye.  Try out a few fonts before deciding on one for the computer friendly web page you are designing.  Also, font consistency is as important as style, so forget switching from one font style to another.  Stick to one or two styles for an effortlessly, polished and professional look, standard font families like Arial, Helvetica, Verdana, Geneva, etc.  Boring though they may seem, your web pages and designs will look better on most browsers.

Forget a clutter of advertisements galore, even if they bring in extra money.  People visit your website with a purpose in mind and not for the ads that are all over it.  Like graphics, limit the advertisements, keep them small, avoid blinks and flashes, keep them relevant.

Finally, when your web page is ready to go, test the pages on multiple browsers, so as to avoid people facing problems when viewing the pages.  That goes for operating systems, as well.  One should not assume that just because your page works in Internet Explorer 5.0 for Windows, it will work in Internet Explorer 5.0 for Macintosh too.

Write content for people, cover topics readers are interested in, don’t write for yourself! Once done, you will find that by keeping everything simple, you have not only designed a professional looking web page, you have designed an affordable one without breaking the bank!

Simplicity also spells affordability!

Web Design Basics

Designing a professional web page is all about simple but eye-catching graphics, web page layouts, fonts used and, of course, advertising.  So, before designing a web page, remember web designing basics require the following to be kept in mind.

Graphics

1. Keep in mind, when using graphics, always think small e.g. images that don’t take up more than 10-12 KB per image.  As broadband user numbers go up, utilization of larger images can result in the truly annoying slow uploading / downloading of pages.  Best really to optimize your images.
2.  And, it always is a good idea to use graphics relevant to content.  No point using adorable baby pictures, when you are really designing an online dating site.  You just might scare all those potential dates away.  The only exception is for photos or graphics, which are not intended to illustrate content, but rather help in making up the page design.
3. Blinking, moving, changing, rotating or flashing images must be used sparingly.  Annoying distracting, they could result in people not reading the rest of your page.

Next, we come to web page layouts:

1. Sticking with standard layouts is far, far the best thing to do.  Forget all about 6 to 8 frames per page, layouts that require scrolling all the way to the right in order to read everything on the page, or layouts that won’t allow you to scroll down.  These might seem fun to build, but ask those who have to read the page.   They’ll confirm it drives them absolutely batty.  Now, you know why three column layouts are so popular on websites and newspapers!  They work and while you may think it boring to design a simple web page, readers prefer simple and anything they can understand.
2. Similarly, you should be aware of whitespace on your pages and its effect on how content is viewed.  Remember whitespace is just as important in web layouts, as in paper ones.
3. A good web designer will use graphics as elements in his layouts, since they prove to be more than just graphics, when used in this manner.  Take for example, wrapping text round an image shows that the image is a layout element and to be treated as such.

 Fonts

1. Research shows that Serif for headlines and Sans-Serif for text are easier to read on computer monitors, since screen resolutions are not as high as in print.  Serif fonts should not be used for normal text, as they have a tendency to blur together on screen, making them hard to read.  And, remember best use the reverse i.e. opposite fonts – serif for headlines and sans-serif for text for computer friendly pages.
2. Be consistent in font usage, as a website looks amateurish if the font is changed again and again.  Limit your web site to two or possibly three, easy to read standard font families for a polished, more professional look.
3. Stick to standard font families like Arial, Helvetica, Verdana, Geneva, and boring though they may seem, your web pages and designs will look better on more browsers.

 Advertising

1. While, it is important to make money, you could lose more by messing up your web pages with advertisements galore.  People come to your web site with a purpose and if they don’t quickly find what they are looking for, they will not stick around long enough to read anything, no matter how pertinent, if they have to sift through layers of advertisements to get to what they want.
2.  Just like graphics, limit the number of advertisements, keep them small, avoid blinks and flashes, keep them relevant.  It is not essential to have advertisements on your site, however, if readers find the content relevant, it is more likely they will click on an advertisement.

To top it up, remember to keep your readers in mind when writing web pages.

Test your pages on multiple browsers, not just for the most modern browser, unless you are designing a web site for corporate intranets, where the browser versions are completely fixed.  It is more than possible other people may have problems viewing your pages.

That goes for operating systems, as well.  Don’t assume that just because your page works in Internet Explorer 5.0 for Windows, it will work in Internet Explorer 5.0 for Macintosh too.

Write content for people, cover topics readers are interested in, don’t write for yourself!

Keeping the above basics in mind allows successful, offshore firms like Net Solutions, Banner Architects and Siterack to have quick turnaround times, when designing and developing websites for clients.  Do as they do to achieve the same success rate in the field of web design and development!