Your site should degrade gracefully

Browsers all interpret your web site slightly differently. Should the aim be to have your site look identical across multiple browsers, or for your site to take advantage of the latest enhancements offered by modern browsers while still covering the basics for the older ones?

Internet browsers all serve the same basic purpose: They display content contained on a web server based on a visitor's request. (The request could be in the form of typing a URL into their browser's address bar or simply clicking on a link.) This process is described below:

1. A user enters a URL (web address) into the Address Bar of their browser.
2. The browser then determines which web server hosts the content for the requested URL.
3. The browser then sends a request to the web server for the relevant content that makes up the website. This could require additional computation by the web server if the document requested is written in an advanced programming language like .NET or PHP.
4. The resultant HTML document sent back by the server is downloaded to the user's computer.
5. The browser starts to process the document and may be instructed (by the document itself) to retrieve additional supporting files from the web server. These could include CSS, Javascript, images, and video etc.
6. The browser then organises all the content into a visually pleasing and logical format for the user, based on the instructions included in the retrieved HTML, CSS, Javascript and other files.

Our problem lies in step 6 - the processing and organisation of the downloaded contents. Each and every browser - be it Chrome, Firefox, Safari or Internet Explorer - will interpret the instructions contained in the HTML and CSS slightly differently. Adding to the confusion is the fact that even various versions of the same browser can display the same element differently.

Web standards and the light at the end of the tunnel

This problem is slowly being negated by a common set of web standards that browsers are meant to adhere to, although even some of these rules seem to be open to interpretation. Web browsers like Firefox, Safari and Chrome all support these standards with only a small handful of quirks. Unfortunately the same cannot be said for Microsoft's Internet Explorer. While this browser continues to improve with each major release, it's older versions - namely Internet Explorer 6 and Internet Explorer 7 (both of which still hold a fairly large market share thanks to lousy IT departments in corporate environments and the lack of high speed Internet to facilitate alternative browser downloads in the developing world) - are nothing short of atrocious in their flagrant disregard for the standards laid out by the W3C.

Browser usage statistics reveal that as at January 2010, 10% of web surfers still use Internet Explorer 6 (released in 2001) and 12% still use Internet Explorer 7 (released in 2006). This means that we cannot easily ignore them when building a site, but rather need to go out of our way to accommodate them. This process is costly and resource intensive, but cannot be avoided.

Building web sites that degrade gracefully

There are two ways to build web sites. You can build a web site specifically for the lowest common denominator, which will almost always be Microsoft's charming Internet Explorer 6. Doing this ensures that the web site not only works but also looks identical in all browsers. Unfortunately this also means that you're ignoring the last nine years of evolution in web design, effectively hamstringing your site.

You can alternatively build it for the strongest browsers on the market (adhering to web standards) and ensure that it degrades gracefully in older browsers. This means using the very latest technology and enhancements available to you, most of which will not be supported in Internet Explorer 6 and possibly 7, but also providing fallback information for the older browsers so that if a command is not understood, there is a backup instruction guaranteed to work. This ensures that your web site can use the very latest tools available, often greatly improving areas such as design or user experience. The down side, if you can call it that, is that your web site will look slightly different across multiple browsers.

The Hatchery will always choose the latter option when building your web site.

How major are these differences?

As I mentioned, most of these enhancements involve either design or user experience, and are thus cosmetic. Examples of this include a heading that could have a text-shadow effect applied to it in modern browsers but would just appear as plain text in Internet Explorer 6, 7 and 8; or a box which could have rounded corners and a gradient background in newer browsers but would appear as a solid rectangle in older ones. Overall structure and colours should not be affected in any way.

Adhering to standards futureproofs your site

Internet Explorer has been around for a long time - too long in most designer's minds! But thankfully it is being phased out. Microsoft will stop supporting it (no more security fixes etc.) in 2011, and many influential web presences like Google Docs and YouTube have formally stopped supporting it already (or will do in the next month or so). Once it is gone you do not want to be amongst a crowd of competitors who chose to to use the latest technology available to them whilst you aimed for a basic Internet Explorer 6 compliant site. The fact that your site may look slightly different across multiple browsers really shouldn't be a major concern.

I'm a Mac and Windows 7 was...sort of...my idea...

Microsoft's Windows Vista was undeniably a massive failure and fundamentally rocked the foundation on which my house is built. For the past 3 years I have been paralysed. Not physically, but technologically as far as Microsoft technologies are concerned. Having installed Windows 7 this past weekend, I am asking the question - how does Windows 7 change me, and was it really my idea as Microsoft would have me believe?

For 12+ years I have been a Microsoft software developer. To this day, The Hatchery remains a Microsoft Registered Partner and Empower Programme Subscriber. In fact, our incredibly powerful content management and e-commerce engine (Cloudbase™) is built using Visual Studio on the .NET 3.5 framework. So, it is fair to say that I am not anti-Microsoft, but in the past 3 years I have spent more money on Apple hardware and software than I have on any other technology company's products. For a breakdown of my technology spend over the past 3 years please see the Appendix at the end of this blog post.

So how did this keen Microsoft developer turn sweet on Apple and sour on Microsoft?

Quite simple: Windows Vista and the iPhone.

In masterful strokes of genius, Steve Jobs and the team at Apple have identified why their company has struggled for years against Microsoft (the Goliath), and developed technologies that couldn't solve their competitive problems any better than they do.

At the same time, Microsoft has continued to try and be everything to everyone in a world where consumers would prefer devices and software that are built for a particular job and which do that job brilliantly; that are designed, not just engineered; and that make life simpler and more enjoyable.

In my opinion, the iPod was really the turning point for Apple. It put Apple technologies in the hands of millions. With consumers accustomed to using iTunes and Apple software and hardware, the iMac and Mac OS X began their rise to prominence in the home. Then the iPhone smashed onto the scene and put Apple technology in our hands, pockets or at least very nearby for 24 hours a day. With the iPhone, Apple dangled a carrot and many developers scrambled to learn Cocoa and Xcode - the language and environment with which one can build all Mac applications. Now, with Apple stores around the world attracting millions of visitors annually, and innovation such as the iPod, iPhone and the iPad relentlessly making our lives easier and more enjoyable, Apple is undoubtedly a major player in the league of tech giants and developers are actively building software for Mac OS X and Apple's mobile equivalents.

...and how did Microsoft sour our relationship with Windows Vista?

The product was touted as revolutionary and the tech community was treated to functionality promises that dazzled. However, the reality was far from what we were encouraged to dream would be possible with this operating system.

I started this blog post talking about my technology paralysis, and Windows Vista was the cause. For 3 years I have worked on the edge of my seat, expecting Vista to crash at any moment into a blue screen of death and my work to be irreparably lost to the Windows binary monster. It has happened on multiple occasions and cost me a bundle in irrecoverable time and frustration.

Not only was Windows Vista one of the worst operating systems that Microsoft has ever released to market, but the company made further mistakes when it released the product. Some of these mistakes included: a crazy pricing model with a myriad of operating system versions that confused even the tech community, pricing 4+ times the cost of Mac's OS X Leopard, arrogance in their denials that the product had fundamental problems, and the delivery of a product that was oversold and which under-delivered.

So when Microsoft announced that Windows 7 would be released in October last year, I really couldn't have cared. The announcement didn't make me hunt down keynote speeches for more info or make plans to queue for my copy. I just ignored the news. Microsoft's Vista had made me indifferent and paralysed my interest in Redmond's products - perhaps even making an Apostle out of me for the company's competitor in Cupertino.

The problem is that I need Microsoft Windows to build websites on our technology foundation, so when Vista crashed on me on Friday I resolved to take Windows 7 for a spin as my thinking was that anything must surely be better than Vista.

Boy am I pleased that I did. Despite taking 4 hours to upgrade my Vista installation, the first brush of my mouse cursor over the Windows 7 taskbar put a smile on my face and much was forgiven. Windows 7 doesn't look that different to Windows Vista but it feels more solid. User Account Control is more robust and appropriately implemented and the attention to detail that the development team paid to this latest release is obvious. Not only does the system function better but it is quicker and uses fewer system resources to do the job. Brilliant!

So how has this changed me?

Many would brand me as an Apple Fan-boy nowadays and there is no doubt that if someone asked me what machine I would recommend they purchase, a Mac / iMac / Macbook would remain my first response in spite of Windows 7, and irrespective of the initial cost. So I am asking myself the question, am I a Mac or a PC and was Windows 7 really my idea?

After much thought, I have determined that I am a Mac. I am not yet a Mac through-and-through as I still wear my PC tie under my uber-cool and relaxed sweatshirt in the form of Windows 7 running inside VMware, but nevertheless, Mac OS X runs in my veins and the iPhone rings in my ears. As great as Windows 7 is in comparison to Vista, it is still no Mac OS X, but to it's credit, it is feeling more and more like OS X to use. So...was Windows 7 my idea?...

I guess to some extent it was. By expressing my favouritism for Apple and Mac OS X along with millions of others around the world, Microsoft has heard the pitter patter of our feet from their door to Apple's and has suddenly sat up and taken note of the features that make Mac OS X so strong. I can only hope that they continue to fight Apple for market share so that both companies remain honest, but I also hope they find the innovation and skills to catch up and start leading the world of technology again, rather than watching Steve Jobs' back as he disappears into the horizon that is the future of computing.

Appendix A (My Technology Spend over the Past 3 Years)

My headline technology spend (approximations) over the past 3 years:

1. February 2007: Hewlett Packard Pavilion dv9299ea Laptop running Windows Vista - £1,900
2. 19 June 2007: Queued for the Apple iPhone at Regent Street Store - £269
3. October 2007: Macbook Pro and Accessories - £2,100
4. 11 July 2008: Queued for the Apple iPhone 3G - £99
5. April 2008: Microsoft Empower Subscroption - £260
6. April 2008: Mac Pro - £1,800
7. April 2008: Apple 23" Cinema Display, Time Capsule and VMware Fusion - £930
8. April 2008: iWork Family Pack 2008 - £59
9. March 2008: Enrolled in the iPhone Development Program - £59
10. March 2009: Re-enrolled in the iPhone Development Program - £59
11. April 2009: Re-subscribed to the Microsoft Empower Programme - £260
12. July 2009: Repairs to HP Laptop (what a waste of time and money this laptop and HP has proven to be) - £267

These figures exclude additional RAM purchases for my Mac's, a Samsung and Epson printer and a few other smaller technology items as well as gifts such as an Apple Magic Mouse that I received this past year for Christmas. It also excludes any carrier payments to Apple for my iPhone contract with O2.

I have also purchased or encouraged family members to buy the following technology in this time (all of which were previously Windows users):

1. iPhone 3GS (my wife): £149.99
2. iMac 20" (my folks): approximately £900 (purchased in South Africa)
3. iMax 20" (my folks-in-law): approximately £900 (purchased in South Africa)
4. Macbook Pro (my folks): £900

So, in summary my calculations show:

1. Microsoft: £520 plus the license fee that formed part of the HP laptop purchase (so let's be generous and say that that was £300) = £820
2. Apple: £5,375 plus approximately £3,000 spent by family members on Apple technology.

Appendix B (What else has changed?)

The fall of Microsoft in my recommendation standings is not an isolated incident in my world. Perhaps an even bigger fall has been Hewlett Packard as I have vowed never to purchase another HP product in my lifetime. Prior to purchasing the HP Pavilion dv9299ea laptop (mentioned above), all my printers and many other bits and pieces were HP products, but since that purchase I have got rid of it all. Not only should that laptop model have been recalled by Hewlett Packard (as they did similar products) given it's faulty graphics card that on two occasions crashed it's motherboard, but the support I received from the company was absolutely abysmal. If I am going to spend £19,00 on a laptop with that spec then I expect much more from the manufacturer. I am not the only one complaining about the same or similar problems and so I am not sure HP will ever redeem itself in my eyes. Only time will tell...

Assess your site with 'View Source'

Self-diagnosis can be a dangerous folly, but being able to assess the competency of your web site on a deeper level than it’s funky cosmetics should be crucial in deciding when it’s time to hit the restart button.

Whether you’ve just had a site built or you’re stuck with an aging web presence it’s important that anyone who manages a web site can identify several key areas that dramatically effect a site’s performance and search engine efficiency. If your site can’t meet the criteria detailed below then you may be in a situation where a complete rebuild is the most appropriate solution.

Irrespective of how simple (static) or complex (dynamic) your web site is there is one common denominator that forms the foundation of what a user sees when they visit your website: HTML.

HTML is a basic programming language that, amongst other things, uses specific tags wrapped around content to tell a browser how to display an element of a web page. This is not nearly as complicated as you might imagine.

On a cosmetic level the tags tell the browser how to format the content contained within them. In the above example we are telling the browser that the text ‘Hello World’ is a heading, and it should be styled accordingly. Common tags include headings, paragraphs and images.

This code is not some obscure alchemical cocktail that is hidden in a matrix of glowing ones and zeros. You can have a look at the HTML for any web page at any time simply by asking your browser to show it to you.

Give it a go right now. If you’re using Firefox click on ‘View’ in the program menu at the top of the screen and then click on ‘Page Source’. Voila! You will be greeted by a new window filled with HTML code. Unless you come from an IT background this should look thoroughly incomprehensible. You will never need to understand it all. We are simply going to highlight some of the important bits so that you are able to ensure that they are both present and relevant in your own site’s HTML.

The first thing to appreciate is that although it looks like you can edit the text that makes up the code, you can’t. It’s read-only, meaning that you cannot influence it in any way. So flex your fingers and let’s dive right in.

What are the important bits?

There are three main sections in each and every web page.

1. A Doctype Declaration
2. A Head Section
3. A Body Section

The Doctype

The Doctype declaration should be the very first thing you see at the top of the document. It is typically just one or two lines of code. It tells the browser what flavour of HTML the page is written in. This is important because it ensures that the browser knows how to handle each element as intended by the designer or developer. If it’s not the first object in the document then that’s your first red flag: something’s wrong.

The Head Section

The Head section of the document is demarcated by an opening ‹head› tag and a closing ‹/head› tag. The content inside of these tags tells the browser about the content of the page but doesn’t actually contain any information that gets displayed within the browser window.

The first thing to look out for here is a page title. It sits within the ‹title› and ‹/title› tags. The title of the page is displayed in the browsers title bar, but even more importantly it is used by search engines to name the page in search results, and give it relevance when someone searches for associated keywords. Every page of your site should have a unique title. At The Hatchery we have found that giving each page a unique name followed by the name of the site yields the best results. For example a homepage will have a title of ‘Web & Mobile Design and Development Studio: The Hatchery Limited’, while our contact page will have a title of ‘Get in touch: The Hatchery Limited’. If your page titles are missing then you are severely hampering your site’s search engine efficiency.

The second item we need to look for in the head section is the meta data. Although there are many different types of meta data we’ll pay close attention to just two of them, description and keywords. These two items exist exclusively to tell search engines about the web page, and are therefore both very important.

Let’s look at your description first. The code will look something like this:

This description is displayed as the text below each item in a search result page and is used to index a site with relevant search terms. It is imperative that each page in your site contains a meta description.

The keywords are equally important. The code will look like this:

These keywords are recorded by search engines as potential search terms that your site would be a relevant match with. If either the description or the keywords are missing or incomplete then you have a serious problem.

The Body Section

The Body tags contain the information that will be displayed in the Browser window. It will probably look rather complicated as this is the code that defines both the content and the structure of the page. What you’re looking out for here is the extensive use of a wide range of HTML tags. Most importantly you need to pay attention to the use of heading tags, ‹h1› through to ‹h6›.

This is because search engines such as Google place more importance on text contained within these tags then they do on standard paragraph text.

The ‹h1› tag should be used for the most important object on the page. This could either be your company name or the title of an article, depending on what you think will have more traction with search results. ‹h2› Tags should be used for second-tier headings and contain words that potential visitors may search for. Headings should not be abstract as you are wasting an opportunity to boost search rankings. Similarly ‹h3› tags should be used for sub headings, and again should contain only relevant information.

Outside of headings, and if you’re starting to feel confident about your foray into the world of HTML, you can seek out the image tags in your content. Here is an example of an image tag:

The important thing to look out for here is the ‘alt=’ declaration, which plays a role in search engine optimisation and also assists disabled visitors (such as the visually impaired who may use screen-readers) in deciphering content.

Conclusion

If you find that these elements are missing or no longer relevant you’ll need to get your designers and developers involved in correcting the situation. I would not recommend attempting to rectify these mistakes yourself as this would mean editing the site’s source files (unless you use The Hatchery’s Cloudbase CMS which lets you edit this information in a structured environment).

Hopefully you’ll now be in a position to assess the foundation of your web site and determine whether or not it is providing the strongest possible platform for your online presence.

PHP vs .NET? Irrelevant question?

A new client, the same question - "which is better - PHP or .NET for my new website?". This is perhaps the most regularly asked question we are faced with in our first client meetings and I am not sure we have identified the most suitable response - at least not yet.

We are primarily .NET (C#) and SQL Server developers but only because our proprietary content and e-commerce management system (Cloudbase™) is built on this foundation. We believe we have an incredibly powerful solution in Cloudbase™ and that every website inquiry we receive can benefit from the product, but we do have some experience of PHP and MySql and big companies like Facebook use those technologies almost exclusively. So what should your website be built on?

Framework vs. Scripting Language

To start with, I should probably qualify the comparison I am drawing here by saying that we aren't exactly comparing apples with apples. Microsoft's .NET is a framework while PHP is a scripting language. The difference is quite important because we should really be comparing PHP to one of the languages (such as C# or Visual Basic) that run on the .NET framework. To avoid getting too technical however, I am going to be referring to .NET throughout this blog post as all or any of the languages that run on the framework and comparing these to PHP.

Key Differences

I initially started writing this blog post by defining PHP and .NET as well as all the major players involved with both technologies, but having just re-read it I have decided to cut all of that and state the key differences I see one facing when choosing one or the other. Much of these differences comes down to toolsets and pricing:

1. PHP is free whereas Visual Studio is not. Does this matter to you? No. The company you choose to do your website design and development will pick up the tab for the licensing of Visual Studio if you choose .NET so it makes no difference to you whatsoever.
2. MySql is free and the full version of SQL Server is not. These are database engines and both play important roles in dynamic websites built for the two languages. If you have a small (even medium-sized website) then SQL Express will suffice, and this technology IS free. Admittedly, the full version of SQL Server is pretty pricey but for the majority of websites out there, this question is mutable too.
3. PHP runs best on Linux servers and .NET will only run on Windows servers. Linux servers are significantly cheaper than Windows servers due to licensing. All true. The average difference we have seen between the two hosting options is around 10%. i.e. Windows servers cost approximately 10% more than Linux servers on a leased, monthly basis which equates to approximately £10 per month for a business dedicated server. Does this matter to a website requiring dedicated server hosting - probably not.
4. Support for PHP is poor and expensive. There are multiple, very large organisations driving PHP forward just as Microsoft does .NET but there are also a number of different PHP flavours and associated technologies available to choose from. The key question to assess the answer to here is whether your chosen development team is capable of delivering a quality, ongoing support service that matches your immediate and long term requirements.

So, a commonly assumed difference between the two choices is price, and Microsoft have gone to great lengths to compete with PHP and PHP-related technologies by releasing their Express versions of the .NET development environment and SQL database engine. In my opinion there isn't much in the race to be the dominant web scripting language, and for the foreseeable future, I expect both to be comparable, viable options for website development.

If I was choosing a company to do my web design and development, instead of determining which language they might build my site on, I would examine the following 5 aspects of the companies I am considering to build the site:

1. What does the company's portfolio look like? Do their design skills meet the expectation I have for my website's own look and feel? Apple has in recent years demonstrated that design is important to most of us. The success of the iPod, iPhone and now the iMac is indicative of our desire for beautiful, not just functional technology. Can the company / designer deliver a quality design on a reasonable budget?
2. What ongoing support does the company / developer offer it's clients? Many people choose to get freelance designers and / or developers to build their website. Unfortunately, these people tend to get bored quite quickly and move rapidly from one project to the next - seldom looking back and seldom supporting their ongoing client requirements. The 80/20 principle applies in web development too - 80% of the developer's time is spent finishing the final 20% of the site. A freelancer (in my experience) is less likely to invest this time in putting the important finishing touches on my website than a company geared to build a long term relationship with me. Although freelancers tend to be a significantly cheaper solution upfront, the question to ponder is: if I lose this developer, will someone else be able to pick up where they left off, and what might this cost me?
3. Will they provide me with the tools necessary to manage my own website for most day-to-day requirements and allow my site to grow as my business does - without platform limitations? A commonly overlooked requirement for any website is it's content management system (CMS). Many developers (and the PHP community in general has a greater propensity for this in my experience) use open source CMS technologies. Some of these are better than others but in most cases the choice of CMS platform is never discussed with a client before the contract is signed. I would discuss this. It might make or break my website.
4. Will my website's functionality and / or design be limited by the CMS? In most cases, and especially for open source CMS's the answer is yes. To me, this seems odd. It is like asking a painter to paint a portrait without providing him / her with sufficient paint or the colours he / she needs to finish the job. I would ensure that my website designer is unconstrained by the CMS my developer is going to implement.
5. What are the Search Engine Optimization (SEO) credentials of the company building my website? Search engines are critical to the internet, and so building my website with an understanding of how search engines index the content on it and help visitors find me on the web is of paramount importance. CMS systems can make or break a search engine optimization strategy so I would ask my developer whether their CMS of choice will limit or enhance this in any way.

To finish off and summarise, I think the choice between PHP and .NET is irrelevant on every level. The important choice is who you get to do your design and development. I have listed the top 5 aspects of website design and development that I would nail down before commissioning anyone or any company to build my site and I hope you find them useful.

Please do share your own experience-led thoughts on this topic in the comments.

A new look, a new website, a new blog...

We are very pleased to announce the launch of our new brand, new website and now this new blog. Rohan (our Creative Director) and I (Andrew, Managing Director) will be posting weekly to this blog and look forward to engaging you with interesting Hatchery news as well as design and development tidbits we discover.