7 Best responsive web designs

Hello again,

Before we proceed with our adventure making BestBars.In from just another website into something really outstanding we wanted to share with you a few websites (7 to be more precise) we found really cool in terms of their layout and responsiveness.
They are not ordered based on anything, just presented in a way we opened them in our browser.

So here they are:

# 1: Bamboo Multi-Touch

 # 2: Mercor Apparel Store

# 3: StyleShop Theme from Elegantthemes

# 4: Foxy Theme from Elegantthemes

# 5: CSS Tricks

# 6: FundRaise

# 7: Jessica Hische

If you guys know any other cool responsive web designs, please let us know would be nice to check out a few others out there!

Cheers,
Your GPTeam

Read More

Structured Data on your website

Morning everybody,
Since we mentioned it yesterday while discussing content driven web design, let's talk about structured data.
So what is structured data? We first heard about it when were looping though all the menus in our Webmaster Tools. There was no structured data detected on our website and we were not really sure if it was a good thing or bad. But hey, since this is mentioned in Google Webmaster Tools, it is probably a good thing to have.
So we start googling what it is and how to implement it.
Pretty much structured data is a set of additional attributes and meta tags to describe your content.
You might think now, but we have already explained to search engines what is what, we have our title, we have meta description and keywords, we have our headings, we have awesome content, what else do you need?
Well, let's look again at our example, our website dedicated to best bars in the world. On our default page we want to display information about top rated bars. Each bar is defined as set of HTML tags and we display folloring information:

• bar image
• bar name
• address
• bar rating in our system (stars from 0 to 5)
• bar description

So let's say this is our HTML code:
<div class="bar">
    <div class="barimage">
        <img src="1111.jpg" alt="Bar 96 in Amsterdam" />
    </div>
    <h2>Bar 96</h2>
    <div class="rate">
        *****
    </div>
    <div class="address">
        Leidsestraat 1111, 1000AB, Amsterdam, Netherlands

    </div>
    <div class="description">
        Boutigue Bar 96 is located in the heart of Amsterdam. Here you can try the best

        cocktails, enjoy live music and lovely atmosphere.

    </div>
</div>

It does look like enough well formed information, doesn't it? Well with structured data you can actually tell search engines what exactly you are talking about, you can specify that this is information about a bar, this is a bar logotype, this is its' name, this is the address, this is the rate, and the description. In return your information would be formed differently in search results.
We don't want to copy all the information google already provided. So here are a few links for you so you can get a better idea why, how etc:
Rich snippets and structured data
Why Schema.org
Schema.org - getting started

 

So hopefully you had a look and now a bit more familiar with the subject.
Let's touch up our HTML to make it even more search engine friendly.
First thing we want to indicate that we are talking about bars, so let's alter parent div tag with following attributes:
itemscope itemtype=http://schema.org/BarOrPub

so now we have our div like this:
<div class="bar" itemscope itemtype="http://schema.org/BarOrPub">

next step, let's just go down the content. Our image - we want to specify that this is actually an image related to the bar we are talking about:
<img src="barpic.jpg" alt="Bar 96 in Amsterdam" itemprop="image" />

Bar name:
<h2 itemprop="name">Bar 96</h2>

Bar address:
<div class="address" itemprop="address"> Leidsestraat 1111, 1000AB, Amsterdam, Netherlands

</div>

 

Bar rate, here we go one level deeper. First we specify that this is the rate of the bar, and then we also want to specify rating value and best rating value to make it more clear how good the place is:

<div class="rate" itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <meta itemprop="ratingValue" content="5" /> <meta itemprop="bestRating" content="5" /> *****

</div>

 

And finally bar description:

<div class="description" itemprop="description"> Boutigue Bar 96 is located in the heart of Amsterdam. Here you can try the best

cocktails, enjoy live music and lovely atmosphere.

</div>

 

So now how to test our HTML? Well thanks to Google, there is rich snippet testing tool. So open it up, switch to HTML tab, insert your HTML and click the button:

 

This is what we got in return:

 

So all the information we wanted to clarify is properly parsed and extracted. Not bad hey?

 

Check the list of all possible types, I am sure you will find all necessary properties for all your data.

 

Hope you found our little topic useful and clear. If you have any questions or comments, suggestions, please feel free to drop a line, we would really appreciate your feedback!

 

Cheers,
Your GPTeam

Read More

Content driven web design - Step 2

And we are back :-)
Time to break our website and make it better, right? Do you remember what we are trying to achieve here? Hope so, if not please read our previous post about content driven web design.
So we have our website, where you can find best bars in the world, as a bar owner you can register and list your venue. We want to make sure our content if formed the way it could be easily understood not only by humans, but also by crawlers, so hopefully we would get a better position in search results.
Our website is developed with ASP.NET, so we have a site master file (which is pretty much a template with predefined HTML and logic that can be applied to any other page that uses the site master). In site master we have our header and the footer and a placeholder for the page content which is populated on each page individually.
Let's start with site master first, pretty it up, and then switch to the page itself.

Step 1: comment out all linked styles and javascript libraries.
Why are we doing this? Because we want also to refactor our code a little bit and make sure that we do not load key parts of our content dynamically with javascript. Styles - well we want to see our HTML the way search engined would see it.

Step 2: check how it looks now.

Generally speaking this is what we wanted for now. Site master is good enough, we have our header with the title, and our footer. Problem is what we have inbetween. As you can see from the screen shot, we don't have any information displayed to tell us what is this page about. Some bits of data, like top rated bars, recently reviewed etc, they are supposed to be headings as well, and they are not. And there is no actually any information about those bars.

Step 3: Let's touch up our page. The same way, commenting out all the styles (in case there are some linked) and javascript libraries.

Step 4: Since we will be re-doing our styles, current styles can be removed, so let's delete all applied class attributes.

Step 5: Apply h1-h4 tags to existing elements.
We would be starting from the top, the title of the page - h1, next heading - h2, next - h3 etc.

Step 6: Add information about the page.

Looks a bit better now. At least now we have some extra details, we know what is the title, headings etc.

Step 7: Display missing information.
Well in our case it would require some programming since we are loading information from the database. So for now let's just indicate where the information is going to be displayed:

So now our HTML structure looks more or less okay, it is clear what we are talking about.
What else can we do with it prior to making things pretty? Structured data! What is it? Well it is an extension of your HTML code with extra atrtibutes to make search engines' life easier letting them know which sections of our page is related to some local business let's say, or it is contact details of some person, or we are talking about some cool event next week, where is date, how many reviews some bar has na dmuch more.
We'll give you more input on structured data in our next post. So keep reading folks!

Read More

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!

Read More

Responsive Web Design - Getting started, Part II

So as promised, coming back to responsive design and digging into HTML and CSS straight away.

We mentioned in our previous post "Responsive Web Design - Getting started" our idea was to identify what kind of browser our client is using, if it is something old-school that doesn't support all latest features then we should use one CSS style, we called it "screen.css". The same css we woud apply for even advanced browsers, but on a screen with resolution starting from 1000px and up (our full frame version of the website).
For all the rest (two other breakpoints) we would use css named "mob.css".
Pretty much we have following picture:

0 - 480 px - mob.css
480 - 999px - mob.css
1000px - up - screen.css

So to implement this in your html, head section, use following code:
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="mob.css" rel="stylesheet" type="text/css" media="screen, handheld" />
    <link href="screen.css" rel="stylesheet" type="text/css" media="screen  and (min-width: 62.5em)" />
    <!--[if (lt IE 9)&(!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="screen.css" />  
    <![endif]-->

So first line is just to set up a viewpoint. Then we have two other css declarations. First to link mob.css for browsers with media type = handheld, second to use screen.css for browsers with min-width equal to 62.5em (which is 1000px).
Then we have a section of code, that looks like a comment. The comment bit would be ignored by old-school browsers lie IE8 and older and we would simply use screen.css overwriting all styles from mob.css.

Simple enough? I think yes.

Okay, now let's talk about CSS itself. Screen.css - i don't think it would be worth spending time reviewing this. There are plenty of resources online dedicated to designing your website with CSS. Since we decided that our full version will be fixed to 1000px, we would implement our css design to make it look nice.

All the fun is with mob.css. Let's have a look. Since we were advised to start designing based on mobile version and then expend into tablet and desktop. Think about content first, and then design and all the cool jquery features after, this is how we should proceed.

Implement your styles trying to make your site look like a mobile version first.
This is our HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>BestBars.In - Find Best Bars in the World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="mob.css" rel="stylesheet" type="text/css" media="screen, handheld" />
    <link href="screen.css" rel="stylesheet" type="text/css" media="screen  and (min-width: 62.5em)" />
    <!--[if (lt IE 9)&(!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="screen.css" />  
    <![endif]-->
</head>
<body>
    <div class="header">
        <div class="fullline">
            <div class="logo">
                <a href="#">
                    <img src="logo.gif" alt="BestBars.In Logotype" /></a>
            </div>
            <div class="title">
                <h1>
                    Find Best Bars in the World</h1>
            </div>
            <div class="login">
                <a href="#">Sign in</a> <a href="#">Sign up</a>
            </div>
        </div>
        <div class="fullline">
            <div class="search">
                <div class="searchctrl">
                    <input type="text" />
                    <input type="button" value="Search" />
                    <a href="#">Advanced Search</a>
                </div>
                <div class="searchsuggestions">
                </div>
            </div>
            <div class="social">
                <a href="#">Follow us on Facebook</a> <a href="#">Follow us on Twitter</a>
            </div>
        </div>
        <div class="breadcrumb">
            <a href="#">Home</a><a href="#">Netherlands</a><a href="#">Amsterdam</a>
        </div>
    </div>
    <div class="content">
        <div class="leftcolumn">
            <div class="about">
                <h2>
                    BestBars.In - the universal resource to find best bars, pubs, and cocktail lounges</h2>
                <p>
                    We constantly search for best places to visit all around the world, and try to provide
                    you with the best and most up to date reviews.</p>
            </div>
            <div class="maindata">
                <div class="datablock">
                    <h3>
                        Recently Opened Bars in Amsterdam</h3>
                    <div class="bar">
                        <div class="barleftcolumn">
                            <img src="Vesper.jpg" alt="Vesper Bar profile image" />
                        </div>
                        <div class="barrightcolumn">
                            <a href="#">
                                <h4>
                                    Vesper Bar</h4>
                            </a>
                            <div class="address">
                                Vinkelstraat 57, Amsterdam, Netherlands
                            </div>
                            <div class="rate">
                                *****
                            </div>
                            <div class="facilities">
                                <div class="wine">
                                    Wine bar</div>
                                <div class="cocktails">
                                    Cocktails</div>
                                <div class="food">
                                    Food served</div>
                            </div>
                            <div class="description">
                                Boutique Bar Vesper is located in the middle of the Jordaan area in Amsterdam, between
                                the trendy Haarlemmerdijk shopping district and the Brouwersgracht.</div>
                        </div>
                    </div>
             </div>
            <div class="extras">
                Dynamically loaded information here, about top rated bars or something</div>
        </div>
        <div class="rightcolumn">
            <div class="suggestions">
                You may also like</div>
            <div class="ads">
                Advertising here</div>
        </div>
    </div>
    <div class="footer">
        <div class="footermenu">
            <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Contacts</a> <a href="#">Sitemap</a>
        </div>
        <div class="copyrights">
            © Copyright 2012 GPTeam.nl - All Rights Reserved
        </div>
    </div>
</body>
</html>

It is not the most beautiful HTML code, but should do the trick for this example.
I'm not the best designer, so I don't pick the best colors, border etc. But what I wanted to do is to reformat our layout depending on our breakpoints.
We have three sections: header, content, and footer (divs with styles header, content, and footer). In the header section we have three logical sections (well logical per my point of view and idea of designing this particular example):

1. logotype, page heading message, and login section
2. search block and social media icons (i did not have time to put real icons, so just put placeholders instead)
3. breadcrumb control (to show where on the website our users are)

First section on the phone i want to display vertically, so first logotype, next line page title, next line login information. On tablet and desktop, these three blocks i want to display horizontally, one after another and login block should be glued to the very right, when logo is on the left and message is in the middle.
Second section, I want to show the same way, vertically on the phone, and horizontally on tablets and desktops.
Third section i don't want to show on the phone at all, and display it on tablets and desktops, taking full width.

As you already noticed i grouped all the logical bits into divs, two of them with class="fullline", last one with style breadcrumb.
let's define fullline class:
.fullline
{
    display: table;
    width: 100%;
}
What we do here? Just specify display type as table (which means height would be adjusted based on the content, and width = 100%, so it would take full width.
Then we have class="logo" for our logotype:
.logo
{
    width: 100%;
    display: table;
    text-align: center;
}
Similar thing, we just want to make sure it takes 100% of the space width-wise.
Same for title and login:
.title
{
    width: 100%;
    display: table;
    margin-top: 8px;
}
.login
{
    width: 100%;
    display: table;
    margin-top: 8px;
    background-color: #CCCCFF;
}

Now, let's ignore the rest of the styles, and focus on tablet view. Let's define same style in the same mob.css document but for browsers with resolutions higher than 480px:
@media screen and (min-width: 30em)
{
     .....
}
we have to specify the same styles inside the @media block. What is it? This is a cool feature of CSS that allows you to specify that styles inside that block would be applied to browsers matching some particular requirement (in our case with min-width = 30em, which is 480pixels). So here we are:
.logo
    {
        width: 30%;
        float: left;
    }
    .title
    {
        width: 40%;
        float: left;
    }
    .login
    {
        width: 30%;
        float: right;
    }

As you can see in total all widths of all the blocks give us 100%, which means they will be displayed as one line, exactly what we wanted.

Pretty simple, right. Well I'll let you play with the rest of the code since it is pretty much the same thing but with more styles. Once you are done, open your HTML file with Chrome or Firefox and re-size your browser, you'll see how it is going from one layout to another.
Here are the screenshots of what i got:

I hope you enjoyed this article, if not, well sorry about that, we are just trying to help you out :-) But feel free to drop a line, we would really appreciate your comments and suggestions.

Have fun coding and come back next week, we'll try to post something new for you :-)

Cheers,
Your GPTeam

Read More