T&S Web Design

It may seem trivial to precisely name and organize each and every file, but in the end it can save a designer (or anyone else) time and money. Many designers learn this the hard way while interning or beginning their first job, but eventually they realize the significance and impact it makes on their work flow.

First and foremost, I would recommend using an external hard drive to backup all of your files: it is worth the extra cost! Next in the process is naming and organizing folders. A basic setup could include the following folders:

• Clients (a folder for each client)
• Forms (contracts, planning worksheets, invoices, etc.)
• Stock (purchased images online)

Within the “Clients” folder, you can include subfolders for their identity package, including: logo, letterhead, business card, etc. Also make sure you designate which file is the original file and which one is sent to the client by creating a file-naming system. For example,  ORIGINAL_logo_clientbusiness.ai for your own use and SAMPLE_logo_clientbusiness.jpg to send to the client. Use the same type of system within your other main folders.

This is definitely a rough start and it takes a lot of trial and error to discover a system of your own, but the initial setup is well worth your time so you can prevent any future headaches!

Ever have to do a simple task such as put a watermark on a picture? This can easily be done in Adobe Photoshop by inserting your image or text that you want to be your watermark over the original image and setting the transparency to whatever you wish. Now one image is simple and easy, but what if you have 500 images in separate folders at different sizes, resolutions and orientations? Now that can be time consuming. Recently I found an excellent way of speeding up this process.

First off, in Photoshop, you can record a certain set of actions, and save them to be repeated automatically later to a batch of files. What I did was record and save my actions for different pictures at different resolutions, so I had different presets for landscape and portrait orientations at different resolutions. Now that this is finished, how will I run these scripts on all of the pictures if they are in different folders and how will I be able run the scripts on specific images based on resolution and orientation? The answer is Bridge.

In Bridge, under the filters panel, there is an option to view the files in a folder and all of its subfolders, so by doing that you are able to view all of the images together without moving them. The filter panel also allows you to sort images by resolution, orientation and much more. So here is how this all comes together. Bridge allows you to perform a Photoshop batch to files you have selected in bridge. So, select the files you want to modify, and in Bridge so up to tools/photoshop/batch and select the action you recorded earlier. It’s that simple! Yes, I know it does take a bit of time to set up, but if you think you can put watermarks on 500 individual pictures manually then be my guest!

Our good friends (and clients) over at Nstyle Fashion Xchange in Edmond are having a sale during Edmond’s Krazy Daze. The sale is July 24-26. Edmond also has tax free weekend coming up August 1-3, and Nstyle is participating in that as well, though they’re closed on the 3rd.

So check Nstyle out for the latest styles in used clothing, where dressing trendy doesn’t have to be expensive.

I can’t emphasize enough that you should frequently check links on your website. Both links to other sites and links within your site should be checked. And make sure other people check your links as well. While you should definitely be checking them yourself, chances are good that you’ll miss something. So have another two or three people help you go through the site and look at all the links.

Your links should be checked on a regular basis. For most sites, once every six months or so should be fine. Many things can make a website look unprofessional, and links that don’t work is high up on the list. After all, if you can’t even take care of your own website, what guarantee do customers have that you’ll take care of them?

Want an automated tool to check your links? While I still recommend checking your links personally, many HTML editors like Frontpage and Dreamweaver have this built in. You can also use online tools like the W3C Link Checker.

I recently acquired a third monitor to use at work. It is really nice to have three monitors, especially when you have around ten windows open at any given time. However, I had one small problem when I hooked it up: the MacBook I use only has one port for an external monitor.

How is it even possible to hook up another monitor? Well…it isn’t. However, there just happened to be a spare MacMini lying around. This meant I could use Synergy on the Mac mini to give me the same effect as having three monitors hooked up to my MacBook. Synergy allows anyone to use a networked secondary computer as an extended screen. It allows full mouse and keyboard control between the computers. It’s basically a KM switch in software. It also supports basic functionality like copy and paste.

The particular version of Synergy I used is called SynergyKM. It has a visual configuration interface for Macs. It took me a while to setup, because some of the functionality does not work correctly in Leopard. For example, Bonjour cannot be enabled for it to work. Minor quibbles aside, Synergy works amazingly well and is very fast for being network based.

As Tim stated previously, incorporating a favicon with your site can reinforce branding for your business. At T&S, we wanted to take it a step further by adding an animated favicon. I created ours in Photoshop, saved it as a .gif, and renamed it as favicon.ico. Here is a website that will guide you in the process:

http://www.virtualmarketingblog.com/index.php/20070827/animated-favicon/

Here you can find a list of example sites with animated favicons:

http://myvogonpoetry.com/wp/2005/10/10/animated-favicons/

Many times when designing a website, I receive logos that are not in vector format. For those who may not know, vector images can be scaled infinitely, without losing quality, whereas a normal bitmap image will lose quality as it is scaled up, and even just saving the file repeatedly can lessen the quality.

In most cases, logos are originally designed in vector format, in programs such as Adobe Illustrator. They are later converted to bitmap images which get passed around and the original vector file gets forgotten. We designers need those vector files, otherwise we will need to retrace it which can take some time to get it looking perfect.

This rule of thumb does not only apply to website design, in fact, use of a vector image is most important for using in print or advertising. If a company were to use a scaled bitmap image of their logo on a billboard, it would look like this:

If the image was used in vector format it would look like this:

As you can see, a vector image will always remain at the highest quality, no matter what size. So be sure to keep this in mind when creating any design that will need to be scaled. Read the rest of this entry »

If you’re a current or past client, we’d love for you to review us on Google. We’re wanting honest critiques, not just glowing recommendations.

Thanks!

If you’re only checking your website in the web browser you use, others may not be seeing the site how you intend them to. After all, chances are pretty low that everyone looking at your site is using the same browser you are.

Here at T&S Web Design, we test on several browsers on Macs and several on Windows. Here’s the breakdown, along with the percentage of usage from w3schools.com, taken June 2008. Obviously the percentages will not be exactly the same on your site, but they shouldn’t be too far off. (Note that Firefox has the same percentage on both Mac and Windows, because w3schools.com does not differentiate between operating systems)

• Firefox - Win & Mac - 41.0%
• Internet Explorer 7 - Win - 27.0%
• Internet Explorer 6 - Win - 26.5%
• Safari - Win & Mac - 2.6%
• Opera - Win & Mac - 1.7%

Of course, the best way to check in both Windows and Mac’s OSX is to have a Mac and a Windows computer. Barring that, another viable solution is Browsershots.org. There are tons of browsers available across four different operating systems. Note that they have Opera on Windows, not Mac, but it shouldn’t make a difference.

One of the most time consuming and annoying things I must do when converting a web site from design to CSS/HTML is finding some way to replace all the “fancy font” text with images. I understand that these fonts make the site look much, much better, but there is no way to ensure an end user has the font installed nor anyway to embed the font in HTML. Placing these text images in the design can prove difficult for the following reasons:

• Some of the text may change at a later point in time, meaning that I will have to open the design, change the text, and re-export the slice.
• Some text may be added in a “fancy font” region, meaning that I will have to open the design, copy a text region, change the text, create a new slice, and export it.
• Some of the text may be removed, meaning that I will have to go in and remove the image if I want to keep the image folder clean and up-to-date.
• Some of the text may overflow its container, meaning I will need to set a min-width in the CSS file which is not entirely cross-browser compatible.

I recently came across two solutions to this problem. The first is sIFR. It uses JavaScript and flash to replace all text in a tag with an equivalent flash object. The replaced tags are determined using a CSS selector. One really nice touch is that the text in the resulting flash object can be selected and copied. However, there are some limitations. It has limited support for linking, each font must be embedded in its own flash file, limited support for font styling, and background transparency is not cross-browser compatible. For these reasons, I decided to go with another choice.

The second solution I found uses images to replace text. Using PHP and a TrueType font file, the script dynamically generates a PNG-8 file with a transparent background which is cross-browser compatible. It divides the words into separate images, so overflowing will cause the images to be bumped to the next line. I also tweaked the code so that a shadow can be generated. It caches all the generated images, so minimal processing time is used when recalling previously generated images. Lastly, it can be used as a javascript replacement technique, or it can be used in-line, without javascript to replace text. The main downside is that the text cannot be selected or copied. Here are the PHP file and the javascript file.

All-in-all I chose the second solution, because it was easier to work with and customize. I could not get sIFR to maintain consistency in the way it resized text. Also, sIFR generated object tags, which proved to be harder to work with than the image tags generated using the second technique.