CSS Workshop Combining with the Web Design SIG

After several years running, the CSS Workshop is going to end and be folded into the Web Design SIG. At our recent meetings, we have been moving back and forth from pure CSS topics to more general web design, so it makes sense now to bring the subject matter under one group. Web Design will meet at 9-10, the former CSS hour.

The Web Design SIG has a site at webdes.pacsnet.org. Follow the group's news there starting with the September meeting.

In place of Web Design in the afternoon, we have a new SIG devoted to WordPress, the amazing blogging and content management system. This SIG will give members an opportunity to start from the beginning and move through the steps of using this platform.

Finally, the Javascript SIG, which was so successful, has come to its end. In its place will be the revived HTML SIG at 11-12. This group will concentrate on the foundations of a website. If you have attended the CSS Workshop and maybe not have quite grasped the concepts, this SIG will provide a better understanding of the underlying structure of a webpage and give you a better idea of how pages are then styled.

PHP and Social Media will continue at the same times as last year.

All of the SIG's have individual websites which can be accessed at http://pacsnet.org/groups.php.

June 2013 Meeting Report

At our June meeting, we finished up our look at styling tables to be responsive. We took four examples and applied their techniques to a sample table. Two of the examples just used CSS, while the other two also employed Javascript. The examples required some editing of the sample HTML in order to work, and the results varied in quality. But these samples showed how data in a table can be reconfigured in ways that make the information accessible on a small screen.

The samples we used were:

• Responsive Data Tables by Chris Coyer
• Responsive HTML Tables by Jared Cunha
• Build a Responsive Table Using Only CSS by Michael Musgrove
• jquery.webks-responsive-table by Julian Pustkuchen

Give these a try by copying and pasting the CSS and scripts into a simple table, then check their HTML to see what has to be modified in your sample table. Then try adjusting for different screen sizes. And do a search for other solutions.

We will continue this group in September as the Web Design SIG. The afternoon session will be the new WordPress SIG. See you then.

June 2013 Meeting Announcement -- Responsive Tables - Putting It All Together

For the past few meetings, we have been looking at some new CSS3 selectors and at styling tables. At the June meeting, we will put everything together to style tables that will be re-sized for the device being used. We will look at three or four different solutions and apply them to our own sample table. It should be fun and informative.

And if there are any questions left after this meeting, be sure to join us in the afternoon at the Web Design SIG where we will conduct our second annual Fix Your Website On The Fly meeting. Bring your problem sites, and we will crowd-source a solution among the members. 

May 2013 Meeting Report

We started the May meeting with a look at two websites illustrating opposite ends of the styling spectrum.

First was CERN’s restoration of the original website. They are putting back the files in their original versions as they were first uploaded. There is an entire site about this restoration that will tell you more. 

At the other end is CSS Zen Garden. This site recently celebrated its tenth anniversary and is now being converted to HTML5 and to current CSS standards. CSS Zen Garden is an inspiring collection of examples of imaginative webpage styling.

We spent the bulk of the meeting looking at the structure of HTML tables and their proper use. We then worked with the pseudo-classes that we have been discussing and styled tables with stripes, multiple stripes, and even a checker board. Some of the examples we used are available here at the Samples section.

We will put all of this together next month to style responsive tables.

May 2013 Meeting Announcement -- Better Tables ... and an Epiphany

We will continue at the May meeting with learning how to style tables to be responsive. This month, we will get into some more complex table structures and styling, touching on accessibility as well as responsiveness. You could argue that responsiveness is a subset of accessibility, but regardless, the topics will mesh.

And as I have been working on this subject, I have had a chance to examine my own use of tables – and I don’t always like what I see. We will explore this month.

CSS Zen Garden is 10 years old today.

We have talked abut CSS Zen Garden in past sessions of our workshop. News today is that CSS Zen Garden is amazingly now ten years old. This site has been one of the great showcases of what can be done with cascading style sheets over good clean HTML.

In celebration, founder Dave Shea has re-opened the site for new submissions. There are new requirements, as pointed out in the blog post, and of course the possibilities are wider than ever with HTML5 and CSS3.

Give it a try.

April 2013 Meeting Report

We started the April meeting by looking at a site called The Internet Explorer 6 Countdown. By its own description, the site “is dedicated to watching Internet Explorer 6 usage drop to less than 1% worldwide, so more websites can choose to drop support for Internet Explorer 6, saving hours of work for web developers.”

We then wrapped up our look at the new CSS3 pseudo-element selectors with a brief review and then a video from SitePoint and Russ Weakley about CSS :NTH Selector.

We looked at some pages at w3schools.com with examples of these selectors. Each page has a “Try it yourself” page with easy interactive test examples. Try these four pages and experiment with different calculations:

• :nth-child() Selector
• :nth-of-type() Selector
• :nth-last-child() Selector
• :nth-last-of-type() Selector

We then began using :nth-of-type() to style a table. We will continue with this topic next month, using more advanced styling, and then getting to responsive tables.

April 2013 Meeting Announcement -- Stylish Tables

The next meeting of the PACS CSS Workshop will be Saturday, April 20, at our usual 9-10 hour. The main topic this month will be "Stylish Tables."

This month, we will finish up with the details of using :nth-child and its related pseudo-classes. We will tie up some loose ends from the last meeting, and then show how to apply :nth-child to tables. That will lead us to our ultimate destination, styling tables so that they are responsive.

CSS will also be the topic at the Web Design SIG that afternoon. Don't miss that meeting’s presentation on SASS. And be sure to check the Groups page on the PACS website at http://pacsnet.org/groups.php for more information on all the other sessions scheduled this month.

March 2013 Meeting Report

At the March meeting of the CSS Workshop, we continued working with the structural pseudo-classes introduced in CSS3. We started by using :nth-child combined with tags and descendant selectors so as to target specific items to be styled. We introduced the formula an+b as a way to calculate the pattern of selectors to be styled. The numbers can get a little confusing, but there are websites with examples to follow, such as CSS-Tricks.

We touched on another pseudo-class called :nth-last-child which works in the reverse of :nth-child.

We then started working with :nth-of-type, a pseudo-class that allows more specificity in the selectors to be styled. CSS-Tricks again has a helpful article called The Difference Between :nth-child and :nth-of-type that compares the two very nicely.

We will work with :nth-of-type at the next meeting as it will be the foundation of our next step in styling tables to be responsive.

March 2013 Meeting Announcement -- Styling the Right Children

The next meeting of the PACS CSS Workshop will be Saturday, March 16, at our usual 9-10 hour. The main topic this month will be "Styling the Right Children."

Last month we started looking at the :nth-child pseudo-class selector that is new to CSS3. We began with some examples that were not practical but were intended to get an idea of how the selector works. This month, we will get into some more specific examples of usage, with the aim of learning how to use this selector and others like it to style responsive tables. In the process, we will answer one or two questions that came up at our last meeting.

February 2013 Meeting Report

At the February meeting of the PACS CSS Workshop, we started with a general discussion about pseudo-classes. We previously worked with this topic when we were styling links and used pseudo-classes like :hover and :visited. Those are referred to as "interaction" pseudo-classes. With the table styling we are working on now, we will be using "structural" pseudo-classes.

We spent the meeting going through variations of styling a simple page with the :nth-child pseudo-class, going from the very general to slightly more specific. Next month, we will look at more details about using :nth-child, get into more specificity, and then consider whether there is a better option for our purposes.

February 2013 Meeting Announcement – Styling Children

The next meeting of the PACS CSS Workshop will be Saturday, February 16, at our usual 9-10 hour. The main topic this month will be "Styling Children."

We are working on responsive design, and our first example is tables. We are starting with "zebra striping" for tables, a way to make them more readable. Last month we looked at how we have implemented striping in the past. This month, we will work with CSS3 pseudo-selectors that make the process more efficient. With that behind us, we can then understand the techniques that some designers are using to make tables responsive.

Kids are welcome, but the children we will be styling are found in the DOM.

January 2013 Meeting Report

We started the January meeting with a follow up to our previous discussions on user interface design. We looked at website redesigns by the Commonwealth of Pennsylvania and the United Kingdom. Both of these sites have simplified approaches to accessing information. I also suggested looking at Jakob Nielsen’s article Windows 8 — Disappointing Usability for Both Novice and Power Users, not so much for the review itself but for the methodology. Watch for the interface issues raised there. (And for a counter to Nielsen’s review, check out Why Jakob Nielsen's Windows 8 critique is old-school thinking.)

We then spent some time looking at Microsoft’s Expression Web 4, a program for editing web pages and managing sites. It is a powerful application that has been replaced by other programs, so it is now available as a free download from the Microsoft Expression site.

We finished up by starting on responsive design for tables. Some of the techniques for styling tables to make them responsive rely on CSS3 pseudo-class selectors. We began on that topic by using zebra striping as an example. We looked at some pre-CSS3 techniques and noted their drawbacks. Next month, we will start on the CSS3 way to stripe tables, and that will lead us on to techniques for styling responsive tables.

January 2013 Meeting Announcement -- Styling to the Nth

The next meeting of the PACS CSS Workshop will be Saturday, January 19, at our usual 9-10 hour. The main topic this month will be "Styling to the Nth."

We are going to be working on responsive design in the next couple of meetings, and our first example will be tables. To get into that topic, we will re-visit an issue we covered a while ago -- striping tables. Striping makes the data in a table more readable, and the new CSS3 pseudo-class selector called nth-child makes striping easier than ever to implement. We will use striping tables to get the hang of nth-child, and that will lead to some more involved design solutions. There is some math involved, not to mention the DOM, so be ready.

On a side note, I just learned that Microsoft has released its Expression Web 4 design tool as a free download. There is no support, but this product is a worthy competitor to Adobe Dreamweaver for WYSIWYG editing and for site maintenance. Download at http://www.microsoft.com/en-us/download/details.aspx?id=36179#overview. We will take a few minutes at the beginning of the meeting to look at Expression Web.

And be sure to check the Groups page on the PACS website for more information on all the other sessions scheduled this month.