In This Issue...

Need to Secure Multiple Domain or Host Names?

Introduction

Apologies for this break in your scheduled transmission. As Kevin Yank takes a well earned two-week holiday, we've decided to 'plug the hole' with the first edition of SitePoint's new newsletter -- the SitePoint Design View.

Note: If you like this newsletter and wish to stay subscribed YOU MUST CLICK the button below!

But first, let me tell you what you can expect. The SitePoint Design View will focus on modern Web design from a practical standpoint. It will cover:

• New Web design thinking and what to make of it
• Great-looking design that accomplishes its goals
• Design mistakes, oversights and soap-box issues
• Designing for usability
• Graphical design software techniques
• Visual effects with CSS/XHTML/Flash
• How Accessibility and Search Engine Optimization (SEO) impact on design
• And much more

In the months to come, I hope to develop on all these topics and more. But, if you want to receive the next issue you must act now!

Press the button below and you will continue to get this Newsletter once a month:

(Or else click here instead.)

You will just need to reply to our confirmation email to complete the subscription process.

I look forward to bringing you some great design stuff!

Alex Walker
Editor, SitePoint Design View

Using Pullquotes with CSS

Since you Tech Times readers are naturally technically inclined, I thought that to kick off 'Design View', I'd mix a touch of good layout theory with some old-fashioned CSS to produce pullquotes.

One of the most important things to keep in mind when designing for any audience is that Web users are mostly skimmers. Their eyes dart around like flies at a screen door, with only the vaguest idea of what they want or how they plan to accomplish it.

One of the most important considerations is to give the user easy, 'no-brainer' ways to get a toe-hold in a new page. 'Pullquotes' are one of the easiest ways to accomplish this.

Take a quick glance at any article on BoxesAndArrows.com and probably the second item you'll notice will be the grey quote box on the right -- the 'pullquote'.

Let's start with the basics -- we'll pop our quote in a sensible <blockquote> tag and give it a special 'pullquote' class.

  <blockquote class="pullquote">
     The most impressive thing about 
     pullquotes is people read
'em!
  </blockquote>

We'll need a little garden-variety CSS to float it off to the right and to limit its width. I've also decided to pump the font-size up a little and over-rule the default paddings and margins set for <blockquote>.

.pullquote {
   width: 20%
   float:right;
   font-size:125%;
   margin:10px;
   padding:0
}

Now let's add some of those big, chunky, magazine-style quotes that scream, "HEY YOU! I'M SAYING THIS!"

Here are some I prepared earlier.

The closing quote is pretty straight-forward. We drop the graphic into the background, align it to the bottom-right and set it to 'no-repeat'. I've also set the bottom padding to 25px to keep it clear of the text.

.pullquote {
   width: 20%;
   float:right;
   font-size:125%;
   margin:10px;
   padding:0;
   background-image:url(closequote.gif);
   background-repeat: no-repeat;
   background-position: bottom right;
   border:1px #ddd solid; /* a temp border */ 
   padding:0px 0px 25px 0px;
}

But what about the open-quote? We're going to need to be resourceful here. CSS has one more 'hook' we can rely on -- an under-used pseudo element called ':first-letter'.

As the name implies, the ':first-letter' pseudo element targets only the first letter in a specified text element. It is surprisingly well-supported across modern browsers and, happily, will accept our open-quote graphic as a background image. Coupled with a little padding to keep our text clear of the graphic, we're starting to get a result.

 .pullquote:first-letter {  
   background-image:url(openquote.gif);
   background-repeat:no-repeat;
   background-position:left top;
   padding:0px 25px 5px 0px;
}

A preliminary browser check shows that Firefox, Safari, IE6 and Opera all seem to like the technique (although IE has a slightly different idea of where the base of the letter ends). However, although those pesky IE5 and IE5.5 browsers seem to recognize the pseudo element, they do wacky things with the background image. As a solution, we can take the soft option and simply strip the fancy quotes from those browsers with some evil CSS hackery.

The relatively elegant (well, for a hack, anyway) 'Alternate Box Model Hack # 3' will let us remove the quote effect completely from IE5+ Win, leaving it with a basic but perfectly acceptable unquoted quote. You can view the result here.

Admittedly, this trick is still a little unrefined (I haven't even considered IE5 Mac at this stage) but I think it, and pullquotes in general, are very worthwhile tools to incorporate into almost any project.

Let me know how you go.

Flash Steve crosses from Pixels to Print

Yes, the rumors are true...

Steve Grosvenor hasn't been busy enough. On top of being SitePoint's Flash Columnist and Flash Blogger, along with his standard 9-5 gig, Steve has managed to find a spare zillion hours to knock out SitePoints' latest book 'The Flash Anthology: Cool Effects & Practical ActionScript'. Steve, I do hope you're eating properly. Please try to get some sleep!

Over recent months, I was slightly bemused to observe Simon, G and Kevin all smiling away to themselves as they worked through the editing stages of this book.

Well aware that their usual approach generally involved much more barking, snarling and foaming at the mouth, I wanted to see for myself what all the fuss was about.

I now know why they enjoyed their work so much...

Steve has a natural ability to weave convincing ideas into a fun and breezy writing style. As I'm probably 'front and center' of the target audience for this book (i.e. a little Flash - not much ActionScript), I was hooked quite early.

Like a lot of developers, I've become quite comfortable with JavaScript over the years, and I was actually surprised at how 'JavaScript-like' the ActionScript examples were. So, if you're at all familiar with JavaScript syntax and structures you should chew this stuff up and spit it out.

Enough said. Download the chapters and have a peek for yourself.

Actually, Macromedia has been on good terms with JavaScript for a number of years now. Dreamweaver's JavaScript behaviours are remarkably solid, and swapping data between Flash and JavaScript is almost effortless these days. One of Steve's latest 'bags' is JSFL (Flash JavaScript) Quickies, which are basically JS-powered productivity extensions for the Flash authoring environment.

Having spent 30 minutes looking for decent information on creating these extensions and coming up with zip (even Macromedia seems to have dropped the ball), Steve has decided to to let us in on some of his JSFL tricks. Should be great reading.

Read the blog entry:

Flash Blog: Go Flash Go! by Steve Grosvenor Flash Anthology Excitement (7 comments)

Turn Your Website Traffic Into Revenue

• High payouts
• All popular ad formats
• Automated defaults to maximize inventory fill
• Guaranteed monthly payments
• No exclusive contracts or delivery minimums

Blending Modes

It's was great to see Corrie Haffly back from holidays and blogging on some interesting subjects including color palette generators, Illustrator functions and Photoshop blending modes.

The true use of blending modes is an ancient, mystical and inscrutable art form, fully understood only by a group of twelve Shaolin monks destined never to leave the cloistered halls of an Adobe training conference.

But, with patience and practice, you too may slowly unravel their secrets, Grasshopper.

Unlike the channels or layers panels, understanding the way one blending mode works doesn't really illuminate how the next mode works. It does take some time and experimentation (there are a few I have never found a practical use for).

One of my most common uses for blending modes is shadows. It's an old printing trick to use shadows to visually 'anchor' an object (a CD, DVD, camera, or book usually in our case) in place on a white page.

Here's a good starting point.

	1) Original Photo. A nice shot, but the background isn't needed.
	2) The layer is copied and background removed. A nice clean result, but the object seems to float about untethered to anything.
	3) Luminosity + Screen. I've made two more copies of the original. I set the lower one to 'Luminosity' and the upper one to 'Screen'. The result leaves me with shadows that are blasted but still intact.
	4) Add a little white gradient fill. This gently fades out the far background.
	5) Overlay with the 'background-less' layer (#2). Subtly adjust the opacity of the 'Luminosity' layer to tune the final effect.

It's quick and effective!

Read the blog entry:

Design Blog: Pixel Perfect by Corrie Haffly Photoshop Blending Modes: Dissolve (3 comments) Photoshop's Darken and Lighten Blending Modes (3 comments)

Veerle-y Interesting

Simon unearthed another little left-field gem last week. Belgium designer and blogger Veerle Pieters has done what no-one else seems to have thought of -- writing a tutorial series that takes a project from the interface design stage all the way through to production of the CSS/XHTML template.

There are probably a lot of up-and-coming developers that have almost all the 'snippets' of good design technique already rattling around in their heads.

The great thing about Veerle's set of articles is that they give you a great overview of how it all gets stitched together.

Even if you're quite comfortable with your design/CSS coding skills, give the series a browse anyway. It is a thing of beauty regardless.

Read the blog entry:

DHTML & CSS Blog: Stylish Scripting by Simon Willison CSS Design Tutorials (2 comments)

That's all for the first issue of the SitePoint Design View. Don't forget, you MUST SUBSCRIBE to continue receiving this newsletter once a month... Click the button below now and you're on board.

( Or click here instead.)

If you subscribe, I'll see you in a month! If not, thanks for reading.

The Tech Times will resume in two weeks.

Cheers,

Alex Walker
design@sitepoint.com
Editor, Design View

Help Your Friends Out

• CSS FAQ - How to......
  in CSS
  
  
• List of Free Image Editors
  in Graphics and Multimedia
  
  
• All You Need For Accessibility - Tutorials, Tools, Books, Validators, etc
  in Accessibility and Usability
  
  
• Graphics MEGATHREAD --Everything you ever wanted to know
  in Graphics and Multimedia
  
  

Flash Blog:
Go Flash Go!

• Font Adjuster Panel for Flash MX 2004
  
  
• SitePoint Flash Blog Panel for Flash MX 2004
  4 comments
  
  
• Twist and Fade Command for Flash MX 2004
  5 comments
  
  
• Flash Anthology Excitement
  
  

Design Blog:
Pixel Perfect

• Multiply Mode in Photoshop
  1 comments
  
  
• Photoshop's Darken and Lighten Blending Modes
  6 comments
  
  
• Photoshop Blending Modes: Dissolve
  4 comments
  
  
• The Lazy Developer's Way to Switch From the Text Tool
  6 comments
  
  

DHTML & CSS Blog:
Stylish Scripting

• CSS Design Tutorials
  4 comments
  
  
• Smarter selectors
  5 comments