December 29, 2011

December 2011 Meeting Report

At our December meeting, we considered how to use HTML5 elements across browsers, even old ones. It turns out that there are two tricks that make that possible.

HTML5's structural elements (article, aside, footer, etc.) are block-level elements that let you define and style areas of a page without using div's and such. The obvious requirement is to make sure that the browser renders the elements as block-level. Modern browsers appear to treat these new elements properly, but we can make sure that all browsers do so. We use the fact that a browser is generally able to style tags even if it does not recognize the tags themselves. So we simply style our unknown tags to display as blocks, the browser complies, and we have our block-level elements. The easiest way to make sure this happens is to add a reset right into your style sheet.

A couple of examples:

Eric Meyer:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
footer,header,hgroup,menu,nav,section {
These resets, however, do not work with Internet Explorer before version 9, because earlier versions of IE do not style unknown tags. Solving that requires a second trick -- using a script called "the HTML5 shiv." This javascript can be called by simply adding this statement to the head of your page:
<!--[if lt IE 9]>
<script src="">
<![endif] -->
The shiv creates elements in the DOM that do not otherwise exist. The reset will then take those created elements and style them as blocks.

We downloaded and played with the actual script itself and found that it even works with a completely fictional tag called <pacs>.

December 11, 2011

December 2011 Meeting Announcement -- New Web, Old Browsers

The next meeting of the PACS CSS Workshop will be Saturday, December 17, at our usual 9-10 hour. Our topic this month is New Web, Old Browsers.

We saw last month that there are new tags in HTML5 that let us lay out a page with native tags instead of div's. We also saw that the process breaks down in IE8. This month, we will look at browser behavior and see how these new tags can be made to work in legacy browsers. HTML5 is not an official standard yet, but we will see that we can use these tags now and with confidence.

In the process, we will reveal publicly for the first time a new, never before seen HTML tag.

We will also have a giveaway book, courtesy of the Windows SIG. PACS membership is required, and this time, you will also have to answer a quiz to win.

November 20, 2011

November 2011 Meeting Report

At the November meeting, we covered the new structural elements in HTML5. There are five of them, and we compared two versions of the same three-column page to see how these new tags compare to the div's that we are used to using for things like headers and footers. The new tags are listed in this article from IBM where their use on a blog page is demonstrated.

Some other places to read about HTML5 are below.
We will continue next month on how to use HTML5's structural semantics across browsers.

November 15, 2011

November 2011 Meeting Announcement -- New Web, New Foundation

The next meeting of the PACS CSS Workshop will be Saturday, November 19, at our usual 9-10 hour.

Our topic this month is New Web - New Foundation. We will be looking at new tags introduced in HTML5 to define the structure of a webpage. They will make styling easier and cut down on "div-itis." But will they work across browsers? We'll see.

Be sure to check the PACS website for the full schedule of sessions this month. Google+, website analytics, and WordPress are features at three of our web-related SIG's.

October 16, 2011

October 2011 Meeting Report

At the October meeting of the PACS CSS Workshop, we started looking closely at the new elements for web development that are now coming into play.

We started with a demo page of a display of the planets, and noted that it did not work in Internet Explorer. We then worked with the demo page from SitePoint that accompanies their book on HTML5 and CSS3. Among the interesting items are the new video tag, drag and drop interactivity, geolocation, columns for text, and CSS3 animations.

Next month we will get more basic and look at the new HTML5 structural tags that we can use now.

October 10, 2011

October 2011 Meeting Announcement -- New Web, New Tags

The next meeting of the PACS CSS Workshop will be Saturday, October 15, at our usual 9-10 hour.

Last month we introduced this season's topic -- HTML5 and CSS3. That may sound like two topics, but they are intertwined enough that we will be going back and forth between them, looking at the two as a combined set of technologies.

In September, we saw some examples of HTML5 already in use. This month, we will look at specific examples of the new HTML tags and CSS styles that are available. Time permitting, we will start on how to put these new options into effect now, even as they are still being developed by the standards-making bodies.

The rest of the day at PACS will be busy as well. Check the website for the schedule of web-related groups. Make a special note that Frank Stepanski will be returning this month to demo Drupal at the Web Design SIG meeting.

See you Saturday.

September 18, 2011

September 2011 Meeting Report

At the September meeting of the PACS CSS Workshop, we started on our topic for this season, The New Web. We did an initial overview of the technologies that are going to change the way we make websites -- HTML5, CSS3, and the new browser API's which open up the creation of web apps. We looked at some examples such as Google's offline apps and Netflix's new user interface.

The book I have been using to prepare for these sessions is  HTML5 & CSS3 for the Real World from Sitepoint. You can download sample chapters from their website. They have a demo page with examples of the new technologies that are discussed in the book. We looked at that page briefly in September, and we will be referring back to it in future meetings as a good reference point. Open that demo in different browsers to get an idea of the various levels of support that are out there now.

September 11, 2011

September 2011 Meeting Announcement -- The New Web

The next meeting of PACS will be Saturday, September 17, and we are happy to say that the CSS Workshop will convene again this year at our usual 9-10 hour.

We have been running this workshop for several years now. As the mission statement on our website states, we "started with the basics of cascading style sheets and will continue as long as there is interest and we have something new to learn." We polled the members last June, and there was sufficient interest to continue again this year.

As to "something new to learn," it looks as though we will have as much to cover this year as in any single year since we began. A major shift is coming in how we structure and design websites, and not just in style sheets. To cover all of it, we will expand our focus a bit this year to talk about HTML as well as CSS.

At the September meeting, we will do an overview of some of the new developments in HTML5 and CSS3. That will set the stage for our sessions this year. We will also hit a couple of topics that were posted on the group website during the summer, for those members who did not do their vacation reading.

The rest of the day at PACS will be busy as well. Check the website for the schedule of web-related groups, all of which are back again this year.

See you on the 17th.

August 28, 2011

WebPutty -- Edit style sheets via a browser

This utility looks interesting: If you ever need to access a style sheet and edit it directly on a server, WebPutty lets you do that. It is a beta product and currently free. There is a video on the site showing how it works.

WebPutty also has some advanced styling capabilities, so it might be more than just a way to fix a site when you are away from your own computer.

August 13, 2011

Cross-Browser Testing

I was going through my notes recently to find a good tool for seeing how sites will look in different browsers, and I came across three online reviews of browser checkers. One article was just published this month. As with many of these blogs, the comments at the end by readers can be as instructive as the articles themselves. Take a look:

July 23, 2011

Summer School

Here's a nice review from the CSS-Tricks website of a few details about CSS that we might forget over time: Little CSS Stuff Newcomers Get Confused About.

July 04, 2011

Google Fonts -- A Teaching Moment

At our October meeting we discussed Google Fonts, fonts that are on the Google server and can be imported into your webpage using @font. And at the June Web Design SIG meeting, Saul Rosenbaum talked about Google Fonts as a way to add new fonts at no charge without worrying if your users have the fonts on their computers.

Since the October meeting, I have been using Google Fonts on this blog for the headings. I usually use Firefox for my browser, so it was not until our June meeting that I looked at the site in IE and discovered that the headings had reverted to Arial, my next font in the stack. The Google font was not loading in IE, though it worked fine in all other browsers I have tried.

I posted a notice at the Google feedback page, and I contacted the creator of the font. She had also filed a notice with Google. But now, three weeks later, there has not been a fix.

So I added Comic Sans as the second font in the stack (sorry) so that headings would not come up in Arial when viewed in IE. Take a look at this site in IE and in another browser and see the difference.

The lesson to be learned is that this cloud stuff is great, and Google Fonts is a nice example of cloud computing, but keep in mind that you lose some control when you take advantage of these things.

And as always, check your sites in all the browsers you can get your hands on.

June 19, 2011

June 2011 Meeting Report:
CSS Grids

At the June meeting, we went through a number of preliminary topics before getting to the main meeting. We demo'ed a new Windows utility from Stardock called Fences. Fences organizes icons on a desktop in movable sections. There are free and Pro versions. We then looked at two interesting navigation concepts for websites. One was the State of Utah's new site, which is very search-centric. The other site was called Eight, and it is inspired by the new Windows 8 interface that has been getting some notice recently.

Next we tried out a new, free HTML editor called BlueGriffon. BlueGriffon has a heritage from an earlier editor called Nvu. The new version has a toggle between wysiwyg and source screens, letting you edit in either, and there are premium add-ons available to purchase. There are versions for Win, Mac, Ubuntu, and of course OS/2. We used this editor during the meeting to edit our demo files. There are videos on how to create a website using BlueGriffon. The first video of the series is at .

Our main topic was wire frames or grids -- CSS files that set up intuitive layout schemes, letting you organize multiple elements on a page without a lot of effort. To demonstrate the concept, we used Blueprint, a CSS framework that includes a grid setup plus a full set of files to form the foundation of a site. Blueprint sets up a fixed width page. It then uses div's that have widths based on 1/24 of the page width and floats them to organize the elements. There is a lot of non-semantic code in frameworks, and the style sheets have a lot of declarations that end up not being used. But there are advantages to using grids to create page templates, particularly if you are working with other content producers.

I found this tutorial from Net Tuts + to be very useful in learning how to use Blueprint.

There are many other frameworks out there, and Tripwire Magazine has an article on twelve of them.

June 15, 2011

June 2011 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, June 18, at our usual 9-10 hour. This session is the last until PACS meets again in September.

Last month, we started on CSS grids, and we will get to that topic in more depth this month, including looking at some examples.

I also want to take a quick look at BlueGriffon, a new free cross-platform website editor. And I will demonstrate a new desktop utility that has nothing to do with CSS but is pretty cool anyway.

June 11, 2011

Designing a Scheme for Website Navigation

We have spent a lot of time at our meetings talking about techniques for website navigation. This article from Smashing Magazine is a great compilation of ideas on designing a navigation system for your site.

At our next meeting, I will demo a completely different navigation system from a state government's re-designed site.

May 23, 2011

May 2011 Meeting Report:
Reset Wrap-up and Wire Frames Intro

At our May meeting, we finished our review of CSS resets by looking at some specific resets for HTML5 webpages. Eric Meyer addresses HTML5 in his well-known reset file. A couple of other sites to check are HTML5 Reset and HTML5 Doctor.

We then finished by checking four reset files for common elements that we might want to incorporate into our own sites. The outline we used is entitled Review of CSS Resets and is posted in our Samples section.

For more lists of resets, try CSS and A Comprehensive Guide to CSS Resets.

We then moved on to wire frames, which are templates for complicated webpage layouts. We watched a video from a SitePoint CSS class and discussed the basic concept behind wire frames.

Next month, we will cover wire frames in more detail and also look at a new free web editor called Blue Griffon.

May 17, 2011

May 2011 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, May 21, at our usual 9-10 hour.

Last month, we looked at some specifics from the reset files we have been reviewing, and I have a couple of loose ends to cover.

Our next topic is wire frames, and we will get to it this month. We will have a video that introduces us to what they are and how to use them, and then we will look at some examples.

And there is a new free cross-platform website editor that we will look at if we have time.

April 17, 2011

April 2011 Meeting Report:
Reset Specifics

At our April meeting, we looked at a few specific topics raised by our review of CSS resets.

We noted that the Yahoo reset can be called right from a webpage by inserting a call into the head of the page: <link rel="stylesheet" type="text/css" href="">.

We then looked at how lists and quotes are handled, because those are often reset in the style sheets we have been studying. And we looked at some sites that have specific resets for HTML5 tags:
We finished with a general discussion of the use or not of resets.

Next month, we will tie up some loose ends and move on to the next topic, wire frames.

April 13, 2011

April 2011 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, April 16, at our usual 9-10 hour.

We took a detour at the March meeting into some new topics, and this month we will be back on track to finish up CSS resets. I want to go over some specific items that show up in several different resets and see why those items might be important. We will then put a wrap on the topic with some final thoughts.

Our next topic is wire frames. We will have a video that introduces us to what they are and how to use them, and then we will look at some examples.

March 20, 2011

March 2011 Meeting Report:
QR Codes and More

At our March 2011 meeting, we started with the announcement from the Associated Press that their stylebook will now drop the hyphen in the spelling of "email."

With that out of the way,we looked at a couple of websites to follow up on topics from prior meetings:
We then spent the bulk of the meeting talking about QR codes and showed how they can be used and how to generate them for your own purposes. The sites we looked at were:
We also looked at sites for actually making QR codes:
  • The Google URL Shortener creates a shortened version of a URL, but it will also create a QR code. As we noticed, it appears you have to be signed in to Google in order to use the QR feature. The Workshop's code below was generated by Google.
  • Quirify lets you create a text message that can be read by a QR reader.
  • This article from the NY Times lists other utilities for QR codes -- note the reader comments which have additional useful information.
  • If you use to shorten URL's, QR Codes are now included on the info page for every link, and can also be generated by appending .qrcode to any link.
For more technical information on QR codes, see this Google article.
CSS Workshop QR

March 17, 2011

March 2011 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, March 19, at our usual 9-10 hour.

There have been a few interesting issues in the browser resets that we have been discussing at our recent meetings. This month, I want to spend a little time looking at those issues, and then wrap up the subject with a final overview.

The next topic in our website makeover series will be grids, a way to create advanced layouts on a web page. We should be able to start on that subject this month. But I also want to demonstrate a very fast-growing technology that you might have seen recently without realizing what it was. Here's a hint: Remember the late, great :CueCat?

There are some other new developments that I hope to cover briefly, so we'll see how the time goes.

February 20, 2011

February 2011 Meeting Report:
Accessibility and Resets

This month, started with a few odds and ends before getting into our main topic.

We checked out a site with ten good developer extensions for the Chrome browser as well as a site about jQuery for Mobile. We then looked at two utilities for testing a site to see how it looks for viewers with different types of color blindness, ColorDoctor and Chrometric.

For the main session, we continued on browser resets by focusing on specific items in a reset and how they relate to the rest of your style sheet. We watched two videos from SitePoint: Practical CSS - lesson01: Exercise part 2 on basic styles and Exercise part 4 on styling lists.

February 17, 2011

February 2011 Meeting Announcment

The next meeting of the PACS CSS Workshop will be this Saturday, February 19, at our usual 9-10 hour.

We have been working with browser resets for a couple of meetings. It turns out that Eric Meyer has just posted a final version of his influential take on what goes into a reset. We will look at that and finish up the topic by testing different resets and then considering whether and when they are a good idea.

Our next topic is wire frames. Depending on time, we will use a video to get an idea about what they are and how to use them. I also want to touch on an accessibility issue. One way or the other, we will be busy.

January 16, 2011

January 2011 Meeting Report:
More on Resets

At our January meeting, we spent the first half following up on some topics from earlier meetings, including CSS sprites and Google Fonts. We also looked at some recent statistics on browser use, noting the decline of Internet Explorer in percentage terms and the rise of Chrome and Safari. Check these sites for the stats:We then did some more work with CSS browser resets. In addition to material from Sitepoint, we looked at two other resets and tried them on a sample page. Those two resets are Eric Meyer's latest version and the Yahoo YUI2 Reset CSS.

January 11, 2011

January 2011 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, January 15, at our usual 9-10 hour.

In December, we started looking at what are known as "browser resets," a subject that lately has generated some active commentary in the blogosphere. We watched a couple of videos last month, and this month, we will look at some different resets and try them out on sample web pages.

If we have time, we may get into our next topic, wire frames, but if not, we will hold that for February.