Most custom websites range in the multi-thousand dollar range, whether that cost is in outsourced labour or time, a successful website will cost as much, or more than the average used car over it’s lifecycle.  Understanding how a website can break and what may cause long term problems has given all of us at Hosting Nation an appreciation for using standard methods and practices.  So we’ve compiled this checklist to help you give your site a much needed checkup.

Ten Tell Tale Signs your Site is Sick

Your site was originally designed for 800 x 600 resolution or smaller.

Since the proliferation of affordable widescreen monitors has hit the market, most sites have dropped 800 x 600 in favour of a minimum resolution of 1024 x 768.  Sites built in 800 x 600 look too small on a widescreen monitor, and you’re just not taking advantage of the many areas you have for content.

Your current design is more than five years old.

Web standards have changed a lot over the last five years, so what worked once might not work any longer.  Browsers render content differently (IE 7 vs. IE 8), old methods are deprecated and could even hurt your site.  I think three years between redesigns is normal, but you should not go longer than five years.

You’re unable to edit your site on your own, or you’re using a ‘free’ website solution.

I recently encountered a family member wanting to revamp and improve their website.  It turns out that they had a “website in a box” solution.  When I dug deeper, I found out some disturbing things.  The site could not be optimized in the ways that mattered.  The domain was owned by the company they got the site from, as were the graphics and the templates.  They were limited to five pages, and could not edit the look of the site in any way.   Worst of all, the “Free” website they had was costing them over $7.00 per month.  For one website.  With five pages.

On the other end of the scale is the client that wants to make their own edits, but has to send them to a webmaster.  There are some really great content management systems out there with thousands of extensions, looks and purposes (WordPress isn’t just a blog).  There’s no need for someone to spend thousands on a site they can’t edit themselves, when they could get something much more affordable, editable and contemporary, for under $500.

Your site uses dated methods for playing multimedia.

Using Quicktime or Windows Media for your site is akin to using leeches to cure the common cold.  With so many services like YouTube and Vimeo available, or flash players by the thousands,  you would be remiss to have your media content displayed in any other way.

Your site uses tables instead of CSS.

Used to be if you wanted anything too complex with your layout, you would have to use tables to achieve it.  Now, there are frameworks like Blueprint and the 960 Grid system that allow for all sorts of layout choices, from complex grids to simple three column designs.  Using CSS over tables will make your site work better in multiple browsers, run faster and be more conducive to making global changes and edits.

Your site does not work well in Firefox.

w3C reports that Firefox has approximately 47% of the market share, over IE’s approximate 40%.  Five years ago, you probably wouldn’t have built for Firefox. Now, most developers and designers build for Firefox and tweak for Internet Explorer.

Your site has a lack of standard navigation practices.

Maybe you used image navigation because you wanted more than simple text links, or some complex JavaScript method. There’s nothing wrong with using JavaScript for your navigation, but there are better ways to do it now than there were five years ago.  Plus, if your old JavaScript breaks – it can render your site inoperable.

Your site has multiple fonts, sizes and colours.

One font to rule them all.  It’s said you can use two if you really must, but no more than that.  Links should all be the same colour everywhere and your font sizes should be consistent.  Back in the day, the overuse of inline styles would cause all manner of problems with sizing.  It still can, but with many of the content management systems being used today it’s not as much of a concern.

Your site is built primarily in Flash.

Google still can not crawl and index flash sites properly and contextually (they can’t read the contents of a flash document).  Now, many things that used to require flash for a dynamic effect can be achieved with JavaScript or AJAX.

Your site has broken or missing links.

I see this quite a lot.  Links break, or are missing.  A page changes and the links don’t get updated, or a form submission stops working.  If people use a site with broken links, they go elsewhere.  When’s the last time you checked the links on your site?

If you need help diagnosing your website’s health, contact Hosting Nation today for a free assessment.

The scope of the project was to create a web site for Leo that would be the foundation for her web presence as well as answer three questions we thought visitors would ask.   “Who is Leo Sawicki?”, “What is Leo Sawicki doing?” and “How can I connect with Leo Sawicki?”

The site uses a smooth streamlined design to bring visitors in where they can interact with Leo on her blog, read articles, view photos and follow Leo around the world as well as connect with her on the popular sites Facebook, Amazon and LinkedIn.  Visitors can also browse through Leo’s publications and even purchase them from the online bookstore, built custom by Hosting Nation.

Visit www.leosawicki.com now to browse Leo’s website, and visit www.hosting-nation.com/design-community for details on this, and other projects we’ve worked on.

Screenshot of the homepage for www.leosawicki.com.

Best of the Web in Graphic and Web Design.

Web graphics and visual design cover everything from vector design to CSS tricks and even typography.  There are some projects that stick out as particularly exciting that I’ve listed below, projects which I think are at the forefront of a movement taking us to the next evolution of the interwebs.

Less is More…

Many of the top rated sites on the web have adopted a minimalistic approach to design, favouring light, seek designs with rich media and content over slow or graphically heavy web pages.  I’m a big fan of the minimalist movement, sites such as TED.com and twitter have taken this approach with great success and the design community is awash with buzz over this new trend.

Six Revisions has a post on minimalism in design with their recent post titled 30 Light and Sleek Web Designs For Inspiration

The thing I like most about these minimalist themes is that they’re much easier to create than really complex or graphic intensive web pages.  Plus, once you have a framework for building content pages that you like, it’s easy to change it by swapping in a new gradient or image as desired.  If you haven’t built a framework yet, look to Six Revisions again for the article,  Coding a Clean, Illustrative Web Design from Scratch

Everybody Get Fontloose…

For what feels like an eternity, web designers have been limited to the use of the 10 (or less) standardized web fonts for their projects, those fonts are: Andale Mono, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings.

While Internet Explorer is still behind the times, Firefox 3.5 has really stepped up to the plate with full support for the @font-face CSS rule.  The rule basically allows you to serve fonts to clients directly from your server, rather than relying upon the user to have the font in their system to see it.   Once this rule, or one like it, is accepted by all the major browsers we can expect to see a revolution in typefaces on the web.  Check out a demo of @font-face in action on Craigmod (FF 3.5 required).  If you have a penchant for typography like I do, check out FontShop.  They release free fonts all the time and have some great tools such as  typeNavigator and FontStruct.

Best of the Web in Marketing and SEO

Move over SEO, here comes RDF and other acronyms

The world of Search Engine Optimization should be expecting an imminent overhaul with the continuing rise in popularity of user driven sites like Twitter, and the need to organize and categorize that content for the end user.  All major search engines are looking to tap into Twitter’s stream of continuously updated information.  Rather than look to Google news during a time of crisis or emergency, better look to Twitter if you want up-to-the-minute updates.

To organize the information, I believe we’ll see a resurgence an older system used to better define information and content.  A List Apart recently wrote a 2 part article on RDFa (Resource Description Framework – in – attributes), and the W3C recommends using the attributes on your web page to define your content.  It’s reminiscent of the Dublin Core Metadata Element Set which has actually been in use since the mid 90′s.   Not surprising, since RDFa uses the dc elements for certain attributes.

The immediate downside to RDF is also an upshot.  The XML syntax for RDF is too verbose for the average user to implement effectively.  If you really want to give it a try though, start by reading the wikipedia entry on the subject and go from there.

Want to know how your site will stand up to the test of time? Contact Hosting Nation, we’ll let you know where your site stands and what you can do to bring it up to speed.

After a particularly jargon-esque day of writing legalese type documents and official notifications, I was faced with the imminent need to begin calling it something.  It wasn’t quite a flyer builder, because along with sales flyers we’d seen uses for realtors who wanted to do dynamic floorplans, uses for bands or musicians that wanted interactive gig posters and for developers who wanted interactive lot maps.  In a moment of clarity, I said “well, it’s a Dynamic Content Generator for Displaying Multimedia Content”.

But, that’s much too long, and probably wouldn’t fit on the business cards.  Several moments later, Erik (our senior developer who maintains he’s not a marketing prodigy, I have my suspicions…) comes out and says “Let’s call it Adam”.

Adam stands for Advanced Dynamic Application for creating Multimedia content.  You can check him out in glorious action at www.adamsapp.com (the domain was Erik’s idea too. When he’s on a roll, he’s on a roll).

Adam converts PDF documents into dynamic web pages.  You’ll start by uploading a PDF or image file (Adam is a hosted solution) to a personalized workspace.  There’s a drag and drop feature to add hotspots to your document, which you can reshape to fit specific areas.  Each hotspot is associated with a content field where you can add text, images, HTML and a fair sized buffet of flash objects.

Adam comes with three basic stylesheets by default so you can change the look and feel of your web document.  If you’re a CSS practitioner, you can add as many new stylesheets as you want – so the styles are virtually limitless.

It’s important to us that Adam plays well with others in the sandbox, so we’ve worked hard to make sure he could be used for all sorts of purposes (like band posters online, sales flyers, even real estate walkthroughs.)

Supported Content Providers in Action

And the best thing (we feel) about Adam is that he’s a do it yourself option.  You have complete creative control over your materials – and it’s simple enough that almost anyone can use it.

Peep the official Adam Forum for a full feature list and check out the blog for announcements as well for upcoming features and communication from the creators of Adam.  You can also follow us on twitter at http://twitter.com/HostingNation

Adam is still quite young and has a lot of growing to do.  That’s why we’ve made a free, ad-supported version to play around with while Adam is in early stages of development.  Wanna see?  That’s cool, sign up for an account with Adam now.

Epilogue: Ever since we named Adam, I haven’t been able to get the theme song for the 60′s cartoon Atom Ant out of my head – which is where the title of this post comes from.  Following the strange path in my head, it started as Adam, then Adam’s App, then Adam Ant (new wave singer from the late 70′s and early 80′s), then Atom Ant.  If you happen to be (like me) someone who appreciates a bit of nostalgia with their morning coffee, here’s the intro for the Atom Ant show.

http://www.youtube.com/watch?v=RIk11Qu_jtk

This is the first installment of “Application Nation”.  Application Nation is essentially an excuse for me (I’m Sean, marketing guy for Hosting Nation) to talk about all the new tools and tips we find and share them with the Nation (that’s everybody else). Sometimes we’re using the tools in-house, sometimes we just stumble across them.

This week I’ll be looking at Icebrrg, an automagical form creator from Element Fusion.

The last few weeks have been extremely busy at Hosting Nation, as we’re shopping for a new design for our site (among other things like a logo design, building the knowledge base and support system, dealing with current development projects and trying the Sushi place down the street – great Sushi is a key component of high productivity.)

As we were looking at other designs to get some inspiration, we crashed into an Icebrrg (I promise, no more Titanic references).

Icebrrg is a project by Element Fusion, a design and development company out of Oklahoma City, Oklahoma specializing in Web 2.0-ish, gridified design (exactly the type of design we’re looking for, BTW)

Overlooking their other projects at the moment, I was particularly intrigued by Icebrrg.  From the Icebrrg website:

Icebrrg lets anyone easily build online forms for websites and blogs — no programming, software or special skills needed.

Well, everybody says their product is easy to use, right?  If they said it was super complicated, nobody would use it.  I looked around the site, and they do have a free version called “dinghy”, so I decided to give it a whirl.

From registration, to form completion, to placing the output code on our website, to putting it live, testing the form and receiving a response took a grand total of – are you ready?  Six and One Half minutes.

Yep – you heard me, six and one half minutes, I could barely believe it myself.  I’m no developer (truly, ask Erik and Randy, our in house developers, they’ll tell you), I have limited HTML and CSS experience, and no time to mess around with something overly complicated.  That’s what makes this tool great for small businesses with a limited budget.  You need to talk to your clients now and not pay through the nose – and this tool lets you do it quickly and easily.

Want to see it in action?  I knew you would, so I’m going to build a form and post it so you can see for yourself how easy it is.

The first thing to do is sign up for an account. It’s a simple form, requiring very little in the way of personal information – something I like, as I think software companies often build applications for the purpose of getting sign-ups and mining data.

If you want to play along, you can sign up for your own free Icebrrg account here:

As they say on the site, chillingly simple so far. Once you’ve signed up (I chose the free “dinghy” account), dive right into creating a form. With the free version, you can have up to three forms running. You don’t get any data storage, but if you need to get up and running it’s a pretty good option.

To create the form, it’s as simple as clicking on the field you want from the left menu and it’s added to the form layout. By clicking on the form field, you can customize the fields and perform a few extra features.

If this is a temporary form, I suggest something very simple.  Name, email address and maybe a captcha to limit spam.  Of course, you can use up to 10 fields per form with the free account including address, phone number and more.  Depending on your business model, you may want to develop several different forms to try and raise conversion levels.  Once you’ve figured it out, click save & exit.  You’ll be taken to an admin screen with a few choices for your form.

The choices are pretty self-explanatory. View and Edit allow you to manipulate or preview your form.  Browse and Download allow you to respectively browse through your contacts on the web, or download them as a .csv or .xls file.  Share allows you to get the code in an iframe for embedding it into your site, or to embed the code on it’s own page as I’ve done here.

Altogether, the whole process takes less than 10 minutes and you’ll have a contact form up and running on your site. For a short term solution, Icebrrg is the coolest thing I’ve seen in a while.

Sean Enns is the Director of Marketing and Communications for Hosting Nation Data Inc.  Hosting Nation provides hosting packages and hosted applications to everyone.