Vibation is excited to announce the launch of KleanKorners.com.

Klean Korners started with a few people with extensive experience in the commercial cleaning industry, who felt they could achieve great success doing janitorial services the right way.  They approach Vibation as there were starting the company to build them an identity system, a website, and a social media strategy.

At Vibation we love when company’s come to use when they are refreshing their brand or just starting out.  We started by working with them to define their core brand characteristics they wanted their brand to embody.  Then we worked to determine the visual language that best represented their brand to their core audience.  When creating the logo, we used simple geometric shapes that are crisp and clean to reinforce the brand.  The mark evokes structure and flooring without being overly literal. We used a range of cool toned colors that felt clean, but that were also bright and friendly enough to speak to their core audience of female decision makers they were targeting.

Before completing the logo, we also did a competitive analysis of their competition in their target region and determined the best practice for website nationwide in the commercial cleaning industry.  We used this information and our understanding of the needs of the target audience to define key marketing message that would best speak to the needs of the audience.

With the marketing messages and logo in hand we started the design of Klean Korner’s website.  Vibation designed a content architecture that communicates the strengths of Klean Korners and clearly speaks to what makes them different from the competition.
We designed the website with both desktop and mobile version in mind, so that user would have the correct user experience from any device.

The identity system Vibation developed includes business cards, Microsoft Word templates, and marketing materials.  The business cards feature QR codes that connect to a digital business card and the mobile version of the website.

Ongoing marketing support from Vibation will launch Klean Korners into one of the most successful commercial cleaning and janitorial business in Oakland county.

Klean Korners: A commercial office cleaning business in Oakland County

We are passionate about what we do and draw inspiration from lots of sources. We created this series to share with you what is inspiring our work and our life. This is a special edition dedicated to the great things happening in our beautiful city of Detroit. Enjoy!

Imported from Detroit

An inspiring Chrysler ad; fueling the faith Detroiters have in this city.

Detroit SOUP

A monthly dinner funding micro-grants for creative projects in Detroit.

http://www.detroitsoup.com/

Loveland

Loveland supports buying of land to help build communities and invest in creative project in Detroit. $1 per square inch of land in Detroit gets you into the inchventure and supports entertainment fundraising efforts.

http://makeloveland.com/

Palladium Detroit Lives!

Johnny Knoxville visits the young people of the Motor City that are making it their own DIY paradise where rules are second to passion and creativity.

Eastern Market

Detroit’s Eastern Market is a treasure. Filled with vendors of fresh produce, meats, cheeses, plants and flowers, it is THE gathering place on the weekends for the multicultural community that is Detroit.

http://www.detroiteasternmarket.com/

The Dequindre Cut

The Dequindre Cut trail in Detroit is a non-motorized pathway that cuts through the city. A former train track, theCut has been given a facelift, but still retains its unique graffiti.

http://www.detroitriverfront.org/dequindre/

Grown in Detroit

Grown in Detroit focuses on the urban gardening efforts managed by a public school of 300, mainly African-American, pregnant and parenting teenagers.

http://grownindetroit.filmmij.nl/

We all know the reasons why it’s important for your business to reach out to your customer via Social Media. But with all the noise coming in from Twitter and Facebook, one has to wonder are you really getting heard? To answer this you need to understand that user interactions online are very similar to human behavior in person. Your customers/users are more interested in a message that is relatable and personable on a human level.

I was reminded of this when I went to a nearby café/bar. While the food and drinks were great, what really caught my attention were the people I interacted with during my visit. Each individual I met was personable and funny, and made me feel like I was being entertained at someone’s home. But what I cherished the most was that each had unique characteristics. They each had their own style, their way of telling a story; their personality. The experience with the employees at the café left a lasting impression of the establishment itself.

Whether in-person or online, a company’s personality is not only important but necessary to grab your customer’s attention and make an impression. But how do we create a personality for a business and make connections online?

The café I visited reminded me that it’s not about a business objective or mission statement, the business’ personality is shaped by the character of each person that works there, each with their own ideas and unique way of telling their story. To create your personality online it’s important that the people that make up your business; designers, project managers, CEOs, etc. shine through. Here are a couple ideas to get you started;

• Give your employees a medium to express their ideas or opinions. Make sure it’s marked with the authors name and photo.
• Make sure each employee has their own twitter account. Then create a list that follows all your employees.

Giving your employees a voice will make your overall business voice one that is relatable to your audience on a human level. Your customers will see your business as an establishment that houses distinct and interesting human beings, not just a business trying to sell products.

Social media has made it really easy for businesses to make connections with customers, but are these connections lasting ones? There are services out there that will automate following/adding connections but most likely they will not last or benefit your business. Again, to do it right, remember how it works in person; take the time to sit down and genuinely reach out to your customers. Just like real friendship, making connections and fans online takes time and effort. Whether the connection is through Facebook, twitter, email, etc, take the time to learn about each person your business interacts with. Listen to their stories and tell them yours. I guarantee they will become a long-term customer that feels connected to your business.

This approach is not easy and will leave you with only a handful of real connections. Don’t get discouraged; just like the real life friendships you make as an individual, the online connections you make for your business will be the most meaningful.

As twitter continues to grow in popularity, a number of companies have chosen to use twitter as a method for customer support. Twitter is all about conversation and businesses must be an active part of that dialogue to support their brand image and customer loyalty. There are four main ways to use twitter as a customer support channel: proactive tweeting, reactive tweeting, preemptive tweeting and marketing tweeting.

Proactive Tweeting

This is where most businesses feel comfortable.  Proactive tweets are simply announcements about a company’s products or services that could impact their customer base. Announcements could be service outages, new product/version announcements, etc.  Most likely these communications are already being posted to other channels, but twitter is a great way to feed the information to those who care.  All companies should ensure that posting to twitter is a standard part of their publishing process.

Reactive Tweeting

Reactive tweeting is straightforward.  When someone @ mentions you, react with a tweet.   For many organizations this is going to be the bulk of the effort and likely the bulk of your tweets.  The most difficult aspect to reactive tweeting is to deliver a response that is both correct and timely.

Dedicating the Right Employees

Make sure that the employees or employees staffed to twitter are able to respond.  It is counter productive to assign an intern to tweet if they have to go ask qualified staff to answer every question.

Twitter is a 24/7 world.

Twitter users have grown to expect almost instantaneous responses.  Understand your user base and create a plan that will support your customers when they will be tweeting.   Most customer support is not 24/7 and your twitter is not going to be either.

Know when to take offline

Many questions cannot be answered in 140 characters.  Direct the tweeter into your traditional support channels when a simple tweet is not going to cut it.

Preemptive Tweeting

Preemptive tweeting is really a company’s opportunity to put out fires before they grow out of control.  There have been numerous stories about tweeters who have tweeted their complaints and companies eventually responded to the twitter community uproar.  Preemptive tweeting means diligently watching search feeds to ensure that any conversation happening about your company or products is not missed.

Marketing Tweets

Marketing tweets are not traditionally customer support.  Rather than meeting the needs of your current users, you are reaching out to people you think your product could help.  Marketing tweets should demonstrate that you are willing to help solve their problem.  As with any marketing efforts there are pitfalls so plan and execute carefully.

• Do not SPAM.  Make sure that the potential customer is really expressing a need for your product or service before you reach out to them.
• Track who you are communicating with.  You do not want to send the same tweeter a message over and over again.  A successful tracking strategy will help you determine what kind of messaging is working and what kind of conversion rates you are getting.
• Do not hard sell. Twitter is about an open dialogue.  Marketing tweeting is ensuring that your product is part of the conversation.  Stir the dialogue toward your traditional sales channels when a lead is promising.

While twitter cannot be a replacement for traditional customer service, it has become essential for businesses to be part of the conversation.

Need help creating your preemptive tweeting search strategy?  Contact Vibation and have us be your guide.

Where do you start when you plan on buying a new car, try out a new restaurant or look for your next vacation spot? Most likely, you either turn to online reviews or ask a friend. With the rise of Facebook Fan Pages and Facebook Connect, these two resources are beginning to blend together, changing the way we make decisions and how businesses interact with us.

Whether a friend mentions a product to you in a casual conversation or you are actively asking around about a specific product, word of mouth will drive you to make a purchase more than any other way a brand markets itself to you. You are likely to buy a product your friend recommends because of the established trust you have with this person and their opinion. All businesses will tell you that their best clients come from a referral or shout out or what marketers call brand advocates. With Facebook Fan pages, businesses can now actively build and maintain relationships with these brand advocates.

Online reviews are another way we decide to make a purchase or visit a new place. Doing a Yelp search on nearby restaurants you’ll find ratings and user reviews associated with each listing and obviously choose the one that fits your criteria and has the best ratings. Facebook Connect adds a new layer of trust by allowing you to see what your Facebook friends have reviewed on these sites. So if you’re looking at a review for China King Buffet and your friend already reviewed it – your decision will most likely be swayed by this review alone.

The game has changed for online reviews and traditional word of mouth, with the introduction of Facebook Fan pages and Facebook Connect. It combines the trust that comes from a recommendation your friend makes and the accessibility online reviews have. Most importantly it gives businesses a chance to reach out and maintain their relationships with brand advocates.

How to Connect with your Brand Advocates

Facebook has indeed changed the way customers interact with the products they purchase. It is no longer enough to just have a company website that provides only one-sided communication. Brand advocates want to feel acknowledged and be a part of your brand.

To find your brand advocates and maintain your relationship and trust with them it’s essential you start a Facebook Fan page. Connect with your fans, give new customers incentives to become a part of the community and maintain the relationship by putting out information that’s relevant and useful to them.

Check out sites like Yelp, Google, and Yahoo – see what people are saying about your business. Reach out the all reviewers, negative and positive. Give negative reviewers a reason to come back to your establishment, like a free meal. Connect with reviewers on Facebook and give incentives to them to join and be a part of your community. Most importantly, make them feel acknowledged.

Feeling like you don’t know where to start? We can help. To learn more about Facebook Fan pages, Facebook Connect and how to capture the mind’s of your brand advocates, give us a call – 248.307.0489.

We are passionate about what we do and draw inspiration from lots of sources. We created this series to share with you what is inspiring our work and our life.

• 

  FROM: http://www.danstiles.com/

• 

  FROM: http://www.behance.net/

• 

  FROM: Personal Photo

• 

  FROM: http://www.theysaymethings.com

• 

  FROM: http://falsearms.com/

• 

  FROM: http://www.graphicadam.net

• 

  FROM: http://www.artindia.net/shobana/

Most developers do not really think about the order of the content in an HTML document. Because of the nature of HTML and CSS, most web pages are coded in the order they appear on the screen. While this is the most commonly used practice, there are compelling SEO advantages to placing the content first in your HTML document followed by your navigation.

Accessibility: Preference vs. Expectation

If you are going to change the order of your content for SEO purposes you should take into account the visually impaired community. While there are lots of “experts” saying that content first is better for speech browser users, there is very little testing that proves that.

Speech browsers for the visually impaired read a website from the top of the HTML to the bottom. For most sites that means the user has to listen through the navigation before getting to the content of the page. Because most sites are not content first, most users expect the navigation to be at the top. Generally it is bad usability practice to break from a user’s expectations. Most of the studies on the topic are inconclusive as to whether content or navigation first is preferable. While many speech browser users state they would prefer content first almost all expect navigation first.

If your site has a large number of speech browser users we recommend doing a usability test to figure out how your users use your site to determine the best approach for your site.

SEO: Conveying Priority

Most websites are already coded to communicate the priority of content to search engines. Wrapping an <h1> tag around your content tells the search engine you think that is more important than a body copy wrapped in a <p> tag. By reordering your HTML you can communicate to the search engine that the content should hold higher priority than your navigation. Search engines spiders read HTML documents linearly from top to bottom. Most search engines place priority on content that appears closer to the top of the page. By moving your content to the top of the HTML document above your global and secondary navigation, the search engine will place priority on the content first.

While this change is not going to shoot you to the top of the Google, a simple change to CSS and HTML ordering can improve your search engine performance.

Content First Coding

While not the standard way of coding a page, coding for content first requires just a few tweaks to your CSS. Depending your site, you can approach the technical solution a few different ways. For this discussion, we will use the following basic website format for the discussion. This sample site has a header, footer, a left hand secondary navigation and an area for body copy.

HTML

We start with the following basic framework

As you can see the first element is the body copy, followed by the header, and finally the footer. We have wrapped the whole page in the div #centerSite to center the site. The body and secondary navigation are wrapped in the div #main.

CSS

This first thing we need to do is center the whole page:

To put the header back to the top, we have to set the position to absolute and the top to 0px. Because it is positioned absolute, we need to add a width to match the centerSite.

Because the header is absolute positioned, we need to add margin-top to the div #main to match the height of the header.

To achieve this basic layout is to float the body to the right and secondary navigation to the right and set the width for both.

Finally, the footer needs to clear both floats and we are all set with the basic layout.

You can view the demo here with some basic styles added in. Most sites can be quickly tweaked to use this technique so you can move your content to the top and improve search engine optimization.

We are passionate about what we do and draw inspiration from lots of sources. We created this series to share with you what is inspiring our work and our life.

• 

  FROM: Ghee Happy

• 

  FROM: Lumadessa

• 

  FROM: Shimna

• 

  FROM: The Deep

• 

  FROM: Patch Together

• 

  FROM: Ink + Wit

• 

  FROM: Go Hemu!

• 

  FROM: Kisses from Australia

• 

  FROM: Nathan Manire

• 

  FROM: PERCUSIVEART

Designers who are able to use any font they own for print design, have always been frustrated with the lack of font support in browsers. Over the years various options have appeared to help bring typographic variety to the web. Each solution comes with it own advantages and Disadvantages. Now that there is a relatively new option out there, Typekit, we decided to review all the options for non standard typography for websites.

Text Images

The first solution for using non-standard fonts on the web was to create the typographic layout in Photoshop or other graphic programs and output to web graphics.

Advantages

• Works in all browsers
• Kerning and letter spacing is fully supported. (Designers love this)
• Great anti-aliasing
• Machine consistency. Because the fonts are rendered in Photoshop they will look the same from computer to computer.

Disadvantages

• Non semantic HTML code. Semantic coding is a way of structuring your HTML, so that the code describes the content. This is valuable for search engines, screen readers, and the maintainability of your code. You may want a your story title to read like a headline, not as an image.
• No dynamic support. To use as a story headline, you would have to create a new graphic every time you published a story.

CSS Text Replacements

Text replacement is almost the same as simple text images. The difference is that simple text is used in the HTML, then the text is hidden and replaced with a background image. CSS text replacement techniques were created to keep the HTML semantically strong and free of image tags while still utilizing the strength of typography created in graphics programs.

Advantages

CSS text replacement has the same advantages of Text images plus:

• Semantic HTML code

Disadvantages

• Google has considered this black hat. While Google has backed off a bit from there zero tolerance, this technique should be use very sparingly to limit markdown by search engines.

SIFR

A few years ago a new option became available, sIFR. sIFR uses JavaScript to replace text elements on the page with flash movies that show the text in HTML elements. sIFR was the first way to dynamically display text in a non-standard web font that worked in most browsers.

Advantages

• Semantic HTML code
• Good anti-aliasing. While not as great as Photoshop, flash does a good job or making fonts look attractive.

Disadvantages

• Requires flash, so there is no iPhone/iPad support.
• The sIFR components do not load till after the page loads, which can make the page look glitchy.
• Large numbers of sIFR elements can slow the rendering of the page

While sIFR is great for certain things, the performance lags and the flash requirements mean that it is far from the perfect web font solution. For more on sIFR visit: http://wiki.novemberborn.net/sifr/

CSS3 @Font-Face: Embedded Fonts

Embedded fonts allow you to embed fonts into a webpage to be used as normal CSS. While IE has supported embedded fonts since IE6, other browsers have been slow to support the CSS3 property @font-face to allow for embedded support. In addition to browser support issues are the legal issues. Most font licenses do not support embedding, so the fonts designers could legally embed are very limited.

With the release of Firefox 3.5 all major browsers support embedded fonts except Chrome: Firefox 3.5 and higher, Safari 3.1 and higher, Chrome 4.0.249.4 and higher, and Internet Explorer 6 and higher and Opera 10 and higher/. It should be noted that mobile Safari and mobile Opera do not support @font-face.

Typekit

While many have started to use the @font-face components and have ignored the legality of using font faces, most website owners have not wanted to risk it. Typekit was created as a way to legally embed fonts with a special web only license for use of fonts. Typekit is an easy central way to embed fonts from many of the best font foundries in the world.

Advantages

• Dynamic content
• Semantic HTML
• Speedy performance. The fonts render just a quickly as all the other types on the page
• Graceful degradation. If the user is using a browser not supported, they will just see the text rendered in a web font.

Disadvantages

• Anti-aliasing. Because the fonts are rendered at the OS level, the quality of the rendering varies from computer to computer.
• While the cost of Typekit accounts are not expensive, they are not free so website owners will have to put a price on that design.
• Each font face must be downloaded. If you want to use all of the weights of a font, bold, italic, etc the file size can get large.

While not without issues, Typekit is clearly the best option available for true typography in web pages. It makes the process of applying non-standard web typography to websites legal, cheap, easy, and standard compliant.

More information about Typekit can be found at: http://typekit.com/

With all of the press around the iPad many website owners are wondering whether it make sense to invest the effort to create an iPad version of their website. That decision comes down to three questions:

1. Does the iPad demographic match my demographic?
2. Are users going to use the iPad to surf my site?
3. Does my current website work well on the iPad?

Who are iPad users?

User evaluation is crucial to the development of any website. In the case of the iPad it is important to understand if your demographics match the demographics of the people who own the iPad. As with most new tech products the demographics of the early adopters will be different than the owners after the market when the product has reached maturity. Right now we are in the early adopter phase. Like the launch of many new types of devices the current owners of the iPad are tech savvy, wealthy, and younger (the majority fall into the 18-34 age bracket). If the iPad becomes as successful as other Apple products, this demographic will increasingly generalize and probably look more like the iPhone or iPod demographic. The question of how the market will evolve has a lot to do with what set of users are looking for the third device.

The “Third Device”

For most users the iPad is a “third device”, used to compliment a laptop/desktop and a mobile/cellar device. The iPad is not intended to replace either the standard computer or the cell phone, but rather to offer the benefits of both in a third device. Generally, iPad users are not going to be using it for “serious work”; the ipad will be used for casual activities. Whether they are shopping, social networking, or reading; the device is ideally suited for lounging on the deck or curled up in bed activities.

Will they come?

We could easily argue that all website should have a iPad friendly site, but not everyone has that kind of budget. As a website owner you need to evaluate the environment and the types of tasks that user perform your website. If your site is almost always going to be used in a cubicle, then you can probably ignore the iPad. If you site is oftened surfed in PJs, then you should be planning your iPad approach. Your analytics will prove out how important the iPad is over the next few months, but you should start planning now.

How well does my site perform?

Understanding how well your site currently performs on an iPad is essential for deciding your approach toward the iPad. Browsing on an Ipad is very different from browsing on a desktop, here are some key differences you should consider for your current site.

• Flash — As has been well publicized, the iPad does not support flash. So whether you use flash for animations, video, ads, or games creating an iPad (and iPhone) friendly site requires the use of alternative methods for content delivery.
• Links and Hover — Users interact with the iPad and other tablets using their finger not a mouse. While clicking is the same, hovering is not an option. As a result you need to make sure your links are clear without hover effects and that pulldown menus work by click instead of just by hover.
• Font Sizing — What looks good on the screen does not seem to hold up on the iPad. The iPad has a higher resolution for its size, 130 dpi, than most laptop and desktop monitors (typical 80-110 dpi), but lower than most smart phone like the Moto Android (264 dpi), or iPhone (160 dpi). The result of the higher density is that fonts will appear much smaller. Where 12px on the screen is perfect 14px or 15px will be more appropriate for the iPhone.
• Orientation — This is the most complicated issue. The iPad is designed to be flipped, so user will both view your site in landscape and portrait mode. Your site may look great in one and bad in the other. Whether you implement a fluid design, orientation specific CSS or a static site, orientation is a challenge that needs to be overcome.

The iPad and similar devices are going to grow in popularity in coming years. All companies will need to create an approach that delivers a well crafted website, no matter what the device is used to get there.