Posts tagged as:

CSS

Try the Bullit NetNewsWire style

by Miraz on June 25, 2008

One of the (many) things I like about NetNewsWire for reading RSS feeds is the ability to choose a stylesheet for displaying and reading feed content.

I’ve long used and enjoyed Ollicle Reflex, for example, which looks great and resizes images to fit the width of the reading column. Plus you can switch on the fly between black and white backgrounds. For feeds with many images I set the black background as a default, while for text I use white.

Today I’m trying out a new stylesheet and liking what I see: cameron i/o - Bullit NetNewsWire style:

Bullit is the style I developed to read my RSS feeds on NetNewsWire. Clarity and readability were the most important factors. Bullit uses 70% (and up to 700px) width for the reading column. Body copy is 13px Lucida Grande. Article headings use a slab serif, and headings in the body text are reverse-indented to stick out because bloggers frequently use small headings, which are hard to distinguish from the body. Images are never wider than the reading column, embedded Flash might be because Flash generally creates problems.

[Via ranchero.com: Bullit NetNewsWire style.]

My one, minor, criticism so far is that I’m used to the end of the item being marked out in some way. I’ve added a marker myself to the Bullit package HTML file.

Popularity: 63% [?]

{ 0 comments }

Newbies Guide to iWeb 06

by Miraz on February 13, 2008

With iWeb 06 anyone can publish a blog or podcast right from their Mac. In this Newbies Guide Miraz Jordan shows you how to share your photos, movies, thoughts and ideas with friends, family and the world at large. [First published April 2006. Some details may be a bit dated.]

Apple’s iLife 06 software package brought significant updates to iPhoto, iMovie, iTunes, iDVD, Garageband and also introduced the new iWeb 06. While you don’t have to have a .Mac account to use iWeb this article shows you how to use one to create your own blog.

.Mac account

Sign up for a trial or paid .Mac account.

Screenshot 1: Sign up for a trial or paid .Mac account.

If you want to experiment with .Mac sign up for a 60 day trial account. Open up iWeb and click the Learn More button on the splash screen. Once you’ve filled in the online form you can click the Sign In button on iWeb’s splash screen. It will open up the .Mac System Preference where you can enter your login name and password. Your computer will store these for you, making it easy to use iWeb for publishing.

Create a web page

Open iWeb and choose a template for your web page. I’m going to choose a Blog in this article. iWeb now opens up a document with some placeholder information. My choices have brought me a photo of someone on a snowboard, a header that says: Blue bird day, today’s date and some junk text.

This is just to get me started. The idea is that I’ll replace the photo, heading and junk text with real content of my own.

A blog is a website in the format of a diary or journal. You make regular, probably fairly short, entries, maybe including pictures, videos or sound clips. Each new entry appears at the top of the Home Page. Older entries automatically move into an archive. A blog is fantastic for keeping friends and relatives up to date on happenings.

My first blog entry

Replace the photo.

Screenshot 2: Replace the photo.

OK, first to go is the chap on the snowboard! I click on the photo and a Tooltip shows up to tell me to drag a new photo in to replace this one. But how and where?

At the bottom of the window is a button marked Media. I click that and then click on the tab for Photos. Now I can see all the photos in iPhoto where I choose a picture of my cat. I could also just drag in a photo from anywhere on my computer, and that may in fact be a better idea if I have prepared some photos with reduced file sizes. See the Sidebar for more on this.

Tip: use iPhoto to resize and optimise your photos before you add them to your blog.

Choose Export... from the File menu in iPhoto.

Screenshot 7: Choose Export… from the File menu in iPhoto, set the File Format to jpg and scale the photo down to a more realistic 600 * 400 pixels or smaller. Save it in a separate folder and drag it in to iWeb from the Finder.

Note: as a comparison, most of the screenshots in this tutorial are 340 pixels wide.

Drag the picture from the media window on top of the photo to be replaced.

Screenshot 3: I drag the picture from the media window on top of the photo I want to replace.

Tip: make the Media window larger so you can better see your photos. Drag the diagonal stripes at bottom right of the window.

Next I double click on the heading text and type a new heading to replace it. Finally I double click the junk text and type my own entry to replace it. Voila — an entry about what’s going on at our place today.

The Blog header

That takes care of the first entry, but what about the grander design? What about the overall header? Text and pictures will let people know who I am and where this blog is. I need to click on the item Blog in the Site Organizer on the left. This shows my new Cats at play entry in context.

Follow the principal of double clicking text and entering what you want to say. Click on the photo and click the media button to select a new photo for your Blog.

With text selected use the Colors and Fonts buttons at the bottom of the window to change colours, font sizes and styles.

Also click on the Archive item and change the default photo to one of your own.

Publish your blog

Make sure you have rights to the material you're publishing.

Screenshot 4: Make sure you have rights to the material you’re publishing.

Well, with all the hard work done, let’s get this Blog on the road! Connect to the Internet and click the Publish button at bottom left of the iWeb window. iWeb pops up a wee reminder message about copyright then gets on with the job.

You may have to wait a while at this stage. Even with a high-speed connection it took quite a while to upload my cat photo and bit of text. Luckily there’s a progress bar to keep me informed. If I had optimised my photos this should go quicker.

Announce, Visit or just click OK.

Screenshot 5: Announce, Visit or just click OK.

Once finished though I was presented with some very pleasing options: Announce my new blog, Visit the site or just OK, I know it’s done. This being a brand new blog and all I decided to Announce it. Note that the dialog box also told me the address for my new blog. This helpful dialog box appears every time you Publish your site.

On clicking the Announce button I’m taken to my default email program where a newly created message contains some default text with a link to my site.

Visit the page

The finished blog..

Screenshot 6: The finished blog.

Back at the iWeb screen I can now click the Visit button at bottom left of the window. This opens my default web browser and takes me to my Blog. I added more entries before I made the screenshot.

Caution

This is a pretty easy way to make a blog. It’s quick, easy and convenient. It allows you to drag photos straight out of your iPhoto library and into iWeb. iPhoto 06 also has a button to send photos to your blog.

The pages themselves are attractive and you can easily change fonts, colours and layout. Your blog has its own RSS feed — the increasingly popular method for tracking updates to web pages.

But once you have more than one or two photos on your blog you may find your .Mac size limit has been reached and visitors may find your pages are slow to load, because the images haven’t been optimised for web pages. I found that my two entries plus header and archive graphics filled almost 8Mb of the 25Mb available to me for my free trial.

My cat and cabbage tree photos arrived on the web page as 500Kb files. Any web design professional or enthusiast would have reduced that to 50Kb (which would load 10 times as fast).

It would be a good idea to export photos from iPhoto at a reduced size and use those more moderately sized pictures in your blog. It adds a step but could save you a lot of money and prevent your visitors from being so frustrated they never visit your blog again.

Photocasting, podcasting and more

iWeb 06 makes it equally easy to publish a blog, photos, audio or video podcasts or just regular web pages. Try it out, have a bit of fun and see what you can do. A trial .Mac account will give you 60 days to experiment before you decide if this is something you want to do more seriously.

First published in Macguide magazine Issue #26 March / April 2006 and republished with permission. This article may have been modified from the original.

Popularity: 36% [?]

{ 0 comments }

What’s happening? A (still) new look at Web pages

by Miraz on February 9, 2008

This 6-year old article examines the problem of web designers taking too much for granted. Unfortunately, much of it still holds true. [First published November 2001. I have included some updates.]

Web designers have been involved with the Internet for a long time, at least in Internet years. We begin to take the users for granted and expect them to know all the tricks of surfing Web pages.

I work with many 40+ year olds who have just bought their first computer. These people own businesses, make decisions, and have some money to spend. Among other things I teach them how to use the Web. They all want to do this very early on. I think there are large numbers of people in this category. They give me fresh insights every day into how confusing the Web is — stuff we take for granted is actually very obscure and confusing for beginners.

My client, a 55-year-old retired interior designer looked at me and said: “What do I do now?” She had just finished entering information into an online form and the “Submit” button was staring her in the face. The problem was, that “Submit” had no meaning for her.

I work with a lot of people in their 40s and 50s (and above). I train them to use their computers. For many it’s their first ever experience with a computer. They bring it home from the shop, plug it in and go on to the Web.

New Users already “know” a lot

These users know a lot about a vast range of real-world subjects. They have owned and operated businesses and companies or government departments — many still do. They have money to spend and they make decisions. They have often had secretaries in the past to deal with the computer. Now, however, they are on their own.

They have heard lots of stories about the Web. They “know” that viruses and pornography are on the Internet. They “know” that the Internet equals the Web. They know that you can go shopping online and they know that credit card numbers can be stolen.

New Users are scared

Those new to the Web and to computers are scared: Scared of viruses. Scared of pressing the wrong thing. Scared that pornography will “happen” on their machine. Scared that their credit card will suddenly show charges because they’ve accidentally bought something.

When people are new to something common sense often flies out the window — the brain is fully occupied processing the new information. And when they are new to these magical and powerful devices called computers they will happily suspend all disbelief. Of course charges can appear by magic on your credit card just because you looked at a Web page, just because you viewed an item at a shopping site.

New users don’t yet know how it all works. They are mystified that there is a difference between an ISP and Yahoo. They don’t know how information is passed around or how the money works or who charges them for what they are doing or how.

Computers are a whole new world

They don’t know the ways or the terminology of computers or the Internet.

My client, who would have known to post or fax a form or hand it in at a counter in real life had no idea that the word “Submit” was a button, that you need to click on a button and absolutely no idea that the word “Submit” actually meant “Send Information”. When I pointed it out she said, “Well, I wouldn’t have guessed that!”

[Update February 2008: this sounds incredible, and you may want to suggest my client was just 'dumb', but she wasn't dumb, and this is a true story. Rather than 'blame and shame' I'd hope we can learn from it.]

We need to avoid these terms from the “inner circle” if we want our pages to succeed with all users. Instead of “Submit” we could use “Send Information” or “Send Details”.

“Download” doesn’t mean much if you’re new to computers. How about a friendly, short note somewhere obvious that says something like: if you want this software or document on your own computer you’ll need to click on the download button?

We need to explain a whole lot more and take a lot less for granted.

We expect too much

As Web designers we expend a lot of energy on making our Websites user-friendly, but we can’t help but take too much for granted — we are just too familiar with Websites.

We’re also too familiar with computers. We assume that users can tell that a window exists and so we cheerfully open a pop-up window and even provide a “close” button. I watch my new-user clients get totally bewildered when we encounter one of these pop-ups.

Even worse is when we use a model from one kind of operating system — such as providing an “x” in the top right corner to close a window. I know that it means nothing to Mac users in general, and it definitely doesn’t convey anything to my new-user clients.

“Close this window” would help more than just the word “close” and it would help a great deal more than an icon, wherever it’s placed.

Symbols don’t always mean anything

One client of mine runs her own art gallery and has had her computer just a few weeks. She was interested in watching videos of recent news stories and had found a page from a leading news source offering video clips. When she clicked on one video link a window appeared, something downloaded and then nothing happened.

Well, actually, I’m not sure what she clicked on. The rather subtle icons of a speaker and a film camera (clear to me and absolutely meaningless to her) didn’t tell her whether she was clicking on video or audio. In any case, both required Real Player, which she didn’t have on her machine.

The news Website can’t expect everyone to understand that a speaker icon (if people can even recognise it) “means” sound and that a camera icon “means” video. Sure it conveys those messages to those of us steeped in the idiom, but to the millions of people every year who are buying their first ever computer it doesn’t (yet) mean anything.

How about some sub-headings with the words Video and Audio, to go along with the icons? The actual links to video or audio could then be grouped under the appropriate heading.

Tell people what to expect

I explained to my client the need for additional free software and pointed her to Real.com where I guided her through the maze to the free player download area. On the way we dealt with several extremely confusing (to her) pop-up windows. After she filled in a form I was finally able to see that it was a 6Mb file and I suggested she stop there. That was going to be a half-hour or more download.

If I hadn’t been there and if, by some miracle, she’d managed to navigate the Website and fill in the form, she wouldn’t have known that a 6Mb download was about to happen or that it would take half an hour or more on her dial-up connection. And even then I can’t imagine she would have known how to install the software.

[Update February 2008: this same client, amazingly enough, still has the same computer and the same dial-up connection, in spite of much encouragement to 'keep up with the times'. There are many reasons why no change has taken place.]

If we’re offering downloads, or time-consuming content we need to let our users know what they’re in for. Give a file size and a download time estimate up-front before the users get tangled up in filling forms and the like.

Be outward looking

OK, I confess, I live in New Zealand … it’s a bit to the right of Australia and somewhat higher up than Antarctica. Our entire population is a shade short of 4 million. [February 2008: now 4.25 million.] We’re a highly Internet literate population though — nearly 2 million of us use the Internet [2008: more than 3 million].

And, in common with many others around the world, we write our dates in the day / month / year format. As a country we’re way too small to have States (even if our po
litical system worked like that) and I believe we do actually have postcodes but I only know of about 3 people who have any idea what their postcode is.

My new users get stumped by forms which require a state or a zip code. That’s one sale lost in the battle to sell goods online. Some of us are knowledgeable enough to subvert the form — 90210 is a handy zip code.

And if you write a date as 9/11/01 it can be really hard to tell if that’s 11 September or 9 November. There’s a lot of guessing that goes on.

Like it or not, the Web is international. We Kiwis (as New Zealanders are called) visit pages from all around the world. People from all around the world visit pages from all around the world. Make sure you build in tolerance to your Web pages and don’t force others to fit into your cultural model. Write dates with the month in words, create forms where zip codes and the like are optional or where it’s possible to enter Doesn’t Apply.

It’s a bell-curve world

The NUA suggests [link now dead] that as of August 2001 over 513 million people are online worldwide. In February 2008 that number is 1.08 billion.

Many of those people are just starting out with their first-ever computer, while others know their way around to some extent and still others are power-users.

I know for a fact that many of the beginners I work with are decision-makers of importance and that many have spending money at their disposal. They are knowledgeable and clever people in their regular lives, but when it comes to computers and the Internet they are confused, scared and ignorant.

And as fast as they learn the new skills of this information age others will come along and be the unlearned beginners.

As Web designers we can make small changes to help out these users — we can be cautious with our use of icons, we can use clearer text, we can think internationally, we can let people know what to expect when they’re about to enter into the process of obtaining files.

These are a few small techniques which can make the difference between a regular Website and one with the gloss of excellence.

First published in Digital Web magazine in November 2001 and republished with permission. This article may have been modified from the original.

Popularity: 34% [?]

{ 0 comments }