JAWS! No, not the shark --- the software.

I've been doing a lot of research lately about Accessibility and Universal Design when it comes to websites.We all know how important the web has become to most people. It's where we download forms, buy movie tickets, decline invitations from real-life friends on Facebook, shop Craigslist...

Just imagine how things would be for you if the internet, or so much of it, wasn't available to you because of a disability? The web is still primarily a sighted community, where we navigate by seeing, or at least expect users to navigate by sight. Lately though, I've been learning about alternate ways of browsing the web, like with JAWS.

JAWS is a screen reader that allows visually-impaired users use computers and navigate the web by listening to text being read out through synthesized speech. As someone who is very used to having sight, it's a hard concept to grasp fully. It's amazing, really.

As a web builder, it's always my job to make sure websites that I build will render on different devices, whether it's a new browser on a PC, a mobile device, or what have you. Up until recently though, I'll admit, I had only given passing thoughts to the rendering of content with a screen reader. I think I was intimidated to try it maybe. I knew the concept of screen readers, but now that I've taken the time to see what makes JAWS tick, I'm confident that I can put together a site that is a lot more alternative-device friendly than ever before.

In fact, I'll be speaking on the subject at a tech conference at Royal Roads University later this week. Stay tuned!

Gradients, the easy way!

Yes, I'm still on about the gradients. How I love them so...

Look what I found today!

It's a CSS Gradient Generator. It excites me to have a quick way to test and apply gradients all with CSS! That should be a lightweight and good looking option for some web design projects. That's sometimes a rare combination in the realm of web design.

Enjoy!

The viewport is a lie... show me your gradients!

One of the over-arching concepts taught early-on in art school is that the picture plane is a lie. This is more than fodder to nourish the broody discontent of first-year art students looking for mainstream ideas to doubt. It's also a fundamental concept for understanding why some websites look "flat" and some look positively sumptuous.

The concept that an image on a two-dimensional picture plane is only a representation of a three-dimensional spatial reality is something that we should be conscious of... especially in a culture that revolves so much around pictures of things. Especially again, for us who develop websites.

 

What is it that has me once again pondering the conceptual aspects of modern art? I'll tell you...

 

Gradients!

 

What's the connection here? It has a lot to do with what we see in the real world versus what we see on a computer display. Over the past year or so, I've been in love with subtle gradients on websites. Not rainbow gradients, or those harsh cyan to sand colored stripes people used to try to pass off as "chrome" in the early days of the web. I'm talking about those subtle, rich tones that at first glance look like a solid colour, but upon closer inspection hold an array of shades and tones.

 

Here's a beautiful example from iconsweets.com.

 

That lovely pink background pops so much because it's made up of a rich gradient.

 

What's this got to do with reality, man?

 

Envision yourself holding a poster in your hands. Think about the colors. Then think about the surface of the paper it's printed on. Whether it's printed on glossy paper, matte paper, or something in between, there will be subtle color variations due to the light you're viewing it by and by the reflection of that light off the waves in the paper created by your fingers holding physically holding onto the page.

 

Our eyes don't often see these variations for what they are and instead we see the content on the page, the areas of printed color and, if we're thinking in design terms, whitespace.

 

We can use some of the same principles of print design when creating designs for the web, but one of the things about computers that is a little lack-luster is the feeling of things being "real". The printed page has a certain presence to it, which has to do with how the page itself interacts with it's real-world environment. The look of a page is determined by the light around it, the air or breezes around it, and the way your hand may be holding it.

 

A website, on the other hand, displayed within the confines of a monitor or display device, always seems to lack a little bit of this visual real-world interaction. Colors are typically flat and smooth. That has it's purpose, but doesn't create any three-dimensional depth or presence of "surface".

 

How to see what's really going on

 

Try a desktop color picker tool. I use a free tool called ColorPic, available here.
Open this tool, view the website. Grab color swatches from all over the gradient area and you'll actually see a vast variety of colors that make up that "solid" color.

Resources:

• Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles (from Smashing Magazine)
• Download the ColorPic tool

Here are two more reasons why IE is a pain to develop for...

(as if you needed any more reasons to shake your fist it)

IE only allows 31 stylesheets per file:

Thirty-one stylesheets you say? Sounds like a lot, right?

Well, not when you consider systems like Drupal and Moodle where each new piece of functionality comes packaged in a module, each with its own CSS. The more modules, the more stylesheets.

These systems work by expecting you to override these individual modules’ stylesheets if you want to deviate from the existing colors or styles. That's fine, those overrides can be done inside your themes folder, either in an existing stylesheet there, or in one you create just for those overrides. In any case though, it is the stylesheets belonging to the individual modules that are read and processed first, so here’s the best part -- the modules' CSS are loaded first and your own styles are loaded after. So, if you have a lot of modules and if IE is going to cut you off at 31 stylesheets, it’s going to be your overrides that get the axe. Great!

So, you think, “I’ll just combine it all into one file!”

Smart right? You'd think so, but...

That’s when you might encounter issue #2 –

IE only allows 4095 selectors in a CSS file

Another limitation in Internet Explorer browsers is the maximum number of selectors in a single CSS file. That maximum number is 4095. Again, it sounds like a lot, but if you're trying to combine all of your stylesheets (particularly in Drupal or another module-based system) you could hit the wall, and end up in the same position as before.

You can read more and see an example of this problem in action here. Check it out for a good visual demonstration.

IE. Sigh.

What's this blog for?

I build and support websites, mainly using Drupal, which is an uber-customizable open-source CMS. Drupal can have a fairly steep learning curve if you've using it to it's potential, but it can also be a great web development tool.

I also have in interests in general web development and design; design trends; best practices in web development; web accessibility; usability (UX); CSS; JQuery, online learning; Moodle and more...

I'm always excited to learn new things. The result of that is that I make a lot of notes and bookmarks. This blog is a way to share my notes and learning. With the amount of information that I Google through any given week, I figure it's time to contribute some of my learning back to the web.

I'm looking forward to comments as this blog progresses, so post 'em up!