Browsing articles in "Technology Reviews"
Oct
26

sIFR 3.0 Inline

Recently we’ve completed four sites for Civigroup Companies. Within those sites you’ll notice several instances of sIFR (flash replacement text) inline with content. This is no easy task for sIFR text.

While trying to accomplish this feat of magic, I spent quite a bit of time researching different aspects of sIFR and how it works with CSS to understand how to make this work properly and of course, all while being cross browser compliant! So, in order to perhaps save someone else the time and hassle of trying to figure out the magic equation, I figured I’d share my experience.

Step 1: set the sIFR class on a span tag where you want the text to be.

<span class="h1inline" style="width: 325px;">Heritage. Commitment. Vision.</span>

Notice the width style attribute, this is required to make sure safari does not include extra space behind the span and before the rest of the copy.

Step 2: set the attributes in the sIFR-screen.css sheet to make it an inline block element along with the rest of your styles.

height: 25px;
display: inline-block;
overflow: hidden;

Notice the display: inline-block; this is also a safari required attribute.

Step 3: Tune height if necessary in the sifr-config.js

tuneHeight: '-5'

This will help if you plan no not only having your sIFR text inline, but also a link. I was having difficulties with the underline of the hover state being cut off by the flash doc.

 And viola you have sIFR text inline!

Oct
21

Local Lifestyle Magazines Recieve Facelift

I’m proud to announce that Terralever launched two new sites into the world wide web this week. We have just finished production on a redesign and large back-end content management system for Cities West Publishing sites, Phoenix Home and Garden and Phoenix Magazine.

I am really proud to have been part of this success. The website may seem large and elaborate, but with the use of themes, masterpages, and dynamic content the site itself is about 20 pages in total. This was the first website in which we were really able to experiment with large scale theme usage and I learned quite a bit about how to make the front end flexible enough to reskin.

Making sure css naming conventions were simple enough to reuse through out the process was a key piece of the puzzle. I used the content to determine the class and id naming instead of color or position since both of these could change dramatically. This was not only important to switch from theme to theme within the sections of the site, but also we chose to reuse quite a bit of code from one site to the next to save cost for our client. Thus, the reasoning in similar layout from one site to the other.

Making sure each piece of content knew what month and what section it appeared in was also a large undertaking in this process, thankfully our wonderful back end development team did an amazing job of coordinating how the data manipulated the themes and sections with in the site.

In addition to the amazing design and development that went on to create the front end look and feel, there was an amazing effort on the back end administration system. Back behind all that wonderful content is an editorial staff that needs to input it in every month in a quick efficient manner! To help them with this, Terralever created an amazing custom content management system that allows the editorial staff to select which issue an article appears, what section, enter in the content and add supplemental photos to each story.

For each story the editorial staff has full access to create and layout articles however they please. They can add as many photos, call outs, etc to make each layout custom to the story it holds. To help them with this process, we created five templates for them to start with, allowing them to enter content quickly and then make the necessary additions with more photos, more call outs, etc.

The administration also gives the staff full access for the featured flash piece on the homepage, to create and edit user polls, add events, showcase photos in galleries and have users sign up for news and emails.

While these sites were a big project and some nights were spent eating at my desk instead of in front of the TV, it’s always worth it in the end. To go to a live URL and see something you’ve invested so much and learned from is amazing.  These sites are definitely two projects I’m proud to have been a part of. I hope you enjoy using them as much as I enjoyed building them.

Jul
9

Laura Foy Zero Gravity Interview

Terralever employees, Scott McAndrew and Casey Rayl, were interviewed on Tuesday by Laura Foy regarding the newly released Zero Gravity game that employs Microsoft’s new rival flash technology, Silverlight.

Jul
7

YAAY Updated!

Just updated my wordpress blog from 2.0 to 2.2 and it’s SWEEET.

 Love the widget functionality, it makes updating and customizing my sidebar soo much easier. Plugins are also very awesome, I’ve added Category Cloud, Twitter Tools, and WP Polls to create additional widget wonders! I’m still on the hunt for a flickr widget, so if you’ve got one, please let me know.

 I’m still trying to figure out how to widgetable my own layouts, but I found a pretty birdy layout until that happens.

Jun
29

Enso Awesome!

I noticed our Creative team using a nifty program that allows you to create bookmarks to folders and files and then with a tap of the capslock key you can jump to those in an instant.

The name of the program is Enso Launcher, and it makes my life SO much easier!

Apr
21

Vista Dreamscapes

I recently upgraded to Vista on my home environment and I absolutely love the new Dreamscapes™ Beta!

For those of you who don’t have Vista, Dreamscapes is video/animated desktop wallpapers. Most of them are just a few seconds long, and right now, since the technology is still so new, there aren’t a lot to choose from out there. But imagine the branding possiblities!

EDIT:

I noticed a lot of people were hitting this post since some how I became the #1 ranking site for Vista Dreamscapes. If you’re interested in getting more dreamscapes check out Deskscapes.

Download Deskscapes Here

Then you can pick up free (some of the better ones you may have to pay for) dreamscapes at the following site. They have a limit on the number you can download a day without registering. You WILL have to install Deskscapes to use these. I know some of them are kind of cheesy, but there’s some good ones in there too, I promise. I personally like the Beach Rocks, Bay Bridge, and Timelapse Flower.

Pickup Free Dreamscapes Here

Mar
31

Review: sIFR 3.1 Beta

This week I was again arm wrestling with the sIFR version 2. The production department has always considered sIFR implimentation more of an art than a science. There’s so many variables that effect it in unpredicable ways that make it a daunting task.

In this particular case, I was trying to add a secondary color within one header. Usually this is a simply span in CSS, but since we’re using sIFR to transform the header to a non-webstandard font, this is not so easy. After researching the web, I found that Mark Wubben has now produced a beta 3.1 version of sIFR. GREAT!

So I pull down the download, unpack it, finding it very similar to the 2.0 installation. This process includes creating a SWF of the font you want to use, adding a javascript file to control it, and CSS to control the formating.

NEW FEATURE NOTED: The javascript you used to insert at the bottom of files using sIFR is now seperated into a config.js file. This is nice, since you don’t have to include it on each master page, etc.

NEW FEATURE NOTED: The css file used to control the formatting is now seperate as well from your css files, keeping your files clean and tidy. However, when using themes this was a bit cumbersome to add a css file somewhere else within the file structure. Just another place people have to look to make a small change to a class. 

Once it was all in place, formatting my classes and headers was a learning process, but once I got the hang of it, it was a DREAM compared to the older edition.

NEW FEATURE NOTED: Now in the config js you can set css base styles as well as span, bold, etc. Which makes formatting in line a breeze! Just what I was looking for!

NEW BUG NOTED: In IE 7, the sIFR text just randomly disappears when positioned in certain situations. Refresh a couple of times and it pops back up right where it should be. It has something to do with the way the classes are reassigned, but from there I dunno what exactly is going on that makes it magically disappear.

BUG FIXED: In past versions we would have some issues with the sIFR headers stretching or shrinking depending on the height or width that was set to it’s class. Meaning the font would not keep it’s size, but become bigger or smaller instead of wrapping.

All in all I’m really impressed by the additonal CSS functionality. This adds a great deal of flexability. I’ll add to this post as I find additional benefits or bugs.

Mar
31

First WordPress Theme

YAAY!

Just finished my first wordpress theme. It was supa simple and pretty fun. WordPress has a sweet tutorial and informational section that lets you know all about WordPress and how to werk it!

Haven’t designed anything in a while so I just HAD to get out some color and sweet vector stuffs. So celebrating spring, I give you spring.fling!

Lemme know if ya like it, or if there’s some theming I missed! Thanks!!

What is this?

This little blog happens to be the personal ramblings of one April Holle - I'm female, outspoken, webbie, a community evangelist, and Principal of Made Better Studio. Check out the about section for more info.

What People Are Saying…