Eva He likes what Regent College has done with their website, YouTube, Twitter, and Facebook design. This Vancouver graduate school is just one of many post-secondary institutions grounded in knowledge and implementing current technology. Not only that, but they do it with a divine sense of style!

This week, Brent has, once again, been wrestling with technology’s disturbing philosophical implications. This week, it was humankind’s inevitable discovery of immortality. Check out Basic Instructions for the full implications, including why you don’t want to be the second generation of immortals.

Having a growing collection of film cameras, David understands the appeal of virtual display case Pinterest, which lets users collect photos and images of things they like. While people could do this before on blogs and other social networks, Pinterest’s edge, users speculate, is that its success is based not on Facebook’s model of sharing, but rather the drive for people to collect. In fact, it seems like there’s an inner scrapbooker in all of us.

Toronto-based digital marketing agency Kobayashi Online developed the website for IT.Can, the association of Canadian practitioners of information technology law. The new, bi-lingual website helps them in their mission of fostering the development of this growing legal field. The design and project management was done by Doodletronics.

Site Info

• URL: it-can.ca
• Client: IT.Can
• Completed: May 2012

Features

• Easy Editing using WordPress CMS
• Multi-lingual site (French/English)
• Members-only areas
• Online member signup and renewal

It-can.ca provides personal member areas for more than 250 members, who can access special, members-only information and resources.

The S2 Member Plugin plugin to enable members to register and pay for their annual membership online. Kobayashi Online customized the plugin so that the administrator can open 2013 renewals before the end of the year. This lets people buy their 2013 memberships in advance so their account does not expire. Different price options for membership categories were also added, including regular, student, and in-house council.

Kobayashi Online used the WPML plugin to make it-can.ca bilingual, which is essential for a truly Canada-wide organization. Site visitors can switch between from English to change the language from a drop-down menu at the top right of each page. Website URLs are in the same language as the page contents, making it easier for search engines to find these multi-lingual pages for web searches in different languages.

Thanks to the Formidable Pro plugin, site visitors can easily register for upcoming IT.CAN events and conferences. They can pay using a secure, PayPal-powered gateway that supports PayPal and all major credit cards.

The website was also built with expansion in mind, having incorporated the  WordPress Content Management System to enable site administrators to update all site information, publish pages and posts, and modify sidebars.

It-can.ca features a newsletter section that is easily updated with PDF newsletters that provide the latest information on the organization. Site administrators can also add multimedia content such as audio recordings of roundtable discussions, and downloadable conference papers.

Thanks to Kobayashi Online’s development, IT.CAN’s new website is easily updatable with dynamic content, and enables members to manage their accounts, sign up for events, and access pertinent information.

After Development

Before Development

Platform: WordPress 3.2.1

Plugins Used:

• Formidable Forms: A plugin to create custom forms.
• Formidable Payment: Sends posted results to PayPal for payment completion.
• Formidable Multilingual: Adds multilingual support for Formidable.
• s2Member® Framework: A powerful membership plugin for WordPress which protects and secures members-only content with roles and capabilities.
• WordPress SEO: An all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and more.
• WPML Multilingual CMS: A plugin that makes WordPress a multilingual CMS.
• WPML String Translation: Adds theme and plugins localization capabilities to WPML.
• Advanced Custom Fields: A plugin to allow greater page customization.
• BackupBuddy: Backs up files, settings, and content for a complete snapshot of your site, which enables simple site restores and migration to a new host or URL.
• Custom sidebars: Allows to create your own widgetized areas and custom sidebars, and select what sidebars to use for each post or page.

Public broadcaster BBC needed a javascript library to help their online interfaces, so they built one. Glow, which Daveed thinks is quite good, was also generously made available for anyone to use. Glow features some really great tools including an animated slideshow, an interactive timeline, and more. BBC is providing that an old media company can learn new tricks.

The human eye can perceive approximately 7 million different colours. To narrow down the choices for any given design, Eva often uses color-swatches.com to narrow down her options. This site lets you search for a colour, create a swatch based on a photo you upload, and pick from a library of swatches. What colour will you think of next?

As someone who carries a phone, at least one camera, and a laptop with him most days, David was thankful for some advice this week about travelling with technology. Tips such as using USB for charging and reusing the packaging for more streamlined travel made sense. Downsizing seems like it would provide the most impact, but one some of us aren’t quite ready to make yet.

Daveed knew the iPhone 4’s extremely high resolution or “retina” display (which essentially crams twice as many pixels into the same space as before) would have implications for web design, and especially responsive design. CSS 3 queries are the key to updating website images for high DPI devices, and in a way that degrades gracefully for lower resolution screens. Of course, Adam Bradley’s Foresight.js plugin takes this a step further, making it easy to serve up high-resolution images to high-res devices, but only when they have a fast enough network connection for the mega-sized image files. This means high-res devices won’t be limited by bandwidth.

Our friends FuturestateIT* are up for a CATA Alliance award for Emerging Technology. Futurestate’s cloud based solution, AppRx, automates the testing of applications against operating systems such as Windows 7 or Server 2008, and provides for the ongoing management of applications to keep them current. Their solution essentially reduces the time, cost and risk involved in application migration. Support their work by voting for them.

Having always been fascinated by cutaway illustrations, David was blown away by Todd McLellan’s pictures of vintage technology taken apart piece-by-piece and photographed. In a 2011 interview with Pipeburn on a services of motorcycle photos he did, McLellan said, “I am very much into the design of the objects I shoot and I think that[‘s] what gets me going when photographing something.” This clearly comes out in his photos of the insides of rotary phones, manual typewriters, and alarm clocks, even when the design isn’t meant to be outward-facing.

* We recently setup a live, WordPress development environment for Futurestate IT.

Kobayashi Online, an innovative Toronto digital marketing agency, designed the allcareservices.ca website, which provides an elegant and professional online destination for Allcare Maintenance Services.

Allcareservices.ca showcases the environmentally cleaning services Allcare offers to workplaces in the Greater Toronto Area. The site also allows clients to sign into a private site area where they can schedule cleanings.

The website is based on the WordPress Content Management System, which makes it easy for site administrators to update the site without ever having to learn any Web programming. Code developed by Kobayashi Online enables administrators to publish pages and posts and modify the left column to include complementary information to the main column.

The WordPress interface helps Allcare update its blog, which features information about green cleaning and up-to-date company news.

The compelling, dynamic site content featured on the blog helps draw in site traffic, as well as interest from search engines. Additionally, the site was coded to be search friendly, allowing editors to create as many search-engine-friendly pages as they want, and add them to the menu with no more than three clicks.

After Redesign

Before Redesign

Platform: WordPress 3.3.2

Plugins Used:

• Rich Widget: A WYSIWYG-enabled editor for sidebars.
• Formidable Forms: A plugin to create custom forms.
• Advanced Custom Fields: A plugin to allow greater page customization.
• Google XML Sitemaps: A plugin to generate an XML sitemap.
• MailChimp: This plugin allows you to quickly and easily add a signup form for your MailChimp list.

Since finding out about it this week, Daveed and Eva were able to try out a plugin that lets you try out FontShop fonts right in Photoshop. Oftentimes we have to buy fonts before seeing exactly how they’ll look within a project we’re working on. Thanks to this plugin, designers can see exactly what fonts look like in Photoshop before buying the font.

Scott rolls with the punches whenever Facebook changes the way developers create apps. While developing his latest Facebook fangate, he found out that instead of using javascript to set the height of a fangate, there’s a new screen in the app pages where you go to change the height of an app page. In fact, they’ve done away with the old javascript method. Take note, developers, Facebook is always changing!

Brent was surprised to find out that North Korea had created its official website using a $15 WordPress theme. The template is available on Ignite Themes, and appears to be more geared towards personal blogs and websites (as opposed to a totalitarian regime), the new design looks much better than the old one, which looked like it was made in the 1990s.

Having designed many corporate Twitter themes, Eva knows how important Twitter backgrounds can be. Even savvy businesses that use tweets to reveal the personality behind their company may not realize the importance of Twitter backgrounds. A new Designers Hub article explains that a background helps align your Twitter account and brand, exhibit creativity, communicate your message, and more.

When deciding on a website’s typography, we often rely on a drop-down menu showing a seemingly endless list of fonts. Thankfully, we found Wordmark.it, a website that scans your computer’s installed fonts and displays them in a simple visual grid for easy browsing. It also lets you change how big or small the grid tiles are, helping you find that gem of a font without all the squinting.

David, reminded of high school science class, reacted well to Isotope, a new jQuery plugin that filters, sorts and lays out website content as though it were on the Periodic Table of Elements. Another great part of Isotope is that it incorporates CSS transitions, which make the user experience not only visually interesting, but also more intuitive.

Beezix creates industry leading quick reference cards for today’s most popular software applications. Creating a YouTube channel where they can share information and tips was a logical step into social media.

To help Beezix get the most impact out of its video efforts, Kobayashi Online designed a custom YouTube page for them, featuring a custom background that is consistent with the company’s image and current design.

Custom YouTube Theme

• URL: http://www.youtube.com/user/BeezixQuickReference
• Client: Beezix
• Completed: February 2011

Features

• Custom YouTube background
• Designed for consistent style with brand

Beezix creates industry leading quick reference cards for today’s most popular software applications.

Kobayashi Online designed a background for their Twitter page that was consistent with their brand.

Custom YouTube Theme

• URL: https://twitter.com/#!/beezix
• Client: Beezix
• Completed: February 2011

Features

• Custom Twitter background
• Designed for consistent style with brand

One of the things we love about the WordPress content management system is its uncanny ability to adapt to an endless variety of web design needs. It can be changed and customized to look and perform radically differently depending on what’s needed.

WordPress themes provide a design & layout out-of-the-box.

In an effort to provide more unique designs to the masses, WordPress theme developers have brought a wide variety of free and premium themes. Themes will provide a set of design, layout and functionality elements, which help form the basis for the user experience. Installing an attractive WordPress theme can be thought of as a head start towards the way you want your website to eventually look and function.

There are some problems, however, with finding a theme from the WordPress theme directory, and using it out of the box:

1. Lots of other people will have the same design

It’s hard to achieve a unique and memorable look for your website if the theme you’re using has been downloaded tens of thousands of times (which isn’t unusual for popular themes).

2. There is a chance it will not be continuously supported

We recently heard about someone who had been using a very nice looking theme for years. It looked and performed well until the site administrator updated WordPress. The theme, which hadn’t been update for nearly four years, wasn’t prepared, and broke the site.

3. Themes don’t always work with certain plugins

Plugins help provide extended functionality not included in WordPress’ core code. Themes, especially heavily stylized ones, can be very closed to plugins because they want the page to look a certain way. For instance, a plugin that lets someone change page sidebars may not work because that space is reserved for a style.

4. Installation doesn’t always go smoothly

WordPress is designed to make theme installation easy, but not all themes are easy to setup. WordPress recommends that theme authors provide installation instructions for their own Themes, which may include more steps than the basic installation. Even then, a theme may not work after following the instructions provided, in which case you’ll have to contact the Theme author for help.

5. Lack of documentation

Many themes lack comments within the code that help developers understand what functions and code fragments do. We suspect that lack of documentation is common among themes made to appeal to novice WordPress users who may not be interested in delving into code. Without knowing precisely what certain lines of code do, performing regular maintenance, and design and development work becomes more difficult.

What to look for in a WordPress theme beyond its appearance

When deciding on a theme to use, be aware that good themes can go bad. Pay attention to the date when the theme was last updated. If a themes hasn’t been updated in months or years, the developer could have stopped supporting the theme, making updates to plugins and the core WordPress code risky.

It’s also important to pay attention to the number of theme downloads, which more-or-less shows how popular a theme is. Issues such as updates and compatibility tend to get more attention for a popular theme, as opposed to one that only has a handful of users. Of course, a popular theme will be used by many other websites, so it’s best to a plan to make your site stand out and be unique.

Visit forums to see if people have complaints about a certain aspect of the theme, or have issues getting support from the theme author.

And finally, if you’re in doubt about whether a WordPress theme is worth using, ask a Web developer specializing in WordPress to take a look at a certain theme to see if it will be a good one to work with.

It’s important to remember that, with some work, a theme can be changed to match your aesthetic. A theme’s font or background colour and texture, for instance, can easily be adapted to a different (and more dependable) base theme.

A WordPress theme can make a great looking site, but a skilled Web developer is able to make the WordPress customizations you need to ensure your site is appealing, stable, and functional.