Part 1: The Tools
I design my sites primarily in Photoshop, and when specialized tools or techniques are needed, sometime Illustrator. There are four main pieces of software that I use for web design and development, on the coding side.
Part 2: Web Services
Hosting. I use MediaTemple as my host. They’re very reliable and have some great features that ease the pain of having to configure sites with sophisticated backends. This author assumes that the reader knows the basics of establishing hosting, domains, FTP, etc.
Version control via Beanstalk, and specifically their Subversion (SVN) hosting. This aspect is essential in my workflow, especially for syncing sites between computers, but also as a backup and revision mechanism for working with other designers and developers. I can’t imagine how I managed to maintain sites prior to using SVN.
With Subversion, you’ll need to learn some new lingo, i.e. “repositories” and “commits”. Because we’re going to be using Coda, I’m not going to delve into all the command-line pokey-jiggery you’ll need to know in Terminal, but at some point it wouldn’t hurt to acquaint yourself with that, either. The short version is that your “repository” will function very similarly to your site root, and it has its own structure based on Subversion best practices. A “commit” is a lot like FTPing your files up to a remote server. The converse act, or pulling down files, is called “updating”.
For my graphic files, I use Dropbox. I don’t know entirely why, but I like the service and they’ve got apps for iPhones and Android phones so you can email files to people if you need to. It’s automatic and effortless, and while I probably should be using Subversion to manage those files, I like the fact that Dropbox saves to the cloud when I save in my graphic apps. However, there is a service constructed around SVN + Photoshop files called Timeline. Check it out.
Part 3: The Breakdown
Let’s start from the bottom and work up. You’ll need to have Headdress and MAMP installed, as well as Coda and Transmit for moving files around. Any site you develop on the Mac using my methods will need to be stored in the ‘Sites’ directory of your user’s ‘Home’ folder. These local directories for each site are referred to, in the context of SVN, as “working copies”.
The next critical step is to configure Headdress to use the httpd.conf file generated by MAMP. The two most important aspects of these two pieces of software working in conjuction with each other are that we can now see PHP files and includes rendered out in our browsers without having to FTP them, and that we’ll have site-specific local URLs that get generated each time we add a site in Headdress.
When you start working on a new site, you’ll naturally want to name the root folder of that site after the client or even the project name. You’ll need to consider this carefully as it will affect how your SVN commits work out. My rule of thumb regarding this approach is this — if you’re building a full, standalone site for a client that should get its own repository. If you’re doing a bunch of emails, landing pages, and microsites for the same clients you can lump all those into their own repositories and respective working copies.
On the web service end, you’ll need to log in to your Subversion hosting site, and create a repository. You should at least do this immediately after creating a local root folder for the working copy, but DEFINITELY prior to adding a more robust file structure within said working copy. In my case, Beanstalk will generate three folders within each repository — branches, tags, and trunks. The trunk will be used for housing the main code base, while branches are used for the type of versioning where you may get really divergent copies of a given code base. Bringing those back together into the trunk is called “merging”. We won’t be exploring that process quite yet as I haven’t done it!
Now that we have our basic SVN file structure, we’ll move into Coda and make sure all our hosting details are in order. When it comes to choosing your local folder, you’ll always want to choose ‘trunk’ within a project root. Not doing so can have some serious ramifications later down the road and fixing a broken SVN repo is not fun. While we’re at it, let’s get those same details plugged in to Transmit so we can administer the files in a more effective hands-on fashion if need be.
In Coda we’ll take this opportunity to sync up our SVN repo to our working copy, and this will allow us to start adding files within the correct workflow.
See, that was easy!
We’ll also go ahead specify our working copies as local sites in Headdress. It’s as easy as locating your ‘trunk’ folder and giving it a name. You’ll also want to start and stop MAMP if it was already running.
Now, we’ll start adding some files in Coda (I’ll use a simple plugin called CreateProject). We’ll commit that to our SVN repo and check the files in Beanstalk. Yep, they’re there!
]]>
As Firefox 3 nears completion, it’s shaping up to be leaner, faster, and more usable. The world’s best open source browser is maturing, and as part of the web community, you can get your Firefox on, and help it gain more mainstream exposure at the same time. So make it count — don’t be a slouch — pledge to get Firefox 3! And it doesn’t cost a thing, people…
]]>Ok, I know that’s over the top, but I’d like to introduce you to Silas Dilworth’s new “Heroic Condensed”. If you’re a fan of condensed, slab sans-serifs like I am, then you’ll understand my enthusiasm. Available in 8 weights, and currently 33% off from its regular price, it’s hard to resist grabbing this up.
Maybe you’ve been designing websites for a month. Or maybe you’ve been at it for years. You’ve been using CSS for presentational markup with HTML, and you know how reliably pages tend to display when using a modern, standards-compliant browser like Firefox or Safari. And then you view your layout in the dreaded Internet Explorer 6. It’s blown to bits, kablooey, gobbledygook. You followed all the rules, but everything is misaligned, your margins are blown, your em-based font sizes are way off…
]]> A brief primerIE6 has the largest install base of any browser in the market, and many people still haven’t upgraded to Internet Explorer 7 (IE7). Many of the CSS hacks used to control IE6 are ignored by or disrupt browser rendering in IE7. IE7 plays by a lot of the standards-based rules we’re accustomed to in modern browsers, but it still comes up short. And in many situations, you can’t leave the users of older browsers completely in the lurch (even if IE6 is 8 friggin’ years old).
In the immortal words of the terrorist Howard Payne from the movie (SPEED), “Pop quiz[…] What do you do?”
You go to A List Apart or Position is Everything, and you hack that sucker until it submits to your will. You pull out all the stops. And then… You open the page in IE7 and once again it looks nothing at all like it’s supposed to. Not even like your hacked-for-IE6 version does. Now what?
My new go-to: Conditional CSS comments. They certainly aren’t new. However, for various projects including this site, I have just started using them. I love them and I probably won’t stop unless there is a significantly compelling reason to not use them. In principle, we shouldn’t have to at all, but that is not the reality we are confronted with, and it turn we must confront said reality with a solution that won’t induce hair pulling…
So what are these conditional comments? They’re basically proprietary filters built into various Internet Explorers that supply IE with specific stylesheets exclusively. Other browsers completely ignored that code, so the comments themselves are not (as far as I’ve read) harmful from an accessibility standpoint. You can even pick and choose specific versions of IE you want to target with your conditional comments. And what do these conditional CSS comments look like? Here is a stellar example from Ask the CSS Guy.
Before you go repeatedly recopying all your CSS after you make trivial tweaks to your base style sheet, and then pasting said changes back into your conditional CSS (like I was initially doing), know that the only CSS you absolutely need to put in the conditional style sheets are the rules you want overridden. Separate the wheat from the chaff and only maintain browser-specific hacks in your conditional CSS (you know, the code that tends to be troublesome with the usual suspects).
For tff4.com, I now use conditional CSS to serve up GIFs to IE6 users instead of my pretty, drop-shadowy PNGs. Now there’s no need for crippled Javascript to make alpha channels render on your PNGs in IE6—just serve them slightly different CSS! (If you aren’t excited by this prospect, you’re not a web geek, mkay?)
Update: It’s worth mentioning (due to a lot of traffic from Unmatched Style) that since I’ve just started using this technique of serving up different style sheets, I haven’t had the chance to get everything perfect in every browser, with IE6 still receiving the least amount of attention. The archived pages, I know, are way off for the time being. Hope to get them fixed soon!
]]>Last week I found that my site was suddenly behaving differently in Firefox. Up until this point, it looked pretty much the same as Safari. But suddenly every piece of text had inexplicably become bold, and the spacing of my block-level elements was off. Way off. After some rapid refreshing in both browsers to see if something had momentarily glitched out and become cached, I realized the bug was much more permanent.
Over the years, there have been a few extensions that I found critical, but haven’t been updated, X-Ray being chief among them. View Source Chart is another extension that keeps me from switching completely back to Safari. In order to use either of these I keep Nightly Tester Tools around for ensuring backward compatibility with these extensions that have fallen by the wayside…
]]> So using X-Ray, I find that Firefox is rendering a bunch of these extraneous tags all over the page:<strong><strong><div>
I thought somehow MovableType might be throwing extra code in by accident, right? But after viewing source in Safari I see that the tags that are present in Firefox just aren’t showing up.
My MovableType install is set to render pages statically, so I presumed that this mysterious code was being injected by some script I added to my site. PHP? Nope. sIFR? Nope. Crazyegg? Nope. Twitter? NOPE. A savvy friend even recommended shutting down Firebug and Greasemonkey to rule those out… Not the culprits, either…
As our conversation progressed, talking to my developer-friend must’ve dusted some troubleshooting mojo off. I went back and looked at where the errant tags began and there it was. I had found my white whale code.
It turns out that I use a secondary “blog” install to publish my linked list (“The Chipper”) — as is common on various blogs that utilize MovableType. And in one of my links, I carelessly neglected to close off a strong tag in the topmost link. These links are brought in via PHP include and somehow not closing it off caused a bunch of (properly nested, mind you) strong and div tags to be generated and injected into the page, but only in Firefox.
Safari, on the other hand, was kind enough to ignore the mistake and go about its business. Yet Firefox felt compelled to actually add in code to compensate for an unclosed tag. Or so it seems… I’m no browser geek, so that’s about as far as I’ll speculate. If you have a more in depth explanation of what happened, I’m all ears.
]]>I should add that, yes, I am a mac user, but for quite I while I've used Firefox exclusively. I am finding that it is really just too slow to be useful anymore, especially at work on an aging G5. All the web developer extensions in the world aren't going to eliminate my need to have pages pull up quickly and have my browser behave reliably with multiple tabs open... It seems, for now, I am stuck between a rock and lousy browser support.
]]>
Yesterday, brothers Saulius and Aidas Dailide released Pixelmator 1.0 for public consumption. Lucky for us, they were nice enough to provide a downloadable trial demo (which can be unlocked with a serial for more permanent use). It has been said that image editors are likely to become the new FTP client within the mac dev community, so I figured I'd give Pixelmator a try and see how it weighs in against the heaviest hitter, Photoshop.
First Impressions
The first thing that struck me is that at about 30MB, Pixelmator is pretty compact. A lot more compact than that torrent of CS3 you're waited three days for... I'm sure this is due in large part to the fact that brothers Dailide relied heavily on OS X's Core Image technology to handle the grunt work. Upon opening Pixelmator, you are confronted with a splash dialog box similar to that you would see in CS3, but with pretty animations of cascading text that become menu options. I jumped right in and used it to open the latest comp of my upcoming site redesign.
Pixelmator sells itself heavily on the concept of HUD-based palette systems. Unfortunately, as Gruber points out, this extends to the document window itself. This is fine on my macbook, but on both my iMac and a separate 23" Dell Monitor, this is rather annoying. Full screen mode eliminates background distractions, but I can't always work in full screen. An option to change the opacity of the document window might make a good 1.5 or 2.0 release addition.
The next thing I noticed was that all my masks were intact. Immediately this made me quite ecstatic, as I am a huge proponent of non-destructive image editing. Admittedly, I'm a geek — I nearly threw a keg party when Adobe added adjustable filters to CS3... Alas, my joy did not last long when I took notice that my comp hardly looked like the Photoshop version of itself. All. My. Textures. Gone. That's right, the application of layer effects of any kind in PS is rendered null and void when imported to Pixelmator. Effects are not even rasterized, just ignored. Vector and Smart objects are also changed in the conversion process, but to rasterized layers. I rely solely on vector and smart objects in my Photoshop work — out of the need to be able to re-edit everything I do, with personal and professional work. To do anything else would be senseless and a waste of time.
The Downside & The Upside, In That Order
On the above points alone, I could not use Pixelmator professionally and I feel that these will need to be resolved before Pixelmator can move beyond anything but amateur status. Same goes for Adjustment layers — non-destructive editing is non-negotiable for me. Pixelmator also lacks rulers, guides, and what I would consider some really basic functions that make Photoshop extremely usable, like toggling layers on and off with a continuous swipe down the line of visibility buttons.
Pixelmator eschews a lot of basic functions for prettier ones, like the splash screen animation and the jumbo icon for the active tool in the toolbar. It's worth noting that many Photoshop image-editing functions are available, including adjustments, image and canvas sizing, and filters. Pixelmator's halftone filter was a fun filter to play with and in my opinion, better executed than Photoshop's. Filters are visually "chained" to the objects they effect within the document window. It's a cool but superfluous effect, and I could see it getting annoying after a while with large, complex comps.
Pixelmator's toolbar is quite similar to Photoshop's, so much so, one has to wonder if it's really an improvement. I've heard more enthusiastic reviews about Acorn's single tool palette. Familiarity extends to many menu options and hotkeys, and this could certainly enable an easy transition from Pixelmator to Photoshop or vice versa. Pixelmator also supports most if not all major file formats. The Pixelmator team was also nice enough to provide some pretty useful documentation for the beginners out there wanting to try it as an alternative to the daunting beast that is Photoshop.
Wrapping Up
In summary, I feel that Pixelmator is a well-executed entry-level photomanipulation app — I would consider it great training wheels for beginners who can't afford photoshop. It lacks some essential middle-of-the-road features that makes switching from Photoshop a total deal breaker, not to mention the high-end features like Smart Objects. Should they show up later, though, I could probably get away with making my websites in just Pixelmator and Coda. Maybe. Any plans to make an Illustrator-killer, fellas?
For example, at last month’s iMacs/iLife/iWork special event, Jobs several times alluded to Apple having released the first version of iLife “a long time ago”. It was actually just four and a half years ago, but I think in Jobs’s mind, even 2003 is the distant past.
I'm convinced this is because he only returns from a utopian world in the year 2207 to give us keynotes and delicious technological goodies. Then FSJ time travels back to go get us more goodies.
Hey, a man can dream can't he?
]]>
There's this feeling in the back of my mind that BioShock reminds me of an overhyped movie that bills itself as "not just another action movie", when it really is, in fact, a weak action movie with some drama or comedy thrown in. I like honesty in the products I buy. I know that when I see Die Hard With a Vengeance it promises to have gratuitous gunshots, crazy friggin' explosions, and tons of expletives is supposed to have expletives along with the buddy banter. But much like "Rush Hour," BioShock is just lukewarm all around. And then there's no online component, which is a huge part of the reason I like Gears of War so much (and people are still playing the hell out of that).
To say nothing of the graphic design would be a crime. I love all the Art Deco references and type, and the in-game cartoon illustrations for the plasmids and various dispensers is pretty awesome. You don't see that kind of emphasis very often (except maybe Guitar Hero). Check out the concept art.
I just don't see why people are so in love with it. And I'm not alone...
iSites? IPOS? I know — jeebusSites!
A synopsis: FotC is a situational comedy revolving around the misguided attempts of two naive and oft idiotic Kiwis, Bret and Jemaine, to make something of their band in NYC with the assistance of their equally naive and idiotic band manager, Murray. Murray also happens to be a Cultural Attaché for the New Zealand Consulate in NYC, with the embassy depicted as a 1980s-esque corporate office tucked away on some side street in Chelsea (or insert some other neighborhood name from NYC I know nothing about).
The best part of the show, the part that has the most comedic substance, is that in the midst of the misadventures the Conchords will break out into song, and generally having to do with the storyline. An immense amount of thought goes into making these songs as insanely hilarious as possible, to counter the deadpan humor of the rest of the show. So while FotC as a whole has peaks and valleys, these are the tucked away gems you need to look for.
Check out some clips here.
This week featured a little ditty referencing Lord of the Rings, and it had me nearly falling off the couch. Watch it:
During the Apple WWDC 2007, I couldn't help wondering why the entire Apple Store was down. Speculation indicated this was all about software. And aside from the expected iPhone update, it was--in fact--all about software. Looking back, I'm surprised the whole site wasn't down. Tricksy Hobbitses, them Apples...
]]> As it turns out, Apple has been working on a little realign/redesign and has pushed live an entirely new site design, eschewing the now-dusty-glossy-button-look, and further unifying the site branding with the UI chrome from the upcoming Leopard OS. I say well done. Yes, it's a bit more eye candy from Apple, but it's a more elegant, more harmonious design that has been a long time coming. Bravo, Apple.It's worth adding that this further widens the perception of elegance for the Apple brand and echoes what you see in the brick-and-mortar Apple Stores these days. The subtle shading has the appearance more reminiscent the brushed aluminum Apple Cinema Displays, much like the glossy Jaguar buttons aped the ACDs of their day.
As far as the keynote goes: I'm a tad underwhelmed. Of course the organization of deskspace is now a snap, and easier backups are great, but I had a lot of that functionality with Chronosync and Virtue Desktops (when it was stable). Coverflow isn't something I care about with my finder windows -- I want some draggable tabs, dammit! That is long overdue. So was Safari for Windows. Some cynical voices (including the one in my head) are wondering if it shouldn't have been done sooner. Is this really going to be effective or is it going to hurt Firefox? What incentive is a PC user being offered that they don't already get with Firefox (or can't add onto Firefox)? My personal thought is that Apple is going to pull an "oops, honey" and bundle WinSafari with iTunes....
]]>