A bite of bits

As a front-end developer for multiple designers sometimes I’m given designs and layouts for sites that follow a grid system, like 960.gs.

Sometimes I debate with myself whether they’re using a grid system because they are aware of the advantages a system like that brings, or because it’s a trend. But either way, since some of them don’t understand how a grid system works, I thought I’d write a tutorial on simple guidelines they can follow, to make their front-end developer’s life easier. Read the rest of this entry »

Most web companies host their client’s websites on their own dedicated servers, managed by one of their developers. We used to do the same until we realized that it only brings problems and you end up spending a lot of time on it, reducing your profit greatly. It may sound like a way to make easy money, in the beginning, but when you run into problems, your idea will bite you back.

At madewithlove we try to only do what we are specialized in, and outsource everything else to partner companies. We’ve built a long term relationship with those partners, most of whom become friends. We give them access to documentation in our internal wiki, they know how we work and what we require from their end.

This morning we ran into troubles with a high-level client. Luckily enough, we had our partner to hold our hand. You can read the story in the full article.

Read the rest of this entry »

I think that every front-end developer, at one point or another, has come across a project with some really fancy-designed polls. With nice rounded bars, with a great texture inside.

I recently came across one of those said polls, and instead of relying on anything I’d built in the past, I decided to try build something fresh, yet compatible with even the oldest browsers we still support. Yes, even the one with the big blue E whose name I will not pronounce here.

The design I was given to build had this type of poll:

Read the rest of this entry »

In our last episode, we had a dynamic CSS3-only menu in which all options stretched dynamically. It looked wonderful (although it could probably use a designer’s touch) but there was tiny tiny problem: it didn’t work.

Despite rendering properly, as a menu it was completely useless because we couldn’t click any of the options.

Like I mentioned in the second part of this series, in order to progress we have to sacrifice a bit of markup, and this time the sacrifice is quite obvious. If we turn the inner span into a link also, we solve all of the issues.

The menu markup now looks like this:

<ul>
        <li><a class="label" href="http://www.google.com/">Home</a><a class="arrow" href="http://www.google.com/">Home</a></li>
        <li><a class="label" href="#blog">Blog</a><a class="arrow" href="#blog">Blog</a></li>
        <li><a class="label" href="#about">About</a><a class="arrow" href="#about">About</a></li>
        <li><a class="label" href="#postfolio">Portfolio</a><a class="arrow" href="#portfolio">Portfolio</a></li>
        <li><a class="label" href="#contact">Contact</a><a class="arrow" href="#contact">Contact</a></li>
</ul>

As you can tell, I added a class to both elements, and changed the selectors accordingly in the stylesheets. Other than that, there is no other difference between this and what was used in the previous version (I did say it would be quick).

The final product is here.

Out of all the versions, my favorite is still the first one, not because it was the one whose idea came only from my head, but because it’s the most semantic and easiest to convert into something that degrades gracefully.

Also, with a tiny bit of JavaScript it wouldn’t be too hard to make it change width accordingly. Something in the lines of:

$('ul li').each(function(){
   $(this).height($(this).width());
   $(this).css('line-height',$(this).width()+'px');
   $('a',this).height($(this).width());
   $('a',this).css('line-height',$(this).width()+'px');
})

But with the necessary adjustments in the margins order to make it work. Maybe I’ll get back to this one day and build a version that is enhanced by JS.

Until then I bid you adieu!

The main drawback of the Navigation I built in Part 1 was the fixed width of each “crumb”. The nicest feature is the ability to properly render the corner arrow and act correctly when you click right or next to it. Meaning that what’s inside the arrow, stays inside the arrow, what’s outside the arrow refers to the next option.

When asked if there was a way to make the width dynamic, using my method, my first thought was that without JavaScript, it would not be possible. If JavaScript were to be used, neither the span nor the a would have a width, but would retain all the other properties, and upon load, the script would run through each element, see it’s width, and apply that value as it’s height/line-height.

Read the rest of this entry »

We don’t do designs ourselves, we receive them from our clients or partners. Because of this we work with a lot of different designers, all with their own habits which is cool, but after working like this for a few months we realized that we had to streamline this process. Since a couple of weeks we have started to ask every designer that works with us to take the following guidelines.

Read the rest of this entry »

A few days ago I decided to try out some different programs to see if my workflow would improve, so I began using CSSEdit rather than Espresso to do the chunk of CSS rules. During my initial tests I noticed a piece of UI that I thought would be interesting to do with CSS3, the breadcrumbs:

Even though there are many techniques that allow us to make something similar to that without CSS3, they all share one single problem: the “arrow” part.

What is the problem with the arrow part? Well, everything in CSS 2.1 or lower is square and flat. There is no way around that.

Since the arrows are oblique, in order to achieve the same effect, we would either place them underneath, or next to each other, and replace the corresponding backgrounds depending on whether the next option was selected or not. Even with use of all CSS3 features, this method is still the most reliable one until this day.

Read the rest of this entry »

While creating web applications at madewithlove we often encounter strange problems. Sometimes we spend hours trying to solve them and we don’t want you to have to do the same, that’s why we put the solutions here.
And, of course, sometimes we just have a crazy idea we want to test out and tell you about our findings.

That’s what this blog is about, our web development stories.

Update 2: This plugin is not maintained anymore. Parts of the code are used in the jQuery UI Watermark plugin.

Update: We created a mini-site and a plugin page on the official jQuery website for the plugin.

A lot of websites have a login form without labels, they let the value of the field indicate what you need to fill in there. It’s very clean and a neat solution if you have limited space for your form.

This is what it looks like:

But if you are not in a lack of pixels you should absolutely don’t use this technique! In that case you must use a regular form with fields and labels like this one:

When a user wants to change the value of field from the first example, he will first need to clear the field. Some people do this by selecting all the text and start writing, but I can imagine people pressing the backspace till the field is empty.

Our solution
To fix that problem, I wrote a jQuery plugin. You just need to include the plugin and define which field should empty onclick.

Read the rest of this entry »