The Blog

Decoy Fix for IE Duplicate Characters Bug

Among the countless IE annoyances, the duplicate character bug is one I’ve ran into more than once. Position Is Everything has a thorough write-up on the puzzling behavior, which seems to be triggered by HTML comments between floats and sometimes hidden elements. There are a couple different workarounds such as a -3px margin on the last float or using conditional comments in place of regular HTML comments. A colleague and I have found another way to fix this issue which has worked on every case so far and is a slightly easier/cleaner option.

If you place an empty element (it can be a p, span, div, anything) directly after the element which is duplicating characters and set the display to none in the CSS, the problem will disappear. What happens is because the last element within the floats is being hidden, there are no characters for IE to duplicate. For future maintenance, I’ve added a comment within the HTML (as shown in example) so that I’ll know why that extra element is there. I would never recommend placing unused elements within your HTML as it isn’t semantically correct but if you’re looking for a quick fix, this will do the trick.

HTML:

   ...
   <div id="footer">
      <p>This element was duplicating characters.</p>
      <span class="ie_fix"><!-- do not delete this,
      it fixes the IE duplicate characters --></span>
   </div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>

CSS:

.ie_fix {
   display: none;
}

Findings From the Web Design Survey

In April 2007, A List Apart and An Event Apart conducted a survey of people who make websites. Close to 33,000 web professionals answered the survey’s 37 questions, providing the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide.

This is an enormous collection of data and well worth a look. View the survey results at A List Apart.

37 Signals Releases Highrise

Highrise is an online contact manager that helps you keep track of who you talk to, what was said, and what to do next.

Excellent tool for organizing contacts. In an age where working off-site is increasingly common, effective communication via internet and phone is a must. I can see where Highrise would be incredibly handy for freelance work or even college students.

ExpressionEngine Redesign Explained

Jesse Bennett-Chamberlain has written an excellent article describing the ExpressionEngine website redesign. Not only is the final result a fantastic website but his insights are worth any designer’s time. Great info on the design process as well as working with clients.

Freelance Advice

January started off with 60 degree weather. Today’s temperature is in the negatives and there is a horizontal interstate of snow outside my window, cruising at thirty mph and piling up between one and two feet. You need ski goggles just to walk to the dining hall.

Classes are closed for the day so I’m working on homework inside rather than freezing my butt outside. I’ve been catching up on news feeds during food breaks and Cameron delivers yet another great article, concluding his full-time freelance lessons. Motivated by his findings, I decided to make a list of all the important lessons I’ve learned from the last couple years of freelancing.

Network. Tell people your ambitions, let them know you’re diving into freelance and would appreciate if they kept you in mind for future work. Tell your mom, your professors, friends, everyone. I’ve found the majority of my jobs comes from referrals. Past internships, clients, and web friends sometimes have too much work to handle or don’t possess the needed skills for a certain project and will offer you the opportunity. As many designers will attest, the work flow for web design is often up and down and rarely consistent. Be sure to return the favor to designers you have an established relationship with and forward any excess work when you get the chance.

Set up a blog. As I’ve stated in the past, one of the many benefits to a blog is the ability to display your knowledge in an informal, comfortable fashion. A resume, for example, is a generic, impersonal summary that contains limited information. A blog is often a regularly updated peek inside the methods of a business that may include the process for completed projects, current work focus, future goals, or other details that may describe their quality of work and subject command better than any resume or online portfolio.

A well put excerpt from one of Jonathon Snook’s freelance articles:

The blog has been my sales and marketing. I haven’t had to make sales calls or answer RFP’s or do pitches. People have either just come across the site or I’ve gotten work through referrals. If anybody asks if running a personal site like this can be worthwhile, let me be the first in line to say yes. I’m sure many of the freelancers out there would agree.

Learn the business! Understanding how to handle a client and their project is equally as important as finding the work. Learn how to effectively communicate with clients, deal with RFPs, assess the project scope, deliver an accurate estimate, find your appropriate work rate, contracts, invoicing, project management, etc.

Become a feed glutton. Working on your own is often most difficult simply because there is little, if any, human interaction throughout a work day. Without a company full of colleagues to bounce ideas and keep up-to-date on the latest news, it’s important stay in tune with the online web community. Find a good RSS aggregator and subscribe to all the top blogs and news sites related to your field.

Don’t just research. Contribute! On top of reading design blogs and books, contribute to the community by joining discussions, attending web conferences and gatherings, and sharing knowledge through your blog. This will also aid in networking and making connections that could expand your business. Active collaborating and sharing of ideas is largely reason why CSS has become what it is today.

Anticipate design slumps. When I used to play baseball, hitting or pitching slumps were common challenges during a season. The trick is finding a remedy that works for you. In my case, the problem was always over thinking and the cure was returning to the basics. The same applies to my design. When I’m stumped, I return to basic design principles such as the grid and typography. I ask myself simple questions like, “Who is this design targeting?” and, “What is the main goal of the site?” Other times I’m just burnt out from sitting inside for too long and need a good hike or drive. The best thing to do is think of something you enjoy that you absolutely cannot do wrong. As Travis put it:

…burnout is not a simple case of being exhausted. Rather, the ratio of gratification to perceived work input is what mostly accounts for the sensation of burnout.

Avoid the trap of CSS design galleries. How many are there now? That’s right: way too many! First off, if you’re a fan of CSS galleries, you can usually determine the good from the bad by the number of sites displayed. Some take pride in only displaying the crème de la crème while others push batches of daily additions whether they’re truly good designs or not. While the occasional gallery skim may help spark the imagination, be careful not to mimic trends or add meaningless elements to your designs because they looked cool on some other website.

Find what interests you. A good test is to ask yourself: if you were given enough money to live the rest of your life without financial concerns, what work would you still be doing? In 2005 I interned for Hatchling Studios, primarily a 3D animation studio with some very talented Flash and 3D creators. Learning the rates an ActionScript guru could command, I knew I had to be a Flash developer. After months of research and wearing the confused puppy dog face (head cocked sideways, ears half raised), I found myself lost in programming and missing front-end development. My RSS feeds were divided with exciting CSS bug fixes and daunting Flash tutorials. My web enthusiasm, production, and knowledge were stifled by a forced interest in Flash. Not long after starting my fall 2005 semester, I received my first real freelance project which involved some CSS work. An old flame was rekindled and I’ve been happily practicing design and web standards ever since.

Don’t promise the world. A common mistake of beginning freelancers is claiming to do it all. Chances are, you’re not an expert at everything, particularly at the start of your career. It is wise to offer only the services you are confident in, ensuring a) you’ll be able to handle the tasks, b) the client will be happy, and c) your reputation will benefit from a job well done. Seasoned designers with years of experience can probably get away with on-the-job learning, especially since the web changes so rapidly, but at the beginning stick with what you know already. If a project mainly requires your area of expertise but contains small technological elements you don’t know, consider outsourcing part of the work.

A friendly goodbye. Eventually, as your business grows, you’ll be moving on to bigger and better jobs. But what do you do with your smaller clients? Offer to find them a quality replacement designer to continue the work. This way you’re not abandoning clients and potentially harming your reputation, not to mention helping fellow web designers. In the end, the client doesn’t care who does the job, just as long as it gets done.

9rules Ali

In the season of redesigns, 9rules launches what they’ve codenamed, “Ali.” Some of the added features include:

  • 9rules Live – expanded to give readers more options for viewing 9rules member content
  • 9rules Member Site Profile – each 9rules member has a dedicated page for their site
  • Topics – Find information quickly on popular topics
  • my.9rules – customize your experience on 9rules

9rules

Happy Cog Anew

Happy Cog releases a beautiful new design, pushing the message that they are not just web designers but authors, speakers, and industry movers as well. More from the man who got the cog rolling, Zeldman outlines the process in a recent post.

best_cog

Gmail Usability Issue

A minor nuisance that I am annoyed with daily: When logged into my Gmail account, the main page shows a “Report Spam” button to the left of the “Delete” button. However, if I navigate to the Spam section of the account, “Delete Forever” is on the right of “Not Spam.” For better consistency, all buttons with similar actions (Delete, Delete Forever, Discard…) should appear in the same locations, regardless of which page you’re on. I can’t count the number of times I’ve reported spam then accidentally marked the same messages as “not spam” while trying to delete them.

The jumping Delete button can also be seen in both the Trash and Compose Mail sections.

Main » LEFT: Report Spam  |  RIGHT: Delete

gmail_1

Spam » LEFT: Delete Forever  |  RIGHT: Not Spam

gmail_2

Compose » LEFT: Save Now  |  RIGHT: Discard

gmail_3

Trash » LEFT: Delete Forever  |  RIGHT: Move to Inbox

gmail_4

Semantic Naming Conventions

Andy Clarke‘s recently released, Transcending CSS, has an interesting bit on naming conventions (the labels designers give to elements). Though the subject is not new, it will no doubt be revisited more in the future as designers continue to focus on semantic coding.

A while back, Andy, along with the aid of Eric Meyer, peeked under the CSS skirts of 40 well known designer websites to see if they could reveal a common trend to naming elements. Unsurprisingly, the results showed that most of the element names used were commonly the same or very similar. Nevertheless, because there is no set format for naming elements, there will always be variations between designer’s stylesheets. For example, some like to use “container” for an all inclusive div while others opt for “wrap,” “wrapper,” etc.

So why does it matter? Well, it doesn’t hurt to use unique titles but the benefits of consistent naming conventions are well worth considering:

  • Save time for yourself by not having to wonder what each element should be named.
  • The ability to reuse stylesheets (at least the basic structure) from one project to the next.
  • Quickly edit completed websites from the past without having to decipher what the names mean.
  • Save time for others who may be working on the same website. Logical, meaningful names will make it easier to recognize the parts of a website and reduce the amount of mistakes caused by confusing labels.

Andy touches on the idea of further naming images to correspond with appropriate sections on the page, such as a simple_man.jpg might become branding.jpg to match the “branding” div. I would take it one step further and pose the idea of creating a naming convention for folders as well. Images should go in “images,” Javascript in “js,” etc. This would allow for easier referencing and better management. For example, If Douglas Bowman and Dave Shea decided to swap designs again like they did on April Fool’s Day in 2004, it would be easier if both of their image folders were the same name (rather than “i” and “img”). Furthermore, all branding, content, footer, and other main sections of a webpage could have their own image folders within the main image folder (i.e. /images/branding/branding.jpg).

For more reading on naming conventions:

Top Firefox Extensions for Web Developers

Firefox being my choice web browser, the following is a list of extensions I’ve found most useful. Each image is linked to the corresponding extension install page. Enjoy and if you have any recommendations, feel free to add a comment!

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

firebug

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

ff_web_dev

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, file hashing, and more.

fireftp

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension is based on Tidy. Tidy, was originally developed by the Web Consortium W3C.

html_tidy

IE Tab allows you to embed Internet Explorer in tabs of Mozilla/Firefox. This is a great tool for web developers, since you can easily see how your webpage displayed in IE with just one click and then switch back to Firefox.

ie_tab

Greasemonkey allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.

grease_monkey

SEO for Firefox pulls in many useful marketing data points to make it easy get a more holistic view of the competitive landscape of a market right from the search results. In addition to pulling in useful marketing data this tool also provides links to the data sources so you can dig deeper into the data.

seo_ff

View Source Chart creates a colorful chart of a webpage’s rendered source code, making it easier to identify nested containers, structure and hierarchy. Source Chart is an intuitive way to analyze source and is a great visual aid tool for learning environments.

source_chart

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

colorzilla