Yet Another Pointless Tagline
Permanently Uncached header image 1

Environments – Development, Staging and Production

March 21st, 2010 · Web Design

FWA fuckedThe picture you see on the right is FWA like you have NEVER seen it before.  It is clearly NOT as the developers, designers, or the owners of the site intended you or I to see it, but we are.  This is the perfect example of why you should run multiple development and testing environments before deploying to a live server.

Not A Luxury

Working with separated code bases from development, to staging, and on to production are not luxuries, they are the bare minimum for any ‘product’ development life-cycle.  Any company that values their weight in gold should practice the art of running multiple environments for development whether working on a single or multiple sites, apps or anything else.

With version control systems the process of managing multiple environments is super simple and even the most complex structures of trunk and branches can be easily navigated, kept up-to-date, bug-fixed, enhanced and deployed.  Ensuring that you can develop, test and deploy code without having to worry about unnecessarily breaking things for other members of the team, or for clients reviewing the site, or application is critical.  Using a single codebase for all cycles in the development process and review or production IS a disaster waiting to happen, and with a less than elaborate configuration file, you can easily hook a single code base into different setups dependent on hostname.

Automatic Builds – Development

Using SVN hosting services such as Beanstalk make it a lot easier to work with multiple environments by building, either automatically or manually, to a remote server, whilst compiling and deploying compiled SWFs or other code can easily be uploaded using ANT, or other tools.

Manual Builds – Staging & Production

On the flip side, staging and production environments need to be manual builds, but again, with Beanstalk an update is only a single click away.  This is the key to stability and making site that site visitors have the best experience on the production codebase whilst QA testers or clients can use staging to make sure that everything works and looks as desired before rolling out to production.

Multiples = Best Practice

Three different environments might sound like over complication of a process, even for the most simple site, but version control is not to be sniffed at, and with some great offerings from sites such as Beanstalk, CVSdude and others with access to SVN, Git, Trac and more, the ability to integrate multiple environments into the development and deployment process is incredibly simple. There is literally no excuse.  Use the chart at SVN hosting comparison to figure out what is best for you and your team.

Setting Up Multiple Builds

Here are a couple of different ways to get setup with your hosted space:

CPanel/WHM

To get setup in cpanel with multiple builds, I would either start by setting up 3 different domains, or use a single domain and create multiple sub-domains in the control panel.  Any shared libs can either go in the root of the user home /home/<username> whilst the versioned code base should go in /home/<username>/public_html/staging/ etc.

Mosso – The Rackspace Cloud

Conversely with Mosso, you will have to set up each host as a new site, under a single client account.  The root level is where you can put any shared libs, and then of course put your code into the <hostname>/web/ folder.

What Are You Waiting For?

So there you have it, plenty of reasons and no more excuses.  Your next project, irrespective of size should be managed on this basis with version control providing the backbone for it.

→ No Comments

Zeitguised – Zeitgeist’s Irregular Twin

March 20th, 2010 · Work

Just launched last week is a simple portfolio site for the duo of Henrik Mauler and Jamie Raap that are Zeitguised.  On zeitguised.com their inimitable and award-winning style in 3D animation is showcased, with awesome work for MTV, AOL, Toyota and others.  The project pages display a combination of text, images and videos hosted on Vimeo.  It’s clean, simple and super effective.

With the site now updated and content showcased and full accessible the plaudits are already rolling in with direct links from design trending blogs such as NetDiver and NotCot – So congrats to the duo that are Zeitguised!

→ No Comments

Good SEO Practice for Creating Content

March 19th, 2010 · SEO

What more can I say that hasn’t been said already on this blog and which hasn’t been written in my forthcoming book The Good SEO Guide – Understanding The Basics.  There’s only so many ways to get your content creation right and helping to sell it, but just for the hell of it, here are a few tips:

  • Pick Your Audience – It’s always good to know who you are targeting and what they would be interested in.  Kind of makes sense, no?  Giving people what they want is always the best way to convert.
  • Make It Useful – It’s not enough to produce content & people to come.  Indeed if you follow all of these rules, they will, but if you make it useful, you will benefit from side effects, such as sharing and backlinks.
  • Research Keywords/Phrases – Don’t just write blind, make sure that you create titles with specific and likely search terms in mind.  Direct hits on keyword combinations or phrases are optimal in ranking.
  • Structure Pages – Start your blog posts, web pages or anything else with an H1 and follow it on properly with further titles and paragraphs.  With no H1 you are creating an impediment to natural search traffic on your site. Beyond this , use tags properly and efficiently.
  • Annotation – Part of SEO is about building well crafted HTML and accessible content.  To this end ensure that your links, images and other embed content is annotated correctly with TITLE and ALT attributes as required.  Include those all important keywords, wherever possible.
  • Avoid Duplication – Don’t duplicate content across your site, multiple sites or amongst a network of interconnected sites.  This is why I get annoyed when people hijack my content.  Within your own site and domains, alert spiders to duplicate content on different URLs by using META link tags.
  • Alternate Content - Graceful degradation is a buzz word people love to throw about in web developer job interviews.  What it means is, whatever you do, if pages don’t load properly the fallback is elegant.  For example, without flash, make sure there is SEO-friendly content that can be read by spiders and users a like.  In essence, build actual HTML pages with content!!!
  • Auto-Build Sitemap – Every time you write to a blog, or site, make sure the XML sitemap is auto-updated and the search engines pinged to alert them.  There are lists of URLs to ping online, so if you are building a custom system, definitely hunt around for them.
  • Promote It – If you are lucky your content will sell itself via Google or any other search engine, but you should definitely still promote it, either via social media or by making sure it gets onto the streams of content aggregators, this will feed back into your search engine success.

These are 9 simple rules to remember when developing your content.  Over the last 10 years I written a shed load of articles, and blogs and had varying success with creating popularity.

Different things work for different content, whether you are writing a blog, content for a museum collection website, or developing for your eccommerce site, so there isn’t necessarily a hard and fast rule.  Just find something that works, and do the basics right!

Go forth and conquer!

→ No Comments

Let’s Colour Project – Dulux

March 18th, 2010 · Work

Recently launched is our on-going handy work for Dulux and Euro RSCG, the Let’s Colour Project.   In the words of Creativity Online:

The Dulux Let’s Colour Project out of Euro RSCG Worldwide is a global movement enlisting people around the globe to paint the dull out of their communities. The effort will bring people together in neighborhood painting events around the world. The Let’s Colour blog celebrates all things colorful and documents Dulux’s colorful community transformations in countries like Brazil, India, France and the U.K.

It’s a wonderful project that just proves how inspiring colour can be, and the Let’s Colour Blog is a visual cornucopia of delight, with awesome ideas and tips and tools for everyone from designers to home decorators.  Never must there be a dull day again!

→ 1 Comment

Testing Website Slow Performance

March 17th, 2010 · Web Design

I have spoken very recently about speeding up web site performance, and I thought  would throw some more thoughts into the mix.  The first is an EXCELLENT post from Yahoo on Best Practices for Speeding Up Your Website, and it goes massively in depth, touching on all the points I made previously, plus a whole load more.  It’s a LONG post, so prepare yourself a cup of tea, or cup o’ joe and get ready for the long haul.

Above and beyond Yahoo’s offering, I wanted to run over a cool feature of the Labs section in Google Webmaster Tools.  It’s a Website Speed analysis suite and helps guide you through the process of helping to speed up the load times of your pages to ensure that they are sub 1 second.  Anything above 1 second is considered slow!

Here’s a visual of the page for one of my sites:

As you can see tab pretty much includes a performance overview, a mandatory graph, a list of example pages from the site in question + their average speed over time, and then some all important suggestions on how to improve the performance of your website.  In this case, 2 possibilities:

  • Enable GZip compression – Minimize data transfer and save upto 33.2KB
  • Minimize DNS Lookups – 2 singular files coming from 2 different hosts, unnecessary lookups

We all benefit from a faster web, from webmasters, to web site visitors and onto search engines.  To this end they recommend installing a FireFox Add-on, the Page Speed plug-in.  How this works or doesn’t work with Y-Slow, Yahoo’s equivalent web site speed plug-in, I doubt it will as they both tap into the Firebug architecture.  …on the edge of your seat? Click here to solve the mystery.

→ 1 Comment