Category Archives: Miscellaneous

It is made up of square pixels

Posted by Judy on April 7, 2011 1 comment

When you look at your computer screen what you are seeing is a bunch of square pixels sitting side by side. It’s a bit like a checker board without the color. Even graphics are designed using squares. Because of this it is easy to design a web page using a graph. Initially, web designers used tables to layout a web page. More recently they have used a grid system to place elements using CSS.

960 12 column grid

Layout on 960 12 column grid

Many years ago designers used an 800px by 600px canvas to layout a web page. Now we know that most people have at least a 1024 by 768 pixel screen display. As a result we can safely design for a 960 by 640 available design area. The advantage of a 960 design area is the ability to divide 960 by many different factors. The most common divisions seem to be 12, 16, 24 column designs.

Using a grid makes it easier to use all of your design tools, You can see how your page elements will fit together. It also makes using HTML and CSS easier to code. Whether a designer officially used the 960 grid or not we all need to use some way to evaluate where elements go, which need to be floated, and which need to be absolutely positioned. Dividing up square pixels requires some sort of grid no matter how informal.

Resources

There will be no post next week. I will be enjoying Seattle!

Cascading Style Sheets

Posted by Judy on March 31, 2011 2 comments

Did you notice the changes in my blog? This past week I have been thinking about Cascading Style Sheets (CSS). I used what I learned to change my blog and a test web page I’m making for a client.

cascading style sheet

Style Sheet Pizzaz!

I began using CSS when it was new. At that time most browsers only gave CSS a pat on the head. In fact designers raised a hullabaloo to get browsers to pay attention to CSS. Articles and discussions were held about which browsers even recognized CSS. In addition every browser had their own way of looking at HTML and CSS. It was called the ‘browser wars’. At that time I decided to use basic CSS until browsers had changed. Well boy have browsers changed, and I should have been paying better attention!

HTML is the bare bones of any web site. It tells the browser it is an HTML or web page. It tells the browser what are paragraphs, lists, or blockquotes. It is CSS that adds the pizzaz! The CSS document(s) connected to a web page tells elements like paragraphs what to do. The CSS document can define margins, the color of the text, font, and background color. It can even point to a particular element, such as a link, in one specific spot to look different than all other links. CSS is both fun and powerful!

To help me on my quest to update my knowledge base I have been using “CSS the Missing Manual” and the CSS sheet for my blog. When I got my B.S. at the Art Institute of Pittsburgh I updated my CSS skills somewhat. I am finding, however, that getting caught up with what CSS can do is so much fun! So tell me, what do you think of the color changes to my blog?

Resources:

Colour Your World

Posted by Judy on March 24, 2011 2 comments

Recently I’ve been reading Vandelay Design’s blog. Vandelay has several galleries showing a huge listing of colourful web sites. The sites catch your eye and make you want to see what else the company has to offer.

dolour and design

Colour and Design

I thought it might be fun to take a look at colour.

On the cool side of the colour wheel are blues, greens, and purples. These colours tend to have a calming effect. On the other end of the cool spectrum they tend to be antiseptic and impersonal. It is here in the cool spectrum that you find the universal favorite colour, blue.

On the warm side of the colour wheel are red, yellow, and orange. These are the colours that stimulate us. It is no surprise that they are related to the strong emotions of either optimism and love or anger and violence. Orange is the colour that people tend to love or hate.

Mixed colours like orange (yellow and red), purple (red and blue), and green (yellow and blue) take attributes from both of their parent colours. With the optimism of yellow and the calming favorite blue, green is the favorite mixed colour. It is considered a pleasant background colour by many and an energetic colour in its brighter forms.

When it comes to web sites high intensity colours, while stimulating, can overload your visual senses. You need to balance the intensity and saturation of the colours you use. The eye needs a place to rest. While some sites do not degrade to greyscale well, many other sites have assembled the right balance of colour and accessibility. Let’s go out and colour our world!

Resources:

Inclusive Design

Posted by Judy on March 17, 2011 2 comments

Last week I wrote about visual accessibility. This week I’d like to talk about other accessibility issues. The internet has opened up the world to people around the globe. For example, people in small town Meeteese, WY can connect people in Sri Lanka to sell goods or exchange information. It has also opened up the world to other people as well, the disabled. It is not by accident that the internet is called the information superhighway.

“[The Internet is] an essential tool. And, literally, a lifeline for many disabled people. . . . Many disabled people have to spend long hours alone. Voice-activated computers are a means of communication that can prevent a sense of isolation.” – Christopher Reeve, WebAim

When someone is blind, deaf, or a paraplegic the internet can be a challenge to negotiate. As web designers these individuals summon our creativity to expand the usability of the internet with intelligent design.

Two hands shaking

Reach out your hand.

There are no easy answers for designing an accessible web site. Planning begins at the outset of a project. From focus groups to usability testing, designing for accessibility takes time and commitment.

There are guidelines for web accessibility. The W3C’s Web Content Guidelines is the official and most comprehensive discussion. Usability.gov also has an extensive discussion of how to plan accessibility from the beginning.

10 Basic Guidelines taken from Web Content Accessibility Guidelines

  1. Provide text alternatives for non-text content such as images.
  2. Provide alternatives for time-based media such as using a transcript for audio or video.
  3. Allow your content to be adaptable, for example a simpler layout.
  4. Make your content easy to distinguish between foreground and background.
  5. Make all content functionality available by keyboard or mouse.
  6. Do not design content in a way this is known to cause seizures.
  7. Provide ways to help users navigate, find content, and determine where they are.
  8. Make text written for the web easy to understand and read.
  9. Make sure input errors are noticed and easy to correct.
  10. Maximize compatibility with assistive technologies.

These guidelines are just a beginning. Let’s make the web usable to everyone no matter how isolated.

Resources