My Favorite CSS Techniques

Adam Darowski — Fri, 14 Nov 2008 18:11:55 +0000

I’ve been creating websites for 12 years. I started using CSS many years ago, but for a long time (like many designers) I only used it for text formatting. It wasn’t until 2006 that I took the plunge into pure CSS for layout. Since then, I’ve developed some favorite techniques that I use over and over again. Here, I’m finally putting them in one place.

These techniques don’t require any acrobatic wizardry or anything. They mirror my design approach—simple, clear, minimal, and (hopefully) easy to follow. It is because of this approach that my cross-browser fixes are usually quite minimal. That’s why you won’t see many IE tweaks here.

Before I start…

How did I learn CSS?

I’ve only picked up a few CSS books over the years, but I’ve leaned on those books heavily. They are:

Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
Bulletproof Web Design (1st edition) by Dan Cederholm
HTML Mastery by Paul Haine
CSS Mastery by Andy Budd

What? No Zeldman? I know, I know. I started with the local protégé, Mr. Cederholm. He’s taken me far.

Of course, I also read a ton of web design blogs and online publications. The key ones (for me) are:

SimpleBits (Dan Cederholm)
456 Berea Street (Roger Johansson)
A List Apart
Vitamin
Email list from the Web Standards Group

Now that you know how I learned to do this, here’s what I find myself using over and over again:

Image Replacement on Headers

Headers (h1, h2, etc.) are very, very important. For starters, search engines love them. When Google crawls your page, it first asks “Okay, where’s the h1? That will tell me what this page is.” If you don’t include headers, then you’re making Google guess. Why make Google guess?

This is what the h1 of Darowski.com looks like:

`Adam Darowski’s Traces of Inspiration`

And here’s how it renders with no CSS:

Of course, that just ain’t gonna do. Here’s how it renders with the rest of the design:

So, how do you do that? With image replacement. We’re taking the h1, then giving it a background image and height & weight (using the dimensions from the background image). For the text itself, we give it a negative indent so that the text doesn’t appear on the page. It’s still there for screen readers and search engines, but the typical user won’t see it.

Here’s the CSS:

h1 { margin: 0; } h1 a { display: block; background: url(darowski.png) no-repeat 0 0; height: 103px; width: 449px; text-indent: -9999px; }

Why is most of the code applied to the link inside the h1? Because if you apply the negative indent to the text inside the h1, the clickable link actually appears off the page. If you indent the text inside the clickable link, the link itself still appears on the page—only the text inside is hidden. I know, weird. But it works!

Implementing types and values using Microformats

Using Microformats to mark up an email address is pretty easy.

adarowski@gmail.com

becomes:

adarowski@gmail.com

And that’s it.

But what if you want to add more information to that email address, like if it is a home or work email address? In that case, inside of the object with the class of “email”, you need two more objects: one with the class name of “type” and another with the class name of “value”. The “type” is where you define home or work while “value” is the actual email address.

Here’s an example from my About page:

Work Info:





  Website: http://batchblue.com/


  Blog: http://blog.batchblue.com/


  Work Email: adarowski@batchblue.com


  Work Phone: (888) 402-2824

So, inside the li (which has the “email” class) lives two spans—one “type” and one “value”. The HTML renders like so with no CSS:

But you’ll notice that in this case, I have a “hidetext” style on the “type”. That’s because I only want to display it as “Email”. I simply add this style:

span.hidetext { display: none; }

and I’m done. It renders like so:

I don’t always hide the types, though. On BatchBook’s contact detail pages, the type works very well into the layout:

Custom icons on list items

Here’s one I use A LOT. Unordered lists are wonderful. I use them all the time. But that bullet that denotes an unordered list by default can be a bit boring. Here’s what I did to spruce up the bloggers list on the BatchBlue Blog:

And here’s the markup:

`Bloggers`





  Keri Calhoun


  Adam Darowski


  Will Larson


  Pamela O'Hara


  Sean Ransom


  Michelle Riggen-Ransom


  Stephanie Sweeney

As you can see, we gave the list an id of “bloggers” and each list item an id of the blogger’s last name. That allows us to apply a different icon to each blogger’s list item.

But first, here’s the CSS to get the list looking the way we want (correct padding, left indenting, removing the default bullet):

ul#bloggers { margin: 0; list-style: none; } ul#bloggers li { padding: 4px 0; margin: 1px; padding-left: 24px; } ul#bloggers li a { text-decoration: none; }

Next, here is the CSS for each of the individual line items:

#calhoun { background: url(../images/keri-calhoun-icon.jpg) no-repeat left 2px; } #darowski { background: url(../images/adam-darowski-icon.jpg) no-repeat left 2px; } #larson { background: url(../images/will-larson-icon.jpg) no-repeat left 2px; } #ohara { background: url(../images/pamela-ohara-icon.jpg) no-repeat left 2px; } #ransom { background: url(../images/sean-ransom-icon.jpg) no-repeat left 2px; } #riggen { background: url(../images/michelle-riggen-ransom-icon.jpg) no-repeat left 2px; } #sweeney { background: url(../images/stephanie-sweeney-icon.jpg) no-repeat left 2px; }

If you look around any site I’ve created, you’ll probably see a lot of these. The footer at Darowski.com uses it:

Creative use of definition lists

As much as I love unordered lists, there’s one thing I love more. Definition lists!

I admit, I had never even used one before reading Web Standards Solutions, but now I use them all the time. All contact info within BatchBook is laid out in definition lists. Think about it… what better defines the home email than the email address itself? The definition list is an unordered list with even more semantic meaning.

When we launched the new personas section of BatchBlue.com, I went with a definition list. The names of the personas are the definition terms (dt) and the person used in the persona as well as the information that person is likely to track help define it (dd).

Here’s the complete markup:

`Who needs a CRM anyway?`





  

    Sales professionals


    PC4Media.net


    Customers, leads, conversions…


  


  

    Freelancers


    Big Ring Design


    Clients, partnerships, invoices …


  


  

    Virtual assistants


    ChelPixie


    To-dos, schedules, executives…


  


  

    Entrepreneurs


    ThoughtCap


    Opportunities, partners, VCs…


  


  

    Editors


    KidoInfo


    Writers, deadlines, articles…


  


  

    Consultants


    CRM Essentials


    Clients, vendors, proposals…


  


  

    Event organizers


    Chris Brogan


    Speakers, attendees, sponsors…


  


  

    Non-Profits


    National Wildlife Federation


    Donors, fundraisers, volunteers…


  


  

    Real estate agents


    RealtyMan.com


    Buyers, sellers, referrals…


    Custom version available


  


  

    Designers


    lamikey.com


    Projects, clients, deliverables…


    Custom version available


  


  

    Marketers


    Saul Colt


    Press, bloggers, social media…


  


  

    Super Heroes


    Super Heroes


    We know you’re out there!

An abbreviated version of how that looks unstyled:

And here’s how I got that to look:

I’ll admit… I’m a bit proud of that one.

So, the CSS. There’s a lot of it. Let’s start with the basic definition list:

#personas { border-top: 1px solid #CACACA; border-left: 1px solid #CACACA; margin-bottom: 10px; width: 688px; } #personas dl { float: left; width: 163px; padding: 4px; border-bottom: 1px solid #CACACA; border-right: 1px solid #CACACA; margin: 0; } #personas dt { font-family: Georgia,serif; font-size: 120%; color: #004A8D; padding-bottom: 2px; } #personas dd { margin: 0; }

So, the whole thing is in a div (with an id of “personas”) that has a top and left 1-pixel border. The reason I did this is the individual definition lists inside the div will have bottom and right borders. That means we don’t have any double borders on any side.

Above, I’ve also set the width for each dl and floated it. The dt simply has some text formatting while the dd has its margin eliminated.

Here’s some more styling done to the definitions:

#personas dd.track { color: #666; font-family: Georgia, serif; font-style: italic; font-size: 110%; line-height: 120%; } #personas dd.track span { display: block; } #personas dd.custom { font-size: 80%; margin-top: 3px; padding-left: 22px; background-position: left 50%; } #personas dd.custom a:link, #personas dd.custom a:visited, #personas dd.custom a:hover, #personas dd.custom a:active { color: #F88C17; text-decoration: none; } #personas dd.custom a:hover { color: #F88C17; text-decoration: underline; } #personas dl.realestateagents dd.custom { background: url(../images/icon-realestate.png) no-repeat; } #personas dl.designers dd.custom { background: url(../images/icon-designer.png) no-repeat; } #personas dl.designers, #personas dl.realestateagents, #personas dl.marketers, #personas dl.superheroes { min-height: 95px; }

First, we are styling the text of the “track” definition (that’s the one we use to explain what each persona will track). I threw a very non-semantic span on the middle item in each of those. The reason I did that is so I could make it display as block (force it to a new line) to make sure they all line up the same.

A couple items in the bottom row have another definition with the class “custom”. This is to denote we have a custom version of BatchBook for this persona. First, I adjust the font size, margin, and padding. Then, I set the background position of the icons (in the same manner as explained above). Next, I set the link styles. Then, I set the background images for the Real Estate and Designers version. If you’re a designer, you just may find BatchBook for Designers handy.

Finally, I set the minimum height of the bottom row to make room for that “custom” style, even if it isn’t there. That way the boxes all line up on the bottom. (I realize this isn’t completely bulletproof, but these boxes will all have the exact same text in them so box height is easier to plan for.)

Finally, we have the thumbnail photos, which I’m actually going to cover in the next technique.

CSS sprites

I’ve recently been turned on to the wonder that is CSS Sprites. What are they? Well, for examples like the personas box above, I’d need to call 12 graphics. Instead of creating twelve graphics, I’ve created one that looks like this:

Now, I just call the same graphic and only expose part of it, depending which persona it is. Sure, the file is bigger, but calling one image and caching it is a LOT easier on the server than fetching twelve smaller images.

And this is only a small example. Every button in BatchBook is now in one single graphic file (it’s pretty darn big). I just call that one graphic and adjust the background position.

So, here’s how the CSS works for the personas table. First, here’s how we style each photo:

#personas dd.photo a { float: left; display: block; height: 45px; width: 45px; text-indent: -9999px; background: url(../images/personas.jpg) no-repeat; margin-top: 3px; margin-right: 8px; }

So, we float it, set a height & width, indent the text (like covered earlier), set a background image, and give it some margins. Right now, we’re calling the same image and position for each. Here’s how we adjust the positioning for each photo:

#personas dl.sales dd.photo a { background-position: 0 0; } #personas dl.freelancers dd.photo a { background-position: -45px 0; } #personas dl.virtalassistants dd.photo a { background-position: -90px 0; } #personas dl.entrepreneurs dd.photo a { background-position: -135px 0; } #personas dl.editors dd.photo a { background-position: -180px 0; } #personas dl.consultants dd.photo a { background-position: -225px 0; } #personas dl.eventorganizers dd.photo a { background-position: -270px 0; } #personas dl.nonprofits dd.photo a { background-position: -315px 0; } #personas dl.designers dd.photo a { background-position: -360px 0; } #personas dl.realestateagents dd.photo a { background-position: -405px 0; } #personas dl.marketers dd.photo a { background-position: -450px 0; } #personas dl.superheroes dd.photo a { background-position: -495px 0; }

So, with each dl, we change the horizontal position by 45 pixels (which makes sense, since the photos are 45 pixels wide!). If I need to add more personas, I just add them to the image, save it again, and add a few lines to the CSS. Done!

Auto-clearing with .clearfix

I use this one all the time, too—including in the personas example above. Say you’ve got a div and you put two elements in it. You float one left and float the other right. You need to clear that div so everything lines up correctly under it and nothing crashes together.

You could make sure the element after it uses a clear: both; style. But, you’d have to remember to put that in every single time. And what if you insert something in between them? It breaks. It is much cleaner to get the divs to clear themselves.

You can do with using the clearfix class. Here’s how it looks:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Now, “after” the element with the class “clearfix”, it will render a “.”, display it as block (forcing a new line), set the height to “0″ (I believe this is to make Firefox behave), hide it, and—of course—clear both!

In your IE6 and IE7 stylesheets, you’ll just have to add this:

.clearfix { height: 1%; }

That will trigger “hasLayout”. I’m not even going to try to explain hasLayout. I’ll leave it to this guy.

Font sizing: keywords & percentages

One of the first things you need to decide when you design a site with CSS is how you’re going to size your text. You’ve got (essentially) three options:

Pixels (px)
Ems (em)
Keywords (small, medium, large, etc.)

Pixels are fine for sizing text. It’s probably what you’re used to. But, there’s a problem.

It is quite common for users to increase the size of text on web pages. Let’s face it, a lot of sites are built by 20somethings with perfect eyesight. I wouldn’t be able to read many sites I created in college. I’m among those that will bump up the font size on sites occasionally.

But, as always, the problem is Internet Explorer. IE won’t adjust the size of text rendered in pixels. Kind of kills the #1 accessibility feature right there.

Ems are a perfectly usable workaround. But as you can see, they can be a bit difficult to grasp. I’ll be honest… I never bothered. I always thought it would be neat to create a completely em-based design so that the entire site zoomed in and out along with the text size. But now that modern browsers are replacing the text sizing option with a full-page zoom, that type of functionality is being handled by the browser. So, it’s a lot of extra work that, quite honestly, I’m glad I didn’t do.

So, what do I use? I use those silly keywords that come with HTML. You know… small, medium, large, etc. That’s me. Well, I actually only really use small. Because I use that as the baseline for my entire site. I then use percentages to adjust sizes accordingly.

First, what does it look like? I start off by establishing small as my baseline.

body { font-size: small; }

Then, in BatchBook I drop that down to 95% right off the bat to shrink it ever so slightly.

div#content { font-size: 95%; }

I actually leave this step out on BatchBlue.com. I guess that’s because when you’re actually inside the app, every pixel is roughly 5% more valuable.

This becomes the default font size. I then use percentages to scale headings up and supplemental text down. So, for example, if I’m adding a little note to a section that I want to appear a bit smaller, I’d mark it up as:

p.note { font-size: 90%; }

Then, to style my headings I scale it up:

h1 { font-size: 180%; } h2 { font-size: 140%; } h3 {font-size: 110%; }

With the increase in prominence of full-page zoom, I’ve considered going back to pixels. I still wouldn’t do a completely em-based design, though. I just don’t have the urge to show off my math skills that much.

Override iPhone text adjustment

I’ll finish with a very simple one. I like to make sure things look good on my iPhone, so I was delighted to find this on the Apple site:

Safari on iPhone adjusts the text size so it’s more readable after the user double taps. After a double-tap, Safari on iPhone gets the width of the block of text and determines the width after a double-tap. Safari on iPhone then determines an appropriate multiplier that is applied to the layout.

Sometimes you might find that automatic text size adjustment doesn’t produce ideal results. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look their best. In these cases, you can override the text size adjustment.

Use the -webkit-text-size-adjust CSS property to override Safari’s default text size adjustment. The values for -webkit-text-size-adjust are:

none:

auto:
multiplier percentages:
Only thing is… I find the results from -webkit-text-size-adjust can make things look weird. You just never know. Sometimes a paragraph will appear half the size of an unordered list for no apparent reason. So, on BatchBlue.com and BatchBook, I’ve added this:
html {-webkit-text-size-adjust: none}
And we’re in business! Everything looks like it does on regular ol’ Safari.
Dassit!
So, there you have it. That’s certainly not everything I use. And I’ve certainly used more complex solutions than those. But, the more complex something is, the less likely I am to use it again.
So, tell me dear reader, what are your favorite CSS techniques?
Or, what are you having a hard time wrapping your brain around (in regards to CSS)?

Using Fluid.app to Bring Google Reader for iPhone to your Desktop

Adam Darowski — Fri, 15 Aug 2008 01:36:07 +0000

Do you find yourself checking feeds on your iPhone and thinking, “Man… I wish Google Reader looked like this on my computer, too.” I have. Using Fluid.app and a bit of user agent trickery, you can make it happen.

Wait, What’s Fluid.app?

Fluid is a free Mac application that creates Site Specific Browsers (SSBs). An SSB allows you to run a single web site or application as a stand-alone Mac application, independent of your other web browser windows or tabs. This way, it is always instantly available via the Dock or application switcher, with no fumbling of tabs. Also, if your browser crashes, your important sites (in SSBs) are kept safe from harm.

What types of apps might you want to run in a SSB? How about your CRM, project management app, feed reader, email app, etc. Anything you use a LOT.

If you’re on Windows, Mozilla’s Prism creates SSBs, but the main highlights of this article are Fluid/Safari-only.

Setting It Up

When you fire up Fluid, you need to choose the URL (m.google.com) and the name of your application (I chose “Mobile Google”). You can then choose a custom application icon. Why do this? Otherwise it’ll go with the teenie little favicon the site uses. There are plenty of high resolution application icons on Flickr you can use that will look more like OS X icons.

Once you enter all that information, you can launch your new app.

Changing the User Agent

Hey wait, that didn’t look like the iPhone version! Nope. You’re still just looking at the generic mobile version non-iPhone users will get. Take a moment to think about how lucky you are that you have an iPhone.

Here’s how you change the user agent in Fluid so that it thinks it is an iPhone:

I’m going to guess that you need Safari’s “Develop” menu turned on in order to do this. You can do that via the “Advanced” pane in the Safari preferences.

Opening External Pages

While I don’t want to do any extraneous surfing from this new SSB, I also monitor things like the BatchBook support forums and our Summize searches in Google Reader. So, if I want to open something quickly to take action, I’d rather just do it right in my little SSB. So, I do this by setting this preference below:

And there you have it. You’ve got a handy little Google Reader (and Gmail/Calendar/Docs/etc.) widget on your desktop at all times. Enjoy!

My Favorite iPhone Apps (So Far)

Adam Darowski — Mon, 28 Jul 2008 22:43:32 +0000

When everybody was anxiously awaiting the new iPhone 3G, I just sat there and said “nope, not gonna upgrade—I like what I have.” No, I wasn’t in denial or just being difficult. It’s just that when you don’t really go anywhere, there’s not much of a need for things like GPS. And EDGE is pretty sweet where I am, so the 3G wasn’t all that appealing.

Plus there’s the fact that I’ve been with AT&T ever since they were Cingular (and actually had their shit together), so I’ve got some sort of grandfathered super cheap family plan that I’m not too keen on parting with.

But the big reason is that us iPhone 1.0 kids still get the software upgrade. That’s what I wanted. The software.

I wanted APPS.

So, a couple weeks after upgrading to iPhone 2.0, I wanted to share some of my favorite iPhone apps.

(Note that all links are to iTunes App Store)

Last.fm

During the first iPhone 2.0 weekend, if I saw one more tweet that said “OMFG Pandora for iPhone is sooooo awesome!” I… well, I probably wouldn’t have done anything. I just sat there on my high Last.fm horse saying “so what, Last.fm is still better… even with no iPhone app!”. Then Last.fm released an iPhone app. And I was thrilled.

The Last.fm app allows you to listen to a radio station of your music library (tracks you’ve scrobbled before), stations based on any artist you like, stations based on any of your friends or neighbours (those Last.fm users with taste most similar to yours) libraries, and—of course—a station of only recommendations based on your listening habits.

I’ll save the gushing of how much I love the Last.fm service, because I’ve already done so here many times before.

Wish List:

The app must stay in the foreground to keep playing. Would be wonderful if it kept playing in the background.

Artist bios (which are user-generated and generally solid) being available in the app would be nice.

I would like to sort my Last.fm friends by musical compatibility rating (this is also something I want to see in the web app).

Exposure

Wow. I just found this one today and I’m in love. If you’re a Flickr user with an iPhone, get it. Right away. Everything’s here. View your photos. View your friend’s photos. View featured photos. View geotagged photos near you. You can even view and add comments to photos from within Exposure. This app is about as good as it gets.

There’s a free, ad-based version for free and a $9.99 version with no ads. To be honest, the ads are so unobnoxious there’s little reason to upgrade beyond supporting this fantastic developer. I’d have no problem with them cranking up the advertising level a notch.

Wish List:

Judging by this Get Satisfaction thread, I’m not alone in wanting the ability to upload from Exposure to Flickr. Why not just email photos to Flickr? Because that compresses them to 640×480. I’d love to retain the camera’s 1600×1200 resolution.

Twinkle

Ah, the race to create the best Twitter app for iPhone. There’s Twitterrific. There’s Twittelator. But for me, it’s Twinkle.

Why Twinkle? It’s pretty, first of all. That’s quite important to me. I also like that it’s location-aware. I can see who’s tweeting near me (quite cool when I was recently on vacation). One limitation is that you only see the local tweets from those using Twinkle, not the entire Twittersphere.

Wish List:

I do wish there was one dedicated screen for @replies (like it has for direct messages). Twittelator combines these, referring to them collectively as “Replies”. I’m cool with that.

This one is a limitation of the Twitter API and not Twinkle, but I
will never be able to rely on a 3rd party Twitter app until they lift the restrictions on API calls. I don’t have Twitter open all the time, so just getting the last 20 or so tweets doesn’t work for me. For this reason, I use m.twitter.com to read tweets more than anything else.

AIM

Quite honestly, it’s AOL Instant Messenger. It works as advertised. In this case, no news is good news.

Wish List:

My thumb is large. It really is. It covers about 18 iPhone keyboard buttons. Being able to type on the landscape keyboard helps me immensely. I’d love to see this added to the AIM app.

Facebook

I’ve got this love/hate thing with Facebook. Let’s just say the iPhone app is 100% love. The profile browsing, while pretty click-heavy, is very slick. The message inbox is well done, too. I’ve always felt Facebook’s messaging system is it’s #1 feature. It’s so well done. The iPhone app even has chat, though I haven’t found myself using that yet.

Wish List:

Not much… just let me type in landscape!

WordPress

I’ll admit… this one makes the list without me really using it much yet. But the potential is awesome. Being able to reliably work on blog posts on iPhone will be a huge help. The WPhone plugin has served me well, but feels buggy (especially comment moderation).

This is a very early version of the app, though, and it does need some key features.

Wish List:

Again… let me type in landscape!

You can edit local drafts, but not saved drafts on the server. This is kind of a bummer—and weird since you can edit published posts that are on the server.

Comment moderation, please?

Being able to post and edit Pages (and maybe even tweak the theme code) would be nice.

I have been using some other apps, but they just didn’t quite crack my “favorites” list. Among those:

Games

I was on vacation last week, so I had a bit of time to play with games. Most often, I played Aurora Feint, but when I installed the update, it blew away my saved game. I’m thinking I won’t have the time or patience to work my way back to where I was. Tap Tap Revenge is just… too cool. I also have played Jirbo Break a bit. Not bad.

For the Pre-Schooler

My daughter is 3 1/2 but is becoming an iPhone power user. She loves flipping between photos, exploring on the Google Map, or typing her name in the Notes app. As far as third party apps, she’s been enjoying Scribble, a very simple drawing game. She also has played JirboMatch (a memory game) and Bubbles (a very simple bubble popping time-waster) a bit.

What else?

I don’t know. I can’t help but feel a bit underwhelmed by the apps so far. I’m not really sure what I was expecting, but I’m not quite as excited as I thought I would be. I’m not really seeing any type of full featured word-processing apps or much productivity-wise beyond perhaps OmniFocus. iPhone definitely has the potential to be a viable platform, but I’m not feeling it is being taken advantage of yet. It seems that most of the innovation is in the gaming realm. That probably mimics the industry as a whole, but I’m not a gamer. I’d like to be wowed while being productive.

Again, I’m not sure what app it will take to do that. The WordPress app has the potential to be something along those lines. If the AIM app was actually Adium, I’d be far more excited. If the whole 2.0 update was a bit more stable, I’d be far happer.

So, what apps have been your favorites? What’s missing?

The Unspoken Savings of iPhone

Adam Darowski — Wed, 25 Jun 2008 01:12:34 +0000

We know about the core features of iPhone (the bottom row of the home screen)—Phone (duh), Mail, Safari (the iPhone’s web browser), and iPod (which handles audio, video, photos, etc.).

But, I’m always finding extra uses for my iPhone. I just wanted to share some of the products I’ll never have to buy, as long as I have my iPhone.

Flashlight: I use this “feature” more than I use the phone. This thing isn’t a heavy duty flashlight, but it’s perfect for checking on sleeping kids, looking for a plug in a dark room, etc.

Alarm Clock: Best UI of any alarm clock I’ve ever owned. In fact, my existing alarm clock has been blinking 12:00 for months.

Watch: I haven’t had a watch since I got a cell phone. Not only do I get the time when I pull out my iPhone, I see my wallpaper of my kiddos.

Calculator: Sure, I haven’t owned a calculator since high school. But on quite a few occasions, I’ve thought “oh yeah, my iPhone has one!”. Keep in mind that the new software update will add a scientific calculator.

Notepad: The other day, I was fetching coffee for a couple guys. I couldn’t find a piece of paper anywhere. I took the order down as an iPhone note. Sure, they harassed me about it, but it worked!

Newspaper: Google Reader on iPhone, FTW.

Map: You know those huge maps & atlases a bunch of people have stuffed in their car? I have Google Maps on the iPhone.

Pocket Calendar: My wife LIVES by her pocket calendar. I live by six ICAL feeds fed into iCal.app and synced to iPhone.

Rolodex: Okay, I’ve never owned one of these. But between exporting my contacts to Address book and accessing BatchBook via the iPhone interface, I’m covered.

I haven’t taken the time to add up what all that costs, but I’m pretty sure it’d subsidize the phone.

BatchBook for iPhone (And How I Set Up the Development Environment)

Adam Darowski — Thu, 08 May 2008 01:19:42 +0000

On Monday, I announced the release of BatchBook for iPhone over at the BatchBlue Blog. Check out the post for the details of what features we launched with and what’s coming next. Don’t have a BatchBook account yet? You can sign up for free.

But what I wanted to talk about here is how I set up the development environment. Obviously, designing for a phone is much different than for a desktop or laptop. Luckily, there are plenty of tools available to make developing for the iPhone both a breeze and—quite frankly—incredibly enjoyable.

iui

I highly recommend starting with Joe Hewitt’s wonderful iui framework for iPhone-optimized web apps. The framework has a very small footprint, can be heavily customized, and is downright fun to experiment with.

iPhoney

Testing can be interesting… you don’t want to keep pushing code live and firing up your phone, so what’s the best approach to take?

First, I tried iPhoney. iPhoney is your own gorgeous iPhone sitting your desktop. You can tell iPhoney what User Agent to behave as—the iPhone, standard Safari/WebKit, or more.

Safari 3.1

Once you get to a certain point, though, you need to use some developer tools to fine tune your code. Safari 3.1 came with a bunch of developer tools. Among them are an element inspector so you can see the cascade of styles attached to an element (think a prettier version of Firebug that isn’t quite as powerful). Also, you can choose from a huge list a of user agents.

Using the iPhone user agent with the element inspector lets you troubleshoot any display issues you may be having.

To turn on the iPhone Developer Tools, head to Safari’s preferences:

Once you quit Safari and open it back up, you’ll see the Develop menu.

From there, just choose iPhone from the User Agents list and you’re in action!

So, have fun! I’m personally looking forward to updating the BatchBook iPhone app and am tempted to play with some other ideas for creating iPhone apps. I have found that working with a totally different canvas (a phone as opposed to a desktop browser) after all these years can actually be quite thrilling.

Plus, developing for iPhone means no Internet Explorer!

Two Quick & Cute Stories About iPhones and Kiddies

Adam Darowski — Tue, 11 Sep 2007 12:30:17 +0000

With my head basically down 18+ hours a day working on a product launch, I haven’t been prolific in my blogging lately. But I had to share a couple cute stories concerning the iPhone and kiddies.

First, Ella’s 4-year old cousin came over this weekend to play. We were all outside. Nolan (now 11 weeks) was a bit cranky, so I was walking around rocking him. He loves music to calm him down, so I was playing Death Cab For Cutie (his favorite) on the iPhone as it laid on his stomach. I turned to Ella’s friend and said, “look, Nolan has a radio on his belly.”

She looked at me like I had six heads and said “that’s not a radio, that’s an iPod.”

Later, I showed Ella (a couple months shy of three years old) a photo of her I took on the iPhone. She pulled it from me and—like she’s been doing this all her life—did the one finger flip through all the photos. The best part was when she switched to landscape for certain photos. Guess the UI is simple enough for someone under three.

I’ll tell you—it’s hard not to love this thing. My latest use for it? It is already the best alarm clock I ever had. Erin said, “Wow, and the ring isn’t even annoying.”

Apple Makes Everyone Happy Regarding the iPhone Price Drop

Adam Darowski — Fri, 07 Sep 2007 00:47:41 +0000

Shortly after it was released, BatchBlue got me an iPhone. You know… gotta test the app.

Yesterday, Apple had a special event in which they unveiled all new iPods, including the rather sick iPod Touch. It is an iPhone without the … er … phone.¬† If I hadn’t gotten an iPhone for work, this would have been the product I was waiting for. Since, besides SMS, the phone portion of the iPhone is what I use the least.

Apple also made another annoucement. The iPhone’s price was being chopped by $200. While price drops are usually welcomed with open arms, current iPhone owners absolutely went ballistic. I’ll admit, I was far less bent because it was a company device so it really didn’t come out of pocket. Plus, I’d say I’ve done at least $200 worth of testing on it, so it’s no big deal to me.

But others freaked. Hey, it’s the price of being an early adopter, right? Well, Steve got it right. In yet another open letter from Steve, he addressed the issue.

I have received hundreds of emails from iPhone customers who are upset about Apple dropping the price of iPhone by $200 two months after it went on sale. After reading every one of these emails, I have some observations and conclusions.

Emphasis is mine. I like that he starts right off by saying he read every single one. While it may or may not be exactly true, it still conveys they “man, I really didn’t expect this shitstorm, but you have my attention” angle.

The three observations boil down to:

This is their chance to add as many users for the holiday season as possible. So, lowering the price will get many, many more users at this important time of year.

Things change in tech quickly. If you’re always waiting for a price drop, you’ll be disappointed soon after every time.

They need to do a better job of taking care of their early customers.

Whoa, what? Yeah, he said:

Third, even though we are making the right decision to lower the price of iPhone, and even though the technology road is bumpy, we need to do a better job taking care of our early iPhone customers as we aggressively go after new ones with a lower price. Our early customers trusted us, and we must live up to that trust with our actions in moments like these.

So, the best part:

Therefore, we have decided to offer every iPhone customer who purchased an iPhone from either Apple or AT&T, and who is not receiving a rebate or any other consideration, a $100 store credit towards the purchase of any product at an Apple Retail Store or the Apple Online Store. Details are still being worked out and will be posted on Apple’s website next week. Stay tuned.

Well damn, that was well played by Mr. Jobs. You just picked up a new iWork customer (and will reap the benefits of the upgrade path).

And I still love my iPhone.

But I still friggin’ hate AT&T. My second bill was more effed up than the first one.

Using an iPhone with a Work Machine and a Home Machine

Adam Darowski — Fri, 24 Aug 2007 15:07:31 +0000

When I got my iPhone, without thinking too much about it, I copied a bunch of music and photos from my home computer to my work MacBook. I did this because I would be syncing the iPhone with the MacBook (the iPhone is a “work machine”, after all).

What are the downsides here? First of all, you’re wasting hard drive space on your work machine with music and photos—that you’re already using to take up room on another machine. Second, since I work from home, all that music is almost always available via my shared iTunes anyway. Third, I have to make a conscious effort to pick and choose what to put on the MacBook so I can sync it to my iPhone.

Well, that was dumb.

Turns out, you can sync different areas of the iPhone to different machines. So, here’s my breakdown:

Synced to work MacBook:

Email (I have the work email on the iPhone. I use GMail through Safari on the iPhone.)

Address Book (My work Address Book is not yet well-populated, but that’s where my data will be soon.)

Safari bookmarks (I actually don’t use local bookmarks as a del.icio.us fan. But I use the local bookmarks just for bookmarks I want to have on my iPhone. So, the nice thing here is that I can use bookmarklets on the iPhone, to do things like save to del.icio.us, find text on a page, or reveal Microformats.)

Synced to my home eMac:

Music (Right now, I have a smart playlist for my dozen or so favorite artists that I sync to the iPhone.)

Photos (For the first time, I’m using the rating feature. I have a smart folder to sync anything with five stars.)

Podcasts (Though I usually listen to them on Erin’s 1st gen. Shuffle.)

Videos (I have the wonderful 45-minute videos “Ella Six Months” and “Ella One Year” as well as “Ella’s 1st Birthday Party” and a video of the family cat. Oh, and a couple Death Cab videos pulled from YouTube with vixy.net.)

I find this works wonderfully. I just sync the work stuff more often, the play stuff when I want to get new photos of Nolan on there. Now my work hard drive is music- and photo-less, which frees a ton of space.

iPhone Second Impressions

Adam Darowski — Sat, 28 Jul 2007 05:04:57 +0000

When I first got my iPhone, I wrote up my first impressions. I was in Maine most of this week, on the beach. I wasn’t on vacation, though… I was working. But the house where I was staying had no wifi. But it did have a shitty EDGE connection. So, I hammered on the iPhone. A LOT.

First of all, here’s why the EDGE was weak. This is where I was using it from… literally the end of the country.

If I drove downtown, the EDGE was much better. So, using it on the beach was an exercise in patience. But, I just wanted to share some more thoughts after using it more and more.

I found myself wishing for copy/paste about once every hour. Or even just to select a large amount of text. I repeatedly wanted to reply to a long email, but only quote part of it. Forget about it… unless you want to hit that delete button 759 times.

Not too many application crashes, but still some.

I would like an Apple-created IM application that works a lot like the SMS one. I’d also like an Apple-esque RSS reader. Newshutch just isn’t working for me anymore on the iPhone. A shame because I love it on the desktop, but I need to use the same on both.

Imagine my shock when a Word doc was attached, and I could click to open it. I can only view it (not edit), but that’s all I needed to do. I don’t remember Apple mentioning this, so it was a nice surprise. Opens PDFs the same way. Supposed to open an Excel sheet, but the only one I tried it with made the phone crash and burn. A rare restart was required.

Using GMail isn’t all that smooth. I know you can “Add an Account” to Mail and use GMail through that interface, but you need to enable POP in your GMail account. Correct me if I’m wrong, but doesn’t that mean it won’t be synced on all my machines/devices anymore?

I love Mail for my IMAP work account though.

It is a bit too easy to delete an email in Mail. It saves it to a Trash folder on the iPhone, but I still have yet to find this folder. I’ve put a couple emails in there I’d like to get back.

I put about two hours of video of Ella on there. Gorgeous. She enjoys being able to see herself when she was Nolan’s age! So cute to see a two year old walking around with an iPhone showing it to everyone.

Notes is pretty cool. But would be great to sync that with my Mac somewhere. Say you already have a lot of text on your MacBook you want to email. That way you can drop it in a note, bypass the copy/paste issue.

Or, they could just implement copy/paste.

I’d like to be able to attach files to emails that I put on the iPhone in disk mode (wait, does it do disk mode?)

Okay, lack of Flash is a bit more annoying than I thought. For Flash Video purposes only.

Wow, you get used to this keyboard really quickly. I’ve sent a LOT of email from this thing.

I’m still shocked by the camera (see below):

And the one thing I’m almost afraid to admit…

I was looking in the rear view mirror to see if Nolan was asleep in his car seat. I reached up towards the mirror to do a two-fingered flick to zoom in. That’s almost like reaching for command-Z when you spill something.

I’m eagerly awaiting software version 1.1 (to get it a bit more stable—and can I get me some copy/paste?), but man, this thing is great.

iPhone First Impressions

Adam Darowski — Sun, 15 Jul 2007 02:23:51 +0000

At Thursday morning’s BatchBlue communications meeting, I was presented with a shiny new iPhone. You know… a boy does have to test his web apps, right? Well, I’ve been testing the unit out quite a bit—particularly (as I expected) Safari. I just wanted to toss up some notes from the first two and a half days.

Specs:

Size was… pretty much what I expected. A slightly taller video iPod.

As for the price, having the company foot the bill softened the blow. But I have to say, it was going to be purchased anyway after seeing how shockingly reasonable the plans were.

I got the 8 GB version. As the boss said, “I wouldn’t do that to you.”

Performance

I love that it picks up wifi when I’m at home.

EDGE is slow, but not painful (though this is coming from a guy that had dialup at home for years longer than most).

The part I have to admit—Safari has crashed about five times (seems to happen with GMail and JiveTalk (which is in alpha, so that may be it).

The iPod also stangely crashed three times while trying to get through one podcast episode. No other iPod crashes, though. Odd.

Kinda expected a weaker antenna, but worth noting that my MacBook can connect to my wifi in the backyard. iPhone has to use EDGE.

The keyboard is a bit daunting at first, but I’ve already gotten a lot better at it. You have to do what they say and let go and trust the autocorrect.

Battery life seems adequate. I’ve only either lightly used it or heavily used it, so I’ve either barely touched the battery or strained it quickly. Still, I haven’t dropped below half. I’ll report more on this with more use.

One of the big complaints people have is the omission of copy/paste. This is a very valid complaint. I’d love to just be able to select something and copy it. Of course, the interface doesn’t even have selecting at this point. It is a problem they will have to solve.

I’m a big two-finger scroller on the trackpad of my MacBook. The iPhone scrolling actually works in the opposite manner. On the MacBook, you move your fingers downward to make the page contents move up (meaning you are looking below the current content). The iPhone metaphor is that the content goes in the direction your finger does. Takes me some time to get used to that going from device to device.

Safari

Safari is really the #1 reason I got it. I want web browsing without lugging a computer.

The zooming is extremely smooth. Really crisp text makes reading a breeze.

One of the main reasons I wanted it was for RSS feed reading. A LOT of reading. It’s really not bad at all for that despite the size.

I use Newshutch for RSS reading, though, and that may be an issue. Safari on iPhone has no scrollbars—to scroll you use one finger. To scroll a scrollable div within a page, you use two fingers. Newshutch recently made both columns into scrollable divs. Nice touch on a full screen, but if you are zooming to read text on a mobile device, it is a royal pain in the ass to have to deal with the scrolling divs.

Also some advice for Newshutch is that the “mark as read” button at the top of a post should not only be visible on a rollover (no rollover on iPhone). That feature would be far more handy at the top of the post.

Might have to switch to a different reader now that I’ll do most of my reading on iPhone.

BatchBook runs great so far. Only one issue that I’ve noticed (one scrollable div doesn’t work with the two-finger trick).

iPhone also overrides your minimum width in your CSS. So, some pages are thinner than they are meant to be and that can cause rendering issues.

I’ve only noticed one site that served me a mobile version without me asking—redsox.com. I visited m.twitter.com on my own. Wishing GMail had a less heavy mobile version (it does have an app, but you can’t install those on iPhone). I may have to try out the HTML only version. See if that’s more lightweight.

One complaint a friend had about the “JesusPhone” was that it had no IM ability. However, JiveTalk has been awesome. I can connect to AIM and GTalk using that now. That’s going to be incredibly useful. Just in alpha now though.

When a web site doesn’t have a “Remember Me” checkbox, there’s no way to save passwords. Kind of a pain in the butt considering all the special characters usernames and passwords (should) have.

Out of curiosity, I surfed over to some links to mp3 files. Safari played the mp3 files in a nice media player within the browser. Tried with some mp4 video. Said Safari couldn’t play it. (I thought standard Safari would, but I just checked and it downloads mp4s. So, I suppose this is as expected.)

Mail

Number two reason I wanted it.

Imported my IMAP work account without a hitch.

I really like the interface of the inbox, messages, new messages, etc.

Don’t have my other IMAP mailboxes available, so things I’ve archived I can’t get. This also means I can’t clean out my inbox on the go.

Wish the write new message interface would switch to landscape like Safari. Would make the buttons much wider for someone with big honkin’ thumbs like me.

YouTube

First YouTube search I did was for “Arcade Fire”, since I know they have a ton of cool stuff on YouTube. Was treated to a gorgeous quality version of Keep the Car Running.

However, it seems just a handful of YouTube videos are actually in the iPhone format. Total bummer. Many searches I would expect many hits for yielded nothing.

Can’t wait my own videos I uploaded to YouTube.

Perhaps they are converting them over time? Other wise might not be that useful a widget.

Weather

Just wanted to throw this in there because it is slick, fast, and zippy… just like the Dashboard widget.

Phone Calls

Surprisingly, not my top use for the thing. I think I’ve made three phone calls or so and received about three. Nice keypad, though.

SMS

Also not a big SMS guy, either. But I sent a couple messages. Interface to type is what you’d expect. Messages show up as iChat bubbles. Very nice. I’ve got 200 of these things a month. Might as well use ‘em.

iPod

Wow, video is sweet on this thing. Loaded up the “Joe Carter game” from the 1993 World Series. Scrubbed to a random point and saw my beloved Pete Incaviglia make a catch. Beautiful quality. Watched one of my own TWML video podcasts, too. Very nice.

Audio is slick, too. Coverflow is wow-inducing. I’ve still only uploaded a few albums on here though.

Tried to play some podcasts from it in the car today. Apparently it must use some sort of different headphone jack, because a 1/8″ to a tape deck didn’t work.

The number one most amazing and useful thing about the iPod features—the thing has a freakin’ speaker! Nolan is big into music to appease him, so it’s been nice to have Travis or Death Cab with me at all times to play for him if he gets fussy. Makes sense that a phone has a feature, but to have it for the iPod was something I hadn’t considered.

Photos

Very slick slideshows, advancing animations, and rotation.

Photos look beautiful on the large, bright screen.

I find that when I sync, it keeps wanting to import photos to iPhoto that I’ve already imported. Just telling iPhoto to not import duplicates works, but it keeps asking me.

Camera

I saved the camera for last so I can post some samples. First of all, the viewfinder is the WHOLE FREAKIN’ IPHONE SCREEN. So, it’s basically so enormous that it is shocking.

It ain’t quick. Ella has often turned around by the time it takes the photo.

1200 x 1600 from a phone? What more can you ask?

Tough getting used to how to point it. Doesn’t feel natural at first, especially in portrait mode. I’m getting used to it.

Some photo samples (click for larger versions):

Low light is a bit grainy, but really not too bad.

Nice focus and sharpness here. This was taken from inside Ella’s playhouse, looking at her outside the door.

A couple photos, like the one above, seemed oddly stretched. She’s skinny, but not this skinny.

Finally, this is the one that blew me away. This is Ella running, taken by a cameraphone. Please take a look at the full size version. Look how sharp this bad boy is. Very impressive.

Bottom Line

Wow.

I need to preface this with a couple things, though. First of all, I’m the person this device was made for. I’m a Mac Geek. I make web apps and need to test them on all browsers and devices. I don’t make a ton of calls or send SMS messages (so the minimum plan was good for me). I’ll use the unlimited data until they’re upset they let me have unlimited. I’ll use this from the couch just so I can hold Nolan while getting stuff done.

There are some issues, of course. The crashes were bummers. Copy/paste is really needed. An Apple-created IM app would probably be more robust.

But overall, this thing is sweet. Not only was it worth my boss’ money, it was really worth my own if I had to do it. I’ll have to write more when I find some web apps that work really well with the iPhone. It should be fun hunting for those gems.

Update: I posted my iPhone Second Impressions.

Update: With the first iPhone updater, all my IMAP mailboxes are now available. Sweet!

Crosspost: “iPhone and BatchBook, Sitting in a Tree”

Adam Darowski — Thu, 14 Jun 2007 20:27:16 +0000

This morning I upped a post over at the BatchBlog about Apple’s decision to not offer an SDK for the iPhone (and how that affects us at BatchBlue). We’re making a web app, so it’s not really rattling our plans any. But others are less than thrilled.

Adam Darowski » iPhone

Stop iPhone from (Incorrectly) Auto-Linking Phone Numbers

My Favorite CSS Techniques

How did I learn CSS?

Image Replacement on Headers

Adam Darowski’s Traces of Inspiration

Implementing types and values using Microformats

Custom icons on list items

Bloggers

Creative use of definition lists

Who needs a CRM anyway?

CSS sprites

Auto-clearing with .clearfix

Font sizing: keywords & percentages

Override iPhone text adjustment

Dassit!

Using Fluid.app to Bring Google Reader for iPhone to your Desktop

Wait, What’s Fluid.app?

Setting It Up

Changing the User Agent

Opening External Pages

My Favorite iPhone Apps (So Far)

Last.fm

Exposure

Twinkle

AIM

Facebook

WordPress

Games

For the Pre-Schooler

What else?

The Unspoken Savings of iPhone

BatchBook for iPhone (And How I Set Up the Development Environment)

iui

iPhoney

Safari 3.1

Two Quick & Cute Stories About iPhones and Kiddies

Apple Makes Everyone Happy Regarding the iPhone Price Drop

Using an iPhone with a Work Machine and a Home Machine

iPhone Second Impressions

iPhone First Impressions

Specs:

Performance

Safari

Mail

YouTube

Weather

Phone Calls

SMS

iPod

Photos

Camera

Bottom Line

Crosspost: “iPhone and BatchBook, Sitting in a Tree”

`Adam Darowski’s Traces of Inspiration`

`Bloggers`

`Who needs a CRM anyway?`