Ideacodes - San Francisco

Most colleges and universities have an IT department that deals with incoming spam to your school. However, If you’re a department or administrative webmaster you may have noticed you still get spam to the email addresses on your site. Or worse, administrators or professors complain to you that they do.

Here is a simple solution that any webmaster at almost any experience level can implement in just a few short minutes. If you view the source of your html pages do your email links look like the ones below?

If so, we have the perfect solution for you. The friendly developers at Automatic have been kind enough the develop an email address encoder that is incredibly easy to use. All you need to do is enter your email address; the link text; and the link title. There is an optional field where you can include an email subject if you wish. How much does this cost per email address? IT’S FREE! You can encode as many email address as you like.

Once you fill out the simple web form you will be pushed to the next page with a long piece of html code that will encode your email address from all spam bots. All you have to do is copy and paste this code into the same place your old email link was. That’s it, you’re done!

Don’t forget to try out some of the other free tools at the site. Automatic is a full service software development company. They build web applications, electronic publishing tools, content management systems, and database driven websites with a focus on usability and standards-based design.

If you haven’t heard of flickr yet, it’s the perfect time to visit, sign up for a free account, and start photo-sharing, photoblogging, and using one of the most user-friendly web applications available today. Visit the ideacodes flickr site or see our flickr stream on the studio page. If you’re a school, read on for some ideas on what your admissions office or alumni association might do with Flickr.

Why a Photo Gallery?

Time after time in audience surveys, focus groups, and marketing surveys, one of the top requests from visitors to school websites is the desire to see “real life” at the school.  Whether the visitor is a potential student, current parent, a parent of a prospective student, alumni and alumnae, faculty colleagues, potential new faculty, or a member of the school’s local, national or international audience, people want to see images of other people — a natural human instinct.  At Ideacodes, we’ve been proponents of immersive media (embedded video) for an even more realistic view into life and learning at schools, but frequent, updated photos are a great start and often more immediate, accessible and casual.

Why use Flickr?

It’s fun!  If Google is the epitome of the functional, fast, and most effective search, I would have to say Flickr is its photo-managing-and-sharing equivalent.  The suite of tools is seamless and the user experience is highly intuitive.  As you start to explore what Flickr has to offer you’re constantly surprised by its integration and offerings—post photos through email to your Flickr site, easily flag content as private, public and to what degree (friends, family, everyone), organize your photos using a dynamic flash app, invite your friends, join any number of Flickr groups, tag your content, explore others tags and photos and see who else is thinking like you are.  That’s just the mere tip of the iceberg, too.

Flickr is also a glimpse into the next wave of what’s possible with web applications.  Brewing under the surface of Flickr is an underlying technology that is just beginning to buzz in web design, developer, social software, and even investment circles.  This is a whole other story that we’ll be posting about shortly.  Suffice it to say that among others, Yahoo, Ester Dyson, and Joi Ito have all invested in Flickr.

What Can My School do with Flickr?

Here are some ideas if you’re a school, college, or university:

• Put up a new photo tour of the school (and allow others to add their own photos of campus)
• Showcase photos from Admissions events
• Make a school moblog and have students moblog their cell phone photos
• Create a student portrait gallery with quotes or better yet, personal anecdotes about life at school
• Create albums of Alumni class reunions
• Post ongoing photos of the new Science building construction for donors and alumni to see
• Make a Commencement album to show ceremony photos (and to encourage graduates or parents to submit their own photos)
• Add a photo section to your student publication and use Flickr for the gallery

Try it out at flickr.com or contact us and we’ll help you.

How would you like to decrease the load time of your bloated CSS file by up to 85% in less than five minutes? I recently found a link to fiftyfoureleven.com and their great article, “The Definitive Post on Gzipping your CSS.”

When I saw this the first time I almost fell out of my chair with excitement. The dream is real — you really can cut the load time of your CSS file by more than half with just a few lines of code — and you don’t need a computer science degree to do it. What do you need?  Either PHP or Apache. If PHP and Apache don’t make any sense to you then hang on for a few days as I’ll be posting a how-to of my own that expands on these for newbies.  If PHP and Apache aren’t greek to you, then read on.

Before implementing it, please refer to the original article listed above. This is just a short how-to. There are many implications so please read the source article.

There are basically two methods to accomplish this amazing feat. The first involves two simple steps.

Method 1

Include the following piece of code at the top of your CSS page.

Rename your .css page .php. That’s it — you’re done!

Method 2

Create a .php file with the name “gzip-css.php” with the following code in it.

Create a .htaccess file with the following code in it.

Now just upload these two files to your CSS directory. That’s it — you’re done!

As stated above this is just a primer.  Please refer to the original authors’ sites for a more complete understanding of this complex subject.

I’ve tried both of these methods out on our own site and they both worked. Since I’m using a CSS filtering system to filter for rogue browsers the second method worked best as I have multiple style sheets in my CSS directory.

I implemented this on our site and was amazed with the results. Before compression, our main stylesheet was 23,656 k and after the five minute compression process our stylesheet was 3,269 k for an original file size reduction of 86.26%.

From a user experience standpoint this may be one of the least talked about and most important implementations any web designer/developer can do for his or her website or clients’ website. After all, your CSS and your site content are a great portion or your overall load time.

Please check back as I have several articles planned for this subject. Next up is compressing all of the content from your website or blog.

Special thanks to the original author!

As a web designer for nine years I’ve had my fair share of clients, friends and programming buddies say something to the effect of, “My site design needs help because I just can’t pick two or three colors that go well together.”

While the following two tools are certainly not an end all for the faint of color, they are a great place to get started. Easy RGB and Colors on the Web are two fun and informative tools which can help anyone pick a refined color palette for their website.

These tools have been around a while however, Easy RGB is still adding to its color knowledge base. A novice designer can learn a great deal on how to combined colors; the meaning of colors: and how to use them on the web from both sites.

On my current project I found a need for a BR with no vertical space and could find very little on the web on how to do this. The one relevant return I found was three years old from Incutio Archivist.

The entry was titled, ”Eliminate vertical space of BR” and did a very good job on most of the browsers (thanks, Tuttle).

The only two browsers that Tuttle

Ideacodes Design EDU™ invites you to recommend or submit a school site that you feel exemplifies the best in web design and development. A school site can be K-12, college, university, higher education institute, center, research institute, alumni community, or school-affiiliated organization. We welcome submissions from the around the world. Recommend or submit a school site.

On a recent project I found a need to apply a single style rule to Safari. Initially I turned up a great link to dithered.com which has all known CSS filters. Unfortunately, I could not locate one that filtered for Safari only.

On a recent project I found a need to apply a single style rule to Safari. Initially I turned up a great link to dithered.com which has all known CSS filters. Unfortunately, I could not locate one that filtered for Safari only. 

After quite a bit of searching all I turned up were several posts looking for the same thing or even a few that said filtering for Safari was impossible. After a few more pages of search results I came upon a link to gunlaug.no which had an article titled ”CSS Filters – not recommended but…”. This turned out to be an excellent system (hats off to the author) which isolated Safari perfectly!

Be sure to read the article carefully as the entire top of the hack needs to be there to filter for Safari and not affect other browsers. This progressive filtering system must also be sequenced exactly as laid out in the article.

The only issue I found was that the @media all and (min-width: 0px) line caused a problem with CSS validation. I took the entire Opera hack out and it still worked fine for Safari without affecting other browsers.

The Code (please visit the above listed link before using):