December
After you’ve memorized all the web standards, protocols and details, the next move is to learn how to scale your coding. By reducing the amount of time it takes to code a site, the more time you have to bring in more projects and money for the work you already did.
Of course, doing everything in your power to save time means nothing if you don’t stay within the confines of regulations, and you’ll come off as careless in your work ethic. However, there are several ways to go about minimizing your coding time without slacking in quality, and most of the time it’s even possible to up your design game as well.
Here are some steps you can take before you embark on the wonderful adventure of coding.
Prior to coding
When you start breaking apart the PSD, try to do it at the same time. As you go about saving your images (save for web) jot down the filename and it’s unique dimensions.
You should also think about jotting down container sizes and probably the divs you might use, as well as colors, fonts, and styles. I know this sounds like a monotonous chore, but it’s one of the best ways to save time in the long run.
By taking notes for all of this, it helps you quickly remember what you have to use in your CSS. It also reminds you not to forget about the minor stuff like custom icons or small images.
And it eliminates one more step of going back and forth between Photoshop and IDE to look at sizes and files names.
Knock out HTML first
When you start working on your index page, try to complete the HTML work first. If you’re one of the lucky few working on dual 30-inch monitors, dedicate IDE on one monitor and Photoshop for the other. Work on your header, index, and footer right away, so you have more room when you tackle the CSS.
Take care of your CSS coding
I remember I used to handle the CSS parts just like my HTML, by writing code top down using the stuff I jotted down in my notebook, but I realized that it caused more bugs and forgot about certain styling points that my clients wanted done.
Therefore, I say code one part at a time. I know this is a longer process at first, but it’ll save you time when you’re testing your work in different browsers.
Uphold standards and stay true them
Most of the developers I talked to told me that they’re spending a lot of time testing everything in different browsers. In my opinion, I only spend a couple of minutes getting the sites to work, even in IE, and the rest are perfect the first time around. Why? Because I am crazy about my standards, and I stay true to them.
Plenty of people think it’s pointless or it takes too much time, but once you’ve mastered coding with your eyes closed, it doesn’t take that long to put your thoughts down on paper.
Use CSS3 to save time
I’ve realized that using CSS3 has significantly reduced the amount of time I spend on coding. I talk about the benefits with every client I meet, and they’re usually OK with things a little off in IE.
HTML5
I haven’t really used the new <article> tag because it takes time to make it work flawlessly in IE, but you can still use the <head> tags with ease. By doing this, it means less code for script tags, meta, doctype, and style tags.
Stay away from hacks
If you have to hack something to get a simple thing to work in a certain browser, you’re betting off sticking to something that already works. Nowadays, you don’t have to hack anything anymore, if it’s not working that means your code is messed up.
If you stick to the proper procedures, while noticing how browsers work with your code, you shouldn’t have to think about hacking in the first place.
Short CSS when you can
You should use short CSS when you can, even though it entails the use of background, font, margin and padding standards, instead of churning each one out one by one. Use it anyway.
Save repeat code
What’s the point of writing the same lines of code a million times over? Stockpile your most commonly used lines of code and plugins, especially if you’re working with WordPress or Drupal.
Trying to remember every built in function, or searching for them wastes a lot of time.
Your quickness will feel natural
Now that you’ve spent a lot of time coding, you’re going to learn how to do things faster. Here are some of my own tricks that’ll come in handy.
Know your spaces
After you’ve completed your fair share of sites, you’ll jot down less and less, especially when you’re working with spaces.
It’ll freak you out that you already know that sidebar is 40px away from the content section. Pretty cool, eh?
Know your browsers
The best tip I can give you is to know how each browser reacts to code and how to avoid any potential headaches. This is going to be a godsend with a lot of practice and you’ll start to remember to write code in one way because you’ll know it will cause headaches in IE6.
