DAVID R STONG: May 2007 Archives

Color for the web

| | Comments (1)

I calibrate my monitor monthly with the Gretag/Macbeth Eye-One color calibration system: I hang a meter on my monitor and it takes measurements, makes adjustments, and saves a profile. I've read the documentation on color management available from Adobe and Apple. I check their forums regularly and participate when I can. I've downloaded color profiles from Xerox and HP so that I can create an image in Photoshop and get a match from our Phaser or 5500 to what I see on screen. I'm concerned about color, experiment when I can, and always read new information.

My job duties have started to change. I'm being called on to do much more basic web layout and template design. I usually design for the web in such a way that extreme precision of color doesn't become a necessity and "very close" looks perfect. With new duties, I've been having to match png and jpg images with backgrounds generated by CSS hex and "very close" needs to be perfect. It ain't happenin'.

Photoshop is a controlled color space. My calibrated monitors are a controlled color space. Safari is a controlled color space, though Firefox isn't. When I create an image in Photoshop, I should be abe to "Save for the Web" and get what I want. It looks like I have to start wanting what I get. The standard mantra- "Convert to sRGB before Saving for the Web." -doesn't work; in fact, nothing I've tried- no combination of Photoshop color space/monitor profile/document profile, or even turning off color management, lets me work on exactly the same image everyone will see.

Screen capture showing one color in browser and another in Photoshop.A square of color filled with #003366 (medium warm blue?) can start with an sRGB profile or be converted to one. Saving it for the web (PNG-24), then placing it on a page with #003366 called as the background color, gives me a perfect seamless blend in Safari and Firefox. With that blue page open in the background though, the original image on top of it in the Photoshop workspace looks like a totally different color.Digital Color Meter says they're different colors. When I open the saved PNG file, it matches the original. Digital Color Meter, when held over the color chip in the Photoshop tool bar, says it isn't what Adobe says it is. I can't work like this. This screen cap shows the discrepancy- and Photoshop samples the dark version as the wrong color here, but as #003366 in the actual image.

For years I've avoided Fireworks. Macromedia apps have seemed a bit brittle and if needed I'd use ImageReady. Imageready, though, was matching Photoshop. On a whim, I dropped my Photoshop image into Fireworks. It opened a beautiful duplicate of the image I was seeing behind it in a web browser. Well damn; that's exactly what I need. So the new mantra for me will be "Convert to Fireworks before saving for web."

(I'm using the CS3 Web suite- and luckily Adobe didn't break Fireworks... whew!)

Anaglyphs from Second Life


An anaglyphic image of the Second Life landscape. An anaglyphic image of the Second Life landscape. I discovered a memorial park in Second Life (Memoris cemetery park -- BOCH, Memoris (214, 109, 35)). Walking through the landscape was very much like walking through the landscape of a real world memorial park: quiet, peaceful, with time for personal introspection. Since I could leave my avatar unattended without attracting interactions or interruptions, which I deplore in the real world as well, I was able to capture several images that show the anaglyphic capabilities of the environment. So, do you have a pair of red and cyan 3D glasses?

There's instructions for creating an anaglyph from two images (I used two screen captures taken an "eyewidth" apart in SL) posted on my personal page as an experimental sound file. .

style catcher experiments


Beige and blue layout. The elms on U P campus.The Lion Shrine.I've placed a few simple css experiments on a web page off of my personal page. They're the simplest two column layout with the Penn State shield in the banner. They have URLs under them to copy and paste in the stylecatcher, but if I've done things correctly, the styles may also be appearing in the MT Library.
The latest ones look like this:

blogs taking off


This is a real kluge.

The Penn State mark, although it's actually considered content, is placed with the theme stylesheet in the background of my page header.

I could tweak the theme stylesheet and put some of the code there to make the shield appear to be a link, but encouraged by the creation of my first widget, I wondered if it would be easier for most users to put the link in another widget. I tried it, and it works.

I created a widget as before, but this time, instead of copying another widget's code, I wrote my own. It's a knock-off of the standard code used to make the shield hot when it's a background image; a css image replacement technique. The difference is that all the style is "in-line". Therein is the danger: inline styles are deprecated, and for good reason. It's "style" that isn't really separate from the html.

Depending on exactly where your image sits, you may need to tweak the positioning. And it may not work on Windows... but this is the code from the "Module Body" of my experimental widget:

<a style="position:absolute; top:-120px; left:-425px; display:block; width:118px; height:51px;" href="http://www.psu.edu" title="The Penn State home page.">
<span style="position:absolute; left:-9000px;">Penn State</span></a>

If you take a gander at the area of my blog containing the "Search" function, you'll hopefully still notice the three text links required for all official Penn State search function areas...

Writing the xhtml is easy, and we've probably all done it. Getting it to persist in place in one of the penn state blogs is something else again- possibly intuitive for some, but certainly not for me. What you have to do is create a widget- not a Mac wdgt file, but a little chunk of code that will persist in the MT templates.

On the left hand side of your MT Publishing Platform interface you'll see headings like "Posting" "Community" and "Configure"... Under "Configure", click "Templates". Then at the top of your list of available Widgets, There's a link called, "Create New Sidebar Widget" Click it.

Now here is where you write your code- but first, in the Template Name field enter the word "Widget:" It's necessary. Then type the rest of the name; mine was "Widget: Penn State". Next I skipped the "Link this template..." field and went right to the Module Body field. For this, it's easiest to copy and paste. I wanted to have the Search feature, only with my links added- so I grabbed the Search function code. That's available if you go back to the "Templates" list of widgets and click on "Widget:Search form". You'll get a page just like the one you're writing your widget in, only there's code in the "Module Body" field. Copy it, and paste it into your widget's empty Module Body field. I added my text links to the three Penn State areas- People, Departments, and Penn State after the DIV that encloses the form but still within the "module-search module" DIV. Click "Save."

Now get it on your site: Click "Templates" in the Breadcrumb trail. This time you'll see the list, but your widget will be in it. At the bottom of the page, click "Manage my Widgets", open the Widget manager, and drag the installed SEARCH FORM into the available Widgets column and your widget into the Installed Widgets column. Save, and that's it. The links will persist through style changes and rebuilds.

Another experimental style


Still experimenting with styles; this one starts with the style Brad is using (loosely...). iphone style. I need to smooth out the middle texture on this- but fixing the image and going through the process of reattaching the style just stinks. Playing around with folders, heirarchies, and keyboards is not how I want to spend time.

So now the middle tiles well enough, but it doesn't blend with the bottom texture. Important note to self: get everything right locally or in a test space before taking it in to the MT environment. Buttons to help me "Upload Images" just make no sense when I have the site already open as a folder on my desktop. I guess the DreamWeaver army will love this sort of crap.

I read Mark DeLuca's blog post about tweaking a MovableType theme so that his personal blog has a personalized look. What really makes me think is his line, "...it's really easy to tweak things (and quite addictive)." I have a lot of rambling disconnected thoughts about it , so bear with me.

The Public Information people in Old Main created a number of "Templates" to help people get on the web. ETS created a few templates, too; seven years ago. There are templates all over the place, including a wealth of them at the Movable Type site. The folks that wrote our Movable Type Help pages even recommend selecting a style that looks close to what you want and tweaking it. What I notice on the Penn State web is that I've never seen our templates in use. Nor one of the PI ones. They could really just be unacceptable, but the chances are that people have grabbed the code and used bits of it to speed their own work. I believe that's the way they'll continue to work.

So I figure out the div id="???" structure so that my templates can work with different configurations, spend time trying to muster a look that may seem attractive to Penn State users, figure out how to get the things into the MT StyleCatcher Archive, and as work flies by, try to sprinkle on some design dust. Then somebody grabs my theme, and tweaks the heck out of it. Why did they tweak it? What were they actually looking for? Would it be better/easier to just give them that?

There are a ton of themes. Some really great ones. So what would people at Penn State be looking for in a theme? My guess is, any theme will do; they'll change it because they can. What they may need is the official indicia and crystal clear directions on getting them on their pages. Maybe training videos showing the process of adding an official mark to a banner background? Tips on making it a link could be included. Tips on coding links to Penn State Search. They may want some bits and pieces- campus specific photos to use as backgrounds, perhaps. An assortment of marks. I guess I see providing usable pieces and clear instructions as more empowering; while at the same time, I see the creation of Templates almost as an act of vanity. Provide a Penn State "wiget", with everything in place, instead.

One of the most daunting tasks for me to tackle as I approach the design is completely understanding how the DIVs are laid out. Check out this simplified example: as well as this experiment I'm building from it

and so it begins


Well, I'll get to the design, illustration and hollandaise part later. For now, I need a bit of quick content to do testing on, and I'm sure you've all read Cicero's de Finibus a few too many times. As I build experimental styles for the MT StyleCatcher, I'll put them on the personal server and test them here as my own StyleCatcher templates.

This is a bit like working in someone elses studio with their tools. Most of my energy is going in to learning where everything is, how things relate, how to get my brush strokes on the canvas. Unfortunately, the output is supposed to exhibit the refinement of an experienced designer. For that, I should have been purposefully using MovableType a year ago.

Come to think of it, de Finibus would be appropriate filler for this dawning of the new OldBlue.jpgera of Movable Type... Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Penn State
April 18, Symposium 2009; reimagine.
New content. Symposium 2008.Digital Commons at Penn State. Improve the workplace; hire for variety.


Blogging at Penn State. Podcasts at Penn State.

My del.icio.us Network:

Me with a camera.

My del.icio.us Links: