Think like a designer first, Then a programmer

The planning stage of a web project is important not only because, well, you always need a plan!…but it also gives the developer a chance to work out any solutions to the inevitable challenges that all projects present. Often the timeline of a project will be tight, and the only feasible solutions are the fast solutions…the time-tested ones that may force a bit of compromise on the part of the designer, but the site will work. Other times there will be some wiggle room in the deadline and the developer can get a little more innovative, flex the old problem solving muscles and really create what the designer imagined, with no compromises. That is, as long as the client is cool with the bill…

So, what if you are the designer AND the developer? Time to wear two hats. Thinking like a designer first means that you lock away the developer in you for a while, focus on the user experience, the look & feel, and the aesthetics of the project. Whenever you jump into a design stage with a developer hat on, that little developer voice can’t help but point out what WON’T work, what CAN’T be done, what MUST be rolled back. Sure, sometimes it’s good to be reasonable and not let things get too dreamy in the design stage, but some of the best solutions are found when you push things by setting the bar higher than you think you should.

One of the worst things to do is design everything based on prior work and just use the same old tools. This is the old Maslow’s Hammer syndrome – “When the only tool you have is a hammer, it is tempting to treat everything as if it were a nail” Again, this can benefit you in a crunch, where there just isn’t time or budget to really dig in and build a custom solution, but if you really want to grow as a developer, you have to push your boundaries. More often than not, you are going to learn some new things and add a few new tools to that old hammer in your box.

Thoughts on the ‘New’ business philosophy and Open Source

As technology evolves, we find ourselves surrounded (buried?) by all the new cool web technologies, software, hardware, etc… and the ball is rolling faster than ever. It is easy to feel left out, behind the curve, lost in the seemingly infinite possibilities that are emerging. When it comes to making a living from technology, I think the old business philosophies are dying out and the new ones are taking hold.

The old philosophy that I refer to seemed to center around developing a product and protecting it, controlling every aspect of its creation, marketing, distribution, and legally chasing down all of the copyright infringements and related entanglements that threatened the product. Companies might have one or two main products that they offer, focusing the majority of their efforts on this…’Putting all of their eggs in one basket’ if you will.

Out with the old, in with the Open Source

Spend enough time on the internet and you will run across the term ‘Open Source’, which originated with the idea that the ‘Source Code’ (the guts) of a program were open for programmers to change and modify to their needs. This also implies open redistribution of the software, which allows everyone to share in the fun, no charge involved.
Essentially it is the type of thing that was unheard of in the past…but things are changing.

You might be using it now

Some of the more popular open source programs are FireFox, 7-Zip, Audacity, FileZilla, Blender, Gaim, OpenOffice.org, Thunderbird, VLC Media player – and you can be sure these run as well or better than their pricey competitor’s offerings. One advantage of being open source is that many more developers can offer faster solutions and bug fixes, instead of the old bogged-down-in-bureaucracy model that many larger companies suffer from. So how does this work at all in terms of business and making money?

When I see a company like Google offering something like Android, which is an open source mobile device OS, I see not only the brave move on their part to go open source, but I also see that new philosophy being embraced…why on earth would a company create and distribute something that can be altered and tweaked by anyone and everyone, and how will they sustain business when they don’t charge anything for it?? Don’t they want to guard, protect, litigate, hide, secure… ?

By offering something for free, they open the playing field to anyone and everyone, and being a major tech player like Google, they can leverage this in many ways. It is not only advertising for them, it creates other opportunities for them to create services and products that they do charge something for. Many eggs…many baskets. They aren’t just going to build something like Android and then sit back and wait. They are constantly coming up with new intellectual property that they introduce to the marketplace. One benefit of the internet is that things can change much faster than material goods, like cars or other tangible items. Rapid development, rapid implementation. If one thing doesn’t work so well, bag it and put something else out there.

Keep the flow going

By constantly pushing new technology out there and embracing ideas, the prolific company can stay fresh and agile, not getting bogged down in one area, not investing 100% of their efforts into a single entity. They know that more ideas are coming, their development process isn’t based on a ‘goal’ to build a single successful product – its to be a juggernaut of ideas…a steady stream of new products and services, and offering some of them for free not only generates advertising, but it gets the company’s products and services in the hands of users…which opens up the opportunity to create a life-long customer, which even by the old philosophy is a very desirable thing!

Web Page Layout – Basics Work Best

There’s a little game I play in my head when I first visit a website. I generally have 2 reasons to visit a site:

1. I just want to check it out (no real mission or purpose)
2. I am looking for something (whether it’s a specific item, news, information, etc…)

My ‘game’ consists of figuring out how fast the site ‘trains’ me to use it. If I wander around aimlessly trying to find something interesting, chances are the designers of the site didn’t put much thought into organizing and presenting the content to make it easy to find the ‘good stuff’.

I say the site ‘trains me’ because that is what a good site should do – teach me where to look for things quickly and easily, without any second-guessing or confusion. I should be able to immediately find the main navigation, the main sections, the most recent content, etc… without stumbling around guessing at weird navigation that a ‘clever’ arteest came up with.

Creative pursuits often invite the ‘rules are made to be broken’ mantra. Unfortunately, the gross violators of this rule (and the ones that gravitate to it immediately) are often the lesser experienced…who have not yet found the virtue of bending the rules within a set of boundaries, as opposed to blowing them into tiny pieces with all disregards for subtlety. The more experienced artist knows that the really good stuff is in those subtle details… work within the boundaries or rules, bend them just enough, and still knock it out of the park.

Back to the game – As I navigate through the site, I come to expect the menus and content to follow a pattern – when I go to a new page the navigation should still be in the same place…the main content should be as well, etc… If things move around each time I change pages I am not being trained very well. Score-Me: 1 Site: 0.

Plan a website from the ground up

Your first stage of planning for a site should not be what colors or fonts to use, or which shade of gradient to use for the backgrounds, or how fast the logo should be spinning around…it should be a very basic outline of the pages, with some general layout ideas, establishing some consistent placement for the menus and content areas. Most of the time common sense will reveal the answers to most design issues at this stage. If you start out trying to decide on the line thickness for the borders, you’re really going to lose sight of the goal – which is to make the site easy to use!

Rip up some paper

There’s something about the tactile feel of actually using pieces of paper to begin the design process that I really like. Call me old-school, but stepping away from the keyboard and mouse for a minute to push some post-it notes around can yield some fast results. Once you start really seeing how the page elements ’sit’ in a design, the ability to (very) quickly move them around is nice. Plus, it forces you to come up with the main page elements right from the start, instead of trying to solve spacing or other issues on a computer screen, even in a mock-up.

Clear the mind, train the user

Put yourself in the user’s mindset – pretend you are arriving at the site for the first time. What do you reach for first? Is it obvious to you where the navigation is and which content is featured? If there is a news or frequently updated section, is it easy to find? Are there tools like subscription or RSS feeds? They should be dead-simple to find. No guessing, no hunting. And they should appear on each page the same way.

Size Does Matter

One thing a lot of sites seem to disregard is the use of size for emphasis on certain elements. Buttons and other clickable things should always have ’size relevance’. Group your elements by sizing/shaping them similarly. Spacing can be used in much the same way. Nothing is worse than random spacing on the page – it can mislead the user into thinking related items are not related, or at the least invite those little warning signs in their head not to ‘trust’ the site. This is a whole subject I’ll save for later, but very important. Gain their trust…teach them well. They’ll be whizzing around your site and coming back for more, confident that they can find what they need.

Checklist

Before you start agonizing over the latest font trends, try hashing out a few things from this list:

1. Write down the 3 most important functions or purposes of the site (keep it to 3 for now!)
2. Make a list of the main sections or pages of your site
3. Decide the hierarchy or order of importance for each section
4. Reduce the original sections you created to include only the MOST important ones from the list you just made in #1. Don’t create sub-sections just yet. Keep things simple!
5. Create some scaps of paper or better yet, post-its with the general size relationships and begin laying them out where you think they work best.
6. Come up with 3 or 4 layouts even if you like the first one. You never know what you’ll accidentally find
7. Review your list of important site functions and see how the layouts reflect that hierarchy. Do the most important sections stand out as important?
8. Refine…review….refine…review…

Stick to the plan

Once you have gone through the initial planning stage and you are ready to mock-up some pages, make sure you stick to the plan! No matter where the design starts going or how ‘creative’ the design becomes, always make sure the basic ideas stay intact. That was the whole purpose of the tactile layout exercise…the ideas you come up with in that medium are very important and can easily be lost when you take it to the screen and have an arsenal of technology to throw at the problem. Stick to the basics and find some subtle ways to knock it out of the park!

Web Design, Richmond VA Style

As I wander around the internet, I like to check out the latest greatest websites, the hip new design trends, basically anything that catches my attention. The more you surf the web, the more you pick up on certain design conventions that become the trend du jour – and it happens in every facet of life – clothes, music, art, etc… Someone comes up with a style and it gets emulated and permutated until the next one comes along.

Have you ever seen someone sporting the latest fashion trend and had the impression that maybe their personality didn’t quite fit the costume? Even though the clothes were popular or trendy, they were too far from the person’s actual character for it all to work? Well I think websites can flirt with that same type of disaster if the vision of the designer isn’t clearly in synch with the customer’s needs.

Think of your website as a building. As people walk by this building, they are most likely going to draw some basic conclusions from the appearance, right? Certain visual cues can say a lot about what you do or what you represent. Choices of color, imagery, text copy, all say something about your site err…’buildings’ purpose. A picture is worth a thousand words, right? Make sure the picture you present is accurately telling your story. The same design style isn’t going to work for every site.

If I go out and hire a designer who wants to show off their super nifty modern design skills, and they build a site that looks like something you’d see in the MOMA, with tons of flash animation and other stylish frills, is that the best choice for me if I sell farm equipment in a rural area? Probably not…Knowing your audience is the first step. Hiring a web developer that can adapt to your situation is the next. Sure, there are plenty of situations where the latest, hippest style is perfectly suited for a site, and sometimes it just doesn’t work.

Accommodate, don’t Alienate

Know your audience – if your site is primarily an online ‘brochure’ and just provides information about your business, a list of your services, etc…, then keep it simple! Don’t overload the user with a bunch of unrelated junk that slows them down or requires them to download a new browser just to view your site. You want to accommodate, not alienate. If your website is a pain to deal with, the user might make that same assumption about you.

Check out the competition – this is a no-brainer in any business. It’s not that you should rip-off your competitor’s ideas – but chances are that they have done some research into what works and so should you. Just focus on making it work better, while reflecting your style or image. You lose credibility when you just copy others – take it a step farther – raise the bar. But concentrate on what is unique about YOUR business. Don’t adopt a style or trend that doesn’t fit your image or personality just because it is ‘in style’, unless the nature of the site calls for it.

The Canned Site

One mistake I have seen too often is the ‘template’ site design – where someone goes out and buys a pre-made template site, where they can just add in their logo and text, to ‘personalize’ it to their needs. These can vary wildly in quality, and to the do-it-yourselfer, it seems like a great idea, but the end result can be pretty far from great. Chances are if you’re a business owner, you aren’t immersed in the latest design trends and website jargon, and it’s easy to make some mistakes that an experienced web developer would have steered you around. Using a cookie-cutter, un-original template says ‘I don’t care – I just need to put something out there’ – Is that how you run your business also? The days of ‘just getting something out there’ are over.

First Impressions are Everything

The web is where people go for information, so make sure you are represented in the best, most accurate way possible. People should get a sense of what you are about just by looking at your site, and making good design choices is a big step in the right direction.

Why isn’t your site in Google, Yahoo search?

So you get your site up and running, have a nifty design and a really cool home page, and you can’t imagine why in the world it doesn’t come up first in Google’s search results? Well, there are many many things that contribute to a good search ranking, and there is plenty of voodoo involved.

Google prides itself on the technology it uses for page rank…and millions of dollars are spent each year to try and make sites show at the top of their list. After all, how many pages do you really want to look through when you want to find something online? The first few results are definitely where you want your site to be. SEO, or ‘Search Engine Optimization’ is the name of the game here.

So – how? The place to start is making sure your site is built correctly, using sensible web coding conventions and following some simple, though very important guidelines. The robots that Google and other search engines use to ‘crawl’ your site (read through with an automated cataloging process) can interpret the structure and content much easier if your pages follow these conventions.

Just to point out, there is NO sure-fire, guaranteed way to get good rank for a site. It takes a combination of many things, and even then there is a certain amount of voodoo involved, especially regarding competition. If you have a business that only sells only Purple Edible Cell Phone Covers, then the chances of your website – purpleediblecellphonecovers.com, getting high rankings, is pretty good, since you’re probably the only site out there that is offering such a thing. Not so when you’re selling…say…Books. Plus, sites with deep pockets can pay for top ranking, zooming them right to the top of the list.

Beyond the hot competition out there, there are things like title tags, keyword tags, description tags, and other ‘Meta’ tags that can help (or hurt) your rank. Volumes have been written debating the validity of these different tags, and the best advice is to use them with an educated approach…learn what NOT to do, and then go from there. It is quite possible that abusing the system will get your site banned from a search engine if your site appears to be mucking about with keywords or trying to ‘trick’ the robots. Something as simple as having a strong, relevant title for each page of your site can help you improve your rank. Likewise, each page should have a unique description – Google even tells you to do this and I still see high-profile sites FAIL that simple test.

Another aspect of good ranking is that of content. Pure and simple, your site needs good content, and frequent updates. Make sure when you plan out your website that you allow for possible future expansion, frequent content updates, and ease of use.

That ease of use will ensure that your visitors return often, another crucial page rank factor. When the all-seeing, all-knowing search engines see that your site is well-trodden, your rank will improve. A method for attracting that traffic brings me to another very important part of SEO – something that underlies the very nature of the web – Links in and out of your site.

The internet is nothing but a collection of computers strung together, that host a plethora of content which is accessed through…you guessed it…a bunch of other computers. When you search for something on Google, you are merely sending a few words of text over the internet to the Google computer, which looks through its (huge) database of web content that their robots collect (sounds kind of freaky – I know) and then it spits out a list of relevant links that it has determined your search relates to. You click one of these links and pow! you get sent along your way to connect to yet another computer that hosts the content your were search for.

So in a system like this, it really makes sense to have as many incoming links to your site as possible, which not only increases the chance of Google or Yahoo picking up your trail, but by virtue of pure odds, increases the chances of someone stumbling across your site. Imagine if you wandered around the country for a year, dropping your business card all over the place…then compare that to simply hiding one business card behind the bookcase in your living room….which tactic is going to give better exposure? It’s a no brainer. Try to get as many legit sites to link back to you as you can, and link to theirs in return. To sum up, the more incoming links, the better.

So, here I have only really skimmed the surface of this subject, and the amount of things that go into good SEO can become overwhelming, but if you want your site to be found, you will have to make sure your SEO plan is strong and purposeful.

Fix that Gamma, Mac

Ever noticed how bright a Mac screen is when compared to a PC?  I guess Apple likes to have the ‘wow’ factor of the mega-bright screen, but the reason for this is not because Mac screens are gifts from the monitor gods…it’s because they ship with an obsolete Gamma setting – 1.8 to be exact.

Don’t get me wrong – I’m not a Mac hater. In fact, I use one for most of my web development jobs.  I use both PC and Mac actually, and find that both are essential for serious web and graphics work.

So, back to the gamma – the problem with using the Mac’s default setting is that while the images you are working on will look nice and bright and nifty on your Mac, the majority of users viewing your site will see them as dark, brooding, and lacking in detail due to the PC’s gamma setting of 2.2.  Surprise!  So, how do you fix? Luckily it’s simple.  If you have already done any serious screen calibration, you probably already set the gamma to 2.2.  On the other hand, you may have calibrated it and unwittingly kept the 1.8 setting, which you don’t want either.

The quick fix is to open your Apple Menu > System Preferences > Displays > Color and then choose ‘Calibrate’.  If you want to go through a full calibration, click the ‘Expert Mode’ checkbox.  Be prepared to go through a series of little visual tests that will calibrate your screen temp and contrast, etc… Make sure the room lighting is fairly dim, no lights directly glaring on the screen,etc… as these factors can ruin your monitor performance and color perception. 

If you just want to do the gamma setting, uncheck the ‘Expert Mode’ box, click continue, then choose ‘2.2 Television Gamma’.  Click continue, select ‘native white point’, then name your profile, and you’re done.  This will be the monitor  profile you use from now on. Welcome to the gamma-savvy club.