Tuesday, 13 November 2007

Altering Blogger Templates

I haven't posted for quite some time. I've been busy with several projects over the last few months and have been readjusting priorities (see my previous posts).

However, I thought I'd share a bit about the process of discovering how to make my site and blog similar in appearance without sacrificing function for either.

The images below on the right show this blog and my personal site after it was altered to fit some of the way this blog is laid out.

My blog's design is based upon the Rounders 4 template (designed by Douglas Bowman), which I altered to display my own header photo and include a few other changes.

My blog was originally a research project to teach myself how to modify the Blogger templates so that I could place similar components on Websites as were on their corresponding blogs.

In my site, I retained left-aligned navigation and didn't place right-aligned content on my site to match the About Me and Sites of the Moment content style.

Because the blog template had rounded corners, I rounded the corners of the header image for this blog. The square corners were retained on my personal site to match the layout on that page.

Later, I took what I'd learned here to update a client site and to make three of her blogs look similar to her site:

Each of these had a different Blogger template and I converted each blog into the Son of Moto template by Jeffrey Zeldman before uploading the changed template so that all the settings and content would be retained.

This arrangement gave Sheryl the ability to alter content on her blogs, yet to retain a similar look to visitors moving between the various blogs and her site.

This is one of the big advantages of running a blog—the ability for non-HTML literate users to add content as well as change how the blog looks without losing anything or knowing what's taking place behind the scenes.

Update: The design of my personal site as well as some of the layout on this blog have changed significantly since this post was written but the examples are still valid

Wednesday, 7 March 2007

Seeking Balance

This morning, I was thinking about the prospect of releasing a number of long-term volunteer and minimally-paid engagements that have provided both a source of revenue (in one case) and a sense of community with writers and artists.

The thought of releasing these is difficult, but there are changes looming in my life that force this decision.

More later....

Tuesday, 6 March 2007

My Web Design Journey

This blog is an experiment for me. I've been building sites by hand for over ten years (since 1994) and I've learned the technology as it developed. HTML was relatively easy for me to learn.

Most early websites were pretty basic. Unless you were a student at a university or had a good corporate connection, you only had access to dial-up. Images were neither as large nor as rich as those routinely found on the Web today. Sound was limited to background music using various plug-ins. Video was virtually nonexistent.

Most sites used the default Times New Roman font (determined by the browser you were using). In order to style a page, you had to use a font tag for every line on your site to redefine the font as well as its size and colour. As you can imagine, this led to some pretty horrific challenges when editing some sites.

I was never a fan of frames for layout, so I initially built my sites using tables for layout.

I began to see the benefits of Cascading Style Sheets (CSS) and I started adding style to the text on my pages. I quickly realized the advantages CSS presented: a single line in a style sheet could change the look of an entire site. No more search and replace to make a simple change to the site's overall look.

Soon sites such as css Zen Garden and Eric A. Meyer's Complexspiral Demo began to demonstrate even greater advantages for using CSS. By separating the layout from the content, you could change the entire appearance of your site without having to touch the content. Rather than simply styling the site text, you could change the layout.

However, it wasn't until I read HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer that I began to really work seriously with CSS to remove layout from the content. This not only made it significantly easier for neophytes to work on HTML (most still dreaded the experience) but allowed significant changes to a site after the client saw it.

Reworking sites was suddenly much easier (as a hand-coder, working with nested tables is a bug-bear, particularly when something goes wrong). Without having to go back to the drawing board, I could redesign an entire site to have a totally different appearance and layout. As well, the conversion from a tables-based site to a CSS-based site while retaining the content was relatively easy.

If the thought of hand-coding frightens you, quite a few programs allow you to compose the content of a site much like you use a word processing program. I place these into two classes:
Traditionally, most of these added their own tags and peculiarities (I call it tag soup). Microsoft FrontPage, which used the predominance of Windows and Internet Explorer to set its own standards, was probably the most incompatible. Although Netscape included a few of its own "standards" its sites could be viewed on various other operating systems and browsers without totally wrecking the intended look.

Designers began to use browser "sniffing" programs to determine the brand and version of a browser visiting a site, then providing the specialized content for that browser. As you might imagine, this created a great deal of effort and cost, something smaller businesses were unable to compete with.

When Microsoft "won" the browser wars against Netscape, most of the developers began to work around the eccentricities of Internet Explorer (IE), developing for the browser that "came in the box" for a majority of their visitors.

However, Netscape then released an open source version of the Netscape browser called the Mozilla project (Netscape 6 was developed from this Mozilla project). Then an open source project was launched that created the Mozilla browser. with thousands of individuals from all over the globe working on various aspects of this browser.

At the point this was occurring, most browsers were actually suites of software, including at least the browser and an e-mail program (Microsoft's was made an integral part of Windows -- something that has since haunted them in terms of security issues), with Netscape and Mozilla including a WYSIWYG Web publisher. People now had a free program that would design acceptable websites, albeit with a lot of unnecessary HTML code.

When the Mozilla team began to work on a light browser (Firefox) it changed two important things:
  • it produced an excellent free browser that wasn't tied to any operating system (Windows); and
  • it followed the standards that everyone had agreed upon, but most had ignored.
Many web developers were tired of having to provide work-arounds and fixes for each separate version of Internet Explorer (even the MacIntosh version was different). Many began to build with Firefox in mind, some continuing to "fix" older version of IE, but many now ignoring non-compliant code.

Interestingly, when IE7 was released, it was much closer to compliance than any prior version of IE. This is likely because the web developers had abandoned catering to IE eccentricities.

More recent versions of Go Live!, DreamWeaver8 and Blogger have made serious strides in producing clean and compliant code without the security risks sometimes associated with CMSs. Even FrontPage 2007 was working on cleaning up its output.