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.

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.

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:

• Review Of Cross-Browser Testing Tools – just published at Smashing Magazine
• 15 Highly-Useful Resources for Cross Browser Testing --  from DesignM.ag earlier this year
• 10 Useful Tools For Cross-Browser Compatibility Check – an article at 1WD.CO with some good annotations

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.

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 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 http://youtu.be/bWPj7EGjQt0 .

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 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.

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 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 Resets.com 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 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.