Progressing— Slowly
After writing some more content, settled on a basic design of two columns – main content on the left, subsidiary content, references etc. on the right. Minimum width in EMs to make the page usable, and maximum widths on the content of each column to keep a sane amount of measure or line length.
Flexible Web Pages
Support for media queries is getting to be good, so capable browsers get three columns on a wide window, and a single column on narrow ones. This began as an exercise in designing for the iPhone, but I found it so simple to create these alternative styles in “pure” CSS that I went for broke.
Media queries currently work in Chrome 1.0+, Firefox 3.5, Safari 3.0+, and Opera since version 7 (2004). Microsoft is MIA.
With a bit more content written and a print style added, I’ll be ready to convert the static markup to work in Textpattern. That should be a challenge fun.
HTML 5 and CSS 3
Another design decision I faced was whether to use HTML 5 markup. Since older browsers won’t recognize the new tags, and Internet Explorer needs some scripting to make it comply, I decided against. Instead, I am using class names that correspond to the new tags, so converting later should be a breeze.
So many features of CSS 3 have good support, with unobtrusive fallback in less capable browsers, that I use them quite a lot. One fallback would be no CSS drop shadows, for example – hardly show-stopping. Using graphics for rounded corners and drop shadows seems so unnecessary these days. Internet Explorer has various filters that can emulate these things, too, although I’ll be using JavaScript to apply these proprietary properties.
More later…
What’s Happening?
Hello. I hope to have a new site here soon. It’s primarily for students and graduates of the Contra Costa County’s ROP web design course— but not only.
What Is It About?
I’ll be commenting on some of the course material, covering some of the issues and difficulties that students commonly find. With the huge advances in browser technology taking place now, course material rapidly gets outdated. I hope to bring some of the ROP material up to date with the latest techniques.
There will also be sections dealing with particular browsers and their foibles; some tools to make coding HTML easier; experiments with advanced techniques that will one day make our developer lives easier; and, finally, references to a few Web-based resources that I find particularly valuable for learning basic coding and dealing with browser bugs.
Putting the World back into the World Wide Web
The goal of the site design is to make it as usable as I can on anything that can access the Internet, not just PCs. To this end, the design is to be a liquid design that fits any window from 200 pixels wide to over 2000. With PC screen sizes getting wider, and the rapidly increasing use of phones for surfing, I think that perhaps fixed-width designs do not belong on the Web.
Faster, Faster
Several studies that I know about conclude that the speed that a page appears in the browser makes a huge difference to the number of people that continue to view the site. To the extent possible, I’ll be using a browser’s own capabilities to create things like drop shadows, rounded corners, and gradients. Even though it presently may use a lot of code to make it work cross-browser, code can be compressed a lot before sending to your browser. Images, on the other hand, are already compressed.
With Internet Explorer version 8 catching up with other browsers, I can imagine a not-too-distant future when image slicing will go the way of hot metal type.
