Designers vs Developers: Why Size Matters.

Many designers don’t understand programmers, and most programmers are eternally enraged by designers. This is pretty easy to understand when you consider that a designer is pretty much like that pretty little stuck up hottie in homeroom, while the programmer is kind of like the geek playing Magic the Gathering bragging about how his light-sabre is better than yours (and he literally means a light-sabre).

Now, before you start flaming this with comments like “I’m not a 16 year old socialite” or “stop dissing the Jedi MAN!” let me just tell you that I’m both of these (not a man and a 16 year old girl, grow up people!). However, I am a graphic designer who has a degree in mass media communication, a server administrator and linux developer, a software programmer, and a web developer. This might seem strange to come across someone who excels at using both sides of his brain, but I never said I’m the most popular guy as a result...

But that said, I can tell you that the two sides often go into a battle royal of epic proportions when I do web work. I’m currently working with a graphic designer who outputs some of the most amazing artwork I’ve ever seen. It’s so amazing that I feel bad having to tell him “CSS can’t handle that dude” or “Every element on this site is an individualized size!” You designers out there probably don’t understand what the big deal is, you programmers are probably laughing saying “They just don’t get it.” Well I’m here to offer a truce, and to try to show you why size matters.

UNIFORMITY
When you design a website that uses elements of the same size, you can reuse the code written to house that element. Personally, I’m an object oriented programmer, I write code in such a way to make sure that it can be used as many times without having to write it again. Reusing code and making sites modular is what efficient coding is all about. But when you make all your header images different sizes, we can’t just simply make a header object and reuse it. We have to make a new object for every header, and likely sharpening a knife to throw at you while we are at it. When I design a website I make sure to make my elements as uniform as possible. I try to make buttons the same size, I make headers the same height so I only have to pass the image replacement to my object and never bother touching sizes, I set a size to my header and footer and don’t stray from it page to page. These may seem like little things to you, but when you make dimensions uniform it speeds up the coding process, which means more money and less time.

SPACE
It’s not just the dimensions that matter, it’s also how you save it. Don’t save every single image as a PNG set to the highest possible setting. I once had a designer send me over a spacer pixel (usually a single transparent pixel) that was 500px squared! Not only that but he saved it as a PNG on the max possible quality at 24 bits. The average programmer may not have any sort of image editing software, so he can’t just open Photoshop and optimize this stupid thing to something that can be remotely called logical. So the same goes for you, optimize! if it’s reusable make it small. If you are using a pattern in the background, make it repeatable using the smallest filesize possible. Learn how to optimize, most likely you are using Photoshop so the tools are right there in “save for web”. Also learn when to use PNG vs GIF. PNG is great for gradients and high quality images, but if you don’t have transparency in your image then there is no reason to not save it as a JPG. If all your edges are hard and you have no gradients, check the GIF setting to see if it’s smaller. Pages load quicker this way, and the faster pages load, the more likely you will have someone stick around to view the content.

SANITY
Nothing drives me crazier than when I come across a designer that simply says “Make the code work dude.” Something that seems to escape designers is that it’s easier for them to design around code then it is for a programmer to write around the design. If you are bleeding your elements together making it impossible to position objects or separate them, we have to write some elaborate code to make it work. It is very easy to design your sites in a block format while making it look like they are free-form. This very blog is a great example. You may not have realized this, but the blog is on blogger while the site is hosted on my domain. Why do they look exactly the same? It’s because my slightly “open” header and free-form content is actually in a block layout that’s easy to adapt to the horrible template structure blogger uses. (I love blogger by the way). Make the designs look cool, but make them work for your coders too. This might mean you need to learn a thing or two about what CSS can do and at least have a very basic understanding of HTML.


So while the two of you line up outside the monkey bars ready to slug it out with a light-sabre and Hello Kittie Brush, take a moment to look at each other and realize we are on the same team! Programmers could always use a crash course on basic design and how colours work with each other, and designers should have a basic understanding on what CSS can do and how HTML works. You don’t have to be an expert, but you it’s a must if you plan on getting any better at what you do. Mastering your craft means you should have a basic knowledge of how the related crafts work as well. Besides, when you poke that designer’s eye out with that light-sabre he might not be able to get designs out nearly as quickly!

So to recap, size does matter. We want something small and optimized so the browser loads it quicker. A JupiterResearch survey found that 33% of broadband users will not wait any longer than 4 seconds for a page to load before they hit backspace and click on the next search result. When it comes to narrowband users, 43% of them will wait less than 6 seconds. This means your pages need to load quick, and we all know that it’s the images that usually stick us in that department. Actual dimensions also matter. When we make things the same height, width, or even both; it allows us to set up objects to be reused with greater ease, or even assign global properties so we don’t have to use bloated code to assign styles to our HTML. This helps to streamline code and make using it more modular. While it’s just a baby step, your programmer will be grateful. And designers, watch out for those light-sabres, you will be surprised what a self proclaimed Jedi can do out of sheer will.