This question comes from Nykc on DreamInCode: “How do you deal with bad clients?”

What is a bad client?

Let’s be honest – not all clients are ideal. Although the vast majority of my clients are wonderful (and I would do anything for them),  others are rude, inflexible, have unrealistic expectations and don’t pay on time.

Depending on the client and the situation, my advice might vary. Here’s a general list of solutions I use for bad clients:

Rude Clients

Rude clients are (in my opinion) the worst kind. I generally cut ties with these people early on in the relationship because I won’t be disrespected.

I once had a guy pressure me to do something quickly by saying “If you can’t get this done today I’ll find someone else.”

You know what I told him? Hire someone else.

Inflexible Clients

I’ve dealt with some clients who aren’t very flexible when it comes to taking professional advice, and it’s frustrating to know that they don’t value your opinion despite the fact that they’re paying you.

For example, I built a website a few months ago for a guy who wanted me to use some of the ugliest colors I’ve ever seen. I tried to reason with him but he wouldn’t budge – he liked his colors.

What did I do? I build his website, and I got paid. But I definitely didn’t put my name anywhere on the site, and it’s not listed in my portfolio. The client is happy with the final product – which is sometimes the only thing that matters.

Unrealistic Clients

There are many people in this world who are oblivious to the realities of everyday life: they want things done yesterday, they always think things are “easy”, and they expect quality work for cheap prices.

Dealing with unrealistic clients can be very tricky. On the one hand, you want to make them happy. On the other, you want to stand up for yourself and your work. As hard as it may be, you need to start saying “No” to these clients when they ask for something unreasonable.

A long time ago, I had a client who seemed shocked when I gave him a quote for his website. He tried to counter my price with something lower (a price he saw on Craigslist) but I told him no and explained why my price was more expensive. He backed down and agreed to my price.

Clients Who Don’t Pay on Time

These clients are sneaky and you often don’t know they’re a bad client until your invoice goes unpaid for weeks at a time. I’ve been burned by this problem once and I’m hell bent on making sure it never happens again.

Generally speaking, I’ll ask for a 50% down payment on any project over $500, and the remaining 50% is due before I deliver the final code.

But for clients who are late with a payment, I follow these two steps:

1. If a payment is more than a week past due, I respectfully ask to be paid ASAP. Most times, the client just forgot and sends payment immediately.
2. For clients who said they’d pay me in step one (but never did), I “respectfully” threaten to take my work off their server.

Step 2 is the beautiful part of being a web developer – I’ve been given access to their servers, and I have the ability to remove my work if I’m not paid. I actually had to do that once… and the client paid me the very next day.

Ask a Web Developer!

Have a question you want answered? Contact me through my website or send me a message on Twitter (@arthurakay). Then stay tuned to my YouTube channel for the answers!

However, any web developer will tell you that it’s annoying (at best) to design a website or build a web application that works and looks the same across each of the popular Internet browsers. Although most modern web browsers adhere to the recent HTML and CSS industry standards and render code similarly, the little quirks and oddities of each can be immensely frustrating. In fact, many of my gray hairs are a result of this struggle.

The Problem with IE6

Internet Explorer 6 (for those of you who don’t know) is by far the worst Internet browser still in use today. It was released in 2001 – well before any of the recent technological advances of my profession and the Internet in general.

At that time using IE6 to view the World Wide Web wasn’t necessarily a bad thing… but because a large percentage of the Internet-using population has not upgraded to a newer version of Internet Explorer (or a new browser altogether), web developers have been caught in limbo. People continue to use IE6 so we continue to build compatible websites – but IE6 doesn’t support modern code standards and technological advances. It’s a catch-22.

Think of this problem as trying to run modern video games or DVDs on an old Apple II GS. It’s absurd that anyone would think this can work, but that’s exactly what happens when people try to view modern websites and web applications using IE6.

Long story short aKa Web Design has always taken pride in the fact that our websites render correctly across all browsers. Accomplishing that task has required hours of extra testing to identify and fix problems specific to IE6.

Looking Toward the Future

Starting today, aKa Web Design will no longer offer free support for IE6.

Despite the formality of this announcement, most of our clients won’t be affected as their websites and software applications were specifically designed to be compatible with IE6. Our own website will not be tested for backwards compatibility with IE6 as new changes are added.

This decision has less to do with saving time and frustration than it does with looking toward the future. As the technology that drives the Internet changes, it becomes an impossible task to deliver a quality product using an outdated browser like IE6, Netscape or similar browsers. Google, Facebook and many of the current Internet giants all stopped offering support for IE6 months ago – and it’s about time the rest of the industry follows suit.

Your Thoughts

The debate over IE6 has been ongoing for years – but is now the right time to drop support? What are your thoughts?

As I recently started a new project using ExtJS, I thought I would share some of my own advice on the subject.

Folder Structure

Architects build things… and as software architects, it’s our job to build an organized folder structure as the solid foundation for our web application. Organization is the key here; we don’t want to be searching through our IDE for hours trying to find something. To accomplish this task, we will setup a UI based on “tiers” (think of an N-tier application).

A habit I’ve developed over the years is to create a root-level folder named with an underscore as the first character (/_app/) which contains important UI application files. The underscore is important for two reasons:

1. it visually stands out, and
2. it will be listed at the top when sorted alphabetically

For argument’s sake, we will create a folder structure for our application which looks like the following:

In this way, we keep all of our UI application code separated from other web entities like HTML and image files. (I consider JavaScript and CSS to be “UI application code”, which I define as logic or presentation within the UI. HTML and other file types are generally more structural and are dependent on JS or CSS. Server-side files often contain logic, but fall into a different tier of the application at large.)

If necessary, the folder structure can be much more robust – it completely depends on how your application works. For example, a project running ASP.NET MVC will have root-level folders for Models, Controllers and Views which contain code specific to their tier’s functionality.

ExtJS Framework

The first thing any application using ExtJS will need is the framework itself (duh!). Copy the ExtJS files to /_app/ext-3.2.1/ Name the folder to match whatever version you’re running – this makes future upgrades a breeze.

Assuming that you’re not using ExtJS in conjunction with another framework (like jQuery), your application simply needs to include three files:

• ext-all.css
• ext-base.js
• ext-all.js (or ext-all-debug.js)

I always like to include the CSS file before the JS files, but that’s just my preference. ext-base.js must be included before ext-all.js – read your INCLUDE_ORDER.txt file!

    <!-- ExtJS Framework -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-3.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="/_app/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/_app/ext-3.2.1/ext-all.js"></script>

Themes

If you have any custom ExtJS themes that you plan on using for your application, this would be the appropriate time to add them.

Place these files in the /_app/ext-themes/ folder. We specifically separate these files from /_app/ext-3.2.1/ to simplify the upgrade process should you migrate to a newer version of ExtJS in the future.

    <!-- ExtJS Themes -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-themes/css/xtheme-XYZ.css" />

Overrides

Next, you should create CSS and JS files to place any overrides which you’ll need. These overrides are generally bug fixes – not customizations. The point of these files is to have a central place for fixing oddities in the ExtJS framework which may be fixed in a future release.

Here’s what I call these files:

• Ext.Overrides.css
• Ext.Overrides.js

    <!-- ExtJS Overrides -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-overrides/Ext.Overrides.css" />
    <script type="text/javascript" src="/_app/ext-overrides/Ext.Overrides.js"></script>

At this point in our application (the beginning), we probably won’t have any overrides since we haven’t started writing any code. One exception is the global variable BLANK_IMAGE_URL value, which needs to point to our local application (not the remote ExtJS server, which is by default).

In our Ext.Overrides.js file, simply add the following:

    Ext.BLANK_IMAGE_URL = '/_app/ext-3.2.1/resources/images/default/s.gif';

UX Classes

Last but not least, we can now include any ExtJS user extensions (UX) that we need for our application.

    <!-- ExtJS UX -->
    <script type="text/javascript" src="/_app/ext-ux/Ext.ux.XYZ.js"></script>

Application Code

The first thing we should create at this point is our application CSS files (placed in /_app/css/ ). These styles may or may not have anything to do with our JS classes, but we obviously need to include them. I suggest including these styles now (as opposed-to before the ExtJS styles) because we don’t want ExtJS to overwrite any of our custom styles. (Browsers apply styles based on the most recently included definition.)

Next it’s time to add our custom application classes (placed in /_app/js/ ). Although I won’t go into any specific details about how to write your classes, I highly suggest reading the posts by Ed Spencer and Jay Garcia (see below under Resources) which contain excellent tutorials.

Namespace

I usually start by creating a namespace file which asks ExtJS to creates all of my application namespaces before I load my JavaScript classes. This isn’t necessary, but I’ve found that creating the namespaces early often prevents errors due to classes being included in the “wrong order”. It can also save code, as none of your classes need to explicitly create their own namespace.

I call this file _Namespace.js – using the same naming convention as before (starting with an underscore) to draw attention to its importance. It’s contents include only a handful of lines (depending on how large your application is). This file should only contain namespace definitions.

    Ext.namespace(
        'NS1',
        'NS2',
        'NS3'
    );

Also, if you’re going to use this idea, be sure to include _Namespace.js before any of your other application files!

JS Classes

Lastly, we can include all of our application’s JavaScript classes in the HTML header.

    <!-- Application Files -->
    <link rel="stylesheet" type="text/css" href="/_app/css/styles.css" />
    <script type="text/javascript" src="/_app/js/_Namespace.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass1.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass2.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass3.js"></script>

Put It All Together

    <!-- ExtJS Framework -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-3.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="/_app/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/_app/ext-3.2.1/ext-all.js"></script>

    <!-- ExtJS Themes -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-themes/css/xtheme-XYZ.css" />

    <!-- ExtJS Overrides -->
    <link rel="stylesheet" type="text/css" href="/_app/ext-overrides/Ext.Overrides.css" />
    <script type="text/javascript" src="/_app/ext-overrides/Ext.Overrides.js"></script>

    <!-- ExtJS UX -->
    <script type="text/javascript" src="/_app/ext-ux/Ext.ux.XYZ.js"></script>

    <!-- Application Files -->
    <link rel="stylesheet" type="text/css" href="/_app/css/styles.css" />
    <script type="text/javascript" src="/_app/js/_Namespace.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass1.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass2.js"></script>
    <script type="text/javascript" src="/_app/js/MyClass3.js"></script>

Optimization

Larger applications may have hundreds of JavaScript files containing custom classes, methods, etc. Simply including each file in the HTML header will result in potentially long page load times – and this is far from ideal.

Many web servers compress JS files for you, and you always have the option of minifying your code – but loading hundreds of compressed and minified files still takes time and bandwidth.

One option is to combine/compress all of your classes into a single file – exactly as ExtJS has done with their ext-all.js file. This is a great solution – but it’s a manual process, one which can be tedious and is prone to user-error.

A far better solution is to automate this process – and if you’re using Visual Studio (like me), Dave Ward has a great post on setting that up.

Lastly, tools such as YSlow and Google Page Speed will suggest adding your JavaScript files to the bottom of the page. This may be advantageous; however, if your application makes use of the ExtJS Viewport or the famous Ext Desktop example, it probably won’t do much good as the UI is completely dependent on the JS framework.

Your Thoughts

Do you have any thoughts on what I’ve described above? Are you doing something that I missed?

I look forward to seeing your comments!

Resources

• Writing Compressible JavaScript (Ed Spencer)
• Abstract Classes with ExtJS (Jay Garcia)
• Using Namespaces to organize your JavaScript code (Aaron Conran, Sencha Blog)
• Writing a Big Application in Ext (Jozef Sakalos, aka Saki)
• Ext.override – Monkey Patching ExtJS (Ed Spencer)
• Automatically Minify and Combine JS in Visual Studio (Dave Ward)

This question comes from Nykc on DreamInCode: “Where do you find inspiration?”

This is a fantastic question because it allows me to dive into the different aspects of web development and web design. I generally separate the two disciplines because design is more creative while development is more mathematical. However, these fields are very similar and I often have to wear both hats on any given project.

Inspiration for Web Design

When my clients ask me to build or redesign their website, my goal is to deliver something visually interesting – but also something that effectively markets their brand.

More often than not, my inspiration for the creative designs on any given project come from other websites. Seeing other peoples’ work challenges me to think differently about my own layouts or designs.

At the same time, I often have to create designs that match existing logos or artwork. This presents me with another set of challenges, and I have found that the best inspiration in this case comes from asking my clients to explain the story behind their branding or the significance of their logo. Their responses usually open a huge world of creative possibilities.

Inspiration for Web Development

My inspiration for web development projects usually comes from an entirely different place.

As a small business owner, I’m always looking for ways to improve my own processes. As a consumer, I’m keenly aware of how I’m treated by the software I use. As a software developer, I know how time or technical limitations affect my projects.

My goal as a web developer is to always present a polished User Experience, and to do that I have to balance each of these POVs. In short, I use my own personal experiences as inspiration to build a better tool.

Ask a Web Developer!

Have a question you want answered? Contact me through my website or send me a message on Twitter (@arthurakay). Then stay tuned to my YouTube channel for the answers!

I’ve been asked this question a hundred times: “How do I get started as a Web Developer?”

The answer to this question is a bit complicated because “web development” has many facets and no one can possibly master them all. With the rise of mobile platforms (like the iPhone and Android) this statement has never been more true.

That being said, I think a lot of web developers have a similar story regarding how they got started. Maybe the best answer to this question is to tell the story about how I became a web developer.

With any good story, we need to answer: Who?, What?, Where?, When?, Why? and How?

The only questions I didn’t cover were Who and When… but those just mean you and now.

The one thing that you’ll find is that the web development landscape is always changing, which requires all developers to constantly refine and learn new skills. You need to make it a priority to read a new blog everyday. Also follow relevant people on Twitter – I see great resources posted several times a day.

Ask a Web Developer!

Have a question you want answered? Contact me through my website or send me a message on Twitter (@arthurakay). Then stay tuned to my YouTube channel for the answers!

I can’t argue with the poor vision – mine is absolutely terrible without glasses or contacts, and I used to wear the big coke-bottle lenses.

Does This Make Me Look Fat?

I know I could stand to lose about 5 or 10 pounds, but that hardly qualifies me as fat. I wholeheartedly disagree with that geek stereotype.

I think my profession has developed this reputation because we’re always snacking on something. Sugar and caffeine alone are probably responsible for 80% of all computer-related products. In fact, see the Urban Dictionary’s definition for “Geek Food”.

So I started thinking… and I noticed that many of my colleagues and I share the same snack food preferences. I’ve compiled a short list, and I’m curious to know if these snacks are preferred by the larger development community.

1. Skittles

Skittles are a personal favorite of mine – particularly the Wild Berry flavors.

2. Dr. Pepper

I don’t know what it is, but Dr. Pepper has a certain zing to it that my taste buds can’t resist. And it’s true: Diet Dr. Pepper really does taste like regular Dr. Pepper!

3. Snickers

It’s hard to go wrong with a candy bar… and Snickers bars have both chocolate, caramel AND peanuts. Most programmers will tell you this was one of the greatest ideas ever.

4. Donuts

Donuts are round. Eating lots of donuts will make you round.

5. Pizza

Everyone likes pizza – it’s required if you’re an American.

Did I miss something?

What are your favorite nerdy snack foods?

Seriously. I recently downloaded the Opera Mini app (v 5.0.0198) on my iPod Touch and I don’t like it.

I know, I know… there’s a million of you people out there who are yelling “It’s better than Safari!”, and in some ways you’re right. I can’t argue with the points mentioned on this video from YouTube, but let me outline some of the reasons I don’t like Opera Mini.

Where’s my video?

Obviously Flash isn’t supported on the iPod, but at least Safari displays videos embedded from YouTube. Come to think of it, YouTube doesn’t work at all in Opera Mini. WTF?

Why is everything left-justified?

Opera Mini seems to left-justify all text on the screen (unless CSS rules have it centered or right-justified) – but what really bugs me is that Opera Mini crams the text into a certain column width regardless of the text’s container. This is distracting, and as a web developer it pisses me off.

Zooming Sucks

Have you tried to zoom in on a webpage in Opera Mini? It’s a pain in the ass.

I’ll Stick with Safari

For right now, I’m going to stick with Safari. I really, really wanted Opera Mini to blow Safari away but I just feel like the app was rushed.

Anyone agree or disagree with me?

About 3 or 4 weeks ago, John offered a free copy of his new book The Referral Engine to a handful of bloggers in exchange for an honest review of the book. I sent John my information and was lucky enough to be picked – so here we are.

Disclaimer: I am not being paid for this review, and I do not have any affiliation with John Jantsch. However, I did receive a free copy of the book.

The Referral Engine: Teaching Your Business to Market Itself

Overall, I would definitely recommend this book to any small business owner. At 230+ pages it’s a quick read and very easy to follow. I would say that 75% of the book is basically common sense – be honest and trustworthy, offer excellent service, communicate with your customers – but The Referral Engine also highlights the most effective strategies for getting referrals.

John starts the book by outlining the realities and qualities of referrals. Why do people make referrals? There’s a handful of obvious reasons, but many companies don’t capitalize on the fact that their customers want to refer business to them. John then explains the 4 C’s of Marketing (Content, Context, Connection, and Community) and explains the Customer Life Cycle.

At this point (and we’re only 55 pages in!), the reader ought to have a solid understanding of the referral process. But John doesn’t stop there – he goes on to give us a real marketing strategy for generating referrals.

What I Liked Most

If I had to pick a chapter I liked the most in The Referral Engine, I would probably choose Chapter 12: Snack-sized Suggestions. Throughout the book, John gives a variety of examples and anecdotes that illustrate how real-world businesses utilize their referral strategies. Chapter 12 contains 14 pages of industry-specific ideas for generating referrals and sales leads, and each would be simple to apply to any small business.

My favorite idea from The Referral Engine (which I’ve already started doing) is to promise your clients they’ll be so satisfied with your work that they will tell everyone they know about you. It’s a brilliant idea… assuming you actually deliver on that promise.

Conclusion

Now that I think about it, John’s approach to marketing The Referral Engine is to simply generate referrals. He asked me for an honest review – and I will happily recommend this book to anyone. It’s a fantastic book, a quick read and full of simple (but effective!) marketing ideas. Kudos!

At this point, you may be asking yourself: What does that have anything to do with web design?

The Internet is Smart!

Take a step back from my story for a moment and think about your business. How do your customers find you?

As someone who spends most of their day in front of a computer, I almost always do an internet search to find local businesses. Every time I want to go out to eat with my wife, we look online to find nearby restaurants.

The cool thing is that the search engines are actually pretty smart – they list businesses related to my search even if they don’t have a website. The results are even plotted on a map so I can see how close they are to my house. Address, phone number, etc – it’s all there.

Back to my Story…

So like I was saying, I needed to find a variety of contractors to give us quotes for our patio extension. I opened my laptop and quickly searched for concrete/landscaping/decking contractors in my area…

…and Google Maps neatly listed nearby businesses. Some had websites. Others did not.

After looking through the search results for a few minutes, I caught myself contacting only the companies that had websites. I shouldn’t have been surprised by that (after all, I build websites for a living) but it illustrates a very important lesson: If you don’t have a website, how much business are you losing?

Appearances Matter

As the contractors came and went, I started to notice something else: I liked the guys whose appearance was professional more than the other contractors – regardless of price. I understand contractors wear boots and blue jeans, but some of these guys could care less about their appearance. I’m not kidding when I say that I saw one guy’s ass crack because his jeans were hanging too low.

Ewwwww!

The point here is exactly the same with your website: Your visitors will form an immediate opinion of you when they see your website. The Young Entrepreneur agrees with me!

But I’m more than just a nerd – I’m also (technically) a small business owner.

Running a small business has forced me to learn a variety of other skills,  including accounting, sales, and marketing. If I’ve learned anything since starting my freelance web design business it’s that the key to success (i.e. making money) lies in managing your time wisely, and I’ve found a bunch of free software applications that help me stay productive.

I thought I would take a break from my busy schedule to share some of the software tools that help me manage my business. Note-to-self: they’re all free!

Invoicing

One of the drawbacks to building a larger client base is that you need to track who owes you money.

I recently started using Intuit Billing Manager to handle my invoicing. The thing I like the most is that it allows you to customize the look of your invoices! It also sends my invoices via email, saving me precious money on stamps, envelopes and paper.

Client Management

I recently started a handful of marketing campaigns to generate more business. With a dramatic increase in sales leads, it became very clear that I needed a tool to manage my interactions with potential (and current) customers.

A Customer Relationship Management (CRM) tool does exactly that; it tracks your sales leads, clients and projects so that you can efficiently complete tasks and increase productivity. I chose to use Zoho CRM after testing a number of other CRM solutions because it allows me to track sales leads, current clients, active projects and marketing campaigns all from the same tool.

It also has the ability to integrate with any email marketing tool. Speaking of…

Email Marketing

Email marketing is the cheapest and easiest way to maintain customer relationships.

I recently started a monthly eNewsletter (signup here) to keep my clients aware of my recent activity. The benefits? It reminds people that I’m still alive and encourages them to refer my services to people they know.

I use MailChimp because it’s free up to 500 subscribers or 3000 emails per month… which is WAY more than I think I’ll ever need.

Web Conferences

In order to meet with clients who have busy schedules, it can be a huge time-saver to simply meet online.

DimDim is a free online tool for web conferencing – it’s basically the same thing as WebEx, minus some features that I don’t use anyways.

What are you using?

Do you have any suggestions to add to this list? I’d love to hear them!