The first thing you’re going to need is a Google-ID. If you have a gmail address, you already have one. If not, go and get one. This is your single sign-on to all of Google’s services. If you are setting something up for an organization, you probably want to get a Google-ID specifically for that organization so that you can share it with others. Here are instructions on how to sign up for your Google-ID.

Now that you have your new Google-ID go log into Google Calendars. The first thing you’ll have to do is create a new calendar. This will be the calendar that you embed on your website, so give it a meaningful name like “My Organization’s Events”. Make sure you set the visibility of the calendar to public. If you skip this step, nobody else will be able to see it. Finally you are ready to embed the calendar into your website by pasting the embed code into (for example) a page in WordPress.

If  you need to you can create more than one calendar and include them all in one calendar view. Just check off each of the calendars you want included in the list on the Google Calendars embedding page. If you find there are too many events in your combined calendars for the Month view, try changing to the Week or Agenda views. They are better able to display more entries in each day.

I’ve completed all of these steps in order to embed a calendar into this post that displays three Google Calendars. If you click on the little down arrow in the top right corner, you can choose which of the three calendars you’d like to see.

Kinds of image data

The first concept is the identification of the kind of image data you are dealing with.

There are generally two different kinds of image data. The first type of data we can identify is what I’ll call very complex image data. This is the kind of data that comes from a camera. Photographs, paintings, sketches and any other data which are organic in nature have a great variety of tone, color, rich texture, and look like real things.

The second kind of image data we’ll discuss is what I’ll term less complex image data. These kinds of images have strong lines and edges, high contrasts, simplified color palettes, and smooth textures. Cartoons, computer generated images, rasterized vector drawings, technical drawings, icons, and rendered type all fall into this category.

Data compression

Now that we understand the two major types of image data we are dealing with, we should understand why we bother with this differentiation to begin with. The answer lies in data compression.

Data compression is the technique of taking a set of data, and representing it in a way that is smaller than before. If we didn’t do any data compression, we could handle any kind of image in the same way and it would always look great. The problem is image files are very large, and our pages would take forever to load up if there were no compression applied to them.

Since we must apply data compression to images for the web, we need to understand the two major kinds of data compression we’re interested in. There is one kind of compression for each of the two kinds of image data we are dealing with.

Lossy compression

The first is called lossy compression. This kind of data compression works by representing the raw image data in a way that is mathematically analogous to a waveform. Mathematical techniques which simplify that waveform are then applied. The simpler the waveform data are, the smaller they are to store in a computer. In this way images can be compressed to very small fractions of their original size.

The downside of lossy compression is that once the original data are simplified in this way, that complexity is lost forever. There is no way of getting it back. This is why this kind of compression is called lossy. When it comes time to de-compress the data to re-create the image, the image will not look exactly the same as it did before. The more the data are simplified, the smaller the image file gets, and the more different the image looks after de-compression.

This sounds bad, but when applied to the right kind of image, lossy compression is by far the best choice. We apply this kind of data compression to our complex image data. Images with more natural textures and greater complexity are more forgiving of lossy compression because they are so complex, that our eyes have a much harder time detecting the difference between the original and compressed images.

Lossless compression

The second kind of image compression relevant to us is called lossless compression. This kind of data compression works by searching the image for repeating identical sets of data, and reducing them. For example, if an image has a pure white background and large patches of one color, these areas of the image will be identified. These identical repeated sets are then mapped and indexed so that the data are only stored once, thus making the resulting image file smaller than the original data.

The downside of lossless compression is that it cannot compress very complex image data as well as lossy compression can. If we were to compress a photograph using lossless compression, the compressed file would still be relatively large.

The good thing is that when applied to less complex data, Lossless compression yields very small files, and the de-compressed image is exactly the same as the original. This is important with less complex image data because with images of this kind it is much easier for us to notice when there are changes in the data.

Choosing an image format

So now we know that when we are compressing very complex image data, like a photograph, we should use a lossy compression algorithm, and when we are compressing less complex image data, like a line drawing, we should use a lossless compression algorithm. The question remains, what kind of image format should we be using for each.

These days there are three major compressed image formats being used on the web. I’ll explain each of them.

JPEG, which is an acronym for Joint Photographic Expert Group, is an image format which is best used for photographs and other kinds of complex image data. It is the kind of image format used in all digital cameras (unless you are shooting in raw mode, which applies no compression). It will compress your photographs, paintings, and other very complex images down to a reasonable size, and you will hardly notice any difference in the de-compressed image.

PNG, which is as acronym for Portable Network Graphic, is quickly becoming the most common of the lossless image formats used on the web. It should be used for all of your less complex images such as cartoons, computer generated imagery, rendered type, and technical drawings. It will apply enough compression to get your less complex data down to a reasonable size, and the de-compressed image will look exactly the same as the original.

PNG also comes with the added bonus of being able to store alpha channel image data. This allows you to store images with variable transparency.

GIF, which is an acronym for Graphics Interchange Format, is an older lossless image format which is still in common use on the web. While it can compress less complex data reasonably well, it only works with 256 color, or 8bit image data. If your original image contains more than 256 colors, using GIF compression becomes a lossy compression format since it must simplify the color data of the image. For this reason, it’s probably best to never use the GIF image format.

Optimization tips

Now that we understand which image formats we should use for which kinds of images, and understand why, we should be able to create websites with great looking images that load quickly. There are still a few little points which can help us squeeze just a little bit more performance out of our images.

Color palette optimization

The main recurring theme of this post has been simplification of image data. Simplified images compress better, and so become faster to load. With this in mind, it is a good idea to simplify the color pallette of your images as much as possible before compressing.

In the case of very complex image data such as a photograph, there is very little that can be done with regards to palette optimization, with the exception of black and white images. If you are dealing with a black and white image, you may want to convert the image to “greyscale”.

With regards to less complex image data, such as rendered type, palette optimization is almost always possible. Try reducing the color depth of your image from 24bit, or RGB, down to indexed color. Do you notice any image degradation? If not, great! The use of indexed color palettes will dramatically reduce an image’s file size.

Compression level, or “Image Quality”

The level of compression used is most relevant when you are creating JPEG image files. The compression level controls the amount of data simplification that occurs when compressing an image. This setting is usually called “Image Quality” in image manipulation software and is represented as a percentage value. When you compress a JPEG with 100% image quality, a very low compression level is implied, and very little data simplification occurs. When you compress a JPEG with 50% image quality, a very high compression level is implied and a lot of data simplification occurs.

It’s probably best to try and keep your image quality somewhere between 65% and 85%. Below 65% image quality the amount of data degradation starts to become distracting from the image. Anything above 85% image quality generally looks exactly the same to the human eye, and will only result in a larger file size.

Image size

This last point may seem obvious, but it remains a very common error on the web. When creating your final image, make sure you size it to exactly the size you want to display it at on the web. By size, I mean the area the image takes up on the screen, measured in the number of pixels from left to right (the X axis), and the number of pixels from top to bottom (the Y axis).

If you render your final image bigger than the size at which you intend to display it on your website, you are just making a larger file, making your website take longer to load.

Also, forget about DPI, and inches or centimeters when sizing your images for the web. The web is measured in pixels, and the size of a pixel varies from screen to screen, making DPI an irrelevant concept.

What RSS is

The Wiki article puts it very succintly.

RSS (originally RDF Site Summary, often dubbed Really Simple Syndication) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format.[2] An RSS document (which is called a “feed”, “web feed”,[3] or “channel”) includes full or summarized text, plus metadata such as publishing dates and authorship.

RSS feeds can be read using software called an “RSS reader”, “feed reader”, or “aggregator”, which can be web-based, desktop-based, or mobile-device-based. The user subscribes to a feed by entering into the reader the feed’s URI or by clicking a feed icon in a web browser that initiates the subscription process.

Once subscribed to the feed in the RSS reader, the visitor no longer needs to visit your website in order to read your updates. The former visitor now becomes a reader of your content as it is syndicated to their RSS reader. This makes reading the content of her favorite websites more convenient by bringing just the relevant content from those websites into once place, the RSS reader.

Whether this is a good thing for your website is up for debate. Do you really want people reading your website’s content without actually visiting your website? Anyways…

The RSS icon

The RSS icon was probably the first “social media icon”. It’s that small orange icon with the concentric semi-circles found in the footer of a website, inviting the visitor to “click to subscribe”. Over time, more social media icons appeared in this space inviting clicks to things like twitter feeds and facebook pages.

This is probably why the confusion about RSS began.

People used to clicking the twitter and facebook icons in the footers of websites started clicking the RSS icon out of curiosity, and were probably disappointed by what they got.

Wikipedia mentions clicking a feed icon in a web browser that initiates a subscribe process. In order for the subscribe process to occur, the visitor clicking the rss icon must have an RSS reader installed on her computer which will detect the icon click and handle the subscription. If no such reader is installed, and the web-browser doesn’t also behave as an RSS reader (some do), the visitor will most likely be greeted by a screen full of XML that looks something like this:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
        <title>RSS Title</title>
        <description>This is an example of an RSS feed</description>
        <link>http://www.someexamplerssdomain.com/main.html</link>
        <lastBuildDate>Mon, 06 Sep 2010 00:01:00 +0000 </lastBuildDate>
        <pubDate>Mon, 06 Sep 2009 16:45:00 +0000 </pubDate>
        <ttl>1800</ttl>

        <item>
                <title>Example entry</title>
                <description>Here is some text containing an interesting description.</description>
                <link>http://www.wikipedia.org/</link>
                <guid>unique string per item</guid>
                <pubDate>Mon, 06 Sep 2009 16:45:00 +0000 </pubDate>
        </item>

</channel>
</rss>

It’s quite a different action than that which occurs when clicking on the twitter or facebook icon, which simply opens the twitter or facebook page in the browser.

What RSS isn’t

Because of the placement of other social media icons near the RSS icon, all of which lead to other web pages, people who are not familiar with RSS naturally expect the RSS icon to do the some thing as the others. Open the “RSS web page”. Unfortunately, as I’ve just discussed, there is no such thing. There may be web-based RSS readers such as Google Reader, but RSS isn’t a web page. It’s a bunch of XML gobbledy-gook meant to be read by a machine. A machine running an RSS reader!

My radical solution

Since the social media icon context has changed from meaning click here to subscribe to my RSS feed with your RSS reader, to meaning click on these icons to read my tweets and updates on social media websites, I suggest surrendering all of the social media icon space on your website to social media website. RSS icons aren’t really necessary, anyway, as these days hidden code within a website can tell an RSS reader what to subscribe to. This allows you to subscribe to a website’s RSS feed simply by entering the website’s address. It would eliminate the confusing RSS icon and make all social media icons behave the same way.

I realize this post is a little technical, and hard to understand if you’ve never used an RSS reader before. Here are a couple of links to popular readers so that you can try them out.

Google Reader (a web-based RSS reader)
RSS owl A stand-alone desktop application RSS reader for most platforms.

Well, it’s time for you to take over your shiny new site and make it work for you. And that means you’re going to need to learn how to use the WordPress CMS (Content Management System. A great place to start is with the WordPress Lessons documentation which can be found here:

http://codex.wordpress.org/WordPress_Lessons

Another great way to get comfortable with your WordPress site is to watch a tutorial video. This way you will be able to see somebody actually walk through the WordPress dashboard and follow along. There’s a great WordPress tutorial video series here:

http://www.youtube.com/watch?v=jJoodIiuy5I&feature=related

Another excellent resource is lynda.com. this site offers a wealth of information and tutorials on all things technical including excellent tutorials on WordPress. There’s a fee for the service and we’ve found it to be good value for money.

http://www.lynda.com/search?q=wordpress&x=33&y=8

Finally, book a training session with us. With most projects we offer a one or two hour training session. It can be a great way to answer any lingering questions you may have after reviewing the resources above.

Happy WordPressing!

Here are five questions you should ask your potential hosting provider in order to make sure you are choosing one that will be problem free, and easy to work with.

1. Is web-hosting the company’s primary business?

To provide web hosting is not a difficult task. Any company with access to a server room and a fast Internet connection can do it. As a result, just about every telephone company, Internet service provider, and communications firm offers hosting.

Unfortunately, while it may be easy to offer hosting, it is very difficult to offer good hosting. When a company’s main focus is something other than their web hosting, you will usually find that they are slow to respond to your support requests and they don’t keep their service up to date. They often have downtime and take a long time to restore service.

2. Does the hosting company offer the LAMP stack?

Yes, Windows has come a long way and definitely sucks less than it did in the 90s. But it still makes for a poor web-hosting platform for anything meant to run on a LAMP (Linux Apache MySQL PHP) stack.

When you are running WordPress, Drupal, or any of the other PHP-based (PHP) CMS (Content Management System) platforms, you should always choose to run them on the platform for which they are developed. This will help prevent unexpected incompatibilities such as the Windows file-path problem, and non-standard URL rewriting systems.

3. Is an easy to use control panel provided?

Just about every hosting company offers a control panel these days. What makes a big difference is if the control panel offered is easy to use. There are several third party control panel products available these days. If you are comfortable using one of them, make sure your hosting company uses it, and make sure it is kept up to date. A 2 year old version of CPanel is a sign of a stagnating web-hosting company.

Also, look for a custom built control panel. If a hosting company has developed their own control panel system, it’s likely that it is going to be simpler to use. Just make sure you get a chance to take it for a test drive before you commit.

4. Do they make it easy to get SSH access to the web-server?

This is perhaps the most telling question you can ask your provider. If SSH access to the server is not provided, it usually means the company is not confident about their system’s security.

Going without SSH access will also mean many of the tasks involved in uploading, launching, and maintaining your website will take much more time than is necessary. This could lead to high system administration bills if you’re paying someone to take care of these tasks for you.

5. Can you seamlessly upgrade you service?

It’s a great problem to have. You launch your website on an inexpensive shared hosting environment, and it becomes so popular that you need to move it to a private virtual server to get the kind of performance your visitors demand.

But there’s often a catch. Lesser hosting companies will stop supporting you once you’ve moved onto a private server. You may even find that you are required to take care of all of the system administration of your new private server.

Make sure when you upgrade your service your hosting company will continue to support you and will provide you with a complete turn-key web-server, and will continue to provide system administration services such as data backups, and system upgrades.

Major search engines submission pages:
http://www.google.com/addurl/
http://www.bing.com/webmaster/SubmitSitePage.aspx
https://siteexplorer.search.yahoo.com/submit

It can also pay off to have your site listed in DMOZ. DMOZ is an open website directory project that gets included in a lot of smaller search engines all over the world. To get your site listed in DMOZ, follow these instructions.

DMOZ submission instructions:
http://www.dmoz.org/add.html

Finally, I always think it’s a good idea to ask for feedback about your site by addressing a couple of appropriate google (Usenet) groups. It’s an easy way to get people looking at your site, and can help to create a little bit of link popularity to get your site started on its way to the front page of the search engines.

Browse the list of google groups for one which is appropriate to you site, and politely ask for people to have a look and tell you what they think. If you’re intimidated about posting to Google Groups, you can read about Usenet posting ettiquete here: http://tools.ietf.org/html/rfc1855

Google Groups:
https://groups.google.com/forum/#!browse

Last year, Media Democracy Day drew together more than a thousand people in dialogue about the state of media in Canada and around the world. Two of this year’s key speakers are Judy Rebick, author and founder of Rabble.ca and Dr. Sut Jhally, professor and founder of the Media Education Foundation.

Panel discussions will include topics like unions and public opinion in a crisis economy, aboriginal uses of new media and the future of journalism.

The Sunday program will include hands-on media workshops.

Media Democracy Days’ mission is: Know the Media. Be the Media. Change the Media.

For more information visit the MDD site: http://mediademocracyday.org/2011/09/

Celebrated on the first Saturday in June, the event promotes the rights of people with disabilities, and raises awareness about accessibility and social inclusion.
The brochure focused on seven features that makes a community accessible. These include adaptable housing and accessible parks, parking, gas stations, public transit, streets, taxi services.

The brochure can be downloaded as a PDF.

According to WorkSafe BC, last year 143 BC workers lost their lives. In 2009 nearly 100,000 British Columbians were injured on the job. Nearly three million work days were lost.

Conceived of by CUPE National in 1984, the campaign is a Canadian initiative that has gone international. http://en.wikipedia.org/wiki/Workers%27_Memorial_Day

For this year’s April 28 event Working Design was asked to develop a new logo for the BC Federation of Labour’s annual campaign. http://www.workingdesign.net/medium/identity/

We also designed a new poster for the BC division of the Canadian Union of Public Employees (CUPE). http://www.workingdesign.net/medium/posters/

The Canadian campaign has long been symbolized by a canary in a birdcage. You probably know the story: coal miners would carry the tiny bird into the mines to detect gas in the air. Sensitive to toxic vapours, the canaries would react if poisonous gas was present. If the birds showed signs of distress – or died – the miners knew they were in danger.

Workers who have been injured or lost their lives are our society’s canaries, a warning of dangers in the workplace and a reminder of the vulnerability of workers.

Many of us work in environments that aren’t likely to lead to to being killed on the job. But, in almost every workplace we face hazards that can harm our bodies or minds.

What’s the problem and how do we fix it? Health and safety specialist Dorothy Wigmore has some answers:
“Too many workplace hazards in any workplace are ignored or not dealt with properly,” says our friend and client Dorothy Wigmore, a health and safety specialist based in Winnipeg.

Ergonomic hazards are common in most jobs, including offices. That’s why musculoskeletal injuries or disorders – another name for aches and pains, or repetitive strain injuries– are way over half the “injuries” reported to compensation boards. They also tend to be the most un-reported.

“People working at computers can expect problems with their necks, shoulders, backs, wrists and legs,” Wigmore says. “Often, they have to sit in postures that strain their bodies, in set-ups that don’t fit. Few of us are trained about how to adjust our chairs or other things we use. Many of us can’t make too many adjustments, given the set-ups we have.

Overhead office lighting usually is too bright, while we don’t have enough on the documents we use. Eye strain comes from the glare and reflections and how well our glasses let us see the screen.”

It’s not just the physical set-up. Studies show that “stress” sets us up for these health problems in our necks, shoulders and lower backs. Changing the physical set-up improves things; reducing the stressors too will more likely reduce the musculoskeletal aches and pains.

Ergonomics is about designing jobs and workplaces to meet people’s needs — whether physical and mental. It’s an art and science, Wigmore says. The purpose is to prevent people getting hurt because of their work.

Wigmore recommends ergonomic assessments to look at things such as seating, where the monitor is, and keyboards — truly ergonomic ones can be adjusted in three dimensions and usually have a separate number pad. Standing is also a big hazard (linked to high blood pressure and other health effects)

“Assessments are hard to do on your own. You really need another set of eyes,” Wigmore says. “Ergonomists can help. For on-going activities, train the folks on health and safety committees, have an ergonomics committee and get an ergonomic buddy system going.” They’re all part of participatory ergonomics programmes (http://www.iwh.on.ca/pe-guide); studies say they’re the most effective.

More information and useful resources

• The Institute for Work & Health’s materials about preventing “musculoskeletal disorders”
• Ergonomics and mapping materials in the Safety and Health Toolbox of the guide for joint health and safety committees, “Seeing the workplace with new eyes”, for which Wigmore was the main author
• The many materials about ergonomics prepared by the Canadian Centre for Occupational Health and Safety (CCOHS)
• The “ideas bank”, interactive computer workstation layout course and other materials from the State of Washington’s Department of Labor and Industries
• The many materials and international links from the UK’s Hazards group
• And for more academic resources, Karen Messing (a leading specialist in women’s occupational health) does very important and practical work

Dorothy Wigmore can be contacted at: dorothyw@web.ca. Read her latest item on the Day of Mourning written for the Canadian Centre for Policy Alternatives in Manitoba: http://bit.ly/ipfQZW. Keep an eye out for her soon-to-be launched website which we are helping develop.

The canary logo and our new version

There have been many versions of the canary logo generated over the years, as unions and federations across Canada created their own publicity materials. But one image is most common – a shaded and textured ink drawing of a bird in a cage.

That illustration has an old-fashioned feel, which evokes the 19th century coal mine tale. Its style is detailed and difficult to render at a small size or apply to items like clothing.

Using the new logo we developed, The BC Federation of Labour, is creating a unified look for all their materials. The new art reproduces well at all sizes and applications, from banners to buttons to baseball hats.

As you can see, we gave the iconic canary image a cleaner and more contemporary feel. We maintained the black and yellow colour associated with danger and simplified the lines. We re-styled the bird while trying to maintain a serious tone (it’s amazing how every small bird drawing these days reminds you of the Twitter bird). We incorporated the BC Fed’s name in a way that echos their own logo. And we popped the bird partway out of its cage to suggest a sense of hope and empowerment.

For CUPE we designed a full page ad for their member magazine, the Public Employee. We wanted a bold graphic treatment and a focus on the striking shape of the bird. Here, too, we foregrounded the canary and dropped the cage back for a greater sense of openness and movement.

The job can be more challenging, however, when the client is…yourself. Working Design is constantly evaluating our role and identity, and refining our online presence and marketing. In the past few months we’ve launched a redeveloped website, expanded our social media presence through Twitter and Facebook and, finally, printed new business cards.

When the latest batch was delivered last week it was time to clear out a few boxes of the old ones. In looking at them, we saw our history in a nutshell. In 25 years we’ve gone from a cut-and-paste print design studio to a completely computer-based operation working almost equally in web development and print material design.

Our first card from the 80s uses a found graphic depicting a workers’ hand turning a wrench. Wrenches – and later, cogs – are ongoing themes in our identity work.

Our next card features a bolder design, more dramatic use of colour with updated typography (the beautiful Rotis Serif) and an enlarged version of the same graphic.

Card number three from the mid-90s leans towards the grunge look and uses the new rules of text juxtaposition and sequence promoted by designers like David Carson. It uses shadowgram images and a dramatic, contemporary –for its time– use of typestyles and colour.

In the early 2000s we developed our first website and became more marketing savvy. We introduced our tagline – “working (at more than) design” developed by our freind and colleague , Bill Tieleman from West Star Communications. Also we indicate our main areas of work: ideas, graphics, communication. We market-tested design and colour options and our survey group clearly favoured a cool blue card with chartreuse-coloured letters. In addition, this card followed the trend towards two-sided presentations made necessary to include the increased information of email addresses, website url, cel phone numbers as well as all the other stuff.

Fast forward to 2011 and we have a simplified, open design. In today’s crowded information environment, it’s even more critical to get to the point quickly, stand out and be visually accessible. We think we’ve done that. What do you say?

Also, check out our tip sheet on branding and developing logos

And, for examples on some of our identity jobs have a look at our portfolio.