WEB STANDARDS CREATIVITY

However, as some people have noted, even if you do run
at a higher resolution than 800 ✕ 600, does that mean
your browser window occupies the entire screen? We
don’t know. I personally think that not only is it platformspecific,
but it also depends on the individuals and their
experience level. Maybe more experienced users on a PC
don’t use their browsers at full screen. From my experience
running user tests with a wide range of people, I’ve
seen that many novice users on a PC run a browser at full
screen because that is the default; on a Mac, the default
isn’t full screen.
Now that you have some background on grid systems,
let’s look at a practical example.
Putting grid systems
into practice
In the spring of 2005, the International Baccalaureate
Organization (IBO) approached me to design an intranet
application and a new web-based application they had
developed in-house. The exciting reason for choosing me
as their designer was partly due to the requirement for
this project to be built using Web Standards.
The IBO is a recognized leader in the field of international
education. The IBO currently works with 1,785 schools in
122 countries to develop and offer curriculum programs
to more than 200,000 students, aged 3 to 19 years. In
order to teach a lot of students, there has to be a lot of
teachers, and all of those teachers need access to document
materials.
A few years ago, the IBO developed a teacher intranet
called the Online Curriculum Centre (OCC), where IBO
teachers could access and share documents. During the
following years, the OCC grew, both in terms of users and
functionality, until it became obvious a redesign was
needed. Right from the start, the IBO wanted something
new for the design—something fresh, modern, and usable.
In addition to the OCC, I was asked to help design a new
online application for IBO staff called the Workshop
Resource Centre (WRC). This is a complex application
whereby workshop leaders (the IBO has development
workshops with teachers) could select documents from a
library, and then have them converted to PDFs for printing.
It works kind of like an e-commerce system, with
documents added to a user “cart” and then checked out
for conversion and storing.
As I said, both projects had to be built using Web Standards,
to a selection of standards-compliant browsers,
which thankfully, didn’t include Internet Explorer 5!
Internet Explorer 5 can be a challenge to
support, as you’ll see in other areas of
this book, including Ethan Marcotte’s
Chapter 3. There is also a good discussion
of browser support issues in CSS Mastery,
by Andy Budd et al (friends of ED, ISBN:
1-59059-614-5).
After reviewing the brief, it became clear that the majority
of the content for this project was typographical. A
wide variety of content types needed to be incorporated,
many of which were still to be created. Therefore, the
typographic structure needed to be clear and concise. In
addition, the information needed to be presented in four
languages: English, French, Spanish, and Chinese.
With all of this type on a screen, not only did there need
to be a strong typographic hierarchy, but there also
needed to be a strong grid.
Before I even put pen to paper or code to browser, I
focused on user requirements and functionality. Once the
IBO agreed with those, and everyone was happy, we progressed
to the visual design from previously produced
wireframes.
chapter 6 Grid Design for the Web
135