Journal
Anchorman
3 October 2006 › 21 comments
Update: Since the question had been raised – I used Trade Gothic Bold for Andrew’s name in the branding. The secondary serif font in the tagline is Garamond, which comes pre-installed on most operating systems. I chose it for the hanging capital “J” because I thought it lended a bit of elegance.
At the risk of type-casting myself, I have done another single page website. This one is for my old college friend Andrew Logsdon. He is a graduate of the Edward R. Murrow school of communication at Washington State University, which I am told is one of the best programs for broadcasting in the nation. He is also working towards a second bachelor of science degree in meteorology.
He recently re-shot an entirely new demo reel in Los Angeles, because his original tape from college had been damaged by movers. Getting into the news business, a good demo reel is like gold – much like a portfolio is for a designer. So, when he decided to actively pursue a career in television broadcasting, I had the brilliant idea that maybe a website would help.
While this site is only one page, it has all the bells and whistles. His demo reel is being streamed in as a FLV file via a tiny embedded SWF player. I am using the handy SWFObject JavaScript written by Geoff Stearns. This is for two reasons: First, to make sure users have the Flash 8 player installed, since it is required to play the new Flash video format. Secondly, it gets around the nasty new multimedia impediment in Internet Explorer versions 6 and 7.
As a fallback contingency plan, I went ahead and added links to download a Windows Media compatible .avi or Quicktime .mov file. These appear when the user either has an incompatible Flash player version, or when JavaScript is turned off. This way, nobody misses out for lack of proper technology. As an added bonus, the movie already has the perfect dimensions for video iPods (320×240 pixels), which play the Apple Quicktime format by default.
Being that this is a site for a journalist, I figured it could do with a good print stylesheet. This is one of the points I am most proud of, as it’s something I typically neglect, even for my own site. Below is a screenshot of what the print layout looks like. To encourage printing, I put a JavaScript activated print button pseudo-link with javascript:onclick=window.print(). You could say this is obtrusive and not degradable, but I honestly can’t think of a way to mimick this functionality without JS, so it’s a moot point.
So yeah, there you have it. Go check out the site, and leave any feedback in the comments of this article. Also, if you know of any TV stations in the Northwest looking to hire a capable reporter or news anchor, please refer them to Andrew’s site. I can personally vouch that he is a nice guy, and he obviously has a solid understanding of what it takes to be a good journalist.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Robert
Nice looking website Nathan! I like that you styled up the print page, something I neglect most often – you’re giving me inspiration to go work on my print sheets.
I’m really becoming a fan of the one pagers. They have their place, and this is definately one of them.
Good job!
#2 Dan Mall
I definitely appreciate the use of Flash here and the way it’s being done. Just goes to show that any technology can be relevant if you know where it’s appropriate.
Just wondering: any reason you chose not to generate the entire print link into the DOM with Javascript?
#3 mjwillis
A possible alternate print solution would be to link the print button to the same page with a URL query string (ex. index.html?media=print), and use server-side scripting to make logsdon_print.css the primary CSS file (no media specified).
#4 Stuart Colville
As you’ve alluded to, the only thing with doing the print link the way you have, is that if a user hits the page without javascript available the print link won’t do anything which could be confusing.
So a possibly better solution would be to either generate the link with javascript, so that it’s not there when javascript is not available, or, put a real link that takes the user to a page that explains how to print the page from their browser, which you then hijack with javascript to do your bidding.
Other than that minor point it’s a nice looking site and I dig the flash player!
#5 Josh
Very nice. :)
#6 Jon
Again, Nathan, I’m very impressed. The print stylesheet came out really great. To be brutally honest I think my favorite element is the footer ‘banner’ (I can’t think of a better word for img/container.gif)—to me it just… came out exactly right.
Flash degrades nicely and the page came out just great. Awesome job!
#7 Rogie
Nice site dude, how do you crank these guys out so fast! Just returning the favor…might wanna check out the typo “brodcast” in the title tag ;)
Peace.
#8 Nathan Smith
Dan / Stuart: Thanks for the tips on using JavaScript to display the print link. I decided to just hide the link by default with CSS, and am overriding it with a little non-standard document.write action, when JavaScript is enabled.
As for the suggestion by Willis, I didn't want to go that route because the DOM that is present is perfectly usable with an alternate stylesheet. I wasn't saying that having a stripped-down page was impossible without JS, just that causing a browser to auto-prompt for printing is not really possible otherwise.
Rogie: Thanks. I’m such a newbie, not even checking the title of the page. As far as cranking them out so fast, I dunno. I would say an over-abundance of free time, but that’s really not true. It was for a close friend who needed a site ready for potential employers, so I wanted to make sure it happened.
#9 Andrew Ingram
Site looks nice, i’m not a huge fan of the typography for the heading (date, place, qualification etc) in the experience section though. It looks a bit out of place.
Oh yeah, the saying is “moot point” not “mute point”. I only point it out because I know how much you like getting your content accurate.
#10 Nathan Smith
Andrew: Thanks for pointing out that “moot” point! I fixed the typo. After taking a second look, I agree the 12px Verdana does look a little generic. I will see if I can’t find something a little better when I get a spare minute.
#11 Ryan
Hey Nathan,
Long time visitor, first time poster…
I’ve found your articles very helpful and inspiring while I take on the css learning curve, not least from a ‘the church should be accessibility advocates’ point of view.
Was checking out the source code to Andrew Logsdon’s site and noticed you have the brodcast typo in your keywords meta tag too.
Cheers for inspiring a lazy coder in New Zealand!
#12 Nathan Smith
Ryan: Thanks for that! I am not sure why this particular word has given me so much trouble. I guess I shouldn’t work on sites late at night because my brain tends to go a little fuzzy. I’m sure my friend would like a job in broadcast as opposed to brodcast! That’s cool you’re from NZ. I hope to visit someday.
#13 Ryan
Sweet bruv, I’ll leave the light on.
I’ve had a couple recent cases of late night brain fuzz myself, someone should arrange more hours in the day :p
#14 Pablo Pereira
Curious to what you charged to put this website together. It looks good and I have some interest in doing my own.
Thanks
#15 Nathan Smith
Pablo: It was mainly just a favor to help out a friend. I am not really looking to take on any additional projects right now, since I am preoccupied with co-authoring a web design book and finishing graduate school online.
#16 Jason Beaird
My only issue…and it’s a silly one…is that you used that nice bright green accent color in the header stripe, favicon, and print button, but didn’t use it anywhere else. I kept looking for it as I scanned the page. Even hovered over the SonSpring link in the footer hoping it was the hover color, much to my disappointment. :)
#17 Nathan Smith
Jason: Alrighty, I have added in a little more green, and got rid of the shades of maroon. I swapped out #933 for #690, so hopefully that helps keep the color scheming a bit more consistent. So sorry to have disappointed you!
#18 Jason Beaird
Wow! That was fast… I wasn’t saying that in a “you have to do this or else the site sucks” kind of way. It was merely a “next time you should think about it” sort of suggestion. Between you and Dustin, I’ll soon have a reputation as the color-nazi if I keep making “suggestions”. I think using that green in the headers did the trick. It looks great now, and honestly it looked great before. I got your IM when I woke up this morning. I’ve never been called a sucka-fule before. Even Google doesn’t know what that is. I would say you should add it to the urban dictionary but I guess it’s just an alternate to sucka foo.
#19 Nathan Smith
Jason: Hopefully that cryptic IM didn’t come across as insulting. I meant it more in a Mr. T / A-Team sort of way, where I “pitty dah foo” who be messin’ wit mah color palette! Thanks for pointing it out – looks better w/ green.
#20 Ryan
Nathan, I’m curious as to why you used px for font sizes in your css? I see that in Firefox the font resizes, but not in ie.
Personally, I’m sick of having to do em font size calculations depending on how deep in the tree a child element that contains the text is…
#21 Nathan Smith
Ryan: I do so because IE6 is a buggy old browser that people need to get over and learn to move beyond. The last time its rendering engine was updated was in the 1990’s. Even the now retired Internet Explorer 5 for Mac could re-size fonts set in pixel based incriments. So, I consider it not a problem with pixel sizing for fonts, but a problem with the decrepit Microsoft browser (Note: decrepit and Microsoft in the same sentence is redundant).
While I’m well aware of cool methods of using Ems to size things, and have even written some articles on how to do it for images and Flash, I too grew sick of specifying things using
emand percentages. So, being that according to the W3C pixels are supposed to be a relative unit of size anyway, and the fact that IE7 is right around the corner and does Opera-style zooming of a full page – I see no problem with using pixels for font sizing.I do not consider font sizing in pixels to be some abuse of the way HTML or CSS works, unlike tables for layout. The fact remains that for reliable cross-browser handling of text sizing, pixels are really the only sure-fire way to keep everything consistent. I know that accessibility die-hards will disagree, but I am tired of letting Microsoft slow down the rest of the world. I don't think we should coddle them. It's time for Microsoft to catch up, or admit defeat by bowing out of the browser market and playing XBox instead.
I wrote up a fairly lengthy forum reply on this very topic. I pointed out that guru coder Jonathan Snook and accessibility expert Joe Clark have already spoken in favor of pixels for font sizing. You can read my reply here:
http://godbit.com/forum/viewtopic.php?pid=10083#p10083