Modern Web Browsers and Extension Suggestions

Firefox LogoAs web marketers and developers we sometimes get too involved in all things web, and it’s a great idea to occasionally step back and view the technologies we are so used to interacting with from a new or different perspective.

Recently, a client was reviewing her newly developed website while using the outdated and no longer supported web browser Internet Explorer 6 (IE6).  Modern web development often uses advanced techniques that will not display correctly in IE6; instead of a nice orderly layout, the header might be completely missing, and among many other problems, the content columns are often found haphazardly placed on the page.  We were happy to quickly resolve the discrepancies of her broken browsing experience by suggesting a browser change to Firefox, and an upgrade for Internet Explorer.

Because modern browsers make it possible for the web to be a more advanced and feature rich place, it’s a good idea to evaluate your web browsing tools and options and make sure your preferred browser is up to snuff and up to date!

Here are the browsers that will provide an optimal browsing experience on today’s web:

  • Mozilla Firefox – with an active non-profit development team focused on innovation, as well as a wide variety of useful add-ons, Firefox is a powerful browser.
  • Google Chrome – Google’s official browser.  Chrome is fast, free, and has a growing base of add-ons (extensions).
  • Internet Explorer 8 or 9 – if you’re a Windows user and you aren’t comfortable installing a 3rd party browser, it’s best to make sure your Internet Explorer is updated to the latest version.
  • Safari – if you’re a Mac user and you aren’t comfortable installing a 3rd party browser, it’s best to make sure your Safari browser is updated to the latest version.

If you’re using Firefox and you’d like to take advantage of the ability to install add-ons, below are a few of the extensions we recommend and use every day:

  • Update Scanner – regularly scans web pages and alerts the user if changes have been made.
  • Rapportive – provides in-depth details about your Gmail contacts inside your inbox.
  • Pearl Crescent Page Saver – one of many screen capture extensions, Pearl Crescent covers the basics and works well to capture an entire page as well as just the visible portion.
  • PageRank Client – With Google Toolbar no longer supported past Firefox version 4, PageRank Client replaces one of  Google Toolbar’s functions by providing you with a web page’s Google PageRank.
  • GBookmarks – similar to the PageRank extension above, GBookmarks replaces a function previously found on the Google Toolbar: access to your Google Bookmarks in the browser menu bar.
  • MeasureIt – an invaluable web development tool, MeasureIt allows you to draw a pixel ruler overlay on a web page to determine the width or height of elements on the page.
  • Firebug – another invaluable web development tool, FireBug is an incredibly full-featured web development debugging tool which is used in all aspects of web development.
  • Copy Pure Text – adds the handy ability to strip formatting off of copied text.

Chrome’s web store also provides MeasureIt and Firebug (Lite version), as well as equally awesome extensions for most of the functions found in the list above.

What are your tips and tricks for a more powerful web browsing experience? What browser extensions could you not live without?  Please let us know your suggestions and favorite browser extensions and tools in the comments section below!

Happy Birthday to Art Clokey!

Gumby World WebsiteToday, Google is honoring Gumby creator, Art Clokey, with an interactive Google doodle of Gumby and Friends.

Here at CCSEO we are celebrating Mr. Clokey’s life & accomplishments as well as the successful launch of the new official website for Gumby and Friends, Gumbyworld.com, built and search optimized by our team over the last month.  The website was revealed this week as a tribute to Art Clokey, and to celebrate his Birthday with Google and Gumby fans worldwide.

In keeping with CCSEO’s high standards, the GumbyWorld.com website launch focused on search engine friendly and modern website architecture, with a strong effort to improve overall web visibility.

Starting yesterday, when Google began featuring the Gumby doodle in countries that are a day ahead of the U.S., Gumbyworld.com became the center of attention for a global audience. Gumby lovers from Australia, India, Argentina, the Philippines and dozens of other countries have been interacting with the new site and re-engaging with a favorite childhood icon.

 We are honored and excited to have helped Gumby and his Friends launch a new digital presence in collaboration with Greenfire Strategies and Clokey Productions/Premavision Studios.

Everybody loves Gumby! What do you think of the Gumby Google doodle, and the new Gumby website?

Art Clokey Gumby Google Doodle

Web Design – More Than Just a Pretty Face

It seems like these days any Tom, Dick or Harriet can design a website, however all websites are not created equal.

Just because it looks lovely it doesn’t mean it’s going to help you meet your business goals. Your website has to be found, used and enjoyed, if it’s going to generate the leads and sales you’re hoping for.

Let’s say you want to create a new website, or update your current website. You have a logo and a color scheme. You have a pretty good idea of the content you want on the site. You’ve found a web designer who you’re confident will create a lovely looking website for you; you’ve seen their portfolio and they have lots of lovely websites in it.

But before you go ahead with the project, before you sign off on anything, in fact, before you even settle on your web designer, you should find out how they take account of the following:

  • Web Standards
  • SEO
  • Usability
  • Metrics

To get an idea of their awareness of these elements of web design and development, here are some useful questions to ask:

  1. What programming languages will you be using to build my website, and how will this effect search engine crawlability and indexing, user experience, and download time?
  2. How will my website be optimized for the search engines?
  3. (If a redesign) How will you make sure that the search engines and users can find my new website pages when the page names change?
  4. How will my website be optimized for users? Can I be confident that visitors will have a clear understanding of what my website is about, be able to navigate my site easily, and take the actions I want them to take?
  5. How will we measure results after the site is launched?

A good, knowledgeable web designer should be able to not only answer these questions, but also explain them in a way that makes sense to you.

Although elements like SEO, Usability and Metrics are huge subjects on their own, your designer should have a solid understanding of how they relate to web design. They should also have a professional support network to help fill any gaps in knowledge he or she might have, and to whom they can refer you for more specialized services if necessary.

With these concerns addressed, moving forward you can be confident that your website will not only look lovely, but will also more likely become the business asset you are hoping for.

What other knowledge/experience would you expect a web designer to bring to the table for your web development project?

If you are a designer, how do you feel about being involved in these additional aspects of building a website?

How Websites Work

A website is a collection of web pages, documents and multi-media files that are hosted (stored) on a server (computer) on the Internet. The server can be in your own town, in another part of the country or in another part of the world.

All of the public Internet servers throughout the world are interconnected. When a person goes online with their personal computer, they connect to the Internet and are then able to access all publicly available documents and files stored on the World Wide Web.

The location of a website and its files on the Internet is usually identified by a domain name.

When you type the domain name for a website (website address) into a browser address field, or click on a link to the website via a  search engine results page, you are requesting to view that page and the related files stored on the server at that location (the domain).

Your request is sent from your computer to the server of your Internet service provider, which then passes on your request. The request is passed through a series of interconnected servers until it gets to the ‘host’ server where the website files are stored.

The host server responds to your request by sending the content back to you along a similar path of Internet servers. You are then able to view the web page and related files via your web browser, e.g. FireFox or Internet Explorer.

website-diagram

Since these terms are somewhat abstract some people confuse their website ‘domain name’ with their website ‘hosting’. In my next post I will go into a bit more detail about what a domain name is, and how it relates to your website and hosting.

The Merits of the Mini-CMS

construction-worker-with-planIn today’s world of readily available, fully-featured, open source content management systems, it can be argued that every website should be built using a CMS (content management system). Many of our counterparts in the web development industry use Drupal, Joomla, or WordPress for their website builds. This is a formula that works well in many situations, and for many clients, but is WordPress the answer to every project?

We find that it is best to ask some key questions before planning a site build around a CMS software package:

  • Will a large portion of pages on the website be updated regularly?
  • Is the client comfortable making their own updates?
  • Will the client maintain the SEO work that has been implemented when they later edit the website?
  • Will sections of the site require customization and features that require special edits in the CMS back-end code?
  • Will the website benefit from options like a built in blog or widgets, or would they remain unutilized and end up being dead weight?

We have found that in a majority of situations, a full CMS package is overwhelming, and unnecessary for the project requirements. Often the client only wishes to regularly update one page out of 15 (e.g. a news page), and doesn’t need the extra overhead that a package like WordPress imposes. For example, if one page on a site is being updated every two weeks, should the client pay for the extra time it takes to install, setup, search optimize, and customize a CMS installation, just for this functionality? Additionally, using a CMS package requires occasional software updates, and can expose a website to security holes that wouldn’t otherwise be an issue.

As an alternative, we have had great success using a custom-coded “mini-CMS” implementation for many of our clients. Not only does a custom-coded CMS keep things simple, it eliminates exposure to widely known security exploits, keeps costs down, allows for easy implementation of special features, and allows for direct control of all search optimization efforts.

Often a mini-CMS is as easy as a MySQL database connected to a password-protected WYSIWYG editor, allowing the customer to edit a desired page without having to learn and navigate a CMS backend. We have also used other creative mini-CMS solutions quite regularly, for example, allowing the client to add images to an SEO-optimized image gallery or add entries to a company news page, etc.

Using these customized CMS solutions, we are able to implement functionality requests without having to rely on plugins and widgets that may only accomplish part of the desired result; instead we are custom coding features exactly as required.

Sometimes it is easier to keep web development projects simple and custom – and we often find that customers are happily surprised by how easy it is to add to and edit their content with a custom mini-CMS solution.

Quick PHP Script: Random Image Selector

random-php-computer-programmerA goal that we have for every client’s website is to keep the content as fresh as possible.  Many site builds aren’t ready-made for consistently changing content; often people want a set-it and forget-it brochure site.

Even on static sites, it is possible to create some variety to keep users and search engines interested.  If you have new/different content each time a search spider visits your site, they are more likely to visit and re-index your site often.

One of the many methods we’ve used to automate this “fresh” content is to display a random on-page image.  If you have 3 images that showcase your products/services, but only have the space to show one on your homepage, why not rotate between the 3 images randomly?  This gives the page variety each time it is reloaded or re-visited.

The PHP code to accomplish this is quite simple, and can be implemented by people with very little PHP experience.  Firstly, you will need a file that contains an array of possible images, and related data:

<?php
$imageArray = array(
     1 => array("address" => "/images/image1.jpg", "alt_text" => "Image 1"),
     2 => array("address" => "/images/image2.jpg", "alt_text" => "Image 2"),
     3 => array("address" => "/images/image1.jpg", "alt_text" => "Image 3"),
);
?>

Save this array to it’s own file, and upload it to the appropriate place for includes on your web server.

Now we need the code that goes on the desired display page, which will randomly select one array item, and display the entry as an image:

<?php
     //Include the file which contains the Image array
     include $_SERVER['DOCUMENT_ROOT'] . "/includes/imageArray.php";

     //This selects the index number of one random array entry.
     $randomImageNumber = array_rand($imageArray, 1);

     //This prints to the screen an HTML image tag with attributes pulled
     //from the randomly selected array entry.
     echo "<img src='" . $imageArray[$randomImageNumber]['address'] . "'
     alt='" . imageArray[$randomImageNumber]['alt_text'] . "' />";
?>

Now all you need to do is add any styling required to the image tag, make sure you’ve uploaded the images, and you should have a randomly rotating image every time your page is reloaded.  By getting a little bit creative, the array and code can be easily modified so that the images are each hyperlinked to a unique URL, and more than one image can be shown at a time from the same array – look for these advanced technique in a future post!

What techniques have you used in the past to create automated fresh content for your website?  What other features/advancements would you like to see on this script?

Why Recode an Existing Website?

Often we work with clients who wish to breathe new life into an existing website. They can do this by adding new content, new features, or by using search engine optimization (SEO) to optimize their current content.

When we evaluate an existing website, we try to consider and balance many aspects including usability, scalability, modern development standards, design, seo requirements, and cost.  Unfortunately, we often recode-existing-websitefind that existing sites are not designed with scalability in mind, and are built and maintained with outmoded development practices, and more often than not with no consideration for SEO.

In a lot of cases, we conclude that the best and most sustainable route for these websites is to initially re-code them (and sometimes update the design).  There are always minor improvements and enhancements that can be made without a re-code, but it is often like using a bandaid to mask a problem where surgery is required.  Also, it often seems irresponsible to make changes and improvements to a website if there are underlying problems that haven’t and won’t be addressed without a rebuild.

Without a sufficiently sized, well engineered, and stable foundation, it will often be more time consuming and costlier (in the long run) for our client to continue to add to an existing website.  Naturally, it seems counterintuitive to some people to take their functioning website and recreate it, especially given the increased initial cost, but it is often the only reasonable route.  It saves money and frustration down the road, lays the proper foundation for SEO basics, and ensures that their website maintains it’s usability and functionality with growth.

Publishing an RSS Web Feed

Where to Start

In order to publish a web feed, there are two things you need to do:
1. publish an XML file on your web server that adheres to one of the many available web syndication formats (RSS, RSS 2, Atom, etc)
2. place a related meta tag at the top of the relevant page.

For example, if you were going to publish a coupons Atom feed, you would place the xml file at http://www.example.com/coupons/feed.xml, and on the pages in the /coupons/ directory, you would add a meta tag in the HTML header like this: <link rel=”alternate” type=”application/atom+xml” title=”Example Coupons Atom Feed” href=”http://www.example.com/coupons/feed.xml” />.

The Meta tag tells web browsers (Internet Explorer, Firefox, Google Chrome, etc) as well as bots that there is a related feed (for our example, in Atom format) that corresponds to the content on the page, and provides a link for them to follow. Each web syndication format has a corresponding meta tag specifying it’s type.

Useful Resources

The XML file provides the actual feed data, and must follow a specific format and syntax, which can be researched quite easily, with examples, on Wikipedia or a related resource; see the Atom entry at Wikipedia: http://en.wikipedia.org/wiki/ATOM.

Each protocol should also have a more detailed documentation page available on the web, for Atom feeds, visit here: http://tools.ietf.org/html/rfc4287.

Alternately, it is often useful to view the source of an actual XML feed file, as a live example of how one should be constructed, check out the Google webmaster central blog’s feed: http://googlewebmastercentral.blogspot.com/atom.xml.

Before Publishing

Although many people refer to all web feeds as RSS feeds, RSS is only one of many web syndication formats, and many people these days (including some departments at Google, like all Blogger blogs) have been using Atom feeds in place of RSS. All syndication standards are similar to each other, and really the choice of which to use comes down to personal preference – on the user end it doesn’t really matter which feed type is found on the server, because most user applications (feed readers, browsers, etc.) interpret them the same way.

The contents of a XML feed file can be automatically generated, if the data is readily available like in a database, and works best for pages that have fresh content regularly. Alternately, the XML file can be manually built and updated with each new version of a page, which often works well for semi-static pages.

For example, the WordPress blogging software automatically generates the XML feed file when it is requested, injecting the most recent blog posts available from the database into the file.

Whether the pages you wish to publish are built manually or generated on the fly, Atom or RSS, the syndication syntax is easy to grasp, and should be fairly easy to put together for most developers.