I’ve discovered numerous opportunities and solved many problems by interacting with people on Twitter whom I may never have met otherwise. Never has there been a better example of this, however, than what has transpired over the last month or so: the investigation and removal of a negative item on my credit report because I complained about it on Twitter after the usual channels failed me.
Read the rest of this entry »
WhiteHouse.gov - before and after
Today was a historic day. The nation saw the biggest inaugural crowd ever, the peaceful transition of power (and a massive shift in politics), and — what we web designers really care about — a new WhiteHouse.gov web site.
Yes, at exactly 12:00 noon, just minutes before Chief Justice Roberts and President Obama stumbled over the exact wording of the presidential oath (really, you had just one job today, Roberts — and you screwed it up), the official White House web site switched over from the Bush version (which interestingly just got a redesign a few months ago…not sure why they bothered) to the shiny Obama edition.
All joking about “change” aside, I really do find the new site interesting. For one thing, it obviously exhibits the high level of polish and design sense that all of Obama’s sites have demonstrated over the past couple years. It now includes a blog. It has a clear statement on copyright, creative commons, and the DMCA (very significant for those battling our archaic copyright laws). The whole site is designed to be a platform to support Obama’s pledge for transparent government, and looking at it purely from a web designer’s point of view it’s a great start.
Even looking at the source, it’s clean code. Tags are organized, tend to be properly indented, and CSS classes are named well most of the time. Javascript (in the form of jQuery — my personal fav) is used efficiently and effectively to enhance the experience without weighing down the page. Graphical elements and typography are generally strong and well optimized, with only a few exceptions. It’s encouraging that his digital team takes this much care with the web site — I think it bodes well for all Internet denizens that the new president clearly has a great number of people who “get” the power of the Internet — and the power of good design.
I was digging through some old files on one of my hard drives the other night and came across what I believe is my very first web site design, from my early college days in 2002. I had cobbled together a few web sites before this in high school, but the mockup you see here is the first time I actually planned the whole design in advance with a graphics program (Macromedia FireWorks, in this case). Please keep in mind, this was done by someone with zero art or graphics training, so excuse the atrocious green! MRNonline.net was sort of a blog (way before there was all this great blogging software available), sort of a community site — I ran it for my friends off of a server in my dorm room for about a year, providing news and discussion forums. I wrote the whole thing from scratch using ColdFusion (the first dynamic web language I taught myself…that was the first and last time I used CF), and the whole experience taught me a lot. I’ve designed dozens of sites in the six years since, but this was what really kicked me off on loving web design. Sadly, it’s the oldest surviving piece of my work that I can find — I’ve been unable to locate a copy of the very first web site I built, which I believe was in 1998 or 1999, but I did that with FrontPage so seeing that code might prompt tears of agony rather than nostalgia. 
It’s kind of fun to look back at where you came from, especially if what you find was done at a time when you had no idea that such work might be your career one day. This type of fun digging and nostalgia also reminds me of how important it is to back stuff up — due to a hard drive crash a number of years ago, I lost everything I ever wrote and created for high school. I don’t need that stuff, obviously, but it would be fun to have.
What kind of work do you have really old examples of?
At long last, I have completed major work on my first complete site redesign in almost two years. I’m not exaggerating when I say I went through more than 20 concepts to get here before settling on this, one of the cleanest and simplest. I typically name my design concepts after ancient historical sites or mythical figures (Atlantis, Athens, Diablo, etc), but I couldn’t come up with one I liked that fit this design so I settled on the next best thing: Chocolate. Yeah, I don’t know either.
I haven’t done a redesign of RogersMJ.com since before I finished college (where I earned a decidedly non-design degree of Computer Science). Since then I have started working with real, actual designer-like people. I’ve learned a lot about presentation, and the vast array of designs and content organization methods I’ve run across have influenced my own methods. This design is a personal exercise to see how well I do at keeping the design elements simple and still present the content in an attractive way. Those who have been around these parts before will know that I have, at times, a tendency to get too friendly with gradients, drop shadows, and other visual cues that, while occasionally interesting, can easily overwhelm.
Since my last redesign, traffic has gone from 2,500 page views per month to more than 250,000, and judging by the emails I receive, the comments you’ve posted, and the browser stats you’ve left (most of you prefer something other than IE — you have the infinite, unwavering thanks of a grateful web designer), I’m blessed with a moderately tech- and web-savvy audience. Which brings me to the other, less visual part of this redesign: this blog, this site as a whole, will become more focused on a few core subjects. I haven’t entirely figured out the reorganization yet, but a majority of the content will fall under such categories as web design, emerging technologies and their relevance, internet legal issues and consumers’ digital rights, and probably a smattering of posts about amateur photography.
With a renewed focus on those subjects, I hope I’m able to write more frequently and provide you all with some interesting reading. I also hope I can get some feedback on the new design — good, bad, or otherwise.
There’s a fun little easter egg in the latest version of the popular FireFox browser (currently in Beta 5 for version 3, final release due out very soon): if you type “about:robots” in the address bar, you get the above screen with some fun info about our mechanical friends. All the “facts” are references to various books, movies, and TV shows — The Day The Earth Stood Still, Asimov’s I, Robot, Blade Runner, Hitchhiker’s Guide to the Galaxy, and my personal favorite at the end (“And they have a plan”) is an homage to the cylons in Battlestar Galactica.
How many times have you seen something that had the potential to be a really great picture, but there were just too many people in the way? More times than I can remember, personally. As it turns out, there’s a way to get that shot.
I came across this really cool Photoshop tip the other day while listening to the TWiP (This Week in Photography) podcast. One of the podcast regulars, Fred Johnson, put a little screencast up on his site about how to remove people (or any other non-stationary object) from a photograph. Well, technically, a series of photographs. Basically, take several shots of a scene with the camera in the same location (obviously a tripod would be best, but Photoshop can align the images if necessary), load them into a single layer, and then use Photoshop’s Layer > Smart Objects > Stack Mode > Median. This analyzes the image set and removes the delta pixels, leaving you with a people-less picture. Very cool technique, and something I’m sure a lot of people will find useful.
Ah, nostalgia. Or at least that’s what people in my line of work would call this. Take a look at what a “cutting edge” web site looked like for multi-billion dollar companies just 12 short years ago.
And now a story about something that is near and dear to my heart: web design standards. Wait! Don’t run away…this has the potential to affect everyone on the web, even if they don’t know it.
The internal version of Internet Explorer 8 — the yet-unreleased version of Microsoft’s web browser — has passed the ACID2 CSS compliance test for web standards. This is huge news; allow me to elaborate.
I spend most of my time designing web sites. I design web sites at work, and I do it on the side. Creating the visual component of the web site — the user interface — involves laying out and styling your page elements with CSS (Cascading Style Sheets), a language for describing visual properties like font size, box width, color, background images, position on the page relative to other elements, etc. It should be simple, and in most browsers it is. For FireFox, Safari, and Opera, I can hammer out pages with almost no trouble at all. I understand all the parts of CSS and know how they should interact with each other. Internet Explorer, however, has always had its own set of rules. Let me bring up an analogy I wrote long ago:
Now even when Internet Explorer 7 came out last year, Microsoft only improved CSS compliance slightly over IE 6 (58% compared to 52% compliance, I believe; all other browsers are at least in the mid to high 90s). The ACID2 test is a stress-test of a browser’s ability to properly render tons of CSS properties — a browser that passes is considered to have a perfect rendering engine. Ideally, it shows a smiley face built out of dozens of CSS instructions. However, until recently, most browsers showed a garbled mess. If you check out the rendering comparison I prepared, you’ll see that even the current FireFox 2 doesn’t pass the test (although FireFox 3, which will be out early next year, does). For IE to go from that red, bloody mess you see for versions 6 and 7 to perfect for version 8 is…well, it’s almost too good to be true. I’m having a hard time believing it, actually. It’s like peace coming to the Middle East overnight. Or Bush admitting he made a mistake. But I digress…
As I said, this is truly huge news. Web designers such as myself spend an appalling amount of time debugging sites for IE; I estimate that, depending on the complexity of the design, anywhere from 30% to 60% of my total time writing CSS is writing stuff specifically for IE, after the site already looks perfect in every other browser. It’s infuriating and frustrating, because its behavior is hard to predict sometimes. So even though we’ll have to back-design for people stuck with IE 6 and 7 for some time (years) after IE 8 comes out, there is now a light at the end of the tunnel. What does this mean for the average Internet user? Probably better-looking sites in some cases, as people become unfettered by the limitations of IE 6/7, and it definitely means sites can come to fruition faster.
The wording of the IE development team’s blog post (“IE8 now renders the ‘Acid2 face’ correctly in IE8 standards mode“), and their insistence that they aren’t going to break all the existing sites that have been mangled to render properly in IE 6/7, makes me think that the browser will have two modes: legacy and standards. My guess is that it will render in legacy mode by default, so existing pages don’t have to be changed, and then developers can have a special tag at the top of their pages (probably a conditional comment or something similar) that will kick it into standards compliance mode.
That sound you hear? The rejoicing of web designers all across the Internet.
GMail just keeps getting better and better. As if the conversation-style view, instant search, integrated calendar and chat, and the best anti-spam in the business weren’t enough, they just started rolling out IMAP access yesterday, a feature users have been clamoring for ever since GMail was launched. IMAP is similar to POP in that it allows you to access your GMail through nice email programs like Outlook, Thunderbird, and Apple Mail, except it provides a two-way “sync” that keeps your online GMail inbox (and therefore every email client program) in step. So if you read an email through Thunderbird on your laptop, and then pull up your email in Thunderbird on your desktop computer, that message will be appropriately marked as “read”. Until now I have always used GMail’s web interface to access my mail because I use many computers and don’t like dealing with POP’s inconsistencies; that will probably change now.
In related news, I found a post on the official GMail blog saying that in a few months, everyone’s storage space (including Google Apps accounts, finally not stuck at 2GB anymore) will hit 6GB!
What do you call the ‘@’ symbol? Although some people mistakenly call it an ampersand (which is actually the ‘&’ symbol), it may surprise you to know it doesn’t actually have a name. For something we use so frequently — it has to be one of the most often-used non-punctuation symbols in the modern world — it’s amazing that we haven’t come up with a slicker name than “the ‘at’ symbol.”
While designing a user signup screen, a buddy of mine at work asked that very question: what’s the actual name for the @ symbol? We were shocked to realize that none of us knew. A quick Google search turned up some interesting speculation on the symbol’s history; for one thing, there are a disproportionate number of cultures whose nickname for it is animal-related (e.g., the “hanging monkey”). That must mean something…but what, nobody seems to know.
Another theory is that it was developed by medieval monks as a shorthand to writing the word “at”, since it saved them two pen strokes when transcribing books. Man, and I thought modern technology made people lazy.
Finally, my personal favorite is the historical use of the @ symbol as an abbreviation for a unit of measurement, the amphora. It first appeared in a letter written by a Florentine trader in 1536. The amphora described the amount held by large terra cotta jar that were used to transport grain, spices, wine, and probably a whole host of other goodies.
Since the latter story is a much better-sounding explanation than a bunch of slacker monks, and the word “amphora” is just kind of cool by itself, we hereby declare that the @ symbol’s official name shall be “amphora.” Just in case we actually have any power to declare such things. Which we don’t. But hey, this is the Internet…weirder things have happened.
Read: What do you call the @ symbol used in email addresses?
