Devit!

Today the rTraction team is wearing blue beanies (or toques as we call them here in Canada) to raise awareness about web standards.

Why are we wearing toques inside and sharing the pictures with the world – risking overheating, ridicule and Gavin’s hathead?

In an industry that thrives on creativity and thinking “outside the box”, why are we so excited about defining the box?

Because we love to make cool stuff.

The web is an ecology of people, communities, ideas, websites and applications. Standards are common language that connects each denizen making the system stronger, richer and able to evolve.

To a user, open web standards make our systems ‘just work’. To a web developer they free us from the limitations of the technology and let us focus on all the cool things we can do with it.

Open web standards make our websites and applications intuitive. They make sure that our cool stuff can reach the most people as quickly and easily as possible no matter their platform, location or browser.

They lower the barrier of entry, enabling more people to create content, inspiration and innovation.

We’ve all experienced what happens without familiar standards. Stuck on channel 3, the radio playing loudly, Desperate Housewives recording over family videos, the clock flashes 12:00…12:00….12:00….

The less time we spend worrying about compatibility, accessibility and extensibility, the more time we can spend making web apps that are leaner, meaner and cooler.

So today, we wear our beanies with pride and support the standards that let us and all developers and designers fill the web with cool stuff.

Join the movement!

Facebook: http://www.facebook.com/dwws

Twitter: http://twitter.com/BlueBeanieDay or search #bbd09

Flickr: http://www.flickr.com/groups/bluebeanieday2009

YouTube: http://www.youtube.com/watch?v=v4G2hgioLFk

Learn more about Web Standards

http://www.opera.com/company/education/curriculum/

http://webstandardsgroup.org/resources/

http://www.webstandards.org/learn/

Drupal and Wordpress are two essential tools in any web developer’s backpack. Both open source content management systems allow the developer to rapidly design and build fully functional websites, however each has its own benefits for you and your client. Here are six questions to consider when deciding which one to use for a project.

Read the rest of this entry »

In the past month Twitter has released or announced  a variety of new features that are especially interesting and useful for businesses.

Commercial Accounts

Biz Stone, one of the Twitter founders, was recently interviewed by the BBC. He alluded that Twitter will be releasing a commercial accounts feature; purchased accounts that will give businesses further analytic and tracking features.

Lists

Twitter lists allow users to create a group of accounts. There are no restrictions and any two accounts can be placed on the same list.  Having your account listed will expand your business presence to a wider audience but since they are user generated, you want to foster relationships to be included on lists.

Retweets

Retweeting was used by Twitterers before it became a supported feature. It is a great way for your messages to reach an wider audience, and now that it is built right into Twitter it will see even wider adoption. There has been a bit of backlash to this feature but Evan Williams, another of the Twitter founders, explains “Why the Retweet works the way it does”.

Geo Tagging

Geo-tagging adds geographic information to tweets so now you can narrow your audience to a location. This allows businesses to easily connect with local users and turn online marketing efforts into real world sales.

The full potential of these additional features is being worked out right now. Any business that wants to take full advantage of them will need to embrace Twitter as a means of communication and marketing tool now.

Need Some Help?

If you are interested in learning more about Twitter and how to better use it to grow your business, be sure to check out our Twitter training courses: http://rtractiontwitter.eventbrite.com/

In the early days of internet (the Web 1.0 era) it was critical to secure a domain name for your company, if for no other reason than to prevent domain name squatting.

The same sense of urgency now exists with social media.

While it is important to understand that you don’t need to participate in every new channel and tool, you should at least secure a consistent username on as many services as you can.

I recommend services like User Name Check to quickly and easily scan through numerous social networking sites.

Even if you don’t plan on engaging on any of these sites right away, you won’t face the frustration of unavailable usernames when you do start. Additional you will be defending your name/brand by preventing imitators and fakers.

We recently had the opportunity to put a cool visual technique to use: Parallax. According to Wikipedia, Parallax scrolling is a “pseudo-3D technique, [where] background images move by the ‘camera’ slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion” [Parallax Scrolling on Wikipedia].

To see the effect in action, check out 1000 Acts of Kindness.

jQuery and the plugin ScrollTo were both used, along with several transparent PNG layers. By making “close” layers scroll faster than “far away” ones, a 3D feel was introduced to the page.

How it Works

For each layer we have a <div class=”layer”> element that has the following CSS properties:

.layer {

 height: 100%;

 width: 100%;

 overflow: hidden;

 position: absolute;

 top: 0;

}

.layer div {

 width: 10000px;

}

Each layer element has a <div> inside of it that has a transparent PNG background image, a forced height (the height of the image), and a really big width (as shown in the snippet above).

If we didn’t have the “overflow: hidden” on the containers, you would see scrollbars on the bottom of the page. Using this CSS property we hide the scrollbars, and later we will use the jQuery plugin ScrollTo to automatically scroll each layer.

For each layer I assign four distances, one for each “slide”. Closer layers have more difference between each distance, and far away layers only move a little. The following table shows the distances for each layer.

Layer
1st slide
2nd slide
3rd Slide
4th Slide




#clouds4
20
100
200
300


#clouds3
20
150
300
450


#clouds2
20
200
400
600


#clouds1
20
250
500
750


#fartrees
20
300
600
900


#neartrees
20
800
1600
2400

When the time comes (the user clicks on the “next slide” arrow), each layer is scrolled:

$("#clouds4").scrollTo(x, 500);

“x” is the distance determined by the table above, depending on what slide we are going to. The second parameter is how many milliseconds the animation will take.

Warning

Internet Explorer (even IE8!) renders transparent PNG’s differently than other browsers, and therefore the animation is a little choppy. To overcome this, I removed all overlapping layers in IE using conditional tags. That means that IE users won’t get the full effect, but the site is still usable, and there is still some parallax animation happening. For IE6 (yes, we still make sure our sites work in that dusty old thing) I replace the transparent PNG images with transparent GIFs.

For more information and a full tutorial on parallax scrolling, check out Anthony Comben’s post Create a Funky Parallax Background Effect Using jQuery on ThemeForest.

If you have any parallax scrolling projects, we’d love to check them out! Let us know in the comments.

Building on our experiences over the years we’ve developed a list of key tasks required to complete prior to developers writing a single line of code. We hope these tips will save you some time on your next project.

1. Review everything

When it comes to any project its important to review all the material that your sales team and project manager are handing you.  Make sure you take the time to sit in a quiet area and read through all of the material making notes as you go.

2. Ask Questions

Following up on the first task its very important to ask lots of questions.  Even if the answers to every question is a simple yes, never underestimate the importance of asking questions and clarifying your understanding of functionality.

3. Review proposed technology

Anytime someone makes a decision to use a specific technology to solve a problem its always useful to review the technology proposed and ensure there are no missed opportunities.  More often then not the person who is recommended the technology is doing so on tried and true past project successes.  This however does not mean that new cutting edge technology wouldn’t be a better fit.

4. Talk with your development team

Even if you deployed every piece of functionality on previous projects it’s important to talk through what your going to be doing at a high level with your development team.  It’s especially important to discuss functionality you’ve never deployed such as a twitter feed or other new technology solutions. Someone more often then not has a good idea to save you time, or recently solved a very time consuming problem with one of the technologies you’ll be deploying.

5. Plan your attack

Take the time to sit in a quiet area, think about how you’ll be developing this solution and then write it down!  We can’t stress this enough as to how important it is to document what will be done first, second and so on.  On top of that it’s important to have this information available to your project manager, after all he’s going to want reassurance you can hit and deliver on the clients time lines.  Try using a gantt chart to create your plan as this is a simple yet effective way to dip your toes into this process.

6. Review your plan

Remember that even if you’ve spent two hours or six hours planning out what you’ll be developing first and second and what you’ll be developing last it’s important to review this with the project manager.  They’ll be able to provide necessary feedback on concerns about client expectations and potentially bottlenecks you may not have considered.

7. Comp out functionality

At this point you should already have a design for your application however this design won’t illustrate every piece of functionality, and it’s not important to illustrate how a simple page will look before you get started.  Any functionality that isn’t 100% cut and dry should be laid out.  You can do this by hand, with many free layout tools or simply work with a designer to create rough composites that you can show to the client for sign-off.

8. Review everything with a team member

Take the time to review your plan and comps with another developer.  It’s always easier to have a mistake or suggestion pointed out to you know before your 50% down the project.  Have the other developer review your plan, your comps and talk him through everything so he understands what’s going to be developed without reading all of the information for the entire project.

9. Use pseudocode

Unless you’re the only developer in the world that doesn’t make mistakes or logic errors then this step is essentially for success.  Layout your functionality in pseudocode being as detailed as possible.  Overtime you’ll learn where details need to be very specific and where they can be a little less detailed.  This process will help you stop logic problems within your code every single time.

10. Start coding!

By putting some planning upfront you’ve just saved yourself lots pain and suffering moving forward.

Good luck – we hope this will save you some time and ensure things move smoothly for you on your next development project. Please share any tips you have for improving the development process in the comments.

Over the course of 3 hours we will dive into the intricacies and benefits of using Twitter, both personally and for your business. As one of the fastest growing social networks, Twitter is a great way to engage with potential (and existing)clients and customers. It has also been used to effectively market products and services.

In this course we will look at some of the many applications available to maximize your investment of time on Twitter. We will also explore the analytical tools that help you to measure the benefits. Even better, we will discuss ideas and examples specific to each attendee. Get some tactics you can use right away for your business!

Read the rest of this entry »

You might already be using social networks to keep in touch with your friends and families, but how can you make use of them for your business? Social networks have become a powerful, inexpensive resource for businesses to promote themselves and engage with clients. This course will look at a number of different social networks like Facebook and LinkedIn, and how they relate to a business.

Key Takeaways

1. How social networks are useful for business and why your company needs more than a webpage
2. How to make effective use of Facebook as a promotional tool
3. Understanding how to access free statistics and reporting tools and apply them accurately

This course is offered on December 15th and is limited to 10 participants. Cost includes a personal follow up phone consultation which can be scheduled at your convenience.