Content driven web design - Step 1

Hello again everybody,

Okay, I hope you enjoyed our two previous posts about responsive web design, but now let's talk about the content and dig into the HTML, look at a real example and see what we can improve.

Our first project was an online system "BestBars.In" that allows users to search for bars, pubs, nightclubs all around the world, where our users could rate different venues, write reviews, check out upcoming events and much more.
So at the moment (June 2013) this is how our front page looks like:

Not really an art work, is it? Besides looking not as cool as we would prefer it to look, it also has very bad HTML structure and content. Let's look at the same page without any styles applied:

Wow!!! Ugly, right? But besides being just ugly, what is this page about? There is a heading saying "Best Bars in the World" and then some input controls, a few banners and this is pretty much it.

You think that would be properly indexed and would show up on the first page in google search? Definetely not. Do we want and need this? YES!!!

Let's look at the information we have on the screen:

We have:

1. logotype
2. page title
3. login block
4. search control
5. social media buttons (well only one at the moment)
6. breadcrumb
7. advanced search control
8. actual information about some bars, top rated, last reviewed, recently opened
9. additional information
10. advertising (empty gap for now because google adsense is still under review)
11. and then footer (but you cannot see it on the screen)

Which sections of the information above are actually important and informative?
- probably logotype, page title, information about bars (since we are supposed to talk about bars here, right?)
Do we have enough information about BestBars.In on the main page?
- probably not enough, we still don't really know what we can do here, how to use it, what should be our next move.

Even though page looks pretty full at the beginning, we see based on the second screenshot that actual loaded HTML doesn't have much information. Since the only information about top rated, recently opened, and last reviewed bars is loaded dynamically using jquery (which is a cool technology), but crawlers won't find this data, so it would not be indexed and would not assist with our SEO position.

What can we do to improve the situation?
First, we have to load those information bits that we have at the moment directly from the server as part of page HTML. It would make our content visible for the crawlers.
Second, we probably need to add some decent content on the page, like the description, to let users (and search engines) know who we are and what we do, and why it is a great idea to use BestBars.In.

Okay, time to take a break, drink some coffee, and think about our content.
So come back in a bit when we have another post ready to go for you!