Ross McDowall

Dwarf

Ross is a senior web developer for Visual Lizard. In working for the company for the past 9 years he has steadily upgraded his skills. Both the best and worst thing about this industry is how fast things change. It is great finding new ways to do things, but in finding the new process, it sometimes means having to go back and redo all of the programming that was done the old way. Thus, he fears change... but since the world is always changing, he nevertheless changes with it. He enjoys working for the company as the small staff doesn’t allow for office politics. The office environment allows for independence, creativity, and quick access to a fairly substantial knowledge base.

Ross enjoys roleplaying games, science fiction and fantasy books, and movies. He has his own website which he uses as a place to experiment with his programming skills from time to time. He has done substantial work on the majority of the sites developed at Visual Lizard, with particular pride in working on Destination Winnipeg, The Forks, IMAX Winnipeg, Folklorama and the Winnipeg Airports Authority.

Ross is learning more about developing online web applications including a more comprehensive version of his own diabetes blood sugar testing recorder. He has honed his skills in both PHP and MySQL as these are the primary tools of his trade. His latest goal is becoming fully familiar with the CAKE framework (not easy as I am not good with change *harrumph harrumph*).

In our industry, the concept of standards for web and browser development should be at the forefront. Competition between browsers should not affect how the viewer sees the product which is being developed. It is up to the web developer to determine how a site should look. The browser should just be the platform to view the site, and should not interpret how to display what is written. Unfortunately the browsers are not quite to that stage yet, so for now we have to make the odd piece of non-compliant code to accommodate those browsers. One day soon maybe we will see all browsers following standards. Cross your fingers.

On My Radar

birthday Nicole at Guppy Design Mar 17, 2010

St. Patrick's Day Mar 17, 2010

birthday Ross McDowall Oct 01, 2010

Rememberance Day Nov 11, 2010

Using the One True Layout

Authored by Ross McDowall on Dec 10, 2009

Categorized as Web Development and Design

Tagged as standards, code,, html,, css,

The issue that we run across when trying to apply the One True Layout concept in design is that the browser compatibility isn’t quite at the same level of development. When I say browser compatibility I usually mean Internet Explorer. With Microsoft now into its 8th iteration of Internet Explorer, the compatibility is almost completely there. However with the majority of people making their way around the web, Internet Explorer 7 is still their primary browser, and it still has its quirks.

The One True Layout, which is one of the primary tenets of web development to completely separate content from design, looks at rendering the content before any other element in the code. The Internet, being a content driven media, is concerned with supplying content to the user first. To that end the content in the code should be rendered first. This enhances a site’s Search Engine placement and accessibility by rendering relevant information first rather than the other elements of the site.

So the rendering of the code to do the One True Layout would be roughly like this.

  1. Content renders first
  2. Header display renders
  3. Navigation renders
  4. Footer renders

Normally when building web pages we render elements in the order we want to see them appear in the browser. By using CSS and taking advantage of modern browsers we can shift the elements to where we need them to display while behind the scenes the order can be focused on providing the content first. This works perfectly with compliant browsers like Firefox, Safari and Internet Explorer 8. The difficulty comes when we try to use Internet Explorer 7. One of the quirks of IE and rendering absolutely positioned block items is they seem to disappear. For instance the header renders after the content in the code, but the header needs to appear first. In IE 7 the header disappears using the standards compliant css.

To fix this, with some experimentation, I set the header style to display inline. This caused the header to reappear. Then by setting the absolute positioning of the header to top: 0; positioned the header at the top. Setting the left positioning to 0 brought the header to the correct spot aligning the header with the content area.

These adjustments work for a fixed width layout. I still have to do some experimentation with a flexible width layout, but generally the One True Layout works very well and allows for greater flexibility to site design while maintaining the focus on content.

These adjustments unfortunately do not cover IE 6, however as IE 6 is now a ten year old browser, the stylesheets that we are starting to provide for this browser are reflecting its obsolescence.

Comments

Sorry, comments are closed for this blog article.