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.
July 04, 2011
June 19, 2011
June 2011 Meeting Report:
CSS Grids
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.
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 15, 2011
June 2011 Meeting Announcement
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.
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.
June 11, 2011
Designing a Scheme for Website Navigation
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.
At our next meeting, I will demo a completely different navigation system from a state government's re-designed site.
May 23, 2011
May 2011 Meeting Report:
Reset Wrap-up and Wire Frames Intro
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.
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 17, 2011
May 2011 Meeting Announcement
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.
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 17, 2011
April 2011 Meeting Report:
Reset Specifics
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.
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 13, 2011
April 2011 Meeting Announcement
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.
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 20, 2011
March 2011 Meeting Report:
QR Codes and More
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:
We also looked at sites for actually making QR codes:
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 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.
 |
| CSS Workshop QR |
March 17, 2011
March 2011 Meeting Announcement
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.
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.
Subscribe to:
Posts (Atom)