As an engineer, I know how frustrating front-end development can be. After dealing with back-end databases, sever code, various frameworks, security, scalability, and other engineering issues, it’s difficult to find the time or appetite (or talent in my case) to make it all look nice and pretty on the presentation layer. In this article I will try to break down some simple guidelines and good practices that will hopefully alleviate the difficulties that engineers sometimes face during front end development.

1) De-Emphasize Prettiness — Focus on Your Goals

Many people out there who will tell you that your site has to be pretty or in some industries hip or edgy. To some degree they are correct. But to a large degree, that statement is damaging, overwhelming, and out of touch with web business practices.

[login]It might be very intimidating for a person who isn’t a professional designer to try to make a site look beautiful. Not all of us are visually gifted. I know I would never be able to make a truly beautiful site. Additionally, pretty sites take a lot of resources to create, and do not always end up accomplishing your goals. Typical page goals are to get a person to make an account, click on an ad, make a purchase, or engage in some other action.

While there may be some correlation with pretty-looking sites and highly converting sites, it is a strong distinction to keep in mind. To be highly converting, prettiness helps, but more important are page clarity and ease of navigation and use.

2) Think Conversion

Whether you want the user to click on an advertisement, sign up for something, buy something, or interact with another part of the site, there are three main things you have to do: 1) Decide on the action you want, 2) Make the action very obvious and 3) Follow up with email reminders whenever appropriate.

It is more difficult to decide on the main subject of a page than it may seem. One page may contain an ad, a suggestion to create an account, a product for purchase, and a number of other things a user may do on your site. If they click the ad, they won’t sign up and may never come back to your site. And if they sign up, they will not click the ad and you might not make money. It is not easy to choose one action for a page, but if you are confused about what you want the user to do, it is likely that the user experience will be somewhat confusing as well.

Finally, even though you may be thinking about your business or your site all the time, your users are probably not spending their day thinking about your site. They are busy with their lives and the million other sites, entertainment venues, or products they could potentially consider. Send them occasional email reminders that you exist by offering great deals, notifying them of certain events, or new products. Try not to annoy them, and make the email look natural, giving them something they originally signed up for, and reminding them of your site at the same time. That way, if the site visitor does not do exactly what you want them to do on your site from the first try, you are able to give yourself a second chance to make that visitor into a customer.

3) Content on Your Pages: User-Generated vs. Dynamic vs. Hand-Written

Having a page well-designed for conversion might seem pretty difficult, but it is only half the battle. Don’t forget that you actually have to fill the site with some content like words, images, or videos to generate interest in the page. There are 4 types of content you can have:

• Hand-written content- – this is probably the best-quality content you will be able to have. You have control of it and can ensure that it is well-written. Unfortunately, it is the most time-consuming type of content there can be and creation of such content just does not scale well with humans.
• Dynamically generated content — Dynamically generated content is machine-generated content. This type of content is great because it is very scalable. Unfortunately it is problematic for a number of reasons. If you allow an algorithm to create your content, you run the risk of introducing errors created by software bugs, or having content that doesn’t make sense to people who read it. It is also bad because unless you are very careful, you run the risk of appearing to search engines as though you have duplicate content on various parts of your site. That can get your pages banned from Google and other search engines due to suspicion of you having duplicate content.
• User-generated content — this type of content generation is also great and scalable. If you can get your users to write reviews, comments, or other text on your site, it is like getting someone else to do your work for you and pay you to do your work too. Unfortunately, most users do not care about your site’s content quality as much as you do, so expect lesser quality content than you would have if you wrote the page yourself. Plus, you do not know where the text they are inputting is coming from. So there is some small risk of having duplicate content.
• Copied and pasted content from elsewhere — I do not recommend ever doing this. In fact, I have never come across anyone recommending this practice. Despite that, there are thousands of sites out there with blatantly copied content. Over time, the search engines will generally figure out that the content is copied and ban the copying page from their searches all together.

4) Float Elements Left and Right for Easy Layout

This may be obvious to many people, but can be pretty confusing if you aren’t doing front end development professionally. The most useful and simplest way to space things out well on a page is to use the css float:left and float:right styles in order to designate column widths and create subsections. Here is an example of how to have 3 columns (if you just want two columns, take the middle one out):

The last line takes care of div-overlapping issues that happen when one column is taller than another. This is a very simplified example, but it is the fundamental skeleton for many different things you can do later. Just remember that for sound practice, try to take out the style specifications and put them into a separate .css file. Additionally, make sure the outer div is wide enough to accommodate the widths of the combined columns.

You may notice that I gave the columns their own widths. I did it on purpose because instead of picking any old widths, I picked ones optimized for ad placement. You can sneak in a 200px by 200x on the left-most column and the 250×250 pixel ad anywhere along the two right columns — just an idea.

5) Perform Extensive Analysis

The first version of your site should probably never be the last. Picasso continuously refined his craft and so should everyone else. There are many different types of analytics software that can give you an idea of what your users like, what they don’t, and what confuses them. You have to monitor the behavior of your users on the site and try to understand their experience. It will give you insight into what isn’t working out and what needs to be refined. In other words, to create a better design, you are limited without knowing what part of your current design is bad. Just iterate and continuously improve on the worst-performing parts of the site and eventually your site design quality will improve.

6) Ask for Advice

As someone who is not a front end developer, I often think I just made the greatest page (to my own potential at least), just to find out that people think it looks like web1.0. There is a reason for that. My priority in creating a page is 1) Usability ease, 2) Conversion 3) Sticking to solid engineering practices, 4) SEO and only 5) Style. There are a number of other considerations to keep in mind when creating pages, so it is very easy to lose focus of how pretty the site looks. It is always good to just ask people next to you, or someone web-savvy, for advice or feedback. They might ruin your confidence, but they will surely notice many things about the page that you could change or improve.

And a bonus tip for the mentally strong out there: find or create someone who really doesn’t like you or your site. They will usually give you the most honest and harsh feedback possible. And you will use that feedback as a free and extra insightful review, and make your site better thanks to the extensive feedback.

7) Page Footer

The footer is great for a number of things because people are accustomed to the footer serving a few roles, making it a pretty flexible spot on the page. If people want to know about you or your company, and do not find that information, they generally look in the footer for it. So put all those links there, making the meatier part of the page cleaner.

The footer is also known to be the least-read and least-utilized part of a site, so as a webmaster, you can get away with putting some small-font text in the footer. People won’t really read it, but it will be useful for SEO purposes. Also, any not-so-useful links you may have can be placed in the footer to clean up the main part of the site. Additionally, if your site serves ads, you may want to put an ad in the footer right above all the links because people who have reached the footer of a page may be done with that particular page and looking for new content. Because they are looking for new content at that point, they will sometimes click on ads if the ads look interesting. It is better to monetize the user with an ad instead of simply losing them for nothing.

8) Score a Goal with a Header

The header is a very strange spot on a web page and it is best discussed when subdivided into a number of areas:

• Left side — nearly universally recognized as the place to put the logo with a link to the home page

• Right side – this is almost universally one of the least looked at or clicked areas of a page. If something is important, do not put it here.
• Middle — it is very difficult to get right after the balance of logo on the left and nothing important on the right. Many sites somewhat mistakenly place an ad on top, but this isn’t a spot that gets a good click-through rate. The best spot for ad-click-through is where page content typically begins as this is where the user’s eyes are generally focused. Probably the most important thing is to have a well-defined and somewhat short list of site areas to help the users easily navigate the site and prevent them from being lost whenever they get deep into the site’s pages.

9) Page Sidebar

The sidebar is one of the most important parts of the page from a usability point of view. If a user gets lost or confused on your site, he or she often looks on the top navigation bar or the sidebar for a hint of the site structure. As a website developer, you do not want to miss your chance to set your user on the right path. Make sure there are not too many options on the side bar. If you have too many options, it might confuse the user and they might leave. Try to put as many non-vital links as possible into the footer so that your sidebar space is cleaner. About 10 sidebar links is probably a good number.

For extra bonus points, try to have some dynamically generated links as the last few links in the sidebar. They will boost your site’s SEO at the same time as you are being mindful of design, helping you kill two birds with one stone.

10) Some Tools to Help You

For analysis of your site changes, the standard free tool is Google Analytics. A few other analytics tools are Chartbeat or CrazyEgg. They all measure different things and it is up to you to figure out which metrics are crucial for your site and find the tool for that.

For image manipulation, try tools like Aviary or Pixelmator. A great tool that I found really useful in mixing and matching HTML colors is ColorBlender. To create the logo, there are a number of options like the minimally-priced 99Designs or a myriad of other sites like BrandStack.