I have been running a succesful job boards for several years. Since I have been working with Evert at FourLeafed the rate of website development has improved beyond measure. He is able to turn ideas into practical solutions. He is creative, professional and has unrivalled experience of creating job boards. I have no hesitation in recommending his services ~ James Phillips

On of the most used visual tricks are gradients. With CSS3 you can now do this without needing images. You use it like this:

background: linear-gradient([color1], [color2]);

Now color1 will fade to color2 from the top of the element to bottom. With the different prefixes this is fairly easy to use (top to bottom gradient going from white to black).

background: #000; /* solid color for older browsers */
background: -moz-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#000)); /* older webkit */
background: -webkit-linear-gradient(#FFF, #000);

You can spice it up by using RGBA colors which adds the option of transparency, but as a webdesigner I want to be working with re-usable code. This saves me and my clients time and makes things easier to adjust. So in principle I’d want to extract the gradient from the color.

Since the background declaration will overrule the background-color declaration this might seem impossible, but not if you combine the base color of your gradient and the possibilities of the transparency from RGBA.

background: #55B361; /* solid color for older browsers */
background: #55B361 -moz-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
background: #55B361 -o-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
background: #55B361 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.1)), to(rgba(0,0,0,0.1))); /* older webkit */
background: #55B361 -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));

As you see the color is now added to the background declaration before the gradient is defined. The gradient colors are defined in RGBA which gives you control over the transparency of the gradient colors and to what extend they will mix with the background-color. In the above example I am using a gradient going from white (10% visible) to black (10% visible). Re-using the gradients is now very simple; I just have to replace the background-color and I am done.

Although this is a possibility for many situations, it also has its downside. I works best when using a gradient with the same colors, for instance from black to black or white to white, where you only change the alpha. I had the best results with setting the alpha of the first gradient color to 0 and only adjusting the alpha of the second color.

What do think of this solution? Will you be using it?

As I have a redesign of my website planned I’m diving into the latest solutions on webdesign. Since browsing on mobile devices will grow in popularity and there are so many screen sizes I want my site to fit on any screen, without making several versions for every possible resolution. Since this approach is recently growing in usage it has been given a name: Response Web Design.

In a recent article Ethan Marcotte¹ points out that “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.”

Resources on Responsive Web Design are emerging on the web. Seeing several demos online I understand why this will become the future trend in webdesign, which doesn’t only requires sites to be rebuild, but also requires a shift in the concept of sites and the way we used to build them. The content on sites will have to be fluid.

Since you might want to see what I am talking about I am share the following links with you. What do you think? Will you rethink your sites to make them responsive too?

http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
http://demos.simplethemes.com/skeleton/
http://www.smashingmagazine.com/2011/08/24/freebie-responsive-jquery-slider-plugin-flexslider/
http://fitvidsjs.com/
http://letteringjs.com/
http://fittextjs.com/

And a little treat: http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/

[blackbirdpie url="https://twitter.com/evertsemeijn/status/124068174852399104"]

link

Lets be honest: I can’t create your job board in minutes. It takes time. Time to discuss the overall look of the site, time to discuss the colors we’ll be using and we need time to test your job board before launching it. But when you think this is bad for the launch of your new jobboard you are wrong! Enter our new add-on Launch Effect.

Launch Effect is a one-page theme that lets you create a viral campaign. Here’s how it works:

• Visitors to your website sign up on your Launch Effect site using their email.
• Upon signing up, the page generates a special URL for them to share with their friends.
• Use the URL to track your most active referrers and reward them for spreading the word.

While I am working on your new job board you are launching your own viral campaign and collecting vital information on potential customers who are spreading the word for you!

Order your Launch Effect now!