This two part tutorial will be about using the popular data abstraction technology, Hibernate, along with Google’s “Google Web Toolkit” to build data driven web applications. It will show the basics of setting up the project, the UI, and then linking the GWT app to access a MySQL database through the Hibernate layer by building a simple employee database application.

In this part I will give you a brief overview of GWT and Hibernate and what they are used for. The main focus will be about using GWT to build powerful interfaces using only built in widgets.

What are GWT and Hibernate?

The Google Web Toolkit is an extremely powerful piece of tech; it allows the developer to focus less on browser compatibility and focus more on building complex web applications. All you need is some basic Java knowledge and your already well on your way to making some extravagant interfaces.

Hibernate is an Object/Relational Mapping technology which allows users to access and manipulate databases through POJO’s (Plain Old Java Objects). It relieves the headache of building efficient queries with tons of joins.

Before Continuing

This tutorial will use the Eclipse GWT plugin to make project setup and such simpler, so be sure to head over to the GWT site and follow their steps to set everything up. If you don’t plan on using Eclipse the getting started page has steps to use the SDK without using an IDE, but for the purposes of this tutorial I will be using Eclipse.

Building the Interface

In the first part of this tutorial, I’ll go through the process of building the interface. First things first, lets setup the project in Eclipse. Bring up the new project dialog and expand the “Google” folder, here you’ll choose “Web Application Project.” Leave everything on their defaults except “Use Google App Engine,” we aren’t going to be using the app engine so we don’t want this checked. To make things simpler I’m going to refer to this project as EmployeeDatabase, but make sure wherever you see this to put in the name of your project.

While building the interface we’re going to need the POJO which is going to represent the employee database. To keep things simple we’re just going to have one employees table that will have the employee’s name, position, department, and salary as fields. So for now just use this as your Employee.java and put it in a new subpackage under shared called “db”, we’ll get into using this as a mapping to the database in the next part.

public class Employee implements IsSerializable {

    private int id;
    private String name;
    private String position;
    private String department;
    private double salary;

    // Getters and setters and explicit constructor
    // omitted to save space

}

Another thing we’re going to need is to initialize the module. In the war folder that GWT created, open the EmployeeDatabase.html file, take out all the extra stuff after the h1 tag, and add two divs with the id’s “mainContent” and “formContent”. The mainContent one is pretty self explanatory and I’ll get into the formContent later on. So the end of the html file should have these lines just above the closing body and html tags.

<h1>Employee Database</h1>
<div id="mainContent"></div>
<div id="formContent"></div>

Also, add these lines to the end of the EmployeeDatabase.css file.

.gwt-Label {
	width: 100px;
}

#mainContent {
    float: left;
    margin-right: 10px;
}

Now go into the main client package where you’ll find the EmployeeDatabase.java file. Take out all the pre-generated code so all you have is an empty onModuleLoad() method. Inside the onModuleLoad() method we are going to add the following lines:

Panel mainContent = RootPanel.get("mainContent");
mainContent.add(new EmployeeView());

I’m going to follow the Model-View-Controller (MVC) design pattern to make the code a little easier to follow, so using the package structure that the sample code makes add views and controllers subpackages under client (We’ll have the views in client.views and the controllers in client.controllers). The model will be the server implementation of our remote service, but we’ll get into that in the next part.

So now lets make a new EmployeeView class in the views package and have it extend the VerticalPanel class. Having the views extend a vertical panel isn’t required, but it makes it easier to add new widgets to the page your working on. The main thing that we need in any database management application is a table to display the contents of the table we are working with. For these kinds of tables I like to use CellTable’s, they have a lot of optional functionality that can make the table even more useful while only adding a few lines of code. A few other objects we’re going to want is a ListDataProvider, SimplePager, and MultiSelectionModel. Since some of these classes use generics we’re going to be using our Employee class to instaniate them. We’ll have all of these objects as fields of the EmployeeView class and initialize them in the constructor.

public class EmployeeView extends VerticalPanel {

    private CellTabletable<Employee> table;

    private ListDataProvider<Employee> dataProvider;
    private MultiSelectionModel<Employee> selectionModel;
    private SimplePager pager;

    public EmployeeView() {
        table = new CellTabletable<Employee>();
        dataProvider = new ListDataProvider<Employee>();
        selectionModel = new MultiSelectionModel<Employee>();
        pager = new SimplePager();

        // We have to associate all the utilities to the table
        pager.setDisplay(table);
        dataProvider.setDataDisplay(table);
        table.setSelectionModel(selectionModel);

        // Add the widgets to our EmployeeView panel
        add(table);
        add(pager);
    }

}

Now that we have all the objects we need to interact with our data table, we have to setup all the columns of our table. I usually like to make a separate method to do this to keep things a little more organized so right after the table.setSelectionModel() line make a call to initColumns(). We’ll have a column for each, but to keep this short and give you a little homework I’ll just show you how to make the id column.

private void initColumns() {
    // Employee id
    Column idColumn = new Column(
            new TextCell()) {
        @Override
	public String getValue(Employee object) {
		return Integer.toString(object.getId());
	}
    });
    // You will add the rest of the columns here

    table.addColumn(idColumn);
}

Now you can save your work and run the project, when you go to the URL it will take a bit for the table to show up depending on your computer’s hardware. This is because it’s doing some computations to display the Java code on the page, but when you actually use the GWT compile tool and move it to your Tomcat server (or whatever java enabled server you use) it will be in super efficient Javascript and be lightning fast. Since it’s just the table with no data it’s not very exciting, but you see how easily and quickly we have our table with paging and multi-selection capabilities.

Next thing we’re going to add are some buttons to add/remove employees into the table. This is where that formContent div is going to come in; when the user clicks the “Add Employee” button we’ll have a form display in this div. For now we’re just going to be using the dataProvider to add/remove entries in the table, in the next part we’ll also be making server calls to manipulate our MySQL database.

Google made making buttons and adding functionality to them just as simple as it is in the Java swing libraries. In this code block we’ll make the buttons, add handlers to them, and put the buttons into a HorizontalPanel to have them side by side. These will go just after the initColumns line and you should add an add(buttons) line to the end of the constructor.

Button addButton = new Button("Add Employee");
Button removeButton = new Button("Remove Employee");

addButton.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        buildForm();
    }
});

removeButton.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        List list = dataProvider.getList();
        Set selected = selectionModel.getSelectedSet();

        list.removeAll(selected);
    }
});

HorizontalPanel buttons = new HorizontalPanel();
buttons.add(addButton);
buttons.add(removeButton);

We’ll make the buildForm() method now. As with the initColumns() method I’ll only give you one element of the form and you’ll have to add the rest yourself. The other part of any form is the submit button. In the handler of this we’ll do a bit of error checking (you should do more than what I have here in a real application), create a new Employee object, and then add it to the table. We’re only going to have the name, position, department, and salary fields be set by the user; the id field we will set programmatically. For the id field create a global int called nextId and have it initialize to 0. Every time we add an employee we will increment this and in the next part we’ll get the initial state when we retrieve the data at the start of the application.

private void buildForm() {
    VerticalPanel form = new VerticalPanel();

    // Text boxes for all of the fields in the table
    final TextBox nameBox = new TextBox();

    // We want the boxes to have a label so throw them into a HorizontalPanel
    HorizontalPanel namePanel = new HorizontalPanel();
    namePanel.add(new Label("Name:"));
    namePanel.add(nameBox);

    form.add(namePanel);

    Button submit = new Button("Submit");
    form.add(submit);

    submit.addClickHandler(new ClickHandler() {
	@Override
	public void onClick(ClickEvent event) {
		String name = nameBox.getText();
		String position = positionBox.getText();
		String dept = departmentBox.getText();
		String salaryS = salaryBox.getText();

		if (name.length() <= 0 || position.length() <= 0 ||
		        dept.length() <= 0 || salaryS.length() <= 0)
		    Window.alert("Please fill out all of the fields.");
		else {
  		    double salary = Double.parseDouble(salaryS);

		    Employee newEmp = new Employee(nextId++, name, position, dept, salary);
		    dataProvider.getList().add(newEmp);

		    RootPanel.get("formContent").clear();
		}
	}
    });

    Panel formDiv = RootPanel.get("formContent");
    formDiv.clear();

    formDiv.add(form);
}

Now go ahead and save your work again and try it out. All works pretty well, huh? In under 200 lines we have a working interface which we can hook up to the database and manage our employees.

A few extra things we could do is add sorting and editing features. With some simple built-in options you can have functionality to click the headings and sort the table based on that column or even when you click a field you can edit that value for the employee. I’ll leave these things for you to find and learn though. This concludes the first part of the tutorial, next time we’ll be adding our database support with the help of Hibernate.

I suggest using WordPress to create simple sites and blogs, or sites with blogs attached. Giving the user control over their content, and training the user how to effectively get the most out of their web presense is the key to deploying a successful WordPress web site.

Step 1:
Install WordPress, visit the wordpress website and install the latest version of wordpress on your http://wordpress.org/download/ is their website. Follow instructions on installing a new copy of wordpress on this website at http://codex.wordpress.org/Installing_WordPress and familiarize your self with the admin panel.

Step 2:
Start themeing, once you have familiarized yourself with the administration panel, simply add the pages you wish to have on your website in the Pages section of wordpress.

Example: a simple 5 page site.

For this site as an example, below, there are five distinct pages Home, About, Web,Mobile,Contact there is also the attached Blog component, the basis of WordPress

When you create the pages, set the Order of the page in order to set the menu in the order you want within your template.

If you would like your site to have the Blog as the front page, this is the default setting, otherwise you will have to go into the Reading Settings found on the right hand Settings menu and set which of these added pages you would like to be your front page.

Step 3:

Creating custom templates for each page. If each page will be using its own template you can do the following.

1. Copy the file single.php into a tile template-pagename.php.
2. Edit the comment on the top of the file to be the following:

/**
 * Template Name: My Page Template
 */

These files will be used for creating your custom designed template pages for your WordPress website. Visit the following page to get started: http://codex.wordpress.org/Theme_Development

Step 4:

Go back to each of the pages and set which template they should use for each of the pages.

After doing this you should be on the basic track for creating a basic 5 page site with a blog for yourself.

Onward, the next things you will want to do is install some plug-ins to help you with your website creation some of my favourites are W3 Total Cache, Portfolio, Custom Content Type Manager, SEO plug-in, Google XML Sitemaps, and Multiple Content Blocks.

By using some basic WordPress, PHP, HTML, and CSS knowledge and this simple setup, you will be on your way to a custom themed WordPress website.

First of all: What is a web product?

A web product is any particular Internet based application, or presence. Today, stronger than ever, there is a strong shift towards web application operations to be the dominant application structure, over taking many traditionally platform based applications, and even platform independent applications. This shift has been highly influenced by the increase in bandwidth and network capabilities over the past few years.

You know that you need some assistance, but who specifically are you going to call?

If you answered “Ghost Busters!”, unfortunately this is not the answer this time. I will throw in an obvious plug for ourselves and say Igoe Solutions LLC! However in a more generic sense, there are three types of “web guys” which you would want to talk to depending on your needs for your web product.

Who are these “web guys”? Web Designers, Web Developers, and Web Masters.

Web design is a process which encompass the planning and creating a website or web product. This includes layout and appearance of text, images, digital media and interactive elements. These elements are shaped by a web designer to produce the output of what is seen on the page. This is a more specific term used to address graphical and aesthetic appearance of a web product. This work is typically performed by digital graphic artists and graphic designers.

Web development is more of a broader term for web work which can involved an entire process of developing a website or web product. The term web development encompasses the field of web design, but adds more where it lacks. Web development includes web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. An emerging term for web developers is web engineers. Many web processionals distinguish themselves from web designers in the sense that “web development” typically refers to the non-design aspects of building web products: writing markup and coding front-end and server side scripting. Web development can range from developing a simple static single page of plain text to the most complex web-based internet applications, electronic businesses, or social networks, and automated web services. Web development work is typically performed by computer scientists, computer engineers, and software engineers.

Web masters are the people who are responsible for maintaining your website. Your web master’s duties may include: ensuring that the web server is operating properly, making small changes to the website, generating and revising web pages, replying to user comments, and examining traffic through the site. For static sites the web master may be someone who knows how to alter basic HTML and structure of web pages. For content management sites, the web master can be just about anybody. Mastering your own web page is made possible by the work of web designers and web developers working together to create a user friendly administration for your database driven website.

Now that you know what these people do, you can match them up with your needs and get out there to get your web product off the ground.
At Igoe Solutions LLC we are focused web and mobile software development engineers, and we offer all these services and more.

What is it?

Memcached is a general-purpose distributed memory caching system. But what is caching? To put simply caching is the act of storing frequently used information so that is is more easily accessible for the next use. There are different types of cache. Server side caching, and client side caching.

The more commonly known form of caching is client side caching of web browser applications. Your web browser right now has cached information about this and other web pages you have visited recently, some of these things may be the HTML, CSS, or image assets to the pages you have visited. “Clearing your cache” to get the updated assets for a web site is a common act done by all patrons of the internet. This effectively clears the “commonly used assets” that are stored and re-caches the newer assets.

Memcached is a server side cache system where the server tracks what information is requested by clients most often, so that it can access this information in a more timely manner than less requested information or assets.

Each cached portion of data is stored with a key/value which is specified however you wish, traditionally generated by either a function or a specific standard. It is important to note that the key/value pair is limited to the specifications of the software in that there is a finite amount of space that can be located for each key/value.

Depending on how the server is configured, memcached can store different information for varying amounts of time. The “cost” of cache is time and space on the server so proper configuration, clearing and resetting of cached values should be practiced. When one says “cost” they are talking about the affordance of processing time, and the affordance of memory allocation for the referenced values. This might help one understand that the finite limits on the allocation per key/value pair is in place to limit “costs”.

Now that we know what memcached is, what we can do with it, and what the “cost” is, what practical uses can be deployed using memcached?

When to use it, when not to use it.

Do not use memcached for session handling, database replacement, or queueing.

Memcached is a very simple and lightweight cache, some of the more practical uses of memcached could be the following:

• Cache commonly returned results for simple searches. Depending on the amount of information returned, you may cache simple information returned from commonly requested searches. If a database row id, of field can be cached for a common search, cache it. This way you will be either returning the field, or searching MySQL by id as opposed to using a %LIKE% comparison search.
• Along the same lines, Cache negative search results. This will prevent queries with negative lookups from hitting the database, and costing the server.
• Cache any small data set returning queries that take a long time to process.
• Latest posts on a custom blog application, or news feed. Cache the lastest news feed item, clear the cache every so often.

Relation to mobile computing.

Often times with mobile web applications, they will involve expensive queries that return small data sets. Bullet number three above is exactly this. Mobile applications with networking will typically return values from the server in pieces or in whole to be stored locally in an sql lite database. If caching of data sets server side can be used to reduce time, then the entire process of transmission of the data set, and local storage can be cut down considerably. This is what the world of mobile computing is all about. Instant information, or, information as fast as we can get it.

Read other articles on our site about mobile computing, web application development, and mobile application development.

Please read the articles below for further reference.

Links:

http://joped.com/2009/03/a-rant-about-proper-memcache-usage/

http://www.majordojo.com/2007/03/memcached-howto.php

Traditionally you will first get the JSON string and create a JSON object with it:

JSONObject jsonResponse = new JSONObject(jsonString);

Secondly you would extract the interior array from the jsonString as a JSONArray:

  JSONArray moreArray = jsonResponse.getJSONArray("more_data");

But, If you cannot get a reference for any reason because of other values within the initial JSON array, you may find more success in reconstructing the JSONObject by creating a JSONObject after extracting the JSONString from the interior and prefixing it with the interior array’s key.

Example of prefixing JSONString with JSONArray key to get JSONArray.

try {
JSONObject jsonResponse = new JSONObject(jsonString);

// Immediate variables.
Boolean success = jsonResponse.getBoolean("success");
String message = jsonResponse.getString("message");

// Check for success.
if (success) {
// Now parse further, if there is more information.
String moreData = jsonResponse.getString("more_data");
JSONObject moreDataObject = new JSONObject("{\"more_data\":" + moreData + "}");
JSONArray moreArray = moreDataObject.getJSONArray("more_data");
} else {
// Error reported from server.
}
} catch (Exception e) {
Log.e("Exception", "Exception when parsing response JSON.");
}

Custom view * is not using the 2- or 3-argument
View constructors; XML attributes will not work

Some of you might have had this same issue, well the solution is simple, you just need to include all three types of constructors for the parent class.

public class ExtendedClass extends Button {

public ExtendedClass(Context context) {

super( context, attrs );
}

public ExtendedClass(Context context, AttributeSet attrs) {

super( context, attrs );
}

public ExtendedClass(Context context, AttributeSet attrs, int defStyle) {

super( context, attrs, defStyle );
}

}

1. What is your estimated budget for this project?
2. What is your estimated time frame for this project?

These questions are partnered with the overall specification of work or request for proposal (RFP) and they give a stong insight into what kind of work hours are needed, resources to be gathered, or research to be done.

Often marked with ‘N/A’ or ‘As cheap as possible’, ‘As fast as possible’. Why do these questions matter so much?

If your budget is $100 and your time frame is one week, and your requested job is a full website, it is a lot easier to read a couple of fields, and politely instruct you to post on Craigslist. Then there is the other scenario where I end up spending time, preparing a full estimate based on actual cost of development, and then having one decide that the cost is far out of their budgetary constraints.

Without fail, it is like pulling teeth to get the answers for these questions. Why? One can only speculate, however when reflecting back on The Project Triangle, mentioned in an earlier post. Clients are asked to specify a project, and how they would like it completed; good, fast, cheap: choose two. Everyone wants all three, and a lot of approaches do not know the general cost of web application development.

A great article about “Web Development Cost / Rate Comparison” by Bernard Kohan can be found here. (http://www.comentum.com/web-development-cost-rate-comparison.html)

What he is saying is: do not be surprised if you hear a wide range of numbers thrown at you for web application development or mobile development . Based on the work you specify, and the stature of the company you have sought, the numbers could be fairly different. He goes further into classifying web development shops and classes of persons/businesses you could find to get the job done.

One way to find a happy medium between the three regions is to scale down your project scope. Version and build numbering occurs for all software, even web sites and web applications. By reasonably trimming the fat off of your specification documents, you may be able to oust a release of your product with “all the essentials” of what the pending version of your product should encompass.

It is important to realize that software and web applications are not spawned overnight, and they take many iterations to arrive at an end result. Iterations through the software development process help one arrive at the end product.

It can be helpful to reorganise your specification into requirements and features that “can wait”, and often this is based on the position of your company or the birth time of your web application. If you are on an initial release, then this is easier to trim than say a third or fourth revision, as you may have users waiting for certain features.

Others may argue for alternative solutions, but if your budget or timeline is tight, there is almost always wiggle room by scaling down project scope requirements to fit a project more closely into ones budget.

Keeping the budget down, and providing funds only where necessary is the key to success or failure. For a small time online business you want to figure out if you are a web service, physical service, or a product based business.

For these you need to determine where you can limit your costs. If you are a product based business, look for solutions to limit stocking, storage, and shipping costs. Limiting these will increase your profits in the long run and will provide for funds to be allocated up front to the more necessary locations of the business.

If you are web service based business the only real way to limit costs here is to get involved with what you can do. If you are a developer, then you can certainly aid in development. If you are a marketing person you can market. Both these reamls will help reduce costs largely. Other skills that you possess may be required too, and can help with your efforts.

With physical services, often stocking and storage come into play in cost limiting factors. Also traditionally the owner of an online face for a physical service most likely practices this service initially, which helps limit the budget by profits going directly to them as opposed to having to pay for an employee to take their place.

Business Operation Costs

You will need some inventory software. For a few thousand dollars you can start up an internal website and some software that will help you operate a searchable database. No, you will not be operating an all-purposes software system for this cheap, but you will have a basic operation running to determine if you can operate as intended before you invest too much time or money.

Set up the consumer face of your website. If you are decent with web design or development you may be able to save money at this point, but this is not the 1990s and website development is not as easy as you think. Web content is important too. You may think you are good at writing too, but just as with the web site function, if your site is full of errors (spelling or function) this will annoy visitors and they will be turned off.

Development Costs

You will want to allocate some funds for engineering and development. This is the most prized and most valuated department in any web based business or web front. And, no I am not saying this because I am a developer, I am saying this because this is where stuff happens. No matter what scale of online business you are, from a small local business website to a full boar web service, with out appropriating time and funds correctly in this area can lead to undesirable results.

Also, if you are a small local business looking for a web face, DO NOT use a build your own site service. Spend spend time and money on development, the cost is an investment that will pay off if executed properly with your goals mind.

Proper development should be left up to those who know exactly what they are doing.

Marketing Costs

You will want to allocate some funds for a marketing plan before you start to invest in the business. Allocating funds for this is necessary to determine start up cost, and the cost of marketing can be steep. Marketing will determine if your business takes off running, or stands still.

You should find advertisers to promote in your site. To begin with you it is usually best to start of with a advertisement agency such a Google AdWords, Facebook Ads, or another prominent online advertiser. These programs can help target your ads, purchase keywords, or limit regions. After you find success with these you may go after specific advertisers when your site is running well.

Marketing must be done for survival of your online business. Participate in newsgroups, forums, conferences, and linking your site from other related web sites, indexes and directories. Doing so will drive more traffic from these sources to your website or service.

Proper marketing should be left up to individuals who know what they are doing as well.

Read the next article about coping with large requirements by scaling down project scope.

If you are new to the game, you might have bought an e-book to “Start your own online business” somewhere that made you pay for a list of resources or references. Starting from ground up, or do not have many resources, you must first realize that both short term and long term goals of an early birth, online based, small business are limited based on your resources. This article will hopefully provide a general, but helpful insite to startups of all types, sizes, scales and budgets. I have written this in a very general sense that can be used to aide all types.

Most common problems.

1. Small budget
2. Large requirements

No matter what the funds or project size you have, chances are that funds are not allocated properly for requirements for your initial desired model of business. This is often coupled with large requirements, or an impossible combination using “The Project Triangle”.

The Project Triangle, in engineering, is a triangle model of project where clients are asked to specify a project, then choose how they would like it completed; good, fast, cheap: choose two.

You must plot your resources accordingly, because:

• To build something quickly and to a high standard, but then it will not be cheap.
• To build something quickly and cheaply, but it will not be of high quality.
• To build something with high quality and cheaply, but it will take a long time.

Often, something has got to give. You must either increase the budget, or the requirments must be scaled down, you must also choose a project triangle combination that will work for you. After you accept the reality of what you are up against, you can determine if your idea is just a pipe dream or proceed with the real process, detailed below.

Some steps must be taken in determining the feasibility of your business, these include target market research, competitors, and revenue streams. These are subject to change as time goes on and your niche pans out. Based on your model at any given time, you may be able to introduce additional revenue by either providing existing users with either a product, a service, or both.

You may be able to introduce back-end revenue streams based on your model such as advertisement space, affiliate sales, or data aggregation as well. Many blogs make use of the back-end revenue streams, while others make use of product sales such as e-books or instruction manuals; much like the “Start your own online business” e-book you may have purchased.

Keeping the budget down, and providing funds only where necessary is the key to success or failure.

Read the next article on Limiting the budget when starting an online business

Research shows that web users only read an average of 20% of the words on any given webpage; the percentage of words read is contingent upon the number of words on the page – basically, the more words on a page, the less the user actually reads.

Web design can help draw and filter a reader’s eye, but quality copy is equally important to insure that your content is reaching the user. Each word has to pack a punch – so how can you make the most out of every word on the page?

Determine Your Demographic

It’s extremely important that you determine demographic before you even start thinking about copy. Who’s your ideal reader of this site? Who do you want to reach? Some important things to consider about your user:

Age

Location

Gender

Race

Level of Education

Income

Profession

Language(s) Spoken

Political Views

Religion

Time Spent Online

Once you have a good sketch of your site consumer, you’ll have a much better idea of what to write and how to write it. For example, word choice for a site intended for a white, female, college-educated readership aged 18-24 is going to be entirely different than for a site intended for a religious, Latino male readership aged 40-60.

On the other hand, you don’t ever want to alienate readers by choosing an overly specific demographic. For example, if you’ve got a site for your music equipment business, using a lot of confusing technical jargon is going to be a turn-off for beginners who would be way more likely to use your site as a resource if it were written in a way that both amateurs and professionals can appreciate and understand.

Voice Choice

Your writing voice is what is going to propel the image and overall feel of your website. Voice can set your website apart from others – take a look at Groupon, for example, which uses witty dialogue to describe its deal of the day. The humor is an added incentive to read the daily email, plus it keeps the tone of the site light, fun, and entertaining. The tone of Groupon’s site has undoubtedly help propel it to success with a young, web-centered demographic that enjoys – and expects – humor.

On the converse side, don’t try to be something you’re not. Use your discretion. Sometimes, straightforward language is best, especially if your demographic is industry-specific rather than an average consumer. And the worst is overuse of clichés or kitsch. Avoid alliterative headlines and basically anything that looks like it could be found on the cover of a Cosmopolitan magazine. Also try to avoid sounding like a used-car salesperson; how many times have you heard advertisement lingo like, “We provide you with the solutions you need…100 years of expertise in the business…We’re experts in our field.” None of these ad clichés actually give the customer any valuable information about services provided. Think hard about the message you genuinely want to convey to your customer base – which can often be said more powerfully through tone and design rather than through self-lauding testimonials.

Tip:

Make sure your design, copy, and function work hand-in-hand.

If you’ve got a site design that uses bright colors and funky fonts, your copy should also be bright and fun. If your design is classic and professional, keep your copy likewise. If your site is minimalist or function-based, use as little copy as possible. Look at google.com and youtube.com – practically no copy at all, but it’s not needed. Just press play or hit search – the visual simplicity is what makes it user-friendly.

Edit, Edit, Edit

Once you have your copy written, go through and pare it down, and I mean word by word. Eliminate clichés and unnecessary adjectives and adverbs. As stated and re-stated, use the least amount of words possible to get your message across.

Grammar is important. Just one grammatical error can take away from your site’s credibility entirely, so it’s essential that your grammar is perfect. Have more than one other person take a look at your copy – they may catch errors that you didn’t. Common mistakes include errors with they’re/their/there, your/you’re, and confusion with apostrophe use (if I have to see one more site with a headline like “The #1 Place for All Your Electronic Need’s!” I’m going to strangle someone).

Today’s Headlines

Organizing your web copy is important to insure readability. Information should be quickly accessible. Web readers scan headlines and look for easy-to-read lists – they HATE having to search for information and will quickly turn to the next Google search result if a site is too text-centric.

Check out Apple’s Mac page.

Notice that the entire page is broken into bold headings and sub-headings. There are no text blocks whatsoever.

When we click on “Find Your Perfect Mac”, we’re taken to a page that uses organized columns and headings to convey a lot of information in one space without being confusing.

Etsy’s homepage copy includes blog posts, but places them toward the bottom of the page and only includes a headline and a very small example of the blog’s content so as not to clutter the already-busy page with excess text.

Mobile Readability

Consider also that more and more websites are being read on mobile devices. When thinking about your copy, it’s also imperative that you consider how it will look on a SmartPhone or tablet, because you can bet a large percentage of your readers will be looking at it as such. This is yet another reason to use headlines, lists, bullets, and concise language as much as possible.

Conclusion:

In a best case scenario, everyone would be able to hire a professional copywriter. If you can’t afford this service but aren’t confident in your own spelling, grammar, or style, try to find amateur services on Craigslist – many young English majors are willing to supply their services in exchange for a reference or a line on their resume.