December 14, 2008

December Meeting Announcement

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 22, 2008

November 2008 Meeting Notes:
Multi-Column Layouts

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.

November 19, 2008

CSS Book Giveaway from Sitepoint

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 13, 2008

November Meeting Announcement

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

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 19, 2008

October 2008 Meeting Report:
Styling Links

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 17, 2008

October 18 Meeting Announcement

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 12, 2008

September 20 Meeting Announcement

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 25, 2008

June Meeting Report:
The Cascade

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 11, 2008

June 14 Meeting Announcement

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.

May 29, 2008

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

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 18, 2008

May 17 Meeting Report:
Grid-Based Design

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 13, 2008

May 17, 2008 Meeting Announcement

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.

May 07, 2008

FeedDemon 2.6.1 [Regular Guy Reviews]

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.

May 05, 2008

Article from Smashing Magazine: Improving Code Readability With CSS Styleguides

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, 2008

April 19 Meeting Report:
CSS Tools

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 17, 2008

April 19 Meeting Announcement

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

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 17, 2008

March 15, 2008, Meeting Report:
Styling Forms

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 13, 2008

March 15 Meeting Announcement

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 20, 2008

February 23 Meeting Announcement

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.

February 02, 2008

Online CSS Reference from SitePoint

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.

January 28, 2008

Web Developer Position in Philadelphia Area

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, 2008

January 26 Meeting Report:
Rounded Corners

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 23, 2008

January 26 Meeting Announcement

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.

January 11, 2008

FeedDemon RSS reader is now free

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.