Thriving in a Slow Economy

June 14, 2009

In most industries, business slows when the economy slows. Budgets becoming tighter (or non existent), departments become leaner, and spending is pulled back. It’s a natural reaction caused by fear in the market. As this cycle perpetuates, things get worse until signs of hope begin to emerge and companies loosen their belts.

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.

Search Engine & iPhone-Friendly Websites Using Web Standards

March 31, 2009

If you’ve used an iPhone, you’ve noticed that Flash content cannot be displayed. Also, for users that have Flash turned off, those using screen readers, and for Search Engines, animation cannot be seen or indexed. However, there is a great method we’ve been using to display content that will work for everyone.

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;
}

SWFObject - Flashvars Instead of External XML Files

March 31, 2009

We’ve been using SWFObject for quite some time to insert Flash content into a website. It’s a great way to get around the <embed> tag and remove the dreaded IE “click to activate this control” message.

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.

In With The New. Out With The Old.

March 23, 2009

Things change. On the Web, things change far too quickly. We’re constantly trying to outdo ourselves by using the latest and greatest techniques, Web standards, and technology. It can be tough at times, but also exhilarating. It’s what we do for clients, and so we must do this for ourselves.

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.

Old Rareview Website

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

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

Trust is Earned in Client Relationships

January 27, 2009

The client-agency relationship can be great. It can be inspiring, it can be one of mutual respect, collaboration, and creativity; or it can be not one of those things. Turbulent relationships often get off on the wrong foot where one or both parties don’t have the same expectations. Speaking from the agency side of things, and looking at ourselves in an attempt to grow and become a better agency, one of the biggest problems is trust. Many agencies, ourselves included, expect new clients to come to the table with a great deal of respect and admiration for the work that we have done. And while most of them do, the problem is that the client doesn’t want the work that we’ve already done; they want something new.

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

Experimenting: Flash AS3 Grid Sorting

January 21, 2009

Working on a project that required us to sort out a grid layout, we were experimenting with what the best methods would be to visually communicate the items on a vertically scrolling grid when resizing the window. Using a little AS3, I managed to code a few mad nerdy little examples. Of course, there isn’t any scrolling in these examples, but you get the point. Check them out here:

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.

2) Auto justify no-resize sorting : In this example, the grid items space out evenly to fit the screen and also do not resize. Visually, makes a good use of the gutters, but might look kinda funny.

3) Auto resizing, full screen sorting : All the grid items resize horizontally and vertically to fit the width of the screen. Visually, it makes the best use of the gutters, but stretches the images. So I guess this depends what sort of content you’re placing in the items. You may or may not want to stretch them.

4) Left flush no-resize smart sorting : This is the same as #1, but I call it smart, because it keeps the screen looking more filled. Once you resize the browser, you’ll notice that when your window is covering half of an item, it will appear/disappear. This hides some of the item, but gives some padding to make it feel more comfortable.

Download source files for all 4 examples here.

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!

Some New Work…

January 7, 2009

Normally, we’d post these on our website, but we’ve been slammed lately with some really exciting work! However, we wanted to share just a few recent sites that are completed and live now; for your viewing pleasure:

http://www.24hour.com
http://www.jobberwoky.com
http://www.projecturf.com (completely re-designed and simplified)

We hope you enjoy!

We have a lot of new stuff coming early this year, including some of our own projects, so stay tuned!

New Office Space in Redondo Beach, California

July 12, 2008

It’s official. We have signed the lease on some new office space in Redondo Beach, California. This move will offer more space to support our growing needs as we continue to expand not only our team, but our offering of services as well. Our new address is:

Rareview Interactive
811 N. Catalina Avenue, Suite 3006
Redondo Beach, CA 90277
(866) 611-0207 toll free
(310) 373-9303 direct

We are now located in the Redondo Technology Information Center, less than one mile from the beach, so any of you great designers or developers that want to work with a great team, in a great part of Los Angeles, please reach out.

Rareview Launches The Basic Resources Network of Websites

July 12, 2008

After many long months of work, Rareview Interactive and Basic Resources have finally released a network of new websites!

Basic Resources is an international trading exchange and website network dedicated to oil & gas, commodities, energy, metal & mining, agriculture, forestry, recycling and investments. Rareview teamed with Basic Resources to develop their growing network of websites, which entailed making them multi-lingual, enabling international payments, creating the overall look and establishing the brand (we also designed and created the Basic Resources logo and styles), as well as building a custom CMS that enables the management of all the sites in the network, all translations, the ad-serving engine, and payment transactions.

To see the various components of this larger network, check out the following sites:

basicresource.com (main simple corporate landing site)
oil.net (oil & gas trading exchange on the network)
commodities.org (commodities trading exchange on the network)

To read more, check out the full case study on our website at http://www.rareview.com/?#work/bar.

 1  2 Next

Search

Categories

Archives

Recent

RSS

About Rareview

In 2002, we started as a small group interested in creating lasting, progressive web applications that pushed the envelope. Today, as a small interactive agency in Los Angeles, we still have that same desire and feed off new challenges from clients and technology. We are fortunate to have plenty of great clients who give us creative freedom and leeway to redefine ourselves with each new project. To learn more visit our website at www.rareview.com.

We have also designed and built our own Project Management Application that's available for everyone. You can learn more, watch a video tour, and sign up for a free trial at www.projecturf.com.

Receive updates on new projects and other compelling stuff.

  • office

    811 N. Catalina Avenue, Suite 3006
    Redondo Beach, California 90277

  • toll free

    1.866.611.0207

  • local

    1.310.373.9303

  • email