Blog Surfer

Out of Office
I’ll be out of the office until December. If you have questions related to content development for your Case Web site, event postings, news stories or announcements in Case Daily feel free to contact the Office of Marketing and Communications. If you have questions regarding the username and password for your account on the main campus Web server (Aurora) contact webmaster@case.edu. If you need to transfer your account to a new maintainer, fill out an account application form and indicate that it is a transfer. If you have questions about uploading files to your account, review the entry on Uploading…

I’ll be out of the office until December.

If you have questions related to content development for your Case Web site, event postings, news stories or announcements in Case Daily feel free to contact the Office of Marketing and Communications.

If you have questions regarding the username and password for your account on the main campus Web server (Aurora) contact webmaster@case.edu. If you need to transfer your account to a new maintainer, fill out an account application form and indicate that it is a transfer.

If you have questions about uploading files to your account, review the entry on Uploading your files with Dreamweaver.

If you need to download Dreamweaver from the software center it is now part of the Adobe Creative Suite.

Happy Thanksgiving!

Quick Accessibility Testing
A recent project of mine required me to do a quick review of the accessibility level of a site. Nothing serious, just to show what was possible to test and where the site scored right now. I managed to assemble a small list of tools that I believe did a rather good job. This article […]

CSS Tip: Positioning photos with floats
In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos.

Night shot of one of three recently dedicated light pavilions on Superior Avenue.

In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace=”5″ vspace=”5″ align=”right” into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property “float” to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page’s existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call “photoright.” The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

• .photoright is the name of the class. Usually class names don’t include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
• float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
• padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
• margin: 0; specifies that I have 0 pixels of margin on all sides. I’m using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
• font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I’ll leave the merits of various font-sizing methods for a later discussion.)
• color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3’s. Because the text is small I’ve made this slightly darker than the usual lime color.
• font-style:italic; specifies that the caption will be italic.
• width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use
  ’s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else’s. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.

Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I’ve put this at the very beginning of my entry:

Night shot of one of three recently dedicated light pavilions on Superior Avenue.

Close-up of first pavilion, floated left.

In this example I’ve used a class that defines a width of 200 pixels, the same width as the photograph. Note that I’ve included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn’t define the width. I’ve left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I’ve included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn’t include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.

Facebook Opens Up, But You Still Have To Add Friends Manually
Over a year ago two competing photo sharing services stumbled upon some thorny issues surrounding the openness of their data: Flickr initially denied Zooomr access to its API on the grounds that it was too similar a competitor, but eventually agreed to open up only if the stream was to be a two-way channel. The social […]

Over a year ago two competing photo sharing services stumbled upon some thorny issues surrounding the openness of their data: Flickr initially denied Zooomr access to its API on the grounds that it was too similar a competitor, but eventually agreed to open up only if the stream was to be a two-way channel.

The social networking space is presently going through a similar stage of evolution and thrashing out similar issues — first Google announced OpenSocial, an open standard to which developers of applications for social networks could adhere to so that they ran on any network, and Facebook have recently made moves to shrug off their perception of being a walled garden by with a similar (not unexpected) announcement. Developers are faced with a choice: one option that exists but only has two players, and another option with lots of partners but has yet to be released.

And this is all fine. I hate repeating code and wasted effort, so the fact that Bebo users can now play Scrabulous with their friends without the Scrabulous team having to write a Bebo version of their Facebook app is all well and good.

But what about those users and their connections?

All of this openness and talk of API parity and open standards does nothing for the fact that the biggest complaint by anyone who uses more than one social network is that they have to re-enter their data every freaking time they sign up. Sure there are hack ways to get most of your data out, but the resulting data doesn’t exist in any kind of standard format that you can then reuse with a different network, and the contact information you can retrieve is restricted anyway.

Besides, what format would it take? XFN? Ha! Brian Suda wrote recently about how Microformats could be the answer to this problem, but not enough social networks support them yet, so this is not yet practical.

Am I naive to think that, if we fast forward a few years to when everybody is using OpenID and OAuth, we’ll return once again to the concept that there is no social network other than the Web?

This article provided by sitepoint.com.

Spotify is a lot like…
Hi. Today I want to tell you about a music player called Spotify, that I like. What does that have to do with web development? Nothing, that’s why it’s in the “other” category Anyway. Spotify is a lot like Pandora, you know that music player that runs as a flash applet and suggests music based […]

Clarke Calls for CSS Working Group to be Disbanded
Having recently announced the CSS Eleven initiative to provide designer feedback and input into the W3C’s CSS Working Group, Andy Clarke has responded to the Opera-Microsoft antitrust action by calling for the Group to be dissolved entirely and rebuilt without browser vendors in a controlling role. He considers this necessary not only […]

Having recently announced the CSS Eleven initiative to provide designer feedback and input into the W3C’s CSS Working Group, Andy Clarke has responded to the Opera-Microsoft antitrust action by calling for the Group to be dissolved entirely and rebuilt without browser vendors in a controlling role.

He considers this necessary not only because he doubts that the representatives of Opera and Microsoft can collaborate on CSS3 while locked in a legal battle, but also because he feels it’s time the future of web standards was led by those of us who will eventually use them in our daily work, not those who hope to make money by making browsers.

Clarke’s indictment of Opera’s legal action has been echoed by many in the web design community. CSS expert Eric Meyer considers the Opera move to be bad timing, coming right when Microsoft was showing promise with IE7 and the upcoming IE8:

It’s the wrong move at the wrong time, sending precisely the wrong signal to Microsoft about the importance of participating in development and support of open standards, and I can only hope that it comes to a quiet and unheralded end.

But few seem to agree with Clarke’s proposal to restructure the CSS Working Group. Many believe the group has life in it yet, while others are calling for the wholesale abandonment of the W3C process.

The voice of reason in all this seems to be Alex Russell of the Dojo Toolkit. In his article, The W3C Cannot Save Us, he explains that what is really holding the Web back is our fanatical devotion to web standards, and the expectation that they can dictate what new features should be added to web browsers.

Put simply, Zeldman is hurting you and only you can make it stop. Neither the CSS WG nor the HTML 5 WG nor, indeed, any W3C working group can define the future. They can only round off the sharp edges once the future becomes the past and that’s all we should ever expect of them. As much as they tell us (and themselves) that they can, and as much as they really would like to, the W3C cannot save us.

Long-time Tech Times readers will not be surprised that I agree with Alex. His opinion is pretty much what I said in the Tech Times #137, way back in April 2006:

In my mind, it shouldn’t be the W3C’s job to develop new standards from scratch, nor should the W3C be responsible for championing new features in individual browsers. Those are the jobs of the innovators and early adopters, who push the boundaries of the possible, producing early implementations that blaze trails for future standards to pave.

The one sticking point that Alex doesn’t mention is software patents. If browsers go out and patent every innovative feature they develop, these features will not be freely available for the W3C to standardize for adoption by the other browsers. But perhaps that’s a smaller problem than the ones we’re faced with currently.

In any case, the W3C needs to stop looking towards the future; until they do, the rest of us will be stuck in the past. The W3C is eminently capable of writing solid specs that describe what browsers do today. They should stick to that (it’s a big job!), and let the world know that adding nonstandard features to web browsers is not a crime.

The future is not built by consensus in a working group; it’s built by visionaries trying stuff out and making mistakes.

This article provided by sitepoint.com.

Don’t build your Web site in a vacuum
This is the fifth in a series of posts that discuss Search Engine Optimization (SEO) and other Web marketing strategies. This week we’ll go beyond the Web.

T-shirts, the Web site and other strategies featured
common visual elements. These examples were
produced prior to the 2004 branding initiative.
While this plan used a logo, you do not need a
department or project logo to create a
consistent message.

This is the fifth in a series of posts that discuss Search Engine Optimization (SEO) and other Web marketing strategies. This week we’ll go beyond the Web.

Coordinate your online presence with your other marketing strategies

Today at lunch I saw a post on Pownce from a fellow looking for someone to design a t-shirt. I’ve designed t-shirts in the past, and while I wasn’t volunteering, I did suggest that he provide more information—so any designers might get a better sense of the project. He wrote back that he wanted something that would be eye-catching, abstract (perhaps like graffiti), highly readable, and that his company colors were white, green and dark gray/black. I wrote back asking more questions about goals, target markets, how the t-shirts would be distributed, quantities, printing methods, PMS colors, his other marketing strategies, etc.

As a marketer I wanted to know how the t-shirts would fit into his overall marketing plan, something the designer would need to know as well. As it turns out many of the questions I asked were similar to questions one should address when building a Web site. As those who’ve read my Planning your Web site tutorial know, I feel the first steps in planning a Web site involve establishing clear goals and defining one’s target audience. What I haven’t yet discussed is how your Web site fits into your other marketing strategies.

Marketing Goals

Whether your site showcases your research in advanced robotics or is meant to sell dog-shaped robotic toys, you have marketing goals. Such goals could include:

• Establishing your personal or organizational brand
• Getting invited to speak at conferences
• Having your book published
• Acquiring research funding
• Attracting an audience for your lecture/symposium
• Selling your product or service
• Recruiting students or faculty
• Driving traffic to your Web site in order to share information, disseminate knowledge, and of course, to further those other goals!

Marketing Strategies

When we think of marketing we often think of things like advertising, junk direct mail, telemarketing, e-mail (opt-in and/or spam) and the Web. In addition to these common techniques, a well-thought out marketing campaign may also include: media relations, trade shows/conferences, newsletters, flyers, posters, sidewalk chalk, promotional items (t-shirts, pens, etc.), social media networking, viral marketing (word of mouth 2.0), promotional videos, etc. Which techniques one uses will depend on goals, target audience and budgets, but in most cases a combination of strategies will be more effective than just one. Naturally one of those strategies will involve a Web site.

For most of us, our Web site is our most visible and prominent marketing strategy. It’s available online 24/7 for anyone who wants to visit. While it takes time to plan and build, it can be edited, expanded and delivered in it’s new improved state without the high cost of things like printing, video, buying advertising space and mailing. In an age when we are trying to reduce paper consumption and cost, the Web is ideal.

But our audience isn’t surfing the Web all day. They’re often out in the real world driving past billboards, reading magazines, chatting with friends and so forth. If we want to reach them, we have to reach out to them, not just wait for them to come to us. Just as we use e-vites and printed cards to invite people to our parties, so can we use other strategies to promote our goals in conjunction with our site.

Marketing Plan Example: Thursdays in the Park

In the summers of 2002 and 2003, Case held a series of concerts in the Turning Point Garden called Thursdays in the Park. Our goal was to provide an activity where faculty, staff and students could come together and to bring members of the Greater Cleveland community to campus. University Circle, Inc. (UCI) later expanded on this idea with Wade Oval Wednesdays.

In an effort to reach out to both the on- and off-campus communities we put together a marketing plan that included:

• Listings on the Case Web Event Calendar and UCI online and printed calendars
• Space ads (print and online banner ads) in the Free Times and Scene Magazine (local entertainment weeklies)
• Announcements on WRUW (Case’s radio station)
• Street banners along Euclid Avenue
• Posters and flyers on kiosks and bulletin boards across campus
• T-shirts (worn by staff, available for sale, and thrown out to the audience by the performers)
• Listings on the Web sites of the various bands
• News releases sent to local media outlets such as The Plain Dealer (who then featured us in the events section of their Friday Magazine
• Audience surveys to determine how they heard about the concerts
• E-mail to select audiences, such as local alumni, and those who had signed up for our mailing list
• Word of mouth
• Thursdays in the Park Web site

Our media plan focused on outlets that Clevelanders regularly use to learn about concerts, as well as those typically used to reach the university audience. Having a plan in place also meant that we could choose visual elements and colors that would provide a consistent image across our print and online presence.

Later as each concert series progressed we learned from our surveys that attendees discovered the concerts through a wide variety of our marketing channels. This in turn helped us to fine-tune our strategy in the second year. And while some channels, such as space ads, couldn’t hold all of the information about the concert series, all of them (except the banners) did have room to list the Web site. By publicizing the event in these different ways we were able to reach a wider audience, draw a respectful crowd and also direct them to the site—where they could get directions, see photos from past performances and find other pertinent information.

Conclusion

While your Web site is likely the backbone of your marketing strategy, there are many methods you can use to augment it. These efforts will be most effective if they can be coordinated to focus on a common goal and deliver a consistent message. In future entries I’ll review some of these strategies in greater detail and discuss how members of your team can work together and/or with University Marketing and Communications to coordinate how these strategies can fit together.

IE8 renders the acid 2 test
I’m not sure why I don’t see that many people talking about the fact that IE8 renders the acid 2 test perfectly now. It really seems Microsoft is starting to move forward again, after starting to feel some pressure from the open source world. Will they be able to pick up the speed needed to […]

New design for friendlybit coming up
Hi. I just wanted to tell you that I’m now working on the new friendlybit. I’ve listened to your previous comments, and these are the changes I’m going to make/not make: Blog format stays, no community. You’re damn conservative (something like 95% percent said to keep it a blog). More compact writing. I’ll skip more of the […]

Don’t attach HTML-files in Outlook
Just a short word of warning. I thought I’d mail the min-/max-width template to a colleague at work. So I fired up Outlook, attached the file and sent it. I thought that was it, Outlook couldn’t get something simple like that wrong, could it? Yes it could! Opening the file I found some pretty nasty […]

IE8 Passes Acid2 Test, Web Standards Project Dies of Shock
Although he goes out of its way to downplay the significance of the event, there is no missing the sense of achievement in the words of Microsoft’s Dean Hachamovitch on the IEBlog today: I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. The Acid2 test […]

Although he goes out of its way to downplay the significance of the event, there is no missing the sense of achievement in the words of Microsoft’s Dean Hachamovitch on the IEBlog today:

I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode.

The Acid2 test was developed by the Web Standards Project (WaSP) as a challenge to browser developers. In a single page, the test makes use of a broad range of features from several different web standards that developers have wanted to have in browsers for some time, and it uses them to display a deceptively simple smiley face.

The first browser to support the Acid2 test was Safari 2.0.2, back in November 2005. Since then, iCab and Konqueror have announced their own support. The current beta of Firefox 3 comes close, but isn’t there just yet. With this announcement, it looks like Internet Explorer may actually beat it to the punch!

At the time this post was published, the Web Standards Project’s web server had collapsed under the strain of traffic generated by this announcement, but thanks to the Internet Archive I was able to collect this list of new features that we can now infer will be supported in IE8:

• displaying images with the