4 Tips to Keep Your Website Ahead of the Curve in 2012




This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

Sure, having a website for your business serves a practical need: to draw net-surfing users to your product or service. However, it’s also much more than slapping on a run of the mill two-column template and calling it a day. Nothing kills an online buzz like a poorly designed or drastically outdated website. Dry and boring default templates, broken assets, confusing pages and invasive widgets do nothing but harm a page’s style, which in turn reflects poorly on the company.

2012 is heralding a new wave of innovative web technologies and design, and a page that stays in step with these trends is bound to pique interest and lower your bounce rate. Even more, a well done and on-trend website remains effective well after the year is over, reeling users in with thoughtful design and building a design-conscious and taste-making reputation. Keep these tips in mind when you clean up your company’s website, and stay ahead of the curve for the new year.


1. Don’t Be Afraid to be Bold


Mail Chimp. Instagram. Pinterest. All of these websites are joined together by a commitment to bold designs and layout. Whether it’s an exaggerated footer, a turn to minimalism or a bold and new typeface, incorporating a key graphical element to a website speaks volumes about the overall composition of the layout — and a keen level of attention to detail. Opting for a bold design element is a great way to modernize a website and keep it on trend in the coming years.

A bold design can be obtained with very little money, especially for those who aren’t necessarily experienced in coding. For example, webpages operating on a WordPress can find a host of free templates that offer a wide range of customizable options to suit any business. New and exciting fonts can be found via Google‘s open API font styles and require a simple set of code to be dropped in for compatibility with a website. Inspiration and how-tos for more hands-on DIY upgrades can be found at coding/design blogs like A List Apart, One Extra Pixel and Mashable‘s Dev and Design channel.

For those with a little more cash to burn on a proper contractor, 99 Designs relies on crowdsourcing to gather great designers for companies looking for a reliable and cutting edge renovation. Companies on 99 Designs are allowed to name their own price, which means a promising design on a budget.

However you choose to go about it, a bold design dusts off the cobwebs on your old page and keeps it fresh for years to come.


2. Use HTML5 … With Care


For the last couple years, people have been buzzing about HTML5, and it’s not just chatter; HTML5 offers a lot of exciting flexibility that can make a website truly interactive. Seamlessly embedded videos, drag-and-drop interfaces and dynamic message posts are all achievable via HTML5, and with relatively little code work.

But it’s not enough to just call up your freelance web designer and throw up some HTML5 features. As with any programming language, there’s always an issue of browser compatibility. While your new and shiny UI outfitted with dynamic HTML5 might look stunning to a user running on the latest version of Chrome, your high-tech page may look like a series of broken features — or nothing at all — to a less tech-savvy user running Internet Explorer 7 (and there’s a lot of them).

This issue has been longstanding in the Internet world, but there are precautions to take in order to ensure that every user has a pleasurable experience on your website without you making a major investment. Modernizr is an open-source, JavaScript-based tool that offers feature detection for HTML5, and it’s just-as-snazzy brother CSS3. Instead of doing simple browser detection, Modernizr will figure out just what features the user’s browser can support and react accordingly. If a user is operating on an incompatible browser, then Modernizr will automatically decide whether to switch to a JavaScript-based fallback of the features or just create a downgraded version.

Make no mistake, this solution shouldn’t be implemented by a newbie to code, but it does provide a simple way to implement exciting and revolutionary features while still providing support for the little guys.


3. Cut the Fat


The traditional layouts for websites often call for separate pages that encapsulate the “About,” “Contact” and other informational areas of the website. 2011 saw minimalist designs from multiple websites, and that often translated to cutting these pages in favor of a sleeker overall design (think Tumblr). Some companies chose to forgo nearly everything to produce a strongly graphical one-page website — blogs like One Page Love and successful networking tools like Flavors.me show that people are drifting towards a bold singular statement that makes a big impact on fellow users.

As we move forward in 2012, further exploration into one-page websites is a given. But a single-page website has both its pros and cons. HTML5 can help create a one-page website that cleverly contains all necessary information via pop-up boxes or other media, but the amount of information that can be on a one-page website is still relatively limited. Do you want your website to make a bold statement about your company and focus less on a blog-style format? If so, a one-page website could be right in your wheelhouse. Are you more interested in showing off testimonials, case studies and blogs from your employees? If yes, then this trend would be worth passing on.

However, that doesn’t mean to forgo trimming entirely. Culling the best parts of your website and truncating the rest will result in a sleeker, more intuitive design — and sleek never goes out of style.


4. Tie in Social Media Intelligently


This tip could also be titled “Quit it With the Widgets.” Announcing your social media presence on your own website is an absolute necessity, but it needs to be done with care. Automatically updating widgets that stream in social media presence seems intrusive and outdated, not to mention that they can be a hassle for a DIY designer to install and maintain.

To put it simply, social media should absolutely be a presence on a business website, but it should not be a dominating presence. Integrating social media, whether in graphic links or a social ticker, should be done with the user’s eyes in mind. It’s simple on paper, but can be difficult to execute. When social media is done intelligently and with consideration, your website instantly will look socially connected and organized.

Are there any other ways you’re keeping your website ahead of the game? Let us know in the comments.

More About: design, features, HTML5, mashable, open forum, trending, web design

For more Dev & Design coverage:


This entry was posted in design, features, HTML5, mashable, open forum, trending, Web Design and tagged , , , , , , , , , . Bookmark the permalink.