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!
]]>I’ve had some decent ideas, but my recent fall, pending surgery, and pending redesign of my employer’s massive website have all created a perfect storm of not being able to do much web-related work on the personal side of things. In a week, I’ll be left handed mousing, and typing with one hand…
]]>I’m starting to create again, but I still have a nagging itch. It’s this site. What am I doing with it? Not really anything. It got me the job I needed, but it serves little purpose as a voice for me. I rely on Twitter + Facebook far too much for that. Something needs to change. But when do I have time? Somewhere, I do. But I don’t feel much like sitting on the couch or at my desk to do it. Maybe I should go to more coffee shops and fewer pubs? Perhaps I need to block out a specific day and time to write?
I’ve noticed I’m not the only one — many designers aren’t publishing as frequently as they used to. Our communication channels are shifting ever closer to shorthand, easy-to-consume signals. Are our sites destined to become dusty portfolios slapped up alongside Tumblelogs?
Nay, I tell you! It takes quite a bit of effort to generate content, but we’ve all got to get better about it before the dumb channels take us over. Besides, you can’t squeeze a Photoshop tutorial or a full-blown discussion about frameworks into a tweet. So this is my reminder to myself… Write, dammit! Now I’m no expert, but what do you young designers entering the field want to know O.o
]]>Obama ‘08 - Vote For Hope from MC Yogi on Vimeo.
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.
All purchases made on the Artist for Obama Gallery are 100% contributions to the campaign and count toward your overall contribution limit of $2300. Contributions are not tax deductible for federal income tax purposes.]]>
Some exceptional stop motion animation going on here…
As trite as that theme has become, I think it’s important that people, especially the younger generations, know they are capable of many wonderful things, as long as they put forth the effort necessary to attain success and go beyond (I’m looking at you, baby brothers).
This quote from the movie, a paraphrasing of a poem in Marianne Williamson’s A Return to Love, reminded me I need to do more, for myself and for the world:
Our deepest fear is not that we are inadequate. Our deepest fear is that we are powerful beyond measure. It is our light, not our darkness that most frightens us. […] Your playing small does not serve the world. There is nothing enlightened about shrinking so that other people won’t feel insecure around you. We are all meant to shine as children do. It’s not just in some of us; it is in everyone. And as we let our own lights shine, we unconsciously give other people permission to do the same. As we are liberated from our own fear, our presence automatically liberates others.
The original poem contains some other extraneous points that narrow the focus of this well-crafted passage, and don’t believe they add to the intrinsic value of what’s being said here. Nor do I personally believe that having this attitude requires your being a person of faith—just that you want to make the world a better place by being yourself.
I dedicate this post to my wife, my family, and my friends who are already bright beacons in an increasingly dim world. But especially to my immediate family, who I love very much, and who I hope to see move far beyond the current rough patch they are experiencing and continue growing into the strong, shining lights mentioned above.
]]>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!
]]>A portfolio section is finally up and pieces will be added little by little every week or two, hopefully until it explodes.
]]> BrowsersIE6 compatibility is a long way off, so consider IE7, if you must use a Microsoft browser. At present, I don’t have the patience for its intolerance toward web standards… Please consider Firefox or Opera or even Safari.
Also, Movable Type 4 has been giving me fits with its little peculiarities. Comments are open and working again, though the submission process is not as polished as I would like. And security…I’m waiting for the spambots to attack and for my inbox to fill up with moderation notices, if you catch my drift. Anyone with experience in getting MT4’s more robust comment authentication methods actually working, please drop a line or comment.
As time progresses, I hope to have the sidebars for each section a bit more individualized. I’m also working on getting a more stable way of presenting my posts from Twitter (tweets, for the uninitiated). Every time their site goes down, so does the crappy Javascript include that brings the tweets to my site. Some error messages and notifications still appear in the default Movable Type format, and when I have the chance to dissect those .cgi pages, that will also change to fit tff4.com better.
Thanks for your patience!
]]>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.
]]>Yes, you will see some behind the scenes raggedness that I hope to have cleaned up by the weekend. Archive templates are still stuck on the old design and there are no portfolio pieces up as of yet. The incompleteness is not the image I want to convey, as this redesign/realign is part of a long process of self-improvement that I am embarking on. But if it facilitates my being done, so be it.
]]>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.
]]>