Canvas is Growing Up

Canvas is Growing Up

Hey, have you ever heard of canvas? No? Well, if you’re paying attention to web trends, you’re about to. Canvas is an HTML tag like any other, but it serves a specific purpose: it is a “drawable region,” basically the code equivalent to a blank painter’s canvas. Developers can use JavaScript to draw colors, shapes, and images to a canvas. In many ways it’s similar to Flash, but unlike Flash, canvas is built into the browser, which means no third-party plugins are needed.

Canvas was first introduced in 2004, but adoption by developers was slow over the first few years of its life: browser support wasn’t great in the beginning and everyone already had the Flash plugin installed, so there was no real reason to move to a new technology. But things have changed. Currently 94% of all browsers worldwide have support for canvas — including mobile browsers (yes, even the iPhone!). Canvas is moving into prime time, and you’re going to start seeing it more and more often. The three industries below are already embracing this new trend.

Gaming

Image Credit: Epic Games

Image Credit: Epic Games

If you played a game on the web 10 years ago, there’s something like a 99.99% chance that game was written in Flash. Today, more and more web-game shops are moving to canvas as their platform of choice.

Many popular game making software packages already have an export-to-canvas option. In fact, Epic Games (developers of the Unreal engine that powers AAA titles like Batman: Arkham Origins) recently announced that their latest Unreal 4 game engine exports directly to canvas. What does that mean? In another year or two, you’ll be playing games as pretty as Borderlands 2 or Mass Effect directly in your browser.

Advertising

Advertisers love their Flash banner ads. And it’s hard to argue with success: animated ads simply work better on average than their static counterparts. Of course, Flash has its downsides: for starters, most mobile phones don’t support Flash, and with mobile accounting for a huge and increasing proportion of pageviews, Flash ads miss a lot of eyeballs.

Enter canvas. It works across the board: desktop, tablet, mobile phone. Google has recently started encouraging the move away from Flash-based advertising by automatically converting ads from Flash to canvas. Soon most animated ads will simply be written in canvas to skip this conversion step.

Mobile

And speaking of mobile, canvas has become a great tool for developing native mobile apps. Not only does canvas work in mobile browsers, but there are lots of tools that convert canvas applications to honest-to-goodness native applications that can be sold in app stores and installed on phones.

Take CocoonJS, for example. Developers can build their game/application/whatever in canvas, in a regular browser window (so it will already run in all modern browsers). Then when they’re ready to take the next step, the developer can simply use CocoonJS to creative true native application versions for iPhone, Android, Kindle Fire and many others.

cocoonjs_cloud

Flash-to-Canvas

If all that isn’t enough to demonstrate that canvas is the medium of the modern web, check this out: even Flash is jumping on board. Flash Professional now has an “export to canvas” option. This allows Flash developers to continue working with a tool they’ve spent years mastering, while still producing canvas applications that run in modern browsers.

Modernizing the Porter Novelli Web Presence – Part One: Overview

Modernizing the Porter Novelli Web Presence – Part One: Overview

We recently had the opportunity to work with our parent company, Porter Novelli, in the modernization of their website.  What do I mean by “modernizing”?  Well, it has multiple meanings in the case of this project.

Porter Novelli Website Screenshots

The old website had quite a few years under it’s belt and no longer properly represented the agency.  While the logo had been updated, the website was very dark with black backgrounds that made it uninviting.  With the new website we took the opposite approach and made the website lighter by using large, high quality photographs and ample use of white space.  This made the new website much more engaging and a pleasure to browse.  The white background worked well with the orange and yellow brand colors which allowed them to pop and gave the website an energetic personality.  We also utilized modern web fonts which increased the legibility of the copy.

The overall messaging needed to be updated as well, so our content team rewrote everything from the ground up to ensure the right message was getting through to our visitors.  The old homepage was primarily focused on company news and it required digging to figure out what services the agency offered to the public.  The focus of the new homepage was not only to feature what Porter Novelli can do, but to also showcase internal news as well.

Porter Novelli is a global agency with a local focus, and their old website didn’t reflect that.  It also focused mostly on corporate information and didn’t let the individual offices have much exposure, so we set out to fix that for the new website.  The old website could be used to locate offices throughout the world and obtain the primary contact information, but that was the extent of it.  With the new design and structure, we built in a way for each office to customize their landing page giving them control over what visitors see and giving them a stake in the final product.  Each office now has the ability to feature their employees, post items to their portfolios, post news and blog articles.  This allows each regional office to have a voice on the main corporate website, removing the need for the regional offices to build and maintain their own individual websites.

And most importantly, we made the new website responsive.  During our competitive analysis we found that a majority of the agency’s competitors didn’t have responsive websites.  This was one way we knew we were surpassing the competition by making the Porter Novelli website accessible from mobile and tablet devices in addition to desktop computers.  The end result was a light, inviting, modern and responsive design that looks great and functions well across devices.

In part two of this series, I’ll be detailing the specifics of our processes during our discovery and planning phases of this project.  It was during discovery phase we found the issues with the current website and determined the goals for the website redesign.  In the interim, check out the new Porter Novelli website.

[voce-related-posts]

SEO is a Team Game: Intro

SEO is a Team Game: Intro

Google’s search ranking algorithm factors in over 200 different things. The exact list is not public but there are a number of generally agreed upon factors. I spent time digging through that list, and others, and it was apparent that the old adage ‘content is king‘ still rings true with search engine rankings. But content isn’t a one man army, nor should it be. Despite the fuzziness that we have around SEO, or rather because of the fuzziness, SEO must be approached with a team effort.

Google SEO

I have taken a large number of commonly agreed upon SEO factors and grouped them by team responsibility. I split up that work into a series of posts that will follow this post. There was some overlap and debate about which team would handle a few items so you may find a few items in a different spot than you would arrange them. Here are the groups I split them into:

In this series:

[voce-related-posts]

5 Tools That Make IE8 Development Suck Less

5 Tools That Make IE8 Development Suck Less

ie-eating-glue

I get excited when I’m given a new website design to build. My mind starts spinning, parsing the various components and figuring out what exciting, cutting edge techniques I can use to make this beautiful design a reality. It’s going to be mobile-first, responsive, clean…

And then the project manager tells me the client wants the site to look great in IE8. And a little part of me dies inside. It was a beautiful dream while it lasted.

Internet Explorer 8 was released in March of 2009, making it 5 years old in human years, 35 years old in dog years, and about 50 years old in technology years. And it wasn’t even a cutting edge browser at the time: both Firefox and Chrome (fresh out of beta) had better JavaScript rendering speed and web standards support before IE8 launched.

When I have to appease IE8, my goal is simple: don’t sacrifice. I’m not willing to build my modern website around old browsers. Instead, I do what I can to make IE8 behave more like a modern browser. The following five tools make that a whole lot easier.

html5shiv

HTML5 introduced a lot of new tags: header, footer, article, aside, and so on. Browsers released prior to the HTML5 spec don’t understand these tags. The html5shiv (or html5shim… the only difference is that one letter) lets the browser know how to handle the tags.

IE8 doesn’t understand HTML5 tags. When it encounters them, it simply removes them, leaving any content within orphaned. That’s the quickest possible way to mess up a nice design. The html5shiv will prevent that from happening. Use it.

Selectivizr

Internet Explorer 8 shipped without support for a lot of pseudo-selectors and pseudo-classes that we take for granted on the modern web. Which of the following rules will work on IE8?

li:nth-child(3n+1) {}
input:checked {}
.thumbnail:hover {}

Out of these three, only the :hover rule will work in IE8. And that’s only if you set a proper DOCTYPE… otherwise, even that one fails.

Selectivizr gets these pseudo-bits working properly in IE8. It does require a JavaScript library (like jQuery, Dojo or MooTools) to work, but most modern websites will already be using one of those anyway.

Respond.js

Media queries are the lifeblood of any modern responsive website. Unfortunately, the term “Responsive Web Design” wasn’t even coined until a full year after IE8 shipped. The result? Internet Explorer doesn’t support the most fundamental tool in the responsive toolkit. This means if you build a site mobile-first as modern practice proscribes, IE8 gets the mobile CSS. And if your client is still using IE8, I can pretty much promise they’re not okay with that. (Of course, my personal opinion is if they’re still using IE8 they must be used to disappointment!)

Respond.js is a polyfill that adds media query support to IE8. This is pretty magic stuff: suddenly, your responsive website works on a 5 year old browser! It relies on JS to detect and trigger CSS switches, and IE8’s JS engine isn’t particularly robust, so the switch isn’t going to be as smooth as it might be in the latest version of Chrome. The good news is, only web geeks like us switch back and forth between breakpoints, so the average user won’t ever notice.

Modernizr

Modernizr runs at page load and adds a bunch of classes to your site’s html tag describing its abilities (or inabilities). You can put together a custom build on Modernizr’s website to test only the features you need, so it can load and run wicked fast. You can also build Modernizr to automatically include html5shiv, which saves you an asset.

When the other tools listed above aren’t quite enough to get the job done, Modernizr helps you clean up the mess by giving you feature-specific classes to code against. Your buttons don’t stand out in IE8 because they lost their drop shadow? Just add a rule like this:

/* Will only apply to browsers that don't support box-shadow */
.no-boxshadow .button {}

Modern.ie

No matter how many plugins and polyfills you throw at your code, eventually you’re going to need to test the site in IE8. And unless you’ve got a 10 year old Packard Bell collecting dust in a corner somewhere, it can be tough to find a copy of IE8 running outside your client’s office.

Enter modern.ie. It’s a website run by Microsoft that offers (among a few other cool things) downloads of Virtual Machines running old copies of Internet Explorer. Just download something to run virtual machines (I use Oracle’s free VirtualBox), a copy of the IE8 virtual machine from modern.ie, and you’ll be up and testing.

What Else?

Do you know of a tool I haven’t mentioned that makes working with IE8 easier? Let me know in the comments.

Boost your Performance (this is not spam)

Boost your Performance (this is not spam)

fry-slow-websiteDon’t worry, I’m not here to tell you about Low T. But it does seem like everything today is about performance. From boosting your car’s performance, eating and drinking better to improve athletic performance and of course that other performance. You know what I’m talking about… wink wink… the performance you either brag to your friends about or the one you hope nobody mentions… how well your website performs.

The rise of the mobile web has placed the spotlight on performance. Your site may have been able to load ‘fast enough’ before when your only users were on a wired cable connection, but how does it look on a crappy hotel wi-fi connection? Or 3G? You already have slower connections working against you, but now you have to work against the growing on-demand mentality as well. Users have a shorter acceptable waiting threshold than before, even more so on mobile devices. 1 extra second can easily cost you millions or even billions of dollars. On top of all of this, page load time is becoming a more important factor in search engine rankings.

The good news is that smart people have realized this trend and have given us some fantastic tools to work with. The most comprehensive two, Google’s PageSpeed and Yahoo’s YSlow, have been around for a while and continue to evolve. They also provide instructions on how to alleviate bottlenecks. Get these into your workflow now!

Google PageSpeed with Chrome
PageSpeed is even included in Google DevTools when you right click and use Inspect Element. It’s another great tool along with the Network, Timeline, Profile and Audit tabs as well. It’s great for telling you what areas need to improve. My favorite part is that it gives you separate mobile and desktop grades. They also just released a handy command line integration that gives you a quick snapshot.

YSlow has a great browser extension that allows you to grade your website’s performance based on a number of factors including http requests, minifying styles and scripts, utilizing cache, and more. Easily find out which elements are weighing down your page.
Yahoo YSlow

Rather than sitting there embarrassed, you need to identify the source of the problem. You could be doing everything right but your partner, let’s say 3rd party javascript, is causing the problem. Diagnosing the source of the slowdown is the key to successfully treating your performance problems. Here’s a list of some other tools that are newer and, in some cases, more specialized to certain areas:

There are plenty of other quality tools out there, with more popping up weekly. With all of these tools at your disposal, performance issues should never weigh you down again.

Design for viewports, not devices

Design for viewports, not devices

Old habits are hard to break. That’s probably why I still use TextMate when there are more robust editors out there like Sublime and Atom. You get comfortable with something you have used so much that you just keep using it, despite knowing that things have changed.

Your responsive web design workflow might be suffering from such a habit. Tell me if this sounds familiar: You’re in design mode for your responsive site and it’s time for deliverables. You present the client with your designs, starting with the Desktop design before showing the iPad view and then the mobile view (probably in an iPhone wrapper). This has been the standard process since iPhones changed the industry and the rest of the competition poured in. But that was a few years ago, and in an industry that is evolving so rapidly, this is already archaic.

responsive-design

If you design for desktop first, the mobile experience usually suffers. Ignoring the mobile experience would be ignoring industry trends.

You shouldn’t be thinking how your site will look on an iPhone, Galaxy, iPad, etc. The device is irrelevant, it’s the viewport (that is, the size of the screen) that matters. Using a tablet breakpoint based on the iPad dimensions has been common practice. But what are the dimensions on an iPad in landscape view? Essentially it’s the common desktop experience. If you design your iPad experience and desktop experience separately, you’re going to have issues.

Instead you should be designing for available space, viewports. For the best chance at a clean, optimized, fast performing site, you need to start with the mobile design. Mobile design, not iPhone design. Sure you can use common phone sizes as a range of what to design for, but it’s important to remember that it is a range. Anywhere from 300-400 pixels for your initial design is a good starting point. Development should be using a fluid grid or percentage-based styles, so your design will flex to fit the viewport.

As a bare minimum, you’ll have a breakpoint for the smallest devices and another at the common tablet width of around 768 pixels. I like having a breakpoint between the two, to modify columns that are getting too wide. This is a prime example of how we don’t design for devices, but available space. Things like sidebar elements commonly get nudged below the main content on smaller devices, and they often end up expanding to fill a space larger than they do even on a desktop viewport. This lack of planning leads to a poor looking design.

modular

Modular design allows for each element to look its best at any and every size viewport.

For the most flexibility, elements should be designed more modularly. Breakpoints are not a ‘one size fits all’ solution. Just because the navigation menu should collapse at a certain point, that doesn’t mean that everything else should only adapt then.

If the designer is not the person doing the front end development, the two need to work together closely on this. Designers shouldn’t be making 12 different comps in order to show how each element responds on different viewports. But overall design decisions also shouldn’t just be left up to the developer. From experience I can tell you that designer and developer expectations are different. This is a great spot for in browser design with the two working together.  More communication before development starts will lead to much less time spent later, and less code bloat from last–second modifications. After all, the main goal is a great user experience, and you can’t have that with poorly planned or executed design.