Category Archives: Architecture

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:

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.