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