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.

December 2012 Meeting Report

We started this month's meeting with a brief look at Internet Explorer 10, including some points raised by a review at Sitepoint.

Next, we finished viewing the video of Jeremy Keith's lecture on responsive design and progressive enhancement. We looked at an example of progressive enhancement with text layout. CSS multi-columns are not supported in older browsers, but that might not matter if the text is still readable. Users viewing with newer browsers will simply have an enhanced experience.

We then started working on responsive design by looking specifically at styling tables. It is an interesting topic because of the challenge of getting data into a format that fits on a small screen. We looked at a comparison between responsive and non-responsive tables at CSS-Tricks, but we noticed an anomaly in the responsive table. We will delve into that and more next month.

December 2012 Meeting Announcement -- Responsive Styling

The next meeting of the PACS CSS Workshop will be Saturday, December 15, at our usual 9-10 hour. The topic this month will be "Responsive Styling."

We spent most of the meeting in November watching and commenting on a video by Jeremy Keith of Clearleft, who spoke about responsive web design. We will finish the video this month with Jeremy's commentary on progressive enhancement. We will then move on to examples of particular problems with responsive design and how to use CSS to solve them.

It will be instructive and fun at the same time.

November 2012 Meeting Report

Our November meeting was devoted to responsive design and its cousin, progressive enhancement.

The meeting was organized around a video of a talk given by designer Jeremy Keith of Clearleft. Jeremy emphasized that the idea of "a website" is much more than how a site looks in a browser. It is broader than just that visualization. Further, the idea of controlling exactly how a site appears in a browser is a fiction. We do not know what user agent the reader is actually using and what technology the user has available, such as javascript or broadband. (We noted that AOL still has 3 million subscribers to its dial-up service.)

On the other hand, HTML is built to be responsive. So mobile, as well as any other form of serving information first, starts with good HTML.

A couple of references from the video:

• http://dowebsitesneedtolookexactlythesameineverybrowser.com/ (Check this site in different browsers and note the slight differences, none of which matters to the actual content delivered.)
• A Dao of Web Design

We will finish the video in December with a little more on progressive enhancement and then look at some examples of styling for responsiveness and progressive enhancement.

November 2012 Meeting Announcement -- CSS and Responsive Web Design

Responsive web design is probably the hottest topic now in the world of web development. It will only get hotter given the increasing number of different sized screens that people will be using to view your sites. Reed Gustow started us on this topic at our Web Design SIG, and this month, we will follow up with a video and some commentary on how to implement responsive design and why.

You will come away with a different vision of how to organize your next project.

October 2012 Meeting Report

We covered a number of topics at the October meeting, and below are notes and links to sites that we referenced.

• Windows 8 apps
  Following up on last month's session, we looked at a 2-part article at Sitepoint on Building a Windows 8 App with HTML5: How to create a small RSS reader:
  Part 1
  Part 2
• HTML5 structural tags
  Following up on our sessions last year, we looked at an alternative view on whether it is advisable to use the new HTML5 structural tags. The article is The truth about structuring an HTML5 page. It is an excerpt from a book entitled The Truth About HTML5. The book can be ordered, and a sample chapter can be downloaded, at the book's website.
• Parallax design
  That website lead us into a discussion of the parallax style of web design. The website above is an example, and more examples are available at 18 Beautiful Examples of Parallax Scrolling in Web Design.
•  Multiple columns
  We finished up by looking at the CSS Multi-column Layout Module. This set of rules is new to CSS3, and it allows a section of a page to be laid out in columns. We compared the previous ways we did this layout, first with tables and then with floated div's. This new module is not supported by all browsers yet. For a review of the rules, take a look at CSS3 Series: Multiple Columns.

October 2012 Meeting Announcement -- CSS3 - New Solutions to Old Problems

The next meeting of the PACS CSS Workshop will be Saturday, October 20, at our usual 9-10 hour. The topic this month will be CSS3 - New Solutions to Old Problems.

We will start with a quick follow up to last month's meeting with an article on building Windows 8 apps. We will look at an alternative opinion on the new HTML5 structural tags that we covered last season. Then we will see how to put multiple background images on an element, something that was not possible before CSS3. Finally, we will look at one of my favorite new tricks with CSS3.

If we have time, I also want to look at a new way to organize your style sheets.

Plus, we may have a special guest appearance via Skype to start the meeting.

September 2012 Meeting Report

Rob Keiser of the PACS Windows SIG was our guest presenter this month. Rob demonstrated how to create apps for the new Windows 8 app store. The foundation for these apps is a combination of HTML5, CSS, and javascript.

Rob's slide deck with links to resources developing apps has been uploaded to the Resources section of this site.