March 2008 in the Life of Ben (Blog)
Status of CFG Studio 2 (30th March 2008)
25th of October 2007 was the last time I logged in to GTA Forums. Today I logged in to clarify the status of CFG Studio 2.
It is an editor for handling.cfg
and similar files from GTA III, GTA Vice City and GTA San Andreas. The UI is an Excel clone, broadly speaking. Other modding tools at the time seemed to think more textboxes mean better program. I wanted to build the antidote.
Well, other modding tools continued that trend or died. A very notable exception being Collision Editor 2 by Steve M. He was always a class act in GTA modding. This interface was a great improvement over the original version. It makes some mainstream desktop applications you can buy today look like a joke.
CFG Studio 2 remains popular among modders. One of the things I love about making stuff is how it outlasts its creator.
Subscribing to W3C PFWG (28th March 2008)
Henri Sivonen and I discussed aria-posinset
and aria-setsize
on #whatwg
today. He suggested I send feedback to the PFWG’s public mailing list for comments.
I used the web interface to read some messages and get a feel for the list. Jgraham was confused by the absence of a Subscribe link and so was I.
- Found Participation in PFWG but this covered different lists.
- Found a wonderfully concise set of instructions at the obscurely named W3C Mailing List Administrivia.
-
Created a message to public-pfwg-comments-request@w3.org with the Subject set as subscribe. Just in case a human got involved, I included some text in the body:
My W3C username is bmillard. I would like to subscribe to <
public-pfwg-comments@w3.org
>.--
Ben ‘Cerbera’ Millard
Collections of Interesting Data Tables
<http://sitesurgeon.co.uk/>My participation in HTMLWG is how I already had a username.
- Sent it at 4:10pm today.
- Received message with the subject CONFIRM snumber at 5:14pm today.
- It asked me to send a blank reply to confirm my subscription.
- I did so and am now subscribed to the list.
Outlook Express is my mail client. To separate PFWG mail from everything else:
- I right-clicked the Inbox entry in the Folders sidebar.
- Selected the New Folder
- From the menu bar, I selected Tools > Message Rules > Mail.
- Clicked New.
- Ticked Where the To or CC line contains people.
- Ticked Move it to the specified folder.
- Clicked the contains people link.
- Typed pfwg
- Pressed Return to add it.
- Pressed Return to confirm the window.
- Clicked the specified link.
- Selected the Public PFWG folder.
- Clicked the OK button.
- Set the Name of the rule to Public PFWG Redirect.
- Clicked the OK button.
- Clicked the OK button.
Rather fiddly. I have a similar setup for a Public HTML folder.
Finally, I sent Structured HTML Precludes aria-posinset
and aria-setsize
? as my feedback.
So far I am only receiving mail sent to the list if it includes me in the To field.
100% in GT3 (27th March 2008)
Today I completed the last event in Gran Turismo 3. Turns out you need to beat the gold-medal demonstration lap in a series of Time Attacks in the Arcade Mode.
For the past several races I’ve been running with all the electronic aids turned off. Makes the racing much more demanding, for sure. But the tyre physics are so well simulated and I know the tracks so well that this extra challenge is quite welcome. Powersliding the TVR Cerbera Speed 12 throughout the Trial Mountain endurance race was particularly memorable.
There seem to be several different cars you can win from each championship event, or the same car in different colours. So now I’m going through my favourite championships again with a car significantly slower than the AI use. Idea being that I won’t win every race this time so winning the championship will be tough and I should get a different car.
The lifespan of any game in the Gran Turismo series is incredible. Was totally worth buying a PS2 just for Gran Turismo 3 and 4!
Ian Hickson Compliments a Noob (25th March 2008)
Ian Hickson has continued working through table feedback. He and I discussed my research on #whatwg
. What is the best markup for dialogue? Here are a few different ways:
<blockquote>
with<p>
for author and message.<blockquote>
with<p>
for message with<cite>
for author.<div class>
with<cite>
for author,<blockquote><p>
for message.<blockquote class><dl>
with<dt>
for author,<dd>
for message.<blockquote class><dl class>
with<dt>
for author,<dt>
for message.
My new favourite is <blockquote><table>
with <th>
for author and <td>
for message:
Hixie: i don't believe i've ever looked at so many tables before :) Hixie: i ended up covering two whiteboards with little table diagrams BenMillard: I can well imagine! BenMillard: I think I looked at thousands overall because I wanted to see how consistent each site was Hixie: thanks for that, it made my life much easier :) BenMillard: I'm happy to be useful. not bad for a noob :P Hixie: :) BenMillard: what specifically did you find useful about it? was it just having links to lots of genuine data tables in one place? Hixie: that was a big part of it Hixie: but also your analyses were useful to clue me in to what was important and useful Hixie: also your stats were very useful as a way to quantify the qualitative experience of the many tables and the anecdotal impression of the distribution of the types of tables BenMillard: that's good to know. if/when I do more research, I'll concentrate the resulting document(s) on these useful aspects Hixie: awesome
<blockquote><dl compact>
would be OK. Creating <dialog>
seems a bit overkill.
Thoughts
Barely a year ago I had never studied markup. 2 years ago I was completely convinced that “Appendix C” style XHTML was the answer to everything. But now I’m being complimented for studying an issue around HTML5.
When people change their ideas for the better, I think it’s called growing.
ARIA and Clever Use of HTML4 (24th March 2008)
Mozilla’s #accessibility
IRC channel is used by Aaron Leventhal, Marco Zehe and various other Mozilla access developers. For the past couple of days, I’ve been there as well.
ARIA Example
Marco Zehe blogged about using aria-labelledby
and aria-describedby
, ending with this markup example:
<form action="post.php">
<div>
<span id="labelShutdown"><label for="shutdownTime">Shut down computer after</label></span></p>
<input name="shutdownTime" id="shutdownTime" type="text" value="10" aria-labelledby="labelShutdown shutdownTime shutdownUnit" aria-describedby="shutdownDescriptor"/>
<span id="shutdownUnit"> minutes</span>
</div>
<div id="shutdownDescriptor">Allows you to specify the number of minutes of inactivity after which your computer should shut down.</div>
</form>
I added a name
attribute to make it a successful control and corrected method
to action
.
The labelling text gets assembled in this order:
- Shut down computer after
- 10
- minutes
With this as a description for the control:
Allows you to specify the number of minutes of inactivity after which your computer should shut down.
An entirely reasonable form design. But rather a lot of fiddly markup?
Clever Use of HTML
The semantics for this example seem available in HTML4. By my reading:
- Implicit form labelling lets you put
<input>
inside<label>
. <fieldset>
groups things together.<p>
is for paragraphs.
So how about this markup, without using ARIA:
<form action="post.php">
<fieldset>
<label>Shut down computer after <input name="shutdownTime" type="text" value="10"> minutes</label>
<p>Allows you to specify the number of minutes of inactivity after which your computer should shut down.
</fieldset>
</form>
You could replace the <p>
because:
So how about this markup, without the <p>
:
<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" type="text" value="10" title="Allows you to specify the number of minutes of inactivity after which your computer should shut down"> minutes</label>
</form>
As the <label>
contains all the components a <fieldset>
seems unnecessary. Simple, decade-old structures from HTML4 seem fine for the semantics this example needs.
Copy Editing
The descriptive text here seems redundant due to the excellent <label>
text:
- Allows you to specify...
- The
<input>
is notreadonly
. - ...the number...
- A number is already present in the
<input>
. - ...of minutes...
- Already in the
<label>
text. - ...of inactivity...
- Not made clear from the
<label>
. We can adjust the<label>
, though. - ...after which your computer should shut down
- Already in the
<label>
text.
Leaving us with this:
<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" type="text" value="10"> minutes of inactivity</label>
</form>
But Wait, There’s Less!
type="text"
is the default, allowing this:
<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" value="10"> minutes of inactivity</label>
</form>
As a crude measure of complexity, the ARIA Example uses 490 bytes. This sample takes 135 bytes, 72% less markup.
Thoughts
Full accessibility and usability (apart from browser bugs) can be achieved in this example with simple markup from HTML4. Which is good news for everyone.
Marco has written a follow-up to the ARIA example. I expect there are examples where HTML4 would not be enough and ARIA would fill that gap.
Good Devices are Invisible (23rd March 2008)
Metal cutlery is a good device. Using it makes eating easier once you develop basic coordination and motor control. You don’t even realise you’re using it.
Plastic cutlery is a different story. It rarely fits nicely in your hand due to thick reinforcing beams running along all the outside edges. Despite these, it will bend and flex alarmingly when trying to eat. The knives are usually blunt and if you use more force they are liable to snap.
Eating becomes a worrisome balancing act between making progress through your food and avoiding mechanical failure. Bad cutlery turns a simple meal into a Grand Prix endurance event!
A good device like the metal cutlery becomes invisible because it works for the user. A bad device like the cutlery becomes obvious and annoying because it works against the user.
This applies to all devices. The difference can be as simple as choosing a different material. In software, it can be as simple as using a different control for a particular action.
Eurosport Owns Le Mans (18th March 2008)
Several days ago, British Eurosport’s Motorsports Weekend announced they now own the rights to covering Le Mans for the next 3 years!
- Every minute of the 24-hour race itself.
- Qualifying.
- Practice sessions.
- The historics race.
- Highlights of every race in the 5-race ELMS Championship, with some live coverage.
I remember the coverage they gave when Bentley won the GTP class and finished 3rd overall, after a 70-year absence from the event. Eurosport commentators really get what the sport is about and what makes it fun to watch, as well as being huge fans of the events themselves.
Aston Martin are in various racing events, including the Le Mans 24 Hours and the Le Mans Series. The most competitive vehicles from Peugeot and Audi are now turbo-diesels.
I’m really looking forward to this!
Zoe and Sarah Tie the Knot (15th March 2008)
The 3rd wedding I have ever attended was today. My half-sister, Zoe is now in a Civil Partership with Sarah. Apparently the Church of England thinks this isn’t a marriage. Everyone else does.
At the party afterwards I gave a speech, something along these lines:
It is said that the path of true love never did run smooth. I think it’s fair to say it’s been a bit of a bumpy ride for Zoe and Sarah. [Thankfully people chuckled at this.] But they’ve stick together, though the hard times and the good times.
They have built a life together. At the end of the day, I think that’s what marriage is all about.
Let’s celebrate the life they’ve built; the life they now share. Long may it continue. To Zoe and Sarah.
[Audience applauds.]
The shortness was to minimise my chances of messing it up. Drinking 2 double “Barcardi and Cokes” during the preceeding hour or two helped to steady my nerves. I was relieved the happy couple liked it since I had kept its contents a surprise.
Accessibility Interest in HTMLWG (11th March 2008)
Only 2% of HTMLWG Participants had recorded their interest in accessibility by May 2007. 4.5% have now done so.
Recorded interest has more than doubled from from 2% to 4.5% over the past 10 months.
Method
- I did a case-insensitive substring match for “access”.
- I checked each match was being used in the sense of usability for disabled people.
- I counted each match being used in that sense for each section of the survey.
- I removed Participants I had already counted.
Background and Expertise Section
20 Participants, reordered alphabetically by last name:
- Chris Adams
- Denis Boudreau
- Laura Carlson
- Joseph D'Andrea
- Eric Daspet
- Ivan Enderlin
- Henrik Dvergsdal
- Karl Groves
- Thomas Higginbotham
- Bhasker V Kode
- Murray Maloney
- Charles McCathieNevile
- Ben Millard (me)
- Joshue O Connor
- Debi Orton
- Gregory Rosmaita
- Samuel Santos
- Justin Thorp
- Jason White
- Matthew Wilcox
Tasks Section
2 more Participants, reordered alphabetically by last name:
- Thomas Bradley
- Darren West
Other Sections
0 Participants in the other sections.
Analysis
- 22 out of 494 Participants (4.5%) have recorded interest in accessibility.
Silent Majority?
At the previous count:
- 74 of 460 Participants (16%) answered the tasks survey.
- 9 of 74 answers (12%) recorded an interest in accessibility.
- Perhaps 12% were interested but only 9 had recorded that interest?
Applying that idea to the current numbers:
- 119 of 494 Participants (25%) answered the tasks survey:
- 22 of 119 answers (18%) recorded an interest in accessibility.
- Perhaps 18% are interested but only 22 have recorded that interest?
If this is true, interest has risen by 50% from 12% to 18% over the past 10 months.
Related Groups
WAI interact with HTMLWG. This count only includes Participants within HTMLWG.
Conclusion
Only 2% last time and 4.5% this time actually recorded an interest in accessibility.
Recommendation
Please include “access” in your entry to any section of that survey if you are interested in usability for people with disabilities. Then your interest will be included in my next count.
If you have no interest accessibility but your name is counted here, contact me and I’ll correct this entry.
Tutorial Index Rethink (9th March 2008)
Back in May 2007 I realigned the index of tutorials for GTA for compactness. This seemed like a good idea at the time. The result was a blob of links for a selection of tutorials and another to all the categories. Impossible to scan through or locate to a specific tutorial.
Compactness versus Comprehension
Scrolling is easier than navigating between pages, so now:
- Categories are not mentioned:
- They reflect my mental model, not necessarily the user’s.
- Every tutorial is available from a single click.
- Every tutorial is linked to, directly, with a description.
- Each tutorial has a row to itself.
- Tutorials are grouped by edition, subgrouped by category and ordered alphabetically.
- Links and descriptions are aligned within each edition.
- Each edition has its own section and heading
- Editions are ordered from newest to oldest.
More scrolling, definitely. But now:
- Any tutorial is available from a single click.
- Good for simplicity. Users can scan read one page to find any tutorial.
- A single page lets Find in Page speed up the process.
- A description next to each link tells users what they’ll get.
The same changes have been applied to edition index pages.
Copy Editing
Descriptions were often rather long and fluffy, so I’ve written them again. The steps I went through for one of them:
-
An article about why making new cars to the correct dimensions is important.
-
An article about whymaking new cars to the correct dimensions is important. -
Making new cars
tothe correctdimensionssize is important. -
Making new cars the correct size
is importantaffects their performance. -
Making new cars the correct size affects their performance.
It now summarises what the article describes in 59 characters. Microcontent ftw.
Building Accessible School Websites (9th March 2008)
Another person who wants to make a living by making websites the right way e-mailed me some questions about my work with Calthorpe Park School. The person is OK with me blogging the conversation as long as I anonymise their part.
I did the work [on my school website] for free because it was so simple.
My work with Calthorpe started for free, too.
Anyway - here it is:
[website address]
Looks nice. Intuitive to use. Good markup. Well done!
So now, a couple of years on, a particularly stroppy mother at the school has basically said that it’s all crap and that we need to have a forum on there for parents (which she wants to administrate)
Definitely a troll.
should be looking at this site for inspiration and that she's getting a quote from the guys who did that site to update our school site. I think you can pretty much imagine my reaction when I took a look at that school site
Looks nasty. Nasty to use. Nasty Markup. Nasty.
They have loads of students’ work, which is a very cool thing.
(They rely on frames. I can’t link to their pages sanely.)
The underlying URLs are less nasty than I feared. But still nasty. How does “Biscuits, Speed Project, Tudor, Exploration & Space” become /5/2008/1.html
? /work/year5/art/biscuits
makes more sense, imho. With a breadcrumb trail on the resulting page so you could reach the index for each level in the URL, naturally.
Hmm, now I’m the one rambling...
I’ve suggested that if they want a forum I’ll install Vanilla
Your first thought was to use Vanilla? Not Invision or phpBB? A [person] after my own heart! Are you single? :-P
Firstly - my personal opinion is that a forum on a school website is a bad idea - it could turn very nasty. If a parent administrates it then it'll turn into a forum for their opinion, not the school. Was this an option that Calthorpe ever thought of and maybe discarded?
I think nobody has asked for an online forum.
We have various parent-run liason groups, such as the Calthorpe Park School Association. More recently, there are plans for a Parent Forum Group.
Our school has about 1,000 pupils. So if 10% of parents want to be active, that’s 50 people to run groups and host meetings. Since all their kids go to the same school, they all live in the local area. This makes meatspace a fine choice for them. It also makes things more social than teh Intrawebnets.
Even with a fully illustrated manual done especially for her she does irritating things such as not providing a decent link text on downloadable documents (just the document name which means nothing!).
Have you put this manual on your website for public viewing? Maybe other people will find it through web searches and share their experiences.
Do you update the Calthorpe site or do they do it themselves via a CMS?
I make all the pages.
Various staff members provide content which goes to Warren Brand, the Assistant Head for Systems & Data. He used to maintain their old website and has been a tireless champion for making it better. He was on board with the accessibility stuff from our 1st meeting.
Each page has its main content in an HTML file. Some PHP is included before and after each file to create the header, breadcrumbs, navigation, sidebar, archive links and footer.
If you update it - do you charge a flat rate per month/year or do you charge by the hour?
Initially for free. But in 2006 Warren decided the time had come to make it a professional arrangement. He even got me backpaid for the work I had done since late 2005. :-)
I’m contracted at a flat rate per week initiall 3 hours per week, which multiples less than what I did. Now it’s 6 hours per week which is often less than I do. It helps fill in what I missed in the early days. It goes through their accounts via the Finance department (about 3 people staff it) with forms and paperwork and stuff.
I am registered as a Sole Trader with Public Liability Insurance valued at £1,000,000 which costs me about £50 per year.
Accessibility is a Solved Problem (Almost) (8th March 2008)
The infrastructure is already in place:
- Formats with meaningful structures.
- Software implements accessibility APIs at the OS level, such as:
- web browsers;
- e-mail clients;
- chat programs;
- desktop publishing suites;
- and so on.
- Assistive technologies adapt this information on to users in whatever way is most usable for them.
- Specialised peripherals allow input from anyone.
- Free or low-cost courses and support help users get to grip with ATs they need.
The big stuff has been figured out. Some details still need work:
- Authors to make better use of structured formats.
- Software to implement accessibility APIs fully in all applications.
- Usability to be improved in assistive technologies.
- Affordability of accessibility to be improved for users, authors and implementors.
There is an ever-diminishing place for:
- New formats which don’t have accessibility built-in from the start
- Developers who treat accessibility as a low priority enhancement request.
- Selling widgets to create accessible ghettos instead of widespread accessibility.
- Creating multiple versions.
This is the big picture for accessibility, as I see it.
Trying IE8 (7th March 2008)
Refreshing Sage today showed quite a bit of activity in the blogosphere. I soon noticed IE8 has been released.
IE Blog Entries
From earliest to most recent:
- Internet Explorer 8 Beta 1 for Developers Now Available
- Overview of the main changes developers should be interested in. Along with the smallest possible link to where you download it.
- IE Beta Feedback
-
- There will be a newsgroup open to all.
- Microsoft will chose who can transfer that feedback into the bug tracking system.
- Everyone can view the bug tracking system...if they register with a Microsoft service first.
- Why Isn’t IE Passing Acid2?
- Because the unofficial copies of the test are incompatible with their security precautions.
- IE and IP Licensing
- The new features are free to use and the new formats are free to implement.
- Activities and WebSlices in Internet Explorer 8
- Microformats and Feeds but different.
- IE and JScript
- More about scripting performance.
- IE and CSS 2.1 Testing
- Perfect tone making all the right noises. Plus the release of several hundred test cases.
- The Default Layout Mode
-
“Internet Explorer 8 will use its most standards compliant mode, IE8 Standards, as the default when encountering standards content.”
The 3 layout modes are named and given values:
- Quirks
- IE7 Standards
- IE8 Standards
Shortcut
Eric Law has an Enhance IE8 page up already. It includes a quick way of reaching the download links: GetIE.org
.
Getting and Using IE8
I’m writing this up as a UI review of IE8 Beta 1.
Looks like this was the perfect month to take time off work!
Zoe’s Birthday (7th March 2008)
My sister is now 27 years old. We went to a place I’ve not been to before. I had the spicey chicken wings as a starter followed by 10oz sirloin steak finished off with a caramel banana sundae.
The chicken and the sundae were outstanding. Neither are things I eat very much. This might well be the first time I’ve ever had banana ice-cream. The Boston HTMLWG F2F has turned me into a gourmet! Well, almost.
What Ben Millard would like from CSS3 (5th March 2008)
(Lengthy reply to Tell the CSS WG what you want from CSS3. I’m likely to revise this entry as it’s a quick scribbling of ideas to make the 10th March 2008 deadline. Discussion takes place on the www-style
mailing list and the CSS Working Group Blog.)
Big Picture
The things most relevant to my perspective as an author are:
- Widespread implementation of the useful things CSS2.1 defined years ago.
- Having all the main browser makers actively and co-operatively participating, as has been the case for a while.
- Avoid specialist features which can be handled in a more general-purpose way.
- Avoid or at least simplify any new syntax.
Widespread Implementation of CSS2.1 Features
CSS2.1 defines a lot of really useful things. If only implementation was widespread.
CSS2.1 Selectors
These would allow me to use fewer class
attributes:
- Attribute selectors for positioning different types of form control.
- Various tree-based selectors for navigation lists and specially styled groups of elements.
:hover
and:focus
on any element, for highlighting form controls.
Tabular values of the display
Property
Would help with ease, accuracy and robustness of layout:
- Grid-like layout, as in Umbel’s registration form.
- Layouts which span columns, as in Tower College’s contact form.
- (The perennial) equal height columns issue.
As an example, Calthorpe Park School’s layout mixes a combination of:
- Sliding Doors
- Faux Columns (can you believe that was 4 years ago?)
- Creating Liquid Faux Columns
We shouldn’t need brain surgery for this effect! Tabular display
ftw.
Review of some CSS3 Features
Multiple Backgrounds per Element
Enable much tidier markup for highly graphical and flexible layouts, such as Tower College and Umbel. Currently requires lots of <div class>
or <span class>
to layer all the necessary images.
CSS3 Selectors
Interesting for simplifying markup. Alternate table row styling, borders and backgrounds in nested navigation lists and other groups of specially styled elements, too.
The table of CSS3 selectors has “Meaning” as a column header. A paragraph after the table says each entry should have “Matches” added before it. The header column should be “Matches”, not “Meaning”? The terms “Pattern” and “Matches” are often used in RegEx and other pattern-matching systems, adding a familiarity bonus.
Shorthand
Shorthand properties in Level 3 seem more confusing than need be. Perhaps you should gather feedback on what authors would actually use these for?
Simple shorthand should make the common cases easy. Using the properties individually retains support for all complex cases. Much like the CSS2.1 border
properties.
CSS3 Color Module
Having all colours in one CSS specification is convenient. Especially the named colour keywords.
Grid Positioning, Advanced Layout: Template-based Positioning, Perhaps Others
Widespread implementation of display: table-*;
would make much of this redundant?
Ideas
I’m unsure if the suggested solutions here are the best available.
Horizontal Gaps in %
-based Layouts
At the moment, I have to:
- set all horizontal gaps in
%
, which sometimes turns out nice; - or apply the gaps to the first layer of elements inside each column, which works in columns with simple content but requires the gaps be undone for the second layer of elements in more complicated content;
- or apply the gaps to an extra
<div class>
inside the container.
Setting width
as x%
minus yem
would enable slightly less markup, slightly more robustness and other slight gains.
Table Cell Width and Text Alignment (Columnar Styling)
In the January GCSE Exam Timetable, I have these columns:
- Long names of exam papers, aligned left and made as wide as possible.
- Names of locations, aligned left.
- Times, aligned right. (3 columns.)
- Shortened examining board names, centered.
- Exam codes, aligned left. (Various mixtures of letters, numbers and punctuation.)
- Number of entries, aligned right.
I currently use lots of class
attributes. I’ve seen it done other ways. It’s a perennial issue.
How about table markup like this (but without the comments):
<table class="prose"> <!-- Contains long text -->
<caption>Timetable for <acronym title="General Certificate of Secondary Education">GCSE</acronym> Exams, January 2008</caption>
<colgroup class="main"> <!-- Exam names, important -->
<colgroup> <!-- Left aligned locations -->
<colgroup span="3" class="time"> <!-- Right aligned times -->
<colgroup class="board"> <!-- Centered exam boards -->
<colgroup> <!-- Left aligned exam codes -->
<colgroup class="number"> <!-- Right aligned numbers -->
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
No other class
attributes would be present throughout the table.
The relevant CSS would be like this:
/* - Data Tables */
table.prose {
width: 100%;
}
table.prose .main {
width: 90%; /* Minimise the width of other columns */
}
thead th {
text-align: center;
}
tbody th {
text-align: left;
}
table .number, table .time {
text-align: right;
}
table .board {
text-align: center;
}
So <colgroup class>
would set the styling for these columns. But it would be overriden by styles set on more specific elements, such as the <th>
elements. Somehow.
- Probably less markup than using the
align
attribute throughout the table. (This is a guess.) - Lets authors change their style across a whole website conveniently consistently by altering a few rules in the CSS file.
- The benefits for authors and users might be worth the special-casing in UAs?
The more tables a website has and the bigger they are, the greater the advantages of columnar styling.
Simplify the Language for Authors
A lot of new properties apply an image to the background of an element in different ways. There is a proliferation of side-by-side layout properties, too. They will not make authors’ lives easier, afaict.
- More difficult to learn as:
- different syntax;
- more confusion caused by more enumerated values;
- shorthand properties use different orders for similar things;
- too many property names to remember;
- different rules about what can be ommitted;
- and different restrictions on length units.
- Harder to figure out which properties suit the effect you want in the first place.
We can set multiple backgrounds on an element using the general-purpose extensions to background
. We can create side-by-side layouts using CSS2.1 features such as float
, position
and display
.
Consider how much success HTML gains from trying to be simple for authors...and how much confusion still arises! Contrast that with the complexity of and overlap between all the features and syntax CSS Level 3 proposes.
Reducing the Number of Images and the Amount of Markup
Drop Shadows, Other Shadows
(Specific feedback as requested in CSS Drop Shadows.)
Sometimes, the shadow is cast by more than 2 edges. For example, the outer edges of Kainos’s layout and around photos in its main content. The footer on Umbel has a tall, strong shadow below with faint, thin shadows either side. They are joined with a curving, narrowing, faintening shadow. Each icon in the footer and the navigation list has a very soft, even shadow around its whole circumference.
Designers usually want shadows to look exactly as their visual shows. They drew them so I don’t have to guess and browsers need not figure out a sensible default.
Hard edges ruin the effect of soft drop shadows. They are better as graphics, at least in professional designs.
Using alpha-transparent PNGs with border-image
would make box-shadow
redundant. In turn, multiple background-image
per element makes border-image
redundant. They are equal in terms of markup optimisation, afaict.
So why have box-shadow
? I can’t think of a reason.
Graphical Borders
I did the borders on Umbel by adding extra elements via Javascript. Each one is sized, positioned and given a background-image
from the main CSS. I’ve seen it done other ways, all require adding extra elements one way or another.
I think multiple rectangular portions of a single graphic applied to the main containers would be best for this. No need for border-image
and related attributes.
Selecting Rectangles from an Image
Each background-image
and border-image
requires a separate image file, afaict.
Selecting rectangles from an image allows all decorative graphics to be taken from a single image file. The markup can be as minimal as border-image
would enable. A single HTTP transfer would download all the decorative images for that page (or for the whole website):
- Performance effects of fewer HTTP Requests are pretty clear.
- Would be cached for subsequent page views much of the time.
- Only one image to do a conditional
GET
on when the cache expires, reducing HTTP requests on later visits.
It is used in the UI for Mozilla and its extensions is similar to CSS Sprites. But selecting specific rectangles of an image file allows infinite variations in the size of the element without other parts showing up. This removes the need for empty space in the image file, reducing filesize.
You might spread decorative graphics across up to 3 images:
.png
- for regular patterns along with alpha transparency effects, such as drop shadows.
.jpg
- for photographic decoration such as “smiling people”.
.gif
- for low bit-depth decoration such as icons or simple repeating patterns.
This would maximise image compression at the expense of 1 or 2 HTTP requests. If all your graphics are handled fine by one format, you’d only need 1 image.
Adding content images and graphical headings with <img src alt>
would remain, of course.
Notes about Authorship of Examples
I was involved in making each website I’ve given as an example. I have a maintainance contract with Calthorpe Park School. I do not maintain the other websites.
Haircut 4 (4th March 2008)
Same place and style as my previous haircut in October 2007, quarter of a year ago.
Month Off (4th March 2008)
My boss of awesomeness, Phil Smears, has agreed to reduce the amount of work he sends me from sdesign1 for this month. This lets me resume numerous side projects.
Making some of these side projects pay me is one of those side projects. Even just a little bit would make working on them much more sustainable.
Busy professionals want to help web standards and open source projects but can’t take time out of their lives to do so. If I’m successful in getting sponsorship, helping other people get sponsorship is something I’d like to do.
Flippin’ Wardrobe (3rd March 2008)
A 90° rotation of my wardrobe has made my bedroom a lot easier to get into. Before, you had to kind of waltz between it and a low worktop.