How to Sign In to Multiple Google Accounts, Simultaneously

Google has been making a lot of changes lately, and change is hard. We love Google for the most part, but with new improvements come new headaches! One issue brought by the new changes that has been frustrating for us is juggling personal and business accounts. Previously, you could have multiple Google Accounts open in the same browser, however now (after accepting new terms and conditions) it is harder to use multiple Google Accounts simultaneously. Given Google's responsiveness to user feedback, I'm assuming this account consolidation is still in BETA (at least I'm hoping this is true).

We came across a good how-to-guide to fix this problem, (See Reverse Symmetry) and wanted to share it with you in our own adaptation in 5 simple steps!

Step 1 - Click on your account name in the top, right hand corner. Select "Account Settings."

Step 2 - Go to "Security," and check status of "Multiple sign-in" field. If "Off", click edit.

Step 3 - On the following screen (below) select "On" and check all boxes below. Save.

You'll notice that Google currently only allows for multiple sign in for a handful of their products. Therefore, you will still encounter some difficulties when attempting to access several Google Products (i.e. Blogger, Adwords, Analytics) that you control via different accounts. Hopefully, they will add multiple sign in to the full suite of products soon.

Step 4 - Complete steps 1-3 for all necessary accounts.

Step 5 - Now, when you want to open another Google Account: click on your account name again, then "Switch Account". You should see a drop down with your multiple accounts. Select the name of the additional account to switch from one to the other OR right click the additional account you'd like to open and select "Open in New Tab" in your browser prompt.

That should do it! According to Reverse Symmetry, Google is now completing this process for you whenever you make a second account, but should you need to do it manually, this guide should cover you! Happy tab toggling! Hopefully, Google will soon improve this process...keep hope alive.

Page meltdown? Follow these 4 steps!

The dreaded email subject: “Page Not Working.”  This is a perfect time to call up your web developer, but to get the most help as fast as possible, be prepared to give them as much information about the problem as you can!

Source

Here is what you should give to your developer:

Step 1 – The exact error message.  Try not to leave anything out!

Step 2 – The day and time the error message occurred

Step 3 – Information on what the user was doing right before the issue and when

Step 4 – Any system information from the user (browser, operating system, etc.)

With these 4 steps, your developer will be able to help identify and solve the issue much more quickly!

For the last step, it can be hard to know exactly what information is necessary and where to find it.  Recently, I discovered an online tool that can help a lot in this regard called supportdetails.com.  It gives all the system information a developer would need to know quickly and in one place!  The best way to give this information to your developer is to create an email detailing steps 1-3, then download the supportdetails.com information by clicking on “Export PDF,” and include it as an attachment in your email.

Hope this helps!

How To Track PDF Downloads in Google Analytics

Google Analytics is an excellent tool for tracking all types of site visitor interaction. But two common questions we receive from clients interested in tracking their site's activity include:

I) Why doesn't Google Analytics track PDF* downloads on my site?
II) How can I make Google Analytics track PDF* downloads on my site?

Read on to find the answers to both of these questions.

I) Why doesn't Google Analytics track PDF downloads on my site?

Google Analytics updates it's data every time a page on your site loads its tracking code. If a page on your site does not contain the Google Analytics tracking code, that page is essentially invisible to Google Analytics. Because the PDFs that you are linking to do not contain Google Analytics tracking code installed on them, they are invisible to Google Analytics. (This is the same reason why links hosted on your site and pointing to other websites are not tracked, since the landing page of the other websites do not contain your Google Analytics tracking code.)

II) How can I make Google Analytics track PDF downloads on my site?

Fortunately for us, Google Analytics has created a work-around for tracking activity to destinations (URLs or documents) that do not contain your tracking code. Essentially, it is a means of faking or "simulating" a page load at the link click level (rather than the page load level). In this way, you can tell Google Analytics to update its data whenever your tagged link is clicked, regardless of whether or not the destination contains tracking code or even loads in full. You can accomplish this by performing the following:

Once you've created a link to your PDF, you'll need to edit the Source Code (HTML). To do this using the Evergreen CMS, you'll need to click the [<>] button located within the second row of the WYSIWYG ribbon menu. Locate the line of code that denotes your hyperlink.

eg.
<a href="http://www.mydomain.com/assets/documents/my-document.pdf">Download Here</a>

You'll simply want to edit this link to match the following format:

eg.
<a href="http://www.mydomain.com/assets/documents/my-document.pdf" onclick="javascript: pageTracker._trackPageview('/downloads/document-name'); ">Download Here</a>

Apart from the URL pointing to your PDF (in this example: http://www.mydomain.com/assets/documents/my-document.pdf) the only other part to this code which will change with each link you tag is the actual name you assign to the link (eg. /downloads/document-name). For example, you could name it /downloads/Calendar-2010.doc or simply Registration Dates. This part of the code is entirely up to you, just know that whatever you choose to name it will dictate how it shows up in your Google Analytics reports.

We hope this guide was helpful in not only giving you the tools to track your site's PDF downloads, but also in providing you with some of the logic behind it.

* The PDF filetype is used in this article simply because of its popularity among our clients, however this guide applies to ANY filetype that can be linked to on a website and downloaded by a visitor (eg. .doc, .xls, .zip, etc.)

3 Technical Tips for Web Design

Designing for the web can be tricky. Unlike print media, where your only design constraint is the size of the canvas you're working on, the web requires that whatever you design align with the constraints of the technology powering that environment. That means that if you are to achieve a design that is both scalable and compliant, pay attention to the following 3 technical tips.

#1) Employ Vertical Scalability

First, ask yourself this: "Will this website be subject to edits post-launch?" If your answer is Yes, you'll want to pay particular attention to vertical scalability.

Unlike print, where your final deliverable is often fixed in dimensions and/or size, the web demands flexibility in both. When designing a template for the web, be sure to include a vertical "coupler"--a horizontal chunk spanning the width of the design that is conducive to replication down the page. This coupler is how a design made for a website 768px high can scale to a webpage needing 1000px of height. If you're still unsure whether or not your design is vertically scalable, ask yourself these questions: "What will happen to my design if the client doubles the amount of content on the page? Will that break my template as I have designed it?" If your answer is Yes, then you have not designed a scalable website and you'll likely be hearing back from the client with complaints--and rightly so.

Design your website in such a way that content can be added or removed without compromising its structure or requiring continuous support from the designer.

#2) Appreciate HTML (Use Web-Friendly Fonts)

If you do NOT use web-friendly fonts in your design, you're setting the client up for disappointment and yourself up for failure . Here's why: unless you plan on having your entire website developed as a series of giant, static, images (NOT RECOMMENDED), HTML text will need to be used to recreate the copy you designed in your original mockup. The benefits of using HTML text are too numerous to count, but a few of the big ones include:

• Search Engine Friendliness - search engines, the middleman between your site and an online audience of millions, cannot read text that is presented as an image. Therefore, if you expect engines like Google, Yahoo! or Bing to index your Novelty T-Shirt site for relevant terms, you had better ensure that you have offered them text talking about "novelty t-shirts" in a format they can understand (HTML).
  
  
• Scalability - If the site you've designed is going to undergo change and updating post-launch, having copy represented in HTML will ensure the easiest and most efficient means of doing so. Whenever textual elements of your design are represented as images (instead of using HTML and web-friendly fonts) you have set the requirement that if the client needs to alter this text in any way, he/she must first contact you to do so. If this is how you want the client/designer relationship to be, then you are in a fine position. Otherwise, empower your clients by making them rely as little as possible on design aptitude when managing their site.

A comprehensive list of web-friendly fonts can be found here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html. Use these whenever possible.

#3) Specify Copy Styles

When designing a website, it is important to exercise consistency. Visitors to your site want to consume information in as easy and efficient a means as possible, and that means introducing an intuitive set of rules for presenting your content and then adhering to them.

To keep things simple and straightforward, imagine you only have 5 ways of presenting copy throughout the site. Those 5 ways include:

1. Titles (Header 1)
2. Section Titles (Header 2)
3. Subsection Titles (Header 3)
4. Standard body copy (Paragraph)
5. Hyperlinks

An example of a site which has done an excellent job of creating a predictable user-experience in regards to copy styles is Wikipedia. Consider the following example of Henry VIII's Wikipedia entry.

At the top of the page, "Henry VIII of England" is presented in the largest of fonts (Header 1).



If you scan past the intro and Table of Contents, you'll notice the first Section Title ("Early years: 1491-1509) which is presented in a slightly smaller font (Header 2), but still larger than the Standard body copy (Paragraph). Scanning even further down, you'll notice the Subsection title of "Death of Arthur" which is presented in even smaller copy still, but this time it's been emboldened (Header 3).



Lastly, everywhere on the page hyperlinks are denoted in blue, with an underline added upon hover.

Granted, Wikipedia is an online encyclopedia and isn't the most exciting of examples, but the concept of utilizing consistency for an enjoyable user experience is a sound one and whether its plain-Jane information you're serving up like Wikipedia or the latest designer shoes, visitors will respond best to consistency and predictability.

How to Use Bookmarks and Anchors On Your Webpage

Have you ever been on a website, clicked on a link, and instead of being taken to a new page, were zoomed down to another line or paragraph on the same page? This type of link is called a bookmark and should not be confused with Bookmarks in the sense that browsers have come to use the term to describe websites you "save" in a Favorites list. These bookmark links provide website owners with an easy way to present a lot of related content on one long page while still making specific sections of that content immediately accessible to site visitors. Today I'm going to walk users of the Evergreen Content Management System through how to implement bookmarks on their pages when it makes sense to do so.

1. Create a Table of Contents
Before you can link anything to anywhere, you'll need to create the link text. Be sure to place this TOC near the top of the page for immediate user accessibility. Formatting is entirely up to you. See below for an example of how I did it:



2. Add Content
Once you've created your TOC, you'll now need to add the content it will ultimately link to. Most of the time, you'll have an FAQ document lying around in a Word doc that you'll simply need to copy and paste into your Evergreen WYSIWYG. Don't forget to use the Paste from Word tool to avoid formatting headaches! ()

Once the content has been added, you're ready for the next step: Adding Anchors

3. Adding Anchors
So you've created your TOC and added in all of your content. Now you need a way to tell the browser how far down the page it should go when your TOC items have been clicked. Here's where anchors come in.

First, find the line of content that you plan on linking your first TOC item to. Click your cursor just to the left of the first word in that line so its actively blinking within the WYSIWYG.

Next, click the scary trident-looking icon () in the WYSIWYG ribbon menu. This will load a popup window where you will need to write the name of this new location. Note: you cannot use spaces when naming anchors, so be sure to separate words in your anchor name with hyphens or underscores.



Once you've decided on an appropriate name, click "Insert" to save it. Now repeat this process for the rest of your anchors. When finished, you can move onto the final step: Linking to Your Anchors

4. Linking to Your Anchors
Now, return to your TOC and highlight the first entry. Next, click the "Link" icon (). You may be already quite familiar with this tool as it is also used to create hyperlinks to other sites and other pages on your own site. Today, we'll expand its use to include bookmark links.

Click the bubble labeled "Bookmark", then select the appropriate anchor you created for this entry. Once selected, click "Insert", "Apply", and "Ok". You've just created your first bookmark from start to finish! Now repeat this process for the rest of your TOC entries. Once you're done, your TOC and associated page content should look and function (something) like this.

How To Embed a YouTube Video on Your Site

Content is King. Ahh, the age-old adage about what matters on the web. But does content just have to be words? Of course not! Spice up your web pages with video to make a lasting impression on your site's visitors.

This tutorial will guide you through the steps you'll need to embed a YouTube video on your website using the Evergreen Content Management System.

1. Find the Video

You'll need to locate the video you'd like to feature on your website, whether it's one you've uploaded yourself to YouTube or one from a stranger. Don't worry about stepping on anyone's toes here, if users don't want their video to be featured on other's websites, they will have disabled this feature when they uploaded it to YouTube. To disallow others from embedding videos that you've uploaded, follow these simple steps from Google.

2. Find the Embed Code

Now you'll need to find the embed code that will allow you to host this video on your site. Unless the uploader has disabled this feature, you'll find it below the video description off to the top-right.



Highlight all the code in this field. If you miss some, your video will not work on your site. You can also customize your player using the options below it. Just make sure to copy the final version of the embed code once you're finished choosing your options.

3. Embed the Video

Now that you've copied the embed code to your clipboard, you'll want to paste it onto your webpage through the Evergreen Content Management System. For now, create a brand new page. This way you won't have to worry about where within the HTML you'll need to paste your embed code.

After you've assigned this page all of its required properties, return to the WYSIWYG and click the HTML button (). Drop your cursor somewhere in this box and click Ctrl+V to paste your embed code. It should look something like this:



Finally, click Apply > Ok and Save your new page. Open the page in your browser and voila! Your video should be right there waiting to be enjoyed by the masses!

Embedding your video on a page with preexisting content can be a little more tricky only because you'll need to establish a general sense of where the code will need to be pasted in relation to the rest of the HTML. Play around, and make good use of the Undo button. Before long you should be fairly comfortable with at least navigating through the HTML of your page.

Good luck and have fun putting the social web to work for you!

Twitter Basics

Social Media can be a mysterious and intimidating space for many of us. These thoughts are intended for the user that is new to, or contemplating, more activity with Twitter and Facebook.

Twitter 'tweets' and Facebook 'status updates' have the highest potential to fall flat, in my opinion. What do my virtual fellow-travelers and followers really care to hear? After watching Twouble with Twitters, I felt even less inclined to hop in the game and start sharing... This vid is hilarious, but points to the many pitfalls of twitter use (or abuse, depending on how you look at it).

I am relatively new to the twitter game. I have had an account for a couple months now. The first thing I did when I set up my account was to sit back and ask, now what? What does the twittersphere care about? Then, an SEO collegue broke it down for me... when it comes to the social network, consider this progression:

1) Listen

2) Participate

3) Lead

After seeing the light with this simple 3 step program, I searched around twitter for interesting people and organizations to 'follow'. I observed what they shared. What was valuable? What was annoying? I took lots of mental notes.

More and more, I have started throwing some tweets/updates out there (in fact with TweetDeck, I can make one comment and have it syndicate to twitter and facebook! More to come on useful tools surrounding the social media world in coming posts.). I then observe some more. What garnered responses? Were they desirable? Some things I learned...

• Its easy to recommend a good restaurant, painter, mechanic or brewpub. If you have a good experience, throw it out there.
• The flip side is true as well. If you are in need of a good resource or tip, ask your followers. As your list of followers grows, its amazing what responses will come back.
• Take a stand. Share your thoughts on current events. Let your people know position on issues.
• Pictures. They say a 1,000 words.

Some suggestions on what not to share...

• Don't tell people you are out of town. Its a great way to make yourself a victim of a home break-in. And if that sounds like useless paranoia, another reason not to promote your time away from home is that it reminds the rest of us that we are not on vacation.
• Avoid commenting on only yourself. Its a big world out there.

In time, you'll likely find a topic or general approach that seems to work well for you. Depending on whether your twitter account is personal or business/non-profit/subject-matter specific, the topic may be focused or broad.

The key is variety of content and steady contributions. Social networking is about participation... You must give and not just take.

What is a CWD Module?

A CWD module is more or less a custom-developed plugin which installs directly into our Evergreen Content Management System. Its purpose is to simplify otherwise complex website processes. Here, let's start small with a relatively straightforward example.

Consider the case of the Cascade Web Development site and how News articles are added. Before the existence of a News Module, our process would involve the following:

• Write news article
• Manually move all traces of the previous news article to an archive page
• Insert new news article title and short description onto our home page
• Create a new page just for the new news article body to live
• Link the home page title and short description to the new news page we just created
• Do it all again next week

A News Module takes this lengthy process and virtually automates it for you. All you have to do is drop the content in a few simple fields and click Save. The rest is handled by the module.



The beauty of modules is that they can be applied to almost every conceivable web operation. Here are just a few examples:

• Managing an online ecommerce catalog of products
• Posting News and Events articles
• Dynamically editing Flash-driven graphic content
• And everything else ...

Still have questions about how modules can help you streamline your web management? Give us a call. We'll help you see the light!

Web Design/Development - How We Use Wireframes

A lot of the clients we work with have never seen a wireframe before or maybe they have, but its been in an entirely different context than how we use wireframes at Cascade Web Development.

For us, wireframes serve as the visual blueprint for the initial design. Our standard wireframe will be presented in grayscale, with minimal design work. The goal here is to establish the placement of key elements on the page rather than those elements’ final presentation.

Here is an example of the initial wireframe we designed for Michigan Primary Care Association. The layout was based on conversations had with the MPCA team prior to its drafting.



Two days later we hopped on the phone and went over their likes and dislikes, things they wanted tweaked, etc. We had a few of these types of back-and-forths in the ensuing week and half, ultimately resulting in the following final wireframe:



Once we had delivered a wireframe that all parties were excited about, we passed the wireframe and corresponding Creative Request document on to our creative design team. A week later, here’s what resulted:



Two rounds of revisions later, here’s the final design!



Page through the slideshow below to see how the MPCA design evolved from conception.

4. Link the media

There are many ways to link together the web assets and leverage syndicated content. In this diagram we have connected the dots to communicate the content flow. We have also identified which assets can be updated using a mobile device. In some cases we specify the type of content being transfered. 

With this map in place, we have clear direction for technology implementation.

2. Understand the media & 3. Ideas on how to use it

1. CWD website: With the augmentation of the following tools, the website is a home for information on CWD. The primary updated sections are News, Portfolio and Evergreen resources (which I separated below)
   
2. CWD blog: This is a place to express our understanding of the industry, talk about what we learn from projects and share relevant technology with our customers. Common tags may be: Our Work, Evergreen, Industry news, Web Applications, Portland, Thought leadership, Developer Resources, and Random
   
3. CWD newsletter: We would like to grow 'opt in' subscriptions for the newsletter. This is a tool to deliver all content from CWD. The newsletter goes out once a quarter. 
   
4. CWD Evergreen support portal: This section of the CWD website is used by existing clients. We often add new tutorials, videos and links.
   
5. CWD clients: Most clients allow us to create a link from their website to ours. 
6. Twitter: The latest in social media buzz. It is a simple application which could be recreated if needed. The app  is very flexible with RSS. All tweets are public. Used almost more for business than personal. 
   
7. Facebook: Also highly popular as a social tool. Businesses use it for advertising more than communication. The benefit to this platform is the developer community and long list of modules. Most of the content is private. 
   
8. YouTube: I used the title YouTube, but this could be any video site really. Users can create channels and embed those videos onto a web page or facebook easily. YouTube has a built in Twitter and facebook link. 
   
9. Linkedin: Primarily a business tool used for networking. Typically profiles are person based and not company based. Some content is public. I am not sure about built in functions with other social sites, but I would presume that is coming. 
   
10. SAO (software association of oregon): A community social network, any user has the ability to post blogs, forums or add photos. 
    
11. Babson Alumni network: Same platform as SAO (ning.com)
12. OEN (oregon entrepreneurs network): Not on the ning platform but offers some similar features. Users can post blogs and discussions. Content is RSS enabled from the site. 
13. Google reader/Google calendar/ Google Profiles: G is the powerhouse. The Reader platform/iGoogle can be used to monitor a number of RSS feeds. Calendars can accept RSS feeds of ical format and then embedded onto a page. Permissions are a little tricky but not if it is 100% public. 
14. Del.ic.ous: Book marking tool that is RSS enabled delivering content. Bookmarks can be made easily with a web browser plug in and links on most news websites. 
15. Personal employee websites: Most companies, like ours, have over 505 of the staff with their own website. Flexibility is key, but things take longer to get implemented on these sites. Link creation is one of the better options if your employees are passionate about it. 

Other technologies to consider:

Feedburner for RSS tracking

1. Identify Media

Step one starts by writing down all of your media touch points. Once you get them all down on traditional page (this is an important step) digitize them:

1. CWD website
   
2. CWD blog
   
3. CWD newsletter
   
4. CWD Evergreen support portal
   
5. CWD clients
6. Twitter
   
7. Facebook
   
8. YouTube
   
9. Linkedin
   
10. SAO (software association of oregon)
    
11. Babson Alumni network
12. OEN (oregon entrepreneurs network)
13. Google reader/Google calendar/ Google Profiles
14. Del.ic.ous
15. Personal employee websites

Wow, that is a long list and we are much smaller than most of our clients!

Now on to the next step: Understand media. 

Using a FREE Web App to Resize Your Images

Some of you may recall my last post on image resizing using Microsoft Paint. I thought it was an appropriate post both because a) you wouldn't imagine the number of requests we get from clients regarding instruction on how to resize their website images and b) Microsoft Paint comes preinstalled on all Windows-based machines. While the tutorial does accomplish the task of walking a user through the steps of resizing their images, it fails to accomodate Apple users and involves some approximating. Here's where Pixlr comes in.

Pixlr is an entirely web-based photo-editing application made freely available on the Pixlr website. With it, you can import photos from your hard drive, edit them in real time, and then save the new .jpg as if you had Adobe Photoshop or the likes installed on your local system.

Check out the video below, then bookmark the new tutorial on resizing images using Pixlr. If you're responsible for managing your company's online content, knowing how to accomplish this basic task will help you immensely!

Read the full tutorial on resizing images with Pixlr here.

Resizing Images in Microsoft Paint

Resizing images is a fairly standard task for web content managers. Reason being: most images come in a native resolution far too large for efficient display on the web. For that reason, I finally sat down to write a tutorial on how the Windows-based user can utilize the preinstalled Microsoft Paint to handle their image resizing needs.

Check out the full tutorial in the Evergreen Resources section of our website.

What is a CMS?

CMS stands for Content Management System and represents one of the most essential tools for updating and managing your website.

All websites are encoded at some level in a programming language. Unfortunately, most of us aren’t versed well enough in these languages to use them effectively in managing our websites. That’s where a CMS comes in. A CMS provides a gateway between the non-technical individual and his/her website which can require little to no familiarity with programming languages. If you are able to use a computer, you are able to work a CMS.

Whether you know it or not, you’ve probably already used a CMS. Social networking sites like facebook and MySpace implement their own versions of a CMS. When you access the control panel of your facebook account to change your Contact Information or ID Photo, you’re accessing the backend of your personal webpage through their CMS utility. While their CMS tools are relatively inflexible compared to the types of CMS tools being discussed in this article, they still reflect key aspects of Content Management Systems.

Say you’ve decided to launch a website from scratch and say you’ve found a CMS that you believe will be effective and simple enough to use. Once you’ve logged in, you now have the ability to create new pages instantly, add text and images with just a few clicks, and implement a complete navigation system reflecting your dynamically developed information architecture. And now for the best part: it took you just 20 min and little to no technical experience.

That’s the beauty of the CMS. It’s designed specifically to make these tasks fast and easy. Successful developers cater the composition of their systems to your needs—instead of demanding it be the other way around.

We here at Cascade Web Development are successful developers. Our in-house technical team has created what we believe is the most intuitive, easy-to-use Content Management System on the market. We’ve titled it Evergreen, and have proudly garnered a significant number of followers in our clients.

The strength of Evergreen lies in its simplicity. Instead of bombarding our users with unnecessary features and superfluously glitzy packaging, we’ve focused on improving and fine-tuning those aspects of web development that have proven to be truly critical to the content manager (You). We’ve done our best to streamline the process as much as possible and create the most intuitive user experience imaginable.

If you think you’re interested in reading more about our CMS solution, feel free to browse the Evergreen section of our website. Decide for yourself whether you think Evergreen is right for you, then contact us if you’re ready to discuss specifics. We regularly make ourselves available to our clients and interested individuals for technical assistance and general support needs.

So this has been the first in a series of articles discussing the various aspects and capabilities of Evergreen, our Content Management System. Keep a lookout for future articles where I will be highlighting various tips on how you can more efficiently implement Evergreen in your web development routine.