Get your Shopify site setup in a Google Friendly way

For starters, make sure you setup your Shopify account well. Once you import all of your products, make sure that the titles and product descriptions meet Product Feeds Specifications. This will save you a lot of time later, so take the time to do it well, especially if you have a lot of products that you are importing into Shopify from an inventory list. This will make is easier for you when the time comes to get listed on Google Shopping. Keep the product descriptions simple and avoid needless capitalization and repetition.

Setup Google Webmaster Tools and claim your site

At this point, if you do not have a GMail account you will need to get one. Once you have a Google account you can sign in to webmaster tools. From here you can add your site and then claim it using one of the methods listed. This enables you to verify and claim your site in the Merchant Center. Webmaster tools will give you a code to insert into your site so that you can claim it, which is necessary for getting your product listing accepted by Google.

We recommend RetailTower for submitting Product Feeds

Once your store is live and you have your webmaster tools configured, you are now ready to share your products with Google Shopping to extend your store’s reach and make more money. In our experience it has been easiest to go with the free Shopify App RetailTower. RetailTower is a tool to help you get product feeds to many different comparison shopping stores,  but for the purposes of this blog we are focusing on Google Shopping which is the most prominent one. RetailTower guides you through the process of generating a product feed, which you can then download, copy or share with Google via FTP access.

Submit your Product Feed to Google Merchant Center

For our site we used FTP access, but you can download it from RetailTower and upload it yourself if you want to. The great thing about FTP access is that Google can fetch your inventory and update it on a schedule, which is another great reason to have all of your information entered properly at the beginning. You can log in to the Merchant Center with your Google Account information. You will go the the general settings to enter your store information, and you will also claim and verify the website you entered with Webmaster Tools. Then, once your feed has been accepted and you have worked out any bugs or errors that may get reported, you are ready to list your products on Google Shopping using Product Listing Ads in Google AdWords.

Product Listing Ads in AdWords

Part of the recent changes with Google Shopping is the need for paid ads in order to use it. This is done through Google AdWords. You can log in using your Google account information. In fact, you can go to the General Settings and there will be a link to AdWords there where you will be guided through the process with the click of a button. Once you do that you will be able to post ads like you would for any AdWords campaign, except these will be listed from your Google Product feed.

Enjoy the Benefits of Google Shopping

Once your ads are up you will be well on your way to reaping the benefits of having your online store extended into the Google comparison shopping empire.

If you need help getting your Shopify account setup, let us know here at GRAYBOX and we can help you.

Please note that all current browsers are a bit picky when it comes to which elements and attributes they do and do not support. For example, Opera supports email validation, so as long the name attribute is specified. However, it does not support the placeholder attribute. Because of this it is a good idea to not completely depend on this form of validation just yet, but you should still feel free to use it as an additive feature.

Code:

<form method="get">
		<label for="email">Email:</label>
<input id="email" name="email" type="email" />
		<button> Submit Form </button>
	</form>

Try the demo below. It should give you an “error” message if you try to enter something that does not follow that of a typical email address format.

Demo:

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.”

How do we use it?

The nav element should surround blocks of content that act as links to other parts of the site:

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Where to use the nav element?

The specification of this element hasn’t completely been defined at the moment but my own personal understanding is that you should use the nav element anywhere that you would consider to be the main way that a user navigates thoughout your site, these might include, but not limited to:

• Primary Navigation
• Secondary navigation (or navigation that supplements the current content)
• Breadcrumbs
• Pagination (previous/next buttons)

At the moment, it is completely up to how the author of the HTML document interprets the specification and I’m sure sometime soon it will become common practice to use the nav element in a specific, coherent way. Maybe using the nav element for site wide navigation will become the default method for using this element. For now, I feel safe to use it wherever there are large chunks of navigation present within a document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <h2> To-Do List </h2>
     <ul contenteditable="true">
        <li> Grab apples form the store. </li>
        <li> Drive to an abandoned factory  </li>
        <li> Watch video of stuff blowing up</li>
     </ul>
</body>
</html>

Demo:

To-Do List

• Break mechanical cab driver.
• Drive to abandoned factory
• Watch video of self

Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final recommendation status.

Link: HTML 5 Cheat Sheet

ul li:nth-child(3) {
  color: #ccc;
}

This selects the 3rd element in a list of related elements and changes its color.
nth-child also accepts two keywords in the parentheses spot: even and odd. Those should be pretty obvious. “Even” selects even numbered elements, like the 2nd, 4th, 6th, etc. “Odd” selects odd numbered elements, like 1st, 3rd, 5th, etc.

ul li:nth-child(even) {
  color: #ccc;
}
ul li:nth-child(odd) {
  color: #ccc;
}

It is also possible to simply select the last element in a list.

ul li: last-child {
    color: green;
}

Conclusion:

As you can see, CSS3 makes it a lot easier to select specific elements in a list and style them accordingly in an intuitive fashion. Interestingly enough, the nth-child selector can also be applied to divs in the same way. If you are interested in playing around with the nth-child property, go here. CSS-tricks has put together a very cool nth Tester.

Demo

Below, are some examples of using the nth child selector on paragraphs:

CSS

ul li:nth-child(even) {
  color: rgb(0,0,255);
}
ul li:nth-child(odd) {
  color: rgb(0,150,0);
}
ul li:last-child {
    color: rgb(139,134,78);
}

Result

• First Item

• Second Item

• Third Item

• Fourth Item

• Last Item

Support:

The :nth-child() selector is supported in all major browsers, except IE8 and earlier.

Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.

It is important to note that the meter element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.

Here is how to use it.

Code:

<ol>
<li><meter min="0" max="100" value="25">25%</meter></li>
<li><meter min="100" max="200" value="150">50%</meter></li>
<li><meter min="0" max="100" value="75">75%</meter></li>
<li><meter min="0" max="800" value="400">50%</meter></li>
</ol>

Demo:

1. 25%
2. 50%
3. 75%
4. 50%

It is a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. Without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change after the video loads.

You should also insert text content between the video tags for browsers that do not support the video element.

The video element allows multiple source elements. source elements can link to different video files. The browser will use the first recognized format. Unfortunately, multiple video formats are still needed as different browsers support different formats.

Here is a how to use the video tag:

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Demo:

Support:
Internet Explorer 9 & 10, Firefox, Opera, Chrome, and Safari support the video element.

Note: Internet Explorer 8 and earlier versions, do not support the video element.

Multiple Backgrounds

We can specify multiple background images for box elements using a list on the individual background properties.

The following example has two background images, one for the desert and one for the bald eagle. They are specified using a comma-separated list of values, one for each “layer” (the number of comma-separated items defines the number of background layers, the first one being on top).

And the code will be:

#background {
width: 450px;
height: 300px;
background-image: url(baldeagle.png), url(desert.png);
background-position: right top, center bottom;
background-repeat: no-repeat;
}

Multiple Backgrounds Compatibility: Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ and IE9+.

Background Size

Another new property introduced by the CSS3 Backgrounds and Borders Module is background-size. You can specify the size of background images using lengths or percentages. In the first image, the background is set to auto. In the second image, it is set to 65% or 265px width:

Code:

#box1 {
background-size: auto;
}
#box2 {
background-size: 295px 155px;
}

Like other background properties, background-size can accept multiple values in a comma-separated list. Apart from length and percentage, there are two other properties that you can use for background size: contain and cover. Contain will scale but preserve the image´s original proportions, as long as it is contained within the background position area; and cover will also scale and preserve proportions, but it will make the image as large as necessary to cover the positioning area.

Background Size Compatibility: Current versions of most popular browsers including Firefox, Safari, Chrome, Internet Explorer and Opera.

Defining the Background Size of Multiple Background Images

Finally, you can combine both properties, using different values for the background-size of each image (note they are still comma separated in layer order):

Code:


#background {
width: 450px;
height: 300px;
background-image: url(baldeagle.png), url(baldeagle.png), url(desert.png);
background-repeat: no-repeat;
background-position: 20px 100px, 200px 40px, center bottom;
background-size: 70px, auto, cover;
}


In this way, we can create the appearance of a single effect while using multiple images in our websites. It’s both efficient and cool.

Responsive Web Design Example-Multiple layouts of the same site

As the spectrum of possible resolutions get wider, focusing our attention on one layout for each page results in a subpar experience for more and more users. The days where we could depend on 99% of visitors using a computer are long behind us. Instead, we need to create a system that embraces the medium’s flexibility — resulting in a single layout with multiple views that transition seamlessly from one to another, and bring an optimized structure to our content regardless of screen size.

Base It On Content

Each state in a responsive layout tends to be made up of the same content, such as an image gallery, a long piece of text or perhaps a navigation menu. Each element’s form can vary between one’s viewpoint state and another, usually involving a change in one or more of the following attributes:

• Hierarchy: What’s its order and prominence in the layout? What’s most important for this given viewpoint?
• Density: How much detail do you show for each device? Who is using this sort of device and is this content relevant to them?
• Interaction: Should the navigation be a list of links or a dropdown? A rotating image carousel or a group of images via scrolling?
• Width: Is the viewpoint a fixed width or is it flexible width?

Considering how each component’s attributes may change between various states ensures that the grid system produces the corrects layout for the space at hand. Don’t assume your content is appropriate for all devices and sizes, analyze and think about what the content is and what’s most important for this given size.

Final Thoughts + Tips

Absolute units like pixels lock the layout to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step to “resolution independence”. With so many devices available today, it has become clear that it just isn’t practical to design two or three layouts at fixed resolutions anymore. Instead, we should give elements a size in relation to each other, then we must establish the relationships between elements, and then let the spacing take care of itself. In addition, have the CSS change based on viewport size so sizes/spacing and visibility can change per element conditionally. This will give you maximum flexibility to adjust for new devices and show the most relevant copy to your users.

Useful Resources

Responsive Grid System

]]> http://www.gograybox.com/blog/layout-and-content-considerations-for-responsive-web-design/feed/ 0 http://www.gograybox.com/blog/design-website-with-a-grid-system/ http://www.gograybox.com/blog/design-website-with-a-grid-system/#comments Fri, 26 Oct 2012 01:37:55 +0000 Kevin C. http://www.gograybox.com/?p=883 When you first begin a web design project where do you start? Color scheme? Fonts? Probably not. Most of us start with a sketch outline of the site’s structure. A big part of this structure lies in the grid – a vertical set of guidelines that help determine shape, placement of items and overall structure of each website. Grids are a tool for visual problem solving — they create layout boundaries: known relationships and constraints that define an environment wherein a design can occur.

There are a variety of grid-based structures. Most commonly, a grid is made of multiple columns and gutters of equal widths. Grids can also be created from columns of varying widths to form bigger columns.

Column Grids

Seven Equal Columns & Gutters

Every vertical grid is comprised of two things – columns and gutters. Columns are the wider divisions, while gutters are defined as the equal spaces between columns. Even when a grid contains columns of varying widths the gutter widths are often static. Web grids vary widely and there is no magic number of columns or width of gutters. Often web grids range from 2 to 12 columns. When using a vertical column-based grid, the lines are typically invisible and only known to the designer or developer. However, these lines do create a plane for all the objects – text, images and even ads – so that everything lines up neatly. This will create organization and an overall sense of harmony between elements.

Building A Grid

960 Standard Grid System – 12 Columns with various combinations shown

The first step in creating a grid is to set your size constraints — how wide will your page be? When designing the grid, think about how elements will live within the columns. Are you planning to design strictly in column and rows or is your grid going to be used more in a way that looks “less gridded?”

Then think about flexibility in design – how many columns do you want to work with. Ideally, you will work in sets of threes or fours, so that you have divisible groups that can be broken into smaller parts.

When considering the number of columns in your grid, also take gutter widths into account. Commonly, gutters are 10 to 20 pixels wide. Then it is time to do the math. Determine your overall site width. Set a gutter width. Determine the number of columns. Take your overall width minus the gutter widths (keep in mind that you have one less gutter than total number of columns). Divide the remaining number by the total number of columns to get a width for each column.

So lets say I choose to design a layout with a width of 1140 pixels, a gutter size of 20 px, and I want 4 columns. That will give me 3 gutters each at 20px.

3 x 20 = 60px
1140px (Total width) – 60px (Total gutter width) = 1080px.
Then take that number and divide by the number of columns.
1080px / 4 Columns= 270px.

Finally you are left with the width of each column in your layout.

(Total width of grid) – (Total gutter width) = Total width of columns
(Total width of columns) / (Number of columns) = Width of each column.

Implementation

Thankfully, there are some great tools to help you get started with designing with a grid. They provide photoshop templates, calculation tools and examples to help you get started. Your designs will be greatly improved by using a grid as your foundation.
960 Grid System
1140 Grid System

Secondary Display

There are times when a secondary display can be beneficial. YouTube’s new mobile application is a great example of device orientation design. The portrait mode offers an interface for browsing videos and displays the user’s account information. Switching to landscape mode provides an experience with a full-screen video player, playback controls, and nothing more. When the video ends, the display switches back to portrait mode, prompting users to quickly tilt the device back and browse for additional videos.


YouTube:

To help better understand how we can use orientation to our advantage lets first look at a couple different ways in which we can use this functionality.

Fluid Design

This interface design is nothing more than just scaling the interface to its new size. Take for example the Skype application, you can see all the features are still present in both modes and the only difference is the size.

Complementary

With this interface, we can make the interface change only slightly to show a different view of the same content. For example, if we are looking at data in spreadsheet form on the portrait mode, flipping the device to show a graph with the same dataset might be a cool, productive, and user-friendly feature that one may expect.

Dataset:

Continuous

Like the new YouTube app, a continuous design enables the user to access a secondary interface by rotating the device. For example, a smartphone as a remote control for a TV in portrait while the landscape mode would display a programming guide, while also maintaining functionality for changing channels, browsing programs and recording future episodes.

Understanding The Context

Overall, it is important to understand the context in which your application will be used. Completely changing the information displayed across the two modes will could confuse the user and deter them from using your application. However, with careful consideration in the design process, the functionality of device orientation can provide huge productive benefits and give the user an enjoyable experience and ultimately, provide more engaging and user-friendly experiences.

When it comes to establishing a budget for a website, the value of wireframing is usually misunderstood and is the first phase cut out of a tight budget. This is a big mistake as proper wireframing is an essential stage in the strategic design process — good wireframes help you solve complex problems early, tailor your design to your user’s goals, and save you money.


Before we get into the specifics, let’s take a step back and briefly discuss what a wireframe is. Wireframes are the foundation on which to begin building your site; a wireframe determines the site’s structure, organization and visual emphasis. Wireframing usually comes after the site architecture has been determined by a site map or flow chart of the Website’s pages and before the visual design phase.

Wireframes Show a Site’s Structure, not it’s Visual Design.

First, Start With Paper

While it’s possible to create wireframes using programs like Visio, for your initial brainstorming sessions, you should stick to paper. Paper doesn’t seem as permanent, and many people will assume you threw it together in 5 minutes and do not hesitate to give you constructive feedback.
Paper wireframes are easy to do, and if you don’t like it you can crumple up the paper, throw it in recycling and start over. Since it’s quick, this gives you time and freedom to experiment and brainstorm creative solutions.

Example of a paper wireframe:

Benefits of Wireframing

1. Site Architecture
A sitemap is an essential tool, but it can be a bit abstract, especially ones that are large. Taking the site map to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstractness of a sitemap into something real and tangible and this step ensures that all parties involved are on the same page.

2. Clear Interactive Features
In many instances, clients may not comprehend what you mean when you say “dynamic slide show,” “news feeds,” “google map integration,” “product filtering,” “light boxes” and hundreds of other types of features. Wire framing specific interactive features such as these on a web site provides clear communication to a client how these features will function, where they will live on the specific page and how useful they might be.
Sometimes you may decide to remove out a feature once it is wireframed due to the fact that it just does’t work with what your site’s goals are. Seeing the features without any creative influence really allows a client to focus on other equally important aspects of the project and clarifies any expectations about how features will behave.

3. Usability
This is the one of the most important points of the entire wire framing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core. It forces everyone to look objectively at a web site’s ease of use, conversion paths, naming of links, navigation placement and feature placement. Wireframes will point out flaws in your site architecture and show how users can complete actions easily.

4. Easy Tweaking
With website wireframes, you have the benefit of tweaking a simple line to achieve the desired layout. Rather than move complex elements about a page, it can take very little time to drag a couple of boxes into new positions. It let’s you and the client focus on one task at a time, structure then style.

5. Iterative Design Process
Instead of trying to combine the functionality/layout and creative/branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. This allows clients (and other team members) to provide feedback earlier in the process. Skipping wireframes delays this feedback and increases the costs of making changes because full design mock-ups must be reworked, not just simplified wireframes.

6. Saves time on the entire project
Wireframing saves time in a number of ways.

• Your designs are more thorough and better tailor to your audience.
• Your development team understands what they are building.
• Content strategy becomes much clearer & easier to create.
• Everyone is on the same page about what the web site is supposed to do and how it is supposed to function.

Conclusion

A web development project is a complicated project, and involves teams of specialists working in cohesion to give concrete form to a client’s vision. Wireframing is an essential tool for the team to visualize the site and strategize for it’s success. We recommend every web project start with proper wireframing before the visual design starts.

Useful Resources on Wireframing:
Smashing Magazine
Inspiration on Wireframes
Wireframes Magazine

Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the web browser which version of HTML you’re using, and should appear at the very top of every web page. DOCTYPE’s are a key component of standards-compliant web pages, plus your code won’t render correctly or validate without them. We found a few useful links on everything you need to know about DOCTYPE’s and why they are important — useful information that is worth a read.

Doctypes Overview – A good introduction to DOCTYPE’s explaining why use them and where to put them in your HTML.
W3- HTML doctype declaration – Good examples of various types of DOCTYPE’s and how they are structured.
How Important DOCTYPE declaration is for your HTML document – Examples of what can happen to your pages if you do not correctly declare a DOCTYPE.

SEO Table of Elements

The overarching goal of SEO (search engine optimization) is to improve a website’s position within search engines so that potential website visitors can reach a website through relevant searches (known as queries). While SEO conversations often seem to focus on the concept of ‘ranking number one’ for a particular term, SEO has multiple facets that require unique technological and creative skill-sets. With patience, realistic expectations, discipline, and correctly implemented/managed strategies, SEO can be one of the most beneficial forms of web marketing.

The image below shows the difference between paid search results (advertisements) and organic search results for Google.com:

Goals of SEO

At its most basic level, SEO seeks to improve two core areas:

• Website Content Relevancy - The degree to which a website’s content matches a users need and/or intent, which usually are represented through queries (commonly known as keywords).
• Website Content Popularity - The order by which search engines display search results depend on a range of factors, one of the most important of these being the quantity of external websites that link to a particular website.

These two concepts, 1) relevancy and 2) authority pervade into every aspect of SEO, which we can sum up with the following idea:

“Successful SEO modifies website content and code, and builds links from external websites so that a particular website appears in priority positions of organic search results for a relevant query.”

Why Does SEO Matter?

More and more, people rely on the internet and, more specifically, search engines to find information, make transactions, and accomplish an array of goals. As a marketing medium, search engines offer an incredibly powerful way to target a very specific audience based on intent. To illustrate this concept we’ll provide a simple example:

• Bob searches for ‘short haired puppies’ in Google.com – Bob sees a lot of images, peruses some of them, but does not satisfy his need, which is to purchase a puppy
• Bob types-in and searches for the term, ‘best small-breed puppies,’ in Google.com – Bob sees some pet stores, and takes a look at them, but he decides that he wants to find a location close to home
• Bob finally types in ‘breeders that sell beagle puppies in Chicago’ – Now Bob notices that the results that appear are much more relevant as he begins to see results of local pet stores

What’s at play in the above example about Bob and his quest to buy a puppy?

• Bob represents the average search engine user, where he refines his search to become more detailed as he discovers more information.
• Bob represents a typical user with different buying cycle stages. His search also moves from being ‘informational’ in nature to ‘more transactional’ in nature as he narrows his search query.
• The websites that appear in organic search results have a ‘ranking,’ which search engines determine through complex algorithms. The websites that appear first have higher content relevancy for Bob’s search terms and are more popular than other websites (these sites have links from external websites).

SEO is a Method

To be more specific, organic (non-paid/advertised search results) search results constitute a marketing channel. In the USA, alone, more people use Internet search to find information than the yellow page, and has over 220,000,000 estimated Internet users.

As such, the potential gains for ranking a website (in terms of both website visitors and potential online leads/sales) within search results for particular queries is quite high.

SEO is a Process

SEO requires a unique marketing activity that involves both technologically-driven and creatively-driven skill sets. Generally, SEO can be broken into three phases:

• Planning & Strategy - This phase generally entails analyzing a business/website from both a marketing and technical perspective (usually through an ‘audit’) in order to determine a direction for SEO activities. This stage is vital for an effective SEO processes as implementation activities must be founded upon stable considerations in order to be effective. This stage also sets benchmarks, against which progress can be monitored.
• Implementation & Analytics – SEO generally divides itself into two camps 1) onsite optimization and 2) offsite optimization. Onsite optimizaiton addresses technical and content issues found on a respective website itself, whereas offsite optimization dedicates itself to acquiring relevant links from external websites.  Ongoing reporting ensures that SEO methods work effectively.
• Maintenance & Training – While SEO experts can (and often times do) complete ongoing SEO activities, many businesses find it in their interest to train and manage staff in order to help manage SEO themselves.  Indeed, mastering SEO can take years to learn, but certain less technologically-intensive and/or content-oriented activities can be completed by just about anyone who has the right know-how. With occasional oversight and guidance by an SEO expert, such tasks can be managed by a business/organization to ensure that it maintains effective SEO.

SEO is Long-Term

A good way to think of SEO is to think of it as a long-term investment. SEO is unlike other web marketing methods in that returns can take significantly longer. This is largely due to the fact that successful SEO must be ‘organic,’ and as such needs time to grow.  Interestingly, SEO requires higher initial costs, but these costs reduce relative to benefits over time. This is such because SEO activities can take months to see an impact in search engines.

SEO Has High Long-Term ROI Potential

While SEO does have higher initial costs with lower benefits compared to online advertising (e.g. AdWords), the fact that SEO is a long-term solution makes it more profitable. One reason is because online advertising only works when it has a budget exists to pay for the advertisements; as soon as advertisements are paused, the benefits cease (for the most part). Conversely, SEO can take some time to build in order to see benefits, but with appropriate maintenance, SEO benefits will persist over time.

Furthermore, studies show that Internet search users tend to click on organic (non-advertisement) listings more than paid advertisements and that these users tend to have higher levels of education. Because SEO provides a long-term solution and drives higher-quality traffic, its chances of driving online goals (known as conversions) is more likely and, as such, has higher potential (long-term) for a positive ROI (return over investment).

Want to learn more about how GrayBox’s internet marketing services can help your business use search engines to drive traffic to your website and help you accomplish your online goals? Drop us a line and we’ll work with you to create an internet marketing strategy that can help you make the most of SEO.

In this post we’ll go over your main options, their benefits and the respective costs.  Trying out these methods will help you reach new customers, promote your brand and expand your business.

Search Engine Optimization (SEO)

Search Engine Optimization (SEO) refers to tweaking your website’s contents, organization & inbound links in order to better place for strategically chosen keywords in a Search Engine’s index. Specifically, you’re looking for keywords that support your business goals, have a low amount of search competition and have a high number of monthly searches. Search Engines seek to provide relevant results to searchers, so it’s important that you match your site to relevant keywords to drive good traffic to your site.

Each SEO campaign has three essential steps:

1. Keyword Research & Competitor Analysis
2. Onsite Optimization
3. Offsite Optimization (Link Building)

In terms of audience reach, if you pick your keywords carefully, you can reach a fairly targeted group of potential customers. Google Search accounts for about 80% of USA search traffic so you’ll want to target your efforts with them, Bing & others watch Google search results so you’ll also experience some trickle down to other sites.

SEO is a large, long-term investment, both in time and money. When you start your SEO campaign, it can take a month or two to start seeing results. However, unlike performance-based marketing (ads) it’s mostly a one-time cost. SEO represents the best long-term investment of your money and we deem it essential for every business website.

Search Engine Marketing (SEM/PPC) & Paid Text Ads

If your looking to drive traffic to your site immediately there is no better way that Paid Text Ads — plus you can do it in very targeted way, bringing in well qualified customers.

You have two major options, Google Adwords and Facebook Advertising. Both systems use similar auction-based methods of purchase. Essentially there is a limited number of advertising slots, each company picks a advertisement criteria and an amount your are willing to pay to have your ad display. The top amounts paid (10 for Google, 5 for Facebook) show for a given pageview. The ads shown & amounts paid shift dynamically through the day as links are clicked & daily payment maximums are reached.

In Adwords you bid for specific keywords while on Facebook you bid on user profiles & criteria such as geographic location, education level, career, age, etc. You get much more targeted impressions with Facebook over Google, but you’ll reach more new customers & conversion centric buyers on Google.

The key to a successful SEM campaign is constant monitoring of your performance & tweaking to get a better return on your investment.

Display Ads

Display ads are fairly simple — there a great way to drive traffic as well as increase your brand recognition — the only trouble is their expense. You pay on an Impression Basis (CPM), you pax XX amount per thousand times the ad is loaded (in contrast to PPC).  It’s not much per thousand, but it quickly adds up on high-traffic sites.

You typically buy ads through Display Ad Networks, the king of which is DoubleClick (recently bought by Google). Their are also many smaller display networks, or in some cases you can buy them individually from the website publisher.

Display Networks match your business to sites that represent your industry, hoping that the audience will be interested in your product — creating a very broad audience match.

Some networks also act as brokers, allowing you to pick sites you’ld like your ad to be seen on. One of note is BuySellAds.com, we suggest you use them if you’re just trying our display ads for the first time.

Social Media

Facebook & Twitter are the two dominant social media platforms in the United States, yet to a business they serve two very different functions. The only cost is time, to be effective we recommend posting multiple times a day on each service. Be personable, share your knowledge and make some friends.

Facebook

Facebook is centered around friendships & relationships with people and with businesses. Facebook users skew more female, younger and less educated than Twitter users. They tend to follow brands with more loyalty, but are less commerce centric in their actions. Your posts and updates will largely build up your audience & customer loyalty, not necessarily reach new customers.

Twitter

Twitter is a better way to reach new customers than Facebook as it’s more search-centric than Facebook. Users are more exploratory and tend to follow people along their interests. It’s a great place to expand your market, speak to your niche and prove your expertise in your industry.

[Shameless plug, follow @GrayboxComm on Twitter]

E-Mail Marketing

E-mail marketing is a great way to retain your existing customers and keep them engaged in your brand — the trouble is building and maintaining your customer file in compliance with the CAN-SPAM Act. Don’t purchase a list (they typically perform very badly), but slowly gather names from customers and collect them on your site.

There are a lot of great tools out there, MailChimp or Campaign Monitor for small-businesses; iContact for medium-sized businesses, and Bronto or ExactTarget for enterprise level needs.

You’ll typically pay a cent or two for each e-mail sent. This doesn’t sound like much, but can really add up when you have a large customer list & send often.

Affilate Marketing

Affilate Marketing is essentially paying a small commission on your sales to get others to link to products on your site. It works best for eCommerce companies that offer a variety of products.

It’s hard to get affiliates on your own, so we highly recommend using an Affilate Network — the king of the hill is Commission Junction, but there are plenty of industry specific options as well.

Conclusion

As you can see, their are plenty of options to promote your business online — our best advice is to experiment with multiple options, consistently review your ROI, and tweak your campaigns and trying new marketing ideas.  If you need help, GrayBox has multiple marketing, eCommerce and internet business consultants to help you develop your online marketing strategy. Get in touch.

These allow us to select adjacent elements, element’s parents and many others.

My favorite resources to learn more about this are:

CSS 2.1 : http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/
CSS 3 : http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Take a look, if you’re not using these you’re missing out.

As creative professionals we take in the business problems you want us to solve, we think about it and come up with the best possible solution for your given problem. The trouble is, how do you hire someone who is smart and experienced enough to tackle your problem and get it solved on time and on budget.

You have a couple options, We’ll break them down below. Each has their own benefits and hassles.

Outsource to India/Mexico/Wherever

This is going to be your overall cheapest route. You honestly can find some good talent, who know how to code well and get a task done. However, you’re going to have to manage it closely, and you’ll have a good amount of communication trouble. For a while, cheap overseas talent seems like the answer/revolution in the industry, but now even big companies are realizing that if quality matters it needs to happen with qualified, local professionals who speak you native language. MicroSoft and other large companies have suffered from enough production delays that they’ve mostly pulled out from outsourcing completely.

Outsourcing comes in all shapes and sizes, you can outsource to an independent freelancer or hire an outsourced agency. The trouble is most discount agencies here in the states sell you on a service locally, then outsource the production to lower their bottom line and pocket the difference. Make sure to check with your agency exactly who, how and where the production is completed.

Outsourcing is best handled with small, isolated tasks with a high-level of management oversight from you or your company. We’ve seen web application start-ups go bankrupt waiting for an outsourced project to be delivered correctly.

Pros

1. Cheapest option
2. Good for small, production-based tasks

Cons

1. Unreliable service
2. Often leads to production/deployment delays
3. Hard to communicate with
4. Deliverables are often subpar and of low quality

Hire an Employee for Creative Work

Long term, it’s pretty safe that with a good hire you will get the most bang for your buck by hiring directly. Of course hiring makes things real complicated real quick for a small business, you’ll need to worry about benefits, days off, a place for them to work, payroll, taxes, etc. Plus once you hire, you are locked into that one person’s creative process and skills.

On the other side, for a relatively low rate per hour, you get about 2000 hours a year of work from your hire. In a large urban area, a print design is 45-80K/year, a web designer is 55-90K/year, and a web developer is 65-110K/year. It’s significantly less is smaller cities. Aquent has a survey of salaries each year http://www.designsalaries.org/, or run some searches at http://www.payscale.com to see the actual average cost.

Pros

1. Highest # of productive hours for your money
2. You have direct management oversight
3. 100% dedicated to your project

Cons

1. They are your employee, so you have to deal with the office space, payroll, benefits, etc
2. They require consistent direction and a management of tasks
3. Limited expertise/skill set
4. Limited creative process/problem solving

Hire a Creative Professional Freelancer

Hiring a freelancer is a good way to get a specialized expert onto your team. You can find a good freelancer who is professional, knowledgeable, and local to your business. Most have a wide range of experience both in enterprise and agency backgrounds and they typically come in one of two types, an expert is a specific niche in the creative/tech industry or a jack of all trades. For a role with analysis, strategy and planning, you’re better off hiring an expert. For a start-up a jack of all trades is a good option option as long as you can handle the strategizing.

Since freelancers are often specialized, you often need more than one to complete your project. A well-planned web project needs at least 4-5 different skill sets, and each freelancer will bring their own billing, contracts and other hassles. At the end of the day, you need to create the vision, develop a production plan and assign tasks to the specific freelancers on your team. Typical freelancing rates scale with experience — expect about $30 to $100 an hour.

Essentially, you can get top-level talent, on-demand if you’re willing to handle the management hassles of leading an independent, distributed team.

Pros

1. Expert Level Talent on demand
2. Lower cost than hiring an Agency
3. Less commitment than hiring an employee
4. Specialists are good for consulting/analysis and planning

Cons

1. Limited Skill Set to their one area of expertise
2. Big Jobs require Client (You) to manage multiple people
3. Beware Jack-of-all-trades freelancers for a complex project. Hire multiple specialists instead.

Hire a Creative Communications Agency

If you can afford it, hiring an agency is a great option. Like working with freelancers, you’ll get expert-level talent who can consult you on your project and build the best solution for your business. A good agency shouldn’t focus on just the production, they should also help guide you to the best creative solution for your business. Working with an agency should also be easy — you should at least have two key contacts within the company, an Account Manager who handles the relationship between the two companies and a project manager who guides your project and delivers it on time and on budget. Your project manager is the keystone of your project and should be communicative, intelligent, interested in your business and feel like a partner in your business.

The downside is the cost. For top-shelf agencies expect to pay $250-$400/hour, but most agencies are around $150-250/hour depending on the skill level & experience of their team. Also, a lot of agencies handle the project management and just outsource the work to experienced 1099 freelancers. It’s such a common practice that a lot of freelancers get 100% of this business by subcontracting behind the scenes for multiple agencies. Make sure to check with your agency regarding who specifically is working on your project.

Pros

1. Dedicated project manager
2. One-stop shopping. Can typically handle all your needs.
3. Feels like partners in your business

Cons

1. Most expensive option
2. Often outsources your project to freelancers anyway

Work with GrayBox

GrayBox takes the best aspects from the freelancer and agency options and mixes them together. You have a dedicated project manager, a team full of experts and a lower cost than a traditional communications agency. We truly think it’s the best of both worlds, and out clients tend to like the savings and level of customer service we can offer as a result of our mixed business model. Contact us and get started.

One important thing to recognize is how much visual clutter/noise in included in these logos. Long gone are the simple logos we see everyday, McDonald’s, FedEx, CitiBank, etc etc. These logos don’t tell a story or sell the brand, they are decorations.

http://www.logolounge.com/articles/default.asp?ArticleID=782

style=”background-color:#1c0abc;”

or

style=”background-color: rgb(28,10,188);”

with RGBA, you can add a fourth value, the “alpha” transparency of the color. 0.0 is 100% transparent. 1 is fully visible.

Above is five stops, with the A value .2-1.0 in .2 increments.
rgba(28,10,188, 0.2),
rgba(28,10,188, 0.4),
rgba(28,10,188, 0.6),
rgba(28,10,188, 0.8),
rgba(28,10,188, 1.0).

RGBA is better than the CSS opacity element, because individual colors can be transparent without effecting the opacity of the entire element. You can isolate the transparency of the border, background color and text color without effecting the transparency of the other elements.

RGBA is part of the CSS3 standard. Current support in all major browsers but Internet Explorer. A good technique for a IE fallback is to stack color properties, ending in RBGA. Newer browsers will use the last color and IE will ignore the CSS properties it can’t understand.

This technique requires a slight shift in your color coding, but you gain additional flexibility in your designs.

We’re going to look at some common terms so you can understand what is what and start making some meaningful decisions.

Visits
A single session on your site. One visit often contains multiple pageviews. If one visitor (user) comes to your site three times during the day, you’ll have three visits.

Absolute Unique Visitors
One unique, separate visitor to your site. Doesn’t matter how many Visits that visitor has, it’s counted as one unique visitor.

New Visits
A single session on the site by a unique user who has NEVER been to your site before.

Pageviews
Loading of each independent webpage. If a visitor went from your homepage to “About Us” to “Contact Information” that would be three pageviews.

Landing Page
The first page of a visit (session).

Exit Page
The last page of a visit (session).

Bounce Rates
The percentage of single-pageview visits in which the visitor leaves your site after seeing only one page.

Time on Site (or Avg. Time on Site)
The time on site for a specific visit (session).

Direct Traffic
Visitors who arrive on your site by typing in the URL directly “http://www.gograybox.com” in their web browser.

Search Traffic
Visitors who arrive on your site via a search engine. This is both organic (non-paid) and paid search listings (PPC/SEM).

Referring Sites
These visitors arrive on your site by a link from another, non-search engine site. This could be a blog post, news article, directory listing, etc etc.

Conversion Rate
Your percentage of visits who complete a certain, configurable goal. These are often newsletter signups, purchases or comments.

These are the high-level definitions, their is a lot more depth in analytics but these are basics so you can understand what is happening on your site and how your users are getting there.

Get in touch with us to go over your website’s marketing plan. We have many experienced professionals to help your drive your conversion rates and help you achieve your business goals.

Studies consistently show that about 50% of primarily use navigation systems on a site, while the other 50% predominately use site search to get around. If either of these two systems are lacking, you are losing/alienating some of our users.

We’ll look into the usability concerns of site search in a future post — below we’ll explore some common navigation systems.

Sectional Navigation

This type of navigation is becoming really popular. In fact it’s what we’re using for this site. The basic concept is to organize your site into major sections and just link to the home page for each section in the global navigation. Essentially, instead of just the one home page, each section has it’s own internal structure — a collection of individual micro-sites if you will, unified by the global navigation.

This approach is effective when you either want to A. Highlight individual brands, each with their own unique identity (see Gap.com), or B. Keep users focused on dedicated tasks, such as shopping or support (see Apple.com).

We wouldn’t recommend this for sites with a lot of hierarchical complexity, such as an e-commerce site. This style is also typically paired with liberal uses of Left Navigation for navigation within a specific section.

Dropdown Navigation

Declining in popularity in recent years, dropdown navigation allows a user to link to both the section landing pages and the top-level pages within each section. Some sites also have flyouts, allowing for the display of more levels in a less overwhelming way.

Their are some drawbacks. For one, the relatively small dropdown and flyout click areas have proven difficult to hit precisely, increasing user frustration. Likewise, they become illegible when you have a lot of options below each section head — The best approach is four to seven links below each section head.

Used well and in moderation, dropdowns can be effective way to expose multiple levels of site content to a user.

Sitemap Navigation

Sitemap navigation is a great way to expose all or most levels of your site’s structure to your users at all times, increasing time on site and the visibility of the content you’ve worked hard to create.

For eCommerce sites especially, they are a great way of exposing a deep and complex hierarchy of categories and pages (see REI.com). This allows multiple paths for users to find your items. Also, usability is increased as the hit area of each dropdown is quite large, with many individual text links contained within it.

Likewise, Sitemap navigation allows users to link from every page of your site to every other page — reducing number of clicks and promoting exploration.

Left Navigation

Left navigation is very common. It solves some basic problems with traditional (top & wide) navigation and creates some new ones.

Left navigation is a great way to display tier-two & tier-three level pages within a specific section by providing focus and acting like a filter as you drill down through the site (see Amazon.com). Plus, you can easily add/remove items from a left nav as users are more used to vertical scrolling than horizontal.

Left navigation does have it’s problems. For one, it simply lacks the prominence of a top navigation systems. In eye-track studies, users typically scan the top, left-to-right before working down the page. It’s also hard to organize a longer list of links without the use of flyouts so that it remains legible. Left navigation becomes less usable as more links are placed within it.

At GrayBox, we wouldn’t recommend only using left navigation exclusively as your navigation structure for your site. Instead, it works well when paired with some of the other systems described above.

Conclusion

As you build your site, spend some time planning out the content hierarchy are organization systems you will employ. Your site’s navigation is a key component of creating a user-friendly, easy to navigation and clear site to best reach your users.

You would never break ground on a house without a well thought out architectural plan — so too with your site. Invest the time to build a solid foundation, you’ll pay yourself back with more conversions, easy navigation and happier customers.

GrayBox can assist you with Information Architecture and Usability planning — Discuss your site’s navigation with us today.

We at GrayBox are very excited to welcome you to our new site. Here you will find information about GrayBox and see examples of our work. If you are a freelance creative professional, you can also apply to work with GrayBox as a freelance consultant.

We think our new site will help potential clients learn more about our company and get to know us better.

If you have any feedback or comments on the site, please don’t hesitate to contact us or e-mail us.