Art Blog: ColorSketches by Edward Sine » CSS

CSS, Fun, and Modern Browsers

Ed — Mon, 19 Jan 2009 14:57:10 +0000

Even though my business offers different services: concept design, art & illustration, and web design – it seems incoming projects will undoubtedly be for the same service at any particular time. For the last couple of months almost everything has been web design.

Thus, web design is on my mind right now. One of the projects on which I have been working, is a redesign of my blog and resource Art & Architecture. Since it is a project for myself, I have decided to design it for a minimum screen resolution of 1024 pixels wide. It looks better on a 1280×1024 resolution, and even better on the 1920×1200 resolution running on my monitor. I have taken some time to play with enhancements using the Spry Framework in Adobe Dreamweaver. I have also been messing around with jQuery. Both offer some very cool possibilities.

The content for all current projects is database driven with structural html markup, and styled with css; no tables. I have been improving my web programming skills by dropping hard earned money on reference books, and doing lots of research on the web, and one thing confuses me a little. I vowed to keep everything positive on this blog, but a little rant here, the “expert” programmers writing these references spend a lot of time talking about designing for people with ultra low res monitors, and how to create work-arounds for people using ten year old outdated browsers. The first thought that comes to my mind, why is anyone using Internet Explorer 5 for Mac? There are any number of browsers available, and they are all FREE!

So I have been testing my code on current browsers: Firefox, Safari, Opera, Flock, Avant, Maxthon, SeaMonkey, Chrome, and Internet Explorer 6, 7, 8. (If you are not using a current browser, here is your opportunity.) As I can only have one version of Internet Explorer on my system at one time, I use IE Tester for testing Explorer. Second rant for this post, as I write the code (as the “experts” instruct me), my pages work perfectly in everything except Internet Explorer 6, 7, 8. So the second stage of every page design seems to be butchering the code three different ways to get it to work in each of the three Microsoft products. And they write our operating system! Microsoft! Learn how to write a browser and quit holding back the web!

Enough said: I must dive back into a reference book and find a hack to make today’s web page work in Internet Explorer. Yeeha!

Fonts in Web Design

Ed — Sat, 26 Jan 2008 17:04:24 +0000

Tired of sticking with Verdana and Arial in web design, I did some research to find out what other options might be possible. For those of you not familiar with font usage in web design, when using html and css, the font specified for text must be available on every viewer’s computer. This means the designer is limited to common fonts that are actually shipped as Windows or Mac system fonts. The css specification would be (font-family: Verdana, Arial, sans-serif). Several fonts can be listed as the browser will go down through the list until it finds an available font. The last one listed is commonly a “font family” so if none of the fonts are found, the browser will use the generic family.

The general common fonts I found did not expand the list dramatically, but it did create some possibilities. I will show them here by name using the font specification in css. The font size on all is 16px. As you can see, some fonts display larger than others. (The display of this list actually depends on fonts found on your computer.)
Arial
Verdana
Trebuchet MS
Comic Sans MS
Courier New
Georgia
Times New Roman
Impact

A font that is common on the Mac, Lucida Grande, can be found as Lucida Sans Unicode in Windows.
Lucida

Two more fonts that are very common, but not a sure thing are:
Geneva
Helvetica

Here is a listing of the typical font families. Again the way they display is dependent on the fonts found on your computer.
sans-serif
serif
cursive
fantasy
monospace
I hope this adds some options to your efforts using css on the web.

ZenGarden

Ed — Fri, 16 Mar 2007 03:19:52 +0000

I seem to be writing a lot of posts about css lately, but I have been working on a new site and it is on my mind. A very interesting spot on the web that is worth checking out is CssZenGarden. In a nutshell, the concept is one page of structural markup, that is styled by user submitted css files. The submitted designs are quite spectacular. If you are unsure of the value of using css over tables, this site should convince you. If you are just interested in looking at beautiful web pages, this is also the place. cssZengarden.com

Transcending CSS

Ed — Sat, 06 Jan 2007 15:14:04 +0000

Over the Holidays, I began reading a book written by Andy Clarke entitled “Transcending CSS: The Fine Art of Web Design”, and I am finding it a fantastic reference. It approaches the use of CSS from a designers perspective, and it has made me think of web design in a whole different way. His explanation of proper structural mark-up is one of the easiest to understand that I have seen. The book also has a very good section on designing web pages to the grid. By laying grids overÂ screen shots ofÂ beautifully designedÂ sites it illustrates how the designers use them in exciting ways.