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.

The sites I browse when I’m kicking back and defragging range in theme and content though most of them are funny in one way or another.  Humour comes from many sources for me, though lately I tend to hit emailsfromcrazypeople.com.

Normally the emails just make me laugh.  Today, the laughter was accompanied by a lesson, the moral of which was “don’t steal people’s images”.  To start things off, here’s a screencap of the email (source: emailsfromcrazypeople.com, original source: unknown)

There’s a moral to the story here, and the moral is that the images that are shown in a Google image search are not public domain any more than the webpages you would find in a regular search.  When you click on an image, the note is displayed “Image may be subject to copyright” alongside the original source for the image.  That means you can’t just take it and put it on your website.  Well, you could I suppose, but you risk action from the image copyright holder and if you’re running a commercial website – possibly even financial action against you for damages.

On Hosting Nation, we pay for pretty much everything – or we use items in public domain.  On my personal website, I use all images either with permission from the copyright holder, public domain images or images with various levels of creative commons licensing.  I won’t get into what those licensing options mean, but I will make some suggestions for getting images for your site.

If you find something you like in Google images, contact the copyright holder via email and ask for permission to use the image on your site.  Most webmasters are decent folk, and don’t mind sharing.  Some will ask for a fee, attribution or some sort of reciprocation and, considering what rights free images cost, it’s a reasonable request.

Wikimedia Commons is a bountiful source of images, many of which are in the public domain, all of which are available for use so long as you provide the right attribution.

Crestock and iStock are both great sources for high quality images ranging from photographs to Photoshop files to vectors and animations.

deviantART is a meeting place for artists and designers where you can find a plethora of images, illustrations and source materials available for use (again, often with attribution of some sort).

Clip art.  I would stay away from the “free clip art” sites, and even most of the paid ones.  Most clip art isn’t very good (though you could probably find some treasures if you looked) and there are better sources for images available.  Having said that, the Open Clip Art Library aims to create an archive of user contributed clip art that can be freely used.  They currently have over 12,000 images in the public domain.

There are thousands of artists, photographers and illustrators trying to make a name for themselves by publishing their works online and making them freely available, you just have to do the leg work.  In the end, it’s well worth the effort.

]]> http://hosting-nation.com/blog/find-rights-free-images/feed/ 0 http://hosting-nation.com/blog/how-not-to-build-and-market-your-website/ http://hosting-nation.com/blog/how-not-to-build-and-market-your-website/#comments Tue, 14 Jul 2009 23:25:46 +0000 admin http://hosting-nation.com/blog/?p=420 Yep, that’s right – I said how NOT to build your website.  You’ve probably all read dozens of posts, articles, columns and even other blogs on what you should do to sign and market your site on the web.

Well, on webpagesthatsuck.com I found a striking example of a site that’s doing essentially everything wrong.  Wrong navigation, wrong design and layout, wrong colours, wrong formatting and wrong search engine optimization.  Wrong, wrong, wrong.  So wrong that I was able to come up with a 5 reasons (immediately) this site should be removed from the internet.

The site is http://www.5safepoints.com/.  As far as I can tell, it’s a site about the Virginia Driver Improvement Program Academy.  I digress though, so here are the 5 reasons to revoke their drivers license for the information highway and put them on an e-bike in the middle of a field where they can’t hurt anyone.

Reason One:  Mystery Meat Navigation.

Do I click on the images?  The links?  Which links do I click on?  Some links take me to an external site,  some open new pages in new windows,  sometime the red underlined text is a link, sometimes it isn’t.

What they should have done

If you want to use a colour other than the standard blue or your hyperlinks, do two things.  1st, make all of your links follow the same behaviour across your website.  Second, don’t use that style for any other content.  If you links are green and underlined, don’t use that anywhere else.  Place your navigation in normal areas, in the header, the footer and the sidebar.  Randomly placed links will confuse people.

Reason Two:  Unless you’re a competent animator, don’t use animation.

Close one eye and turn your head to the left before you visit this page, viewing it in anything other than your peripheral will probably burn your retinas.  More mystery meat navigation and a horrible glowing .gif on their header.

What they should have done

Ditch the glowing header image, go with a Google calendar or third party scheduling service.

Reason Three:  Talk to the hand, better yet – don’t talk at all.

Webpages that talk to me are the worst of the worst.  If I want to hear someone talk, I’ll go to ted.com.  Worse yet is that there’s no actual point to the talking and it’s obviously not a human voice.  Some sort of speech synthesis module was used to make the voice say “thank you, click on a link to view and print directions”, just in case I wasn’t able to glean that tidbit when I clicked on the link that said “driving directions”.

What they should have done.

Just put the address with a link to the map.  Everything I see on this site makes me think of using a samurai sword to cut a slice of cheese.  Total overkill.

Reason Four:  Hidden keywords are soooooooooooo 2001.

What?  They’re using hidden keywords?  Gasp!  I’m always suspicious when I see a lot of unnecessary whitespace.  They had a lot, I mean a lot.  Sure enough, if you do a bit of clicking and dragging at the bottom of the page, the answer to the question of too much whitespace becomes all too apparent.

These folks have managed to cram in a full 1677 keyphrases into the whitespace of their site.  I can imagine the difficult time they must have checking ranks for all 1600+ of those phrases.  I even did a search for “23690 Yorktown 757″ to see where they come up.  Not in the first 50 results though, hmmm.  I so wanted to know more about that address.

What they should have done

This is a no-brainer.  They should have not stuffed their page with invisible keywords.  They should use real content to build value for clients and get those words off the page.

Reason Five:  Naming pages “Page Title” isn’t doing anything for SEO.

They should stop it, they obviously know what keywords they want to target, as they’ve stuffed them into every site that they’re associated with.  And yet, they have pages (like the FAQ) that have a title of ‘Page Title’.

Give or take, Google reports about a million competing pages for the term ‘page title’.

What they should have done.

They should have taken some keywords from here to use in their title tag.  There’s plenty to go around, I saw a few hundred cloaked in the bottom of the page.

Given time, I could come up with at least a dozen more reasons to slam this site, but I think you get the idea.   People like me, and you, will not just judge a web site but an entire business by how they represent themselves on the web.  Think about it, do these folks seem professional?  Ethical?  Not to me, and based on my interaction with their web site, I wouldn’t go near them with a ten foot length of Cat5.

For more horrible examples of web design gone wrong, visit webpagesthatsuck.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.

To be a freelancer is to sleep til 10am, to work til 2pm and spend lazy afternoons at the beach.  You can drift off to Starbucks to work on projects while sipping pensively at your low-foam vanilla latte.

Well, almost.  Freelancing may provide you with the eventual freedom to laze around in pyjamas for half the day, whack-whackity-whacking away at projects when the mood strikes you but it’s certainly not all butterflies and rainbows, especially not in the beginning.  No, in the beginning you can expect longer days, less money and probably just as many headaches as you had when you worked for an agency.

All is not lost though, Smashing Magazine published an article titled The Roadmap To Becoming A Professional Freelance Web Designer.  If you’re thinking about making the move to the wonderful world of freelancing, give this nugget a read before you do.  You’ll be glad you did.

Surfing the web is especially fun this time of year.  Halloween is my favorite fall holiday (over and above the Thanksgiving Turkeys and the November Remembrances).

For me, and I imagine for many of us, Halloween is the last hurrah before jumping head first into the commercial cacophony of the Christmas Holidays.  It’s also a time where you get to feel a little bit like a kid again – whether you’re dressing up for work or joining in the fun with your own children.

As the director of marketing and communications for Hosting Nation, I spend a lot of my time writing official communication and documentation.  Sometimes that means developing our support infrastructure, sometimes it means an official announcement or release to our clients.  Often it involves policy decisions

and implementation.  All of the designs we’re working on are for official product releases or commercial projects, so my usual eclectic aesthetic tastes will often take a back seat to what appeals to a broad audience.

Not today though, today convention (and maybe a witch or two if we’re lucky) will go flying out the window.  Today I’ll be traversing the interwebs like a spooky Halloween spider, digging up my favourite Halloween resources and sharing them all with you.

Search Engine Spooksters.

All the major search engines are in on the game.  Google has, once again, dressed up their logo for Halloween with a nice rendition of a carved pumpkin.  Yahoo is in on the game as well with a spooky little flash header that animates some blinking creepy eyes and a few Fledermauses.  MSN did the minimum with a pumpkin image in the header.  My favourite Halloween imagery probably came from my least favourite search engine, Ask.  Ask did a full page autumnal spread that you can view in full screen here.

Other search engines I’ve been keeping my eye on such as Cuil and Hakia didn’t appear to do anything, hardly surprising as I imagine they’re focused on market share rather than fun designs that don’t last more than a day (still, I think it’s important to embrace the spirit of the season).  Hopefully as they gain some market share we’ll see them becoming a bit more creative.

Design

PSDtuts is a great site to learn some pretty neat Photoshop techniques.  If you ignore the comments of the jaded few who chastise PSDtuts for low quality tutorials, you can glean some pretty helpful tips and tools for designing your own materials.  For the Halloween season, they’ve done a series of 40 Spine-chilling Horror Photoshop Effects, many of which are pretty cool.

Smashing Magazine has proffered a nice roundup of various Halloween wallpapers and some decent Halloween Vector Images that you can check out in their post on Beautiful Halloween Wallpapers And Halloween DIY-Tutorials.

iStock Photos offers a taste of Halloween eye-candy with a free themed image just in time for the holiday.  You can probably still grab the image if you hurry.

Other Media

Gizmodo has a gallery of the 25 Best Geek-o’-Lanterns in the World, as did Wired (Erik likes the Death Star most of all)

BluAlien on Flickr has started a competition for the best 2008 Halloween photo, some of them are already up and you can view them here.

Worth 1000 has some wickedly awesome photoshopped jack-o-lanterns in a series of 6 contests, (you can view results of this contest, and many more on Worth 1000, by clicking here) .  Some of them are pretty awesome – but keep in mind they’re all photoshopped so it’s not likely  you’ll see any of these on your neighbour’s porch tonight.

And finally, before I leave you to your pumpkin spiced lattes and trick-or-treaters, the legendary town of Sleepy Hollow (home to the famous headless horseman) reports that all is quiet, the Horseman is at rest and the town is focused on fun and festivities rather than headless Halloween hijinks. You can visit the Village of Sleepy Hollow on their official website.

Happy Halloween everyone, from the hoots at Hosting Nation!