HTML5 Jungle – Semantic Markup


Last few weeks I’ve been looking deep in to various issues related to web. One specific area which I am militant about is semantic markup. I strongly believe that documents should be laid out in proper manner in a way that machines can understand and interpret it. Even though for the layman may not realise this.

With HTML5 designers/developers are really spoilt with markup (there are 104 HTML5 compatible tags). But that’s just the easy part! Throw in Global attributes and values then it becomes more interesting. Then add other markups like schema, WAI-ARIA spec etc… then things can drive you insane.

I am pretty sure those who actually care sometimes struggle to determine how this new markup should be used. Easier option for us it to ignore the markup and go back to the basics. However this does not help the progress. So this mean we spending time to understand the content as well as deciphering HTML5 spec in order to find best fit markup.

Boilerplates

There are plenty of boilerplates out there which we can use readily. Danger is it’s very easy to take this for granted and be lazy and build a website/app and ignore the website use cases also miss out on rich experiences we create because we are not aware of it since it’s not in boilerplate.

Truly understanding the HTML5 spec (and browser capabilities) allow designers/developers to implement well thought site architecture.

For example how to design layout of an article with headings content and pictures. Like we do with a print design to put in to perspective. Then use appropriate tags to mark sections like <time> so that machines and robots (SEO, Screen readers etc) can understand and in turn allow us to build better rich user experience for users.

So I’ve decided to spend time building/compiling an extensive snippet library and concentrate on Semantic markup to explore all the possibilities of HTML5 and how it can be used in different contexts/user case without bloating the code.

SemanticSnips

There are plenty of tutorials and discussions revolving around HTML5 Semantics like HTML5 Doctor, HTML5 Rocks etc.

Issue I personally have with these kind of posts is they can be sometimes too long to read. So idea here is compile list of markups which can be mixed and matched.

I will be doing these snippets as modules which can be interchanged without upsetting semantic markup and  allowing the code to be adopted to rapidly to work with overall unique user cases that may arise.

Github: https://github.com/Shavindra/SemanticSnips

A word of Caution

I like to iterate a point regards to this. That these snippets can be subjective and depend on how you perceive the content and may not work out.

For example just look through here you will understand what I mean and Dr Richard Clark perfectly summed it up.

Firefox goes 3D – I kid you NOT!! Bring on the 3D web and UI!!!


Today I was accidently selected FF developer tools instead of firebug and found Firefox introduced 3D view!!!! and it look amazing.

It gives a clear picture of how elements are arranged. It’s quite amazing to be able to see BBC website for example and how they built it and maintain the layers.

Most exciting thing is not just to see a website structure in 3D but the prospect of having something view videos in a 3D mode and be able to browse it all in 3D and shift through layers as a user.

We are not too far away from that considering rapid advances in technology like Samsung Smart screen, Minority style UI and MS Kinect

Youtube in 3D

BBC in 3D

Samsung’s Transparent Smart Window

John Underkoffler points to the future of UI

Can lessons of user experience solve medical problems?


User experience is about making complex actions simple and easier to understand for the user so action be performed intuitively quickly and efficiently. it’s about eliminating need for training, help files long descriptions.

Cancer is such a problem. Millions are spent on cancer prevention and reducing the deaths. But if the cancer can be detected early and surgery can be performed quickly efficiently and without follow up surgeries and complications it will save alot of lives. (yes there are always exceptions).

Colour coded text books etc often used to teach about anatomy make it easier to understand. However in real life it’s completely different ball game. However this gives an insight in to solution to enhance the surgery experience and allow surgery to be conducted quickly and efficiently.

Quyen Nguyen’s a brilliant talk at TEDMed talks about using fluorecent markers to identify tumours. From outlook it seems it’s all biology. But infact the solution is based on user experience principles. Make it simple quick and efficient to perform the task and save lives.

Can lessons of user experience help tackle most pressing medical problems? yes it can