It is made up of square pixels

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

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

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

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

Now You See It – Maybe?

As I have been researching topics for my post this week I ran across a concept that specifically applied to a web site I am designing. The web site uses the colors of crayon green and crayon yellow. As I looked at the header I was designing, I wondered how well the colors would look to someone who was color blind. I wasn’t sure if I had enough contrast.

According to Wikipedia: “Contrast is the difference in visual properties that makes an object … distinguishable from other objects and the background.”

shades of contrast

Shades of Contrast

7 – 8% of the population is color blind. Another portion of the population has low-vision needs. According to the Web Designer Depot there is more to contrast than color. “Creating a structure of importance using size, shape and color is what gives a page impact and legibility to the reader.”

According to A List Apart contrast “…it’s the essential ingredient that makes content accessible to every viewer.” Accessibility is an important component of design. If you want people to read your text and see your graphics you need contrast.

I guess I better get back to work and check the various components of contrast: size, shape, color, position, hierarchy of visual importance, etc. Contrast is “…about finding better and more efficient ways of communicating the message behind the design.” Wish me well!

Resources:

Usability Another Balancing Act

Usability is the act of balancing the goals of the user with the needs of the company or organization. In a large percentage of web sites the company is so focused on getting their message out they ignore their most basic need – you, the customer.

Jakob Neilsen’s Law of the Web User Experience states that “users spend most of their time on other websites.”

Omiture Technologies says a site has 3 seconds to hook you. According to Forrester research company “approximately 50% of potential sales are lost because users can’t find information and that 40% of user do not return to a site when their first visit is a negative experience.” These are pretty stark statistics.


What are some mistakes that cause the biggest problems? Companies often forget to ask a few basic questions.

    question mark

    Questions Anyone?

  • What are the company’s objectives, and how do they relate to the web?
  • What does the user want to know?
  • How easy is it for a user to find information?
  • How does the user think the web site should work?
  • What is the users experience level? (novice, some experience, expert)
  • How do you effectively present information: writing for the web, usable navigation, and graphics?

If you notice the companies objectives are the first thing you should ask. The second question is ‘what does the user want?’ After that try to determine the best way to present your information to the user.

Ultimately you are balancing the company’s needs and goals with the ability, needs, and goals of the user. If it is done correctly your web site will meet your needs successfully.

Resources:

Oh My HTML5!

I’ve been wondering what to write about this week. I’ve been hearing a lot about HTML 5. I thought I should take a look. Oh my, what a ground breaking leap forward it is. No longer are we using markup language left over from the scientists who originally developed the world wide web. With HTML5 we step into the present with a roadmap to the future for web designers. It uses markup language designed for us!

HTML5 Logo

W3C HTML5 logo


I first learned HTML in approximately 1995. Then I advanced my skill set and started playing with CSS1 and learning HTML4. From here I went to CSS2 and on to XHTML and Tableless Web Design. This spanned approximately an 8 year time period. Quite frankly at this point HTML 4 had not made a step forward since 1997 and XHTML was just a variation in theme.

HTML5 introduces new tags like <header></header>, < nav> </nav>, and <time></time>. It adds new elements for audio and video playback. HTML5 simplifies how you write your code. You don’t even need the <body> tag for goodness sake.

Browser support is a bet sketchy; so old formats still rule. Nonetheless over the hill I see coming the dawn of new possibilities for the web and web designers.

Resources

Balancing Act

Recently I built a web site for a class reunion. It seemed perfectly straight forward. I mean all I had to do is create a working page, duplicate it, then add content. Right?

Tightrope Walking

Web Design is a balancing act

As with most web sites nothing is straight forward. I had one page that jumped when you clicked the link. It moved the width of one character. It was very distracting. I tried again and again. Still it jumped. Finally I went back to the beginning. I added one element at a time. I found my list made it jump. The right margin was too wide. I deleted the rest of the content and voilá it worked! That is until I removed a photo. Then it started to jump again. I promptly replaced the photo. Once again I had a stable web page.

Web design is a balancing act. The greatest interface in the world may not work on one or two major browsers. You might have a pesky little problem like I had with this site. Besides interface design and pleasing the client, you have to make a site consistent and usable. That means designing for the vagaries of different browsers, different interpretations of your code, and the little things that can break your page. Let’s not forget where content is King usability is Queen.