It’s time we came to grips with the fact that not every “document” can be a semantic “web page.” Some forms of writing just cannot be expressed in HTML—or they need to be bent and distorted to do so. But for once, XML can help. Joe Clark explains.

To make accessible design an organic element of front-end development, we must free our thinking from the constraints we associate with accessible design and embrace the inclusion principle. Margit Link-Rodrigue tells us how.

A comprehensive look at the quickly-changing font embedding landscape. I contributed a brief article along the same lines in the most recent issue of .NET magazine, but two months after writing it’s already out of date.

more

As an industry, we’ve learned to plan our sites to achieve business goals and meet human needs while shipping on time and delivering compelling user experiences. Alas, despite all the sweat we pour into strategy sessions and GANTT charts, we still have to coax content out of our subject matter experts and get it onto every page of the site. This is where the strongest hearts grow frail, and even seasoned developers reach for Advil or something stronger. But help, in the form of content templates, is on the way. Seize the power.

In part I of this series, we looked at how semantic features normally confined to the head of an HTML document can be used to add semantic richness to the elements of the body. Along the way, we defined six rules of RDFa. In part II, we’ll learn how to add properties to an image, and how to add metadata to any item—and we’ll add a few more rules to that list.

If it takes only 50 milliseconds for users to form an aesthetic opinion of your site’s credibility and trustworthiness, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences? Patrick Lynch doesn’t think so.

In part one of a two-part primer on RDFa, learn how semantic features normally confined to the head of an HTML document can be used to add semantic richness to the elements of the body. Mark Birbeck shows us how.

While you’re always optimistic when leading a team, you know that not everyone’s got your back. Liars and poor communicators can wipe out good work faster than a 404 error. Learn how to think critically about verbal and non-verbal behavior and to separate office politics from truth, so you don’t let the Werewolves win.

Interface responsiveness is one of many details web developers must consider in their quest to deliver a good user experience. An application that responds quickly enhances the user’s sense of control. In working to maximize application speed, though, one often-overlooked element can affect performance more than almost anything else: database design.

Have you ever wanted to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video and some padding property magic, you can. Thierry Koblentz shows us how.

Does every day feel like a bad day? Blurry boundaries between work and home, and the “always on” demands of the web can lead to depression and burnout. Learn the signs of burnout and how to maintain your bliss.

Web 2.0 – It was a huge step forward for the www, where we saw and continue to experience various ways of information sharing which in turn has resulted to a proliferation of content / data, be it user generated or not. This second generation of web has already changed the way a netizen browse the worldwideweb, compared to a stagnant first generation !

Twitter, Facebook, Linkedin, Orkut and numerous other services that is rocking the web, and leading the information bandwagon from front, are all kids of this concept. Today, the web is not confined to the desktops / workstations and you need not be glued to your monitor to be on track with your friends’ updates, you can meet-up with your friends on the move via a ‘TWEET’. Blogs, Microblogs, Social Networking – they all have just invaded the information highway.

Just when we were left thinking, whether we are making use of the complete potential of the worldwide network, here comes the concept of Web 3.0! With the mushrooming of data, there is an obvious and definitive need for a more precise segregation and organization of content as there is an incredible amount of information lurking on the web, shouting for attention.

Thanks to the search god – GOOGLE – for some innovative ways to bring the content to common user. Recently google exposed some semantic data in its search results in the form of some straight forward answers – refer to http://www.readwriteweb.com/archives/google_semantic_data.php. The evolution of this search giant can really be an inspiration after they introduced the new ‘Search Options and Rich Snippets’. They are significantly making use of the structured data open standards like Micro Formats and RDF to power the rich snippet feature. As a result they are showing some meaningful results, than just the preview text that used to be displayed earlier. Now the user can have the luxury of having more context driven results on ‘googling’.

The defining factor / strategy for the new web – WEB 3.0, would be the ability to create data that are ‘machine readable’. In this way it would be possible to organize and comprehend the vast ocean of information into a more meaningful and usable one, thereby putting the user in the driver’s seat. A very easy way to understand this concept would be to imagine how it feels, when you are able to find out the nearby theatre which shows your favorite movie during your leisure time. Awesome isn’t it ? These are just some bi-products of a more semantic and structured web, and the real scope of this relatively nascent concept is really incredible !

We have a heap of tuts / resources over the web telling us what standards to follow, what are the best practices, what is the optimal way to build something and so on, and when it comes to Web Standards, we are blessed to have some really genuine contributors / gurus who fill-up the web with some really cool articles and resources, everyday. With the Web-Standards becoming a necessity, rather than a privilege, suddenly there is a lot of importance being attributed to the cleanliness of code and the smarter way of framing an optimal CSS, be it an application or a simple static website. Its all about sticking to the basics and being lot more patient till the final crappy code disappears from the file :)

Here are some strict ‘NO’s while coding your CSS. ( A quality code not only cements your standard-adherance, but it also gives the extra scalability and reduces those late-night coding horrors :P )

No ‘!important’

In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles. Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Usage of this suffix could mean that, you are not using the ’selector specificity’ smartly enough.

Avoid ‘@import’

‘@import’, can be very handy when dealing with a project where there are a lot of CSS files depending on various modules. While this is very useful in organizing modular CSS, there are many downsides too associated with it. Importing stylesheets can significantly screw up your site download time and there are various instances where you can end up in some weird situations while using it. ‘Steven souders’ – a noted web performance guru has comprehensively noted down the effects of using ‘@import’ – http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

No ‘expressions’

CSS expressions are great to implement dynamic property implementation using javascript expressions inside CSS . As this is supported from IE5, we can smartly code an expression for IE family, since it is ignored by other browsers.  Since these  expressions are triggered more times that we normally expect them to …. this generates a lot of HTTP requests which in turn would slow down the website / page performance. There are other alternatives though for not completely avoiding expressions from your CSS. This is by using a one-time expression that sets the CSS value explicitly.

Inline Codes

The dirtiest way to code a beautiful XHTML page – including inline styles into the tags ! Finding a single inline code in your page can question the credibility of your web standard compatibility. So walk tat xtra mile and get rid of those ugly little ’style’ tags.

Design based selector names

I have been through various stages of CSS skill levels, and walking back a couple of years, i normally ended up coming up with some really interesting names for my selectors. Let me list some of them :)

• .padding50px
• .border3right
• .redbg
• .height300px
• .gotohell :P

Naming conventions / practices can reveal the standard of coder in you. CSS is meant to seperate the Content and Presentation, and the red background that your visual design had given can change to a yellow one, 2 years down the line. Keeping scalability in mind while developing an optimal CSS framework is the attribute of a smart web developer. Find some names that are related to the element based on an overall architecture of the page. For eg. ‘.redBg’, can be given ‘.note’, where it represents a text which can be  a note to the reader … Chose the names smartly and the next time someone sees your code, the standard will talk volumes of your efficiency.

Comments

Adding comments to your code as you go on coding is a great attribute never to be given away. Comprehensive and ‘to the point’ commenting can really be a turning point in some critical changes when some one else would be required to make some quick changes to the style you have coded. ‘Scalability’ – is again the keyword here  !

There are numerous other best practices in coding a stylesheet and adhering to the above points would mean that you have got a strong framework to start with a colorful career in web development :)

‘HTML’ has been here for years, since the origin of WWW, and soon afterwards W3C came up with a standard called ‘CSS’ to control the ‘Browser war’, and ‘Javascript’ followed the suit, in a bid to make a more loosely typed language, by a smart professional called ‘Brendan Eich‘ for Netscape.

Having originated for different reasons, each of these are slowly changing the face of the worldwideweb, together, for a noble cause – Web Standards! Just like the 5 elements of life, now it is possible to define the 3 elements of scalable UI design – ‘Content’ ‘Presentation’ & ‘Behaviour’. ‘Content’ – gracefully degraded by semantic HTML/XHTML, ‘Presentation’ – smartly rendered by an optimized Cascading Style Sheet, ‘Behaviour’ – brought to life by unobtrusive Javascript !

Each of these topics are as vast as the worldwideweb itself, and each minute, a new way of doing things is discovered and re-discovered. The pace at which the network is growing, poses a great challenge for those preachers and soldiers guarding the universal standard of web, and the challenge lies in flourishing the awareness of standards among the community and to build a standard compliant world. Everyday a new page with some dirty inline styles / semantically wrong html tag finds its place on the web and this adds to the vicious cycle of design – undesign – redesign. But whatever be the cause of a wrongly coded page / site on web, these 3 dashing kids of UI design are here to stay and to win the heart of all.

Lets vow towards a better web for tomorrow and for god’s sake, lets walk that extra mile to make that complex XHTML structure a semantic one ;)

Hope you all have heard that behind-the-scene progress of the new version of HTML, is cruising through.
There are some good news for those preachers of web standards who give importance to the semantically correct web.

With the the new version of HTML (HTML 5), still gazing towards the recommendation stage (the specification is not yet complete and it would take few more years), there are some wonderful elements/tags that are going to make HTML coding more sensible and structured business. These tags are specifically implemented for giving more semantically correct containers while coding HTML. Also there are many exciting features that comes with this new kid on the block, like more control over forms (web forms 2.0) and much more. These new additions are really gonna rock, and it really would be fun coding in the new version.

Let me list out some interesting tags of this new version, that some browsers already have started implementing support, but not in a complete manner.

Interesting tags – HTML5

<section></section>

This is a logical group of content, which can have nested sections withi. Each section can have header, footer or navigation within themselves depending on the context of application and the semantic of the page.

<header></header>

The header of a 'section', typically a headline or grouping of headlines, but may also contain supplemental information about the section.

<footer></footer>

This tag logically represents the footer section, with the copyright and other footer information including the footer links and all

<nav></nav>

Represents the navigation of the page, where normally there would be a list of links which leads to respetive contents/pages. This tag should be in the same level as header, footer and the main section tags used in a particular page

<article></article>

An article could represent content that logically is equivalent to an entry of a blog, an article or some other content from an external source

<aside></aside>

An aside indicates content that is tangentially related to the content around it.

<audio></audio>

Defines sound, like music or audio streams

<video></video>

Defines video, like video clip or streaming video

The following is a visual representation of the architecture of HTML tags in a typical web page.

Can we use it right away ?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.

Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the display:block; can be removed, as it will be included in the browser default styles.

Support in IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

document.createElement(’header’);
document.createElement(’footer’);
document.createElement(’section’);
document.createElement(’aside’);
document.createElement(’nav’);
document.createElement(’article’);

So, lets try building a semantically correct web, with all these wonderful tags to our support …lets try out the new kid on the block. Detailed posts on the usage of more exciting features of HTML5 are to be followed !

Making a web experience memorable and more accessible to all the users out there is really a daunting task. There are huge amount of techniques and approaches, that can be applied to a web presence to make it more accessible. Here is one among them – ‘ACCESS KEYS’
‘Access keys’ offer a convenient mechanism for people with motor skill disabilities , such as Cerebral palsy, Parkinson’s disease, Alzheimer’s disease, etc., to access links or interface elements without having to cycle through all of the other links and interface elements in the content. With this technique, we assign shortcut keys that enable various functionalities of an application/page (only certain tags support accesskey), and hence avoids the need to move the cursor to the button or link and hence saves a lot of time and improves the workflow and user experience.

REFERENCE

http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey

SYNTAX

Access keys can be implemented, by including the keyword <accesskey = character > within the tag, where the character will be a single character from the document set.

Eg.

<FORM action=”…” method=”post”>
<P>
<LABEL for=”fuser” accesskey=”U”> User Name </LABEL>
<INPUT type=”text” name=”user” id=”fuser”>
</P>
</FORM>

This would implement the accesskey for the label, and enables the user to navigate to the corresponding textbox, by pressing ‘browser-specific key’ + ‘U’. This means there are some browser keys/Key combinations, that needs to be pressed before the character mentioned in the accesskey tag, inorder to activate the element.

Here are some keys for accesskey activation in various common browsers

IE – ‘Alt’ + ‘character’
FF – ‘Shift+ Alt’ + ‘character’

HOW IT WORKS ?

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

BROWSER SUPPORT

Again there are some differences in the way ‘accesskey’ works in various browsers.

• In IE, using the access key typically only gives focus to the element. If the element is a link, it is not followed. The user can thus move to a link (e.g., in order to proceed by tabbing then), as separately from following it, which can be activating by hitting the Enter key when the focus is on the link. The implementation of accesskeys on IE is not very consistent. For example, using an accesskey for a checkbox does not just focus on it but also toggles its setting.

• FF follows the link, when accesskey is specified in an anchor tag.
• Opera doesn’t support access keys
• Netscape follows a link when an access key is used
• On Netscape 6, the support is similar. Using an access key to select a link causes the link to be followed. And it seems that access keys are not supported for form buttons
• In IE on the Mac platform, access key is performed with the control key, in combination with the key specified in the accesskey attribute. For links, the implementation follows the link rather than just setting focus on it.

MORE RESOURCES

http://juicystudio.com/article/firefox2-accesskeys.php
http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

A great example of a table-less form created by Jeff Howden. A real time saver for web developers:

http://jeffhowden.com/code/css/forms/

A great way of previewing what the link you are about to click is about. Why send your users to a website they dont wanna go? Let them preview it through a thumbnail:

http://lab.arc90.com/2006/07/link_thumbnail.php

Almost every single website has a form of some sort. Here’s a good way of treating your beloved form submit button. Great article:

http://www.ukthoughts.co.uk/journal/css…

You see theese more and more. Mostly on CSS Galleries, Netflix, etc. Here’s a looooooong but very interesting article on how to put stars on your already-rocking website:

http://www.komodomedia.com/blog/2005/08/…