Web Design

What I Learned This Week (Part 12)

Posted on by Jon K.

QR Codes finally seeing traction in the US? Well, I don’t know if a bump from 14% to 20% is real traction, but I have seen more and more evidence of the practice. In fact, on my public transit ride in, there’s a few ads from the city that use them. I haven’t seen anyone with a cellphone actually interact with them though.

Why your links should never say Click Here. Accessibility in web design, bad form – overall click here is bad instruction.

Dissertation for Sale I guess it was well enough known that you shouldn’t give anything away for free if you want to make money off it later? Right Cory Doctorow?

No comments yet

The Value of Aesthetics in Education

Posted on by Jon K.

“I think that educators also systematically undervalue art and aesthetics. Educators (especially academics) most often thrive in text-driven cultures and rarely equipped to understand — let alone build — visual and interactive media. “

Kurt Squire via Henry Jenkins here.

I’ve been thinking this for years, and I suspect that the educators who understand that they need to present their information in aesthetically pleasing ways, will be able to better share that information. That’s where an LMS can come in handy, that’s where learning design can come into play.

No comments yet

It’s Like, No Big Deal

Posted on by Jon K.

“Facebook is a charnel house of features that appeal to advertisers and businesses without actually being used, supported by tools that don’t work, for people who don’t care.” Jeffery Zeldman, on why Facebook’s Like doesn’t work.

Zeldman is a visionary when it comes to the Web. He’s a guy who’s influenced many of the top designers, and is one of the top designers of webdom himself, so what he says about web design bears some weight.

No comments yet

Adding MouseOver Tooltips Within Desire2Learn

Posted on by Jon K.

Lightly tested with: IE 7/8, Firefox (Win) 3.0/3.5, Chrome 5/6, Safari (Win/Mac) 5, Safari (Mobile). No guarantees for browsers earlier or later.

I’ve been working both angles of my strengths lately – I was asked by a faculty member who was trying to use the D2L tools for glossary and content in conjunction to provide context sensitive tool tip like definitions of terms. Like all web programmers, why start in a vacuum? So knowing that a great tooltip JS is available in JQuery, I considered using it.  The JQuery solution is a large one to embed the entire library for a couple of functions. Looking further, I searched out this tutorial/premade tooltip script, which does the job nicely. It would clobber any styles created by D2L that had been already added to a topic created prior to adding the script, so I had to hack around it to fix that. I also had to fix the tooltip always surfacing above the text, which in the frames based LMS world, defeats the purpose of having a definition; in this case you get a definition you can’t read because it’s behind a frame (or the top of the window). Another fix I put in was to ensure the box did not appear off screen if it was too close to the edge of the window, it still does in certain cases, which I haven’t narrowed down – if anyone out there wants to take a crack at fixing it, be my guest.

The implementation of the script isn’t too difficult if you’re OK with editing HTML code (a matter of adding three lines and editing two lines) and are precise in your edits.

Here’s a link to the PDF instructions and the zipped file with the javascript and CSS file.

Of course, if there’s any errors please let me know and I’ll correct and/or clarify them as soon as possible.

No comments yet

Is Formal Education Important?

Posted on by Jon K.

I was looking at the results of A List Aparts 2009 survey results, and was downright flabbergasted by the results of the question asking whether the respondent’s education was relevant (figure 8 on the main page for those looking at the data results right now). 18.2% found that their education was not relevant to web design. That’s one in five. When combined with the next figure (a little), it jumps to 47.9%. Almost half felt that formal education was essentially only marginally useful for their career. On the further breakdown by age (figure 2.3 on this page) ,   there is an almost 15% drop in relevance for the 65+ crowd. This makes a lot of sense, most of these people would have gone to school in a very different climate of the mid-60’s. Computers took up the size of rooms and networking was a high end venture. It makes sense that a lot of people who ended up as web designers would probably have come from graphic design backgrounds as print morphed into web. Many of these people may be in managerial positions as well – who may not need the technical skills that the front line grunts require. It would be nice to have a basic breakdown by age and job title to see if there’s any sense of that information.

Now there’s not a lot of web design programs – even fifteen years later. Most students who are interested in the field learn HTML in high school – either in a class or on their own, then develop whatever skills they need to complete the task. Informal learning for the most part, these people are task oriented, which school does not really address well. School does a good job of broadening people’s horizons.

I feel that while I didn’t get an education that informs my skills as a web designer (I am mostly self taught), I do draw from the lessons learned in software engineering  and in media arts as well as education (the three things I’ve studied formally) and apply them to design in a greater sense. I wonder if I think about these sorts of questions more than others though.

No comments yet

Check Out My New Digital Camera

Posted on by Jon K.

picture of Mavica digital camera (manufactured circa 2001)

It’s a Sony Mavica. With a whopping 1.3 megapixel camera, 320×240 MPEG video capability, and stores the pictures on a 3.5 floppy. Yes, I’m into the new age now…

Okay, enough sarcasm. This is the first digital camera I worked with, probably as early as 2001 taking faculty photographs for the department website. The camera was good back then, but was ancient within three years. By 2003 my wife had bought a Canon A40, which was a great camera. It makes me wonder what is going to happen with all these manufactured digital goods. I’m keeping this one as a paperweight/discussion point, but that’s not really a good use. I suspect that many of these items will be torn apart, with capacitors and other components de-soldered and reused in other projects by hobbyists and green focused companies.

1 Comment

Usability and Images

Posted on by Jon K.

Been thinking about online communities a lot the last few days – specifically thinking about what makes a successful community, and the aesthetics of the online environment that the community flourishes in. Take Facebook – probably the most successful online community website going. Now, one can argue that Facebook’s design aesthetic is to get out of the way of the community’s relationships… but perhaps it’s not the design aesthetic at all. Maybe the aesthetic is irrelevant when the content is overwhelmingly useful to the end user. Previously, I and many other web designers had tried to ensure that if, as a designer, you wanted to build a website that encouraged community, that pictures of people should be there to enhance the connection users have to the site and to each other. Yesterday in a meeting I suggested that one “had to have pictures of people” in the header of a website, in that it helped humanize the experience. My hypothesis is that without those pictures, the experience becomes too sterile. The counter argument a colleague brought up was that a 2-D representation of a person does not mean that people feel more at home or in a community.

Then why do designers use pictures of people so often as a short cut to engage people? Is it because it’s easy and a cue to users that people (of a certain stripe) are welcome here? Anyone have any studies that have looked at images of people and the user’s effect?

1 Comment

The Future of Courses?

Posted on by Jon K.

I had an interesting discussion yesterday with a faculty member who teach automotive mechanics here at the College. Needless to say it’s a hands-on course that doesn’t have a lot of sitting and learning, but a lot of doing. He was struggling to find meaning for the LMS in the context of his course and he found it in the quizzing, which he could use as a pre-test. That got me to thinking about how effective e-learning is for skills-based acquisition where you have to do something to show mastery. The argument he put forth was that you don’t want to have a guy building your house without the proper skills shown, right? Well, the cynic who’s been on a construction site and watched a few Mike Holmes shows, knows that not everyone who’s building your house is accredited with some institution. That’s why we have housing inspectors (who can be bought off). There are though, some things that cannot be replaced by an online interaction. I would however, be OK with someone becoming an electrician and passing the accreditation without being in a class, as there’s an apprenticeship process that requires showing your hands-on ability.

I’ve enrolled in a CSS course, because even though I use those skills fairly often, I feel like I should know more about it. The course cost $10, is organized by a publisher, and has a relatively small enrollment. I’ll write more about it after I’ve gone through it and know more about it. It’s short in duration, only ten sessions, fairly minimalist in instructional design and looks full of little bits and pieces that will help me. I think these sorts of courses will pop up – maybe even in conjunction with higher education institutions. Certainly this is the future of continuing education – where people who need skills upgrading get a package to go through with some minimal instruction. Writing clear, concise, directive instructions will be a key skill for the designers of these courses. There will be others that suggest these small, modular courses don’t provide context for the work – or even more don’t allow for reflective practices. That may be the case, or maybe those things need to be built.

4 Comments

Usability in LMS Pages

Posted on by Jon K.

Inspired by this post from the UT Web Developers outlining a usability checklist developed by Abhilash Thekkel, I thought that there should be a similar thing for LMS pages as well. Of course, some of the usability issues you need to do for a webpage aren’t necessary for a page managed in an LMS.  For instance, #28 Did you include a link to all your main pages on your homepage? doesn’t require any checking because navigation in the LMS is limited and usually controlled by the system and a link to the course home page is usually included. So here’s a list of items to look for when developing a usable course in an LMS.

Technical:

  1. Did you validate your (X)HTML using W3C Markup Validation Service?
  2. Did you validate your CSS using W3C CSS Validation Service?
  3. Did you check your website in at least IE, FF, Opera and Safari?

Images:

  1. Did you add the ALT attributes to all your images that are non-decorative?
  2. Did you make the size of your pages less then 50KB?
  3. Did you choose the appropriate filetype for your images?
  4. Did you add a description to images that support your content?
  5. Did you use plain text instead of images for important content?

Content:

  1. Did you use a sans-serif typeface with at least a 10 point font size for your body text?
  2. Did you adjusted the leading and tracking, if necessary, to increase readability?
  3. Did you align your body text to the left? (depends on language)
  4. Did you make sure that whole sentences  are not entirely in uppercase?
  5. Did you use less then 78 characters, including spaces, per line?
  6. Did you make brief and precise paragraphs with explanatory titles?
  7. Did you use lists to sum things up?
  8. Did you create enough contrast between the text and the background?
  9. Did you make your website also accessible for text-only browsers?
  10. Did you make sure that there are no ‘under construction’ pages, or links to content that do not work?
  11. Did you replace all special characters with the ISO Latin-1 codes?
  12. Did you spell check your content and did you proofread for grammar errors?
  13. Did you make a high contrast version of crucial information?

Navigation:

  1. Did you use no more then 8 items in your main navigation?
  2. Did you use describe the  link text instead of ‘click here’?
  3. Did you use self explanatory link text instead of business or jargon terms?
  4. Did you make a distinction between links and plain text?
  5. Did you make it possible to browse your website using SHIFT-TAB and RETURN?
  6. Did you make sure you didn’t use any javascript links?

Structure:

  1. Did you make a consistent page structure from page to page and tool to tool?
  2. Did you place important content above the fold/scroll?
  3. Did you make your page design on a grid system?
  4. Did you make your website also viewable on low resolutions?

Multimedia:

  1. Did you make sure that music and videoclips don’t start playing automatically?
  2. Did you make sure that music and videoclips can be turned off at any time?
  3. Did you inform the user about the size and length of your music and videoclips?
  4. Did you select or use  music and videoclips with subtitles or descriptions?

Many of the items in the original article are still useful, but they are at the whim of the administrators of the LMS or the LMS vendor itself. If your LMS is not respecting usability guidelines, maybe you shouldn’t be using it. If you are stuck using it, maybe you should advocate through whatever channels you think appropriate, that they adapt to allow learning for everyone.

6 Comments

HTML 5

Posted on by Jon K.

I’m not a web designer (anymore) and I just stopped teaching web design courses earlier this year. I’ve been reading a lot about the new spec for HTML, which is HTML 5. If you do design pages, or even HTML pages that end up in LMS’s, then HTML 5 will be a game changer for you. First of all, the canvas element is something that will be huge. I talked a little about it in the previous post, but if you’ve ever attended a Wimba or Elluminate session, you’ve seen the whiteboard interface that those products provide. Canvas can act like a whiteboard – the interactivity isn’t there yet, but I can see a Javascript library extending the functionality of the canvas.

Also, inline support for video types (well, two video types) will also change how things work.  No more embedding in a player, as long as you use Ogg Vorbis and H.264. All that will be handled native in the browser. No more broken plug-ins, no more codec hunting (well, you’ll probably have to do this anyways). Of course, to get videos to display across all browsers, you’ll have to encode twice – once in the format that Firefox and Opera understand (Ogg Vorbis) and once in the format that Safari and Android browsers understand (H.264). Thankfully, Chrome understands both and Internet Explorer understands neither. I would suspect that IE will be the traditional pain in the ass that it is, and only support Windows Media formats.

Edit: IE will support H.264.

No comments yet