Showing posts with label 419. Show all posts
Showing posts with label 419. Show all posts

29.8.07

True Font Families

A List Apart is featuring an article on the future of CSS. Their prediction? Increased compatibility with web fonts, decreasing reliance on browser compatibility. Today, if a user doesn't have a font, tough luck. But in the future? CSS coding could allow for a broader range of fonts, pulling the font-families from the web rather than from a user's library.

Like the author of the article, I'm all for this particularly because it would reduce the amount of unnecessary image files floating around to convey text. I'm a desigin minimalist-- try to keep code as trim as possible. But even I get frustrated at the (lack of) font compatibility on the web. I haven't messed around with True fonts yet, but am certainly going to incorporate them into my 419 class next semester.

30.7.07

Sliding Header

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

the sun shining through some clouds: a metaphor for an english class (?)

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):

div#container {
min-width:520px;
border:1px solid #12385D;
}

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 CSS for div#header:

div#header {
height:200px;
overflow:hidden;
background-image:url(headerimage.jpg);
background-repeat:no-repeat;
background-color:#12385D;
background-position:right;
padding-left: 12px;
color:#ffffff;
border:2px solid #FFFF00;
}

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.

26.5.07

I didn't make this...

...but my students did. Here's the winning project from my "Project Website" design challenge this past semester: a new Indiana Voluntary Organizations Active in Disaster site. Six groups of students redesigned and coded the website of a local non-profit organization. The organization then selected their favorite design. All the pages should validate as XHTML and CSS (making the web that much more sustainable, semantic, and accessible one page at a time).

the new invoad homepage, a dark gray background with bright green headers and buttons

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!

5.5.07

Levinas website

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...

1.3.07

CSS and Background Images

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?)

23.2.07

So busy...

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!)