last few months been rather hectic with alot of things going on. There are quite a few side projects that I’ve been meaning to do but haven’t got around to… including writing the blog. So about time that I treat everything like a Agile Scrum project.
To start with I signed up for ASANA.com and started creating list of all the projects that I meant to be doing and broken them down to small tasks… That way I have a record of all the things.
Also I want to develop regular habbits… Inspired by my friends Lorelle I myself decided I am going to write a blog each day. It would be either something I conjured up or something I found interesting in the web.
I am having some spare time. So I am taking the liberty to compile Semantic Snippets.
I’m using few handpicked resources to ensure everything is consistent. So all the code will be mash up of
- BBC Future Media Standards & Guidelines
- Google webmaster academy
- HTML 5 Doctor
- Dive in to HTML5
- Twitter Bootstrap
- Baseline Grid
At this stage I do not intend provide comprehensive guide to how html5 should be used as above resources are more than enough. Just compilation of snippets inline with best practice for different use cases with references to additional reading materials.
Some of this issues may be subjected to debate. I certainly welcome that
You can view the progress here:
With alot of people using their mobile to view emails It’s important to make it easier for the user to contact you. However whenever you put a telephone number appears in email google / hotmail and mobile email clients by default they get treated as a link and get highlighted in blue. Not the best thing at all.
So following fix will solve the issue and allows you to style them any way you like.
<a href="tel:00442087654321" style="color:#999999; text-decoration:none;"> <font color="#999999">+44 (0) 208 7654 321 </font> </a>
Number: 7654 321
NB: this is catering for the international recipients so they can contact you where ever you are. However if they are locally based it would look something like this.
<a href="tel:02087654321" style="color:#999999; text-decoration:none;"> <font color="#999999">0208 7654 321</font> </a> in Gmail: style="color:#999999;" get stripped off. so need to use <font color="#999999"> within the <a></a>
Email Marketing Software
That’s seems straightforward however, If you are using Email marketing software like dotMailer you may encounter issues because html get formatted by these software. This is done in good intention ofcourse to avoid people making mistakes (but sometimes as a there are unique cases so you would want the option to code to behave as you want it to!).
for instance following code by default when get sent to the recipient get translated from
<a href="tel:02087654321" style="color:#999999; text-decoration:none;"> <font color="#999999">0208 7654 321</font> <a/>
<a href="http://domain.com/t/2L-3J-IK-1/c.aspx" style="color:#999; text-decoration:none;"> <font color="#999999">0208 7654 321</font> </a>
This will break the telephone link!! So you need to make sure this link is not tracked.. So switch to the HTML mode and enter the modified code with URL query string to stop it being a tracking link
<a href="tel:02087654321?campaignkw=notrack" style="color:#999; text-decoration:none;"> <font color="#999999">+ 44 (0) 208 7654 321</font> </a>
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.
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.
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.
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.
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.
Youtube in 3D
The WordPress.com stats helper monkeys prepared a 2011 annual report for this blog.
Here’s an excerpt:
A San Francisco cable car holds 60 people. This blog was viewed about 1,400 times in 2011. If it were a cable car, it would take about 23 trips to carry that many people.
It’s been exactly a month since I update this space. A lot of things been happening with me. Working backwards from today.
- Three Spears – The first ever project the guys took on will be done dusted by end of the week 😀
- NHS Choices User council – last meeting was today. This is now cease to exist but they are doing more awesome stuff so I will be jumping on them
- Perl coursework – due in few days time but for once I am prepared and I have set my milestones so far I’ve managed to stick them. I think for once breaking the habbit I will be able to finish them sooner than I think.
- Networking – I’ve met some of the coolest people on the planet last week at 2 awesome events. More of that will be in the coming days (as soon as I get through my coursework)
- Movember – I got a bad ass mo 😀 and I’m stuck with it for 2 months because of a promise I made… I need to finish up the site.
- InDesign – Yes added it to my arsenal of weapons 😀
- Personal site and blog – Started drawing up mock up for this. I am using wordpress.com as a matter of convenience somewhere to temporarily hold my thoughts and portfolio till I get up and running.
- Twitter – I am a sceptic about the social media (yes it’s ironic considering my job) But I started using more and more. It IS useful 🙂
Time is very precious but I think this time around I am more disciplined how I spend time and how I am allocating time to managing my priorities.