Philadelphia Area Computer Society -- CSS Workshop

January meeting cancelled

2012-01-20T16:42:00.001-05:00

The PACS meeting scheduled for January 21, 2012, is cancelled due to the severe weather forecast.

January 2012 Meeting Announcement -- HTML5 - What Happened to the "X"?

2012-01-16T20:22:00.000-05:00

Last month, we looked at browser behavior to see how the new HTML5 structural tags can be made to work in legacy browsers. This month, we will work on more aspects of this new standard and see how it will make the job of a web developer simpler. In the process, we will consider whatever happened to XHTML.

December 2011 Meeting Report

2011-12-29T12:14:00.000-05:00

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;
}

HTML5Doctor.com:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

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:

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 2011 Meeting Announcement -- New Web, Old Browsers

2011-12-11T21:38:00.000-05:00

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 2011 Meeting Report

2011-11-20T14:01:00.003-05:00

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 2011 Meeting Announcement -- New Web, New Foundation

2011-11-15T22:11:00.001-05:00

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 2011 Meeting Report

2011-10-16T22:15:00.000-04:00

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 2011 Meeting Announcement -- New Web, New Tags

2011-10-10T12:47:00.000-04:00

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 2011 Meeting Report

2011-09-18T10:13:00.002-04:00

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 2011 Meeting Announcement -- The New Web

2011-09-11T13:38:00.000-04:00

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

2011-08-28T17:05:00.000-04:00

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

2011-08-13T09:41:00.001-04:00

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

2011-07-23T14:45:00.000-04:00

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

2011-07-04T13:39:00.001-04:00

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

2011-06-19T23:09:00.000-04:00

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

2011-06-15T22:36:00.002-04:00

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

2011-06-11T08:11:00.000-04:00

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

2011-05-23T21:51:00.000-04:00

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

2011-05-17T21:24:00.002-04:00

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 2011 Meeting Report: Reset Specifics

2011-04-17T16:27:00.001-04:00

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="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css">.

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 2011 Meeting Announcement

2011-04-13T21:03:00.000-04:00

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 2011 Meeting Report: QR Codes and More

2011-03-20T13:49:00.000-04:00

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:

10 Useful Chrome Extensions for Web Designers from Template Monster Blog.
CSS Sprite Generator from Project Fondue.

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 bit.ly to shorten URL's, QR Codes are now included on the info page for every bit.ly link, and can also be generated by appending .qrcode to any bit.ly link.

For more technical information on QR codes, see this Google article.

CSS Workshop QR

March 2011 Meeting Announcement

2011-03-17T00:51:00.002-04:00

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 2011 Meeting Report: Accessibility and Resets

2011-02-20T16:56:00.000-05:00

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 2011 Meeting Announcment

2011-02-17T13:35:00.002-05:00

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 2011 Meeting Report: More on Resets

2011-01-16T22:09:00.001-05:00

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 2011 Meeting Announcement

2011-01-11T23:14:00.000-05:00

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.

New Typefaces

2010-12-28T16:01:00.000-05:00

Following on our meetings about using Google Fonts, I have changed the typefaces on the workshop blog. The top-level heading (h1) now uses the font called JustMeAgainDownHere. Second level headings (h2) use JustAnotherHand. More information on these are at the Google Font Directory.

December 2010 Meeting Report: Browser Resets

2010-12-19T10:43:00.000-05:00

At the December meeting, we started on the topic of browser resets. We watched two videos from Sitepoint that are part of an online course called Practical CSS. The videos are Practical CSS - lesson01: CSS resets and Practical CSS - lesson01: Exercise part 1. The specific reset file used in the videos is available at A Comprehensive Guide to CSS Resets. Scroll down to the heading Simple Reset. Russ Weakley, the creator of that reset, is the person who did the videos.

We will continue on this topic next month.

December 2010 Meeting Announcement

2010-12-15T20:58:00.000-05:00

Following our theme this year of website makeovers, we finished with the @font attribute in November. This month, we will look at what are known as "browser resets," a topic that we did not get to last month.

Many times, the first step in starting or revising a site is to replace the default styles that browsers use and load some basic style declarations to give you a blank slate to work with. We will show some videos on resets and look at some examples, and then consider whether resets are a good idea.

For a little background on this topic, check these articles from Six Revisions that just happened to come out this month.

November 2010 Meeting Report: Font Makeover

2010-11-21T14:52:00.005-05:00

At our November meeting, we updated the headings of this workshop's website by using Google Fonts. This new technology combines cloud computing with the @font-face attribute to let us use fonts that are not available on most computers. The top level heading on the site (H1) now renders with Reenie Beanie, and secondary headings (H2) render with Philosopher. The H1 font deploys properly across browsers, but H2 does not render properly on the iPad. Google's documentation states, "The Google Font API is not currently supported on iPhone, iPad, iPod, or Android."

For more on Google Fonts, check the Google Font Directory, and follow developments at the Google Web Font Blog.

In line with our theme this year of website makeovers, we also looked at Giving Your Older Web Designs a Refresh, an article with suggestions on what to look for when giving your site a new design.

November 2010 Meeting Announcement

2010-11-17T20:26:00.002-05:00

This month, we will finish up briefly with Google Fonts. In line with this year's theme of makeovers, we will use Google Fonts to change the headings on the workshop's website.

We will then move on to CSS resets. We have touched on this topic before, in both the workshop and at Web Design, but we have not looked closely at what goes into a reset. This month, I will use a video and some actual examples to show how a reset might be the first place to start if you are doing a website makeover.

If time permits, we can also look at some new sources of CSS information on the web.

And as usual, there is a full lineup of meetings this month, starting at 8 am with the Social Media SIG. Be sure to check the first project of that SIG, the new PACS Facebook page.

October 2010 Meeting Report: Google Fonts

2010-10-16T19:29:00.003-04:00

At our October meeting, we finished up on the @fonts selector by doing a live demonstration of how to incorporate a font into your page and then serve the font to your reader. We highlighted Font Squirrel, a site that is a source for fonts in multiple formats plus the style sheets to load the fonts into your pages.

We then looked at Google Fonts, a new technique for serving up fonts. Google Labs has an introduction to this technology at Google Font API. Another good introduction is A Guide to Google Font API at Six Revisions. To see the fonts available, go to the Google Font Directory.

October 2010 Meeting Announcement

2010-10-13T21:16:00.001-04:00

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

Following our theme this year of website makeovers, we will continue on the topic of fonts. Last month we looked at the @font selector, a CSS way to supply fonts to a user's browser. This month, we will finish up with @font, including a look at some sites for downloadable fonts. We will then move on to a new technology from Google for downloading fonts to a user's browser.

Depending on time, we will also check out some new websites that have useful information or tutorials relating to CSS.

September 2010 Meeting Report: The @font Tag

2010-10-02T12:53:00.002-04:00

At the first meeting of this season, we looked at techniques for avoiding the limitations of web-safe fonts. Generally, we can't use a particular font on a webpage unless we have confidence that users have the font on their computers.

We reviewed some font replacement techniques that have their own limitations. We then looked at the @font tag, which allows the web developer to upload fonts to the server to be downloaded by the user with the page itself. The obvious limitation is that one has to have the rights to use a font in that manner, and the tag can be tricky to use across browsers.

Some sites about @font that might be of interest are:

We also looked at a site suggested by Don Arrowsmith for checking on browser compatibility for new web technologies like CSS3 and HTML5: When can I use....

September 2010 Meeting Announcement

2010-09-22T20:58:00.001-04:00

Last year we had a running theme throughout the year -- styling navigation menus. This year, with CSS3 and HTML5 becoming increasingly important and even mainstream, our theme for much of the year will be makeovers – how to take advantage of the new technologies to bring our sites up to date and even push the envelope.

We will start this month with fonts. Adding style to text has bedeviled webmasters since the early days of browsers. We will look at some new ways to define fonts for more variety without using graphics.

Depending on time, we will also look at some new online resources for learning more about CSS.

June 2010 Meeting Report: Advanced Menu Styling

2010-06-23T22:52:00.002-04:00

At our June meeting, we put together the elements of menu styling that we have been working on all year and looked at how to create an advanced, graphic-rich menu. We followed the tutorial at Web Designer Wall and stepped through that style sheet to show how the CSS elements worked together.

For some more advanced navigation menus, check Website Navigation Menu Toolbox at DesignM.ag.

PACS is off for the summer. The next meeting is September 25.

June 2010 Meeting Announcemenrt

2010-06-13T14:08:00.002-04:00

The next meeting of the PACS CSS Workshop will be this Saturday, June 19, at our usual 9 – 10 am time slot. The June meeting is the last for this season.

During the year, we have been looking at the bulding blocks of navigation menus. This month we will put the blocks together to create an imaginative and creative menu using CSS.

May 2010 Meeting Report: More CSS3 and Sprites

2010-05-15T22:12:00.003-04:00

At the May meeting, we again looked at some sites about CSS3 that we had briefly reviewed in April. This time, we were able to spend a little more time with them. Links are below:

We then discussed font properties in CSS and how to use the font shortcut properly.

We ended with a look at a simple CSS sprite. For more on sprites, and to see some great examples, take a look at The Mystery Of CSS Sprites.

May 2010 Meeting Announcement

2010-05-13T22:16:00.001-04:00

The next session of the PACS CSS Workshop will be this Saturday, May 15, at the 9 - 10 hour.

This month we will follow up on some items from the April meeting, including navigation, a subject we have been tracking all year. We also have some topics that were suggested by members, and we will try to hit some more CSS3.

Google Search Result Rankings Include Page Speed

2010-04-29T21:35:00.002-04:00

Don Arrowsmith was good enough to pass along an article called Google Search Result Rankings Include Page Speed. The article indicates that Google has made this policy official.

We discussed that possibility at our April meeting. It might be a good idea to start checking how our pages load -- check the April notes for an online utility that does just that.

April 2010 Meeting Report: Fixed Position and CSS3

2010-04-18T11:21:00.004-04:00

At our April meeting, we looked at websites relating to some of the topics we have been covering recently, and then we followed up on items from last month's meeting.

We started with a site called Pagetest that lets you measure the download speed of a webpage. The site give feedback on where a page slows down when it is loading. This information might be relevant to a page's Google ranking, see this article at GigaOM.

Next, we touched on the CSS properties of :focus and outline by looking at an article entitled Whenever you use :hover, also use :focus.

We then discussed CSS3, using these sites as demonstrations:

Finally, we did some more work with the position:fixed property, a topic we had started in March.

April 2010 Meeting Announcement

2010-04-15T22:29:00.001-04:00

The PACS CSS Workshop meets this Saturday, April 17, from 8 to 9 am in the Alps Room of the Giant Supermarket at 315 York Road, Willow Grove, PA.

We have a number of follow up items to topics we discussed last week, including navigation, styling links, and CSS3, plus a new way to test your page's performance.

In addition to the usual lineup of sessions, this meeting also features the debut of Susan Dykas' new Social Media SIG at 8am! So come early, grab one of those giant Giant coffees, and catch up on all the new developments on the web.

March 2010 Meeting Report: Background Images and CSS3

2010-03-21T11:42:00.002-04:00

At the March meeting, we followed up on our topic from February, showing how to clickable image using CSS and not putting the image into the HTML. We then took a second image and used it as the hover background image.

We spent the second half of the meeting looking at some of the new features that will be part of CSS3. The sites we looked at are listed here:

Basic CSS3 Techniques That You Should Know

CSS3 Techniques You Should Know

Dabbling in CSS3: Drop Shadow

Also take a look at this site: CSS3 Generator

March 2010 Meeting Announcement

2010-03-19T09:09:00.000-04:00

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

We have two things I hope to cover this month. One is to look at background images using the example from last month and expanding on it, including using different images for link and rollover. That last topic will lead toward a discussion of the CSS sprite.

But we might not get to sprites because I also want to look at some examples of CSS3 properties because browsers are starting to incorporate CSS 3, even though it is not yet adopted as a standard.

February 2010 Meeting Report: Clickable Background Images

2010-02-20T22:12:00.002-05:00

At recent meetings, we have looked at styling links and positioning elements with CSS. This month, we took those styles and added background images to create a clickable image that was entirely styled with CSS.

The technique was based on the article Clickable Background Images Via CSS. We started by reviewing the HTML technique for making an image clickable, and we talked about the deficiencies of that approach. Then, we showed how CSS background, position, display, height, and width could be brought together to achieve the same result while keeping all presentational elements in the style sheet.

February 2010 Meeting Announcement

2010-02-15T22:28:00.000-05:00

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

We have been working on navigation menus, starting with styling links, and then going to positioning. This month, we will tie up some loose ends from last month. Then we will put the elements together to make a link with a graphic background, using as an example something I recently did for a site.

Finally, if we have time, we will look at some interesting new properties that are coming with CSS3.

January 2010 Meeting Report: Using Position for Page Layout

2010-01-16T21:36:00.002-05:00

We started out January meeting with a look at some statistics from some local government webmasters showing the browsers used to access their sites. Over the last year, generally Firefox has increased in use, IE6 is still a major player, and Chrome has made progress.

We then looked at an article on The Case Against Vertical Navigation from Smashing Magazine. The article was nicely related to the topic that we are covering in this year's meetings.

We then moved on to the tutorial on positioning that we have been working on, Learn CSS Positioning in Ten Steps. We finished that tutorial, and next month will move on to positioning background images.

January 2010 Meeting Announcement

2010-01-11T20:24:00.001-05:00

The next session of the PACS CSS Workshop will be this Saturday, January 16, at the usual 9-10 am hour.

At our November meeting, before the snows, we looked at absolute and relative positioning, and then put them together to see how they worked with each other. At this month's session, we will finish the positioning tutorial that we have been working on, and then move to another tutorial on graphics and links. The goal is to show how to create a navigation menu that is a cut above the usual horizontal or vertical list.

I will also have some interesting statistics from a few government websites about browser usage.

December 2009 Meeting Report: Let It Snow

2009-12-20T19:40:00.000-05:00

We were snowed out this month, so in January, we will continue with positioning and navigation. See you then.

December 2009 Meeting Announcement

2009-12-17T21:39:00.000-05:00

The next session of the PACS CSS Workshop will be this Saturday at the usual 9-10 am hour.

Last month, we looked at absolute and relative positioning, and then put the two together to see how they worked with each other. At this month's session, we will finish the positioning tutorial that we have been working on, and then move to another tutorial on that is more focused on graphics and links. The goal is to show how to create a navigation menu that is a cut above the usual horizontal or vertical list.

We will also have a website or two of interest.

November 2009 Meeting Report: Absolute vs. Relative Positioning

2009-11-22T12:03:00.004-05:00

Our November meeting started with a look at some websites with useful CSS material:

We also looked at two Firefox add-ons that let you see the structure of your page, something that is important in order to understand how positioning will work with your elements:

We then continued with the tutorial by BarelyFitz Designs called Learn CSS Positioning in Ten Steps. We reviewed relative positioning, then moved on to absolute positioning, and then looked at how absolute and relative work together.

November 2009 Meeting Announcement

2009-11-19T22:17:00.000-05:00

This month we will continue working on positioning. There was something that bugged me as we were doing the example last month, and I will see if we can resolve it. We will then move on with the different ways of using the CSS position:relative properties.

I will also have a couple of new websites that have some good ideas on using CSS.

October 2009 Meeting Report: Relative Position

2009-10-17T20:30:00.002-04:00

We started the October session with a look at some recent articles on web design:

Online Web-design tools for the beginner is a collection of web tools to get site going quickly and easily.

Guide to CSS Font Stacks is a collection of sites about choosing fonts for websites.

CSS Tips and Tricks Collection is just what the name implies -- a set of links to sites with various ideas for website design.

We then went into the main topic for the meeting. This season, we are continuing to work on navigation menus. Last year we styled the links. This year, we will be positioning the menu items outside of the usual vertical or horizontal lines and then adding graphics.

We began with positioning and looked at the CSS position: property. We looked at one site that has a review of this property, CSS Positioning. We then began using the tutorial at Learn CSS Positioning in Ten Steps and did the first two steps. We will pick up from there next month.

October 2009 Meeting Announcement

2009-10-15T22:30:00.000-04:00

At our next meeting, we will get back on track after a detour into free and open source software last month.

We will look at some issues with positioning and background images, and how they work together. Our aim will be to add these styles to what we previously worked on with links, and then make some creative navigation menus.

September 2009 Meeting Report: Free Software for Web Editing

2009-09-20T21:12:00.004-04:00

The September meeting of PACS was devoted to free and open source software. With that theme in mind, at the CSS Workshop we looked at HTML editors and related programs that are free and in some cases open source.

We started with a current listing of free programs at Best Free WYSIWYG HTML Page Editor Review.

We looked at these editors:

Amaya, an open source editor from the W3C. Last updated September 9, 2009.

SeaMonkey, an internet application suite based on the Mozilla source. Includes an editor called Composer. We looked at a beta of version 2, released September 12, 2009.

PageBreeze, a commercial product that is free for personal, not-for-profit, or educational use.

CoffeeCup, another commercial product that has a free version which has some features not activated.

We also looked at two other applications for web development:

FileZilla, an open source FTP client.

TopStyle, a commercial CSS editor. There is a free version that has a nag screen and has some limts to its functionality.

September 2009 Meeting Announcement

2009-09-10T21:11:00.002-04:00

The first meeting of the season for the PACS CSS Workshop will take place on September 19. We will again meet at the 9-10 hour in the Alps Room.

This month, the theme of the PACS meeting is Software Freedom Day. The group will be highlighting free and open source software throughout the day. In line with that theme, we will start our session with a look at free HTML editors. These programs let you do WYSIWYG editing without spending the money for Dreamweaver or other commercial editor.

Depending on time, we will then start on our topic for the next couple of meetings. Last season, we worked through using CSS to style a navigation menu. This year, we will take the next step and incorporate images, so as to create more attractive and user-friendly navigation buttons.

15 Must Read Articles for CSS Beginners

2009-07-09T20:39:00.002-04:00

The Line 25 website has a nice run-down of articles from various sources entitled 15 Must Read Articles for CSS Beginners. We have covered most of the subjects at our workshop, and others will be covered next season.

Don't be fooled by "Beginners" in the title. These articles might be introductory, but some of the subjects are fairly advanced. And you might find that the locations of these articles are sites that you will want to follow for future articles.

Check Sites in Various Resolutions

2009-07-04T12:56:00.002-04:00

ViewLike.us is a new website that lets you check how your website looks in different resolutions. Checking different resolutions is obviously a good idea, but it is not always easy without a bunch of computers. This site might be a solution. It even includes iPhone and Wii Browswer.

If you try it, leave a comment here about how the site worked for you.

June 2009 Meeting Report: Adding Up the Menu Options

2009-06-21T15:51:00.006-04:00

At our June meeting, we discussed the elements of navigation menus and then saw how those elements worked on some sample menus.

We first considered the HTML foundation for a menu. Looking at a couple of major sites, we saw that the unordered list seems to be the most accepted format, but a simple sentence list is often used for secondary menus, like footers. Compare the White House site with the New York Times. Load them in Firefox, turn off styles, and check the actual HTML of the different navigation sections, both in body and in footer.

We then looked at the below online tutorials to see how menus can be styled with just CSS and no graphics.

Horizontal Navigation using list property - two methods

Button effect with only background colors

Next season, we will continue with using graphics, as illustrated in this Web Designer Wall tutorial that we looked at briefly.

June Meeting Announcement

2009-06-18T21:34:00.000-04:00

The next meeting of the PACS CSS Workshop will be this Saturday, June 20, at 9 to 10 am.

At this session, we will bring together the different elements of navigation styling that we have discussed this season. We will sum up where we have been, and then show how to use CSS to make navigation menus that are attractive as well as functional. Along the way, we will raise another of our web design philosophical questions, so you will have something to ponder while hanging at the Wildwoods this summer.

It will be a grand finale, so don't miss it.

May 2009 Meeting Report: Building Blocks of Nav Menus

2009-05-21T21:48:00.002-04:00

At our May meeting, we returned to the topic of styling navigation menus, a topic we have been covering throughout this year.

This month we looked at the CSS properties that I think are keys to creating attractive menus. Those properties include

pseudo-selectors, using the LoVeHA order;

display:, both block and inline-block, the latter being increasingly supported by browsers;

list-style, particularly list-style-type:none;

background, both color and image;

position.

And to get really creative, image editing for creating background images.

May Meeting Announcement

2009-05-14T21:05:00.001-04:00

The next session of the PACS CSS Workshop will be held this Saturday, May 16, at the usual 9 - 10 am hour.

We will get back to the subject of navigation menus by looking at the building blocks of good navigation styling and considering some issues that come up in designing a navigation system.

We will also cover a couple of other topics of interest related to web design, as well as anything else that comes up in discussion.

30 Exceptional CSS Navigation Techniques

2009-04-30T22:37:00.002-04:00

Since we have been talking about CSS navigation this year, I think this article from Six Revisions will be of interest. Many of the examples are from websites where you can find even more ideas. We'll see if we can work through some of these approaches to navigation in coming meetings.

April 2009 Meeting Report: More On IE8

2009-04-18T20:51:00.002-04:00

At our April meeting, we started by looking at a page from CSS Tricks on the different options for setting type size in CSS. There are some nice visuals there to illustrate the different units of measure. For another article on fonts from a different perspective, check out Typeface Inspired by Comic Books Has Become a Font of Ill Will.

We then returned to looking at Internet Explorer 8, which will shortly be added to the Microsoft update system. We looked at the new update/bookmark utility called Web Slices. For information, see the Microsoft IE8 site and New Features To Slice, Store, And Accelerate Your Web Applications.

We then discussed compatibility with earlier browsers, a topic that is covered in How Do I Fix My Site Today?

Finally, we looked at more of the standards that Internet Explorer now complies with, including list style types, borders, generated content, and paged media attributes.

April Meeting Announcement

2009-04-16T23:28:00.000-04:00

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

We have been working this year on styling links and creating navigation menus with CSS. Last month, we took a side trip to look at the new Internet Explorer 8 and its claim of full support for current CSS standards.

We had a few leftover topics to look at regarding IE8, and this month, we will finish up with those and then head back to navigation. Along the way, I will give you a philosophical question to ponder as you back up your hard drives next week.

March 2009 Meeting Report: Online CSS Utilities; Internet Explorer 8

2009-03-22T13:03:00.001-04:00

At our March meeting, we first looked at an online site for creating CSS declarations. The site lets you use drop down menus for various properties and then copy and paste into the head of a webpage. The site is CSS Mate. There are other sites out there that do the same thing -- just do a search.

We also looked at a couple of sites that create color palettes. One was Color Blender. You can also try Color Mixers. Again, there are other sites out there like these, just do a search.

We then looked at Internet Explorer 8 and its support for CSS properties that were not supported before or were not completely supported. Information is at Microsoft's IE8 page. There is a separate page on CSS Improvements in Internet Explorer 8.

March Meeting Announcement

2009-03-19T21:58:00.002-04:00

The next session of the PACS CSS Workshop will be this Saturday at 9 - 10 am.

We will continue on the subject of styling menus, but I hope to take a slight detour as well. I just downloaded Internet Explorer 8, which was released today, and I hope to be able to show what might be new in IE8 as far as CSS support. For those interested, the download page is at http://www.microsoft.com/windows/internet-explorer/default.aspx. You will notice that versions 6 and 7 are available on that same page. Install them in a virtual machine, and you can test your sites like its 2001 all over again.

February 2009 Meeting Notes: Extending Pseudo-Classes

2009-02-22T10:30:00.004-05:00

At our February meeting, we took pseudo-class selectors to a new level by employing combined declarations and by using classes.

A combined selector looks like this -- a:hover:visited. It would define the hover style of a link after it has been visited.

So in the below example, the link hover will be overlined when not visited, but underlined after being visited:

a:hover {color:red; text-decoration: overline;}
a:hover:visited {color:red; text-decoration: underline;}

Adding a class to a pseudo-class selector will let you apply the styling to specific links, and that will be useful for defining the style of navigation links. The syntax is familiar:

a:link.nav {color:green;} -- the style declaration
<a href="PACS_Home.htm" class="nav"> PACS HOME</a> -- the link that will now have the text color green

We ended by looking at two proposed tags, <nl> and <nav>, which, if either is adopted, will make it easier to define and style navigation links.

February Meeting Announcement

2009-02-16T19:30:00.001-05:00

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

We will continue on the subject of styling links, with the goal of developing interesting navigation menus. We worked last month with the pseudo-classes that can be used with the anchor tag, emphasizing the correct order to be used in order for the links to be styled properly.

This month, we will finish off some loose ends relating to that discussion and then get into compound declarations that can give you more power to style links in different ways on the same page.

Along the way, I will show you a couple of HTML tags that I can almost guarantee you have never heard of.

January 2009 Meeting Notes: Pseudo-Classes

2009-01-18T11:34:00.002-05:00

The January meeting was about using CSS to style links. We started with the HTML attributes for the body tag that allow you to set the colors of a link when it is unvisited, active, and visited. Of course, CSS gives you that and more, so we moved on to using CSS to style links.

First, we saw that the anchor tag can be styled the same way as any selector, but the result does not differentiate between states of the link. There is more flexibility in using pseudo-classes.

The pseudo-classes that apply to anchors let you style four states of links: unvisited, hover, active, and visited. (There are other pseudo-classes, but they do not come into play with the anchor tag.)

We noted that the preferred order of these pseudo-classes in a style sheet is link, visited, hover, active. "LoVe HA" will help you remember. Changing this order can result in one declaration being overridden by another declaration, rendering some of your styles ineffective.

January Meeting Announcement

2009-01-15T23:12:00.002-05:00

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

We will continue our review of styling the anchor tag, so as to create interesting navigation menus with CSS. We talked about the HTML of links last month. This month, we will get into adding style to those links and discuss the concept of the pseudo-class.

Along the way we will also consider LoVe, HA! Seriously.

December 2008 Meeting Notes: The Anchor Tag

2009-01-15T22:57:00.003-05:00

At the December meeting, we went through the basics of the HTML anchor tag. We talked about some of the attributes of the tag, like title and target. We spent some time discussing how to style the title of an anchor, using an example from the Code: qTip website. We also discussed linking to named anchors within a page and to named anchors within another page.

As an example of how creative one can be in creating navigation menus with CSS, we looked at two examples from Stu Nicholls' site, A Circular Menu and A Circular Menu with Sub Menus.

December Meeting Announcement

2008-12-14T17:12:00.002-05:00

The next session of the PACS CSS Workshop will be Saturday, December 20, at our usual 9 - 10 hour.

My thanks to Reed Gustow for handling last month's meeting. This month we will jump back to the topic that we started in October, using CSS to create navigation menus. In October, we talked a little bit about philosophies of navigation and interfaces in general. On that topic, members might be interested in a book from O'Reilly, Designing Web Navigation, by James Kalbach, http://oreilly.com/catalog/9780596528102/index.html.

We will continue looking at the HTML behind links and then move on to the CSS that can be applied to the anchor tag. We will be on this topic in future sessions as well.

And just in time for the holidays, we have a book from O'Reilly that we will raffle: CSS: The Missing Manual, http://oreilly.com/catalog/9780596526870/index.html.

Check the PACS website for details on the rest of what will be a very full day at PACS.

November 2008 Meeting Notes: Multi-Column Layouts

2008-11-22T14:28:00.002-05:00

The November meeting was organized and conducted by Reed Gustow. The topic was multi-column layouts with CSS. The techniques can get tricky, particularly if you want the columns to be of equal height.

Reed demonstrated some techniques found on A List Apart, a fantastic resource for web designers.

Reed provided his notes and samples, and they can be downloaded by clicking here and saving this file, and then extracting the examples.

CSS Book Giveaway from Sitepoint

2008-11-19T18:16:00.004-05:00

For a limited time, Sitepoint is giving away for download a free copy of The Art & Science of CSS. We have used this book to organize a few meetings over the past couple of years. It is an intermediate level work that covers specific aspects of a web page and shows how to style each in different ways.

Sitepoint actually calls this a Twitaway, i.e., a Twitter giveaway, but it is not necessary to use Twitter to take advantage of the promotion. Full instructions and more information are at this page of the Sitepoint website.

November Meeting Announcement

2008-11-13T22:22:00.001-05:00

The next meeting of the PACS CSS Workshop will be this Saturday, November 15, at 9 - 10 am. I will be out of town, and Reed Gustow has graciously volunteered to cover this month's session.

Reed will cover multi-column layouts, emphasizing some good techniques for making equal-height columns, something that can be very tricky. It is an important topic for developing professional looking webpages that are easy to maintain, so don't miss it.

September Meeting Notes

2008-11-13T21:26:00.003-05:00

Reed Gustow, who was good enough to cover the September meeting of the CSS Workshop, sent me the examples he used for that meeting. The topic for September was advanced layout techniques, and Reed demonstrated a 3-column page format using CSS. I have uploaded a zipped folder of the examples for those who want to review their notes. Click and save this file, and extract it to retrieve the files.

October 2008 Meeting Report: Styling Links

2008-10-19T08:58:00.002-04:00

At our October meeting, we began a series of presentations on styling the navigation menu of a website.

Navigation can help give a site a distinctive look, one that carries over throughout the site. We discussed some of the design objectives of a navigation scheme and how the design can help or hinder the site's usebility and accessibility.

We looked at a few examples of navigation schemes using CSS (links open in new browser windows):

CSS: Pushbutton Links-Mike's Experiments

Advanced CSS Menu

Stu Nicholls | CSSplay | CSS only menus

In order to style menus, even cutting and pasting from an example, we need to understand the HTML that creates links. To that end, we began with a review of the basics of the anchor link in HTML.

We will continue on this topic in December. At the November meeting, we will have a special presentation on a topic to be announced.

October 18 Meeting Announcement

2008-10-17T00:29:00.000-04:00

The next session of the PACS CSS Workshop will be held this Saturday, October 18, from 9 to 10 am in the Alps Room at the Giant Foods community center.

We will be starting a series of meetings on navigation. It is a topic that Web Design has covered, but as is our usual practice, we will look at the basics of styling navigation links to understand the foundations better. With that goal in mind, the October session will be about styling links, starting with HTML and working forward.

September 20 Meeting Announcement

2008-09-12T20:32:00.002-04:00

The first session of the CSS Workshop for this year will be held on September 20. It will be at the usual 9 - 10 am time slot, but at our new location. By now you should have received a mailing from PACS to confirm that PACS is moving to the Giant Foods Community Center located on the upper floor of the store at 315 York Road, Willow Grove, PA. This location will be more convenient to get to, and all indications are that the facilities are great.

I will be away this month, but Reed Gustow has graciously agreed to lead the CSS session. Reed will talk about advanced layout techniques by demonstrating a 3-column page format using CSS. The example will be taken from Rachel Andrew's great book, "The CSS Anthology: 101 Tips, Tricks and Hacks." Here is the example online, to show where the session will be going.

Along the way, Reed will get into positioning, a topic that will help you get into some more advanced layouts using CSS.

For directions to the new meeting location, go the the PACS website.

June Meeting Report: The Cascade

2008-06-25T21:33:00.002-04:00

At our June meeting, we talked about the "cascade" in cascading style sheets. We looked at the different ways of applying styles to a page and how the cascade determines which of conflicting styles is applied to an element.

We reviewed browser default styles and how a user can change those default settings. We then looked at inline, embedded, linked, and imported styles. Where styles conflict, the more specific style sheet will prevail, though the priorities can be reversed by adding "!important" to a style declaration.

I posted a test file at the Sample Pages section of the website (look at the bottom of the page). You can download a zipped folder that contains the page and three style sheets. Open the page in an editor to play with the style definitions and understand how the cascade works. For more help, try HTML Dog which has a number of tutorials.

June 14 Meeting Announcement

2008-06-11T22:16:00.000-04:00

The next meeting of the PACS CSS Workshop will be held this Saturday, June 14, at 9-10 am. We are meeting on the second Saturday due to the school schedule. This meeting is the last until September.

The agenda is still being worked on. There are a couple of topics that ought to fit into the session so that we do not run over to next year.

And speaking of next year, we will have an exciting announcement, if you have not already heard, about where PACS will meet next year.

There is the usual wide range of meetings scheduled for this month, including a very timely presentation at the Web Design SIG on Microsoft's Silverlight. Check the PACS website for more information.

Applying Divine Proportion To Your Web Designs | How-To | Smashing Magazine

2008-05-29T20:51:00.000-04:00

Following up on our recent discussions at the Workshop and in Web Design, here is an article from Smashing Magazine on Applying Divine Proportion To Your Web Designs. The article adds some more information to our talks about the Rule of Thirds.

May 17 Meeting Report: Grid-Based Design

2008-05-18T21:27:00.002-04:00

Our May meeting was about effective ways to lay out webpages.

We started by briefly looking at Dreamweaver templates. We touched on this subject in April when we were talking about Contribute. Templates can be convenient for an individual developer, and in an enterprise setting, templates can enforce controls over changes that can be made on a page by other people editing the site.

We then went on to talk about page layouts and the concept of grid-based design. Many current websites employ a layout that is divided strongly into horizontal sections that can get rather complicated to organize. Using a grid can help to keep a clean design while using complex arrangements. During the discussion, we reviewed the Divine Proportion and noted how grid design can help to use that proportion to arrange material on webpages. We also briefly looked at some tools for setting up grids.

The sites we looked at are listed below.

Design and the Divine Proportion

Grid systems in Web Design

Five Simple Steps to designing grid systems

Column Techniques How-To Smashing Magazine

Blueprint Grid CSS Generator

Blueprint: A CSS Framework

Seven Smooth Steps to Superb Grids

Eric Meyer's CSS SCULPTOR

May 17, 2008 Meeting Announcement

2008-05-13T23:20:00.001-04:00

The next session of the PACS CSS Workshop will be this Saturday at 9 - 10.

This month, we will to continue our discussion on tools for using CSS more effectively. We reviewed some in April, and I want to look at a few more this month.

We will start with Dreamweaver templates, just to give a general idea of how they work. The topic is not specific to CSS, but it ties in with the discussion about Contribute that we had last month.

Then I want to show some tools for laying out a webpage with a structure that is more complex than just the header-body-footer format. We will talk about grid-based design, see how it can be used to make modern layouts, and look at what to use to make the process easier.

If that were not enough, thanks to the generosity of Microsoft and Dani Diaz, we have a great raffle giveaway -- a copy of Expression Web, Microsoft's web design tool. The usual rule applies -- current members of PACS qualify for the raffle. We will be checking to confirm membership on this one, so be sure to join or renew your membership if you are not current with PACS.

FeedDemon 2.6.1 [Regular Guy Reviews]

2008-05-07T20:26:00.000-04:00

At our last meeting, we talked about RSS readers during our discussion of some good online sources of information on web design. I used FeedDemon as an example of a stand alone RSS reader. This pretty thorough article, FeedDemon 2.6.1 at Regular Guy Reviews, compares FeedDemon with Google Reader. The author likes them both and basically says it comes down to how you access your feeds, from one or two computers or from anywhere you happen to be.

Article from Smashing Magazine: Improving Code Readability With CSS Styleguides

2008-05-05T16:22:00.001-04:00

If you have wondered about how to organize your stylesheets, check out the ideas at Improving Code Readability With CSS Styleguides from Smashing Magazine. Note the references to additional sites on the topic of CSS coding.

April 19 Meeting Report: CSS Tools

2008-04-19T18:42:00.005-04:00

At the April session, we looked at a number of resources and utilities for improving our ability to make effective websites and do so efficiently.

First were two websites that publish up to date information on web design and development:

In Smashing Magazine, we looked at article on The Best of March 2008 and articles on creative ways to style forms and footers.

This topic lead us to a discussion about RSS feeds with emphasis on the feed reader called FeedDemon.

Next we looked at two tools for creating color palettes based on colors used in a graphic:

We then discussed what are known as "browser resets," that is, a set of CSS declarations that on might use to start a style sheet in order to have certain styles predetermined on all pages. Eric Meyer has published his browser reset on his blog.

We finished with some discussion about Adobe Contribute and how it can be used to assign editing tasks to members of a web development team, particularly when used in conjunction with Dreamweaver templates.

April 19 Meeting Announcement

2008-04-17T22:03:00.001-04:00

The next session of the PACS CSS Workshop will be this Saturday, April 19, at our usual 9-10 am hour. This month will be review a number of tools for web design.

I will review a couple of websites that I have found to be useful and show examples from those sites of creative ways to style forms and footers (really).

We will then talk about the concept of the “browser reset” and how that might get you started on the right foot at the very beginning of your site editing.

Finally, I will demo Adobe's application called Contribute. Contribute is an easy to use HTML editor that is also an effective site management utility. It lets a website manager can give individuals the right to edit certain portions of a site and thus off-load some of the mundane maintenance tasks required to keep a site updated.

I am still learning how to use these tools, so our meeting will be a work-in-progress kind of thing. It should be fun.

The rest of the day at PACS is going to be great. We do not have JavaScript this month, but Don Arrowsmith will be starting a PHP workshop in that 10-11 hour. We have done PHP in different groups at PACS, but this workshop will be specifically devoted to the subject.

Flash will take place at 11-12. And in the afternoon, Web Design will have a special guest from Microsoft talking about that company's Expression suite of design programs. FrontPage was a breakthrough program in its time, and Expression Web is its powerful successor.

O'Reilly Webcast: Even Faster Web Sites

2008-04-17T18:05:00.002-04:00

From O'Reilly Media comes this news about a webcast featuring author Steve Souders:

Under his tenure as Chief Performance Yahoo!, Steve released YSlow and wrote High Performance Web Sites (at one point the #1 selling computer book on Amazon). Now at Google, Steve is working on a new set of best practices for making web sites even faster. In this webcast Steve explains the Performance Golden Rule, reviews his performance best practices, and uses YSlow to analyze the top web sites in the world.

More information is at the O'Reilly Media website.

March 15, 2008, Meeting Report: Styling Forms

2008-03-17T21:51:00.003-04:00

At the March meeting of the PACS CSS Workshop we worked on techniques for styling forms. We used examples from the book The Art & Science of CSS from Sitepoint: http://www.sitepoint.com/books/cssdesign1/. Our emphasis was on keeping good HTML as the foundation of our pages and using techniques to make the forms accessible. We then worked on styling that would make the forms not just visually pleasing but functional as well. It happens that this chapter on forms is available as a PDF download sample from Sitepoint. Go to the webpage for the book and click on the "Download the FREE Sample!" button.

We also had a guest from ReviewNet, http://reviewnet.net/, a local company that is looking for beta testers for its CSS skills evaluation program. If you did not get a handout, you can get more information and find out how to apply at http://reviewnet.net/testadvisor.htm.

March 15 Meeting Announcement

2008-03-13T22:35:00.001-04:00

The next meeting of the PACS CSS Workskhop will be this Saturday, March 15, at 9 am in room 713. Javascript will not be meeting this month, so we will have some extra time to play with.

We will cover the topic of styling forms, which we had intended to do last month before the snow came. We should be able to complete the topic and then have some time for a couple of other subjects, like Macromedia Contribute.

We will also have a guest from a company called ReviewNet Corporation, www.reviewnet.net. They are looking for beta testers for their new CSS skills test. It could be a fun opportunity to test ourselves and build a relationship with a local technology company.

See you Saturday.

February 23 Meeting Announcement

2008-02-20T20:35:00.001-05:00

The next meeting of the PACS CSS Workshop will be this Saturday, February 23, at 9 am. Our topic this month will be styling forms. We covered this subject in Web Design SIG some time ago, and I have some additional examples to demonstrate. We will be looking to use CSS to make forms more usable for visitors, not just style for its own sake.

The Javascript Workshop is on hiatus this month, so we can go overtime and split that 10-11 hour with Flash. That will give us plenty of time to finish this topic, and then we can try some Q&A or I can show what I am doing with Macromedia Contribute as I try to move some work off to other people.

Online CSS Reference from SitePoint

2008-02-02T09:57:00.000-05:00

SitePoint recently sent me a link to a site called CSS Reference. As they describe it:

In this free online reference, the entire CSS language is clearly
and concisely explained, including browser compatibility, working
examples, and easy-to-read descriptions.

The reference has been written by two of the world's most renowned
CSS experts -- Tommy Olsson and Paul O'Brien -- so you know it's
accurate, up to date, and best practice.

Web Developer Position in Philadelphia Area

2008-01-28T19:54:00.000-05:00

This job opening was sent to me from a recruiter whose client, located north of Philadelphia, PA, is a rapidly growing global leader in the e-commerce industry.

The Senior Web Developer II will be act as a liaison for communication
between the Creative and Engineering teams including Graphic Designers,
Marketing Groups, Information Architects, as well as Project Management
Teams. An extensive background with JSP is vital to this position as well
as experience with: HTML, CSS, XML, and Java Script.

Requirements:

2-3 years demonstrated development experience with HTML, CSS, JSP, and
JavaScript.
Proficient with XML.
Fluent in a code-based code editor (such as Macromedia HomeSite).
Proficient with Adobe Photoshop or Fireworks, and in image optimization
techniques
Understanding of browser capabilities and design constraints on the web.
Demonstrable experience managing multiple projects on tight schedules.
Ability to demonstrate previous work via URLs.

Contact:
Christopher Corso
Evolution Staffing
215-922-6263

January 26 Meeting Report: Rounded Corners

2008-01-26T21:21:00.000-05:00

At our January meeting, we looked at creating rounded corners on boxes using CSS. We looked at small boxes and then full page layouts, both fixed-width and fluid width.

With table based layouts, we made rounded corners by putting curved images in the cells at the four corners of the table. CSS uses the same concept, but the images are backgrounds to the elements of the HTML. For fixed-width boxes, you just need an image with round edges at the top and one at the bottom. For fluid width, there has to be quarter-circle graphics at the four corners in order to allow expansion horizontally.

There are tons of techniques for creating rounded corners. We used examples from The Art & Science of CSS from Sitepoint, http://www.sitepoint.com/books/cssdesign1/, but a search for “rounded corners CSS” will reveal a lot of examples. Some use JavaScript instead of pure CSS. A couple of sites to look at are:

25 Rounded Corner Techniques,
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Smiley Cat Web Design,
http://www.smileycat.com/miaow/archives/000044.php

CSSplay, http://www.cssplay.co.uk/boxes/three_cornered.html

And if you don’t want to create your own graphics, try the Rounded Corner and Gradient Generator: http://www.roundedcornr.com/

CSS3 will make the use of images unnecessary because it will include the property “border-radius.” Browsers don’t currently support this property, but in Safari and the Mozilla browsers, there are commands that will let you use border-radius. See these sites:

CSS rounded corners without images - Arve Bersvendsen, http://virtuelvis.com/archives/2004/11/imageless-rounded-corners

CSS3.info, http://www.css3.info/preview/rounded-border/

January 26 Meeting Announcement

2008-01-23T23:31:00.000-05:00

The next meeting of the PACS CSS Workshop will be this Saturday, January 26, at 9 to 10 am.

This month, we will talk about using CSS to make rounded corners. If you look at any current website, you can see that the old boxy layouts have often given way to rounder looks. It's not just for looks, though. Varying the style of elements on a page can help draw attention to those elements, and there is something visually comfortable about a softer looking page.

There are actually many techniques for making rounded corners. We will cover the basics and show some easy, cross-browser options that work on fixed-width and flexible boxes.

We will of course have the usual lineup of web-related meetings, and we should have a book or two to raffle off during the day.

FeedDemon RSS reader is now free

2008-01-11T22:05:00.000-05:00

FeedDemon is an excellent RSS reader that is written by Nick Bradbury, the talented developer who also created the TopStyle web editor. Bradbury's products are published by NewsGator, which announced this week that FeedDemon and several other products in its RSS Web 2.0 Suite for Individuals are now free. Check out FeedDemon, and be sure subscribe to CSS Workshop site's RSS feed.