Regarding Fixed Positioning in Mobile Safari

Wow, so the influx of traffic after my previous article was linked by the ever-popular (and rakishly good-looking) John Gruber turned out to be a very positive experience.

Obviously a bajillion-percent traffic increase over a 36-hour period is great news, you say! Well, it is if a) my hosting holds up and b) people are not jerks. Fortunately, both events proved to hold true, as my server never blinked (props to ExpressionEngine’s caching abilities) and I received a number of thought-provoking emails from (rakishly good-looking) readers.

(Statistic: removing comments from my blog appears to have reduced the amount of negative feedback I get by infinity percent.)

Anyway, I just want to address one topic that a number of people brought up in emails: the behavior of position:fixed in Mobile Safari.

PodCamp Nashville 2010 Presentation

For the few dozen faithful of you that attended PodCamp Nashville 2010 (and the even fewer dozen that read my articles) (lots of love to you all), here are the slides from my segment of Griffin Technology’s presentation, entitled “Is The iPad Just A Big iPhone?” (Yes, we realize that the word “the” before “iPad” is against Apple rules. Rebellion!)

We were (secretly) hoping to get some folks on the offensive (or defensive) with that title, but the audience was actually quite civil and inquisitive. Which was good as well!

The presentation was meant to have no barrier to entry – nothing super-technical, just some observations about how iPad is going to turn the user experience on its head.

You can download a PDF of our slides, watch me mumble it up in this very iPhoney iPhone video of my talk (graciously provided by Cintron), or (preferably) read on for the directors-cut blog-entry version of my segment.

Why Twitter Is Great, and Why That Doesn’t Matter

Twitter! It’s so hot right now. As I write this sentence, the #1 trending topic on Twitter today (New Moon) has generated 40 more tweets in the timespan between my typing of the words “sentence” and “tweets”. Twitter is fast. It’s easy. It’s a continual conversation with your friends. It’s the top source of Inside Info On Celebs. Twitter users can sway the decisions of giant companies! News hits first on Twitter! It’s the new source — an eternal fount of information! It’s the new empowerment — users can be heard!

(There are 285 new tweets about New Moon now.)

Development Notes: Krystal Blitz

This isn’t strictly my design — I was contracted in a development capacity — but it was certainly an interesting change of pace to implement someone else’s mockup and make it Web-friendly.

The job was to take the site mockup for the new Krystal Blitz energy drink and implement it. Although a microsite such as this could typically be handled in Flash by most agencies, I built it in a combination of PHP, Javascript, and Flash to maximize accessibility — this is a quick article about how I went about tackling it.

The Slow Ocean

My preemptive apologies for this line:

I’ve been fighting this for years.

That may sound melodramatic. The whole process has been, nauseatingly so.

Tidy URLs in ExpressionEngine

ExpressionEngine’s strict template_group/template URL structure allows for some wonderfully tidy content organization. However, an annoying downside to this structure is that EE’s URLs tend to be a bit overgrown. For example, say I have a “blog” template group, and I have a “single.php” template within it that I use to display single posts. The URL would look like this:

http://www.mysite.com/index.php/blog/single/the_title_of_the_post

I don’t know about you, but that index.php in the middle there just hurts my brain. There are a number of techniques to get rid of it involving some .htaccess trickery, but I couldn’t find one that worked properly on my hosting setup. But hey, what about just renaming it? EE has a nice little writeup explaining how to do so. I just renamed my index.php to “v1” (with no extension) and now it looks like a nice directory in the URL. Niggling problem solved.

http://www.mysite.com/v1/blog/single/the_title_of_the_post

See, better already! But wait - there’s plenty more you can do here.

Goodbye Forever, .css Files

Designers: when was the last time you created a new file with an .html extension? Hopefully, it’s been quite a while. I personally have the habit of making even the most mundane Under Construction Splash a PHP file, just in case I want the file to be able to do something.

CSS files are just text files with a fancy extension. Lose ‘em. Their utterly static nature is a harbinger of inflexibility that will result in silly find/replace changes down the line. I urge you to abandon the arbitrary .css extension altogether, and instead create your CSS files in PHP.

Basic ExpressionEngine Layout Tips

I’m already very impressed with ExpressionEngine’s versatility. It’s caused me to reconsider a few things about how content management systems can work.

I used to use WordPress and force it to be a content management system. For a while there, I played around with Chyrp, because it was so lightweight that I could go in and mangle it into whatever I wanted to be. Basically, I preferred systems that allowed me to dig right into their code and adjust things at my leisure.

I thought ill of systems that had their own templating language, but EE’s templating system is so well-done and comprehensive that I haven’t had to write one line in PHP yet. This kind of functionality — not to mention the brilliantly comprehensive documentation — is miles away from the days when I was cross-referencing WordPress functions to try to deduce what kind of data a particular object contained.

EE is great. But, for some reason, the built-in template is quite wasteful. There are too many files, code is repeated everywhere … it’s a bad initial example for anyone looking at EE for the first time. So, for your benefit (hopefully), here are some templating tricks I’ve learned from my first big dive into ExpressionEngine.

The Über-Droplet: Tidy Your Work Folders

Note: This extremely simple mini-tutorial was written for Adobe CS3. Hopefully CS4 handles everything the same way.

I personally have an intense fear of two things: a) losing image data and b) having disorganized folders. I always keep hi-res versions of any image separate from the final comp, and I most definitely always keep my .psd finals. However, for any web graphic, you also will need the flat jpeg version. However, if you use this technique, you’ll keep your work folders clear of those redundant jpegs.

I’m sure everyone has some form of coping mechanism for the .psd/.jpeg glut, but for what it’s worth, here’s mine. It’s possibly the simplest tutorial ever, but I hope it helps you out.