Divide By Zero - a blog by Kamran Ayub

Recently on Digg an article was posted on some tips for saving time with your web design. Although it’s just a personal list, I thought that some tips could have been better and so I offer my own little list. I won’t bother rehashing the good tips the author posted, just adding to it.

This list isn’t comprehensive nor is it a detailed breakdown of each idea. It’s meant to be an overview and a jumping off point, not a How To article. These are the methods I employ and they serve me well!

1. Drop Down Menus: I use a simple tutorial from A List Apart on creating a CSS-only dropdown menu, called Suckerfish. Using a simple <ul> with no style tags and one or two classes, you can build a functional drop down in minutes, and not have to worry about styling someone else’s possibly inept code. This is also standards-compliant whilst also being the best choice for navigation in general due to degradability.

2. Make Reusable Stylesheets: Anything relating to style, positioning, and layout can be done using CSS and should only be done using CSS with a few minor exceptions. A great thing I’ve learned is to create small, cross-site CSS that can just be copy/pasted to a new website you’re working on. For example, I have a “base.css� that I use in every site I create that can be copied to another and then be done by changing a few values like fonts.

3. Image Capturing: If you’re on a Mac, use the all-powerful Apple + Shift + 4. This lets you drag an area rectangle and capture anything on-screen. It is saved natively as a PNG and just drag it onto Photoshop to manipulate it. Easy as pie!

If you need to edit a lot of pictures, I use Picasa to adjust filenames or color in photos. See my previous experience batch editing and scanning lots of photos.

4. Use FTP Software to Edit Files: This mostly applies to Mac, but there must be a good power combo on PC that I’ve yet to use. This tip could be substituted for “Use the software that fits the purpose.� On my Mac at work my power combo is the following programs:

• TextMate
• Transmit
• Photoshop

With only those 3 programs open, I can pretty much create and work on a website quickly and efficiently. Recently I had to create a <select> box with all the majors offered at my University. The list was long. However, I did it in literally 30 seconds using some simple keyboard shortcuts. On this page, hold Apple (Mac)/Ctrl (PC) down within Firefox 3 and drag your cursor over each table cell containing the major.

Copy/paste into TextMate and it will paste in plaintext. Then highlight all the lines, hit Apple + Ctrl + Shift + W and type “option� to wrap each line in a specific tag. All done!

Additionally, TextMate allows you to instantly save a file directly onto the webserver without any annoying extra clicking. Transmit has many useful functions including duplicating files, tabs, and very quick batch uploading. Double-click a file and it will open in TextMate, if you specified an external editor.

5. Better Multi-Browser Testing: Setup some Virtual Machines to test different browsers, or just install Multiple IE and be done with it considering most problems occur in IE if you code for Mozilla-based browsers (which you should be!). Personally, I installed Safari, Opera, Firefox, and Multiple IE. Really, though, only IE6 and IE7 should be enough.

6. Code Minimally: This goes hand in hand with using CSS effectively. Your webpage without CSS should be a typical flow document. There shouldn’t be any large images across the screen, background images, mis-aligned text, non-standard font sizes, etc. Basically, a good webpage should be fully functional/navigable without CSS or JavaScript. The added bonus is less coding!

7. Design for Accessibility: There are many reasons why designing for accessibility yields good results. Besides the fact that it should be an obligation for a disabled user to be able to access your site, designing with accessibility in mind also lets search engines index you faster and more accurately, getting all of your content. This applies to image search and content searching. This also allows your design to degrade in old browsers, text-based browsers, and mobile browsers.

8. Install Useful Extensions: By far the most useful extensions I own for Firefox are Firebug and the Web Developer Toolbar. Without them, I couldn’t design as fast as I can. I can’t count how many times I’ve used Firebug’s “Inspect Element� feature to debug CSS or to copy values between sites.

9. Mockup Designs First: By far one of the most timesaving elements of designing a website for me is doing an initial mockup. It only takes a few hours and you can present a complete picture of the site for the client before you actually do any coding. I personally use Photoshop because later I can slice it up to get background images for use with CSS. The client can critique it and it also lets you visualize the site yourself.

10. Use Photoshop Wisely: Some people don’t know how useful the Slice tool is. Instead of making everything but the portion of the screen you want invisible, trimming it, selecting all, copying it, then pasting into a new document, then Saving for Web, all you need to do is use the Slice tool to create “slice up� your design. You can name the slices, adjust their dimensions to your liking, and when you’re done, you can just save them all at the same time! In addition, each slice can have its own specific format like GIF or JPG or PNG. It saves me a lot of time.

Don’t use slices to make an HTML layout. You should only be using slices to get the images you need to use in your layout.

And there you have it! 10 tips to improve not only the speed and efficiency at which you work, but also your overall design skills!

Happy coding!