As I mentioned in my last post, I've created a "sliding header" technique: a CSS method for handling screen resize. Since buying a mac and regularly using Safari, I've been a bit more sensitive to the need to create pages that handle different screen sizes. My newest solution involves sliding a background image under the regular header text. My new course website shows the technique in action (try viewing the page at full screen and then at half screen--though I haven't tested it in Firefox or Explorer yet).
Here's how the trick works. First, the HTML code:
<body>
<div id="container">
<div id="header">
<h1> English 106 </h1>
<p>Fall 2007 <br />
Instructor: Marc C. Santos</p>
<h2>Composition 2.0: Rhetoric Goes Digital</h2>
</div>
Essentially, we have two divisions to work with, a header division, which contains some relevant information that we want to display on every page, and a container division, which contains not only our header, but also several other divisions: navigation, content, footer, etc. Whenever I code a site, I have one "catch-all" division called container which houses all of the page's content.
Next, the image file
Notice that the image file, which is 200 pixels high, includes the border (7pixels). This means that, if you want to duplicate my CSS code below and insert your own image, then your original picture must be 186 pixels high. I downloaded this image from Flickr and then cropped it to the size I needed.
O.k., now the CSS for div#container (its only two lines):
While the "min-width" command won't work in IE 6.0 and earlier, all modern browsers (including IE 7, if memory serves correctly) won't allow the page to shrink below 520 pixels, the requisite size we need for our sliding image.
The "overflow" property will keep everything contained just in case someone needs to increase the page's text size (CTRL + +), the postition-right technique pushes the image to the right side of the header division. Everything else above is pretty straightforward. Presto, easy way to code a clean page that can resize to fit a user's browsing style. In case you're looking to borrow the code, here's the source.
I recently finished working with a local dog group on a website redesign. Intially, I was particularly proud to recreate what was a table-based layout in xhtml and css. Later, the group decided they wanted to make some significant changes and I taught my wife enough Fireworks and Dreamweaver for her to redesign the color scheme. We worked together and remain married. Go us. But that's not today's victory.
From the beginning of the project the group wanted some kind of photo gallery for the site. The problem: how do I create a standards-compliant site that group members can easily update? My first idea was to use Flash to create a gallery. But this didn't seem like a good option, since images need to be re-sized before they are added to a collection, and every update means going in and editing the flash file. No...no..no. I also thought about using Javascript (I've done this before for Purdue's GradSEA), but this technique isn't standards-compliant.
Reading a Mashable article on image editing resources yesterday, I came across a link to ImageShack--a photo hosting service that allows users to easily create slideshows and pumps out code to embed the shows on other websites (kind of like the libraryThing widget Michael uses on Wishydig, but using Flash rather than Java). The problem? Embeds are banned by the w3c--use the easy widget, lose your validation. All seemed lost. Especially since the classic fix for embed, McLellan's satay method, works best when you can create a container moive. This wasn't the case. Then I remembered (via del.icio.us) Elizabeth Castro's article on how McLellan's technique can be used on Google Video and YouTube movies without the satay...
When you complete a slide show with ImageShack (and you don't have to register to create a slideshow, but you do have to register to be able to edit a show), it will produce this code:
The key to getting this puppy working is to include the unique id as a FlashVars parameter (the final line of the code). Google and Youtube supply each movie with its own URL, ImageShack doesn't--rather, it assigns each slideshow a unique id in its database. So, bottom line, you have to include this id to get the show rolling. The only line I am unsure of is the "allowScriptAcess" line--it was in Castor's code, but I'm not sure if its necessary. I tried removing it and the slideshow still played in Safari, but I'm not sure if it is an IE command (with the satay method, IE doesn't like auto-starting... if anyone has IE, let me know if this is working, I promise not to chastise you too much for using IE).
Victory is mine! And, best of all, ImageShack is an awesome 2.0 app--it automatically resizes images, allows for easy captions, allows users to re-order images, determine background color, tag presentations, import images from Flickr or other URL's (as well as direct upload), choose transition effects, add music (please don't), and make shows public or private. And now, thanks to A List Apart and some wranglin', it can be standards-compliant. Cool.
UPDATE: I am dumb. Problem solved. Already sent "I'm an idiot" email to ImageShack (see my comment... before I delete it). Now I have to write this post up into something a bit more constructive and submit it to imageshack's tutorial contest...
UPDATE:
Apparently the video is only working in Safari. I'm going to play with it this evening. If any visitors are looking at this post, can you tell me 1) what browser you are using [IE 6, Firefox 1.5 etc.] and 2) whether you see two movies above. Thanks.
UPDATE: O.k., its working in Firefox 2.0.0.1. But IE is being terribly tiresome. Back to the drawing board later?
I got the idea for this project from Jeremy Tirrell and am incredibly pleased at how well it worked out. It reaffirms my faith that designers / coders of any level can produce 1.0 Strict compliant sites with just minimal training--all six groups produced sites up to code. And, although I'm not sure this design screams disaster relief, it does demonstrate how standards-compliant coding doesn't have to sacrifice aesthetics. Can't wait to do this one again next spring!
I can't remember if I posted about this before, but I finished the new NALS (North American Levinas Society) website a few weeks back. This morning I coded the conference schedule for 2007--an amazingly boring job that claimed 2 hours of my life. And I still have to do standards validation--right now the page has a record 122 errors (I am almost positive that most of them have to do with special characters--a French e with accente-grave being the leading culprit).
As my del.icio.us scroll indicates, I have been reading up on microformats--coding for machines to understand, co-ordinate, and process code/data rather than just render/deliver it. Neat concept. I think this will have to be integrated into 419 next semester (my multimedia writing class), I am going to vamp up the resume project to include more consideration of rhetoric, audience analysis, and framing. If "keywords" were the key concept for the last ten years w/ resumes, I think you'll see micorformats become the next job-search craze. I worked my first microformat into the levinas conference page--using the address property for the conference location. One small step for Marc, one giant leap... oh, whatever.
Few thoughts on the Levinas site (since I still have to" write it up" for my portfolio). The goal for the site was to create an open, inviting space that simultaneously and paradoxically created a solemn and pensive tone. That is, I attempted to invoke Levinas in the site design: his theoretical approach to difference, violence, and o(O)therness. The original site design eschewed idology, and, of course, I wanted to stick with that approach. The society also wanted to maintain the solemn entrance page, although I reformatted it and combined the image of the dove with the image of the deathcamp. I used a few filters on the dove--transforming it into a transparency and washing it with the red used on the site.
I also wanted to create a flexible design--since I think this is the key contribution Levinas can make to coding. Rather than imposing a design / hierarchy upon the user, we (standards motivated designers) can create websites that invite the user. Being a new "mac" user, I am particularly cognizant of screen browsing habits (see this great poll of saavy users over at Berea St.); as a PC user, I almost exclusively maximize windows; as a mac user (Safari), I almost never maximize windows. With the Levinas site, as with my own site, I make a conscious effort to design a layout that works for a number of different heights and widths: anything from 600px to 1200px. No easy task. Height is important, too. Looking at my student websites for 419 (and a post on how awesome these are is coming soon), my one blanket criticism is that they "waste" a lot of header space. I am consistently trying to code sites that have economical headers, thus saving screen space (and no doubt this is connected to the materiality of my browsing: my macBook screen is tinie winnie compared to my old desktop. Don't waste space on me! Don't make me scroll!)
Gotta get better at keeping posts on topic...this post:
Complains about coding Levinas schedule
Begins to discuss Levinas design inspiration
Interjects a thought on microformats
Discusses browsing habits
What is this, like a hypertext or something...sorry, couldn't help myself.
Anyway, some final thoughts about the Levinas site: I wish CSS 2.x had a "border-image" property. If you look at the page in Firefox, Safari, or Opera (screw IE), you'll notice that the header and footer lines have a very light texture technique, employing a lighter shade of red in a dirty splatter pattern (the same pattern runs over Levinas' name--I wanted to interject a bit of chaos to keep the page from BEING too Modern clean. I would have liked to put the same texture into the sidebar, but the side bar is created through a "border" technique to ensure that it stretches as long as the main content. I've seen a few other work arounds for this, but there is no way to ensure that I know of to ensure that a background-image will "fill" such a space. Perhaps I need to look harder.
Oh, God, how many validation errors was that again? Find and replace, the standards-compliant designer's best friend...
A couple of posts back I talked about the resume project my students have been working on--today we created a new style sheet for it using a background-image technique I first learned from Karl Stolley as a member of his sustainable web design group last year. The workshop went well, and now those resume's look's quite different. I've ran into a few padding issues between Firefox for PC and Safari. Don't bother looking at it IE (yet--I'm not going to cover conditional comments until a few projects from now).
Up next for my class, the Zen Garden--I'm excited for this project. I am only going to look at the projects in FF/PC, so that should allow my class to get into one design (rather than having to worry about cross-browser compatibility, I'm not tackling this until their service learning project).
I've written up the first four of the six sections of my Web Standards for Professional Writing project--its at 35 pages single spaced without most of the background images. Up nex for XHTMLt: definition lists, classes, spans, and images; for CSS parent and child selectors (to go with Zen Garden), floats, and using small background images to create texture (Karl does this on his homepage, I do it as well--this one I figured out by myself! Its nice to see that I "naturally" came to do something similar to what my original standards-mentor does... what's that thing about great minds?)
I read a really intriguing post over at Berea St. on browser testing (which links to a discussion by super-hero Andy Clarke). Johanson presents his order for testing--its interesting to see how many browsers a professional looks at. I feel mighty inferior, since I test only in 1) Safari MAC, 2) Firefox MAC, 3) Firefox PC, 4) IE 6.0 PC. I really want to start testing in IE 7.0, but don't have access to it (yet, I'm figuring Purdue will upgrade this summer).
I also read an interesting article by Mike Davidson promoting a new flash replacement technology. He prohesizes that the standards community will probably roar--and as someone on the fringe of that community, I'm not sure how loud I want to yell. I am committed to creating low bandwidth webpages, because I firmly believe that broadband will become a limited resource--there's too many articles out there concerning its future limited availability. Brief list:
If the internet is going to survive, then users need to be responsible in how much bandwidth they use. This for me is part of the ethical agenda underlying what I consider to be web2.0--not just a corporate philosophy or marketing strategy, but a dispersed responsibility to every member of the internet community to behave ethically, else the system crashes (distribution of responsibility from a centralized power to individual users requires users to accept this responsibility.
On the other hand, I'm not sure how large these flash files are. Typically, the background-image replacement techniques I use don't take up much bandwidth since I keep my .gif sizes relatively small (always under 100kb). So, I won't begin to complain about this new technology until I have had more time to play with it.
Personally, I have been composing like crazy. I am currently working on an introduction to XHTML and CSS. Basically, I am transforming all of my demonstrations from my multimedia writing class into a collection of hypertext tutorials that could easily be adapted to a print publication. When finished, it should have six "sessions":
Intro XHTML
Intro CSS
Intermediate XHTML
Intermedieate CSS
Advanced XHTML
Advanced CSS
My vision is that it could be used in a professional writing class or a multimedia writing class. The project reverse engineer's the creation of a "professional web presence," integrating the howto (tech knowledge) with the "why would you" (rhetorical / design choices). Since I am working on about 8 projects at once right now, I don't have any finished product to share yet. But lots will be coming soon! (I've also committed to finishing my prospectus before spring break, so perhaps "soon" won't be all that "too soon")
Doing all the wrong things. While I am supposed to be focusing on my academics right now, I spent the last few days in a design induced spree--CSS'ing everything in my path.
It all started with my multimedia class. I introduced XHTML and CSS this week--and I'm pretty happy with how everything went. Every student entered Thursday's class with a validated XHTML document--and most left with a pretty good understanding of how style sheets work. I'm working on a detailed tutorial, hopefully I'll publish somewhere external to my own site and Purdue. The tutorial is already 8 pages, and, yes, it took quite a bit of time to compose!
My students turned this plain resume into this CSS formatted resume. I really blew through modifying list-styles, but Tuesday is another day. Up next, we're going to create a navigation section and turn a single page resume into a professional web presence...
Actually, that's all a lie. It all started when I began redesiging my own website last week. I'm looking for something more inviting than what I have up there now (since I'm hitting the job market next year, I figure the dark and brooding intellectual isn't as attractive as the bright and inviting designer. I'm also trying to collect all my projects into a portfolio section. Looking at them together, I'm quite happy with how far my design skills have come in the past four years (four years ago I thought computers were the work of the devil--I've moved on).
Moving on, I spent a full seven hours last night not writing my prospectus but rather redesigning a local association's website. No pics of this one, either, yet--but I am particularly pleased! I didn't really redesign the site, as much as reorganized material and perfectly recreated a complex, table and image based layout entirely in standards-compliant CSS. I did have to bend some semantic XHTML rules (creating two empty divisions for image borders), but I'll get over it.
Not enough crazy web design coding fun? I just started the revision for the North American Levinas Association. The site will be particularly challenging becuase it has an incredible amount of content to convert and organize--a couple years worth of material, multiple navigation systems, etc. Oh, and did I mention that its all coded in frontpage and there is next to useless? Nothing like coding 100 link resource section from scratch... yum. I have a rough mock-up, but there's still significant work to do. At this point, I'm more interested in getting the content XHTML'd, the fine design points (read:reward) will come later.
Screenshots, pics, links to all this stuff will come later. After I finish that prospectus (if I keep saying that, perhaps it will come true!)
I'm looking for something bright with a textured background. I've been working for about three hours, we'll see how I feel about it in the morning. Decision to sleep on: whether the navigation bar on the left will scroll with the page. If it does, then I might have to give up the overlap with the text section. Big decisions.
