Friday, June 18, 2010

Basics of website design for writers

In this post, I covered the importance of an online presence and the options available for writers to get a website or blog up and running for the lowest amount of money.

As promised, today's post will cover the basics of website design and how to streamline the process to make the time spent on production as efficient as possible. I'm assuming if you're reading this you are either a newbie or a beginner, so I'll be covering the very basics. This will be yet another long post, so bear with me.

Last time, I explained there were three ways to get a website: the professional way, the do-it-yourself way and the hybrid way. If you're reading this now, I assume you either want to do it yourself or go the hybrid way. In any case, you'll have to go through the major steps of website production.

1) Pre-production: figuring out a color palette and general layout (1, 2 or 3 columns, fixed or fluid width, etc.)
2) Graphically design the site in Photoshop or it's free equivalent, GIMP
3) "Cutting" the design and converting it to HTML/CSS
4) Bring the site online
5) Insure cross-browser compatibility
6) Bug testing and final touch-ups

You will spend a lot of time in steps 1-3... took me about 150 hours to make, over 125 of those hours were spent on steps 1-3.

1) Pre-production
This time is spent researching. Find sites you like, notice the general color palette used (as well as its consistency) and its layout.

A quick overview of a website's structure: a website is divided in sections, called containers or divisions. Usually: a header div, a menu div, main div and footer div. Within the main div, you might find 1, 2 or 3 columns are used to display the general content of the site.

Examples: uses a standard two columns layout. On the left I place "panels" with additional information or sub-menus to navigate the main sections. Nathan Bransford's uses three (orange left, white center, white right), Amazon uses three columns, PublishersMarketplace uses a three columns layout as well, but notice that a small section laps over both the main and right column for those who are unsubscribed.

Find images you like, and save them to your hard drive in a folder appropriately named.
C:/Website/ for all your HTML files
C:/Website/Images/ for all your images (.jpg, .gif, .png, etc.)

Since you'll have to work in Photoshop or GIMP a lot in the next part, find textures and backgrounds you like. Google "free (themed) textures" on Google. Example: "free grunge textures" brought me to many sites that provide free texture packs (usually, a pack is a lot of images zipped in one file) that you can use to design your site. This is how I came up with the teared paper line for the menu, the rocky background, etc. All the images on this site were made from scratch using a texture, sometimes many smashed together, then applying some color and effects to match the overall feel.

Before you begin the design part, good pre-production work will pay off quickly.

2) Design

This part all happens within Photoshop (or GIMP, the free equivalent, which is just as good for what you'll need to do by the way. Don't buy Photoshop at retail just to make a website, it won't be worth it. Consider Adobe Elements instead if you want paid software, which is a dumbed down Photoshop for half the price).

Make a 1200px by 900px new document, or something similar in size. Make a 1000px rectangle that will "limit" your work area and start designing. Before you do, a quick reminder on the general architecture of a website is in order.

We'll cover this in more details later, but you need to know where "stuff will go" while you design it if you want to be efficient.

Since you are a writer, you want to convey personality AND professionalism. You're not doing a personal page here. Professionalism in website design is conveyed by the general cleanliness of the design: it looks structured, it looks mathematically correct and it looks harmonious. You can tell within 5 seconds if a site was made by an amateur in Notepad with MS Paint, or someone who did his research. I am 100% confident you can to.

You'll have to know your way around PS/GIMP for this part. If you have no idea how to use it, consider watching a few video tutorials to get you going with the basic tools. You don't need to be fancy here. Just learn the basic functions (how to use shape tools, brushes, etc), the function of layers, and the different layer effects. This will be of HUGE help and will definitely work for you. Definitely learn to use layers. This is super important. Learn to use layers.

By keeping the above anatomy in mind (the site's, not Heidi Klum's, though I understand why you may think of her sometimes), start designing. Use rectangles, fill them with color, images, texts, and play with layer effects.

In general, you will want:
A) High contrast colors for background and text. 95% of the time, the color of the text should be DARKER than the background for the main column of the site. Black on white is good, white on black isn't so good. It can look nice, but it isn't practical. Some people still have old CRT monitors or LCD monitors with weak brightness and contrast on them, white on black will make it hard to see anything. Surf all of the popular sites: you'll see most have a white background, including Google and Amazon.

B) High contrast colors also means using hot pink text on a lime green background is a terrible idea. It will destroy people's retinas, make it almost impossible to read, screams of amateurism and will look plain unprofessional. Computer monitors display colors very differently from one computer to another. Photographers must invest 400$ in a colorimeter to make sure their monitor is properly calibrated to display colors accurately so our prints look as they did on our screen. Because YOUR monitor allows you to read hot pink on lime green doesn't mean this is the case for everyone. Be mindful of your color choice.

C) Harmony in colors. This means if your site generally tends towards cold colors, stick on this side of the wheel. My site has used a lot of shades of brown, beige and orange. These are warm colors. The wheel I refer to is this one:

Lime green and hot pink can actually work well together, but be weary because sometimes, color associations are burned in people's head and might send (Warning: link might be NSFW if you work in a prude office) cross signals. Whenever I see red and yellow packaging I might think of McDonald, for example. Orange and green rarely fit together, nor does white and yellow because of the poor contrast.

Play with colors and see what feels nice AND works.

D) Use gradients. This is a trick I've used for years and works wonders. GIMP has a gradient tool. Though they can be subtle and people might not even notice, the eye will. The orange panels on the left side actually use a gradient for their background. It's subtle, but if you compare the sides and the middle, there will be a light difference. The quote box I've used here also uses a gradient. As do many, many other sites. Next time you're browsing, look around for gradients you might have otherwise overlooked.

Gradients "soften" the overall look of a page and adds diversity. A monotone site (a monotone anything actually) is boring to look at. AnandTech is a professional site that makes the use of gradients really well.

E) Proper use of backgrounds. In photography, "busy" backgrounds are ones that might distract away from the subject. In these cases, we'll either choose another shooting location, use a backdrop or use a bigger aperture on our camera to get a shallower depth of field so the background is made blurry.

In website design, you have to be careful not to use a background that is too busy and that might distract from the overall feel, or make it difficult for people to read text. The gray box you are reading this text on right now: you might have noticed there is a subtle paper texture to it, but it's so subtle you might have missed it. Were it NOT there, you'd definitely see the difference if we compared them side by side. My point is, it does not distract. It's there to add an organic feel to the site.

A LOT of professional sites (Google, Amazon, Heidi Klum) use white. Barnes & Noble use white for their wrapper container (where the entire content is), but BEHIND this wrapper, they've used green with... wait for it... A GRADIENT! It's subtle, but the gradient is there. The colors work in harmony, and you know right away it B&N.

F) Fixed versus fluid width

A fixed site is one where the wrapper container keeps the same width no matter how big the browser window is. Some people surf the web with 2560x1600 resolutions (30in LCD monitors). A 1000px site will take half the page's space and leave 1560px (780px on each side if the wrapper is centered on screen, like mine, B&N and yours should be) of free space for those people. They are the exception.

In general, a fixed width layout is easier to design (you save a lot of hours), so this is what I ended up going with. The W3C statistics for browser resolutions are here, if you care to know which ones are popular.

3) Cut & convert

This is the final (and most difficult) step before you get the site online. Now that you've created something nice in Photoshop or GIMP, you need to cut that image in sections. So far, I've called them sections, containers and divisions. They all mean the same, but the proper term is a div, from the HTML code <div>.

Think of a <div> like a box. You open the box with <div>, put content in it, then close the box with the </div> tag. Example:

<div>This is the header of my site. This is where I will put images or text</div>

Though KompoZer will do the HTML for you, it's still good to know some of the basics. A graphic reminder of the anatomy of a site (learn it, it's important):

Site layout

In my case, this is what looked like after step 1 and 2 were done. Click on it for a bigger image:

It's not identical, but you can see I already knew where I was heading. For this part, you will need an HTML editor such as Dreamweaver (400$) or KompoZer (free). In my last post, I highly suggested KompoZer, and I'm doing it again.

Both editors have WYSIWYG capabilities. What You See is What You Get allows you to place your sections graphically without writing a single line of code, and KompoZer will write it for you. You need to understand that all sites are written in HTML, which is the mother language of website design. CSS is used in conjunction with HTML to make things prettier. Javascript, XHTML and Flash can later be used to add special effects or animations. But remember that HTML is the foundation of it all.

HTML is very easy to use. I mean it. It's not a complicated language at all. Coupled with CSS, which is also easy to use (though more complex than HTML), you could do a LOT. KompoZer will translate your graphic design to HTML, but knowing the language yourself will give you surgical precision on your site's design. Consider laying the foundations with KompoZer (as far as setting the containers is concerned), then switch to the "Code View" to see your page all in code and make a few tweaks.

The books I used to learn CSS are now outdated, but this one comes highly recommended from a good friend of mine who teaches the stuff in university.

KompoZer has a "preview" feature that allows you to see how your site will look in a browser. Check it constantly to make sure it appears as you want it to. If you need help, I've frequently visited these amazing forums. A lot of professionals and knowledgeable people hang around there and take time out of their day to help you if you're stuck. Show them courtesy and gratitude and they'll happily help you. If you behave like an asshole, you'll be shown the door with a foot up your ass.

4) Bring it online

This is where the host you paid for will come into play. If you used Godaddy, your welcome e-mail will include information on how to publish your site. The usual method if via FTP, using a FTP client. This site runs yearly polls like this one on which software the members like best. It will help you choose which FTP client you want.

Godaddy also allows you to upload files via their control panel. The first page any site will display first is the one named index.html. Rename your homepage to index.html, upload it and type in your address to access it.

Don't forget to upload your images using in the same folder structure you used on your PC.

5) Compatibility testing

Most people who don't do any web design don't know this, but all webmasters know of it, and it's hated as much as synopses are hated by writers. Internet Explorer has been, for many years, a total train-wreck and a fuckcluster of massive proportions.

The standards for web coding are maintained by the W3C (introduced earlier) and most browsers, including Firefox, always respected them. Microsoft, in their infinite wisdom (none), never cared until Firefox became hugely popular.

Unfortunately, some people still live in the dinosaur age and use IE6 or IE7, which are both extremely insecure and bug ridden. W3C statistics for browser popularity. Enjoy.

In the past, making a website show identically across all browsers (Netscape, Safari, Opera, Internet Explorer 6, Internet Explorer 7) was a huge pain. It required several hacks in the code, because each browser interpreted the code differently.

Then Firefox, the savior, swept in. Firefox is an open-source project, which means anyone in the World can see the code behind the software. It has always pledged to respect the W3C standards, it is continuously developed by hundreds of people all over the globe in a joint effort, is free, and is the most secure of all browsers.

Firefox now holds 46% of the market share for browsers and my hope is that it will one day achieve 100% and be the death of IE. Internet Explorer is the biggest piece of shit Microsoft ever did (after Windows ME perhaps). They never bothered to respect the standards and they didn't listen to the security experts who told them their browser had holes all over it. Not until Firefox came and started luring away many millions of users.

Even Google has stopped to support IE6 and IE7. The latest version of Internet Explorer, IE8, now respects the standards of W3C. It is more secured than it used to and actually works great. Now. After decades. You know what? TOO LITTLE TOO LATE, BILLY!

Chances are what you see in Firefox will be identical in IE8, and that's a good thing. Your site might appear differently on IE7, and appear as a monstrosity for those dinosaurs who still use IE6. While Amazon can't risk losing business because of IE6, you don't have their pockets or time. Insuring your site displays 100% well on ALL browsers may take weeks of additional efforts, if not months.

My suggestion? Make sure the site shows well in Firefox and Internet Explorer 8, maybe IE7 too if you're a masochist, then move on. You're a writer, you don't have time to pay for other people's shortsightedness. I do suggest you move to Firefox (it will import all bookmarks and stuff) if only for all the themes. Google Chrome is a good option too, but it is still young. Plus, I don't thing Google should be allowed to conquer everything. Skynet must be kept in check.

Yes folks, the fox revolution HAS BEGUN! Yeeeehaaaaaaaaaa!

6) Final touch-ups

Also known as debugging, this is when you go through every section of every page and try to find bugs. Then you fix them.

Let us conclude...

I know this was a long post. I did my best not to include any techno-talk (I think I did well there), but wrapping your head around all this information might not be easy. I understand that. Learning something new is never easy.

Your website creation will require a lot of effort and time, especially if you never did any of this before. Before we part ways, let us review the steps in one go.
  1. Pre-production: research, collect images & textures.
  2. Designing: done in a graphic software. This is where you design (duh) the overall site, while you keep the anatomy in mind. Don't forget the anatomy.
  3. Cutting: Transposing that image you made into web code, using a HTML editor .
  4. Bring the site online: Publishing your pages on your host's server.
  5. Check cross-browser compatibility: Firefox and IE8 only. Fuck the rest.
  6. Bug testing and final touch-up: Where you call all your friends and family and pop open a bottle of champagne, because you're done and you're proud!
I hope this was informative and helpful for you. As always, I stand by to answer your questions in the comment section!

Have fun!

No comments: