View Issue
Home
» Newsletters
» View Issue
The SitePoint Design View #62 Copyright (c) 2009
20th August, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The Official Design Newsletter of SitePoint
by Alex Walker (design@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=62
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
Welcome to Design View #62.
I had an interesting moment of clarity during the week.
While working on some layout changes for sitepoint.com, I came
across an ugly positioning bug in Internet Explorer 8 -- a side
column inexplicably plastered smack dab in the middle of the
main content.
After exhausting all my finest IE-layout ninja tricks to no
avail, I was left scratching my head. Where to now?
Picking my way through the markup, I was reminded that we attach
an all-purpose, "fix-all" IE-only style sheet. Could that be the
issue? Sure enough, the moment I cut away the style sheet, IE8
rendered the page like a dream.
It made me recall those traveling shows with the miracle healers
depicted in old movies, and suddenly "our poor, star-crossed son
has raised up, cast off those rickety crutches, and walked --
Hallelujah!"
It started me thinking, could we actually be at that mythical
place we've all dreamed about -- the point where all the major
browsers support practically all the standards and features they
should? Have we reached that moment in time where we can stop
using our creativity to make crippled browsers appear normal?
Can we dare instead to start thinking about what might be
possible with modern, young, healthy browsers?
Today I thought we might look at some of the new browser
features coming into view and whether they're of any use to us
right now.
Enjoy.
Alex Walker
Editor
SitePoint Design View
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
High Quality Designs at a Low Cost!
Are you a designer seeking amazing layouts and looking to put some extra
money in your pocket?
*Over 1000-plus designs for ONLY $49.
*The best selection of Web, Flash, Flash-enabled, Newsletter and Logo
templates on the Web.
*Complete web sites (HTML or Flash) for only $29 extra.
*A FREE year of dedicated server hosting with a platinum membership.
To start making professional designs and extra money, click here!
http://www.sitepoint.com/launch/6a9470
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- CSS3: To Infinity and Beyond!
- Take Our Personas Quiz, Win a $100 Amazon Voucher!
- Latest Tutorials
- Hot Discussions
- New Blogs
CSS3: TO INFINITY AND BEYOND!! - - - - - - - - - - - - - - - - -
Let's face it. Mozilla puts out a lot of alphas, nightlies, and
developer releases [1], so if you'd ignored last week's offering
[2] -- Firefox 3.6 alpha -- you could probably be forgiven.
However, this time there were actually some good reasons for web
geeks to pay attention. Among other goodies, the new additions
include support for:
- the -moz-background-size property
- multiple background images
- the rem length unit
- CSS gradients
- improved display:table rendering
Now let's be clear, this IS an alpha release that will only ever
be used by a tiny percentage of the Firefox userbase.
Nonetheless, it does raise the real prospect of us seeing these
features in the standard Firefox release before the year's end.
So, let's take a closer look at a few of the headline-grabbing
features.
MULTIPLE BACKGROUND IMAGES
Although there was a little buzz generated when Mozilla first
introduced -moz-border-radius [3] -- giving you simple CSS
rounded corners -- I personally remember finding the effect a
little underwhelming at the time.
For me, the concept of multiple background images was always
going to be the killer feature -- allowing us to do some awesome
tricks with layout sans the need for superfluous markup to hang
it all on.
The basic syntax is a no-brainer. Instead of listing a single
image source for your background-image property, you list up to
a maximum of four comma-separated images.
You can also specify up to four values for the respective
background-repeat and background-position properties:
#multi { background-image:url(paper.png), url(paper2.jpg);
background-repeat: no-repeat, no-repeat; background-position:
top left, bottom right; }I have to say, I *did* find the
stacking order to be slightly counter-intuitive. The second
listed image tucks UNDERNEATH the first image, and so on. But as
long as you're aware of this it's no problem.
So, which browsers currently support this feature?
At this moment, multiple background images are only fully
supported in Safari 4.0, Chrome 3.0, and Firefox 3.6 alpha
(Minefield). You can see my example in action by pointing any
one of those browsers at this URL:
http://www.sitepoint.com/examples/css3/multi.html [4]
So, is this worth using today?
One of the first problems I hit with sending this code to other
browsers, is that they reject just taking the first image and
ignoring the others. The comma is enough to kill the whole
declaration in those browsers, leaving the background blank.
However, I found (nod to @shaynet) that as long as you first
declared the background-image in its standard, single-image
format, Opera and older versions of Firefox and Safari were
perfectly happy to simply ignore any newer CSS code that
follows.
And although it's true Internet Explorer REFUSES to play along,
we're free to use conditional comments to send the simpler,
single-image code to IE like this:
<!--[if IE]> <style type="text/css"> #multi { background-image:
url(old-paper2.jpg); background-repeat: no-repeat;
background-position: top left; } </style> <![endif]-->In short,
I think this feature is usable and worthwhile today, but you ARE
going to need to be mindful about using it gracefully.
Make sure your design works nicely with older browsers (you're
no worse off than before, after all) but inject an extra layer
of richness for an increasing base of users with these newer
browsers. The time to start experimenting is now.
BACKGROUND-SIZE
As you might guess, background-size allows you to scale the CSS
background imagery you're using.
Currently background-size lacks support anywhere in its pure
CSS3 format, but each of Opera, Chrome/Safari, and the Firefox
3.6 alpha support it with their own custom markup.
That markup looks like this:
body {background-image:
url(background_image.jpg);background-size: 50% 50%; /* w3c spec
*/-moz-background-size: 50% 50%; /* firefox
css*/-webkit-background-size: 50% 50%; /* safari/chrome
*/-o-background-size: 50% 50%; /* opera css */}If you're using
any of those browsers you can see that code in action here [5].
So, can we use this now?
Again, the short answer is yes. Proprietary controls like these
will always be ignored by other browsers, so there are no
technical issues with using it.
For me, it's simply less clear exactly where I'd want to use
this property, since the rescaling process is rarely kind on the
imagery.
So, if you can mock up an attractive example using this feature,
I'd like to see your work.
CSS GRADIENTS
The CSS background gradients feature seems to me to be the most
viable new aspect, even though currently it is only supported in
the Firefox alpha, Safari 4, and Chrome 3 browsers.
Like the background-size code this is browser-specific code,
although each team introduces a new value for the standard
background-image rather than creating an entirely new CSS
property.
At its simplest, it looks a bit like this:
div#cssgradient2 { background-image: -moz-linear-gradient
(top, bottom, from(#A1D004), to(#6B9A00));
background-image: -webkit-gradient
(linear, left top, left bottom, color-stop(0.00, #A1D004),
color-stop(1.00, #6B9A00));}As you can see above, the Mozilla
(Firefox) and WebKit (Safari/Chrome) code is similar but not
identical. Both require start and end colors for your gradient,
as well as directional coordinates (that is, top, left, right,
bottom, and so on).
While both WebKit and Mozilla can do radial and linear
gradients, they handle the process slightly differently. Where
Mozilla prefers to use two separate property values (that is,
-moz-linear-gradient() and -moz-radial-gradient()), WebKit uses
a single property value with an extra parameter (for example,
-webkit-gradient(radial,…).
To keep it simple, I'm going to stick with linear gradients [6]
today.
While CSS gradients always require a minimum of two colors to
work, both methods allow you to set multiple color waypoints
that your gradient will transition through.
The syntax for a rainbow gradient would look like this:
/* fallback */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla gradient*/
background-image: -moz-linear-gradient(left,
right,from(red),color-stop(16%, orange),color-stop(32%,
yellow),color-stop(48%, green),color-stop(60%,
blue),color-stop(76%, indigo),to(violet));
/* webkit gradient */
background-image: -webkit-gradient(linear,
left top, left bottom, color-stop(0.00, red), color-stop(16%,
orange),color-stop(32%, yellow),color-stop(48%,
green),color-stop(60%, blue),color-stop(76%,
indigo),color-stop(1.00, violet));
Interestingly, IE can also do a reasonable job with simple
gradients (which excludes rainbows) using a filter property that
has been around since the days of IE5.
The IE-friendly syntax looks like this:
filter: progid:DXImageTransform.
Microsoft.gradient(enabled='true',startColorstr=#A1D004,
endColorstr=#6B9A00,
GradientType=0
);There are two things you need to know about this code.
Firstly, yes it's ugly, but you can see where the start and end
colors are being set.
Secondly, believe it or not, the obscure GradientType parameter
in fact sets the direction of your gradient. Set it to 0 for a
vertical gradient and 1 for horizontal. As far as I can tell,
it's impossible to do diagonal gradients or color-stops with
this filter in IE.
As I see it, there are three real attractions to using CSS
gradients.
1. Unlike images, CSS gradients scale proportionately with the
element containing them, allowing them to expand and contract
depending on the amount of content.
1. CSS gradients are very efficient, allowing you to generate
large, flexible, textured areas of tone with only a few lines of
code. That translates directly into faster pageload times for
your users.
1. There are plenty of situations where images may be blocked by
the user for security or bandwidth reasons. CSS gradients will
increasingly give you complex tones places that images can't go
or aren't wanted -- arguably most importantly, on Safari on the
iPhone.
So, can we use it now?
Again, as long as you're sensible, the answer is yes.
Clearly the newest versions of Safari, Chrome, and Firefox have
good gradient support. IE provides passable gradient support.
That represents roughly half the browser market before the
feature has been introduced to the main Firefox release.
The remaining browsers can be given a garden-variety background
image, which is exactly how you would be handling gradients now
anyway.
SUMMARY
It's easy to mount a counter argument against using new browser
features -- it's always too early and the technology is too
young. However, you need to play with any tool to become skilled
with it, and gradients and multiple backgrounds are going to be
the front-end developers' bread and butter in the years ahead.
I think playtime starts now.
[1] <http://ftp.mozilla.org/pub/mozilla.org/mozilla/nightly/latest/>
[2] <https://developer.mozilla.org/en/Firefox_3.6_for_developers>
[3] <https://developer.mozilla.org/en/CSS/-moz-border-radius>
[4] <http://www.sitepoint.com/examples/css3/multi.html>
[5] <http://www.sitepoint.com/examples/css3/css3-background-size.html>
[6] <http://www.sitepoint.com/examples/css3/gradient.html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TAKE OUR PERSONAS QUIZ, WIN A $100 AMAZON VOUCHER!
We recently decided to create some personas to aid the design
process here at SitePoint. Personas are fictitious
representations of your site's most common users. Admittedly,
this is the first time we've ever used personas in shaping our
design decisions -- better late than never!
Read on to learn more about how you could help us improve these
personas, and earn yourself a $100 voucher to spend at
amazon.com!
INTRODUCING THE SITEPOINT PERSONAS
These personas will be invaluable for helping us shape future
versions of sitepoint.com. However, rather than keep them as a
purely internal tool, we thought it might be fun to share our
personas with you, our readers.
Allow me to introduce, for your reading pleasure, the SitePoint
Personas (read the full article [1] or read about the process
that Matt followed to create them [2]):
Erin Kikuchi
the front-end coder Samuel Johnson
the workaholic business owner Raj Sumandra
the forum junkie Marco Gonzales
the troublemaking teenager Harvey Randolph
the newbie hobbyist Susan Kieslinger
the enthusiastic blogger Joseph Forrest
the Googling geek Scott McInnes
the visually impaired student We've also created a short Which
Persona Are You? [3] quiz, so you can find out which of these
personas you are most like.
WIN A $100 AMAZON VOUCHER
Take this quiz before September 4th and you'll go in the draw to
win one of five amazon.com vouchers worth $100. Not bad for less
than a minute of your time! Take the quiz now. [4]
We'd love to hear what you think of these personas. Did we
describe you to a tee? Are there any "typical users" that we've
glaringly omitted?
RELATED LINKS
- Introducing the SitePoint Personas [5]
- Build your Own Data-backed Personas [6]
- The SitePoint Personas Quiz: Which One are You? [7]
[1] <http://www.sitepoint.com/article/sitepoint-personas>
[2] <http://www.sitepoint.com/article/sitepoint-personas-process>
[3] <http://www.sitepoint.com/quiz/personas/>
[4] <http://www.sitepoint.com/quiz/personas/>
[5] <http://www.sitepoint.com/article/sitepoint-personas>
[6] <http://www.sitepoint.com/article/sitepoint-personas-process>
[7] <http://www.sitepoint.com/quiz/personas>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading! I'll see you in
a few weeks.
Alex Walker
design@sitepoint.com [1]
Editor, SitePoint Design View
[1] <mailto:design@sitepoint.com>
LATEST TUTORIALS - - - - - - - - - - - - - - - - - - - - - - - -
Build Your Own Data-backed Personas
by Matthew Magain
When Matt created the SitePoint Personas, he combined two
different methodologies, and it worked surprisingly well. Here,
he describes the process he followed, and explains how you might
do the same when designing your own web sites.
http://www.sitepoint.com/article/1742
Introducing the SitePoint Personas
by Matthew Magain
We recently decided to develop some personas to represent the
core readership of sitepoint.com, and this is what we came up
with. How well do you think we've captured the SitePoint
readership?
http://www.sitepoint.com/article/1741
Nifty Navigation Tricks Using CSS
by Rachel Andrew
Unless you limit yourself to one-page web sites, you�ll need to
design navigation. In fact, navigation is among the most
important parts of any web design. In this collection of
ready-made solutions Rachel steps us through styling horizontal
and vertical menus, tabs, buttons, lists, and links with CSS --
and making sure they're as accessible as possible!
http://www.sitepoint.com/article/1574
Flash Catalyst: Mockup to Masterpiece, Part II
by Andrew Muller
In the first part of this series, Andrew showed us how easy it
is to mock up an application interface in Adobe Illustrator and
Flash Catalyst. In part II, we'll add the rest of the code.
http://www.sitepoint.com/article/1740
Flash Catalyst: Mockup to Masterpiece, Part I
by Andrew Muller
Flash Catalyst is an amazing new tool from Adobe that reinvents
the process of building Rich Internet Applications. In this
tutorial, the first of two parts, Andrew demonstrates building a
nifty music library app using Flash Catalyst, Flash Builder, and,
well, very little code at all.
http://www.sitepoint.com/article/1739
HOT DISCUSSIONS - - - - - - - - - - - - - - - - - - - - - - - - -
Anchor (#) Tag or New Page?
<http://www.sitepoint.com/forums/showthread.php?threadid=632674>
on text editors
<http://www.sitepoint.com/forums/showthread.php?threadid=632733>
IE6 to be supported by MS until 2014 !
<http://www.sitepoint.com/forums/showthread.php?threadid=632424>
Help cutting out an image in photoshop
<http://www.sitepoint.com/forums/showthread.php?threadid=631990>
NEW BLOGS - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Web Design Blog: PIXEL PERFECT
Take Our Personas Quiz, Win a $100 Amazon Voucher! (10 comments)
http://www.sitepoint.com/blogs/2009/08/19/personas-quiz-win-amazon-voucher/
19 Firefox Add-ons For Designers (8 comments)
http://www.sitepoint.com/blogs/2009/08/17/firefox-add-ons-for-designers/
Ten Web Sites, Ten Years Ago (19 comments)
http://www.sitepoint.com/blogs/2009/08/17/ten-websites-ten-years-ago/
How To Get More Out Of A Simple Photoshop Brush (8 comments)
http://www.sitepoint.com/blogs/2009/08/14/photoshop-brush-palette/
Designer Spam (7 comments)
http://www.sitepoint.com/blogs/2009/08/12/designer-spam/
Web Pro Business Blog: STRATEGIES FOR SUCCESS
Do You Know Right from Wrong? How Business Ethics Can Change Your
Life (1 comment)
http://www.sitepoint.com/blogs/2009/08/18/how-business-ethics-can-change-your-life/
HootSuite 2.0: The Professional Twitter Client (4 comments)
http://www.sitepoint.com/blogs/2009/08/13/hootsuite-business-twitter-client/
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
Microsoft to Support IE6 Until 2014 (35 comments)
http://www.sitepoint.com/blogs/2009/08/18/microsoft-support-ie6-2014/
6 Ways To Connect With SitePoint (5 comments)
http://www.sitepoint.com/blogs/2009/08/11/6-ways-to-connect-with-sitepoint/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach thousands of opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's Design View.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
mailto:design@sitepoint.com
To subscribe, send a blank email to:
mailto:subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Design View is (c) 1998-2009 SitePoint Pty.
Ltd. All Rights Reserved. No part of this Newsletter may be
reproduced in whole or in part without written permission. All
guest articles are copyright their respective owners and are
reproduced with permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
[email]
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=[email]>
To leave this list, please visit:
[unsubscribe]
Do Not Reply to this email to unsubscribe.
We send this newsletter using Campaign Monitor.
http://www.campaignmonitor.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Topics
Download sample chapters of any of our popular books.
Learn more with SitePoint books