Archive for the 'Web Design' Category
Incorporate Cufón in WordPress
Every once in a while comes a project where using a font other than verdana, arial, trebuchet or tahoma would be nice. I recently finished a website for Tod Maffin where, Rob, the designer chose Sansa Condensed as the font of choice for headings. I could have created images for all of the page headings, but I wanted to give Tod the ability to update them if he chose to and more importantly, I also wanted to use the same font for the headings of blog posts. After reading about the alternatives, I decided to give cufón a try and was quite surprised to discover how easy it is.
Here are the steps required to integrate cufón in your wordPress site:
Step 1 – Get cufón
Visit the cufón website and download the YUI-compressed version of cufón. Save this js file in a js folder in your wordPress theme.
Step 2 – Generate your font file
Follow the steps on the Cufón website and add the generated js file to your js folder in your wordPress theme. You’ll be required to upload your font files and thus you need to have purchased them as well as verified that your fonts are legal to use in font embedding. Upload your js folder in your wordPress theme via FTP.
Step 3 – Add the code to your wordPress template
To use cufón, simply add the following lines of code to your header.php file.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/your_cufon_generated_font_file.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>
These few lines of code will convert all of your h1 and h2 into my selected font. That’s it.
How to use Slimbox plugin to display your portfolio in WordPress
If you’ve been following the Bluelime Media website you will know that we’ve partnered with Barbara from BlueCitrus on many occasions to develop websites and as the saying goes, “The son of the cobbler has no shoes“, the BlueCitrus website was in need of a facelift. My latest teaching gig at Langara provided me with the opportunity to design and develop a WordPress site for Barbara. The goal of the class was to teach the students how to use WordPress to create a portfolio. So building a site for Barbara was the perfect project.
Barbara laid the ground work and designed the header, navigation and gave me a good indication of how she wanted the site to work, but I was given carte blanche on how to make the portfolio work. After looking at numerous portfolio examples, I came across the stunning work of Koldo Barroso. Koldo’s illustrations are simply marvelous and I could look at them all day. His portfolio section is simple, yet very elegant. On closer examination of his site, I noticed that he uses Slimbox to display his gallery pieces which is just a slimmed down version of the original Lightbox.
A few clicks later, I read a few tutorials on how to use Slimbox and decided to use it to build it Barbara’s portfolio section. If you’re familiar with WordPress plugins, you’ll know that beyond how to install and activate, instructions are usually fairly slim when it comes to how to use them. Since I just finished the site and the steps I took are still fresh in my mind, I thought I’d walk you through on how to set your own gallery using the Slimbox Plugin.
How green is your work place?
These days businesses not only have to provide needed services and solutions, they need to do it in an appealing matter. For most of us this “appealing matter” will include sustainable, viable, green solutions. Since 2001, Green Workplace has been working with organizations to track their resource consumption and reduce it. They’ve also implemented easy-to-use energy efficiency campaigns and delivered environmental skills training and education.
Located right here in Vancouver, BC, they are a great resource for small and large companies looking for solutions towards greener business.
Introducing Notch Hill Educational Products
Have you been searching for a way to help your child learn while playing a fun interactive game? Now you can, simply by spending just 15 minutes with Notch Hill Educational Products. These products are a great way to help your child build a strong educational foundation.
The products consist of a GamePak “The Nogs of Notch Hill” which is a learning program containing everything you need to help your child learn to read, write and sound the lower case letters of the alphabet and “Pam’s Patterns” which helps your child develop pre-alphabet learning skills, using simple pegboards.
Developed by Joan Thornton, these products were derived from a notion that children learn best whilst playing. While taking children for extra reading practice, Joan discovered patterns in the behaviours of the students who were struggling. She created games that practiced the skills the children were missing and began playing them with the children. The children loved the games, and began to learn fast in her care. Over the years she has given hundreds of children the gift of a solid academic foundation.
With the help of her daughter, Nicola Lott, the first Educational GamePak and a fun, informative website were recently released and plans are underway to create 8 more GamePaks taking children to a Grade three level in reading, writing and maths skills. Working with Nicola was very interesting and we wish them great success in their new business venture.
Free Easter Bunny Icons at Icon Dock
Just in time for Easter, Icon Dock has released a set of 40 free icons which you can use on your marketing material, blog, etc…
Check out their website for other great icons.
Enhance Dental Centre enhanced with jQuery
Unless your a web developer you might not have heard about jQuery. As defined in Wikipedia, “jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML”. Released in 2006, it’s use is very common on many websites, yet, I’ve never had a chance to play with it, until now.
Inspired by a beautiful design by Mizu Creative, my task was to convert the design into a WordPress based website enabling the client to make edits themselves and insert a series of slide shows with different behaviours. Converting the design into WordPress templates was a breeze, but finding a way to integrate the slide shows proved challenging. My initial thought of course was to use flash, but flash is expensive, annoying, hard to update and quite frankly, I don’t like it. I knew that Tzaddi had recently built a WordPress site where she used jQuery, so I thought I would investigate.
After a couple of Google searches, I found exactly what I needed.
InnerFade by Medienfreunde
The first demo I found was the InnerFade plugin. As the name suggests this plugin allows a series of text or images to fade in and out.
I’m not exactly sure who created this code, because my German is non-existent, but using his/her demo, I found the solution for one type of slide shows and used it on several sections of the Enhance Dental Centre website including this page, where you can see a series of before and after shots fading in an out.
Better Coda Slider by Remy Sharp
The second demo I found was the better coda slider. The aim of Remy’s demo was to look at the original effect used on the Coda site and improve on it. Once again, using his example and making a few adjustments, I was able to use the code and create a “slider” effect where users can view the various testimonials.
All in all, I’m very pleased with the final outcome of the site. What proved to be daunting and challenging initially, turned out to be fairly simple and I look forward to playing with jQuery on more sites. What are your thoughts?
Learn to meditate with Padma
If meditation and finding inner peace are part of your goals for 2009, you may want to learn from Padma. Padma is one of Canada’s most respected teachers of meditation and yoga. She has studied advanced meditation in the Himalayas of India for a decade, where she was certified to teach Sanskrit and meditation philosophy. Having worked with Padma and having attended several of her workshops, I highly recommend her teachings.
You can find out more about her retreats and workshops by visiting her website which we launched a couple of days ago. And if you can’t attend, you may also want to look at her DVDs featuring guided meditation, yoga, breath work, and Sanskrit chanting.
Animator vs Animation
In the web world flash is a bit like Marmite. You either love it or hate it. Certain sites do benefit from animation while others just don’t. Regardless of what you may think, you have to admire the animators who create this stuff. The following video is a great example of the creativity that’s out there. …And if you’ve ever had to work with flash, you may relate to the experience.
Enjoy and happy holiday.
Disclaimer — There’s an übber cheesy commercial before the video… Who comes up with this crap?
Web Directions North returns in February 2009
This year, Web Directions North moves to Denver Colorado – a hub city for many airlines, and a non-stop flight from all over North America. And the skiing’s not bad either. The conference is on February 4 and 5, with workshops on February 2 and 3, and the now legendary ski trip February 6 and 7, in Breckenridge, the most popular ski resort in North America.
I’ve attended the previous 2 conferences in Vancouver and would recommend it to anyone wishing to freshen up their web development skills.
Team BC launches new site
Every four years the Province of British Columbia assembles a team of athletes, coaches, managers and mission staff to represent the province at Canada’s premiere multi-sport events – the Canada Winter Games and Canada Summer Games. They represent the best in BC and are known as Team BC. The Team BC program is more than British Columbia’s best; it is also about building excellence. For some athletes, the Canada Games are a goal along the way to what they hope will be success in sport at major multi-sport Games including Olympic and Paralympic Games.
The previous Team BC website lacked in visual appeal, was quite difficult to navigate and consisted of old-style code which made for difficult maintenance. Working in collaboration with Miin from the Ascent Group we developed a site map, re-organized all of the content and created two new websites. Users wishing to know more about Team BC can use the main Team BC website while users wishing to follow a certain event or look at past results, can navigate to the Game Site.
We hope that during the Canadian Summer Games 2009, these websites will be a great resource to all of the Team BC members and wish them best of luck.