DSLR vs Point-And-Shoot: Is It Time To Upgrade?

2009-08-28T23:43:52Z

That little point-and-shoot has served you well, but you’ve become dissatisfied with it. The autofocus is too slow. The shutter lags too long after you press the button, and you’re missing shots because of it. The prints aren’t all that sharp, particularly when enlarged to 8×10. You’re thinking it’s time to replace it, but do you get another point-and-shoot, or bite-the-bullet and go for an expensive DSLR, Digital Single Lens Reflex? Here is a quick test to determine if you may be ready for a DSLR. Just answer “Yes” or “No” or “Don’t know” to each question.

Are you dissatisfied with the image quality your point-and-shoot produces?
Do you regularly do post production on your images?
Do you routinely make prints 8 x 10 inches or larger?
Does the lens on your point-and-shoot fail to fulfill your creative needs?
Is your camera too slow?
Do you require frame rates of 3 or more per second?
Do you think of yourself as a “serious” photographer?

If you answered “Yes” to four or more of the above questions, you most likely are a good candidate for a DSLR. Here’s why.

Question 1: Dissatisfaction is the first indicator that a change is needed whether that be to a better point-and-shoot or a DSLR. The goal is to find a camera that produces images that satisfy well beyond your current needs, and has the features you require even if you have to spend more than you want. That way, you won’t be looking for a new camera six months down the road.

Question 2: If you’re post producing your images regularly, you’ve reached a critical point photographically. It is the first sign of professionalism where you judge your work against a higher standard, and want to improve your images. This typically leads to getting a better camera and lens to produce higher quality images to begin with. Usually that camera will be a DSLR.

Question 3: To put it bluntly: The typical digital point-and-shoot is not designed to make large prints. It’s designed for snapshots by people who know nothing about photography. If you want to make quality large prints, the DSLR with its much larger sensor is the way to go.

Question 4: There is nothing more frustrating than trying to take pictures with a lens that just doesn’t “work.” Either it’s not wide enough or not long enough or not sharp enough or has too much image distortion or flare, etc. With a point-and-shoot, the only lens you get is the one that came permanently attached to the camera. With a DSLR, you can choose any lens or lenses that you need to fulfill your creative vision, since they are interchangeable, and that is the DSLR’s biggest asset.

Question 5: DSLRs, even the entry-level ones, operate much, much faster than the best point-and-shoots.

Question 6: If you need to record fast action or get peak action, high frames rates are highly desirable. Only a DSLR will do.

Question 7: A serious photographer is a student of the craft, and forever seeks to improve. And while such a student, because of that acquired knowledge and experience, can take better pictures with a point-and-shoot than the average user, a point-and-shoot is limiting. The DSLR is a proper tool for the serious shooter.

Well, that, in a nutshell, is it. Next time I’ll cover choosing a DSLR that is right for you.

Simple CSS3 rounded corners with support for IE

2009-03-10T23:16:58Z

Rounded corners are a common element of web designs. Unfortunately, they have been frustratingly difficult to express in clean CSS / HTML. The long term solution is CSS3’s border-radius property, which is nicely supported in the current versions of Safari and Firefox. Sadly but unsurprisingly, this property is not supported in IE, even the upcoming IE8.

The new design for our website was full of rounded corners. As an avid Firefox user, I simply could not bear the idea of sending millions of little corner images when border-radius did the trick so well. Yet, IE7 is the dominant browser, so we couldn’t leave those users out in the cold.

I started looking for a technique that would meet these requirements:

CSS3 border-radius aware browsers are sent clean, fast CSS with no corner images
IE7+ gets a fallback using corner images
The same HTML is used for all browsers – only the CSS is different
Cosmetics in IE6 don’t matter – it’s OK to have square corners in this old browser
No Javascript

Fortunately, I did find a flexible way to achieve this without too many problems. If you look at the BestInClass.com home page in Firefox, all of the corners and rounded buttons are implemented with pure CSS3.

The main drawbacks and restrictions are:

It adds some non-semantic empty divs to the markup.
It requires a way to deliver different CSS to IE.
It cannot support rounded elements with a border that sit on top of unpredictable backgrounds.

Show Me, Don’t Tell Me

For those that want to skip over the why and get straight to the how, here’s a fairly minimal example in a single file.

CSS3 Rounded Corners With IE Fallback Example

The Code for Decent Browsers

The first thing to do is pick a unique style id for the rounded corners. This id will be used to find the right corner images for IE, so it needs to be unique considering the rounded block’s background color, border style, and background the block is sitting on top of.

First, the HTML. Wherever we want to have a rounded block, use the following elements:


  

  ... contents of the block go here ...

STYLE should be the unique style ID you chose. The empty tl and tr divs are the top left and right corners, while the bl and br are the bottom right. Those divs are not used at all in a CSS3-aware browser, but they are needed for IE’s image corners.

For a CSS3 aware browser like Safari and Firefox 3, this element can be styled very simply:

.rounded_STYLE
{
    background-color: COLOR;          /* if needed */
    border: 1px solid BORDER_COLOR;   /* if needed */
    -webkit-border-radius: RADIUS;    /* for Safari */
    -moz-border-radius: RADIUS;       /* for Firefox */
}

RADIUS would be something like 4px. And that’s it, you’re done in Firefox and Safari.

The Code for IE

Life would be good if we could stop there, but unfortunately the depressingly incomplete and non-standard IE remains the favorite of a majority of users… At least usage of IE6 has dwindled to the point where we no longer have to worry about pixel perfection there. And that opens the door for a decent solution in IE7 and above.

Did I mention that the HTML is the same? Yes I did. But we do need different CSS. Somehow, you need to hide the CSS for .rounded_STYLE above from IE, and feed it the following instead. On BestInClass.com we use dynamically generated CSS to do this, but you could use IE conditional comments as well.

.rounded_STYLE
{
  background-color: COLOR;            /* if needed */
  border: 1px solid BORDER_COLOR;     /* if needed */
  position: relative;
}

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
  width: RADIUS;
  height: RADIUS;
  position: absolute;
}

.rounded_STYLE > .tl
{
  background: url(/images/ui/rounded/STYLE-tl.png) top left no-repeat;
  top: OFFSET;
  left: OFFSET;
}

.rounded_STYLE > .tr
{
  background: url(/images/ui/rounded/STYLE-tr.png) top right no-repeat;
  top: OFFSET;
  right: OFFSET;
}

.rounded_STYLE > .bl
{
  background: url(/images/ui/rounded/STYLE-bl.png) bottom left no-repeat;
  bottom: OFFSET;
  left: OFFSET;
}

.rounded_STYLE > .br
{
  background: url(/images/ui/rounded/STYLE-br.png) bottom right no-repeat;
  bottom: OFFSET;
  right: OFFSET;
}

Here RADIUS is again something like 4px and STYLE is the unique corner style id you chose. OFFSET should be set to -1px if you have a 1 pixel border for the element, or 0 if there is no border.

The CSS references four different corner images. In this example, they are located on the path /images/ui/rounded.

Making the Corner Images

You could generate these images using PhotoShop or another image editor. At least on a Mac, there is a much easier way for the non-PhotoShop savvy using the Preview application.

Display your page in Firefox and take a screenshot of one of the corners.
Open the screenshot in Preview. Zoom in so that you can see the pixels clearly.
Select a square that is no bigger than RADIUS on a side and which is aligned with the straight borders of the element.
Copy and New from Clipboard.
Save this corner in your /images/ui/rounded directory using the name STYLE-CORNER.png where CORNER is tl, tr, bl, or br depending on whatever corner you chose.
Use Flip Horizontal and Flip Vertical to generate the other three corners and repeat.

Congratulations, you should now have attractive anti-aliased rounded corners in all modern browsers, with Firefox and Safari users able to enjoy faster browsing without millions of teeny corner images clogging up the internets. Plus, you have the satisfaction of being future-compliant with CSS3 as it becomes increasingly available.