We are …

Impulse Studios began as a passion for art and design, and evolved into a rapidly growing new-age multimedia firm that has set out to re-imagine the web’s potential. We are a small startup firm looking for true talent to help us grow and succeed. We specialize in cutting edge web design, e-commerce solutions, social marketing, blogs, and custom applications. We are a young and energetic company looking to make real change on the web.

You are …

You’re an entry level or experienced developer with front end knowledge with a passion for the web. A visionary who uses the end user experience as the drive behind all your projects. You love the idea of being part of a startup web studio where you can help shape the future of the company and work within a small but exciting group. You can wield an energy sword like nobody’s business (or at least you think you can).

If this sounds like you and you’ve got most/all of the requirements below we want to hear from you.

What you’ll be doing

• Developing small and large scale web projects primarily using PHP/MySQL
• Contributing to our in house content management system
• Developing for open source platforms
• Working with the team to solve problem and create unique solutions.
• Working with current clients to improve existing sites.
• Delivering applications via a Linux web server environment.

What We’re Looking For

• Of course you need strong communication and organizational skills
• Problem solving skills
• An eye for detail
• xHTML, CSS experience
• Ability to enhance web applications with javascript and AJAX
• PHP/MySQL experience (some code samples would be nice)
• Strong portfolio of interface/concept presentation and styling
• If you know CodeIgniter and/or jQuery it wouldn’t hurt
• A constant desire to learn and evolve

Education/Experience

• Minimum 2 Year College Diploma in a web/multimedia related field

We need more than just a web developer – we need an enthusiastic colleague with entrepreneurial spirit, capable of conceiving and implementing beautiful user interfaces. You’ll become a key member of a small, young, fast-growing company.

We are flexible with details, depending on the candidate this job will start off on part-time/freelance/contract  term, leading to full time work as you prove yourself and the studio grows.

Send in some samples of your best work along with your resume and anything else that you feel would help you be considered for an interview to careers@impulsestudios.ca Only those who qualify for an interview will be contacted

With the release of jQuery 1.4 and the new jQuery API documentation I needed a new cheet sheet as well. The one I’ve been using dates back to jQuery 1.2, obviously a lot has changed since then.

This cheet sheet attempts to better align with the new documentation structure jQuery is now using and clearly marks all new and updated functions for jQuery 1.4

Download

First off, please do not link to the file directly, or put the file on your own server. If you would like to distribute the cheat sheet please link to this post.

Download the PDF

With this much content on one page I am bound to have made a mistake or two. If you see any errors please drop me a comment and I will try to get it fixed up as soon as possible.

Early in December we finally made the commitment to overhaul our development process. We had already started using a framework for development. It was now time to take a look at some new software and implement a subversion server. The goal of this was simple; to more effectively manage websites at Impulse Studios.

The move is quite overdue as version control significantly cuts down on mistakes and downtime, not to mention we can find out who to blame when something does go wrong (or maybe that should be give credit where credit is due). The most important feature for us is how easy version control makes it for us to implement new features into existing websites.

That sounds really fancy but what does it all mean?

Well if you’re a client, it means downtime for maintenance will be shorter, fewer mistakes are made, and development time is shortened. It means that if something is implemented and its not working out or its causing a bug, it can be immediately reverted to the previous working version with little hassle. In short means the management of your website (from our end) will be greatly improved.

If you are a fellow designer or developer I am sure you have heard someone say, “You really need to implement version control” and you may or may not have understood exactly what he or she were trying to convince you to do. The flexibility Subversion gives you over your code is unbelievable. Until I started to really dive into what Subversion could do I was not entirely sold on its necessity. For me the moment I decided we needed to implement subversion came with the power of the merge features, it was really the tipping point.

One article I found that does a particularly good job of explaining the theory behind what subversion is, and how it can make your life better is A Visual Guide to Version Control I highly recommend giving it a brief once over.

Subversion sounds great, workflow please!

This was a tricky one, deciding how subversion would fit into our workflow. Running an exclusively Mac environment we needed a Mac solution to integrating Subversion. Rick Curran’s article Five Subversion Clients for Mac OSX was very helpful in helping to make the decision. (normally I don’t condone lists but this isn’t a list, it’s 5 reviews in 1)

I have been “done with Dreamweaver” for a while now, playing with Coda, forgetting about it, ending up back in Dreamweaver. The subversion capabilities of Dreamweaver CS4 still need some work, and if you are on anything less than CS4 you have no subversion support. Dreamweaver also lacks and easy way to customize code hinting and colouring.

Coda seemed like the natural choice, it is a stripped down piece of software (compared to Dreamweaver) with some nice extras, and subversion support. So far Coda has worked in very nicely. CodeIgniter and jQuery Clip libraries have been quickly coming together (we might release those in a few months when they are actually worth releasing). The other nice thing about Coda is the ability to add modes which expand code colouring and hinting.

Modes we recommend:

• jQuery Syntax Mode from Digital Sandbox
• CodeIgniter Mode by nextgengames

If you don’t use jQuery or CodeIgniter, or want hinting for something else try this list of modes.

We have also been playing with Versions to help manage subversion repositories, features like the timeline, history, restore etc. make it an extremely powerful subversion client. I can’t say too much more about it as I haven’t used it enough. Needless to say I will likely be purchasing it during their 20% sale ending January 2nd.

In conclusion

This has been quite a lengthy post (I feel like I need to make up for the lack of posts recently) so lets wrap it up. So far switching to subversion has been a great experience (aside from the sleepless nights getting it set up). I do also need to say one thank you to Brendan Farr-Gaynor from ResIM his help saved me a lot of time getting subversion running.

Finally I would love to hear how you are integrating subversion into your workflow, or how your experiences have been so far. What software you are using with it etc. Alternatively if you haven’t used subversion and are thinking about it lets hear from you too.

Now because you’re going to need some tunes to get you through setting up your Subversion server. In the Christmas spirit (and in the spirit of getting some conversation going) we’ll giveaway a $25 iTunes gift cards to commenters if we get 25 (relevant) comments, and 2 $25 gift cards if we get 50 (relevant) comments.

Alternatively if you want to tweet this (or both) we’ll put you in the draw too:

Check out @ImpulseStudios + #Subversion + #Coda = Love by @colethorsen to win an iTunes gift card. http://bit.ly/6kZ4O9 #SVN

Click Here if you’re lazy and want us to do it for you.

Impulse Studios recently moved into our new office. We think its a bit more of an inspired space so we figured what better way to christen the place than by releasing a texture pack of various materials used in the office. We couldn’t release pictures yet because we are sorely lacking furniture, and paint. Once we are done with the transformation we will release some shots of the new office, but hey textures are good for now, right?

These textures are free to use for both personal and commercial projects, if you use them and have a chance to send us a link in the comments we would appreciate it. If you like these textures you’ll want to check out our architectural texture pack from the beautiful city of Montreal.

Download all 14 Textures

I’m sure many of you have noticed the steadily climbing percentages in your Analytics for iPhone, HTC and various other mobile browsers. When re-designing or making minor modifications to usability on a site it is important to be cognizant of your users. After all we might have just built (what we think is) the greatest design element ever, however if it’s not going to work for our users we might as well not have it.

Obviously mobile browsing (for the most part) is not a primary traffic driver for a website. Most of the time we are looking at a few percent at most, which in a lot of cases means it is not practical to design a full mobile version of a website. The modern mobile browser makes it quite easy to view full websites. So unlike 3-4 years ago when a mobile version was required if you wanted mobile traffic that’s not necessarily the case today.

There are however a few things that are common place on the web which are not so mobile friendly. Thinking about these during the design process can greatly increase the usability of your website on a mobile platform without increasing the budget.

Hover

On touch capable browsers such as the iPhone there is no hover state. There is simply no option for this, either the finger is down (click) or its not. The iPhone does have touchstart and touchend (“User Experience” 66) which can help to take over some hover events such as image swaps, but what happens when it comes to more interactive features?

Many websites employ hover activated fly-out menus. The use of such menus on their own can be usability disasters if not implemented correctly, but lets think about mobile users for a second. Often the primary level of a fly-out menu has a link on it that links to a safety page for those without javascript enabled so they can still see the navigation structure for the site. This does save mobile devices as well, but its not very usable. A great deal of modern mobile browsers support javascript so we can still make use of it to increase usability.

Why not invoke the sub menu on both hover and click? Less savvy web users are likely to click the link anyways not realizing it will fly out on hover. Having it appear on click and disappear on a second click can greatly enhance usability overall not just on the mobile device.

Flash

Flash is an unparalleled medium for delivering rich user experiences to web users. It has a 99% user penetration (adobe). However this is certainly not the case in the mobile world. Few mobile devices have Flash support and even fewer have native Flash support. Flash files are also generally large and take time to load over 3G and Edge networks.

There are many fantastic and proper uses of Flash on the web, however there are equally as many (if not more) poor uses. Before building a Flash element for a site consider whether or not it really needs to be Flash. Will it just be a rotator with images fading in and out? We can accomplish the same effect most of the time with a lighter footprint using javascript, and better yet it will work on more mobile devices, than if you built it in Flash.

Forms

No matter how efficient I get at typing with my thumbs it will never compare to a keyboard for speed. As a general rule with forms, the less information you ask me for, the higher the probability you will get me to complete it. This is even worse on a mobile device. It should be a standard with all forms. Go through and make sure you are collecting only what you absolutely need, and then check it again. If its setting up an account get some basic information and then prompt the user to complete their profile at a later point.

Live feedback will also increase your usability. A greater percentage of users will successfully complete a form that uses live validation (Wroblewski). Keep in mind while using a mobile device it takes that much longer for your page to reload. If the user has to wait until after the information is submitted for feedback it will be that much more difficult to complete. Luke Wroblewski has recently written an article on live feedback in forms.

Many of these ideas are common usability concepts that not only will make websites more usable for mobile but also make it more usable for traditional users. Ideally we would be building mobile versions of all our sites, however it is not always practical or in the budget. In its place we can make our websites more usable on mobile platforms.

References

“Flash Player Version Penetration”. Adobe Systems Incorporated. 10 Sept. 2009 <http://www.adobe.com/products/player_census/flashplayer/version_penetration.html>.

“User Experience”.  Safari Web Content Guide. Apple Inc. 10 Sept. 2009 <http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf>.

Wroblewski, Luke. “Inline Validation in Web Forms”. A List Apart. 5 Sept. 2009 <http://www.alistapart.com/articles/inline-validation-in-web-forms/>.

Content that scrolls with the browser window is not a new concept. We all know how to position things relative to the browser window with position: fixed; However what if we only wanted it to stick the browser window conditionally? Most of the time I see this in practice, the developer has used Javascript to reposition the container absolutely so it always appears within the constraints of the users current window position. The problem with this method is that it causes the stickied content to jitter as it slides down (or up) the page. This can be extremely irritating to the end user. Let’s see an example of the incorrect method.

In order to smooth, rather than re-positioning this sticky content every time the user scrolls, we can change the positioning type from relative or absolute to fixed. This will fix the content to the browser window and allow it to scroll smoothly. Essentially what we are doing is changing the CSS once whenever the user scrolls far enough down the page to need the desired effect rather than changing the CSS every time the user scrolls. Let’s see an example of the proper method.

Here’s how to do it.

First the CSS: position the sticky content to its original location

#sticky {
    position: relative;
    height: 600px;
    width: 300px;
}

Building the Javascript.

I am using jQuery to make it faster and easier to build, since we include jQuery on pretty much everything we build. Doing it this way will make a lighter footprint than building it in straight javascript. Therefore we will need to invoke jQuery - we tend to use Google AJAX Libraries for this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

First set the parameters for the sticky: We need to know how high the sticky will be; if it is higher than the user’s browser window then we cannot scroll it because they would never see the bottom content. Next we need to know if there is any padding necessary at the top and bottom of the element when it is stickied. Finally we need our offset from the top and the height of any footer elements that we do not want to cover up.

var $stickyHeight = 600;
var $padding = 10;
var $topOffset = 200;
var $footerHeight = 83;

Now lets set up a framework for the rest of the javascript. We will build a function to handle the lifting and then invoke it using jQuery’s $(window).scroll() function

function scrollSticky(){

}

$(window).scroll(function(){
    scrollSticky()
});

Now we need to set up the conditional logic to determine which of the three states the sticky should be in (bottom position, sticky or top position). This is all wrapped in a conditional statement to test to see if the users browser window is tall enough to support the sticky.

function scrollSticky(){
    if($(window).height() >= $stickyHeight) {

        if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {

        }else if($(window).scrollTop() + $padding > $topOffset) {

        }else{

        }
    }
}

Finally we are ready to manipulate the CSS of the document so the sticky is positioned correctly for each of the 3 states.

function scrollSticky(){
    if($(window).height() >= $stickyHeight) {
        var aOffset = $('#sticky').offset();

        if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
            var $top = $(document).height() - $stickyHeight - $footerHeight - $padding;
            $('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');

        }else if($(window).scrollTop() + $padding > $topOffset) {
            $('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');

        }else{
            $('#sticky').attr('style', 'position:relative;');
        }
    }
}

Lets see it all together.

<script>

var $stickyHeight = 600;
var $padding = 10;
var $topOffset = 200;
var $footerHeight = 83;

function scrollSticky(){
    if($(window).height() >= $stickyHeight) {
        var aOffset = $('#sticky').offset();

        if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
            var $top = $(document).height() - $stickyHeight - $footerHeight - $padding;
            $('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');

        }else if($(window).scrollTop() + $padding > $topOffset) {
            $('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');

        }else{
            $('#sticky').attr('style', 'position:relative;');
        }
    }
}

$(window).scroll(function(){
    scrollSticky()
});
</script>

We at Impulse Studios are proud to announce the latest addition to our family of clients: Belle Air Music. They came to us in need of a fresh new image for Belle Air’s website and we are already hard at work to deliver just that.

Belle Air Music strives to serve musicians of all kinds - from beginners to professionals, with instruments from all avenues of sound. Since the first location opened in 1969, Belle Air Music has grown to serve customers from four different locations across London and Windsor. Their main branch in the heart of London is also home to their counterpart, The London Guitar Shop. In addition to selling instruments and sheet music, they are also an active member of the music community in London by offering workshops, recitals and many other services.

Recently we were in Montreal and took the opportunity to snap some nice textures from the contemporary and historic architecture that we were surrounded with during our visit.

These textures are free to use for both personal and commercial projects, if you use them and have a chance to send us a link we would appreciate it. (We were a bit inspired and would like to see how they inspire others)

Download all 22 Textures

alternatively you can view and download them one at a time:

The client—designer relationship is what keeps designers designing. Without clients to work for, we would not be able to continue doing what we do. However, sometimes it can be a difficult relationship to maintain. The problem put simply, is that clients have opinions and designers are stubborn.

The problem put simply, is that clients have opinions and designers are stubborn.

Often designers and design companies merely go about implementing client whims and desires, angrily grumbling about what a ridiculous request it is whilst they complete the task. Much of the time client requests are not fully thought out or their consequences are not fully understood. This is by no means the client’s fault. Your client is not a design expert; this is why they have hired a designer. Clients often know that something needs to be changed, but not how to change it to yield the best result, or what other implications that change might have.

Designers have a wealth of knowledge that needs to be shared with clients.

Designers have a wealth of knowledge that needs to be shared with clients. A designer’s job should not just be to complete tasks passed along a one-way street of communication where the clients’ requests are handed down like the word of god. A designer’s job is also to consult.
For example, generally, front-end designers should also be experts in usability. If a client wants to create a new page without considering how drastically different the functionality is from the rest of the site, ultimately it is the users that will suffer. If a design change poses a usability issue or the bigger picture is not being taken into account, it is the designer’s job to return to the client with these issues and alternative solutions to address client concerns while maintaining the integrity of the entire project.

…there is much more a designer can do for a client than just design…

Some clients of course see designers as employees who work for them, bringing their ideas to fruition rather than partners who work with them in the best interest of the project. Showing these clients there is much more a designer can do for them than just design is the first step in creating a better working relationship.

Ultimately what makes clients happy is the bottom line. If more customers are coming through their doors, or more people are viewing their website because of your tweaks and recommendations, the client will generally be much happier than if it was completed to their original expectations. If we turn communication into a two-way street the potential for success is much higher. Clients are experts in their field, but designers are experts in communicating the message; working together will build a happier, healthier relationship over time.

Websites, like anything else begin to show their age after a while. Changes in how the industry builds websites, the technologies available, and the way users interact with websites cause website re-designs to be a necessity.

When I begin discussing a re-design with a client, there are a couple of concerns that come forward with most of them. What if people do not recognize my new site? The people I talk to love the site; why does it need to be changed? A good re-design should take care of all of these concerns and it is important for clients to understand this immediately when considering a re-design.

existing branding

When going through the initial thought process for re-designing a website it is important to consider the lifetime of branding and identity the company has worked so hard to establish. This is where we can alleviate a significant portion of client concerns. Maintaining the branding as well as some elements or “feel” from the previous website will put users (and clients) at ease. Obviously we want visitors and clients to notice the significant changes made, but we also want them to feel like they are in the same place. On the web, we have no sense of location. Simple typos can rocket-jump the user across the internet and into the unknown. We need to make sure visitors know they are in the same place; it is just different now.

case study

Take for instance the re-design of TSN.ca:

Before:	After:

I do not want to comment on the design here but rather the esthetics of the re-design. TSN succeeds here, although the website has a new look. It boasts different navigation and a significant shift in the use of the colour pallet, but it remains recognizable. The overall colour scheme has been maintained, however the colours have shifted away from the high concentration of red. The logo remains, and we still see remnants of the “line” vector art branding throughout the site. Everything looks very different, but as users we understand that it is still TSN.

existing usability

Nostalgia is something else we need to carefully consider when re-designing a site. With some re-designs, there are a significant number of users who like the site the way it is. Backlash like this has been seen a number of times with social networking site Facebook. Large numbers of users have lashed out against design changes and threatened to stop using the service. When completing a re-design it is important to understand how users currently interact with the site, what is working and what is not. From here we can make our usability changes. We need to balance the need for new features with users understanding of how existing features work. Sometimes it can be useful to observe users interacting with an existing site before re-designing it to better understand how it works. Applications like Website Optimizer can also help test parts of a re-design to see which options yield the desired result most effectively.

beyond the traditional computer

Even though users have expectations regarding the manner in which they interact with a website, the ways users are interacting with websites are increasingly changing. If the website to be re-designed is experiencing a significant amount of mobile traffic, implementing a mobile-specific site as part of the re-design can be beneficial. Other things to consider include designing for televisions and game console browsers, which are beginning to trend upwards as users start to use them to browse the internet.

search engine optimization

Of course, there are a couple of housekeeping issues that also need to be taken care of with a re-design. Our goal should be to increase traffic - not stifle it. With this in mind, we need to make sure we keep search engines happy. If the URL structure of the website changes at all, make sure to include 301 redirects from the old pages to the new ones. This will not only direct search engines to the correct place, but users with old bookmarks as well. Site maps with search engines also need to be updated to ensure they can find and catalogue your new content as expediently as possible.

When completing a re-design, re-inventing the wheel is often not necessary. Of course the visual esthetic of the website needs to be upgraded, but we must also consider the existing users and the manner in which they use the website. We need to account for technology upgrades and changes in user habits. The goal is to create a successful re-design, however moving into the future without studying the website’s past increases the risk for downfall.