I’m sure many of you guys who are Web Designers or Web Developers have faced clients who are not only clueless about what they want, but also clueless as to what the roles and differences are between these two terms. I dare not say most, but quite a number of clients (especially those that comes from marketing, no offence intended) have no clue about our roles.

Pardon me if the way I see things are not the same as you guys, but I am compelled to clarify, and educate people on what my opinions are regarding the roles of web designers and web developers. In summary here’s what the differences are:

Web Developers

Web developers are the rockstar, or the champion that makes most of the website’s magic works. In short, if you want the website to be able to take user registration, collect some data, and produce certain results or outputs that correlate to the visitors, these are the people you are looking for.

Web developers will listen to your needs, suggest some approach to solve your problem, and make the magic work with their awesome programming skills.

Web Designers

Web designers, on the other hand, are the people who make your website look beautiful and also usable. They face challenges on plethora of issues related to different browsers people use to view your website, think about the most efficient way to layout your website so that the website loads as fast as it could, and make your visitors want to know more about you and your services.

In other words, web designers are the one that decorates the stage, print the tickets, and put up banners to the rockstar concert that will be performed by the rockstar themselves – the web developers (see above).

So?

What we want you to understand is that both web designers and web developers work hand-in-hand with each other to produce the website that not only solve your problems (and make it do what you want), but solve it elegantly and beautifully, while keeping the fun of your visitors intact so that they will come back for more.

Let’s take an example of a canned drink. Web developers will be the one figuring what is the best way to manufacture the drink you wanted, they will figure out what are the mixtures, and what kind of factory setup is ideal to produce the drinks efficiently. Web designers, on the other hand, will figure out how to make the can and boxes looks appealing to the customers so they will buy the drink and tell their friends about it.

A note to both web designers and developers

Now this part is going to be a bit geeky. As a web designer, it will be a tremendous advantage if you could pick up some web development languages – most popular at the moment is PHP, ASP and Ruby on Rails. By knowing the basics of these web development languages, you can integrate your designs into the application in a speedier manner, without confusing the web developers on how your HTML, CSS and JavaScript works, and at the same time saves the agony of the developers accidentally breaking your hours of work by missing one tag (or a semicolon, for that matter).

For developers, knowledge in laying out your basic application interface in a properly coded (and unstyled) manner will also save the designer’s time by not having to restructure the web page to make it work with how he designed the page.

Conclusion

For all, remember this – everytime you want to start a new web site, think about it – will it have anything that is using database? If you do, chances are you will need to hire both web designers and web developers to get the best results.

If you just want to make your website look prettier (the so-called facelift) and preserving the current function on what the site does, then you will need to hire web designers.

Some designers can also develop. Many web development teams nowadays will include a few designers on board, so they come in a package. Though they’re hard to come by, as many designers are not willing to be tied up in one team, unless they’re working on a whole new innovative ideas.

What should you do? If you think your web site will need some development work, contact the developers – they will contact the designers to help them with the cosmetics.

Savvy?

While editing a mockup for one of our client’s website, as we were duplicating layers to make markings for individual countries, this accident happens:

The ironic coincidence couldn’t be greater than this!

Integration with WordPress can be a little tricky, especially when you want to do something out of the norm. So feel free to browse around and let me know if there’s anything that doesn’t look right. I will get on to it!

Here are some random snaps of the new layout
[svgallery name="whee"]

There are a few new additions to this blog, that is, from now on I’ll be using SimpleViewer for the photographs, so you guys don’t have to keep on scrolling page after page to see more photos.

Wait, what, ‘Whee’?

Yeah, that’s what Nirah calls this theme – Wheeeeee! I agree, this is one of our fastest development for a blog theme, ever!

Updates
- Added lightbox to the search bar on top right, just below the menu bar. Try clicking on it!
- Added some strange lines below the website logo. Will be randomized soon!

Where are the Tabs?

When you first start the browser, it looks slightly different. First of all, the tab bar is gone, and Apple have moved the tab bar all the way up on the title bar (ala Google Chrome):

Enhanced Display and Presentation

Apple have also enhanced the way the “Top Sites” display, and improved the functionality. Now the top sites by default will cater to your frequently visited sites (I can’t help but feel that this is similar to Chrome), but you can also edit the entries to show which site that you want to be there (something like Opera’s):

Edit Mode:

Not only this, but Apple have made the bookmarks and history pages to something similar to iTunes or Mac OSX finder. I believe this display is known as ‘Coverflow’:

If you’re a user of Firefox 3, you know that Firefox have integrated the address bar to also become an “awesome bar” where your bookmarks and history will be found in there as well. Looks like Safari 4 already adopted similar system, what they called “Smart Address Field”:

Performance

Apple have switched their JavaScript engine to “Nitro”, which claims that the JavaScript performance will be 4.2 times faster than in Safari 3. Previously I did not use Safari 3 much because it has this strange bug where when you open more than one AJAX-heavy page (normally for my case, its Facebook and GMail), one of them tend to be broken until you close the other tab. I’ve yet to experience this with Safari 4, but let’s give it a couple of days of full usage to show its true colors.

On overall impression scale of my short use of this browser, it does feel significantly faster than my Firefox and Chrome.

On the other hand, Safari 4 claims to be 100% compliant with the web standards, now supporting CSS3 and HTML5 fully, and has passed Acid3 test with 100% score.

Like I said, let’s give it some time then we’ll see how this browser is doing. I’m still a little unhappy with its huge footprint on my RAM (I have 5 tabs open in Firefox and it uses around 120MB of RAM, but I only have 3 tabs open in Safari 4, but its already consuming 170MB of RAM).

For those who wants to see the full features of Safari 4, you can read it at the product page.


/*
* Main CSS File
* Kucing Kelabu Designs (http://www.kucing-kelabu.com/)
*
* Browser Prayers (in case the CSS went roque)
* Now I lay me down to XHTML
* I pray the Browser Engine my CSS positioning to keep
* If I float beyond the DIV
* I pray the lord Bill Gate's soul to keep
*
* Hush little browser don't say a word
* and never mind the positioning you heard
* it's just the IE CSS bug under your bed
* in your browser in your head
*
* Exit Light. Enter Night.
* Take my fixes
*
* We're off to browser-compatiblity Land
*/
* {position: relative; zoom: 1;}


Yep. That’s one of the IE fixes. Do you guys have any? :D

Edit:
I’ve tested it on Opera 9.6, Safari 3.2, Firefox 3.0.5 and Internet Explorer 7, they all look great!

Mono-Pink in Firefox 3

Mono-Pink in Safari 3

Mono-Pink in Opera 9.6

Mono-Pink in Internet Explorer 7

ps: My “Farewell” isn’t a suicide note. It’s supposed to be my “leave of absence” letter, but I guess I cut my holiday short. I will be writing one guide soon, to compensate for the unnecessary drama. Stay tuned!

When I was just learning up web-development and HTML, I will make use of tables made from 9-cells (3×3) to realize my “rounded corner” desire. This is very simple, all you have to do is to create 4 images to represent the corners and arrange them up in such way (red lines signifies the cells):

There’s absolutely nothing wrong with doing this, even now. However, I am personally sick of coding the tables – plus, should I decided I don’t want the round corners anymore, it would be troublesome for me to edit the entire template file just to do that. However, thanks to the powerful styling properties of CSS, there’s a better way to do this.

Before we dive into the code and styling, we need to understand how exactly is this done in CSS. The idea is similar to the table mentioned earlier, but a little bit simplified. The trick here is to use nested layers, with each containing one of the rounded corners.

The layers are nested within each other to ensure that they stick together. The bottom-most (outer-most) layer contains one of the corner, while also contains the background color of the entire box. The three inner layers contains the remaining corners, and the innermost layer will have the contents. To ease confusion, it can be visually represented as such:

The big trick behind this method is the corner images – they are actually made in reverse. Which means, instead of having an image of a corner, you have an image of the background WITH a transparent corner instead. Take a look at the blown up image of the individual corner below (note that the black area are actually transparent. I color them black to give a general idea on how it looks like:

Okay now let’s get down and dirty with the code now, shall we?

First, the basic structure:

<div class='rounded-outer'>
   <div class='rounded-1'>
      <div class='rounded-2'>
         <div class='rounded-inner'>
            This is a rounded corner box
         </div>
      </div>
   </div>
</div>

Then the basic CSS:

.rounded-outer {
	background: #448ccb url('br.gif') no-repeat scroll bottom right;
	width: 300px;
}
.rounded-1 {
	background: url('bl.gif') no-repeat scroll bottom left;
}
.rounded-2 {
	background: url('tl.gif') no-repeat scroll top left;
}
.rounded-inner {
	background: url('tr.gif') no-repeat scroll top right;
	padding : 10px;
	font: normal normal normal 12pt "tahoma", "arial", sans-serif;
	color: #fff;
}

Important things to remember:
- If you’re going to apply any size (width or height) or outer margin to the entire box, make sure it is done on the outer layer.
- If you’re going to apply any padding (inner margin) to the box, do it on the innermost layer.

See the box in action!

If you have any questions, feel free to ask!