Tuesday, November 22, 2011

Web Design Case Study: CareerXroads

We launched a new website for CareerXroads today and it can be viewed at http://www.careerxroads.com/.

TBH Creative was hired by CareerXroads to conduct a site audit. We went page by page and provided a detailed report of suggestions with priority for upgrades and fixes. The suggestions presented led to many upgrades on various pages throughout the website including a revised and more intuitive sitemap.

The most notable change was a home page and template redesign. We added more interactivity on the homepage with custom built content sliders using JQuery technology. The footer is also interactive on the homepage and each interior page to highlight their social media without taking up a significant amount of page real estate.

In the recoding process for the new design, we removed all Flash elements and replaced with JQuery for a better mobile experience.

Before redesign:

CareerXroads' homepage prior to redesign.

After redesign:

CareerXroads' homepage. Visit their site.
CareerXroads' Service page. Visit their site.

About CareerXroads

Gerry Crispin and Mark Mehler are the personalities behind CareerXroads and the CareerXroads Colloquium. Mark and Gerry have worked for and with corporations of all sizes in career planning and placement, contract recruiting, executive search, recruitment advertising and human resource management. After years working on the front lines of recruiting, these two saw a new potential in the Internet and in 1994 came together to create CareerXroads.


Friday, November 18, 2011

Web Design Trends for 2012: HTML5 & CSS3

Our first prediction for web design trends in 2012 is HTML5 & CSS3. We are doing a series of 2012 web design trends.

HTML5

HTML5 is becoming more and more popular within web development. However, it is still in development, so it does not work in all browsers yet. I predict 2012 will bring many improvements and enhancements to what is available and supported.

Uses for HTML5
Currently, HTML 5 is mostly being used for videos, audio and animations. This is why several people are questioning if HTML5 will “kill” Flash. HTML5 is also great for placeholders, auto focusing and much more!

Examples
This is by far my favorite HTML5 website (as of right now). The Wilderness Downtown is an interactive website/music video for Arcade Fire’s song “We Used to Wait”. Users are asked to enter the address of childhood home. The site uses Google Maps and HTML5 to create a one of a kind personalized music video.

The Wilderness Downtown homepage uses HTML5. Visit the site.


There are several other great examples of HTML5 on the web. Agent 008 Ball uses HTML5’s canvas and allows users to play a game of Billiards.

Agent 008 Ball homepage uses HTML5. Visit the site.


Hungry for more HTML5 websites? HTML5 Gallery has several examples to look through!

CSS3

CSS3 has made styling much easier for web developers everywhere! CSS3 offers border-radius, embedded fonts, transparency, rotation, gradient backgrounds and more. Like HTML5, CSS3 is not compatible in all browsers just yet. For example, the radius corners do not work in IE, so corners are boxed.

The @font-face is probably my most favorite CSS3 style! Creativity is endless when it comes to fonts. You can use the Font Squirrel generator to create your own (or you can use the premade ones)! Mobilezr uses the @font-face CSS3 style with their website.

The Mobilezr homepage uses CSS3. Visit the site.

When will HTML5 & CSS3 be compatible with every browser?

HTML5 Readiness has a beautiful interactive graphic showing the progress with browser compatibility since 2008. Google Chrome is currently the only browser that is compatible with everything. When do you think every browser will be ready? One year? Two years?

Wednesday, November 16, 2011

Web Design Trends for 2012

Seeing as 2011 is starting to come to a close, I thought it would be a good idea to talk about what I see as being hot trends in web design for 2012. Last year, Shannon posted her predicted trends for 2011. There are several similarities between last year and this year’s predictions but some new ideas as well.

I also checked out CPR Enterprises and their predictions for 2012. Our ideas were aligned in several ways. As a web design, it is important to be aware of what great things are coming to the future of web design and development so this is an important topic.

Until the end of the year, I will be posting blogs on 2012 web design trend in my list. There will be plenty of examples (and design inspiration) with each post. We hope you enjoy reading about 2012 web design and encourage you to give us your feedback and samples too.

Here are the design trends I will be blogging about in the coming weeks:

1. HTML5/CSS3

This hits the top of my list! HTML5 and CSS3 are still in the development process. I am very impressed with what has come out of these coding advances so far!


2. Design Below the Fold

Lately I have been seeing a lot of beautiful graphics near the footer of websites. The graphics are either very colorful or blend into the background. The help anchor the website design, give balance on the page, and reiterate important links and information.


3. Responsive Web Design/Fluid Grids

Mobile compatibility is extremely important this year. There are more smart phones and tablets than in previous years and it is a steady growing change. Making sure your website looks great in any platform is becoming more and more important, and the options for coding for these platforms are also becoming easier to implement and test.


4. Typography

Typography makes things a little more interesting, right? Sometimes, standard fonts look okay for certain websites. Most of the time, however, a little typography can make any website stand out. There is a balance between using a creative font for highlights and an easy to read font for the main body of information.



5. Large High Quality Photograph Backgrounds

I have been noticing this on a lot of websites lately. Large photograph backgrounds definitely grab they user’s attention, but are they too distracting?



6. Social Media Integration

Social media definitely is not going away. More and more websites are making it easier for users to share the information on their Twitter, Facebook, Google+, etc.



7. One Page Layouts

Single page web design with anchor tag navigation is still popular. These work bests on sites that do not have a lot of content.



Tuesday, November 15, 2011

Extend your brand with a Google+ Page

Last week Google got a bit closer toward becoming a truly competitive social network channel for companies, nonprofits, organizations, brands, products, and other entities when it launched Google+ Pages, its answer to Facebook fan pages.

Creating pages is open to all brands now, and we've created our profile so that you can add TBH Creative to your web developers circle.

Though TBH Creative has a strategic outreach plan that includes this blog, Facebook, and Twitter, we're adding a Google+ presence, too. Google has influence and power, attracting over one billion unique visitors every month. Third party tools—like Hootsuite—already have recognized G+'s potential and many have launched useful services to help brands manage their circles, publish to their pages, and monitor usage. Joining Google+ makes sense for our goals, and by grabbing our page now while there is no brand verification we are going to be saved the hassle of dealing with a brand hijacking later on.



Google+ Pages isn't perfect, though. Currently, only one person can be connected to an account, though multiple admins is a feature that Google has announced is coming. In the meantime, as workarounds, you can create a generic e-mail account from which to create and manage a page or use a third-party application. For more caveats, consider reading the entry that tech guru and super user Robert Scoble posted to his blog.

There's nothing much to see on our TBH Creative Google+ Page just yet, but through our home on Google+ we plan to directly interact with clients and colleagues and share relevant web trend stories and other development-focused content.


Monday, November 7, 2011

Web Design Graphics: Constructing An Effective Infographic

Infographics, or information graphics, have been all over the Internet lately.

Infographics can be effective on your website to add appeal, uniqueness, professionalism and overall interest.

What is an infographic, exactly? You've probably seen one before, but had no idea it was called an infographic. Below is an example from Daily Infographic:

An example infographic about coffee.

Read Write Enterprise wrote an article titled “6 Reasons Most Infographics Don’t Cut It.” This article can be extremely helpful when creating your first infographic.

The above infographic is a great example. They can be serious, or silly. Possibilities are endless, really. Be careful not to add too much information to the infographic. It is easy to make an infographic very cluttered and hard to read. Adding sources to your infographic is always a must. Users like to see where the statistics and information came from. The sources like to get credit for having their information on the infographic as well.

One of the most important parts of an infographic is, obviously, the graphics. If your artwork isn't that great, hire a graphic designer to do the job. Let's be honest, no one wants to look at an ugly infographic.

How can I advertise my business with an infographic?

Well, what does your business do? If you sell carpet and hardwood, maybe you could talk about the pros and cons of each. If you sell televisions, maybe you could give statistics about the number televisions in the average household. At the end of an infographic, you can always add a call to action to help direct users to your business.

Need a little inspiration?

There are several websites out there with large galleries of infographics to look through. Visual.ly is a very popular infographic gallery. Daily Infographic also has several to look through. As the name suggests, they post a new infographic every day!

 

Subscribe to this blog