10 Questions From Modern Web Designers: Answered

No matter what level we're at, we all have questions. We search every day for the answers to these questions, and only sometimes do we get a decent answer. As web designers, we wonder about everything from our skill sets to our businesses, who we should look up to in the industry, and all-together secrets-of-the-trade.

Image credit: DoBeRaGi

In this post, we've compiled a list of the top ten questions modern web designers ask, and we try to answer them from our expertise. If you have anything to add at the end, whether it be another question, or your own answer, please feel free to chime in and give us your own insight.

1. What New Technologies Should I Focus on Most?

Between HTML5, CSS3, iPad development, new development frameworks, and more, it can be difficult to know what's important to focus on. We all know that it is essential to keep up to date with the latest technologies, but how can one focus on every new little thing? The answer is, of course, we can't. Therefore, we must be decisive.

Image credit: Yutaka Tsutano

So what new technology should any web designer focus on right now, today? Focus on the technologies of your specific niche. If you're a new web designer and haven't determined what that specific niche is, then determine what you want it to be in the future, and go from there. For example, if you are a developer who already does Blackberry/iPhone apps or has a focus on mobile websites, then learning to create an iPad app/design would be most beneficial for you. If you do a lot of CSS, then learn a framework to speed up your development.

Just focus around your specialty, and learn what clients expect you to learn. Also learn what you expect yourself to learn. Above all, though, know that new technologies will always come and go, so don't fret over learning about it all today. Feel free to be choosey about the new things you learn.

2. What Types of Things Should I Invest Money In?

An important business lesson is that only the businesses that invest in themselves really grow. This is true for web design businesses as well. A percentage of income one makes as a designer should be reinvested in order to grow the business and the individual. When working for an industry that functions primarily online, though, finding items to invest in can waste more money than desired.

So arises the question: What kinds of items are smart investments for web designers? Short answer: knowledge. The single most important thing any web designer can invest in is anything that improves their knowledge of design, business, best practices, a new trend/technology, etc. In a technology-based field, growth and knowledge are your best assets.

Image credit: Aaron Bassett

However, other smart things to invest in are:

• A good, comfortable desk set and chair (given you work in a home office). Productivity is only at its best when one is comfortable, and when one has plenty of workable space and organization.
• A good computer and software. Keep in mind that this should be relative software — stuff you'll actually use. Keep the Adobe Suite updated as best as possible, but don't waste money on 'cool' software that you think will make you more productive. Also, a fast, smart computer is a must.
• Quality resources when you need them and can afford them: stock photography, icon sets, fonts, theme frameworks, etc.

3. The Big One: Should I Go Freelance / Stick With A Firm?

Freelancing in the web design career seems to be a choice that is growing in popularity. Today, many web designers just starting out never even try out a company, and just jump into freelancing right after school. (Or even while still in school.) Sometimes it seems that many new web designers are going freelance because it's just the thing to do these days. Yet, we find many freelancers that are miserable doing it. The truth is: it's not for everyone.

Image credit: Robert Scoble

Understand the pros and cons of working solo. Also understand the pros and cons of working for a company. Know what you're willing to sacrifice based on your own beliefs and future goals, and know what you want to gain professionally. Beyond knowing what your goals are, feel free to try them both out. If you haven't worked for an agency yet, get a part-time job, or try it out for a few years full time. If you already work for a company, take a break or ask to go part-time to try out the freelance lifestyle. Check out Jacob Cass's post on Design Agency VS Freelance Life.

4. As a Web Designer, Do I Need to Code If I Don't Want To?

This is a tricky question to answer, because it's another one of those questions that is best answered with - "Well, it depends...".

Quite honestly, though, all web designers need to learn how to code. At the very least, they should know how to code XHTML/CSS and JavaScript. All web designers should also know at least a tiny bit of PHP/MySQL to get by. This is because many platforms (including the ever-so-popular WordPress) are coded in PHP, and a web designer should know enough to get around the backend of the many popular PHP-based platforms.

Image credit: Huasonic

So the short answer is yes - know how to code basically because you will likely have to deal with it someday. However, many web designers do end up outsourcing much of the coding work to web developers who prefer coding over design. That is fine of course, if your budget allows. So by all means, if you don't like to code and can outsource it, go for it. It's one of the many choices we're blessed with as web designers!

Learning to code, though, can help any web designer better discuss project requirements with clients and coders, and can even help to design better-quality websites according to usability. On another note, if you ever choose to go back to a company, almost all companies will require this basic knowledge and experience. (Or if they don't require it, it would definitely help regardless!)

5. With All The Hype, Should I Learn How to Make WordPress Themes?

WordPress is definitely not a passing trend, that's for sure. In the web design and development fields, it's easy to say that WordPress development can be a very profitable niche to get into. With all of its popularity, though, is it now becoming an essential thing to learn as a web designer? Are static pages officially out of style?

Image credit: Huasonic

There are plenty of niches a web designer can get into, but nearly every client will ask for a blog. Most clients know now that blogging is a great way to increase web traffic, the thing they're most interested in after spending hundreds to thousands on a website. Furthermore, many know that WordPress specifically is as versatile as it is.

So is it now essential to know how to make WordPress themes? Not really, but it can definitely help. In the very least, focus some of your efforts on learning how to design blogs effectively, and outsource the code to WordPress if necessary. It may not be the thing all web designers like to focus on, but too many web design jobs today require a blog, and specifically a WordPress implementation of some sort. You can even sell your own custom WordPress themes.

6. What is the Most Effective Way to Market Myself in This Industry?

There is no one most effective way to market yourself as a web designer. However, it is true that there are some more effective ways than others. Some marketing methods take more time, and others are quick and to the point. Any marketing method can be a waste of time, though, if it doesn't do much. From experience, here are some favorite marketing methods among successful freelance web designers (in order) :

• Referral Business - Once you do land those first few clients, always ask for a testimonial or referral, and follow up with them from time to time via promotional letters or emails. If you can master this, it is the single most effective marketing technique.
• Direct and Local Mail - Local business is easier to win over, and direct mail marketing is an effective tactic. Combine them, and a web designer can get a pretty good response. With a well-crafted sales letter, it can be easy to get a 1/100 chance of response. If that doesn't seem like a lot to you, consider this: If it takes $200 to create and mail 100 sales letters, and you gain 1 paying client from it with a $1000 project, that's a return of your investment x5. You'll likely also create plenty of leads that could turn into clients in the future.
• Building a Reputation - Build a long-term reputation through social media, blogging, and successful client projects. It takes a while, but the process is exponential. With hard work, the clients will eventually be coming to you. When promoting yourself, don't always worry about winning clients over directly.

Image credit: dmhoro

Overall, unless you're really bored or desperate, avoid ineffective forms of marketing such as cold-calling, cold-emailing, and job boards. They're usually just a waste of time and energy if you don't have time for them.

7. What's a Good Balance Between Spending Time on My Own Stuff vs. Client Projects?

Clients pay the bills, clients bring in new business, and clients keep your web design business going: so always put clients first. When you're more interested in focusing on a new side project, it can be easy to get side-tracked, and then get behind. Put your clients as priority #1, and always make deadlines and provide great service. After all, clients are what your business is all about. Don't take them for granted!

Image credit: liquidskyarts

Yet, it is important to focus on your own personal projects, your portfolio, and your blog when given the time. It's alright, and even smart to create a set amount of time each day to work on your own things. Write a blog post a day, then use the rest of the day for client work. Or, work for an hour on a side-project at the end of the day, after you have all of your client projects taken care of.

Make client projects priority #1, personal projects priority #2, but definitely keep them both as priorities as a web designer.

8. What Are The Best Places to Find Web Design Resources?

Web design resources are everywhere on the Internet, for free and for a fee. Some designers spend far too much on premium resources, while other don't spend nearly enough. Paid resources are definitely a good investment, as we stated above, but it isn't necessary to pay for every little thing.

Some great places to find quality free resources are below:

• Flickr — Do a creative-commons search for textures and more on Flickr to find some pretty cool stuff around the community.
• Blogs — blogs are giving out quality freebies everyday. Use them to your advantage!
• Stock.Xchng — Probably the best resource for free stock photography.

Also find free fonts, open-source software and more to use to your advantage. However, for professionally designed logos, have a few premium fonts on hand, or have a subscription to a premium stock photography site for a client's web design project.

9. For Web Design Projects, Should I Use a Fixed Price or Charge Hourly?

The long debate of whether to choose fixed price or hourly rates will likely never end. Professionals of all sorts debate it every day, and it can work well either way according to different professions. What's right for a web designer, though?

Here's our own opinion: fixed price projects. Let's say you take on a new project, worth $x amount. If you charge hourly, you can get this amount by determining your hourly rate by the number of hours you think you'll be working on it. Seems fair enough — until you have your client constantly behind your back time-tracking every working moment. If you don't want to feel rushed, go by a fixed project rate. Then, all you must worry about is meeting deadlines. No time sheets, advanced time-tracking, or constant updates to reassure the client.

Image credit: Materials Aart

Also, the better you get at something, the faster you can do it, right? Wireframing takes less time, the design process takes less time, and then coding and validating the final website takes less time. If you go by an hourly rate, your overall project rate goes down the faster you complete things. In other words, the better you get, the less you get paid. Put that way, hourly rates don't make a whole lot of sense at all.

Always track your own time so you can better quote future projects. Long-term fixed rate projects are the best option, after you learn to quote them correctly and after you've built a successful list of additional cost fees (such as a $50 charge per extra revisions).

10. Are Bigger Clients Necessarily Better?

Of course not. It is a quick assumption to think that a large well-paying client is better than a client with a new business and a smaller budget — not necessarily. Larger clients make for larger projects, and an entirely different sort of workflow. As creative people, we all have variations in the type of work we like to do, and variations in our own creative style. Sometimes these preferred working conditions and styles are not fit for big corporate clients and that's alright.

Image credit: IceNineJon

Never feel pressured to take on a big client because it feels prestigious. There are hundreds of freelance web designers everyday that turn down larger clients for more personal clients with small businesses and projects that fit the wants of the designer. This is, of course, the same vice versa. Just like there are many web designers who turn down large clients, there are plenty that will redirect smaller clients and keep the big ones for themselves.

Do you get paid more for bigger clients? Again, not really. Smaller projects take a smaller budget, but also less time. Larger projects can span several months, with a larger budget. The income a web designer makes at the end of the year, though, only depends on how hard they've worked day to day.

Conclusion

Hopefully these short answers were enough to cover what many web designers ask each day. It can be difficult to know what trends to follow and which to leave behind to do your own thing. What's most important is to have the knowledge to do a great job with every project, and use trial and error between your own experiences and the experiences of others. However, the only way to truly know the answers to some of the questions above is to test all the options out yourself.

As always, feel free to ask your own set of questions, or ask a question that you'd like an in-depth answer to. We'll definitely try to get them answered in the next set of questions from web designers. Also, share your own answers based on your experiences as a web designer thus far.

CSS Frameworks: The Good, The Bad, and The Ugly

Just like there are frameworks for many programming languages - CakePHP, jQuery, .NET - there are frameworks for CSS. The point of frameworks is to increase productivity and efficiency with CSS code. Many common practices done when using CSS are pre-defined within a framework to save the developer time and effort.

In this article we're going to take a closer look into some of the most popular CSS frameworks, and see if using one could really live up to it's reputation. Just like when working with any other framework, template, or application, there can be pros and cons. We'll look into the good, the bad, and the ugly of using a CSS framework.

Time-Saving Web Development

There is no doubt that a CSS framework can save time when used correctly. After all, a framework's purpose is to set up a base for developers to work with. Anything from typography and grids, to resets and add-ons are used in frameworks to make the developer's life easier. The point is not to open up a text editor and start coding from scratch.

The Time-Wasting Learning Curve

In contrast, there is of course a learning curve when using a new CSS framework. This can take up more time than it's worth. Beyond the learning curve though, when the code is not 100% yours, there can be confusion at some points throughout the development process. As designers and developers, we like to know the complete back-end workings of what we're dealing with. Without that, a project can actually take longer.

Image credit: mayeve

Finding a Balance

So in respect to time efficiency, is using a framework worth it? For many, probably yes. It does take a good understanding of the framework that will be used before the time saving benefits truly arise, and maybe even a change in how one is used to coding. However, there are certain individuals that may work quicker with their own code completely — it can really just depend on the type of thinker you are.

Think of how well you've worked with other types of frameworks in the past. If you've ever tried to use something like a theme framework to create a WordPress theme, how did that go? Was it easier and faster, or slower and confusing? How easy was it to go from normal JavaScript to jQuery or Mootools? Also, if you've ever had to deal with anyone else's code, non-related to a framework, how easy was it to figure things out?

When using a framework of any kind, including CSS frameworks, you are essentially using someone else's well thought-out code, and trying to use it to your benefit. If you find it difficult to work with someone else's code besides your own, then using a framework may not be for you.

Better CSS Efficiency

Many CSS frameworks are also meant to get all the garbage out of the way, standardize code, and keep things short and quick. For many pre-defined features in CSS frameworks, code is condensed using short-hand and eliminating whitespace. Since each browser has to load stylesheets along with other website documents, having smaller CSS files can speed up a website's load time.

Image credit: juehuayin

Are There Too Many Extras?

While a solid CSS framework can speed up a website's load time and keep things efficient, it can also do the opposite, depending on the project. How much CSS is your project going to need anyway? Does it need all the little features and details that come with some of the more complex CSS frameworks?

If coding a simple website, all the additional typography rules, layouts, and print styles may not be necessary. In that case, all these pre-defined features are just getting in the way, bloating the web space. One could choose to manually take out what is unneeded, but it almost makes more sense to code from scratch with no framework at all if one is to go through that trouble.

Deciding If It's Worth It

A simple static website with a few pages likely won't need a framework behind it, but something like a blog design or e-commerce site that will require many of the standard styled elements, multiple layouts, etc. could easily benefit from one. It's all about knowing your project well and deciding appropriately. If using a framework is just going to make things complicated and longer, then it's not worth it.

More Precise Design

Many frameworks feature a grid system, which compliments a design grid system like 960.gs. Pre-defined layouts or custom layouts can be made with CSS frameworks easily and hassle-free, and the pre-built grid keeps things in place. Even complex layouts take less thinking, and margins, padding, and the standard box model is always used correctly. Pixel-perfect conversions from Photoshop to code can be done more precisely and more quickly.

Image credit: adactio

What if the Framework Can't Support Your Design?

For many standard, and not-so-standard layouts, a CSS framework can make things easier and make code stronger. However, some designs are not meant for frameworks. Many designs still do not conform to grids, or otherwise conform to a different kind of grid. This is especially true for more creative designs. Is it possible that a grid that goes along with your favorite framework would just get in the way, or otherwise be of no good use?

Knowing How Your Design Works

It's true that many designs can benefit from using a framework grid to base their design on. By following a framework, the final layout is less likely to break under varying content options and among different browsers. It's nearly foolproof.

Yet, grids and other design-related features of a framework can also just get in the way and mess with certain designs more than it can help. For non-conventional designs, try it without a framework, but always give a framework a try for grid-based designs or standard-layout designs.

Extras and Add-ons

Some frameworks include commonly used elements, like lightboxes, tabs, sprites, and more. Many of these frameworks let you download the standard version, and add these extra features as 'add-ons.' This definitely has a benefit of adding these features easily and with compatibility to the framework, but not requiring the developer to have them on the framework if they're not going to be used.

However, beware that not all frameworks are created equally. Some may pack on more extras than necessary, by choice or not. Note what you use regularly, and if the extras included in the framework will be helpful, or will just pack things on and make things more confusing.

Popular CSS Frameworks

Blueprint
Blueprint offers a lot of features that many designers and developers ask for. Pre-defined typography, buttons sets, sprites, layouts, and more. Among all these features, designers can pick and choose, which makes this framework a great choice for a variety of projects.

Clever CSS
Cleve CSS is a unique idea that focuses around giving the developer a different option when coding in CSS. It creates a new type of shorthand, that looks similar to the Python language. Shorter code and smaller files make this a very efficient framework. This framework focuses less on pre-built features and extras, and puts more emphasis on the developer coding everything themselves. It involves a quicker and smarter syntax, thus speeding up development time.

CSS Boilerplate
This is a very simple CSS framework with less of a learning curve, and more versatility. It may not cover as much as something like Blueprint, but it can be more useful to those who want to use a CSS framework without all the initial confusion.

YUI 2
YUI 2 has a strong focus on working with grids, and less focus on pre-built features like typography, resets, etc. (Although these are also included). If you often work with complex layouts, YUI 2 is a great option for building robust, unbreakable designs. It works easily with all the common layout widths, but also works well with custom widths. This is also one of the best frameworks for SEO.

Elements
Elements is a CSS framework focused around a time and effort efficient workflow. This framework has the designer in mind. It includes preset classes, a mass reset, and some neat extra features that are nearly always usable and lightweight.

Conclusion

Using a framework or not depends on how you as a designer or developer prefer to work, and how frameworks personally affect your workflow. They can be a great tool to use when used correctly, and can make any developer's life much easier.

Besides deciding whether or not to use a CSS framework in the first place, afterward there is also the decision of which framework to use. Keep the above notes in mind when deciding: time saving, code efficiency, design factors, and the need for add-ons. The need for any of these features over the other depends on the type of projects you normally take on and how you work when coding.

Getting Started: Learning to Code for the Web, LogicallyGetting Started: Learning to Code for the Web, Logically

Coding is a logical process. You want the site or program to do a particular thing. You enter in the commands needed to achieve that end.

Learning to develop websites could be approached just as logically. Languages for the computer could be compared to math classes. You need to learn simple addition before you can even think about calculus. Going into it with the thought of languages building off each other might help you learn the languages more effectively.


Language 1–HTML
The first language you should tackle is obviously HTML. Short for HyperText Markup Language, this was the first language used on the web and as such is the backbone and framework for many other languages. The syntax of HTML is relatively simple and straightforward and there are a number of books and online resources available to help you. Be aware of the dates of the resources, however, since some elements are no longer supported, especially since HTML5 is in the process of a release.

What I wish I had known: Make sure you close all your tags! I cannot count the times that a page displayed strangely because I forgot to close a div. In this, commenting may be your best option, especially if it’s only

view sourceprint?
1

It may save you a headache or two for HTML and will insure that you are in the habit of closing them for the stricter offshoots. A validation tool may become your best friend, so be sure to bookmark your favorite. I like W3C’s Markup Validator, but there are others out there, so check around.

Some good resources:

Web Monkey’s “Make an HTML Document” University of Texas at Austin’s “Learning HTML”–This is more a list of other useful sites, but still goodW3Schools HTML Tutorial–very basic, but good if you are just starting outOffshoots: There are several other languages that branch off from HTML. This includes XHTML which tends to be more fussy about syntax—they don’t call it “strict” for nothing—but does have its uses.

Language 2–Cascading Style Sheets (CSS)
There’s a good reason I put CSS here. It builds directly off of HTML, but lets you stylize your website more efficiently than HTML by itself. Having a visually appealing website also is more encouraging to work on and more fun to show off.

CSS also brings to your attention the issue of cross-browser compatibility, the sometimes frustrating problem of web browsers handling the same code differently. Learning CSS will help you anticipate the different ways browsers handle the same code. Developing a mindset to deal with these hurtles also builds general troubleshooting capabilities, a necessary tool for real life, as well as web development.

Having ids and classes already built into your HTML from using CSS also makes it easier to incorporate JavaScript libraries, like jQuery, later on.

With CSS3, cascading style sheets now have more useful features than ever, including support for gradients and rounded corners. These can save you time and energy. The downside of this is that not all browsers support them.

What I wish I’d known: Internet Explorer is (arguably) the worst browser when it comes to cross-browser compatibility. Conditional comments work for IE5 and up, and make styling for IE a little easier. Here’s a fun way to use them in the head of an HTML document.

Only Internet Explorer will see the stylesheet contained within the conditional comments. Other browsers will only see a comment and ignore it. By putting the IE stylesheet second, you override any duplicate tags, so you only need to modify the elements that display incorrectly.

Some good resources:

35 Websites to Teach You How To Use CSS Effectively–on 1stwebdesigner53 CSS Techniques You Couldn’t Live WithoutThe Principles of Cross-Browser CSS CodingLanguage 3–JavaScript (JS)
JavaScript is useful for creating websites with dynamic or animated content. This includes animated transitions, menu tabs and near-flash like effects. JS introduces you to the wonders of, among other things, if and elseif statements. These are actually very useful tools and appear in many forms of programming, including PHP.

The syntax for JS is less forgiving than HTML or CSS, but will give you a definite sign that you did something wrong. It won’t work! The frustrating bit is that it doesn’t necessarily tell you what is wrong, so you may spend hours searching for that missing semicolon.

What I wish I’d known: While there are proponents of first learning a JavaScript library—like MooTools or jQuery— I don’t think you are doing yourself a favor through this, having done this myself. This is because when it comes to certain things—like HTML5’s canvas function, for instance—you need to know how to make the whole thing work without the shortcuts that libraries provide, especially where calling variables are concerned.

Some good resources:

W3 Schools JavascriptTizag Javascript TutorialImprove Your Skills: 25 jQuery Beginner Tutorials RoundupjQuery if/else StatementsOffshoots:Depending on your need for dynamic content, AJAX (Asynchronous JavaScript and XML) may be something you want to learn as well. It isn’t its own language, but a way of combining the two languages for more dynamic functionality. Obviously, this requires a knowledge of both JavaScript and XML.

Language 4—PHP
PHP can be used to create dynamic websites, either on HTML pages or on sites run on a content management system (CMS) like Wordpress. The conditional statements, like “if”, “elseif” and “else”,are similar to those used in Javascript.

Unlike the already mentioned web development languages, PHP runs server-side, which has its own set of benefits and challenges. One benefit is that, unlike JavaScript, the user does not have to have PHP installed on their system in order to correctly view the page. The downside of this is that your host server does have to support PHP, though this is becoming less of an issue. The other part of this is that you do need a local server to run PHP pages.

What I wish I’d known:Parse errors can be helpful. These point to the direct line number with the syntax error, which can save you time.

Some good resources:

PHP.net TutorialLearn PHP–About.comPHP: What You Need to Know to Play with the WebContinuing your learning
These are the core languages that will get you the most mileage. While there are other languages used in web development, HTML, CSS, JavaScript and PHP can provide a foundation for you to bridge off of. The Internet itself offers many resources that can help you learn coding or refresh your knowledge.

5 Good Habits That Will Make You a Better Coder

We all want to grow in the things we do, and in the field of web development, one of the main areas that we spend a lot of time on is our code. This could include HTML, CSS, JavaScript, PHP, Python, ActionScript or any other language that you may choose to use for building websites.

In this article, I’ll share some practical steps that you can take to expand your skill set and become a better coder. I would like to propose five different habits that you can adapt in order to help yourself become more excellent at what you do.

1. Focus on One Type of Language at a Time

If you are designing and developing for the web, there are often numerous different languages that you will need to familiarize yourself with, and it can be tempting to try to learn them all at once, especially considering how interconnected they all are.

I suppose that, to some degree, this is inevitable. But if you really want to improve quickly, I recommend focusing on one particular area of expertise. Do you want to get better at using CSS? Put your focus on that. Try using a single HMTL document and creating various layouts using nothing but styles. The CSS Zen Garden is a great example of how incredibly different your web page can become for the same markup. You can also focus your efforts by finding a list of elements and working through them. For instance, if you are comfortable with CSS2, but want to improve your understanding of what is possible with CSS3, you could study CSS3 properties and start working through them one by one. You can read the current CSS3 specifications. You can experiment with each module to see what it can (and cannot) do on what browsers.

You could use a similar approach to scripting languages like JavaScript and PHP, though trying to work through all of their functions methodically might be a little tedious. Another option would be to work through a number of tutorials specifically on these languages, preferably in the specific area that you work in the most.

Do you need to become better at WordPress development? There is a ton of tutorials about that. Want to learn more about server-side image manipulation? There are tutorials for that too. Find them, bookmark them, and work through them — just don’t do it while you are also going through tutorials about CSS, HTML5, or any other web language so that you’re not spreading yourself too thinly.

Pick one and stick to it until you master it, then move on to the next.

2. Write Your Logic through Comments

When it comes to coding, there are many tenants and ideas I stand by. One of this is that code is 95% logic. Another is that logic doesn’t change when translated from human language into a programming language.

What this means is that if you can write it in code, you can write it in a spoken language like English or French.

For example, suppose that I wanted to write a function that would either lock or unlock something based on the time of day (for what reason, I’m not sure). Instead of just jumping into coding the function, I could step back and write the logic in plain English as comments.

Example

// FUNCTION: Lock On Time
// This function will accept two time values, indicating the range 
through
// which it should return an unlocked status.

// Create a new data object

// Using the data object, get the current time

// IF the current time falls within the range passed to the function

// Return false – meaning that we are currently unlocked

// ELSE

// Return true – meaning that we are currently locked.

// ENDIF

// END FUNCTION

Here, we have the complete logic structure for our function, which is almost analogous to a blueprint in building a house. From here, I can then start adding in the actual code, allowing the comments to guide the process.

Obviously, this is a very simplistic example, but I do use this technique on a regular basis when I need to build a function that is notably more complex. This way, I can think through the full logic and try to iron out the wrinkles before I actually get into writing the code. I’ve found this to be an incredibly valuable habit that tends to result in fewer bugs.

As a bonus, since I will rarely actually delete the comments, writing the logic through comments also means that my code will already be documented, making it easier for others to follow my logic if they ever have to work on it, or even just for myself, if I have to come back to it several months or years down the road!

3. Study Templates, Plugins, and Open Source Code

The web is an incredibly accessible and open place, especially in the design a development communities. This disposition of the web can be a valuable resource for anyone wanting to become a better coder.

For example, if you’re really just getting started with HTML, you could download any of the innumerable free templates that exist out there on the internet, or study your favorite site’s markup. Because these templates are typically just plain HTML (and CSS, and maybe JavaScript), they’re able to work locally, giving you the opportunity to open up the source and start digging around. Play around with tags and structure to understand them better. Move things around. See what happens when you modify a style rule.

Of course, I would highly recommend coupling this experimentation with reading some solid resources about standards and best practices. After all, you don’t want to find yourself getting into bad coding habits.

This technique is probably even more useful for programmatic coding like JavaScript or PHP, which are quite a bit more complex than HTML or CSS in terms of scope and logic.

For instance, a content management system like WordPress is built almost entirely upon a foundation of various PHP scripts that all work together to establish the core functionalities. The publishing platform also supports a vast and powerful architecture for extending that core functionality, allowing you to download and install plugins that do all sorts of cool (and sometimes entirely mundane) things.

The benefit of all this is that WordPress and its plugins are entirely open source, meaning that you have complete access to all the code. So, go ahead and take advantage of this fact by digging into the plugins and poking around the code. Again, this is a great opportunity to try things and experiment.

One last word of advice on this habit: Never take the techniques or structures that you find in other people’s code as definitive (or "gospel") — be sure that you’re also trying to understand what’s going on and not just mimicking someone else’s code. Always ask why things are the way they are. Always try to consider the code as it relates to the accepted processes and standards for that particular language. Again, this will help keep you from slipping into some bad habits.

4. Read Books

While there is a ton of awesome information on various blogs out here on the web (like right here on Six Revisions), there is still nothing quite like reading a good book on a subject. Blogs are great for articles and tutorials on specific subjects and can work wonders for quick tips, but in my view, nothing beats a good book for helping to build a strong foundational understanding of a larger subject.

This has never been made clearer to me than when I finally grew tired of the table-based layouts that I had been creating in the late 90s and into the early 21st century. At that time, I finally realized that it was time for me to switch over to best practices (divs).

However, up to that point, I only had moderate success trying to teach myself how to use proper markup. I didn’t fully understand CSS selector syntax, which is such a huge part of grokking div-based layouts. As such, I really didn’t get pseudo-classes either (such as :hover), and the whole concept of specificity and inheritance meant nothing to me. The same was true of positioning and floats.

Now, I could probably have learned the language slowly, piecing together bits of information from various blogs (of which there were far fewer at the time, I might add) to form a more comprehensive picture of CSS as a whole. That would have taken a lot of time and I had jobs to do, and so I was looking for a more expedient solution.

So, I went out and bought Stylin’ With CSS by Charles Wyke-Smith. It was a revelation. In just a few short chapters, I had the basic concepts of CSS down. All those things that I didn’t even know existed were made known to me in a well-paced and organized fashion, with each chapter building on the one before. In about a day’s worth of reading, I gained the same amount of knowledge that would have taken me weeks and months to pull out of a wide assortment of articles and blog entries.

Of course, I’ve learned a lot more since then, but this single book was really the foundation of my CSS knowledge, and I still keep it on my shelf as a reference (it has a really handy appendix).

If you need to dig into a new technology from scratch, a good book is one of the best ways of going about it!

5. Experiment

The last thing that I would suggest you should get in the habit of is to just have fun. Sit down, experiment and see what you can come up with on your own.

Currently, this is a popular trend with CSS3, as different coders try to push the technology and techniques in order to discover what it is truly capable of.

Here are just a few examples of such experiments.

CSS3 Transforms & @font-face Experiment

This is a really cool experiment that creates a poster-like typographical design using the @font-face CSS property, along with some shadows and the amazing rotate transform, which, when fully supported by all browsers, will open all kinds of amazing new possibilities in web design.

CSS Posters

In this article over at Design Informer, Jad Limcaco experiments on creating a number of different poster designs using nothing but CSS.

Pure CSS Line Graph

There are tons of different tutorials out there that demonstrate how to create bar graphs using CSS. This one uses a different approach to visualizing data by using an actual line graph. Depending on your point of view, you might not think it’s "pure" CSS since it makes use of a giant sprite, but it’s still pretty darned cool.

CSS3 Leopard-style Stacks

This article illustrates an excellent attempt at trying to recreate a non-web effect using CSS by visually emulating one behavior from the Mac operating system. It’s pretty well done too, so check it out to be inspired.

Pure CSS Twitter Fail Whale

Not all CSS experiments are entirely practical, of course, and this one is probably the least practical of all as it actually recreates the well-known Twitter fail whale illustration using nothing but CSS. Is it time-consuming? Yes. Is it practical? No. But it’s certainly fun and is a proof of concept of how powerful CSS is.

All of these experiments do compelling things with CSS. Some have more real-world applications than others, but I’m sure that all of their creators actually took something away from their exploration of CSS; perhaps a better understanding of the particular CSS properties they were working with or a few techniques that they will be able to apply to actual site designs.

What kind of coding experiment can you undertake? It can be a fun and effective way to learn.

Some Parting Words

So there you have it: five different habits to take on to improve your coding expertise. Not all of these will be relevant to everyone, but I hope that you will be able to find at least one habit that appeals to you.

Remember that this place called the internet is always growing and evolving. Being a great coder means a lifetime of learning and growing.

I hope you enjoy your journey.

When Designers And Developers Work Together

Even in today’s fluctuating job market, one rule that still remains constant and true is to always play to your strengths. Part of this comes from having a complete and firm grasp of your own capabilities and limitations, while part of it also comes from knowing the same about those you are working with. However, as we grow in our abilities we may begin entering a comfort zone wherein wearing every hat and attempting to take on the entire task by ourselves becomes more of a viable reality. And one that we may decide to run with.

Not saying that this is necessarily a bad thing, but there are benefits to come from specialising and allowing certain elements to be handled by others who have specialised in those areas. This dynamic is easily demonstrated with a look at the Designer and Developer. Two areas that go hand in hand, and that can be handled either as a solo effort or by pairing up with another and each taking charge of your individual roles. So if you do decide that it is in the best interests of the project to work with another in this area, then there are a few things to bare in mind so that the working relationship goes as smoothly as possible.

Consider some of our previous posts:

• How To Effectively Communicate With Developers
  Offers communication advice.
• Clear And Effective Communication In Web Design
  Examines the communication aspect of the user experience.
• Better User Experience With Storytelling, Part One
  One more from the Smashing vaults on creating a better UX.

Getting Started: Pick Your Partners Wisely

As with any work situation, there is always a certain amount of setup required to get things started and the Designer Developer partnership is not immune to this either. There are a couple of areas that will need to be addressed in order to get the project off on the right, hopefully most productive, foot. This brings us back to that old rule of thumb about playing to your strengths, and knowing those of the person or persons that you are teaming up with. If you have the say in the person you will end up tackling the project with, then you are going to want to choose them wisely to ensure the most compatible experience for you both and the overall project itself.

Not only does compatibility of character play a big part in the working relationship, but compatibility of skills also heavily ways in on the project. You want to choose this partner with great care so that both of your expectations are met and the project can have the greatest chance of success. If you are working with someone who cannot effectively accomplish through code what it is you have designed, or who cannot reasonably design a workable template to code from then the project is destined for failure. Not only that, but chances are there will be a headache or two in store for you both as well. So as you get started in this working relationship know where you are both coming from to keep the expectations reasonable and make sure they are met.

Communication Is Key

Overall, in any relationship in order for it to be sustainable and properly function, communication is beyond vital, and the Developer Designer ship is no exception here either. In order for it to sail correctly, the communication between the players is pivotal, and special attention should be paid to how well you are both engaging this tool. This is a make or break element in the working relationship and when speaking of the expectation levels being set and met, this element’s importance rears its head. If you are not effectively communicating with each other, then there are likely details that will be falling through the proverbial cracks before long.

Lots of developers believe that designers should have a basic understanding of code in order to keep things realistic, in fact, many believe that if you call yourself a web designer, you should know at least HTML and CSS, possibly even javascript. Thinking that at the end of the designer’s part they will be handing over completed PSD, HTML and CSS files. On the flip side, most designers expect that developers will have some basic knowledge of design theory so that when changes need to be made, they can clearly communicate them. So there is a give and take with regards to the expectations on both sides, and without being able to convey them on both sides, there is bound to be some ball droppage.

Tips for Effective Communication

• Always be as concise as possible, so as to not confuse the issue.
• Know the terminology from the opposite field, so neither of you is talking over the other’s head.
• Always check that you are both on the same page about an issue before you move on to discussing something else. Never take understanding for granted.
• Always be patient.
• If you have questions, then ask them. Do not worry about how you may look asking for clarification. Better to know up front and do it right the first time.

Have A Grasp Of UX

When speaking of expectations, there is another important group who will also be placing a certain number of them on the project as well, beyond any client, and that is the end user. It is important that both the Designer and Developer have an understanding of UX, and keep that experience in mind as you proceed with your project. Those who will be interacting with the completed product and their satisfaction with the project are what matter most afterall. It is the feedback from this end of the experience that tends to determine the success or failure status of the project.

The users are the ones that the product is essentially being designed and developed for, so in the end, it is their experience that you are working to create and crafting so losing focus on this endgame for one moment during the process can have negative and lasting impacts. Beyond anything else, the UX is what will win the game or lose it for you, so when you partner with someone you will want to be sure that this understanding is part of their collective knowledge base as well. If this is not affixed to their arsenal or yours, then there are definitely some more prepatory steps that need to be taken before any serious work on the project begins.

UX Tips From the Blogosphere

Here are a few links to help you further your base on UX matters:

• 52 Weeks of UX
  A great blog with loads of helpful hints and tips about creating a quality user experience.
• UX Magazine
  An online magazine that fully focuses on the User Experience field offering the community tons of useful insights.
• UX Matters
  Another great cyberspace place to stop if you are looking for more on all things dealing with User Experience.
• 10 Most Common Misconceptions About User Experience Design
  A wonderful article on Mashable from Whitney Hess that can help firm up your grip on UX.
• Information Architecture: Enhancing the User Experience
  Another fantastic post about building a great user experience from Rick Sloboda and Web Designer Depot.

Learn The Value Of Compromise

Another thing to keep in focus when working with someone in this capacity is that the project, end user, and client are what ends up mattering over either the Designer or Developer and the potential ego that may be associated with them. Ego is not necessary in this process, and can act as a hindrance rather than a helper so as you take on a task with another you will want to check your ego at the door. This is not to say that you have to become any sort of doormat and allow your partner to walk all over you, making every critical call in the project, just that you should learn the value of compromise.

When you are working alone, compromise is generally not something we are used to until we show the project to the client. However, when you are working as a part of a team, the steps leading up the presentation to the client may be paved with compromises all along the way. If you are not great at handling them then there is a chance that things can sour early on, and the relationship will suffer, hence the project will in turn suffer. When we deal with the client, making that compromise is easier because they pay the bills, but still we make the case for why the client should bend to our will. So making that compromise in the Designer Developer relationship can be trickier to manage.

Compromising Tips

Even subtle concessions can go a long way in showing a willingness to work together, so below are a couple of ways that you can work at the compromsing element of the Designer Development relationship.

• Keep the goal in mind as you work together to hammer out the details. If any questionable element does not recognizably serve the goal let it go.
• Make sure that when choosing your project partner that it is someone who knows how to, not only compromise, but to approach the issue respectfully and tactfully. You should reciprocate this behavior.
• Try to find a way to frame every compromise as a win/win scenario for the end product so it is less like someone is giving in and more like you are working together to raise the bar.
• Be sure that you are open to the criticisms offered and compromises asked of you, and never let them put you in a defensive place, because then dialogs tend to degrade from there.

Final Thoughts

We will not always get to choose our coworkers, but when we can we should aim in these directions to make sure that our partner turns out to be as compatible as possible. We also want to be sure that we make adjustments to any lone wolf mentalities that we are bringing into the working relationship so that we are not the proverbial wrench gumming up the works.

Some Final Tips for the Road

• Designers should use a wireframe to get going and then be sure to consult with the developer before moving on.
• Designers need to be sure to create clean and organized PSD files so that the developer does not have to clean up your work before they can begin.

Further Resources

Below are some articles for further reading on the working relationships between developers and designers for your consideration.

• 6 Reasons Why Designers Should Code
  Another great post from Webdesigner Depot on designers understanding the other side.
• Developers are from Mars, Designers from Venus: A Question of Metaphors
  The title of this whimsically wonderful post says it all.
• Left-Brained vs. Right-Brained: The Developer/Designer Paradox
  A brilliant and thoughtful post over at My Ink Blog.
• 5 Pet Peeves Developers Have With Designers (and How to Avoid Them)
  A final post from the Webdesigner Depot crew that we are featuring which offers some hints to designers on ways to improve the partnership.
• Collaboration Tips for Designers Working with Developers
  An awesome article about how to make this relationship work out on Six Revisions.
• Designers and Developers, Why Can’t We All Just Get Along?
  Another thoughtful post that looks at this working partnership from the Carsonified blog.

Advanced CSS3 Box Shadow Techniques

We’re very close to the launch of Think Vitamin Membership, so I wanted to give you a preview of the kind of video courses that will be available.

Here is a five minute video that will teach you some advanced CSS3 Box Shadow techniques. We will be adding 70+ videos like this per month to the Think Vitamin Membership Training Course Library.

As a little treat, the next 10 people to signup at membership.thinkvitamin.com will receive 50% off their first month. Yay!

• View in HD
• View on iPhone or Android
• View on iPad

5 Pet Peeves Designers Have With Developers (and How to Avoid Them)

Cats and dogs. Cain and Abel. Designers and developers. These are just a few of the great historical face-offs.

Designers and developers often seem to come from different planets and have completely different brains.

Developers want a website to work right, designers want it to look right.

While these goals have a lot of overlap (and, of course, I’m stereotyping here a bit), the differences often come down to the designer and developer’s expectations of success.

Managing expectations is a matter of communication: making points clearly to the other side, finding common ground, and agreeing on goals.

Okay, so maybe it’s not that easy, but it is important for both sides to at least try to understand each other.

In an effort to promote goodwill between designers and developers, I will share some pet peeves I have encountered and explore the issues that lead to them and their solutions.

Peeve #1: Why can’t the developer just make it look like the comp?

You create a great-looking design and hand off the comp to your developer, but when you get the site back, it looks like a patchwork quilt of what you designed.

Issue
Comps are not Web pages; they are not a mixture of HTML, CSS, and JavaScript code. Photoshop, Fireworks, and Illustrator can do a lot of things that are impossible (or at least wildly impractical) on the Web, which often means that developers will have to scale down the design.

Solution
Talk to your developer while you are designing, not just afterward. Ask them whether an effect you are using will be easy to accomplish or whether a better alternative exists. Also, as you learn more about Web development, you’ll be able to better tell the difference between when your design is impractical and when the developer is just slacking off.

Peeve #2: The colors are all wrong!

You don’t choose colors arbitrarily, but developers seem to think that “close is close enough.”

Issue
I don’t know whether this is true of all developers, but I once worked with a developer who was red-green color-blind (he was a huge fan of our content manager, who sent all of her emails in pink text on a lime-green background). However, being color-blind didn’t stop him from being a kick-ass developer.

Solution
If you want the colors to be right, then spell out all of the color values on the page. Don’t rely on your developer to eyeball the color values or to sample the colors in Photoshop.

You also need to consider that the problem may not be with the developer but with you. Colors look different on a Mac and in CMYK (if you happen to accidentally enable that color space). Make sure that your document color mode and proofs are set to generic RGB by default.

Peeve #3: Do developers even know what ‘white space’ means?

You’ve left plenty of breathing room around elements to create a fluid eye path and improve readability, but the developer crams everything together, telling you, “It’s the only way it will all fit.”

Issue
I once complained to a developer that he left no space between the border of a module and its content, making it really difficult for most people to read. He replied, “I don’t care about other people. I can read it.” While most developers are not quite so callous, they have not been trained in the fine art of mixing positive and negative spaces to guide the visitor’s eye around the design.

Solution
If you really want your designs to be as precise as possible, don’t just give the designer a comp and expect them to figure out the spacing. Specify the exact widths, heights, and lengths in a design specifications document. This serves as a blueprint that you and the developer agree on for how things should be spaced.

At the very least, define general rules for margins and padding. For example, “All modules must have a minimum of 10 pixels of padding between the content and the border.”

Peeve #4: The developer can never get my designs to look the same in different browsers.

You look at the site in Firefox and it looks fine, but when you switch to Internet Explorer it falls to pieces.

Issue
You have to be sympathetic to the plight of developers when it comes to making designs look consistent across browsers. Each browser has its own quirks with spacing. Things are getting better (especially with the slow death of Internet Explorer 6), but getting them all to completely play nice with each other is still hard.

Solution
I generally allow a few pixels of wiggle room in my designs to accommodate cross-browser issues, but it helps to know what these issues are while you’re designing, so that you can help the developer avoid them.

Don’t be afraid to point out cross-browser problems to the developer and expect them to be fixed. But resolving some of them may require that you tweak your design.

Peeve #5: This will take how long?

Nothing is more depressing than burning the midnight oil on double-time to get your part of a project done on schedule, only to get back a development LOE (Level of Effort) that puts the project release date back a month from the end of eternity.

Issue
In a classic episode of Star Trek: The Next Generation, Scotty explains the facts of engineering life to Geordi La Forge: “You didn’t tell him [Captain Picard] how long it would really take, did you? Oh, laddie. You’ve got a lot to learn if you want people to think of you as a miracle worker.” Some developers think of designers in the same way that Scotty thinks of Starfleet Captains.

Solution
Developers know they will encounter unforeseen problems and so tend to grossly pad their estimates. This also makes them look really good if they get their end done a lot earlier than estimated. Haggle with the developer down to a reasonable timeline and then hold them to it. As you get to know a developer, you will hopefully find your own way to be a “miracle worker”.

Special Bonus Peeve: Developers just don’t understand designers.

Or worse:
“The developer thinks they’re a designer!”
It’s bad enough when developers seem to simply refuse to see the designer’s point of view, but that difference of opinion can usually be mediated (usually by a good project manager). However, when the developer thinks they know more about design than the designer, tempers can flare.

Issue
I’ve had to deal with more than one developer who read an article by Jakob Nielson and then wanted to lecture me about good design practice in the middle of a meeting. This not only shows disrespect for the designer but slows down the project as debate ensues.

Solution
Working with know-it-all developers is tricky, and the way to handle these situations depends on the size of the ego you are dealing with. Generally, I find it best to simply listen to what they have to say and then, if they have a point, acknowledge it and move on. Avoid arguing with them if possible.

Often their complaint is about a design “rule” that’s been broken. Don’t be afraid to acknowledge that you broke a rule—that’s what innovative designers do—but make sure you can justify why you broke it.

Whenever I find myself in this situation, I think back to my review days in design school, when I had to defend my work against some pretty brutal criticism. These sessions were often ego-bruising, but they taught me how to quickly defend my decisions while keeping my cool.

It may seem humiliating to have to constantly justify your decisions, but the more you show the “method in your madness,” the more you will find that your colleagues value and trust your judgment.