Archive for the ‘Website Standards’ Category
published by Dan in Website Design | Website Standards
Last post I mentioned two signs that your website needs to be redesigned - an outdated look and a design that hurts your site’s SEO. Today I’ll be discussing one more signs - non-adherence to web design standards.
As I have mentioned several times in previous posts you can easily check whether your website adheres to the current web design standards by using the W3C markup validation service. Unless your web designer has come up with a revolutionary web design that makes your website’s usability a whole lot easier and more intuitive then it is usually best to stick with a web design that conforms with the present standards. By conforming to current W3C standards you can be sure that your website will be readable or viewable using almost any browser. This means that more people will be able to access your site, which we know is always a good thing.
If your current website has too many errors when you try to validate it it is time to check with a web design firm to find out what they can do for you. To find a good web designer a good start will be to take a look at their website and see if THEIR site adheres to current standards. You should see a W3C chicklet somewhere on their web page (it is located on the bottom right of this page) to show that the page passed validation. If you can’t find any then just go back to the W3C markup validation service and use it to check the page’s validity. If a web design company cannot create a page that adheres to W3C’s standards then how can they make a better page for you? In the end you are better of hiring a professional web designer that takes into account not only the look but also the cleanliness of their code.
published by Dan in Accessibility | Tools & Resources | Web Technology | Website Design | Website Standards
Last time I posted about the importance of web accessibility. I mentioned how other users, aside from the disabled and partially disabled, could benefit from web accessibility. As a web designer though that is not very familiar with web accessibility you should realize that there is a pretty wide range of disabilities to address including:
- visual impairments - whether full or partial blindness or colour blindness
- motor disabilities - for those with problems with fine muscle control due to certain conditions like Parkinson’s disease, cerebral palsy, muscular dystrophy, etc.
- auditory problems - whether full or partial deafness
- seizures - epilepsy is sometimes triggered when the screen frequency is between 2 to 55Hz
- cognitive/intellectually impairments - users with learning disabilities such as dyslexia, dyscalculia, has poor memory and problem solving skills, etc.
Looking at the list above can be daunting. However, a web design provider really needs to address these issues especially if under the jurisdiction of countries that legally require web accessibility. As mentioned in the previous post though, the Web Accessibility Initiative is a good place to start informing yourself about the issue. There you will find everything from guidelines and techniques to evaluation tools.
As a web designer note though that your job is really only to follow the guidelines set by the W3C. You do not have to worry about the hardware part and other assistive technologies that will help the disabled in web browsing. By following the guidelines you can be assured that the website you have designed can be easily read by assistive technologies such as screen readers. Of course, since technology constantly gives better (or at least newer) solutions then it is important that you keep yourself up-to-date with the latest developments in web accessibility.
published by Dan in Accessibility | Website Design | Website Standards
What is Web Accessibility? It means a design that people with disabilities can perceive, understand, navigate and interact with the web in the same way that web users without disabilities do. Web accessibility also helps people with diminished capabilities such as old people.
As a web design service provider, it is important that you have adept knowledge for implementing an accessible website design. There more than enough reasons for some of your clients to specify accessibility as an integral part of the desired web site design. Incorporating web accessibility in web designs lets people with disabilities use your final web site design implementation with ease and convenience. An accessible web site design however, goes beyond disabilities: by making an accessible design, other groups of user also benefit from your design, including, but not limited to the following:
-users accessing the internet other than the computer (mobile devices, web-tv)
-users with low and limited bandwidth
-users with different learning styles
According to statistics, around 20% to 30% of internet users in most counties are disabled. This means that a web design that is accessible opens up your client’s web site to a larger audience and potential market.
For certain types of web sites, such as government sites, the countries or organisations may have policies that sets accessibility as a requirement. You can get more information about accessibility in some countries, you can visit the W3C page on policies relating to web accessibility. For even more information on implementing accessible web designs, you can visit the Web Accessibility Initiative (WAI ).
published by Dan in Web Development | Website Design | Website Standards
One of the things that you need to be able to do to be a good web designer is to write W3C compliant code. I have mentioned this time and again but I cannot stress this enough. If you are new at web designing this may be one of the biggest hurdles in your way. If you find that the sites you design do not pass the W3C markup validation service though, don’t be too down on yourself. The truth is that the web is littered with sites that do not have validated code. Of course, this doesn’t mean that it is alright for you to keep on designing sites that are not W3C compliant. As a new web designer, this only means that you should start learning more about W3C and the current web standards and guidelines that it has developed and set.
To get started you can visit the New Visitors page of the W3C site. It could be a trifle bit overwhelming though since there’s just too many information to digest at once. I suggest that once you’ve read about the basics and skimmed stuff you are interested in that you head on to actual tutorial sites like W3Schools, where you can find free tutorials on everything from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP. Do not try to learn everything at once! Start polishing your coding skills one language at a time. In the meantime, while you are still polishing your coding skills, give your existing clients the best service possible by getting someone who’s already good at it to join you and work as a team.
published by Dan in Usability | Web Development | Website Design | Website Standards
Apologies for almost having forgotten to delve deeper into the difference between the two. The first time I mentioned the importance of knowing the difference between the two what I neglected to emphasise is that, aside from merely knowing the difference, a good web design company should be skilled in both aspects of web development.
Building a website entails much technical knowledge. Just like in building a house or any building for that matter, the builder is essential to make sure that the infrastructure has a solid and functional design. Builders or engineers know the regulations, the code, which is why you can be sure that with a builder the foundation is secure. This is also true for websites. Those that focus on “building websites” make sure that the code is clean, follows web standards, works properly and all those things that are taken by many for granted but are essential. They are the “behind-the-scenes” designers.
Designing a website, on the other hand, is a more creative process. It involves the navigability/usability and the over all look of the site. Designers are like the architects and interior designers in one. They make sure that the website looks the way you want it to, giving your website a unique look that is apt for your website’s purpose. Designers are also very much concerned about the experience of the visitors and aim to not only impress but ensure that they have an easy comfortable time, hence taking care of usability issues. Designers are very important since they make sure that the first impression is a good one, and as we all know first impressions can make or break you.
With the difference between building and designing a website cleared up it is obvious that there really is no such thing as building versus designing. Choose a web design company that subscribes to BOTH ideas or else you will end up with either a solid but really bland site or a pretty site that keeps on giving errors.
published by Dan in Tools & Resources | Usability | Web Development | Website Design | Website Standards
Despite all the signs I previously mentioned that pointed out that a web design company is a good one to work with, they’re all pretty meaningless if you cannot gauge the technical knowledge of the web design company. This is especially important if you do not know anything about web design since there are plenty of smooth talkers out there that might convince you of the superiority of the web design services, when in fact they’re just a start up company that lacks technical knowledge and experience. Now there isn’t anything wrong with start up web design firms after all everyone has to start somewhere. My point is simply that you should learn to check whether a web design firm really does know what it’s supposed to be doing.
To check the technical knowledge of a web design firm here are some simple tips you can follow:
- Go to their website and check it using the W3C Validation Service for code errors. All you need to check their website is to enter the website’s URL on the empty box labeled Address and click on Check. If there are lots of errors then their website isn’t W3C compliant. Steer clear from such web designers.
- Use several browsers (aside from Internet Explorer) to see how their website displays for each browser. While the website will more probably than not look different in some browsers you will want their website to still look presentable and be navigable.
- Do the same thing (steps 1 and 2) for their client’s websites. While some may do their best job with their own sites you would want to see the same effort going into the development and design of their client’s site.
published by Dan in Web Development | Web Technology | Website Standards
Meter - The meter element is used to “represent a numeric value (amount) in a specified range” and can be given up to six attributes, including value, minimum, low, high, maximum, and optimum, which are used to describe the amount in a way that will be recognized by browsers. The amount enclosed by the meter tag <meter></meter> can be anything from money to statistical values. Let me use my son’s height as an example.
Without the meter element I can simply write:
<p>My 25-month old son is 85cm long.</p>
Using meter tags I can let the browser know that his length is a numerical value by simply putting the value between tags.
<p>My 25-month old son is <meter>85cm</meter> long.</p>
Now if I use the attributes I can give the machine more information without changing the sentence one bit.
<p>My 25-month old son is <meter value=”85″ low=”80″ high=”94″ optimum=”88″>85cm</meter> long.</p>
In this example the use of minimum and maximum is not applicable since there is no minimum or maximum length. However, the height chart states that the range for 25-month-old boys is between 80 to 94 cm, which is why I set that as the low and high length. The average, which can be seen as optimum is 88cm. This means that my son is below the optimum or average height. The additional information may not be seen by readers when looking at the sentence but it can be shown as a tool tip or in any other manner you may desire.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
Block-Level Semantics:
- Dialog - The dialog, as the word implies, is used to represent reciprocal conversation between two or more persons. In HTML 5 three tags are used to represent the start and end of the entire dialog <dialog></dialog>, the speaker <dt></dt>, and the spoken part <dd></dd>.
Inline Semantics:
- Mark - The mark element is represented by the m tag <m></m>. Marking an element lets it stand out, making it easy to find in a document. However, unlike boldfacing and italicizing a word it, marking a word(s) does not emphasize the word. Instead when you mark a word you simply sort of “highlight” it to give you a reference point pretty much the same way search terms appear when you view cahced pages on Google.
- Time - The time element is simply used to denote a line of text as time and date. When using the time tag it is important to use the datetime attribute so that the line of text can be read and understood by browsers for what it is. This attribute will be useful in the future for applications like calendars and other stuff that will depend on dates and times. The correct syntax when using the timedateline attribute is as follows:
<p>My son was born
<time datetime=”2005-64-30T16:27:00-04:00″>4:27 P.M. on June 30th</time>.
</p>
With out the dateline attribute it can be coded as
<p>My son was born
<time>4:27 P.M. on June 30th</time>.
</p>
which is valid but will not be machine readable.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
Aside from new structural elements there are also new semantic tags.
Block-Level Sematics:
- Aside - In the English language the word “aside” can be used as a substitute to the word digression. When you digress from a certain topic it means that you insert or include something that is not really included in the main jist of your original or main topic. The Aside element in HTML 5 works just like that. It is used to denote anything “outside the main flow of the narrative” including notes, tips, a sidebar, a pullquote, and parenthetical remarks. In HTML 4, since there is no such element yet sidebars and other features needed to be encoded usign tables. The Aside element obviates the need to do this simplying your code a great deal.
- Figure - The new figure element is HTML 5’s answer to representing block-level images in a more semantic way. In HTML 4 when embedding images and other elements along with their corresponding captions you simply code them directly and do not really have a way to represent the block of code in so as to signify what the embedded element really is. While the method is sufficient by putting the whole code inside the figure tag <figure></figure> it leaves little room for ambiguities making it easier for browsers to interpret and associate the caption with the image. Aside from embedded pictures the audio, videos, objects and iframes can also be captioned using the figure tag.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
There’s a new version of HTML coming - HTML 5. It includes additional tags in structure, semantics, embedded media, and interactivity, that will make the lives of web developers easier and makes HTML more apt for use with some of the fundamental concepts of Web 2.0.
Structure
New elements in structure include section, header, footer, nav and article. Elliot Harold of the Polytechnic University gave a brief description of the basic construct that each element corresponded with.
- section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
- header: The page header shown on the page; not the same as the head element
- footer: The page footer where the fine print goes; the signature in an e-mail message
- nav: A collection of links to other pages
- article: An independent entry in a blog, magazine, compendium, and so forth
The new elements answer one of the aims of HTML 5, which is to have a more structured way of managing header levels. In the past each header like sidebars, footers, headers, navigation menus, main content sections, and individual stories needed to be marked with the div element (<div> </div>). With the new elements used the div element is no longer necessary and developers can do away with it.
Source: New Elements in HTML 5 by Prof. E. Harold
0845 838 7448 
