WebStandrds.com

One of my friends, a web designer by the way, has recently come up with the following statement: “A Web design is more than what meets the eye, the ultimate purpose of a design is in the efficient communication of the ideas behind it. After all, It is all about the communication” I thought, it is great to be able  to express ourselves  through our projects, not only graphically but also using appropriate words. Yet, are graphic designers capable of  doing so?, they aren’t professional writers after all.

Meet the heart of your design

While many of your clients may say “Come up with your design first, then we will fill it up with some  content” this attitude may prove wrong in the long distance. Since designing should be about communicating ideas and becoming the creator of experiences, a web designer should stop perceiving himself just  as a pixel designer. If you want to be noticed in the industry there is not better way then to create your unique style. But if you strive for becoming a successful web designer don’t just design it but learn how to write it well.

At this point you may ask the question, “what does it take to write well?” The answer is: “Build  communicative pages that crate positive user experience”. It is true that  a webpage  design should fulfill its primary function. If we build an educational page - let it be clear, concise and informative within its content and structure.  When treating lighter topics like  entertainment, on the other hand - you should make it possibly friendly and fun. In both cases always consider user’s feelings.

A brilliant example of a site with well recognized positive atmosphere is Flicker. This positive experience isn’t triggered by uploading and tagging, nor by black text on a white background. Photographs themselves surely bring in positive user experience but I cant hear anybody talking about how much fun Ofoto is. The point is that it is all about writing. Just have a look at their writing style. Flicker’s old fashioned way - “Salut, Hola, Shalom!” - generates friendliness. Whateher you do, either upload a photo, or submit the related text welcomes you in its happy and encuraging manner. This is the way to impress your visitors positively.

Some other example that I can think of is a weekly newsletter photojojo.com. They work twice as much to boost  users’ experience. You can came across  phrases like: “Dude, you rule.” once you have clicked on a confirmation mail or “No spam what-so-ever”, “Yippee” instead of “Submit” - they all build nothing but home-like atmosphere making you want come back more frequently. Since web is not only about getting new visitors but keeping the old ones too,  think how crucial
your writing style is.

It is the text and message it passes on the visitors that lie  in the very heart of your design. However well picked colors or graphics (elements which designers are frequently  concerned with) they cannot replace or complement what misses
in the text section. Design wisely; make your text a mixture of keywords that are important from the marketing point of view but also make it possibly appealing to the reader.

Do you hire a designer?

You may not be into the world of designing and may want to  hire a designer. The strength of websites is in their interface and its ability to communicate. Ask you designer about every single aspect of the site like titles, navigation buttons, headers and his general word choice. Never leave such decisions for designers only, become an active owner of the site. If it takes additional classes or online research, do it to raise your awareness in this respect. Yet, one of the best solutions is finding a designer who can think beyond some graphical schemes and see your site the way user does.

Though the jargon of Semantic Code may appear confusing, behind the concept there is an encouragement to write a kind of code that is simply descriptive. It means that you are encouraged to write code but in a proper manner. There is conformity between elements such as titles, and paragraphs that we should stick to if we want to omit confusion on the computers/browsers part.

Obviously to make your title big you can use font of this size:

<font size=”6″>The title of your article</font>

but to actually make your computer understand it as a title,  you should rather come up with:

<h1>The title of your article</h1>

Generally, try to stick to p for paragraphs of text, heading tags h1-h6 for titles. There is no need for you to use excessive div tags or  endless classes of redundant styling. Surely it all can validate, but to be truly web compatible and accessible don’t overdo. Think rather wisely and make your code lightweight.

Semantically written code is important for the following reasons:

- it enables the computer to recognize and render code properly for impaired people that depend on speech browsers,
- to get ranked properly search engines need to recognize the content,
- generally semantic code is shorter, thus download time is shorter,
- one can easily alter the look of a page because semantic code does not contain design elements, it is all CSS that define  what that content looks like,
- you can apply changes to the whole site swiftly instead of just on a single page, thus semantic code makes your updates nice and short.

If you are in charge of providing  content and are not into the world of designing, ask your web designer if he codes semantically. If he waffles and gives you silly answers maybe its time to hire a new one.

The great thing about Web Standards is the fact that they allow a web designer  to create web sites that can work/display  in a similar way regardless of a platform used, thus to achieve so called browser conformity. It so unluckily happens that the current browsers may read the standards in their own way. So while creating a web page is one thing, making it  look similarly in different web browsers may be a somewhat troublesome task to achieve. This small guide is to help  rookie web designers to keep the conformity problems to the minimum.

Reducing inconsistencies between browsers

What is the main cause that browsers treat web content differently are various default settings related to various HTML tags. These tags are: headings (h1—h6), paragraphs (p) and lists (ol, ul, dl), - default values for all of them are set slightly differently. A way to avoid problems is to first reset the values and then adjust as you wish them to be. By doing this you ensure that all of the browsers possess the very same values. Tip: It comes in handy to create a so called reset stylesheet and use it consistently. With the reset stylesheet you should start every website If you want to avoid some of the common browser bugs. Example of a reset stylesheet.

Using proper Doctype

If you think of creating a valid web page, one of the things you start with is defining a proper Doctype - Document Type Declarations. The aim of such defining is telling  web browsers which language specification, established and defeloped by W3C (The World Wide Web Consortium), your document will use. It will enable the content of your page to be  parsed and validated correctly. Without defining the proper Doctype you can be sure to find anything but problems across the browsers. Widely used Doctypes are: HTML 4.01 Strict, XHTML 1.0 Transitional or XHTML 1.0 Strict. The difference between the doctypes can be found on W3C site. If you use HTML 4.01 but intend to switch your doctype to XHTML 1.0 Strict , for example, it is recomended to read what aspects of the above languages differ. One more thing important to remember is that no element should be placed before a doctype declaration.  Although, like everywhere there is also an exception to this rule.  It is the XML declaration for the XHTML doctype.

<?xml version="1.0" encoding="UTF-8"?>

It is regular part of XHTML documents as they are based on XML.  Unluckily, this doesn’t prevent EI  from crashing anyways.  Generally, to avoid the problem of browser inconsistency try not to use the XML declaration, though the following piece of code should be included:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Problems with IE?, welcome to the world of designing!

While your design may look fine in browsers like Firfox, Opera or Safari one of the things that generates big headaches for great number of webdesigners is conformity with Internet Explorer. Unluckily has been estimated that nowadays plenty of internet users, if not a half at least, take advantage of IE on daily basis. Thus excluding the desired presentation of your web page under this browser from your designing plans, is not recommended.

It is a fact that when it comes to rendering  IE is the quirkiest of all the forementioned web browsers making the task of proper positioning so very frustrating to so many unsuspecting coders. I will try to develop the topic in some of my other posts.

If we consider other main browser like Firfox, Opera or Safari there is rather good consistency across them. They there are few variations and bugs between them if we compare their latest versions.  For the purpose of testing your project under different  browser it is advisable to simply download their recent, and perhaps some older versions of web browsers.

If you come across a bug in IE because your site simply breaks there is always a way to fix it. I suggest you employ the required tweak/hack  in order to fix it. As far as testing under IE is concerned, also download its older versions. You can check the all on on the same machine which is easy and proves useful.

Logical coding - writing Semantic Code

Putting it short, by writing Semantic Code I mean a kind of code that is well recognized by web browsers and your computer. Going further on, coding semanticaly translates into the code that is proper and descriptive. This requires using specific symbols like p for paragraphs of text, heading tags h1-h6 for titles. What you achieve are benefits like getting ranked in search engines properly, reducing loading times of web pages, introducing quick changes to the whole structure of your site, and ,what is important, helping impaired people that rely on speech browsers.

Before you publish your document you may be interested to take advantage of this useful tool -   Semantic Data Extractor . As it checks your document and you can see most of your mistakes in order to correct them.

When starting their design adventure, a lot of people find it difficult to comprehend and put in practice the concept of CSS (Cascading Style Sheets). In short, without the knowledge on how to use CSS,  you will not be able to control the layout of your web pages properly, exactly the way you want it to be. If you are the one read further on. This article tries to explain the relevant matters related to CSS positioning.

Types of positioning

Nowadays we can name 4 types of CSS positioning that one can apply to HTML elements. These are Static, Relative, Absolute and Fixed Positioning. I will briefly explain these concepts.

- Static although very similar to relative, it is the default position for most elements on the page. If we can imagine the static elements in the form of  containers, or blocks they will tend to stack vertically on each other.

- Now, the relative positioning. It is similar to the static one, that is, it is to reflect the flow of the HTML in which elements simply  stack vertically, with a small exception. Here by means of the top and left attributes you can offset a relatively positioned element.

- In absolute positioning, you can define an element’s position within a parent element. It is attainable, when the position of the parent element is  set to relative. What happens here is that absolute elements are sort of taken out of the flow of the document in order to appear in their own layer. Afterwards, such an an absolutely positioned element is given an  A z-index. It all depends on the order in which it will appear in the HTML code. Obviously, this feature can be overridden and a user’s  new a z-index can appear in a style sheet. It is important to remember that the A z-index is applicable to  absolute elements only and you such an absolutely positioned unit cannot stretch its parent container.

- As the very name suggests Fixed Positioning, relates to a positioning where an element will be fixed in its position for good. Scrolling the screen wouldn’t make the element change its position too. It has been reported that Explorer 6 struggled difficulties as far as Fixed Positioning is concerned.

By the way of explaining the types of positioning it is also worth mentioning the main display options for an element. They are block and inline.

For elements like div, p (paragraph), ul (unordered list), block display is the default type. This element has te ability to  inherit the width from its parent element, which means to take advantage of  any width that is available to it.
Naturally it can be adjusted according to your preferences.

For elements like a, span, code, inline display is the default type. These elements display in a line and are not longer than its content.

Hi,

My name is Piotr Nocko. I am a translator, web developer and an advocate of all initiatives that support and promote web standards. The posts that I will include on the page will touch upon web relevant matters but will surely find some time to write about more trivial things as well.