What are your thoughts on these bills? Sound off in the comments below.

How to Help:
http://bit.ly/y0ZYaq
http://bit.ly/x6Mr1e
http://bit.ly/zWJWfW

Armed with my D90, my kit lens (18-55mm/3.5) and a friend’s borrowed tripod, I drove off to the West Mountain. I will likely try night photography again in the future, but I wanted to give it at go near the beginning of this project.

As always, sound off in the comments, especially if you have any tips for night-time photography. Or, if you have a suggestion for a future weekly theme!

Hamilton, Ontario, as viewed from the top of Highway 403. To the left is McMaster University; to the right, downtown Hamilton; in the air, planes leaving Toronto’s Pearson Airport; in the foreground, Highway 403.

Orion the Hunter over an abandoned sanatorium on the west mountain of Hamilton, Ontario.

An abandoned sanatorium in Hamilton, Ontario. I found the site at night, had to shoot it and am excited to go back in the day and shoot some of the derelict interior.

One of the newer buildings on the Mohawk Campus, the front-facing window features all the colors of the spectrum.

This week’s theme is our nursery. My wife, Jamie, is 5 months pregnant. We are expecting our first child sometime around June 14, 2012 and with your first, comes the task of creating a nursery for your little bundle of joy. We decided a long time ago that we were going to follow a Winnie The Pooh theme, complete with four large murals around the room. The problem was that what is currently the “guest room” is deep red. So, there is some work to be done.

Not one to miss a chance for something crazy, I bought a timer for my Nikon D90, borrowed a friend’s tripod, charged the batteries and set an interval timer of 0:20. The end-goal is to create a stop-motion video of the nursery experience, from start to finish.

Below you will find my photo of the week – a shot of our little Winnie bear – as well as a preview of the stop-motion video that will be completed when our little Gamble is born.

As always, sound off in the comments.

As we began the nursery this week in a “Winnie The Pooh” theme, what better shot for this week than a close-up of our beloved Winnie.

I love photography. I have always loved it and those close to me can attest to the huge smile I get when I’m carrying around a camera at a wedding, at the ball diamond or some random event. I love it enough to try and get better at it: learn new techniques, try new lenses, try different angles, lighting; the possibilities are endless.

This is the first post in a weekly series. Every week I will post at least one photograph – likely a couple – of a random topic from that week. I will be posting them to my blog in the “52 Week Project” category as well as on my profile at 500px, a photography site that I adore – it helps that the founders are from Toronto.

Each week, an image will be uploaded on Wednesday night – no time guarantee, but it will be there Thursday morning, guaranteed.

The start of my 52 Week project; what better place to start than right at home. This is our little furball Winston, the younger of our two cats.

The start of my 52 Week project; what better place to start than right at home. This is Meka, the older of our two cats.

Do you have any ideas for topics as I go through my 52 weeks? Use the comments below as your soapbox.

Keeping your skills up to date is essential for any designer or developer.

“Adapt or die.” That was the tweet sent out by a designer that I respect a great deal. That tweet is the inspiration for this post, because working online – whether you do design, development, networking – means that you have to keep your skills relevant and up-to-date. Without those skills, you no longer become relevant.

Personally, I read a lot. Blogs, online magazines, portfolios; anything I can get my hands on. And not all of them are directly related to my field of web design; a lot are simply tech blogs that keep me up-to-date on the latest news in the technology world. I discovered a number of years ago that my method of choice is an RSS reader and my reader of choice is Netvibes.

Netvibes, my RSS reader.

The current iteration of my RSS reader encompasses over ___ feeds, all divided neatly into eight categories for my daily consumption (News, Tech, Android, Design, Photo Galleries, Green, Offbeat and Sports). That was the selling point of Netvibes for me a couple years ago: instead of a single, cluttered feed, I can divide all of my information into easy-to scan tabs. Some days I don’t click on the “Green” tab, some days I spend entire hours scanning it.The current iteration of my “Public” page gives you some idea as to the power of Netvibes and it’s organizational abilities.

I have the same approach to Twitter: I need to compartmentalize all of my information, or else it all just becomes noise. It amazes me to see people follow more than 500 people on Twitter. It would all become irrelevant to me, because the white noise that many people would produce would shy me away from Twitter. Currently, I follow only 143 people – and yes, I am aware of the drawbacks to only following a select number of people, but the white noise effect would outweigh any potential benefits for me.

The selling point of TweetDeck? Organization.

Enter TweetDeck. Although the new management (Twitter) have recently updated the application and removed the ability to post to LinkedIn, I still find it to be one of the best social network applications out there – sidenote: I have stuck with the old version of TweetDeck, simply because I want to post to LinkedIn. I can organize my followers into specific categories and consume each in a timely manner. Or, if I’m feeling adventurous, I can read everything all at once in the “All Friends” tab. I find myself drawn to this tab more and more, likely because their mobile app displays as a single tab. I can even link my TweetDeck to my bit.ly account and automatically shorten links and track them at the same time.

How do you keep up-to-date? Whether you are a designer, a developer, or anyone who works online, what do you employ to stay relevant? Sound off in the comments.

Marshall McLuhan, who coined "the medium is the message".

With the adoption of mobile devices on a staggering rise, web designers need to adapt their thinking to the new mediums, because Marshall McLuhan’s revolutionary revelation is more important than ever.

Marshall McLuhan’s 1964 book, Understanding Media: The Extensions of Man, coined the phrase “the medium is the message”, setting one of the cornerstones of modern media theory. In it, he argued, users will focus on the content of the medium, rather than the medium itself, rendering them oblivious to the changes – societal, religious, cultural, etc. – that such a medium brings.

It is a well-established fact that mobile devices – smartphones, tablets, other internet-capable devices – are on an exponential rise in terms of adoption numbers. There are now more mobile devices on this planet, than there are humans. This was a fact for over 30 countries back in 2006. That list has since grown to encompass the United States and my home, Canada. The Android Market just celebrated it’s 10 billionth download.

But, this growth is not anything new; this growth has continued unimpeded for the better part of a decade. However, it is how it is applied to web designers that is changing.

The “Medium” and Web Designers; An Experiment

Whenever I start a new project, large or small, my first question to the client is “Who is your target audience?” A project will take on a completely different feel if they are targeting 18-35 years olds versus the 35-60 bracket.

For our little experiment here, let’s say we are building a new website for a local vendor of baked goods. Their target audience is anyone with “disposable income”; to put a number on it, let’s say the target age bracket is 13-60. Five years ago, as a web designer, we would put together a simple design, likely optimized for a 1024px-width screen (990px), make the site SEO-friendly and call it a day. There wasn’t much more to a client project than that.

Nielsen Smartphone Penetration By Age

With the rise of mobile devices and the advent of Responsive Design, not to mention the consumption methods of our fake target audience, web designers are now forced to completely rethink how they approach the design process.

At the forefront of the process should be a consideration of mobile devices: how will a site display on a small-width screen; will users expect additional functionality; how do users search on a mobile device; content hierarchy; advertising space. All of these factors contribute to the mobile experience of a user on our pretend baking site. Each should be considered in turn.

Displaying On A Small Screen
Although new to the game, I am a big proponent of Responsive Design. It allows you to create a single HTML codebase to support devices ranging from a 27″ desktop monitor to a 320px-wide iPhone 3. Say goodbye to mobile-dedicated websites and tablet-exclusive content areas. The biggest advantage? It makes your website “future-proof” by allowing it to display properly on devices you didn’t even plan for.

Additional Functionality
Mobile users expect certain features that don’t apply to web design, and our job as the bakery website designer, is to provide them with the best experience possible. The most obvious inclusion, especially if image galleries are to be included, is swiping. The simplest way I have found thus far, is to include a 3KB library called WipeTouch. This very simple jQuery library allows users on mobile devices to provide an action to a site with the swipe of their finger. Mobile users also expect an easier interface, a simplified design. This could mean larger buttons for links, calls to action and social sharing, or something else entirely, depending on the design our bakery is aiming for.

Searching on Mobile
With mobile search growing at a 400% clip, the inclusion of it into any site is essential. It’s not just essential, it may be the focus of the bakery’s tablet site, especially if they include a blog or daily update. While desktop users seem to be ok with a small search box tucked away into some corner of your site, it seems mobile users expect the opposite. The ability to search a site should be front and center, allowing baked-goods to be found at will.

Google Mobile Search Growth

Content Hierarchy
On our responsive bakery site, we need to still consider if what we want to be front and center, remains front and center. Different devices are used for different things, so our site should scale to meet these needs. At the very least, consideration should be given to how mobile users interact with sites in general and then applying that knowledge to our bakery:

comScore Top Mobile Activities

Advertising Space
With an increase in numbers comes an increase in advertising interest. And when numerous studies confirm that mobile users are more keenly aware of advertising than their desktop counterparts, the mobile ad growth is exponential. What this means for us, designing our bakery site, is that we can’t keep the same location of our ads on the smaller-screen site as we would on the dekstop site. Higher awareness equals higher clicks and in order to maximize that, the ads we place on the site should be near the top of our content hierarchy.

Mobile Outperforms Online Brand Metrics

Conclusion

The inclusion of mobile devices into our world has changed the web design game. As we design, we now need to think about how our content is consumed and present that content in a way that appeals to users in the way we want it to. The “medium” in McLuhan’s infamous theory illustrates that the content is king. If the content is designed and presented properly, people forget entirely what medium they even used to reach it in the first place.

What are your thoughts? Has the mobile medium changed the game? How much has it changed it?

Some images, courtesy heidicohen.com

In the past couple of months, I have taken on a few Responsive Design projects, mostly for my new employer, PostMedia. Over the course of these couple months, I have come to realize a few things; some through my own trial and error and some through a reaction to what someone else has said or done.

This site/blog/portfolio will soon get a facelift, and naturally, I will be making the design responsive. So, as I embark on my own redesign – Worst. Client. EVER. – I decided to write down the things I have learned thus far on my Responsive Design journey. I invite you to add your own at the bottom of this post. The end of 960px widths is here.

1. Not Everyone Understands What “Responsive Design” Is

If you are a designer or a part of the web industry, you have likely come across a responsive site or two. You marvel at how you can take your browser edges, shrink the viewport and watch as the design adapts to your ever-changing window. It’s a novelty, a party trick, equivalent to a scrolling marquee or blinking text.

But, what does it really do? Why spend all this extra time and energy making a site responsive? Just so you can shrink the browser window?

The original definition of “Responsive Web Design” comes from the man who coined the phrase, Ethan Marcotte: “[Responsive Web Design is] a design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s needs.”

While this is a great start to defining what Responsive Design is, I feel it it missing something. And this is the part that people seem to miss. If I was to create a definition for the term and all the connotations that go with it, it would look something like this: “Responsive Web Design is a design that can adapt to the constraints of any browser window, on any device, using the same HTML base code and adapting to both current and future devices.“

The latter part seems to be the part that people miss. Let’s start with “the same HTML base code”. Maintaining a single base code for all devices has huge ramifications across all companies, small and large. It saves a large amount of maintenance, rewrite time, adaptation time, etc. Remember, if you have a “mobile site” currently, any change you make on your “desktop” site needs to be replicated on its mobile counterpart. Responsive Design removes this duplication of effort.

The final part, “adapting to both current and future devices”, is the other key component that is often overlooked. If you are targeting a set number of screen widths – let’s say 1200px, 1024px, 768px and 320px – then your design isn’t “responsive”. It’s just simply adjusting itself to each screen width; you could have done this two years ago with some JavaScript and/or a distinct mobile site. The power of responsive design lies in the percentages, ems and adaptive widths it uses, so that when a device comes out with a resolution you did not plan for – let’s say 540px – your design doesn’t require an entire update just to conform. It will already display nicely on this device without scroll bars or zooming/pinching.

2. EMs are King

I love PXs. I love the ability to create pixel-perfect designs and have complete control over my templates. A misconception of using EMs, instead of PXs, is that this control goes right out the window.

When coded properly – I am using “code” in the HTML/CSS context – your design can be just as pixel-perfect as a site that uses PXs as their base. EMs are a relative unit of measurement, whereas PXs are fixed. For a responsive design, the word “fixed” should be avoided at all costs.

“But EMs are so hard to calculate!” I can hear you saying. It’s actually easier than you think. I hate math, so in my designs and markups, the less math I do, the better. So, instead of math, we can use cheat-sheets. My personal favourite is the one at PXtoEM.com. It allows you to convert both ways, and provides a list of EMs based on what base size you are currently using.

The PxtoEM site is a great cheat-sheet for those looking to use EMs in their markups.

If you insist on doing the math or you have a context not covered by a cheat-sheet, the formula is simple: target ÷ context = result. This formula, borrowed from Ethan Marcotte, is easy to use, once you get the hang of it.

A real-world example: you are trying to style your H1 tags to be 36px high. Since modern browsers (without a reset sheet) have a base font size of 16px, your formula would look like this: 36 (target) / 16 (context) = 2.25em. Tada! A responsive H1 tag.

3. Responsive/Adaptive Images Aren’t Quite Here Yet

One of the current drawbacks to a responsive design is the lack of solutions in place to deal with images. On a desktop browser, downloading a 200KB header file isn’t too bad. However, downloading the same file on a handheld device is problematic for two reasons: the time it takes to load and the bandwidth you are forcing your users to consume.

There are several solutions that currently exist, but each one has its own drawbacks: some require the use of PHP and .htaccess; some require creating two (or more) different sets of all your images, one for desktop, one for mobile; some simply ignore the bandwidth stumbling block and force the images to conform through CSS; some use browser cookies. The thing that unites them all is that none of them are perfect. I expect that in the next year or two, the web design community will have a consensus choice, but alas, that currently does not exist.

The "Adaptive Images" solution uses .htaccess and PHP; ideal for WordPress blogs.

Personally, I prefer the Adaptive Images solution and when this site goes responsive, that is the one I will use. But this is simply because it makes sense for me: I run this site on a WordPress back-end that uses PHP and I have easy access to my .htaccess file. This solution will not work for everyone, so you will need to search around if this criteria does not apply to you.

Like I said: responsive images is currently a problem.

4. The “Mobile First” Mantra Doesn’t Always Apply

Two years ago, Luke Wroblewski posted about the benefits of designing for “mobile first”. In it, he suggested that we as designers should focus on the mobile iteration of our application first and design out from there. I believe this does not apply to most contexts.

Although this is more of a personal design preference, I feel it is easier to design from the outside-in; that is to say it is easier to start with a desktop design and progress from there to the smaller screens. With a desktop design, you have a much larger space to design with and placing all of the necessary elements into a layout is easier. From this design, you can shrink the screen, removing any objects that don’t fall into the “highest priority” category.

I understand that this point has evolved to be “you should consider mobile design at all times” and for Responsive Design, this could not be more true. However, designing a small screen and building out from there seems counter-intuitive.

5. Consider The Mobile Experience

Browsing the web on a mobile device is completely different than browsing on a desktop. This is an obvious truth, but considering what that means is essential to any Responsive Design.

On a tablet, when a user browses a gallery, they expect the ability to “swipe” their images to take them to the next one. The same applies for a handheld device. Although this functionality does not have to be built into the desktop version – when was the last time you tried to swipe your mouse? – including a small script, such as WipeTouch (3KB) can easily create expected behaviours on device elements.

The jQuery Mobile site has demos, showcasing what mobile users expect from their browsing experience.

This “experience” can be extended to other elements as well, not just photo galleries. What these elements are is for you and your client to decide. For further reading and some great Mobile UI examples, I recommend browsing through the jQuery Mobile UI demonstrations. I’d start with the page transitions.

Did I miss something? Do you think I’m way off-base with some of my thoughts? Drop your own thoughts into the comments below.

Header photo courtesy of wasabicube, via flickr.

I am a big proponent of the adage “never stop learning”. In an industry such as web design, it is necessary to stay current with your skills to stay relevant. It is also necessary to stay up to date on the latest trends, gadgets, software, operating systems, etc. When was the last time you heard a web designer say “You know, I just prefer to design on Windows XP.”

Everyone has their ways of staying up to date; my current preferences are RSS feeds (via Netvibes) and Twitter. For those looking to add to their RSS repetoire or add to your follow list, here are some of my favourites. Some are obvious and well-known, others are small, but very useful. I have provided descriptions of each and why they float to the top of the perverbial pot.

RSS Feeds

I will avoid describing some of the larger, obvious ones and focus on the smaller, relatively unknown blogs/sites. But, just as a point of reference, the “obvious ones”: Gizmodo, Lifehacker, Engadget and Ars Technica, Smashing Magazine, TechCrunch, Mashable, Wired, xkcd and The Oatmeal.

TorrentFreak

TorrentFreak.com

AndroidPolice

Android Police

Android in Canada

Android in Canada

Just Creative Design

Just Creative Design

Folio Focus

Folio Focus

Web Designer Depot

Web Designer Depot

Strobist

Strobist

500px

500px

Twitter

If you feel like trolling through, my complete list of people I am following can be found here. The following is a small selection of good Tweeple (hate that word) that deserve a mention for making my daily check of Twitter a good one. Each description is pulled from their own page.

@richramos78: I’m a Web Designer, techie g33k, Apple Fanboy, Leafs/Jays/Raptors/TFC fan, fantasy sports junkie, plus more that I can’t fit in 160chars. Oh & I like fast cars.

@mashable: The largest independent news source covering web culture, social media and tech. Updates from @mashable staff. Tweet @mashablehq for questions and comments.

@mashable: The largest independent news source covering web culture, social media and tech. Updates from @mashable staff. Tweet @mashablehq for questions and comments.

@LindseyJay: What you’ll hear from me: Stuff about Graphic Design, random observations about life and being a single Mom to my 2 boys. For hire! www.lindseyjacobs.com

@autoblot: I live in Hamilton, ON and I like the internets, my dog, theatre and movies.

@kitestring: Imaginitarian + Partner at kitestring.ca. I tweet about branding, design, the fun times at our studio, candy and food. Visit our site to find out more!

@clientsfh: A collection of anonymously contributed client horror stories from designers.

@hear_it_here: Music. Geography. Science. News. Humour. Politics. Hockey. Occasional Swearer. Picture Taker. Guitar Player. Word Writer. Not a Douche. Sometimes Y.

@piratepartyca: A political party devoted to reforming Canadian information laws to meet the needs of the new century.

@randymatheson: Nova Scotia raised Creative Guy & Director of Emerging Media Platforms at @delvinia in Toronto. Co-founder of TwestofTO.org & Madtini.com – cheers y’all!

@mgeist: Dr. Michael Geist is the Canada Research Chair of Internet and E-commerce Law at the University of Ottawa.

@abduzeedo: Founder of Abduzeedo currently working as Senior Designer at Google.

I find these blogs, sites and Twitter invaluable. I know everyone has their own preferences and some will likely scoff at the idea of putting out a “link list” – believe me, I debating writing this article – but I hope this list will encourage you to add some valuable assets to your knowledge base.

Did I miss a few? Are there people I should be following on Twitter? Drop ‘em in the comments.

Joining this team has been a very nice chance of pace for me: I am closer to home – goodbye QEW commute, hello lunch-hours at home! – than I’ve ever been; I am part of a much smaller, more agile team; and I’m being asked to push my self-imposed boundaries of design to try and create things that either fulfill a potential business need or showcase what new technologies can offer our company. It’s pretty cool being asked to work on a lot of beta-version languages, frameworks and cutting-edge design, but it’s also frustrating at times, because there is usually no one to turn to and say “hey, how does this work” or any documentation to pore over and find an answer. I know a few people that can attest to the latter.

Lack of documentation aside, it’s fun. I get to do things like create this wallpaper, comprised of our team members, for our new Smart Board. It’s great to be a part of a team that says “ok, make something different” (forgive the obvious Apple reference) instead of “do this”. With that fun in mind, here are some of the things we have or are currently working on.

Timbits and A Reimagined Edmonton Journal Homepage

After people smarter than me built Timbits, a widget framework for Node.js, and after I put together some story page designs, I was tasked with putting together a reimagined Edmonton Journal homepage, using the widgets and framework that had been built. The live reimagined homepage can be seen on heroku, with a screenshot below.

The homepage of the re-imagined Edmonton Journal. The emphasis on whitespace was essential to creating a very readable template for a potential user. The layout also pushes the main focus to the top story, by including all related images in a large image slider.

Project Agora, A canada.com Facebook App

Agora – meaning “the gathering place” – is initially a canada.com branded Facebook App. Available currently as a beta, the Agora Project includes the ability to share stories with friends, post what you are reading to your stream and see what your friends have shared and read, all from within the app. Built on the Timbits framework by Steve Veerman and his tireless work, the spacing and layout mimic the Edmonton Journal homepage, albeit on a smaller canvas (760px wide, to be exact).

The Agora Project Facebook App landing page. The whitespace and layout make for easily readability and scanning for users.

The Agora Project Facebook App story page. The emphasis is clearly on the story's headline image(s), with the font selection and line-height allowing for easy reading.

Proteus, A Photo Showcase

Started as an idea from Andrew Spearin, the Proteus site will showcase the amazing photographs that are taken by Postmedia photographers on a daily basis. Designed as a standalone site from the traditional Postmedia templates, the site is meant to provide a focus on the photos themselves, not necessarily the accompanying stories – although the stories do play a part. Currently (as I write this) in it’s mockup stages, the site will be a Responsive Designed site – of which, I have lauded before – and will transition seamlessly from desktop, to a tablet, to a smartphone device. The images below, with their non-traditional navigation menu, represent the latest mockups.

The Proteus landing page, desktop version.

The Proteus gallery page, desktop version.

The Proteus individual photo page, desktop version.

The Proteus photo page, tablet version.

The Proteus gallery page, smartphone version.

That’s what I’m working on lately. Have some comments, questions, concerns about our Greek mythology project name choices? Drop ‘em below.