Blog: October 2008

To sIFR or not to sIFR

October 13, 2008

Hop Studios is on a quest to make the internet easier to use and prettier to look at. Sometimes, however, these two goals come into direct conflict - The techniques needed to create unique and attractive web sites are sometimes unwieldy and buggy. Take for example, sIFR, or Scalable Inman Flash Replacement, A brilliant idea from Shaun Inman to allow for more diverse typography on the web. you can read more about it’s recent incarnation on Mike Davidson’s Blog. Hop Studios has used sIFR on several of our projects.

Web sites are composite creatures, and when you look at type on the web it’s not coming from the internet at all, it’s pulling the fonts from your personal computer. Because of my job I have hundreds of fonts, but you may only have twenty or thirty. Using CSS I can ask your computer for any font, but if you don’t have the font I request it will get replaced with something else. If I want my designs to look the same across many user’s computers (and i do!) i need to pick from a limited selection of standard fonts. You know these guys, you’ve seen them before.... everywhere.

sIFR is a way around this limitation. It works like this: You create a parallel typeface file in flash and attached it’s use to any HTML tag you like using CSS. This file is stored on the server. When a page is loaded a short javascript checks to see that the Flash player is installed, then replaces any tagged content with the flash generated letterforms.

Why is this good? Well it means that you can have diverse type that is dynamic - pulled from a database, and you don’t have to create images for all the instances of interesting typography on your site. It’s searchable, something that images are, and for a long time, flash was, not. And it’s scalable - you can deploy this tool once and use it across your site many times in many ways.

Why is it bad? It’s complex and problematic, sIFR employs four different technologies to functions correctly, XHTML, CSS, Javascripts and Flash. This means it has multiple fail points. It’s tough to maintain and can sometimes behave oddly in the page. If you place sIFR next to a floated element it explodes to many times it’s original size. Finally you cannot replace large blocks of text, sIFR works best on display type, like titles and pull-quotes.

The creators of sIFR fully admit it’s limitations, Mike says:

While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution.

In short, it’s a complex solution to a complex problem, and should be used with care. Hop Studios generally tries to pick the best possible cases to use sIFR, and implements it sparingly.

Posted by Matt Gardner at 1:50 PM | Comments (8)

Electro-Harmonix Relaunches

October 2, 2008

Hop Studios projects often tend to be an even mix of design and development work, but in the case of Electro-Harmonix, the project was pure development. The design ground work had already been laid by project manager Scott Matthews. He’d taken the original site from flash-based to HTML and graphics, but a content management system was needed to organize and display the information. Hop Studios installed ExpressionEngine, set up templates, configured things to suit the needs of EHX, and added a blog.

As we do with all clients, we trained Scott in using EE, but in this case, the training was extremely thorough, covering how to input data, alter templates, use tags, categorize, and add other PHP functionality. In the interest of keeping costs down, we set up EE, but EHX was responsible for populating the site with all text and images.

The result? A great-looking, great-working site.

Posted by Rachael Ashe at 11:08 PM | Comments (1)

Tips on Working Remotely

October 1, 2008

Hop Studios is a small five person company, with two principles and three employees, one of whom works with us from Boulder, Colorado. Having team members based from different locations is a common occurrence amongst many tech businesses these days, and it can be a tricky business to keep everyone connected and engaged as a team. It’s been a good learning experience for us and so we’re passing on our list of tips about working remotely:

  1. Keep the team connected through daily check-ins at a set time via video chat—we use skype. The purpose is to get a sense for what everyone will be working on for the day, to make sure the workload is manageable, or if input is needed to complete tasks.
  2. Communication throughout the day often happens through chat programs so make use of the presence of your IM client to be clear on availability. If you’re away or don’t want to be interrupted, make sure everyone knows.
  3. Be aware of the limitations of long distance communication tools because they can’t work as well as face to face. It is really important to take people’s words in emails or over video chat at face value rather than reading into a tone that may not be there.
  4. Don’t be afraid to over-explain things. Be really clear with the information you are trying to impart to your coworkers and include as much info as you can.
  5. Use an online project management tool everyone has access too. In Hop Studios’ case, we use Basecamp to manage all of our projects and to communicate with clients.
  6. Try to work in the same time zone as the rest of the crew, or at least as much as the time difference will allow. In our case there is only a one hour time difference between us and Justin, so there is a long overlap during the day.
  7. Make sure there are tasks you can plan to do without assistance when the overlap time with others isn’t available.
  8. If you use ichat or video chat leave it on to get a feel for what is going on at the main office. Imagine the silly things you can potentially overhear. wink
  9. Maintain an online schedule everyone has access to. We use google calendar.
  10. Don’t forget about personal communication amongst coworkers, like sending music, or sharing a non-work related site you find interesting.
  11. Make sure you are using the same tools as the rest of the office—file formats and online tools.
  12. Meet in person at regular intervals. Face-to-face time cannot be beat.
  13. Say good morning when starting for the day and good night when signing off. Don’t just disappear at the end of the day.

    14. If you have anything further to add, we’d love to hear your ideas.

    Posted by Rachael Ashe at 9:03 AM | Comments (2)