Top 5 Web Design Trends We’ve Noticed in 2011 (So Far)

It is important as graphic and web designers to see what everyone else is doing or not doing on the web.  It gives us an idea of what future clients may be looking for, and ideas that we can evolve into our own designs.  It can also open your mind to things you may not have thought of before, thus expanding your creativity and idea-set.  Even if you don’t like the look of a certain design trend that people have been using, it is important to remain as open-minded as possible in the always-changing world of web design.

In this post, we’ll take a look at the top 5 design trends we’ve noticed in 2011 here at Render Perfect, and how they are affecting the web.

 

5.)Typography

Designers are starting to put increasing amounts of thought into the font that they use on their site.  A couple years ago, you could look at any site on the web and you could almost guarantee that most of the text would be in basic fonts like Arial and Times New Roman.  Now, designers carefully select their typeface, size, alignment, and even the spacing between individual letters.  You want your site to have a certain “feel” to it, and sometimes that cannot be accomplished with just plain text.

Here are a couple sites we’ve noticed that both use excellent typography:

Amazee Labs Steedicons

 

4.)Social Network Integration

Social networks have become huge, especially Facebook.  I can’t think of one person i know that doesn’t have a Facebook profile page. Even people who barely know how to operate a computer have a profile and know how to access it flawlessly.  Since everyone is now on a social network, why wouldn’t you want to link yours to your website?

This was a trend in 2010 as well, but in 2011 the ways to link your social network and your website are much easier and more effective.  You can now go to pretty much any company’s website and “Like” them on Facebook, write on their wall, look at recent Tweets, subscribe to their RSS feed, and other actions like this without leaving that company’s homepage.  A couple of years ago, designers would have been baffled at features like these, but now you can’t go to a website without seeing a “Like us on Facebook” or “Follow Us on Twitter” link.

The Render Perfect company website is a perfect example of this. At the bottom of any page on our site (except the blog of course) you can “Like” us on Facebook, write a comment on our wall, or view some of our friends.  Check it out!

 

3.)HTML 5 Integration

HTML5 is the newest form of the HTML markup language.  If used properly, it has the potential to make a designers job easier.  Out of all the web trends of 2011, this is quite possibly the most important and it is most likely going to be the standard in web coding.

The only problem with this new language is that not all browsers and operating systems can display it correctly.  The best browser to view HTML5 websites on would be the latest Google Chrome, which isn’t compatible with all computers yet.  If you are curious as to whether or not your browser of choice will display HTML5 correctly, you can go to http://www.html5test.com and it will let you know exactly what your browser can and cannot display.,/p>

Here are a couple sites we’ve noticed that use HTML5 effectively:

Vua.LaEve Online

(Keep in mind even if your browser doesn’t display HTML5, these sites will still look like the way they are intended to.)

 

2.)Simplicity Minimalism

Less is more! The age of sites with 1000 buttons and background music is (hopefully) over!  We have noticed that a lot of companies are going for the minimalist look for their site.  They are clean, easy on the eyes, and even users with little computer knowledge can navigate through them with ease.

However, a new trend in simplicity has also arisen this year, and that is “One Page” websites.  They are exactly what they sound like, a website containing: (you guessed it!) ONE PAGE!  Designers use anchors to bring the visitors to a certain part of the page instead of linking to a new page entirely.  Most of the “One Page” sites we’ve seen function really well and look great.

There’s not too much we can say about simplicity, so check out some excellent examples we’ve noticed:

Unfold HTML 5 W3C

 

1.)Liquid Websites

With new tablets and mobile phone’s coming out, your website isn’t going to be viewed by just desktop computers and laptops anymore.  Which means, your website will appear completely different if it was designed specifically for a widescreen monitor (which most are).

With the flick of a wrist (iPhone, iPad) a user can switch his browser to a horizontal view which makes most fixed width sites look terrible.  If a page is liquid, however, it will adapt to any screen it is viewed on (if designed correctly).  This makes it so, regardless of which mobile device you are using to browse the web, websites will appear as they are intended to look on a widescreen monitor, which was most likely used when the designer created the site.

Here are a couple examples of websites that look great on both mobile devices and on your desktop or laptop computer:

Polaroid SimpleArt

5 SEO Guidelines Your Website Should Be Following Right Now

Whether you run a blog or run a company, Search Engine Optimization is something you must think about when designing your website. There are so many great looking, informative websites that just never place on the first page of Google search results because of a few design and coding missteps. Many of these missteps are easy to identify and can help you get more traffic within a few days of fixing them. In this post, we will provide a few SEO guidelines you should always follow when designing  your website.

Create SEO-Friendly Navigation

Navigation Bar Example
One thing to remember when deciding the location and appearance of your navigation is your users. You want to create a navigation system that’s appealing to the eye and easy to use, so that your users don’t have to be tech savvy to get to the different pages of your site.  That being said, you want to also make your navigation search engine friendly. This means Javascript or Flash is usually a no-no. Sure, they sometimes look better with animations and extravagant designs, but this makes it difficult for search engines to read them. You want to stick to text links if possible (using CSS to give it any kind of design you want, be creative!) because it is easier for search engines to crawl and determine what type of content will be on your site.

Link Your Titles

This is something that some web designers forget to do, but is very important. A normal HTTP link looks something like this:

<a href="http://www.myrender.com">Check Out Our Homepage!</a>

^This is the HTML code that creates a hyperlink, the clickable text linked to our homepage reads Check Out Our Homepage!

This is great, because it is simple HTML and search engine spiders can easily read this and determine what it links to. One thing that isn’t included in the above link is the title of the link, which search engines also read. The same link above with a title would look like this:

<a title=”Render Perfect Productions Inc.” href=”http://www.myrender.com”>Check Out Our Homepage!</a>

^This displays the exact same as the previous link, but the title will appear if you hover your pointer over the Link for a little bit. Try it out:
Check Our Our Homepage!

While most people don’t hover over every link to check what the title is, the search engine still reads through that and it’s a great space to put keywords that you would like users to search for to locate your site.

Alt Tag Your Images

While naming your images with keywords (ex: our banner image is named “RenderPerfect.png”) helps tremendously, the alternative or “alt” tags that can be applied to the HTML <img src=”#”> code help a lot too. These alt tags are really only ever seen if the images fail to load or if someone has their browser set to not load images. However, the search engine spiders crawl through your whole page and they use the alt tags to determine the content of your image. Just like link titles, this can be a great location to put keywords that you are trying to rank for.

An example of a regular HTML img tag looks something like this:

<img src=”http://myrender.com/storage/post-images/RenderPerfect.png”>

^This would just display whatever image is located at that web address, in this case, a Render Perfect Logo!

An example of an HTML image tag with an alternate description would look like this:

Render Perfect Productions Inc<img src=”http://myrender.com/storage/post-images/RenderPerfect.png” alt=”Render Perfect Productions Inc”/>

^This would look EXACTLY like the above image tag, but it would have an alternate description of “Render Perfect Productions Inc”, which would only display if the image failed to load.

An alt tag should be used on every image on your website, in case you have images that are irrelevantly named, like GD2011.jpg. Maybe you named it that because its an image that says “Graphic Design 2011”, search engines would have no idea what GD2011 was, but they definitely would recognize Graphic Design 2011, since a lot of users search for the terms “Graphic Design” and “2011.”

Use Your Headings Wisely

It’s no secret that page headings (H1,H2,H3,etc.) help search engines and users alike when determining what a page is all about. But some websites use them in the wrong way. You want at least one H1, H2, and H3 on most of your pages. You want to use them correctly as well, being careful not to haphazardly place them all right next to each other and fill them up with keywords. You almost NEVER want them to be the same word or phrase. The H1, H2, and H3 tags are intended to be used for Site Titles, Page Titles, and Object Titles (or Subtitles), respectively.

An example of good heading usage would be as follows:

<h1>Render Perfect Productions Inc</h1>
<p>Basic description of your company, what services they offer, and why your potential clients should choose you.</p>
<h2>Graphic Design</h2>
<p>Description of your graphic design services, and any other important information you want users to know (about graphic design!).</p>
<h3>Logo Development</h3>
<p>Description of your logo development services. Notice: Logo Development is a service in the category of Graphic Design, so it is still relevant. You wouldn’t want to start talking about Web Video after you’ve declared the Page Title (H2) “Graphic Design”. Make sure your web pages are well structured, it makes the heading tags much easier to implement successfully and correctly.</p>

Which would end up looking something like this

Render Perfect Productions Inc

Basic description of your company, what services they offer, and why your potential clients should choose you.

Graphic Design

Description of your graphic design servies, and any other important information you want your users to know (about Graphic Design, of course!).

Logo Development

Description of your logo development services. Notice: Logo Development is a service under the category of Graphic Design, so it is still relevant. You wouldn’t want to start talking about Web Video after you’ve declared the Page Title (H2) “Graphic Design”. Make sure your web pages are well structured, it makes the heading tags much easier to implement successfully and in the correct way.

Keep Your User In Mind, Always

This is the most important SEO tip of all. While it is good practice to use Title Tags, Alt Tags, and Heading tags, you shouldn’t try to stuff your page full of keywords. Search engines are quite sophisticated and look down upon keyword stuffing. Most of all, you want to make sure that your users or potential clients are able to easily navigate through your site, understand all of your content, and easily access any information they need from your site.

Good Luck and Happy Optimizing!!

New Features with iFrames for Facebook Fan Pages

As of February 10, 2011, Facebook made it so that Fan Pages would use iframes rather than the previous FBML (Facebook Markup Language).  Facebook Fan Page admins and developers saw this as a change for the better.  It makes creating stylish, interactive apps or Fan Page tabs much easier than it used to be.  Instead of learning Facebook’s experimental (and confusing) FBML code, a developer is now able to create an external web page using basically any standard web programming language he or she desires (HTML, Javascript, CSS, etc.).  This means you can display almost anything you’d like in your Facebook Fan Page, except for Flash applets. This includes full web pages with navigation, videos, music, image rotators, etc.

Now, whenever a new Fan Page tab is created, regardless of the content, it is classified as an app that you add to your Facebook page.  This is great if you have multiple Fan Pages for different products or services, and you’d like that app to be on all of them. Instead of having to add or change the FBML tabs and copy/paste or even re-write the code, you can just add the app you created with the click of a button.  Also, these new iFrame pages are dynamic, meaning if you change anything about the page that’s linked to your iFrame, it will change on your Facebook page instantly, without even having to log in to your Facebook to update them.  Again, users with multiple Facebook pages will find that this is much easier and saves loads of time.

With the limited promotional options available within Facebook, the incorporation of iFrames into the Facebook development framework is truly a blessing for marketers and web developers.  It essentially allows you to create a very customizable window to an “outside” web environment where you have more control over the design and function then you have “inside” Facebook.  The use of standardized web development tools provide enhanced abilities to track and report on user engagement.

We are excited about the ways we will be able to incorporate promotional video, web forms, and targeted landing pages for clients within their Facebook Fan Pages.  Let us know if you want more information, of have ideas for developing with iFrames within your Facebook Fan Page.

Powerful Web Video Marketing Comes To Towson!

We’re excited to announce that we have moved our video production and web design studio to Towson!

That’s right, Render Perfect has uprooted and moved over to 604 E Joppa Road in Towson Maryland! This move is just the first of many exciting changes in the growth of our company. In the coming weeks we will be unveiling our newly redesigned website including blog posts and video tutorials on how to best use your brand’s content to gain efficient and effective web marketing.

Rest assured, we still offer all of the same services that we did in the past, just in a location that we feel is more central to our client base. We invite you to come check out our new studio and look forward to helping you make the most of your video and web marketing in 2011!

Download our V-Card here to make updating your address book easier.

3 Tips For Working With A Video Company

Recently I received an email from a previous client whose organization was planing for a video they needed to produce. The question he asked was timeless in our line of work:

About how much does it cost to produce a 60 second animation?

I ended up writing him a response that addressed a lot of problems with that question. I decided that it might be useful to post an informal primer to help businesses communicate more effectively with a prospective video producer.

Have a specific goal in mind for your video
This is the cornerstone of all video production.  Having a clear goal guides every other decision you will make in the production process.

Instead of,

“My business wants something we can put on our YouTube channel.”

try,

“I want a YouTube video that has a humorous edge and can promote my top-selling product. A video that will be shared amongst 17-30 year old males, and will gain 10,000+ views within the first 3 months.”

Immediately the picture is clearer. A talented producer will be able to tell you immediately if her company is right for the job. She will also be able to start piecing together specific details about the scope of the project. A writer and talent will have to be brought on board. A distribution strategy will have to be developed.

Name Your Price
Many people feel that if they name how much they want to spend, they will get taken advantage of. However, when you name your price, you name the level of production that you wish to achieve. A commercial can be made for $30 or $3000, it really depends on the level of production. Knowing the goals for your video will be the key to figuring out how much money to invest.

WARNING: Measuring your  budget against a proposed hourly rate is not a good strategy. Just imagine you had to hire someone to type a long document for you. One applicant is the best in her field, has worked as a stenographer for 10+ years. Her rate is $100 an hour. The other applicant was just introduced to a computer three months ago. His rate is $30 an hour. Who would you hire? In one situation you pay a higher hourly price, but get your job completed quickly and with few mistakes. In the other situation, you have to wait longer for your project to be completed, it’s probably riddled with mistakes, and you actually end up paying about the same total amount because it takes up to 4 times as long for the typist to complete.

If naming a price is still over your head or you just have a clue where to begin, try this approach: View past work by the video company.  Find a video that you feel might be similar to what you want, then ask how much that particular video cost to produce.

Have A Deadline
Nothing gets more convoluted than a project in limbo. Goals expand, mindsets change, and suddenly the scope of your video can become much broader.  Have a deadline for when you want to launch and remember: video has the option of being re-purposed. Release your video, analyze effectiveness, and tweak to maximize. It is very rare for a message to be totally successful right out of the gate. But the only way to see what works, is to get your video out of the boardroom and into the hearts and minds of your viewers.

—-

Want to see more posts like this? Ask us for advice on proceeding with your project. Seriously, it gives ideas for some great posts!

Flyers Are Never Marked As SPAM

…but they still have the ability to piss off random people, and people still (mentally) mark it as junk.

Some fun facts about SPAM:

  • SPAM is not just digital.
  • SPAM was around before the Internet.
  • SPAM will be around after the Internet.
  • Probably the most frustrating thing about SPAM is that people usually know when they are SPAMMING someone.
  • They also know that it will be fairly ineffective. SPAM artists rely on sending out en masse and hope for a (usually tiny) percentage of people to buy

Is your marketing goal to avoid the SPAM folder or is it to actually engage, enlighten, and perhaps sell something?

Thanks to FedEx/Kinkos for this poster that inspired me to think about SPAM. It makes me wonder why they sent this message on a poster and not on a flyer. Probably because I would have marked it as SPAM.

Facebook > The Internet?

While perusing Twitter the other day, I found an “alarming” fact that I’ll paraphrase here:

“One of the world’s largest brands publicly announced that it would rather drive traffic to their Facebook page than their web page.” 

Gasp!

I followed up with the Tweeter to no avail, so who knows if it’s true or not. Regardless, let me talk about why this isn’t (or wouldn’t be) so shocking after all.

Why would you, as a brand, want to get more hits on your Facebook page rather than your website?

1. Facebook Gives You A Captive Audience

Having an active Facebook page is your opportunity to have a captive audience tuned into your “channel.” Sure there are comparable solutions in the web world; you can gauge your analytics; you can see how many unique visitors are on your website everyday; you can even create a Feedburner account to see how many subscribers you have. Unfortunately all of this data provides faceless numbers and zero opportunity to really know who your fans are.

The benefit of having Facebook “fans” is knowing that at any given moment you can broadcast a message that you know will reach your audience. The results are near-instantaneous: If your message fails, you know immediately.

2. Facebook Gives You An Open Forum (if you want it)

The key to reaching your audience on Facebook is message portability. Not only are you reaching a captive audience, but they have the power easily share your message throughout their base. This is a bit more difficult to achieve from your website.

Furthermore, having “likes” on your Facebook page gives your fans an opportunity to communicate with each other. You might notice a bigger opportunity: the forum is your opportunity to communicate directly to your fan-base.

I mean this in the most personal sense. Websites are generally used for sweeping statements and basic info. With a Facebook page you can respond directly to your fans’ needs.

3. Facebook Gives You The Ability To Show Your Fans That Your Message Is Worthwhile

Perhaps you gained a fan because they like your product, restaurant, or store. On a whim they tuned into your channel. That doesn’t mean that they will stay. This is your chance to prove that your messages are worth hearing. You can do this by offering a great deal once a week or maybe just by being genuinely engaging.(Actually, both is a nice approach!)

The great thing is that actively maintaining your Facebook page puts you in a more active role in front of your audience. Instead of relying on updating your website once a quarter and updating your blog once a month, you end up on the frontlines with your fans. Before you say “Well my webmaster said he can make all of that happen on my website with a couple of simple design changes and a few widgets!” Think about it. Websites are great and they remain a very needed tool in your brand marketing. But to deny the fact that web audiences are spending a humongous amount of time staying on Facebook is to deny yourself an opportunity to really reach those people.

Join Render Perfect on Facebook!

SPAM Lives In Social Media Too

“Please just delete the message if you do not want it”
-actual message from a Facebook spammer

The words Social Media tend to conjure up images of birds chirping, tweet-ups, keeping up with grandma, and perhaps happily drumming up more customers for your business. But let’s not forget the golden rule of communication on a mass-level: your message has to be wanted. It’s a bit confusing that while a ton of people are up in arms about the ever-changing Facebook privacy policy, I hear few people complaining about the easily-abused message system within Facebook.

Let’s say, I am a SPAMMER (most people will picture a brooding ominous figure ala Dr. Claw, but in this case let’s picture the SPAMMER as a well-meaning yet tasteless event marketer.) I create an event that I think is really cool and I want everyone to know about. I invite all of my friends, and perhaps encourage a few close friends to invite all of their friends as well. I then, very quickly, have 1000 or more people invited to my event. Here’s where the fun starts. I can now send ALL invitees a message, over and over again.

Is there a way to stop getting these messages? Sure, but its not as simple as just hitting UNSUBSCRIBE. You have to navigate to the event and remove yourself from the event manually. That doesn’t mean I can’t throw you back on the list whenever I want to.

What’s the lesson here? Well, nothing really. As long as there are popular forums for mass communication, there will always be those folks who choose to ignore permission-based marketing and abuse the system. But my prediction is that it is not the privacy policy, or the ever-present rumor that Facebook will someday charge a fee that will kill the popular sharing site. Rather it’s these tiny loopholes that allow marketers to easily abuse the system that will have people leaving in droves. People navigated away from Myspace because it was way too easy for bands and everyone else to SPAM them. It’s only a matter of time before Myspace’s spammers move aggressively to where the audience is.

The Pa-Pa-Pa-Power of Advertising Laterally

Here’s a Zen question that keeps me up at night: Has subversive gone mainstream, or is the new mainstream just more subversive?  Since I tend to talk alot about video advertising on this blog you might already see where I’m heading.

Film buffs in the Baltimore-Washington area might remember a small film festival called MicroCineFest.  MicroCineFest was a small 5-day fest located in Baltimore’s Hampden neighborhood and it featured some of the craziest, most extreme, and subversive videos on Earth.  Remember, these were the days before YouTube (BYT), so people would come from far and wide to check out some insanely creative videos.

I was very into the programming at MicroCineFest.  It was challenging.  As a videomaker it made me wonder: If this is the film subgenre I am into, how could I ever be able to put this to work?  In other words, this seemingly unmarketable subgenre of film was fine for the arthouse, but could it ever break out?

Well here we are roughly 10 years later. YouTube dominates the web (and television for that matter).  Film festivals of any kind seem somewhat passe.  And commercials like this can be found running during primetime on national channels:

What happened?  It’s like all the filmmakers who made those crazy MicroCineFest films got real jobs and convinced huge companies to try something boldly different.  Not only that, but it’s working.  I personally heard a huge buzz about these commercials from friends before actually seeing them.  And just recently, I was alarmed to find my friend proudly displaying his collection of various Old Spice products.

The video is doing quite well online too.  With nearly 4 million views, the majority of comments read like this:

  • “that was @#$%ingepic sweet vid”
  • “Second commercial to convince me to buy a product. First was the last Old Spice one, man on a horse.”

and the comment that really hits the nail on the head:

  • “It’s as if they wanted the commercials to become viral videos that we would love and give millions of hits. Good job!”

So I guess the answer to my question is the latter.  With a variety of equally popular media outlets available for distribution, there is no longer a mainstream for media consumption.  In turn, the mainstream messages must get more subversive to accomodate each.  Successful campaigns are not created by pushing a variety of mediocre messages through one premium outlet but rather spreading one highly-contagious message over a variety of outlets.

Use Video To Empower Customers To Market For You

Ever since there have been products and services worth talking about, word-of-mouth has always been the “Holy Grail” of marketing. Developing effective word-of-mouth is elusive in nature, but critical to the success of a business.  It is hard work to create and maintain word-of-mouth, but once you have a good core group of customer evangelists out there preaching the good word of your company’s product or service, there is nothing more powerful.

In order for your company to further empower its customer evangelists, you must make it easy for them to spread their positive word-of-mouth endorsement of your brand. Employing a short promotional web video to create a compelling and highly-portable message is a perfect tool to build word-of-mouth about your company.

Creating a short promotional video that highlights a word-of-mouth endorsement from your existing customers can be extremely effective.  These messages can be created and distributed to your word-of-mouth influencers in the form of web links, embedded Flash video or a posting on YouTube or other video sites.

It is important that the messages developed to support word-of-mouth campaigns include two key characteristics:

  1. Be sure to include a strong call-to-action
  2. Tie in your call to action with an incentive-based promotion

You need to capitalize on the momentum that your word-of-mouth influencer is providing, and you need to provide an added value within your message’s call-to-action in order for your word-of-mouth influencer to be perceived as not only providing good advice but also providing a value or savings.

This value-added component is key to the success of this style of marketing.  It can be a coupon code, percentage-based discount, or even a free giveaway. It is important to reward your word-of-mouth influencer for assisting you in your marketing effort.

So work hard on building your organization’s brand.  Target those individuals that can become powerful word-of-mouth marketing partners and support them every step of the way.