You launched your website a few years ago. At the time, it featured the latest and greatest technology... But now your once-top-notch site seems to be lagging behind...

More and more of our clients are finding themselves in this situation. Technology evolves so rapidly that it can be hard to keep up, and a site that's only a couple years old seems ancient! If your site falls into this category, here are a few options you can consider:

1. Make small changes now, and start planning big for the long-term
2. Update your site's technology with a CMS Upgrade
3. Update your site's technology and architecture with a full Rebuild

1.) Make small changes now, and start planning big for the long-term

If there's no immediate need or you simply don't have the money for a more drastic change, you can keep your site "as is" and continue to pay as you go with small site improvements.

Your Newfangled site, no matter how old, will never just stop working. The site will always exist and function properly, and we will continue to support it. The technology will not "expire" after a certain amount of time.

Older sites are often more complicated and come with fewer standard features, so more changes will require programming work and a quote than if you upgraded to a newer Content Management System (CMS). However, unless you're considering major improvements, the costs would be minimal compared to a full-scale upgrade or rebuild.

For a list of small site tweaks to consider, read our September '09 newsletter, Doing More with Less: 9 Simple Ways to Get More from Your Website.  You could also redesign the homepage (check out the DataSynapse homepage redesign, photo on the left) or other individual areas of the site for a fresher look - although it may be more cost effective to save up for a total rebuild.

In the meantime, you should start planning for the long-term. You'll still want to upgrade or rebuild further down the road, since technology is always changing. For instance, one problem we see with our older sites is inconsistencies with newer web browsers, since they use technology that did not exist when the site was created. You never know how these old sites might react when the next round of browsers is released.

2.) Update your site's technology with a CMS Upgrade

If you want to update your site with the latest technology but don't want to fully redesign and start from scratch, you can opt for a CMS upgrade. Our latest version, CMS 5, has plenty of extra features that give you more control over content, so you can make more changes without having to go through us each time. More importantly, it also includes Google Analytics data and Newfangled tracking tools that will keep you up-to-date on how people are using your site.

Here's a recent webinar  and a recent newsletter that preview CMS 5 – and you can always set up a web meeting for a personal tour of the new features.

The primary advantage of CMS 5, though, is our Total Managed Support (TMS) plan, which includes monthly meetings with your Project Management team. We'll proactively review your site to help keep it current and prevent it from "falling behind" again.

Keep in mind that a CMS upgrade is an exact copy of your current site, so you won't have the opportunity to redesign or add features as part of the upgrade project. Your site will look exactly the same, the content won't change, and we will not go through our usual prototyping process. You can't make any additional enhancements without increasing the price. After the upgrade, however, you are free to explore any site improvements at additional cost. 

3.) Update your site's technology and architecture with a full Rebuild

If you're considering an upgrade to CMS 5 and have the extra time and resources, we recommend going one step further and getting a full site rebuild. This is your most drastic option, but it also gives you the most value and "bang for your buck."

Your Newfangled Project Team will take you through the prototyping process (check out the prototype page to the right), which gives you the opportunity to rethink your whole site and make substantial improvements: updated navigation, design, functionality, etc. Your revamped and revitalized site will come with CMS 5 and the TMS plan – so not only will you have the latest in site architecture and technology, but you'll also continue building on that foundation for the long haul.

Here's an example of a Newfangled client that recently went through a site rebuild.  Katie & Brian's team took WinWithoutPitching.com through the full Newfangled process, which resulted in a fresh "new" site on the CMS 5/TMS plan.

The Newfangled team has been pretty busy this week... We just launched another brand new website: www.cdisc.org!

This site, for CDISC (Clinical Data Interchange Standards Consortium), is the first that I've seen through from conception to launch, so I'm personally really excited about it! Plus, this was such an enjoyable project to work on! From productive prototyping meetings and gorgeous design to a flawless whitescreen and thorough content entry– everything went so smoothly.

For Steve G & I, our first big hurdle was to consolidate the navigation. The old CDISC site had four different navigations (see the old homepage image on the right), and they weren't consistent between the homepage and the other pages on the site. It was confusing and difficult to navigate, so we narrowed it down to one main and one global nav.

Shortly after we started, AJ and Frank from CDISC came out to North Carolina for a couple days, and we had an extremely productive face-to-face prototyping session. We rarely get to meet our clients in person, so this was a special treat, and I think it really helped the process.

Next, we handed things over to Justin, who nailed the design on the first try. The first mood board (shown below) was a big hit with the clients, and the rest of the design developed easily from there.

Meanwhile, George started building the whitescreen, and he made some very complicated functionality look easy! Here are a few special features of the site:

• Members Only section: CDISC members can use their log-ins to access additional content
• CDISC Standards: This section allows Members to log in and download files straight off the site, while Non-Members must fill out a form to receive an automated, customizable email with the downloads attached
• ODM Certification and Registered Service Providers charts (shown on the right): These charts are fully editable through the CMS; the client can add to the X & Y axes and choose which boxes are checked
• Education & Events section: The client only has to enter an event into the CMS once, and it will appear on both the main page (with a comprehensive list of all events) and the subpage for that specific event type
• Our Members list: Use this section to search Member companies by name, membership type, or company type

Then came design application, QA, and AJ's valiant content entry efforts. Mike helped push the site live on Wednesday... And now CDISC has a beautiful new website that they can be proud of!  Stay tuned as they continue to roll out new content on their blog, newsletter page, and discussion forum.

Here's one more side-by-side comparison of the old and new sites: the old Standards page on the left, and the new Standards page on the right.

We're proud to welcome cptech.com to the Newfangled family!

Corporate Technologies came to us for a complete redesign and reorganization of their website.

Clearly, the most striking difference between the old and new sites is Justin's sleek design.  Take a look at a side-by-side comparison of the new site design (on the left) and the old design (on the right):

 This was the first Newfangled site to use mood boards in the design creation phase.  As Steve G said in his blog: 

"We recently began using Mood Boards as a first step in our design process t o establish a site's branding, typography, imagery, color palette and other design elements.  Mood Boards have been compared to an interior designer's initial swatch panel showing the fabrics and colors that will be used to design a room ; a mood board can set the aesthetic course of a site, but does not represent any actual architecture like a page design mockup does." 

Here are the three mood board choices for CPTech, a detailed look at the mood board they selected, and the final home page design. You can see the evolution of the design and how the initial “mood” translates to the finished product. Here are some of Justin's thoughts on the process.

In addition to the design, we also made some important architecture and functionality changes.  Here are some of the more notable additions:

• Knowledge Center to browse different offerings, from case studies to webinars
• Editable rotating slideshow on the homepage - the images and text are fully editable, as are the slideshow speed and the number of times the images will cycle through
• Customizable widgets with rotating content, to add call-outs to any page (see the image on the right)
• Interactive Corporate Timeline - try it out by clicking on the different years
• Custom Events Calendar with a list of linkable events and a 3-month view in the sidebar
• Streamlined site organization and navigation

Thanks to Steve G, Sarah, George, and Justin; and Mike, Carol, Lance, and Michael at Corporate Technologies. This website was truly a team effort, and I know everyone at Newfangled loves the finished product!

Here's an easy Twitter trick that lets you track any links you post-- giving you basic analytics info to help boost your social media strategy.

If you follow the steps below, from DailyBlogTips.com, you can see how many of your followers clicked your link, also known as a "click-through rate."

First of all create an account on bit.ly (takes 2 seconds).

• After that pick a web page that you would like to share with your followers (like a post from your blog or some cool website), and shorten the URL inside your bit.ly account.

• Tweet a message describing that page and containing the bit.ly link.

• Wait at least a couple of hours and count the total number of clicks.

For those not familiar with bit.ly, it's a popular URL shortener, which helps cut any ridiculously long links down to a manageable Twitter size.  After you create a shortened bit.ly link, you can log back in anytime and check how many clicks it has received.  You can use this information to gauge the popularity of your tweets and help guide your Twitter content strategy.  For example, if a certain link has an unusually high click-through rate, your followers are clearly more interested in that topic!

This trick definitely comes in handy when you post a link to an external site, where you don't have access to any analytics information...  And when you link back to your own website, it's a great complement to our Newfangled CMS and Google Analytics tracking tools.

Another simple Twitter tip, make sure you follow your @mentions page, if you aren't doing so already!  That way, whenever someone mentions you or retweets your links, you'll know.  I also subscribe to an RSS feed of my @mentions page, so they'll show up in my Google Reader.

The new and improved Remington College Online website goes live...  Voila!

Steve G, George, and I have been working on this one for a while!

First, we made an exact copy of the recently updated RemingtonCollege.edu (also a Newfangled site), shown to the right.

Then, the Remington team edited the content and sent design changes, and we followed up with several rounds of important functionality tweaks.

Both the Remington College Online and Remington College sites have some very useful (and sometimes complicated!) custom functionality. For example, depending on how users enter the site and the actions they take once they arrive, different versions of the homepage, phone number, and forms will display.

On the left, you can see how this form's dropdown menu will "pre-populate" with different choices, based on whether the user arrived from the Paralegal page or the Accounting page.

Also, since Remington only does business in certain states, some content will display differently based on the users' geographic location.  A user in Georgia may receive a different message than a user in Alabama.

Thanks to everyone who helped out on this project - especially Steve G, George, Justin, Mike, and Sarah here at Newfangled; and David, Patrick, and Mike at Remington!

Also, as a comparison, here's what RemingtonCollegeOnline.edu looked like before the Go Live!

How do I know my website will display properly on EVERY computer? Will it work correctly for ALL of my clients?

These are tough questions to answer, since every computer and every web browser is different. Browser inconsistencies cause slight variations on every site from browser to browser, and they can affect everything from formatting to functionality.  They can be as glaringly obvious as misplaced content or broken functionality, or as subtle as font appearance.

For example, the text on the right is taken from a Newfangled site that is currently in development. The top line is from Internet Explorer; the bottom is from Firefox. They are both taken from the exact same spot on the exact same site with the exact same code, but they still look different.

These differences present a huge challenge to web development and design. As Eric wrote in our 2006 "Browser Support Standards" newsletter:

Often in a website request for proposal you might see a bullet point requiring support for all browsers. This is an impossibility. If you support all of the older browsers, you will be so limited in terms of design that your site will look like it was built in 1996. If you design a modern looking site, it will look terrible in older browsers, and in some cases it won't work at all. Defining which browsers your site will support is an important consideration before designing it or before choosing a technology platform. Browser support is by far the hardest technical challenge facing web developers.

To avoid any browser-related problems, Newfangled does a lot of QA testing. (Here are a couple blog posts on the QA process, one from Chris and one from Nolan.)

Typically, we do QA in Firefox, Internet Explorer 7 (IE7), Safari, and IE6. Although these are only a tiny fraction of the browsers and versions currently available around the world, they are far and away the most frequently used.

After a conversation with a client about which browsers are most common, and on which browsers he should focus when doing his own QA, I compiled some statistics on the prevalence of different browsers:

• Wikipedia's "Usage share of web browsers" has a handy pie chart from July 2009.



• w3schools.com's "Browser Statistics" includes a chart of usage percentages of different browsers by month, so you can see how their popularity is changing over time.

• W3Counter's "Global Web Stats" lists browsers in order of global popularity.

• Web Developers Notes' "Windows web browser statistics - numbers and graphs" uses line graphs to illustrate trends in browser popularity over time.

According to these statistics, Internet Explorer (all versions combined) and Firefox are overwhelmingly the most popular browsers. You'll notice that Firefox usage is increasing over time, while overall IE is decreasing (which I'm sure makes web professionals everywhere happy!). Meanwhile, among the different IE versions, IE8 is on the rise, while IE7 and IE6 are on the decline.

Say hello to Newfangled's newest site... Montclair Public Library!

This my first big website Go Live, but I've only been with this project since the Design Application stage.  The real credit goes to Steve G, Jim, and Sarah; they did a wonderful job reorganizing the original site and moving the project along!  Special thanks to Frederick and Froberg Design Offices, Inc., who supplied the site design, and Adrienne and David at MPL.

The revamped website features an interactive Events Calendar with easily accessible information - mouse over a certain date to see what's happening, and then click on any event to see an individual details page...

A Database search that allows you to browse by subject or alphabetically...

And a Read, View, Listen section with rotating image galleries of available titles.

Also, here's a side-by-side look at the new and old designs:

Steve and I have been working on Newfangled's first WordPress site!

Instead of using Newfangled's own Content Management System (CMS) as a base for this site, we're using the popular WordPress platform. WP is a well-known free blogging service and open source CMS.

A little info on WordPress, from WordPress.org/about:

“WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your cat’s home page to a Fortune 5 web site without paying anyone a license fee.

About WordPress.org

On this site you can download and install a software script called WordPress. To do this you need a web host who meets the minimum requirements and a little time. WordPress is completely customizable and can be used for almost anything. There is also a service called WordPress.com which lets you get started with a new and free WordPress-based blog in seconds, but varies in several ways and is less flexible than the WordPress you download and install yourself."

If you're interested in starting your own WP site, here's more information on the difference between WordPress.org and WordPress.com:

• WordPress.com Support: WordPress.com vs. WordPress.org
  
• Expand2Web.com: WordPress.org vs WordPress.com - Which One Should I Use?
  
• Blogger Help: Wordpress.org vs. Wordpress.com pros and cons
  

Also, the WordPress site offers some great resources for working with their platform.

Meanwhile, our new WP site is nearing the end of the whitescreen phase – most of the functionality is in place, and it's time for the client to start entering content.  Since this is our first venture into WordPress territory, Steve and I have been busy learning the ins and outs of the CMS.  Things that we do every day on our Newfangled CMS sites are handled in a completely different way on a WP site, so the most time-consuming part has been determining how certain functions translate between the two platforms. Fortunately, our clients have no prior experience with our other CMS, so they won't have to jump the same hurdles when learning WordPress.

See for yourself: here's the back end of the CMS for our new WordPress site...

...and the back end of a Newfangled CMS site.

As the newest member of the Newfangled team, I've been experiencing quite a few "firsts" over the past four months. Right now, the first website project that I will see through from conception to completion has reached the Whitescreen QA (Quality Assurance) phase. The programming is in place on the staging/development site, but the design hasn't been applied and the content hasn't been entered.

It's a pretty amazing feeling to finally be able to click through a website that you helped conceive and that you've been planning for months. We're working with our developer George on this project-- and he's really done a wonderful job!

Previously, I had developed a QA Test Plan for this site. I went through the approved prototype-- page by page, link by link-- and made a thorough chart of the different functionality that should be included in the whitescreen. Then, over the past couple days, Steve and I have been painstakingly comparing the whitescreen, the QA test plan, and the prototype-- going through each whitescreen page to make sure everything matches the prototype, that every piece is where it should be, and that it all works properly. Naturally, we might not catch every bug right away (a lot of the "hidden" ones pop up during content entry), but at least we get a head start on testing the site before we hand it over to our client.

This morning, we had our first CMS training call for this website.  Our clients got to see the whitescreen for the first time, and we demonstrated some of the basic functionality.  I hope they enjoyed seeing their brand new site in action as much as I did, and I'm excited for the next phase!

• Keep your design simple. Stick to basic text & images.
• Keep your image sizes small.
• Send a test email before you send the real newsletter.
• Include the line, "If you have issues viewing this email, go to...," and then link to a newsletter webpage on your site.
• If you make a PDF copy of your newsletter, don't attach it directly to the newsletter email. Instead, upload the PDF on your site & include a link in the newsletter content.
• "The key to having semi-consistent design is that using your CSS either as an external resource or in < style > tags is hit or miss, especially with web-based clients (mainly GMail). This means, unfortunately, that you more or less have to use tables for positioning.
        This link (http://www.campaignmonitor.com/css/) is a solid resource on knowing what is supported where.
        I've had fantastic success using this (http://code.dunae.ca/premailer.web/) service. You give it an HTML file coded up how you see fit using the < style > tag, and it will spit out an HTML file in return that has the CSS inline and few other modifications.  [Web-based clients have poor support for the < style > tag and all the styles should probably be inlined (like < a href="#" style="color:red;" >). This tool you lets you write proper, non-inlined CSS and handles all of the inlining for you.]  It seemed to work almost flawlessly last time I used it.
        You probably won't get pixel perfect newsletters in every possible combination of browsers, email clients, and OSes, regardless of what you do, but you can get close enough."

I remember the first time I used Firefox... A friend downloaded it on my computer, told me it was “better,” and then laughed as I struggled to comprehend the browser tabs. As confusing as those tabs were at first-- now I can't imagine surfing without them!

I read an interesting article on ReadWriteWeb.com about possible upcoming changes to Firefox that might include... (gasp) No tabs!

Take a look at the photo below. It looks more like iTunes than any common web browser. I think users might revolt at first-- but who knows, we might actually get used to it after a while!

Check out the article... What do you think?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book… It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old... Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?