Monday, 31 October 2011

CSS Borders: The Basics And Rounded Corners | Van SEO Design

CSS Borders: The Basics And Rounded Corners | Van SEO Design

CSS Borders: The Basics And Rounded Corners

Posted: 31 Oct 2011 05:30 AM PDT

Last week I walked through the css background property. The other half of the same W3C spec covers borders and so today I want to begin a walk though of css borders.

Borders are something I’m sure you use on most projects. Like backgrounds you’re probably familiar with css borders and yet may not be aware of some of all the properties and their values.

In this post I’ll look at the basic css border and then move into rounded corners with border-radius. Next time I’ll take an in-depth look at working with border-images.

Closeup of a wooden fence with another wooden fence blurred in the background

CSS Border

As I said above I’m sure you’re familiar with using css borders. I’m also going to guess there are a few finer points with them that you may not know.

You may get tired of me talking about boxes all the time, but let me refer to the box model once again. Borders are the area between padding and margin. Margins are outside of borders and paddings are inside, but you already knew that.

Borders apply to all html elements except tables when the table’s border-collapse property has been set to collapse.

border-color

As the name implies the border-color sets a color for the border. You can apply any color using an acceptable color name, hexadecimal notation, rgb, or rgba notation.

border-color is actually a shorthand for 4 properties, border-top-color, border-right-color, border-bottom-color, border-left-color.

Most of the time you’re going to set the same color and use the shorthand, but you can achieve some interesting shapes and effects by varying the color along with some other properties.

How different border styles might look in a browser

border-style

You probably use the same 2 or 3 border-styles all the time. Solid most often and perhaps dotted and dashed at times. There are several other values you can use, though.

The border style can be set to none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Different browsers will represent these styles somewhat differently. A border-style of ridge won’t look exactly the same in Safari or Chrome as it does in Firefox or IE, but the general characteristics will be the same.

The image above shows what each of these styles should look like approximately, but play with them in different browsers to see how they actually appear.

Like border-color, border-style is also shorthand. You can set each side with border-top-style, etc.

border-width

border-width is, of course, about sizing the width of the border. Allowable values are.

  • length (px, em)
  • thin
  • medium
  • thick
  • inherit

Generally you’ll set the length since thin, medium, and thick are determined by the browser. They will remain consistent in a document, but otherwise their size is out of your control.

And as with the other two properties above border-width is shorthand for border-top-width, etc.

Border Shorthand

Speaking of shorthand, we can use one shorthand of all 3 of the properties above.

{code type=css}
div {
border-width border-style color;
}

div {
border: 1px solid red;
}
{code}

You don’t need to use all three properties in the shorthand. I often find I want to add top and bottom or left and right borders, but not the other.

{code type=css}
div {
border: solid red;
border-width: 1px 0;
}
{code}

Diagram showing rounded corners created by different horizontal and vertical border-radius values

Rounded Corners

In css every element is a rectangular box. There’s no way around it. Curves are nice though, and for years developers had to use images to show curves on web pages.

The border-radius property changed that.

border-radius

At its simplest you set a border-radius by giving it a single value as either a length or %

{code type=css}
div {
border-radius: 10px;
}
{code}

The 10px represents the radius of a circle at each corner and the corner is drawn as an arc of this circle instead of as a 90 degree corner.

The above is shorthand for:

{code type=css}
div {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
{code}

There’s more though. Each corner can have both a horizontal and vertical radius. You show these two values with a slash. The values before the slash are the horizontal values and those after the slash are vertical.

{code type=css}
div {
border-top-left-radius: 10px / 2%;
}
{code}

Putting things back together in the shorthand you get

{code type=css}
div {
border-radius: 10px 5px 15px 10px / 5px 10px 15px 20px;
}
{code}

The corners follow a clockwise top-left, top-right, bottom-right, bottom-left order. If the bottom-left value is omitted it’s the same as the top-right and if the bottom-right is omitted it’s the same as the top-left. The opposite corner in both cases.

The border-radius property has pretty good support in modern browsers, though it won’t work in IE8 or below. Until recently you needed to use vendor specific prefixes, but that’s no longer the case in the latest browsers including IE9.

For IE8 and below I find jQuery offers a nice solution that works similarly to the css. You can see it demonstrated here. The demo links to the jQuery plugin it relies on.

Diagram showing corner shaping: Different width borders and borders thicker than the radius

Corner Shaping

The resulting shape of the corner can vary based on both the border radius and the border width.

It’s easiest to see in the image above, which is the effect of a a rounded corner connecting two borders of unequal thickness (left) and the effect of a rounded corner on two borders that are thicker than the radius of the corner (right).

This happens because the radius of the padding edge (inner border) is the radius of the outer border minus the corresponding border thickness, which can result in a negative or positive value as well as a value of 0.

Corner Clipping

Last week I talked about the background-clipping property. The background, though not a border-image (which we’ll get to next week) are clipped to the curve of the border-radius.

Other things such as the overflow property are also clipped to the curve and mouse events don’t occur outside the curve.

The element is still a rectangular shape, but many things can’t happen in the small area between the curve and 90 degree corner that’s no longer seen.

Diagram showing the transitional region over a rounded corner

Color and Style Transitions

When the borders meeting at a corner have different properties set (color, radius, etc) a transition has to occur.

Again this is probably easiest to see in the image above, which shows several different rounded corners and the area over which a transition will exist.

I won’t attempt to explain the math involved because I have no idea what it is.

The important thing to know is that this transition exists and that we can probably have some fun playing around with different values and see what happens.

Overlapping Curves

Corner curves can’t overlap. If the radii of two adjacent corners exceeds the size of the border box, browsers will proportionally reduce the values until they no longer overlap.

The values may be further reduced if they interfere with things like scrollbars as well.

Again I’ll spare you the complicated algorithm, though you’re welcome to check for yourself if you’re interested in the math.

The Effect of border-radius on Tables

The border-radius properties do apply to tables or inline-tables, though potentially may not if the border-collapse of the table is set to collapse.

The effect of border-radius on inline elements is undefined. There may be a definition in the future, but for now your guess is as good as anyone’s as to what will happen.

Perhaps it’s best not to use the border-radius properties on tables at the moment.

Closeup of an iron fence with cobweb

Summary

Much of the above was probably familiar to you. We’ve all been using borders for years and for the last few I’m sure the border-radius has entered the work of many of you.

While most of what’s included in this post seems simple on the surface there’s quite a bit you can do with borders if you experiment, especially if you play around with the height and width of the content box.

You can create some interesting shapes with css borders and with the addition of some pseudo elements you can create some rather complex shapes

Hopefully I’ve been able to introduce you to a few new things or perhaps clear up something that hasn’t been obvious. Play around with css borders and see what you can do.

Thursday, 27 October 2011

Are You Solving Design Problems Or Forcing Solutions On Them? | Van SEO Design

Are You Solving Design Problems Or Forcing Solutions On Them? | Van SEO Design

Are You Solving Design Problems Or Forcing Solutions On Them?

Posted: 27 Oct 2011 05:30 AM PDT

If you are an artist, you can do anything you want. It's perfectly all right. Design serves a different purpose. If in the process of solving a problem you create a problem, obviously, you didn't design.
—Massimo Vignelli


Recently I received a comment from Mitch on my post about creating equal height columns with css. Mitch wanted to know how to create columns of equal height where borders instead of background colors differentiated one column from another.

I didn’t have a good technique to share, but his question made me think about whether or not we try too hard to force a particular solution on a design instead of choosing the best of the available solutions to the problem.

Drawing depicting someone tryng to use power tools to force a square peg into a round hole

Why Force a Solution

How many times have you been frustrated because you couldn’t make a specific css technique work? Did you spend hours searching for a solution? Did you end up forcing a not so great technique into the site just to make your idea work?

Why not ask instead if another technique would solve the problem.

What problem are the equal height columns trying to solve? If the content itself is going to have different heights, then what purpose does making the content appear to sit inside equal height column serve?

  • does it create a specific mood?
  • does it help organize some other content?
  • does it communicate something specific?

Assuming equal height columns are important, why are the borders necessary? What specific problem are the borders trying to solve and is it only borders that can solve the problem?

Borders (and lines in general):

  • enclose space
  • separate one area of space from another area of space
  • help group what’s inside the space

Are borders the only way to do those things? How about…

  • using different background colors on the columns columns to create a virtual border between them, which both encloses and separates the space
  • using whitespace to surround the areas of positive space and varying the space according to the principal of proximity to enclose, separate, and group.
  • using a strong vertical edge created through aligned elements to separate elements on either side of that vertical edge. You can take it further and align elements on a grid.
  • using the principal of contrast (different color, font-size, font-style, etc) to style the content in different columns to show it as clearly separate from the content in another column.

The above are just a few ideas and I’m not trying to suggest that any of these things are better in general than using borders or that they make more sense for a specific design problem.

However, I would ask if any of these other possibilities could equally solve the problem.

The design problem that borders is trying to solve is one of how to enclose and separate space. The problem isn’t how to create equal column heights using borders to show the different columns. The fundamental problem is how to enclose and separate space.

It’s a problem that has a variety of solutions.

The word 'options' in focus on a page of blurry text

Choose the Best from the Available Solutions

Design finds solutions to problems and the designer attempts to select the best solution from all the available options.

Web design is often a matter of communication. There are many different ways to communicate the same message. Think of all the different languages spoken on the planet and how many ways there are to say hello or goodbye.

Graphically there are many ways to communicate something like the content in this space is different from the content in that space or that this element is more important than that one over there.

If there were only one way to solve each problem designers wouldn’t be necessary. Our work would be automated. Fortunately for us there isn’t a single solution.

Design Constraints

Within the variety of solutions we also have constraints. We can’t do anything we want. You’re constrained by the client’s existing brand and identity, by the demographics of your clients customers, by the likes and dislikes of your client.

You’re also constrained by the technologies at your disposal and the tools you have available to you.

If css doesn’t have a good method for creating equal height columns described through borders, then maybe that should be considered a design constraint and a different graphic solution should be considered.

The problem you’re trying to solve is defined in part by how you can’t solve it after all. That’s what a constraint is.

Sometimes it’s worth looking deeper into the technology to see if it can do something you want to do. Sometimes it’s worth searching for another technology to see if it can do what the first technology can’t. Sometimes your best bet is seeking a different design solution — one that is easily developed with the tools in front of you.

A square washer and a round washer in wooden beams

Summary

It’s easy for designers to fall in love with the solutions we come up with. Perhaps it’s the latest trend or a some cool new development trick we want to use.

Sometimes this leads us to force something that may not work well or be reasonable to achieve with the tools at hand.

When this happens I think we sometimes blame the tool, forgetting that there is another design solution we could readily use.

If a border can’t work why not use color or space or some other graphic element that solves the essential problem the border was trying to solve?

Why do we get locked into wrestling with one solution when another will happily cooperate?

There are times when the design solution is in the technique and it’s worth figuring out how to make a technique work. At other times the solution is simply another design choice.

Monday, 24 October 2011

CSS Background: There’s More To Know Than You Think | Van SEO Design

CSS Background: There’s More To Know Than You Think | Van SEO Design

CSS Background: There’s More To Know Than You Think

Posted: 24 Oct 2011 05:30 AM PDT

You likely use css backgrounds in every site you build. You give an element a background color and tell another element to let a background image repeat. How much do you know about all the other background properties?

Did you know you can control where in the background an image is painted or that you can even specify which part of an element is the background?

I’d like to run through the different background properties css3 offers us. Some of what follows I’m sure will be familiar to you. Some will probably be new. Hopefully this post will give you a greater understanding of a property you use all the time.

Background of colored stripes in a sun ray pattern

CSS Background

The first thing to understand is what does css consider as background and we’ll turn to the css box model with its content, padding, border, and margin for an answer.

Everything except margins is considered background, though we’ll see in a bit that css3 allows us to alter this background painting area to some degree,

Backgrounds can be transparent (the default), filled with color, or filled with images. Different properties determine which is used and in the case of images further properties are used to determine how the images are sized, positioned, and more.

In practice you’ll often use the background shorthand to set all these properties, but let’s look at them individually. I’ll come back to the shorthand later in this post.

background-color

I’m sure you’ve set a css background color before. For those who’ve never used it here’s one way you’d set a background color on paragraphs.

 p {background-color: red;}

You can also use hexadecimal or rgb notation instead.

 p {background-color: #f00;} p {background-color: #ff0000;} p {background-color: rgb(255, 0, 0;)}

All 3 lines of css above are equivalent and set a red background on the paragraph.

One last way to specify a background-color is rgba. The “a” stands for alpha transparency and is set as a fraction between 0 and 1, with 0 being fully transparent and 1 being fully opaque.

 p {background-color: rgba(255, 0, 0, 0.5);}

The above sets the background to the same red as before, though at 50% opacity. Browser support for rgba isn’t as good as rgb, but the fallback is generally to present the color as completely opaque or with an “a” of 1.0.

The one thing you might not be familiar with is that the background-color will be clipped according to the background-clip property.

We’ll get to this property shortly, but for now know it’s a way to prevent color from appearing behind the border of your element or even behind the element’s padding.

Background image of a path through the forest

background-image

I’m sure you’ve also set a background-image before. What’s nice is that in css3 we can add multiple images like so:

 body {background-image: url("image1"), url("image2"), url("image3")}

The above adds 3 background images to the body of a document.

Each image creates a new background layer so the images sit one on top of another. A value of none, an image with 0 width and height, or an image that fails to download still creates a new layer, though one that doesn’t show an image.

The first image in the list is seen as being closest to the viewer and each successive image is one layer further into the background. If a background color is also specified, it’s painted below all images and is furthest from the viewer.

There are two important guidelines you should follow when setting background-images.

  • Specify a background-color along with background-image(s) to preserve contrast for text if the images(s) don’t display.
  • Don’t use background-images to convey important information as they may not display in all browsers.

Background images will be sized, positioned, and tiled according properties we’ll cover momentarily.

With multiple images the values of these other properties will also be a comma separated list and the first value will correspond to the first image, etc.

If there are excess values at the end of these other properties, they’ll be ignored and if there are not enough the given values are repeated until there are enough to match the images.

Browser support for multiple baclground images is good in all browsers, except for Internet Explorer 8 and below.

Repating tile pattern

background-repeat

Background-repeat determines how background-images are tiled and has the allowed values of no-repeat, repeat-x, repeat-y, repeat, space, and round.

  • no-repeat — the image isn’t tiled
  • repeat-x — the image tiles horizontally only
  • repeat-y — the image tiles vertically only
  • repeat — the image tiles both horizontally and vertically
  • space — the image will tile to fill the background with as many complete images as possible. The images wil then be spaced evenly with first and last images touching the edge
  • round — image will be tiled to fill the background with as many complete images as possible. The images will then be scaled to fit the area exactly.

You’ve no doubt used all of the first 4 values above, but how many of you were aware of the last 2. I know I wasn’t.

 body {   background-repeat: no-repeat, repeat-y, space; }

Assuming the 3 background images from above the first wouldn’t be repeated, the second would be repeated vertically, and the last would use the space algorithm to repeat the images both horizontally and vertically.

background-attachment

The background-attachment property determines how the image scrolls with respect to the viewport. It has the 3 values below

  • fixed — the image doesn’t scroll. It’s fixed where it is.
  • local — the image scrolls with the element’s content. It’s fixed to the content.
  • scroll — the image scrolls with element. It’s fixed to element.
 body {   background-attachment: fixed; }

The above keeps the background-image fixed in place with respect to the body.

I can’t think of a single time I’ve ever set the background-attachment to local. Most of the time I leave it as the default (scroll), but sometimes fixing the image can make for an interesting effect.

Diagram showing background position coordinates 50% from top and 75% from left

background-position

By default background images are painted at the top-left corner of an element, but they don’t have to be. You can change where they’re positioned through the background-position property.

The background-position can be set horizontally, vertically, or both. Horizontally you can use the values center, left, and right. Vertically you can use the values center, top, and bottom. In both directions you can set a % or length.

 body {   background-position: right 20px; }

The above positions the image 20px down along the right edge of the element.

When 2 values are set the first is assumed to be the horizontal and the second vertical, unless the keywords say otherwise. When only one is set the second is assumed to be center.

% and length represent an offset from the top-left corner, however if 3 or 4 values are given then % or length is offset from keyword

 body {   background-position: bottom 10px right 20%; }

The above paints the image 10px from bottom and 20% from right.

Abstract background image

CSS3 Background Properties

Outside of the ability to use multiple background images all of the above have been available for awhile. Below are some new background properties specific to css3.

They work in most browsers, however they won’t work in IE8 or below.

background-clip

Earlier in this post I mentioned that the background was everything in the element’s box except for the margins. This and the next property can alter that.

The background-clip property determines where a background is clipped, which determines the background painting area. It has the following values

  • border-box — painted within (clipped to) border
  • padding-box — painted within (clipped to) padding
  • content-box — painted within (clipped to) content
 body {   background-clip: content-box; }

The above clips the image or color so it only displays behind the content part of the element’s box. The color or image will not show behind the element’s padding or border.

This is another property I can’t claim to have used, but having learned of it I can think of times when I would want to.

Sign for Origin: the London Craft Fair

background-origin

Similar is the background-origin property, which sets the origin for the background-position property. It’s values are the same as background-clip.

  • border-box — positioned relative to border box
  • padding-box — positioned relative to padding box
  • content-box — positioned relative to content box
 body {   background-origin: padding-box; }

Above the image or color would start inside the body border and behind any padding on the body.

Note that if the background-attachment is fixed then background-position has no effect.

background-size

The last property we can set on backgrounds is background-size. While images will be whatever size they are by default (the auto value) you can control the image size in several ways.

The obvious values are the usual % and length.

 body {   background-size: 300px 40%; }

The first value is the width and the second the height. Negative values are not permitted.

If only one value is given, the second is assumed to be auto. When one value or both are set to auto the image size is resolved using the images aspect ratio or failing that 100%.

There are 2 other values that control how the image might be sized.

  • contain — scales the image while preserving its aspect ratio to the largest size that both height and width can still fit within the background area
  • cover — scales the image while preserving its aspect ratio to the smallest size that both height and width can still fit within the background area

If neither width or height is specified then the image is sized based on the contain method above.

musical notation as shorthand

Background Property Shorthand

While you might set the above background properties individually, most of the time you’ll likely use the shorthand. In the past I’ve always placed the color first, the image second, and then any other properties after without thinking much to their order.

It’s always seemed to work, but it’s incorrect. The W3C specifies the following order.

  • <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
  • <final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
 background-image background-position / background-size background-repeat background-attachment background-origin background-clip color;

Color can only be used on the final background layer. A single background image is of course the final background layer.

 body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}

The above is equivalent to:

 body {   background-image: url("image.png");   background-position: top left;   background-size: 95% 95%;   background-repeat: no-repeat;   background-attachment: scroll;   background-origin: padding-box;   background-clip: content-box;   background-color: #333}; }

You don’t have to specify a value for every property in the shorthand. To use the shorthand on multiple images you would separate each set of values by a comma, remembering only to use a color on the last set of values.

Abstract background with a vintage feel

Summary

CSS backgrounds are something you no doubt use on every site. However you may not have been familiar with each of the different background properties available or some of the values for the properties you do know.

While much of the time you’ll happily let defaults reign with most of these properties, a few give you some nice control over how and where your background images display.

Browsers support is generally good for multiple images and the three new properties, origin, clip, and size, but do know that IE8 and below won’t support them.

That may or may not be an issue depending on which browsers you need to support and how you’re using these properties.

Hopefully this post has given you a greater understanding of a property you likely know well. Have you used any of the new properties or worked with multiple background images yet? If so how have you used them and how have they worked for you?

Thursday, 20 October 2011

The Connection Steve Jobs Made With Me | Van SEO Design

The Connection Steve Jobs Made With Me | Van SEO Design

The Connection Steve Jobs Made With Me

Posted: 20 Oct 2011 05:30 AM PDT

We've always tried to be at the intersection of technology and liberal arts, to be able to get the best of both, to make extremely advanced products from a technology point of view, but also have them be intuitive, easy to use, fun to use, so that they really fit the users — the users don't have to come to them, they come to the user.
— Steve Jobs


Above: Steve Jobs narrating “The Crazy Ones” commercial

Ever since Steve Jobs passed away I’ve wanted to say something, though I haven’t known what. So much has already been written and perhaps little more needs to be said. Still I wanted to say something.

As much as I might like otherwise, I don’t have any personal stories of Steve Jobs to share and I don’t have any new insights into how he did what he did. Those things are for others to share.

I didn’t know him and he didn’t know me and yet a connection was still formed between us.

My mom and I were talking the day after he died and we both commented how we felt as sad as we ever had at the loss of someone we never knew and we both wondered why.

It reminded me of another time when I also felt very sad at the loss of someone I never knew.

On December 8th, 1980 I was watching the Miami Dolphins play the New England Patriots on Monday night football. I was enjoying a close game when at the end of the 4th quarter Howard Cosell announced that John Lennon had been shot and killed.

Above: Howard Cosell tells the world John Lennon was shot and killed — 12/08/1980.

I’ve been coming back to that night a lot the last couple of weeks.

Two people I never knew except through their work. Two people taken too young. Two people who greatly influenced me. Two people who’s death filled me with a greater sadness than most.

Lennon was and still remains a hero to me. His words and music helped shape my thoughts and worldview. I am who I am in part because of who John Lennon was.

I wouldn’t describe Steve Jobs as a hero, though he too has certainly shaped my thoughts and worldview. His influence came later in my life at a time when hero worship was long in the past.

I woke up this morning when the alarm on my iPhone went off and moments later flipped up the lid of the Macbook Air I’m now typing on. At some point in the day my iPad will be in use and I may end the night with a movie watched via my Apple TV.

It’s impossible to make it through a day without encountering something of Steve’s that influences my life.

Above: Steve Jobs introducing the original iPhone

I listed to John’s music from the crib. My mom was a big fan. The first movie I ever saw was The Yellow Submarine. I’m told I had memorized the book of the same name (more likely some passages) before learning to read. I knew the lyrics to most of John’s songs by the time I was five.

His death came as a shock and like many I was profoundly sad.

Steve Jobs was always there too. Though I was a bit older when Apple started, I was still pretty young. From the first time I heard the word computer he was there.

The very first computer I touched was an Apple II. Unless you count playing pong on an Atari, though I guess Steve Jobs has influence there as well. The first computer I owned was one of the first Macs off the assembly line. Drexel University, which I was attending at the time, required students to get a Mac.

It was in my dorm room within a few weeks of the famous 1984 commercial.

About a week after John died my father, my brother, and myself were returning from a late brunch. Radio stations in New York were going silent for a few minutes in honor of John and I wanted to honor him too. I made my dad pull into the parking lot of our temple as we were passing by and the 3 of us sat silently in the car.

A very light snow fell. Light enough to not affect traffic, but enough to cover the ground with a thin blanket of white. It looked beautiful and many suggested it was a thank you from John for all the kind thoughts.

When I heard the news of Steve Jobs passing away it shouldn’t have been shocking or surprising, but it was. Steve had brought Apple back from certain death and in doing so had created a mythical aura around himself.

Many thought he could bring himself back from the brink the same way he brought Apple back.

In 1980 I broke out my Beatles albums and played them often. In 2011 I’ve been watching old keynotes and interviews with Steve Jobs.

Above: Steve Jobs Q&A Keynote from Apple’s 1997 Worldwide Developer Conference

I knew John through his songs and I knew Steve through his presentations. In many ways my relationship with both of them hasn’t changed at all.

I wanted to find a way to honor Steve Jobs. much like my father, brother, and I honored John almost 31 years ago. I suppose this post could count, but from what I’ve read about Steve he probably wouldn’t have cared much for all these tributes.

The day before his passing saw the release of the latest iPhone. I had been planning an upgrade and pre-ordered one shortly after they became available. Thinking about John’s snow I ordered the white one.

Normally I’d think honoring someone by buying a product doesn’t feel right, but maybe in this case it makes sense.Perhaps Steve Jobs would consider my using and enjoying one of his products the best thank you of all. It seems strange and yet it also feels right on some level.

One of the videos many people have been watching these last couple of weeks is the commencement speech at Stanford. He urged people not to live another’s life, to live for yourself, and make every day count. Stay hungry and stay foolish.

Above: Steve Jobs’ 2005 Stanford Commencement Address

I think the best way any of us can honor not only Steve Jobs, but ourselves, is to heed those words and to make the most of what we can of our lives. No matter what “most” is or what part of your life you apply it to.

Find your passion. Find what you love and put everything you have into it. For Steve Jobs it was family and Apple and the technology he helped bring to the world.

For you and me it’s…

Like John Lennon, Steve Jobs left this world too soon. It’s hard to shake the feeling that neither of them was quite done. Both had more to contribute and the world is poorer because they weren’t allowed to continue.

At the same time you’d be hard pressed to find people who contributed more to their industries even if their time was cut short.

Death happens. It’s inevitable. Our time in this world is finite and our legacy is what we make of that time. Regardless of what you think of Steve Jobs and Apple the best way to honor the man and yourself is to make the most of that precious resource, time. Find your passion and give your all to it.

I think the answer to the question my mom and I wondered about is that the reason we miss Steve Jobs is because he made a connection with us. We might not have known him personally, but he still made the connection.

As a public figure we heard him speak and saw him present. His words, his thoughts reached us. So did the products he helped create — products we didn’t have to come to — products that came to us — products that bridged a connection between Steve Jobs and ourselves.

Most of us mourning the loss of Steve Jobs never met him or knew him personally and yet we all knew him through that bridge. He found a way to connect with us and impact our lives. He put a ding in our universe.

Thank you Steve Jobs. You will be missed.
Subscribe to: Posts (Atom)