The new CashCrate homepage

When the site launched yesterday, one member said,

“Wow, just wow. This design is brilliant. Did your team do really do it or did you hire a designer. Either way I love it and that is coming from a webmaster and aspiring designer myself. Not to mention I am ecstatic about the new features. I haven’t been active recently, but the new features make me want to get right back to it, which I’m doing right now. And finally, I’m excited about this contest sort of thing that broadcasts the new features while giving the users money/points. Thanks a lot CashCrate!”

As one of the premier players in their industry, CashCrate boast over 2 million members worldwide and send out checks for tens of thousands of dollars every month. So far, this launch has been quite successful and has provided favorable, quantifiable results.

So we wanted to quickly post an update on the recent happenings at Rareview, but also let you know that our blogging and twittering will be purposely trailing off this year, which we can discuss more at a later date. For now, we’re continuing where we left off in 2009, where we saw a host of new projects (especially during the 3rd and 4th quarter as budgets seemed to loosen), opportunities to partner with Fortune 500 companies, the serious adoption of our project management software Projecturf, and the complete renovation of our Los Angeles studio. Using this momentum as a stimulus, our team is acutely focused and engaged in great projects that will launch in 2010, and we feel fortunate to be working with extraordinary clients who want to do innovative things.

Expect great advancement and progress this year from Rareview, including a more solid definition of purpose. After several years of what we think has been great work, we hope to outdo ourselves yet again. We know the stakes are high and we don’t want to disappoint. Good luck to you all, stay busy, and feel free to send us an email or call us at 310-373-9303 if you want to discuss a new project, collaborate, share ideas, or just chat. Here’s to a happy, fun, and productive 2010!

Drive for a Cause

Drive for a Cause (DC) was founded in July of 2007 by Marcus Berry and Jeff Bellitti. DC is a 100% volunteer-based fundraising organization and has donated over $81,000 over the last two years to various charities throughout the community. Their mission is to increase awareness, engage, and provoke action amongst its members to fulfill an inherent responsibility toward social, medical, and educational needs of their communities. The committee members donate their time and energy and no committee member receives any financial benefit.

There are many challenges we all face in a down economy, the most important of which is how to stay in business. Above and beyond keeping the doors open, we are faced with the challenge of how to actually thrive in a slow economy. It’s not always simple and the answer definitely varies based on your situation, your industry, and your team. But from our experience as an interactive agency in the Web design and development space, there is a common thread that has helped us maintain an edge. Flexibility.

We’re talking about flexibility across the board, and maybe most importantly, in your mindset. Flexibility gives you many options; it gives you the chance to be lean or hire, ramp up or down, move quick or slow, work differently, and be open to relationships you might not normally consider. For us, this has meant providing the same level of quality and dedication to our projects that we always do, but if a project doesn’t fit within our “typical project requirements” we have learned to be flexible and discuss alternatives and options with the client. This may mean extending the timeline to account for the smaller budget, or working with smaller teams. There’s a lot of changes we’ve been making to how we normally work, and it’s been very beneficial to both our clients and our agency.

Overall, we’ve been thriving in a slower economy by doing the following:

• Being flexible and adjusting costs, processes, and guidelines to work with clients in various situations
• Using extra time that isn’t spent on client work to pursue additional business ventures, ideas, and projects that will propel us in the future
• Working additional hours on projects (in some cases with smaller budgets) to ensure the highest quality product; quality over quantity
• Learning new skills and further developing existing ones (for instance, we’ve been thoroughly expanding our jQuery expertise)
• Expanding, not contracting (which is a common reaction to the market), sales and advertising; act, don’t re-act

While the economy is changing, being flexible and open to change will give you the opportunity to not only stay in business, but to be successful in tough times. It is working for us, and we believe it can work for you.

First, let’s say you have a page with a Flash animation on it. For this example, we’re going to use our project management tool, Projecturf, to explain how we do this. If you look at the site in a browser with Flash installed, you’ll notice that we have animation to show the user various parts of the application in a cool, dynamic way. Those screenshots have animated talk bubbles with some text that explain each section. All of this is useful information for the user and a Search Engine. However, it’s in Flash. If you’re on an iPhone, you would see a big blank box where the Flash is suppose to be when you visit the website. This just won’t do.

Here’s the method we’re using. First, we use SWFObject (see our post about using SWFObject and Flashvars) to load the SWF. The SWF is displayed in a <div> tag using an ID. In addition to having the animated version, we have also taken a screenshot of what the first frame of the animation looks like (which we’ll use later). You can see it here. In addition, we have included the text that is inside the SWF within the <div> and have told it not to display on the page using CSS.

Here’s the logic of how this works. If the user is viewing the site in a browser with Flash installed, they will see the animation, which is on the very top layer. If the user is on an iPhone or does not have Flash installed, they will see the image that is sitting underneath in the <div> (which displays a completed, static site rather than a big blank spot where the animation should be). If a Search Engine crawls the site, it will read the content that is also in the <div>. This information is otherwise displayed in the image and/or animation. This has been a very effective method for ensuring maximum compatibility with multiple devices, browsers, user preferences, and Search Engines.

Below is the SWFObject code used to insert the Flash in the “flashBanner” <div> (note that SWFObject now has a cleaner, more updated way of inserting SWF files with Version 2)

1
2
3
4
5
6
7
8

<script type="text/javascript">
    // <![CDATA[
        var so = new SWFObject("flash/pt_home.swf", "Home", "950", "604", "8", "#202020");
     	so.addParam("wmode", "transparent");
    	so.useExpressInstall('flash/expressinstall.swf');
    	so.write("flashBanner");
    // ]]>
</script>

Below is the code used in the HTML file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<div id="flashBanner">
     <img src="images/projecturf-screenCaptures.jpg" alt="Projecturf Screen Captures" width="950" height="604" />
	<h2>Projects</h2>
	<p>Create projects in a snap! Your master calendar shows all milestones on all projects.</p>
 
	<h2>Dashboard</h2>
	<p>Post announcements, update the project brief, and follow the latest activities.</p>
 
	<h2>Milestones</h2>
	<p>Calendar important milestones, set deadlines, and assign to team members.</p>
 
	<h2>Tasks</h2>
	<p>Quickly create tasks, associate them with milestones, assign responsibility, and track progress.</p>
 
	<h2>Timecard</h2>
	<p>Track billable time, export to excel, and send it to project managers or clients.</p>
 
	<h2>Documents</h2>
	<p>Share documents without storage limits and organize by folders.</p>
 
	<h2>Designs</h2>
	<p>Upload, share, rate, and get design concepts approved.</p>
 
	<h2>Development</h2>
	<p>Share your development work using your servers and log progress.</p>
 
	<h2>Discussions</h2>
	<p>Collaborate, discuss important topics, create threads, and comment on documents and designs.</p>
 
	<h2>Search</h2>
	<p>Quickly find information and have it segmented by section for you automatically.</p>
 
	<h2>Tools</h2>
	<p>Use the Project Completion Report and dynamic Gantt charts for status reports.</p>
 
	<h2>Contacts</h2>
	<p>Manage project teams, view contact cards, and change permission levels.</p>
 
	<h2>Address Book</h2>
	<p>Import contacts into your address book to quickly create project teams.</p>
 
	<h2>Personalization</h2>
	<p>Personalize Projecturf with a color theme, your own logo, a private Web address, and more.</p>
 
	<h2>Systems</h2>
	<p>Use a single login to access all your Projecturf accounts.</p>
</div><!-- !end flashBanner -->

Below is the code used in the CSS file to hide the content from users who can already see it in the animation

1
2
3

#flashBanner p, #flashBanner h2 {
	display: none;
}

Lately, we’ve started to use Flashvars as opposed to external XML files to generate the content in the Flash files. We really like this approach for a few reasons. First, the content is in the HTML page directly, which means there is one less file to manage. Second (and this is a big one), if your SWF looks for an XML file to load content, the browser tends to cache that content. So the next time you visit the page, you will see the cached content even if you’ve replaced and updated your XML file. In this situation, the user has to manually clear their cache and reload the page to see the new content. The problem here is that most users don’t clear their cache all that often. So you run the risk of users seeing old, outdated content, even though you’ve spent the time to update it. So our solution recently has been to use Flashvars when we can.

A good example of this can be seen on our new website. The panels right underneath the clouds on the top of all the pages have text in them. They have a headline, sub-header, and a paragraph of text. The headline and sub-header are part of the SWF file and thus require us to either use an XML file, put the text directly in the Flash file itself (not very friendly for updates), or use Flashvars. Here’s how we did it (in the <head> of our document):

1
2
3
4
5
6
7

<script src="js/swfobject.js" type="text/javascript"></script> <!-- Load SWFObject -->
<script type="text/javascript">
		var flashvars = {mainTitle: "Functional, interactive design.", subTitle: "Three words that mean more to us than you'd think."};
		var params = {wmode: "transparent", allowFullScreen: "false"};
		var attributes = {};
		swfobject.embedSWF("flash/workheader.swf", "flash-work", "950", "195", "9.0.0", "flash/expressInstall.swf", flashvars, params, attributes);
</script>

You need to be using the latest version of SWFObject (version 2) to do this. The benefits of using Flashvars is that the browser shouldn’t cache old XML data, it’s easier to maintain (i.e. less files to work with), and it’s written in the HTML document directly.

After roughly two years in existence, our old website is being moved into the dusty old archives where it belongs. We need to do this to make way for our new, improved, sleeker, and more modern website. It’s not simply the design that needed an overhaul, but the code.

Our new website is a hybrid of various technologies. It’s built in XHTML/CSS and uses jQuery (Javascript) as well as Flash for animations. We trimmed the content and focused more on the work. The portfolio features additional design work (i.e. concepts) that our clients reviewed, but didn’t necessarily pick as their final design. We also introduce a new way of telling the user about some of the features of our work, using notes that fade in over the large work canvas. Our new site works on the iPhone by using CSS techniques to show images underneath our Flash files. In addition, the code is optimized for Search Engines and speed. All-in-all, it’s a complete makeover from the ground up; and one we’re quite excited to share!

Take it for a test drive at www.rareview.com.

The Archives
Although we’re tempted to let our old site fade into the journals of Web history, we’ve received too many compliments and praise to let it die. So, we’re going to keep it around for a little while longer. It’s for us and our friends to enjoy. If for nothing else, to see how far we’ve come.

Rareview's Old Website located at www.rareview.com/blackandgrey/

To access our old site, visit www.rareview.com/blackandgrey/.

You see, as an agency, we live by our portfolio. We gain new business and work on great projects based off the work that we have done, word of mouth, the awards we have won, the acclaim that we have gained. Thus, we have a certain level of expectations that new clients should trust our judgements and opinions above all else based on our previous experience. If history repeats itself, this makes sense; at least to us.

However, the client’s experience with us has only just begun. Yes, they love the work we’ve done and the design flair we bring to the table. They like our ideas, our passion, and our skill sets. But to gain their trust, we must prove ourselves each and every time, with each and every new client.

So if we shift our mindset from one that expects trust to be their from the onset to one that knows trust is earned, things will go smoother. Rather than shooting down ideas from clients who may not have the same level of expertise that we have, we have to find ways of taking their ideas, incorporating them, working with them, and making them better. If you get the client involved, give them a voice, AND produce high quality work, then you have created a receipt for success, and you have just earned their trust. From this point forward, your opinions will probably hold more weight than they did before and the process will likely go faster and be much smoother, which makes everyone happy and hopefully results in the best possible product.

We’re not perfect and this is an ongoing lesson for us. Each client brings new opportunities and new challenges. But it’s important to us as an agency to adapt, grow, and be flexible enough to change. If you work on the Web like we do, you know that things change incredibly fast. So must we

1) Left flush no-resize sorting : In this example, everything is flush left, and the grid items do not resize. Visually, it keeps the spacing consistent and everything in order, but leaves some whitespace.

A lot of times, when you’re immersed in the design/development, you lose sight of the obvious and/or lose sight of what you’re actually trying to achieve. Are there other obvious options? Which method is the best out of these?

Let us know if you find these handy, or if you have any suggestions or comments!