.eduGuru » Graphics

[Results] Are Classes in Your Toolbox?

Michael Fienen — Fri, 29 Jan 2010 13:00:31 +0000

Towards the end of 2009, we started a new survey of higher ed web professionals to take a look at one potential way that you are using the resources around you. The question centered on a fairly simple, central concept: odds are that on your campus you have classes teaching the creation of different kinds of media, are you leveraging them to add media to your web site? I have to admit the response surprised me. No. No you aren’t.

Before I dive too far in to what we learned, let me be transparent. I personally don’t feel we got enough responses to be statistically significant beyond the general answer of no. A total of 42 of you answered the survey, half of those were from schools between 1,001 and 5,000 students. Rather than throw away the survey, I do want to share some of the points that I think were of value. Just keep in mind the reality of some of this information might differ from the snapshot we got, so use care if you want to make a case for something and are citing this survey.

Despite the low return on responses, only 5% (2 people) said they do use content generated in courses on their site. That left the remaining 95% in the no column. No matter what, that to me was telling. It would definitely appear this is not a resource you are tapping, and that surprises me. However, out of those that said no, 44% said they had in the past, and 69% said that they would consider it in the future (that number goes up to 97% when including the ‘maybes’), the biggest barrier (34%) being inter-office communication. It would largely seem that the primary reason people aren’t doing this is that no one is getting together and talking about it. Concerns like the quality of results can be addressed if people got together and talked. But, that was barrier number two – according to 31% of you, you just don’t have a department on campus to talk to about this kind of content development, even if you wanted to. Obviously that’s a harder problem to solve.

The reason I started this survey is because it’s a concept I’ve talked about a little with some faculty on our campus. We have interest, we just need to coordinate the effort. As a university, it seems like from an academic standpoint we have at least some obligation to help kids get their feet wet in this environment. That doesn’t mean letting them redesign the home page, but why couldn’t they help with a student landing page, or marketing efforts? We let television kids produce shows on cable, journalists and photographers are printed, and broadcasting majors make commercials for local radio stations. Yet those interested in the web appear to be given no real chance to interact in a live market. I find that very interesting and a little sad.

From the results, here are a couple good comments folks made:

“Using student work is just too hit-or-miss and you have to use what they make or no one will want to do the projects for you next time. It’s like having a contest and using whatever you get in contest entries. You might get lucky, but more often you don’t because it’s a conflict of interests. The students’ objective is to learn the medium and get a grade. The university has marketing goals that don’t necessarily align with the class academic goals. Bottom line is, it looks like amateur work and that’s not the image we want to give in our marketing.”

What do you think, is this right? What if you used higher level courses with clear content objectives directed by the teacher? If quality was your biggest concern, it would seem clear communication and planning could help with addressing that.

“Our faculty are many years behind on technology, even our computer science instructors. It makes it hard for students here who know more than they do. They seem really afraid to even try anything new. They also seem to not even want to continue learning – just waiting it out to retirement.”

This is a more difficult, broad issue. How do you teach the best without the best teachers to begin with? This is one reason I advocate using our positions in higher ed to also be teachers when possible, even if it’s just a night course.

So, what can we learn from this? Well, if you aren’t using courses on your campus to generate campus, you are in the overwhelming majority. If it interests you, work on communication. Don’t be afraid to talk to people about ideas you might have, someone has to start the dialog after all. A lot of people are willing to entertain the idea, so don’t ignore the value this approach to content development might provide for you. Better still, if someone comes to you with the idea be sure to vet it properly. Good ideas for web won’t always come out of your office.

Click here to view survey results. [Download PDF]

photo credit: ekai

[Guru Survey] Are Classes In Your Toolbox?

Michael Fienen — Mon, 07 Dec 2009 13:00:17 +0000

Good budgeting includes doing effective resource management. The web has to produce a lot of different media, and so making the most of our resources is extremely important. This is becoming increasingly important as we’re asked to do more with less. The neat thing about higher ed though is that we have access to a resource that our unique to our environment: students.

Recently, Nick DeNardis did some research into the state of university web departments. This is the next in our series of surveys, and we’re looking to see if and how you are using students to help create content for the web. This is not without a twist, however. We’re not looking at students that are employees for you, but rather the classes that teach areas relevant to the web, such as graphic design, photography, marketing, programming, etc.

Classes provide an awesome opportunity to use coursework to foster an environment of creativity, provide opportunities to the students, and create content you might not otherwise have the ability too with normal, limited resources. Not everyone can keep a full time coder, or writer, and Flash developer on staff. With the right coordination however, you could get far beyond your normal means. So, take about four minutes to help out the community and fill out the survey below (even if you don’t work with classes, we want to know that too). The survey will be open through the end of the month, and the results will be published after the start of the new year.

Start taking the survey »

photo credit: durian

Software Review: Flimp – Flash Development Tool without the Programming Knowledge

Kyle James — Tue, 03 Nov 2009 13:00:59 +0000

So I was given the freedom to demo and review a powerful Flash development tool called Flimp. If you visit Flimp’s website they describe their product as video marketing, but after playing with the software for a few weekends and talking to others this is only a part of what their service is capable of. In their application, you can do a lot with video. For example, you can include a video on a Flash landing page, in an email or simply embed it on a page. Still, with the power and visual excitement of Flash, video is only a part of the feature set. Flimp appears to be built completely in Flash and is an environment to let any individual build applications in Flash. Their application is hosted in the cloud for optimal serving of files and is a software as a service (SaaS), so there is no software installation needed.

Software Example

So let me start this review by sharing a little Flash piece that I developed and was able to easily embed in this blog post. You might know my dog Skip? Well here’s a chance to get to know him a little better.

Impressions of the Software

Flimp Text Editor (Click for Larger)

It was fairly intuitive and straightforward to put together a template. Dropping pictures, text, and video onto the template was as simple as drag and drop, and then you are given lots of control into the nit picky details of your work. There were times that it felt like the interface required extra clicks to accomplish things that could be handled in fewer. An example of this is when you go back to edit an existing “flimp” you have to do an extra click to edit instead of being able to click on the preview and get right into the application. Of course being able to constantly develop and update the service is one of the great things about software as a service application!

As I went through the tool to build this demo application I was quite frankly impressed with the feature set. There wasn’t anything that I wanted to build and design that I didn’t easily have the ability to. One negative was that for videos you have to upload a file in the .flv format. Of course with the abundance of converters this isn’t a make or break, but with the rich feature set it was something that stood out as a disappointment.

A Customer Testimonial

Flimp does have quite a few education clients, and after reading through some of their higher education case studies I reached out to a friend who works at Suffolk University, Jessica Krywosa, for a testimonial. Many of you will recognize Jessica from her Integrated Marketing and Communication blog. I knew all I was spending was a few hours on the weekend to get in here and toy around with the software without an actual campaign to test the service, so I wanted a more in-depth assessment. Here is what Jessica had to say about the Flimp service.

What makes Flimp so great is more than the product – its the people. They have been very responsive and collaborative in our work with video email campaigns. If you’re having an issue you can call, email or tweet them and receive a rapid, accurate and friendly response. As they continue to grow, they are very open to product enhancements that we bring up – be it in interface or analytics.

What I’ve worked most with is the analytics. Seeing click throughs by individual emails has been invaluable when determining campaigns – the placement of information, our web traffic and content, even time of day for segmented audiences. All in all, its been a great learning experience as we move forward in creating interactive and dynamic content for all areas of the university.

Flimp wasn’t aware that I reached out to a customer, so feedback like this really says a lot about a company. I know at HubSpot there is a superior level of service and transparency that we strive hard to establish. When a friend asks a friend for their honest assessment and they tell about the passion of the people at the company, it says a lot about that company.

Final Impressions

Although I was impressed with the feature set, I didn’t really get to dig into the email marketing and analytics to truly assess those functions. Being someone who has a lot of experience in both email marketing and web analytics I’m a little upset I can’t truly give my expert’s take on those features.

I do still have to warn that just because Flimp takes the programming out of flash doesn’t mean that someone without design skills is going to be able to create masterpieces! I think the people who will really find value in this tool are traditional marketers who are experts in Adobe Illustrator and Photoshop or Microsoft Publisher and just can’t wrap their head around Flash. With a little education I strongly believe those individuals will feel right at home in this application and be able to create vibrant web applications as they have created for print. I think that is the true highlight of the software because I know there are a lot of individuals who fit into that mold in colleges and universities around the nation.

Save your sanity and use a grid

Nick DeNardis — Fri, 18 Sep 2009 11:00:45 +0000

University web designers have a tough enough job as it is, juggling users needs while pleasing committees and numerous other stakeholders. Doesn’t matter if your web office has complete control or just influence, using a grid can make completely unrelated sites look uniform.

In this post I’ll focus on using a horizontal grid, vertical grids are not as popular so ill leave them up to you to explore.

So what is a grid?

Grids exist for the single purpose of bringing uniformity to a traditionally nonuniform environment. The horizontal grid consists of a set of columns with left and right margins that create gutters. Page elements fit within these columns and gutters.

Using a standard grid allows for fast prototyping, wireframing and designing. By having a set of element widths it gives the designers constraints and the developers a global stylesheet to work from.

The above screen shot is from the University of Nebraska-Lincoln and it shows how nicely the page elements fit into the grid. You would be surprised at the number of sites that use this same grid structure.

Calculating a grid

Step 1 is to determine the site width. 960 is the standard width but you can choose anything you wish.

Step 2 is to choose how many columns you want. The most common numbers are 12 or 16.

Now the tricky part, each column has an equal left and right margin. A typical 12 column grid has 10px on each side which leaves you with a 20px gutter.

Determine your column width by taking the:

(960 px page width – 240 px total gutters) / 12 columns = 60 px wide columns

Reasons to use a grid

Designers love constraints, no really, they do
Consistency without mandating a template
Developers don’t have to start from scratch
Breaking the grid can make things stand out
Gives you the upper hand when working with demanding departments

Simple steps to start using a grid

Make a list of your most common page elements
- Header, Menu, Search, Main Image, News, Events, Contact Info, Promotions, etc.
Dividing up the page into the desired number of columns and gutters
Place the elements on the grid
Using a framework
- Design frameworks for Illistrator, Photoshop, InDesign..
- CSS templates to get the structure up fast
Will soon become embedded in the culture of the designers and developers

Downsides of using a grid

They are constraining
CSS frameworks have been known to be bloated
Changing the grid after sites have been launched can be difficult
Can lead to non-semantic naming conventions

Some frameworks and resources

Photo by adactio

Designing a Custom Flip Cam

Karlyn Morissette — Tue, 25 Aug 2009 11:57:27 +0000

How is this for great – one of the first things I got to do after being officially hired by Fire Engine RED was design and buy a Flip MinoHD to use at NACAC. After conferring with Keith, a fellow new FER employee and a compatriot from an old job, I opted for one of our favorite viral video characters, Salad Fingers (Keith went for a Steelers football helmet).

TIME OUT

Never heard of Salad Fingers? Consider this your opportunity to get introduced to one of the most AWESOME cartoons ever. It’s also a bit disturbing. Consider yourself warned.

A simple YouTube search will produce results for more episodes

BACK TO YOUR REGULARLY SCHEDULED PROGRAMMING

I just received my Flip in the mail today and, I have to say, I’m pretty impressed with the quality:

Start with an image that is 600px X 1200px. This is the recommended size and dimensions to make sure your design works when it’s put on the camera. You also have to navigate around the lens and band, as well as the Flip logo on the lower right hand side. Download this template to use when you’re creating your masterpiece – it will show you where these items are so you can design around them.

Once you have your image, visit Flip’s website and upload it so you can see how it will look on the camera.

Once you’ve uploaded it, you have a limited number of options, including positioning, rotating the image, and scaling it. Just keep playing with your image until you get it exactly right, and then make your purchase. I received mine a week after purchasing, so it was a pretty quick process.

How does this apply to higher ed? One of the easiest things you can do to create content for your YouTube channel is to give your student bloggers a Flip cam and let them go to town. Why not brand your cameras with institutional logos? Or give your students a bonus and let them design their own camera, to keep, as payment for doing the grunt work for you.

Or this might not apply to your job at all and you just want to design yourself a really cool Flip cam

Image Library: Moving from Extensis Portfolio to Google’s Picasa

Rachel Reuben — Mon, 01 Jun 2009 12:00:12 +0000

We’ve been using Extensis Portfolio Server and clients for five years between two departments, Public Affairs and Design & Printing Services, to attempt to organize our digital image library of nearly 50,000 images. We’re also starting to store videos on this same server. We have a mixed environment of PC and Mac platforms. The PCs automatically map a network drive to the dedicated server through a Novell login script when we login to our computers everyday. The Macs mount the server via Finder > Go > Connect to Server.

When we initially purchased Extensis, we figured it would take a year or so to get up to speed, get everything cataloged, add meta data, etc. before we would start to see a return on our investment in terms of the time it would save us in finding images for print and electronic projects. This couldn’t be further from the case. This product has been extremely hard to use, slow, and is not overly intuitive for basic users. As a die-hard iPhoto user for over four years for personal use, I’ve been in search of a comparable product for our multi-platform, multi-user networked environment.

I’ve tweeted a number of times in recent months about my displeasure with Extensis and search for a new solution. Extensis was even listening on Twitter and another vendor’s forum in which I posted, and offered to have a senior sales engineer call me to discuss our concerns. We had that phone call, and it didn’t help. Their software just doesn’t meet our needs. Michael Santoroski responded to one of my tweets earlier this week and put me in touch with his colleague Whitney Anderson, who sent me a very detailed e-mail about their switch from Portfolio to Picasa. She blogged about it over at High on Web with the detailed pros and cons list she sent me. We’re just starting to implement this solution, so we have not yet tested it in all of our use cases, in particular multi-user update. Here’s what we’ve found so far.

Picasa is the best solution I have found for us. Not only is it user friendly and extremely fast, it’s free – big differences from Extensis Portfolio.

But wait, what about my meta data?

One of our primary concerns in deciding whether to make the switch was whether we would get all of our meta data we’ve put into our Extensis catalogs over the years back out and into Picasa. It was a bit of a challenge, but we did figure it out.

Using your Extensis Portfolio client, open your catalog(s) and select all of the images within. Control (Mac) / right (PC) click on one of the images. Choose “embed properties” from the sub-menu, then “view metadata settings…” The two main fields in the catalog we were most concerned with were “keywords” and “IPTC-creator” (photographer credit). Select each of those on the left side, and on the right side (‘where to embed the field data’), map them to “IPTC-keywords.” This embeds the meta data you had entered in Extensis into the image file itself, which now makes the terms searchable within Picasa.

Test thoroughly before complete abandonment

My Senior Web Producer and I are still testing this switchover and have not deployed it to the rest of our department or other areas yet. As soon as we’re done testing in the coming week, we plan to write up a guide for Mac and PC with installation and setup instructions. While it will be quite specific to our environment, if seeing this guide would be a helpful starting point for you, please leave me a comment below or contact me directly, and I’ll be happy to share.

What’s your story?

What digital asset management tool do you use? Do you have a custom built tool, or do you use a commercial product? Are you happy with it?

College Ads on the Boston Subway

Kyle James — Mon, 11 May 2009 13:00:57 +0000

So I was riding on the subway the other day and just so happened to have my Nikon D90 with me and was noticing all the ads for colleges. For those of you that didn’t know, Boston is the quintessential college town. Everyone knows about Harvard, MIT and Boston College but their are A LOT of institutes of higher learning in this town! So as I’m riding on this T (Because that is what the subway is called in Boston)… looking at the ads… with my camera… how can I not snap some pictures of these and share with you?

This wasn’t the first time that I’ve noticed all the ads on the train, in fact a few weeks ago I tweeted that Suffolk was the clear winner then and I still hold by that. So Jessica if that was you congratulations, if not be sure to tell the person in charge I thought it was the best!

A few notes as you view the ads:

Suffolk wins because of nice visuals, strong layout, short easy to remember URL to a landing page (although you might want to put some tracking tokens on that redirect). This was one of the few that had lots of text but I am a strong believer in over giving. Besides many people spend their time on the T reading anyway, why not read a poster ad if it’s of interest to you? That way you can have lots of strong information to get you excited and help to modivate you to make that next step!
Most didn’t have a lot of text on the ad and of those I felt Boston University was the strongest mostly because of the strong visual call to actions of contacts.
Notice Cambridge College’s url with the “info22″ that sends to a landing page. What is really neat about this is I’m guessing they probably have at least 21 other campaigns they are running to test each campaigns effectiveness. (In fact upon changing the number at the end a few of the lower numbers send you to the same landing page) Nice testing job guys!
Finally I’m probably breaking some higher ed cardinal sin by calling them out (that’s ok because I don’t work in Higher Ed anymore) but Harvard… www.summer.harvard.edu Really guys… Are those extra four characters at the front necessary? The whole point of having a short URL for print is to save people from typing and summer.harvard.edu does the job just fine! Also of the nine ads Harvard was the one that didn’t include rip off pad. Not saying that they need it or that I’m a big fan of the element but of the nine ads on the T it was the only one to not include this element that seemed to be pretty standard.

So what do you think? What is your favorite ad? Any other things that you noticed that I missed? Feel free to leave you comments below or surf on over to the Flickr images and leave them there.

Talkback: Successful Higher Ed Branding for the Web

Michael Fienen — Thu, 07 May 2009 13:00:11 +0000

Hopefully, when I mention the words “branding” and “print” in the same sentence, every web developer out there reading this cringes. So, with that in mind, how many of you have web branding guidelines that grew from print standards? I hope the number is very few, but I suspect that there are a lot of hesitant hands in the air. This post is more for you. I don’t have an answer, and am more interested in what the feeling amongst you all is.

My question is this: How do you set up successful branding standards for the web? My opinion is that there are three answers:

You have a global university branding document that just sort of covers everything (sucky)
You have a global university branding document that outline some exceptions for the web (better, but not great)
You have a true web branding/style guide which helps direct your web site (best)

The reason I don’t think we see more of #3 is that it takes time and experience to develop such a document. The need for one has only recently become really apparent, and frequently we lack a truly diverse and experienced staff base to write a good web branding guide.

I ask because it’s come up more than once that we shouldn’t use Times New Roman font, because the branding standard serif font is Goudy Old Style. Naturally, the people recommending this have no clue about web safe fonts (nevermind how poor use of TNR as an alternative just makes your site look dated and scruffy). Also, we have a number of guidelines regarding the exact proportions of our logo, and how it can’t be modified to a different shape. Realistically, there’s no way we could just slap our two tone graphic on the site like a sticker and have it look good. Don’t even get me started on the fact that one of the school colors is gold (basically yellow). Oh how fun working with yellow is!

Obviously, web design requires certain artistic flexibility. You have to be able to design your site, and that means you cannot be bound by all the chains of print. Besides, print needs bounds because it’s limited in what it can do. We are, in many ways, limitless. Web and print are different monsters, through and through. Trying to retrofit print standards is just going to stifle and choke your web site, and keep it from ever reaching its full potential.

So, talkback below. What do you think makes a successful branding document for a university web site? Who has the best? How would you change yours? Let’s brainstorm some best practices.

photo credit: Jolante

Inspiring Design for Higher Ed

Michael Fienen — Thu, 30 Apr 2009 13:00:13 +0000

I ran into an interesting problem the past weekend. While planning a new site, I realized that I was just totally tapped for good ideas for a new site design that would pop and be happy and dynamic. By nature, I am no designer, and I readily admit that. I am, however, good at taking a look at things others have done and adapting it to my own needs. So yeah, okay, I basically steal. But hey, if it works, why reinvent the wheel, am I right? This got me thinking about higher ed, naturally, and so I asked the Twitterverse where some of you draw your best design inspiration from when working in higher ed. So, in no particular order, here were some of what I thought were the best.

Pattern Tap
This is a personal favorite of mine. It’s less good for whole layouts, but great for looking at collections of designs for particular site elements. It’s also not higher ed specific, but that doesn’t mean that there isn’t a ton of stuff we could draw in to our own sites. Users can also generate their own collections and share them as well.

Pattern Tap
eduStyle
Easily a top hit for everyone in higher education, and well deserving of a spot in a good designer’s toolbelt. A great place to find out what designs are really catching people’s eyes, and which ones are dropping the ball (happy to see our site is running +13/-3 currently). Also, keep your eyes open for the results of the 2nd annual eduStyle awards, being announced at eduWeb in a couple months. Voting for the People’s Choice award starts the first of May. Follow @edustyle for announcements.

eduStyle.net
EDU Snippets
Our own Nick DeNardis is behind this little monster. In the vein of PatternTap, it focuses on elements of higher ed websites, and like eduStyle, allows rating of those elements and how successful you think they are from a design and usability stand point. Sign up to get a daily feature, and stay tuned as he roles out additional features in the future to make it a more robust tool. Worth keeping your eye on.

EDU Snippets
CSSRemix
CSSRemix features a simple, straightforward site gallery full of dynamic and modern layouts and designs.

CSSRemix
CSS Import
Much like CSSRemix, CSS Import is basically just a gallery of web sites with nice templates.

CSS Import
Design Meltdown
Taking a page from the Pattern Tap book (or maybe vice versa), they focus on galleries of elements. More robust than Pattern Tap, they are also a little more cumbersome to use. Plenty of great samples though. They’re also on Twitter, @designmeltdown.

Design Meltdown
Smashing Magazine
This German blog is a fantastic resource for articles on everything from templates, to design, typography, and beyond. Even though it’s a little different from the sites listed above, the quality of the information they provide makes them really stand out as a must read resource. Follow them on Twitter at @smashingmag, and keep an eye out for their upcoming book.

Smashing Magazine

There you have it, a quick hit list of seven places to dig in to the next time you need a little extra brain juice (sweet, delicious brain juice). I want to thank everyone who made suggestions and contributed to the discussion, you’re all great and helped make this post possible. There were also some neat suggestions which I didn’t mention that weren’t directly web related, like ffffound.com, butdoesitfloat.com, and the book Presentation Zen for creative presentations. Be sure to share any resources you find helpful below in the comments too, in case I didn’t mention your favorite.

photo credit: lilit

Taking the idea of a cohesive Web template in a slightly different direction

Rachel Reuben — Thu, 02 Apr 2009 12:30:32 +0000

Earlier this week I wrote about reining in the outliers for a university-wide cohesive Web presence. Todd Sanders (@tsand) from the University of Wisconsin, Green Bay, had the gall to disagree with me (“for the first time EVER,” I’ll have you note), arguing that the art department shouldn’t look like the business department Web site. While I kid about his gall, I actually had to break it to him that we didn’t make history – we actually do agree on this.

Before you run away calling me a hypocrite, let’s explore this.

Art programs should do what they do best – express themselves creatively. Business programs probably don’t need to be as bold and edgy as an art program would, as they attract a different type of student. I’m not saying business program sites should be stodgy and traditional. Just different.

There are great benefits to using templates across all units of the university, but I do believe there are projects where it is appropriate to stray a bit from the cookie-cutter template. These “other sites” should still be very clear they are part of the overall university identity, but there are a number of ways to do this visually, without forcing them to conform to the standard university template.

At the university I work for, we created a new template for the School of Fine & Performing Arts, and are nearly finished with our year-long project to convert all of the departments and programs within into this new template. Their template is quite different than the overall university template that all other academic and administrative programs use. However – their School still has a cohesive School-wide presence, and there are elements in their template that tie it in to the standard university template.

We’re embarking on a redesign project of the main template and site to go along with the university’s new branding initiative. Part of our challenge will be marry the different templates together, and still clearly project our new creative strategy. I love a good challenge.

I don’t think this approach makes my previous post null and void. I still think there are many appropriate times to use the steps I outlined and push for the standard template. But, I think in the case of the example Todd brought up in the comments, he’s right. What do you think?

Flickr photo by Bill Gracey

eBook Review: The eduStyle Guide to Usable Higher-Ed Homepage Design

Rachel Reuben — Wed, 11 Mar 2009 12:00:10 +0000

As a team leader of an upcoming redesign project, The eduStyle Guide to Usable Higher-Ed Homepage Design was very useful to me. My favorite section: Recommendations. I got more take aways and ideas of what to do (and what not to do) from that one section of every university’s review than anything else in the entire book. I don’t necessarily agree with all of their recommendations – but was convinced of their perspective and credence established based on most other comments. (Cornell – “groundbreaking design?”)

It’s clever to break down universities with their pertinent stats to give their page a bit of context — the size of their internal community, where they physically reside in the country, who their primary competitors may be, etc.

Pet peeve throughout the book: URLs that end in .com/.edu, etc. should not have a trailing slash at the end.
Wrong: www.doteduguru.com/
Right: www.doteduguru.com

A wide variety of design implementations are thoroughly reviewed and explored. It gave me a great synopsis of the types of features I’d like to incorporate into our redesign, and visual ideas of how to accomplish them. I was convinced of design styles to stay away from (low contrast links with the background color behind them) and that RSS icons can and should be incorporated (along with the being able to subscribe to the feed within the browser location bar – not just the icons).

Can you get most of this info on the edustyle.net site? Mostly. But, it wouldn’t be as concise as a 95 page handy guide at your finger tips with an easy to read/reference format – especially the Positives & Recommendations section after each home page screen shot. (Ok, so the site does that too – but not all of the comments are written with such care and professionalism, and sometimes turn into a conversation/debate.)

If you’re going through an upcoming redesign/refresh, are new to higher ed, or are looking for ammunition to clean up your home page and/or add new features, buy it. Read it. It’s worth it.

Four Reasons Why to Optimize Web Graphics and How to be Environmentally Friendly

Kyle James — Wed, 20 Feb 2008 14:55:34 +0000

What is the difference between the following two pictures?

Well most likely you have to look really hard to tell a difference, if even then you can, and hopefully you can’t at all. Maybe when you brought up this page you noticed that the one on the left took a little longer to load? The picture from the left was taken directly from my digital camera and re-sized to fit on this page. (Unfortunately, I can’t claim that as my Christmas tree it belonged to my brother and his wife). The one of the right was optimized for the web for maximum clarity, but also to be web friendly. The first picture is 97KB and the one on the right is 22KB. The one on the left is over four times the file size! This is a small picture also, imagine if you have a much larger picture!

Optimizing graphics for the web is something that is very important and although many people know that it’s good to do, I think without a full understanding of why most people simply don’t spend the extra time on this.

Optimized web graphics provides multiple benefits including:

Less storage space on the server
Less bandwidth is needed to process the file
Less storage and bandwidth needs mean that hosting cost are decreased
Faster file and page loads correlate to a positive visitor experience which can lead to more visits

Also optimizing web graphics is environmentally friendly! By reducing the load you’re requiring of web servers you could extend the life of the machines resulting in less computer waste. Using less storage space and bandwidth also results in a decrease in electricity consumption. The use of dial-up connections continues to decrease those users will definitely commend you for making their browsing experience more enjoyable. On a high speed connect the difference between a two seconds load and three is minimal this could add many seconds or even minutes to page loads for dial-up users.

So let’s recap: Optimizing web graphics are good for web servers, good for Internet bandwidth, good on our wallet, good for our clients, and even good for the environment!

What do I need to know to Optimize Web Graphics?

Although the .png format continues to break into the market I’d still try to stay away from using it. The two main file types for web images are .jpg and .gif. For a basic rule of thumb .jpg are for pictures and .gif are for graphics. This rule stays true for 95% of pictures, but there are times when you can cut off a few extra kilobytes with graphics using .jpg.

So let’s look at how we optimize using Adobe Photoshop CS3. After editing your image you would then go to File -> Save for Web & Devices… In earlier versions of Photoshop I believe it simply says Save for Web.

This would then bring up a screen where you can save the file for different formats and at different settings. In his picture we have the original and the optimized one where we can see what the size is and look to make sure that we aren’t losing any quality. For JPEG’s the settings Low, Medium, High, Very High, and Maximum are probably all that you will ever need. For a GIF the Colors settings are the quickest and easiest thing to change. Depending on how many colors are in the graphic and any gradient designs you maybe be able to down as far as 16 colors. For most graphics you can get away with 32 or 64.

Final Notes

Don’t be afraid to tinker around with any of the setting in the saving for web window. Keep in mind that it is possible to over optimize. You want to get the file size as small as possible without losing any of the visual quality so it’s critical to find a balance and every image is different. If you optimize a JPEG to much it will look blurry and a GIF tends to look pixelated. Quality graphics and pictures are very important to your site so use your best judgment to optimize but don’t compromise site quality to save a few KB of download. Personally, I am always willing for my files to be a little large and look slightly better.

If you don’t have have Photoshop or the change to throw on on a copy, then Picnik is a wonderful editing tool that is completely web based and free for basic use. Even if you do have Photoshop it’s probably worth checking out.

So make sure that you do your part to keep the web a faster and bandwidth friendly place. Imagine the environmental effects and savings that could be created if everyone would do their part? So please forward this to any and all your users to inform them of the importance of following these standards.

For more information about Web Graphic Optimization you can visit these resources: