Flexknowlogy - Jared Stein's ARCHIVED blog - update to jaredstein.org » design

Blackboard Vista Triggers Quirks Mode

Jared Stein — Thu, 02 Apr 2009 16:25:20 +0000

Ever been annoyed by Blackboard Vista’s (or Campus Edition 6+’s) rendering of your XHTML + CSS web pages? Yeah, me too–especially on Internet Explorer. This happens because Bb Vista triggers a browser’s quirks mode in spite of DOCTYPEs and validated markup.

More than just troublesome for pretty CSS-based pages, quirks mode, triggered on standards-compliant pages, can negatively affect the usability and functionality of the learning experience. For example, we use an inline quizzing Javascript that renders questions and answer choices and feedback based on standards mode CSS. In quirks mode this self-assessment tool is useless.

Blackboard Was Made For Quirks

Basically quirks mode means the browser thinks your web skills are not up to snuff, and the browser therefore renders your CSS in a non-standard fashion. Quirks mode is triggered when a DOCTYPE, e.g.:

…is missing, or invalid, or unknown, or not where it should be (i.e. the first line of the document).

javascript:alert(document.compatMode) pasted into the Internet Explorer address bar kindly informs us that this browser is rendering this page in quirks mode. Firefox will tell you if you go to Tools > Page Info. Advanced Box Model Test

But even if you’ve been careful to put a valid DOCTYPE into your web pages, once it’s loaded up into Bb Vista and linked to, either from a Folder or a Learning Module, the browser will go into quirks mode. Why does this happen? Simple: Bb Vista inserts XHTML and JavaScript at the beginning of all web pages onload. 140+ lines of it, to be exact. It’s an odious thing to do, but, what do you expect? It’s Blackboard.

It may (or may not) be important to note that this does not happen when viewing a page in the File Manager–only when a page is loaded from a link within the course.

What You Can Do

Not much. And yet this could be a big issue for Internet Explorer users (FireFox renders page in quirks mode [not "Almost Standards Mode" as I'd hoped], yet most standards-compliant XHTML and CSS still render well).

And though most users are still on IE 6 or 7 I had some hope for a way out with Internet Explorer 8. You see, Microsoft promised that “a page explicitly opts into standards mode” when it includes “a metatag in the page that specifies IE=8 or IE=EmulateIE8″. For example:

In practice, however, this META tag alone does not force IE8 into standards mode in Bb Vista–the misplaced XHTML is apparently too much for IE8 to ignore.

So the most practical solutions I can think of are:

Write custom CSS for Blackboard that renders (or re-renders) the page according to the quirks mode box model. This could be done using Internet Explorer conditional comments, for example:
I haven’t yet considered what CSS rules would need to be written to accommodate this, but if it was possible this seem like the most robust and efficient solution.
Rewrite the page with Javascript. After Bb has loaded (or begun to load) the page, Javascript triggers a full rewrite of the page, either wiping out or rewriting the Bb XHTML and Javascript in a more appropriate location (e.g. in a targeted, ID’ed element). I’ve asked one of my developers to try this out today, but already fear the additional load time it might put on the Bb-hosted page.

Any other ideas?

If this were only about appearance I wouldn’t be raising a fuss, but this can and does affect the usability of certain e-learning tools, and forces developers to ask, “How will this work in Blackboard?” yet again.

Re. "CSS Angles" and the Future of Em-Based Scaling

Jared Stein — Wed, 03 Dec 2008 18:43:37 +0000

Sitepoint offered up an article by Tim Wright (CSSKarma), CSS Angles: Just the Edge Your Web Page Needs!, which shows that increasing the size of a single border property results in an angular object that can be placed behind things. After some experimentation I found a new solution and a new conundrum.

Tim’s applied this to “shelf shadows”, where a nav item appears to be propped up on a shelf with a shadow below:

I looked at the CSS and thought, “This is cute, but could be more elegant with just two 1kb images.” So I wrote it, and it turned out fine. In fact, it turned out better, in my opinion, because the shadow edges were anti-aliased. I showed my developer Tyrel Kelsey the results, then bragged, “I can even make both the shadows and the shelf size scale with the text.” Then whipped up that solution as well.

In short, my first solution used two images: a x-repeating 1×20 “shelf” hooked to the UL, and a 10×20 “shadow” hooked to each LI in place of Tim’s border corner.

My second solution used a 1px square for the top “shelf”, and a 1px border–both hooked to the UL. The top shelf was set 1em from the top to allow for scaling.

The “shadow” was a much larger image, 100×200, and set .1em to the left and 1em from the top of each LI, thus masking it’s gargantuaness (similar to sliding doors).

It was a slick application for the same effect, but then Tyrel popped my balooon.

“Are you on FireFox 3?” Tyrel asked. “Because mine already scales on FF3, and it doesn’t look all jagged like yours.”

Page zoom. I still am on FF2, and I remembered earlier in the week how I embarrassed myself in the web design course I teach when the page zoom disturbed an effect I was demonstrating. In fact, a lot of the em-based scaling approaches so popular just a year ago are sliding towards obsolescence thanks to page zoom on IE 7+ and now on FF3 as well..

Not only are they made obsolete, current CSS-based designs that are enhanced by the elasticity (e.g. layouts with reading-width columns or other applications of em-based scaling (e.g. sliding doors) may look worse with page zoom. My second example sure did when scaled in IE7. And if you open my design 2 on FF3 and compare the page zoomed rendering to the rendering with Zoom Text Only turned on, you’ll agree that the clarity is compromised in the former.

So while I’m proud of my two CSS variations on Tim Wright’s shelf-and-shadow concept, and they are great solutions for older browsers (I can’t believe I’m referring to FF2 as “older”!), it’s also clear to me that em-based scaling and elasticity is on it’s way out, and browser-based page zoom will solve a lot of designer’s accessibility-influenced design challenges–but not, perhaps, without affecting our “tricks” of the past.

Re. John Krutsch's 8 Questions for IDs

Jared Stein — Thu, 03 Apr 2008 15:23:00 +0000

John Krutsch posed the following 8 questions to instructional designers/technologists on his Technagogy blog; here are my responses:

What do you do as an instructional designer/technologist?
In the mode of an instructional designer I either work with instructors directly or I work independently.

When I am working with instructors, I am probing and listening. We are discussing their teaching objectives, their mode of instruction, their activities, and their assessments. I am trying to gauge their teaching philosophy, and looking for ways to replicate their teaching activities in a technology-enhanced or online environment without abusing or neglecting the realities of that environment. While I believe that online teaching should be fundamentally different than traditional classroom teaching, that belief can not be forced upon traditional classroom instructors in it’s totality.

When I am working independently as an instructional designer, I focus on the student experience. I match desired outcomes to available tools and technologies, avoiding any significant negative impacts on usability, accessibility, or facility. Then I prototype activities, materials, assessments for one lesson and test. I reflect, considering the student’s perspective regarding the usability of the tools, courseware, and environment. I attend to completeness and clarity of the instructions, the materials, the activities, the assessments through revision. I imagine the course from the point of view of an hour, a day, a week, a semester. Then, having spent as much time as is reasonable on the first draft, when I am satisfied with a prototype, and when I am assured of the instructor’s satisfaction, I call on one or more of our student developers to assist me in replicating it to complete the course.

In the role of instructional techologist I focus on rapid development of educational tools that are usable and enhance the teaching/learning experience. To this end I try to focus on the creation of new tools or modification of existing tools that can amplify a pedagogical principle or provide improved facility. By principle I mean an aspect of one’s teaching philosophy or the actualization of a teaching objective/learning outcome. By facility I mean simply the ability and the process: how we make this happen, and in the easiest possible way for both instructor and learner?
Why did you choose to become one?
I am enthusiastic about technology, I believe in the power of learning, I am committed to improving teaching, and I want to make education accessible to folks who are at geographical or temporal disadvantages. My profession in distance education fits.

And while “distance education” is morphing from it’s roots as primarily an “independent study” mode to one that is more centered on the idea of a “classroom community” I have, in my own life, benefited from and enjoyed independent study, and believe that the relatively small niche of learners who thrive and can excel in independent study modes of learning are important and worthy of the support of our educational institutions.
Where did you work as an instructional designer/technologist?
I began as a student Web developer and technical writer for FACT at Utah State University in 1997, where I converted paper-based independent study course to a relatively new mode of delivery: The World Wide Web.

I then moved up to a position with Distance Education program in 1999, working with faculty in the department of Special Education to develop technology for and produce live, 2-way audio/video, Internet-delivered distance education courses with online course supplements.

After completing my Masters degree and spending some time abroad teaching, I returned to instructional technology as an instructional designer for Distance Education at Utah Valley State College in 2002. Since that time, I have created UVSC’s Technology Enhanced Teaching Center, created dozens of new online courses, and been promoted to Director of the Instructional Design Services unit, where I oversee all aspects of Distance Education course production and educational technology development.
What surprised you the most after actively working in the field?
One aspect that still surprises me is faculty and student preconceptions of distance education. Instructors still want to believe distance education is only independent study and it doesn’t deserve the same attention, committment, and rigor as their on-campus classes; students still want to believe that distance education is self-paced and, unfortunately, easier or less rigorous.

But, in general, the most positive surprise has been to witness how effective distance education can be when Done Right. With a committed instructor, sound technology choices, and some sense of adventure in the students, a fully online course can be as productive, as effective, and more engaging and fulfilling than a traditional face-to-face course.
What has been your most discouraging experience in the field of instructional design/technology?
This would have to be the persistence of ignorant or just plain negative attitudes amongst some instructors and administrators toward distance education. This is not just prevelant in the handful of distance education naysayers, but also present in some of the distance education instructors, who, as I mentioned above, still maintain wrong perceptions or inadequate committment to their distance education courses and students. There are plenty of motivated, interactive, and engaging instructors involved in distance education, but I am still discouraged in the numbers of underprepared, undercommitted, or underenthused instructors as well.
If you could change one thing about about your job as an instructional designer/technologist what would it be?
I wouldn’t change much about my job, though I would happily take advantage of additional human resources. In higher education, and in educational technology particularly, even if one has open positions (which itself is a rarity), skilled educational technologists, seasoned instructional designers, and creative multimedia producers are hard to find and harder to hold on to. I am lucky to have a handful of exceptional professionals working with me, but too often I notice that we don’t have enough resources to keep up with our ideas, the changing face of technology, and the needs of students and instructors.
What aspect of being an instructional designer/technologist has given you hope for the future?
Making education…
- more accessible to everyone
- more convenient for instructors and students
- more open to potential learners everywhere
- more engaging and interactive
- more authentic and sustained–carrying it beyond the classroom by capitalizing on personal learning environments
If you could give a piece of advice to someone considering a career as an instructional designer/technologist what would it be?
- Learn: adventure, focus, study, interact, reflect, write, revise
- Teach: profess, engage, assess, interact, revise
- Build: analyze, prototype, test, observe, reflect, revise