Andy Clarke’s long-waited book, Hardboiled Web Design, brings new ideas on website development. It’s packed with HTML5 and CSS3 but with a different take. A hard-ass approach using the latest, emerging technologies.

I’ve got to admit that I’m a big fan of Andy‘s work. Transcending CSS had a huge impact on my work and the way I used to see markup and styling. And I had the same feeling after reading this book.

Hardboiled

As the book says: “‘Hardboiled’ web design is about never compromising on creating the best we can for the web. Hardboiled is about challenging assumptions.“. This is just to give an idea of the tone used by the author throughout the book. Basically, the idea is to use all technologies available to us right now and not letting browser capabilities drag us down.

The Book

Beautifully illustrated and designed, the book itself it’s different than everything you’ll ever see in the category. It’s one of a kind. It’s also a huge book with nearly 400 pages divided into 4 big chapters.

Each segment within these chapters is loaded with HTML5 and CSS3 techniques deeply explained (in a hardboiled way, of course) and exemplified using the book’s case study, plus, the author shows us real websites that are using it and gives us directions if we want further knowledge on the subject.

The book is available at Five Simple Steps. What are you waiting for? Buy it now!

A very popular ad type in portals and blogs, the expandable banner is a useful technique to display more content to a banner. It’s a very simple concept: the banner initially starts with a standard size and then increase when the user interacts (rollover or click) with it.

In this tutorial, we are going to create the expandable banner by following 3 steps:

1. Create a Flash banner with the original size and the expanded animation.
2. Build a expandable area for the banner with HTML & CSS.
3. Develop a small javascript to enable communication between the Flash banner and the HTML file.

1) The Flash Animation

Start by creating your animation in a canvas as big as the expanded part to be. In this example, my banner will expand from 600×150 to 600×300, so the latter is my canvas size.

We are going to use 4 layers (although you might use more if needed): hit area – for our mouse events, stage – as a guide, mask – to hide and show different areas of the canvas and content.

In the hit area, we place a button with this actionscript:

on(rollOver)	{
  getURL("javascript:expand();");
  gotoAndPlay("Start");
}

on(rollOut)	{
  gotoAndPlay("Finish");
  getURL("javascript:retract();");
}

on(release)	{
  getURL("http://www.jpedroribeiro.com/", "_top");
}

As you can see we are going to call a javascript on these two mouse events that will expand and retract the flash area, the third event is the click which will take us to our desired link.
In the mask layer, create a shape object and animate it to hide the extra content. Don’t worry about the canvas size, we will take care of it next.

2) The HTML

We are going to use 2 DIVs here, the parent one with a set position and the child one containing the embedded Flash and using CSS to clip its area.

<div style="position: relative; width: 600px; height: 150px">
    <div id="exp-banner" style=" position:absolute;clip: rect(0px 600px 150px 0px)">
        <object>...</object>
    </div>
</div>

Now we just need some script to dynamically change those attributes.

3) Interaction

Finally, the JavaScript. Here we will set the CSS attribute clip of the child DIV to 300px height when the user hovers our banner and 150px when he moves away from it.

function expand() {
    document.getElementById("exp-banner").style.clip="rect(0px 600px 300px 0px)";
}
function retract() {
    document.getElementById("exp-banner").style.clip="rect(0px 600px 150px 0px)";
}

To get a smoother result, you should only call the retract function when your animation reverted back to its standard height.

Demo & Source Files

Putting all together, you should come with something like this. Check out the demo page and feel free to download the original Flash file.

A couple of weeks ago I had the pleasure of doing some transcription work for the podcast called “Please start from the beginning…“, a video series exploring the career paths and experiences of web industry professionals.

The Podcast

PSFTB (as I’ll call it from here) is a project run by Ryan “Havoc” Taylor, a British designer and developer that works at Headscape and also freelances at Havoc Inspired. The weekly podcast interviews amazing people from the web design industry from all over the world.

Transcribing, Learning, Enjoying

The interview I transcribed was with the lovely Naomi Atkinson. She talked about her career, clients, being a freelancer and expectations for the future of the web industry.

It was a fun experiment and a good experience to me to transcribe an interview in English, as I’m not a native speaker of the language. I had a great time doing it and hopefully, if my schedule allows it, I’ll do it again.

Check out this and other great interviews at Please start from the beginning….

Smart Object and Smart Filter are two extremely useful features in Photoshop that will boost your design productivity. This is an easy to master technique that go hand in hand with any type of project.

The Power of Vectors

What Smart Objects do is basically treat any raster file like a vector. You can scale it down and scale it up again without losing resolution or pixelating your object. Scaling up is another business, you can only go as far as the original image. This resource is great for adding logos to web design mockups for example. You can use only one instance throughout the whole project with different sizes.

One Object to Rule Them All

Another nice touch about the Smart Object is that when you do some changes to the object, all instances will be updated simultaneously. No more copying styles from layer to layer!

Filters?

Smart Filters work in a similar way. After creating your smart object, any filter applied to it will be a smart filter automatically. The advantages are: you can edit the filter after you applied it, pretty much like Fireworks do it (or Layer Styles in Photoshop). You can also copy filter to other layers if you like.

Creating Smart Objects and Smart Filters

So now we understand how it works in theory, let’s see how can we take advantage of this features and apply it to our design projects.

Smart Objects

1. First, select the layer containing the image you want to turn into a Smart Object;
2. Right-click and select Convert to Smart Object;
3. Done! Now your layer has a small icon showing that it is now a Smart Object.
   (Note: To turn your layer back into an raster object, double-click the layer and select Rasterize Layer)

Smart Filters

1. Select a layer with your Smart Object;
2. Go to the Filter menu and select a filter of your choice;
3. Done! Now your Smart Object has a filter that can be updated any time you want. Also, you can copy this filter to another Smart Object by holding the ALT key and dragging it.

Play around with this feature and let me know if you got any question. Cheers!

Following up on my article about using or not IE6, I’ve selected a few tools to help you test your website on different browsers. Most of them are free and very easy to use.

As a front-end developer, your task is to make a design run smoothly on any kind of platform – In a perfect world maybe!
We know how most devices and softwares have limitations (or the project’s budget) so what we must is to assure we do our best to maintain a good user experience. Also, websites don’t need to look exactly the same in every browser, or do they?

Since we can’t always install all browsers in all their versions we have to rely on third-party solutions to fill this gap. These tools are the ones I often use on my projects, so please feel free to suggest other resources or comment on these ones.

IETester

This software simulates all version of Internet Explorer from 5.5+. The latest version is more stable and is a great resource to compare IE versions.
Pros: Lightweight software, replaces IE in most cases. Multiple IE versions. Since it’s a simulator, allows you to click and browser your site.
Cons: Not much to say here, but I an occasional javascript error and still crashes sometimes.

Browsershots

This website has probably all browsers and platforms you will need. Type your url and their system will use a network of computers to take a screenshot of your website in the spec you requested.
Pros: Huge range of browser types and OS’s.
Cons: Takes time to load all and you have a limit on how many times you can submit your site per day (unless you go premium). Can’t “browse” your site since it’s only a screenshot.

Adobe Browserlabs

Browserlabs was cool when it was free but now it’s part of CS5, although you can still use it as trial version for a few more time. Like Browsershots, it only takes screenshots of your websites but has a lot of extra resources like onion skin option.
Pros: Great interface and easy to use.
Cons: Not free. Only screenshots.

Spoon Browser Sandbox

A plugin that runs on your browser and lets you to simulate several browsers, like IE6+, Chrome, Firefox, Safari and Opera.
Pros: Browsable resource.
Cons: Plugin sometimes takes a while to load.

Hope you enjoy these resources. Please leave a comment below!
Cheers!

If you are into branding and logos then you probably know David Airey. His knowledge in the graphic design field has generated two well known and popular blogs. In the book Logo Design Love, David covers brand indentity and logo design in an exciting and comprehensive way.

The Book

The book is divided into 3 main groups: Brand Identity, Process of Design and Tips, Advices and Resources. The text is easy to read and is beautifully illustrated. Throughout the pages we see examples and showcases of logos designed by the author and other designers. All aligned and related to the content.

The highlights

If you are familiar with the work of David Airey and his style of writing you will feel at home reading this book. Differently from other authors, who usually just say what you should be doing, David goes through the book content by sharing his own experiences, the good and the bad ones and everything in between. Personally, this is the highlight of the book.

Observations

On the other side, if you have read most of David’s posts and texts, you might find that some of the content is being repeated. Which is understandable – the book is aimed to a beginning / intermediate audience and there are some parts that you just cannot leave behind.

Conclusion

I definitely recommend Logo Design Love, no matter what level you consider yourself being. Knowing the creative process of another designer is always a good thing as it makes you think about your own.

You can get a free chapter by accessing the website: http://www.logodesignlovebook.com/