Pemaquid Communications

We have a new Delicious account – delicious.com/pemaquid – that we created to compile helpful links for beginning Web designers, programmers and whoever else might be interested. There is all kinds of sites included and I did my very best to label them in an understandable way.

For the uninitiated, Delicious is a social bookmarking tool – it allows you to access links from anywhere and share them with anyone. You can also see which bookmarks are the most popular.

We’ll be adding to these links over time and because Delicious is a social bookmarking tool, feel free to add them to your Below are some of the links that caught my eye, either because they seemed really helpful, or because they seemed really cool.

If you know of any sites that you think would help out the friends of Pemaquid let us know and we will check them out and add them to our Delicious account.

http://www.w3schools.com/sitemap/sitemap_tutorials.asp – This one may be my favorite. It is tutorials for html, css, javascript, xml, ajax and a bunch of other things. It was the perfect place to start for someone who knew barely anything about the code.

http://www.useit.com/ – This is Jacob Neilson’s website, and anyone who knows anything about usability should know about him. He was the author of the textbook, Usability Engineering, we used in my GUI Design class at USM.

http://www.degraeve.com/color-palette/ – This site lets you upload a picture and create a color palette from the colors in the picture. Do you really like how the colors in a painting, or the view as you look out your window look together? This site will give you the colors to use on a website.

http://www.1001freefonts.com/ – Looking for that perfect font for a logo or headings for a funky website? Here’s the place to look. 1001 fonts and they’re all free. Fun idea: write your next note to the office in one of the funnier ones.

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/ – 53 CSS techniques you couldn’t live without! I think the title is self explanatory.

And there are many, many more (247 more to be exact). These are the ones that stuck out to me, being an html novice and easily amused by colors and fonts. I’m sure we have something that will help or amuse you too.

I have been able to play around with some fun things while at Pemaquid. I’ve been spending some time last week sprucing up the Pemaquid Fan Page on Facebook.

We are still playing around with is, learning all that it has to offer. I wish there was a better way to write in a description of the company, but there are other cool features, including discussion boards, the Wall, and video that will help us keep you all updated about what’s happening round the office at 28 Maple Street.

We have 73 fans as of today. We need to break 100 in order to get a vanity page URL (“http://facebook.com/pemaquid”). Like what you read here? Become a fan and help put us over the top!

We know the value of social networking for a business we wanted to keep up with the trends. There is also an ad manager but I haven’t even looked at the capabilities of that yet.

The other thing I have been playing around with is Google docs (http://docs.google.com). I never knew such a thing existed and it might be the best thing ever. Every student should know about this! You can create word processing documents, spreadsheets, even forms.

It’s all wicked easy to use and then you can email it to others, and let whoever you want have access to view it or edit it. You can make surveys and send it to people and Google docs automatically makes a spreadsheet and records the responses for you. In addition to all that, because it’s linked to your google account you can access it wherever you can access the internet.

No need to worry about having your own computer, or your flashdrive, or emailing it to yourself (which I think every college student has done at least once), it’s just there, whenever you need it. For someone like me, who is crazy about having everything organized this is the best thing ever.

Remember a couple of weeks ago when an office building in Yarmouth was totally destroyed by fire? It left a couple dozen business people without a ‘place of business’; my hairstylist Wanda, who works at Top Cuts, was one of them.

Coincidentally, I got my hair trimmed the day before the fire. Talk about cutting it close (pun intended).

The day after the fire, Wanda called me and asked me to tell her the date of my next cut (it was Feb. 6, this past Friday). Her appointment calendar had gone up in smoke along with everything else in the fire, and she (and all the other stylists) had lost all their records.

I solved her problem by telling her about Google Calendar (take a tour). With “gCal”, keeping appointments up-to-date is a snap, and since they’re online (out there ‘on the cloud’, as it were) they’re safe from nuclear attack as well as fire (that was the original idea behind the Internet, you’ll recall).

Google Calendar lets you easily reset appointments without crossing things out or smudging erasures, as with a physical datebook. You can do things a datebook made out of dead trees can’t, like email an appointment confirmation or automatically send a reminder by email or text message the day before.

A Google Calendar for a business like a salon can be kept private, and if there are multiple stylists involved, each can have her own schedule that’s color-coded.

When I got my ears lowered again this Friday I followed up with Wanda (Top Cuts is temporarily sharing space with Studio 88, another Yarmouth salon) and she likes the idea. First thing’s first, though – they need to get a computer and wireless Internet access before they can put Google Calendar to work. Stay tuned…

Below is an example of a javascript that lets you easily sort columns in a table. It’s called sortable.js. It’s been around for awhile, but I thought it worth a mention.

At Pemaquid we use it for table sorting in our Content Manager (our home-grown but spunky little CMS). The nice thing about it is that it degrades gracefully. In other words, the table works just fine even if the javascript doesn’t.

More on the whole bit here.

Editor’s note: Yep, the table below is not the prettiest, and I can’t properly show code snippets at the moment. We’ll be upgrading to WP 2.7 shortly and will bang the CSS around a bit to give a cleaner display.

Last night I noticed John Resig twittering about a new Web browser from Google, called Chrome. It’s hitting the news in other places; here’s a piece from yesterday’s New York Times.

Reports say Google intends to release the browser for download from its site today at: google.com/chrome but so far nothing’s available.

I haven’t had time to immerse myself the details yet, but here are some of the important details:

• It will be open source
• It will offer a way for people to see how Web sites are consuming system resources
• It will handle tabbed browsing in a slightly different way

This could have a major impact on both Microsoft’s Internet Explorer browser as well as the Mozilla Project’s Firefox.

You can find out more about the Google Chrome features at Google Blogscoped, a blog which follows the company; learn more about some of the technical implications of Google Chrome from John Resig on his blog.

As far as the impact on front end Web designers? It remains to be seen, but if you assume that Chrome adheres to Web standards and standard CSS implementations, it shouldn’t change the game all that much. Stay tuned….

One important rule we try to follow @ Pemaquid is to always have 3-4 Sharpies and tall stacks of blank paper when meeting w/a Client to review design comps.

It’s the easiest way to sketch out your design thoughts visually. It’s faster than using a whiteboard, and it’s much easier to sketch out ajax or design interactions with Clients – especially those who aren’t particularly Web-savvy – than it is to try to explain it to them verbally.

The other day I had a problem – a big problem. My Photoshop locked up and wouldn’t run. It’s an old copy that runs on the Windows side of my Mac through Parallels.

Why am I running my Photoshop on Windows?? That’s a long story in and of itself and for another day.

I tried reinstalling. No luck. I figured maybe it was finally time to invest in CS3.

Before I pulled the trigger our Creative Services Coordinator, Sarah Hines, and I tried one last thing, something we occassionally do when we run into a programming conundrum: we Googled the arcane error message.

After sampling three suggested solutions Photoshop was back up and running. Amazing! On the other hand, I shouldn’t be too surprised.

The moral of the story? If you’re hamstrung by a problem, whether it’s a design issue or even a home repair issue, you might do well to at least give Google a shot.

Before launching a new site, it’s always a good idea to run a check on its accessibility to folks with visual or other physical disabilities.

One of our favorite tools for checking Web site accessibility is no longer available. The WebXact service from Watchfire had a very comprehensive free assessment tool that not only checked accessibility but also other important components of the Web page to make sure it was well-formed. Alas! IBM, which owns Watchfire, decided in February that the tool would no longer be offered for free – it now costs a very steep $1,580 for a 12-month license.

Not surprisingly, according to one metric I use, the site’s traffic plummeted in March to half of its previous levels. I expect April’s traffic numbers will be down even further. Perhaps a better idea would have been for IBM to continue offering WebXact for free while posting ads for content relevant to those using the service.

No matter. Other excellent free tools are available. Here are a few we use at Pemaquid:

• Cynthia Says Portal (contentquality.com) - from HiSoftware, a company that develops accessible software. Just enter the URL of a page in question on your site, and the service will run a report to show how it measures up against the Web Content Accessibility Guidelines and Section 508 guidelines. The report is thorough and runs very fast. It’s become the spot-checker-of-choice for many top-flight Web design firms.
• WAVE – runs a similar report when you enter the URL of a page. Offers a visual view of the page as well as some other features, including a text-only view. Not as comprehensive as Cynthia Says. Here’s a report on Pemaquid’s home page

No accessibility tool is perfect, but these two can help you avoid making obvious mistakes.

Finally, I should add Web designers shouldn’t rely on any tool to tell them whether their work is accessible. You need to do your homework. Required reading: the Web Accessibility Initiative guidelines for accessible Web design.

I’d like to thank Shirley Helfrich, Thomas Bennett and the folks at the Prince Memorial Library and everyone at the Southern Maine Library District for inviting me to speak the other day about Web site usability at their annual conference. Thanks for the opportunity, the thoughtful questions – and for not throwing tomatoes!

Here are some of the tips I mentioned (and some I did not), as well as some links to resources you might find useful.

Usability

• people don’t read Web pages, they scan them support that scanning activity by “chunkifying” the content on your pages (use headings, subheadings, lists, meaningful link text)
• don’t use “click here” in your link text. It’s wastes space. Use either an action word (“shop”, “review”) or a descriptive word (“apples”, “oranges”) that describes what the person will see when clicking
• if you want someone to click on something, make it look like a button
• if you want someone to read something, make it a text link (not a graphic; see banner blindness
• if it’s a link, underline it; if it’s not, don’t underline
• when linking to PDFs, spreadsheets and other files, put the filetype and the size of the file in the link text (big pdf file (PDF – 1.7MB)
• avoid uploading/linking files that are more than, say, 4MB in size (see Attack of the Giant PDF)
• don’t use “What’s New” (it gets old fast)
• review your traffic stats to see what how people are moving through your site and which sections of your site are generating the most traffic

Accessibility

• provide “alt text” for all images on your Web pages
• use relative sizing for fonts (%, rather than pixels)
• ideally, use CSS to layout your site (less code, easier for assistive devices to interpret properly)
• in forms – remember to use labels and associate labels with the proper form field – learn more
• don’t use color as the only way to represent information (as in: red = “bad”; red=”required”)

Resources

• Watchfire’s Webexact accessibility checker – great for spot-checking your work
• Web developer Toolbar for Firefox – a ton of useful tools for accessibility/usability built right into the browser
• World Wide Web Consortium’s Web Accessibility Initiative – the standards for accessible Web site design, from the folks who brought you HTML
• Section 508 – federal standards for software accessibility
• Sim Daltonism – tool for viewing Web pages as a colorblind person might see them
• W3C Markup validation service – essential tool for making sure your Web pages are coded properly
• Dreamweaver – easy to use Web editor; the latest version has excellent support for CSS
• Coda – great little Web editor; helps you work faster. For advanced users comfortable hand-coding (Mac only)
• Accessible Photo Gallery – this gallery meets the criteria for accessible display of photos, uses progressive enhancement to meet needs of viewers
• CSS1 reference guide and CSS2 reference guide – from CSS guru Eric Meyer

Books

• Don’t Make Me Think (Steve Krug) – easy read; reveals how people really interact w/Web pages, and how you can take advantage in your design
• Bulletproof Web Design (Dan Cederholm) – shows how you can use CSS to tackle common design challenges
• Designing with Web Standards (Jeffrey Zeldman) – Zeldman explains why Web standard design techniques are the way to go

Catching up on my required reading, I came across another useful post from Jeffrey Zeldman’s blog (as I often do) on tools to help designers predict how people with color-blindness will see their designs.

• Sim Daltonism
• Colorblind Web Page Filter

Details on each @ Zeldman’s site.

Adding to delicious….

OK, so you’ve decided you want to add a blog to your Web site – a good move since. pound for pound, frequently-updated sites tend to grab higher search engine rankings than their peers who go without. So you download a copy of WordPress, an open source blog platform that has all the features you’re looking for. Great.

Next, you want your blog to have the same look and feel – theme, if you will – as the rest of your Web site. Your designer cracks open the WordPress blog in Dreamweaver and gasps at all the PHP code in the templating system. Skilled as she is with HTML, your designer can’t make heads or tails of the CSS or PHP.

Not to worry. Pemaquid has designed WordPress blogs for a number of Clients. In fact, this blog you’re reading is a WordPress blog (though an imperfect one – ever heard the one about the cobbler’s children who had no shoes?).

So if you’re looking to add a WordPress blog (or Typepad blog, or any other flavor), contact us and we’ll get you set up. We’ll do it fast too (48 hour turnaround is doable), if necessary.

Eric Meyer, one of the zen masters of CSS coding, has a new product out called CSS Sculptor that makes creating Web standards compliant layouts as easy as pie.

CSS Sculptor integrates w/Dreamweaver, and has templates for more than two dozen of the most common layouts, whether they be fixed-width, liquid, fruit-juicy or nutty-crunchy.

So if you’re a Web designer who’s just coming up the CSS learning curve, you might consider adding CSS Sculptor to your tool kit. Rock on!

Striped backgrounds are a bit like last year’s music now, but this is a handy tool for creating them:
Stripe Generator.

In the last couple of days a great new bookmarklet has hit the streets for Web designers far and wide. It’s called the XRAY.

Like it’s namesake, it gives you an easy way to view the “bones” of a Web site. Turn on the XRAY, click on a page element, and instantly see the CSS associated w/that element. A great time-saver!

Better yet, I’m told it even works in Safari, though I haven’t yet tried that. Firefox is a breeze. Sorry, no IE version at this time.