I was tired of my old CV and lately I was using the LinkedIn auto generated PDF CV, which is quite nice and handy but it lacks personality.
The solution was to create on purely on html5 (css3 for presentational styles), easier on the eye, clean and more accessible then a PDF file (or a Doc file) and viewable on all (or most?) devices, screens and browsers.

Semantics

The markup follows the latest web standards (for HTML5), tried to make it as semantic as possible although I found out that being semantic in this context is heavily based on interpretation. Take the Skills section for example: it could be an ordered (even unordered) list but I decided to make it a definition list dl. My idea is that I am defining what Design (as for Front-end, Back-end and Other) means using me as the context.

Responsiveness

It’s basically a liquid layout, although I set a max-width of 978px for readability. With the help of media queries, managed to fix some layout flaws when viewing in smaller screens.

Styling and Extras

There are a couple javascript files on this document. One is a Google Font addon. I’m quite a fan of PT Sans so I had to use it in this project. The other one is Modernizr, which (among other things) lets old browsers render html5 sintaxes. On a similar cause, you will find another javascript in there to enable media queries on IE5+.

Fork It

I made the files available on GitHub, so please be welcome to fork it and make your updates on it. You can easily update the code to fit your details and with some minor tweaking on the css you can make it shine in no time.

https://github.com/jpedroribeiro/html5-curriculum-vitae-template

Any feedback on this is always welcome.

Boilerplate is a set of files composed to be used over and over again. In front-end development (any area actually), starting from scratch every time you have a new project is a waste of time and money. How many times have you reset your css or applied the same basic styles to the same html tags?

There are a vast amount of boilerplate files out there. Some are very complex and full of options, other are focused to certain types of projects. You are very well served of options.

On the projects I work on, I prefer to use a something simpler but that covers most of the areas. I created this set based on what I use the most.

The Boilerplate

This set is not 100% original. Like almost everything web related, it is a combination of several others plus my own insights resulting on what works for me. I use some of Eric Meyers CSS Reset, mixed with some details by HTML Doctor, HTML5 Boilerplate and others. You are welcome to make your additions, updates and customise it to fit your requirements.

HTML

Start out creating a basic HTML5 file. Add Modernizr (on header) so we can use new html5 tags on older browsers plus it allow us to detect whether the browser support css3 or not (always useful for graceful degradations).

Styles

Do a basic css reset and minify it to make it stand out from your own styles, plus it will save you some bytes.
If you are making a WordPress theme, don’t forget to add your details as comments on top, I recommend adding those details anyway.
Add conditional comments to place your IE8- styles.
If you are going responsive (and you should!) place stylesheets according to the devices/screens you are going to support. Plus the print stylesheet.

Scripts

Add the latest jQuery for advanced javascript support. You can get it either from Google repository or download and use the latest version (I prefer this, I don’t like to rely on others, even Google!).
Add a Site.js (or whatever name you want) to host your own javascript and jQuery calls. These all should be on the bottom of your HTML document (we only leave Modernizr on top to enable HTML5 on old browsers).

Everything Else

Favicon and iPad/iPhone icons also should be provided (on top of HTML doc). You can also add your own meta information. Not only good for SEO, it works as a signature of your project. Speaking of meta, add viewport and set it for mobile devices if you’re going responsive.

Wrap Up

This is how I basically created my boilerplate, you can download it here and see it in action. It has folder structure to help organize the files and speed up maintenance.

Bear in mind this is always work in progress, so make sure to come back and check the upcoming updates.

DOWNLOAD THE FILES

Drop Down menu is an excellent alternative for complex menus, the ones with a variety of categories and subcategories to choose from. In this article, I’ll show how I usually code this kind of menu without using any javascript of back-end functionality.

The Goal

We are going to aim for a simple usable menu with links and sub-menus. It will work on most browsers (IE, FF, Chrome, Opera) with graceful degradation on the outdated ones.

The Markup

Our menu is an ordered list.
Why ordered you ask? Well I’ll consider this our main menu (on header > nav) so the items/links have a logic on its own. There is a meaning for placing ‘About Us’ before ‘Contact’ (even thought it’s not numerical or alphabetical order). Therefore, it’s an ordered menu.

So here it is:

<ol>
    <li><a href='/About' title='About Us'>About Us</a></li>
    <li><a href='/Products' title='Products'>Products</a>
        <ol>
            <li><a href='/Accessories' title='Accessories'>Accessories</a></li>
            <li><a href='/Laptops' title='Laptops'>Laptops</a></li>
            <li><a href='/Macs' title='Macs'>Macs</a></li>
            <li><a href='/Pcs' title='PCs'>PCs</a></li>
        </ol>
    </li>
    <li><a href='/Support' title='Support'>Support</a>
        <ol>
            <li><a href='/FAQ' title='FAQ'>FAQ</a></li>
            <li><a href='/VideoTour' title='Video Tour'>Video Tour</a></li>
        </ol>
    </li>
    <li><a href='/Contact' title='Contact'>Contact</a></li>
</ol>

Styling

Now, the fun part. I will use some basic design styles just to make the menu more clear, but you can edit colours, fonts, sizes the way you want.

ol {
    font-family: arial;
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}
ol li {
    float: left;
    margin: 0 5px 5px 0;
    position: relative;
}
ol li a, ol li:hover ol li a {
    background: #f4f4f4;
    border: 1px solid #eee;
    color: #555;
    padding: 5px;
    text-decoration: none;
    display: block;
    white-space: nowrap
}
ol li:hover a {
    background: #555;
    color: #f4f4f4;
}
ol li ol li:hover a {
    background: #222;
    color: #f4f4f4;
}
ol li ol {
    left: 0;
    position: absolute;
    top: 26px;
    padding-top: 5px;
    display: none;
}
ol li:hover ol {
    display: block;
    position: absolute

What basically is happening is that we are hiding the second level menu via display:none and showing it when the user hovers over the parent list item (last style declaration).

IE7

As always, there’s a bug on IE7 where you have to set a background to an object in order to handle the :hover selector. This happens on objects that have position: absolute, which is the case of our menu. To fix this, the easiest way is to add a fake image to it, like:

<!--[if lte IE 7]>
    <style>
        ol li ol {background: url(none);}
    </style>
<![endif]-->

IE6

Sadly, IE6 can’t handle :hover on list elements. There are some hacks and javascript to enable it but I prefer to use another approach and just show it like a simple menu for these users. In this conditional comment, we will be resetting the “mouse over” effect to the anchor element instead.

<!--[if lte IE 6]>
    <style>
        ol li a:hover {background: #555; color: #f4f4f4;}
        ol li ol li a:hover {background: #222; color: #f4f4f4;}
    </style>
<![endif]-->

Conclusion

You can use different properties on the :hover state, like visibility, left and top positioning and also add css transitions to make the change smoother, but our goal was to do something simple, a base where you can build upon.
One drawback of using a drop down menu is that you can “hover” over elements on a touchscreen device. That’s why we make all items of our menu link to a page, so if the user can’t hover to see the product list they can still navigate through our site.

VIEW DEMO

A couple months ago I finished reading The Smashing Book 2 from the popular web design blog Smashing Magazine. Just like with the first book, I got disappointed. It looks good, it feels good (awesome printing), it covers a variety of topics, but to me it just doesn’t work.

For starter, it feels like a bunch of blog articles put together. I can’t feel the connection among them. Like I said, it covers a wide range of topics, from e-commerce to mobile, typography and print design. I found myself skipping several pages until finding something that I’m actually interested in. Too many different areas covered also means I won’t use the book as a quick reference. Maybe this was intentional so they could reach a broader audience, just a guess.

One chapter in particular covers design patterns in e-commerce based on a research with over 50 websites. Even though the content and results are well put together, this is hardly something I want to read in a book. It would make more sense to see it in a magazine as the results will become dated very fast.

The Smashing Book 2 is not a bad book. It is well written and the authors go very deep into each chapter, they are very informative although not so useful in practise. The chapters cover a lot about strategy and theory.

It’s a great improvement from their first try and I’m sure a lot of people will like it. It just isn’t the book I was expecting considering what Smashing Magazine represents to the web community.

Nearly 4 years ago, back in 2008, I decided to create a blog and write about all the stuff I was reading and doing, mostly web related. Took me a while to learn WordPress, how to create a brand new theme and customise it. It went ok, and I got nice feedback. But time passes by, people change and so must this site.

Design

On the first version I was very into textures and retro feeling. I kind of overdid it to my current taste. So in this new theme I decided to go minimal: subtle texture in the background, little graphics (mostly icons) and kept the dark colour scheme.

Content

As you can see, this site is heavily focused on the blog entries. Portfolio, about me and everything else is secondary.
Comments are off. I realised that only 5-10% of comments were meaningful and from those, about half were actually interesting comments to the post. Also, most people would contact me via Twitter anyway so I saw no reason to keep it.

Development

Even though the design is minimal, the coding is quite complex. On the front-end side, I used HTML5 markup mostly, with some CSS3 techniques for visual richness and a bit of jQuery. The back-end is, clearly WordPress, so I made use of the new features available at version 3+ like Custom Menus, Custom Fields, Featured Images, and so on. I learned A LOT about WordPress during this stage.

And It’s Here!

Took me a while to finish it, I’d say about three months on and off since I could only work on it weekends and some free nights. Anyway, hope you like this new version. If you have any question about techniques, codes, plugins, or anything used in this site just drop me a tweet or e-mail.
Cheers!

Creating a successful e-mail marketing campaign requires several items: a valid product or service to offer, selected target audience and, to make everything work, a fail-proof html.

Old Style HTML

Coding for e-mail is completely different than coding websites. E-mail clients software render e-mails in different ways just as browser-based e-mail services. The HTML for this media is mostly outdated, deprecated and messy, at least it will be if you want to make them work on all (or most) clients.

What About CSS?

Most of the CSS you know is useless for e-mails, but depending on your target audience you might be able to go a bit further. Campaign Monitor keeps an updated table with the current CSS support in e-mails, so keep that page in your bookmark for future references.

Tips to Code a Fail Proof E-mail

Structure: Put semantics aside and bring those <table> tags back. Since most of the styling won’t behave as we want, we are going to have to use tables for positioning the design. Don’t forget to set cellpadding and cellspacing to 0.
Images: Use border 0 and display: block on every images, they avoid that extra spacing around the image, specially on Gmail clients. If you are using images inside table cells, add a background colour to the cell, since some users might have turned off images display (use alt tags as well).
Text: Although some platforms will render css text styling, I recommend going back to the deprecated <font>. You can use a styled inside the for modern clients.

Test, Test, Test

After all is done, test as much as you can. You’ll probably be fine if the e-mail work on Gmail, Hotmail and Outlook, so try to focus on those first. Providing a link to a browser version of the e-mail on the top (and bottom) of your e-mail is also a common standard.