Posted by Erik Phipps on November 30th, 2009 at 08:39 pm.
I recently uploaded a very basic business card style website to www.erikphipps.com (which I forgot I even owned!). The idea came to me when a co-worker sent me a link to a one page website for one of the people behind Vimeo (and other websites). I did some research and found a whole bunch of interesting business card sites. My requirements were pretty simple:
- include multiple methods for contacting me
- incorporate microformats
- use clean, modern code that is flexible enough for quick styling
- use progressive enhancement
- create a strong design and organize intelligently
- share a little something about myself
It took me all day last Saturday to design and code, but I finished in time to enjoy a beer or two and watch a movie. Please take a look and and post your feedback. Be sure to dig under the hood as well if UI design is your sort of thing.
Please view the page at www.erikphipps.com.
Posted in JavaScript, Uncategorized | No Comments »
Posted by Erik Phipps on August 25th, 2009 at 09:35 am.
I just got some new business cards!
My new business card, front.
My new business card, back.
I plan on using the new logo design and colors on my blog some time in the near future after I wrap up a freelance project.
Posted in Uncategorized | No Comments »
Posted by Erik Phipps on August 24th, 2009 at 08:00 pm.
I’ve been meaning to post my first online design portfolio for some time now. The site was built 6 or so years ago around the time I was transitioning from being a print graphic artist to a full time web designer. It’s chock full of table-based static html websites, club flyers, and random flash goodies. I should also warn that some of the links to off-site websites no longer work and it breaks in certain browsers. Enjoy!
Posted in Personal, Web Design | No Comments »
Posted by Erik Phipps on March 01st, 2009 at 04:57 pm.
With the release of IE8 RC1, I’ve realized that my supported browser testing environment is sadly lacking. The best way to create a testing environment with all the supported versions of Internet Explorer is to use the free virtual machines supplied by Microsoft themselves. In order get full use out of the virtual machines, I’ve decided to install the browsers that I don’t use on a regular basis (Safari, Opera, etc.) on one of them. No need to clog up my physical machine with extra applications if it can be avoided. One drawback is that the Virtual PC’s are time-bombed, but it doesn’t take much time to re-install the four or so browsers needed.
Here is my setup:
Physical PC
Physical Mac
- IE7 (comes installed on Virtual Machine)
Notes:
Why IE7 virtual machine? IE8 RC1 has both IE7 and IE8 rendering engines but some differences do exist between the way IE7 renders and the way the IE7 engine embedded in IE8 renders. Therefore, the IE7 Virtual Machine is necessitated.
Virtual machine hosts file. For the virtual machines, you’ll need to add any local development sites to the virtual machine’s hosts file.
192.168.1.103 dev.myblog.com
192.168.1.103 dev.favoriteclient.com
192.168.1.103 dev.someothersite.org
The physical machine’s IP can be found by running ipconfig /all at the command prompt.
IE7 server error. I also had to disable the IE7 add-on named Diagnose Connection Problems in order to hit certain sites in my development environment.
Tags: supported browsers, user interface design
Posted in Development tools, Web Design | No Comments »
Posted by Erik Phipps on February 20th, 2009 at 12:44 am.
In a case that brings back a feeling of dread in my gut similarly to the judge fancy-pants fiasco, a large law firm has successfully shut down a small start-up who simply posted some run of the mill hypertext links. The lawsuit stated that the start-up was committing trademark infringement. Subsequently, I have infringed five times in this short post alone! Read on at the link below…
Linked Out - A case that threatens the right of Web sites to link freely.
Slate, Via The Consumerist
Tags: links
Posted in Observations | No Comments »
Posted by Erik Phipps on February 04th, 2009 at 10:28 pm.
I ran into the dreaded IE7/IE6 z-index rendering bug today. I knew it was going to show its ugly head once I began troubleshooting the UI component I was working on, but little did I expect it to slide itself behind nearly every element it was supposed to cover! I contemplated a jQuery solution but the thought of targeting so many different elements made my head spin.
I started running the causes through my head; position is relative, IE 7, target layer opens below event element…and then it hit me! Simply position the layer above the event triggering element! It worked because everything above the relative container was rendered before it in the source html. It was like manually reversing the z-index with jQuery except, since it was going in reverse, the browser had stacked the items correctly! Luckily the component I was working on had both the space and design to accomodate such a solution.
Tags: Web Design, z-index
Posted in CSS, HTML, Web Design | No Comments »
Posted by Erik Phipps on February 04th, 2009 at 09:10 am.
When building HTML/CSS pages or components, I usually follow specific steps in order to keep my code clean and concise. The trick is to start with the base foundation and then slowly drill your way down to the very smallest inline element. These steps aren’t set in stone of course, and I often mix things up due to extenuating circumstances.
- Create raw html code with only the most basic tags and high level block divisions. This step is important to finish first so that anytime after it is done, the markup can be passed on to a developer. Don’t add ANY CSS until you are done!
- Start applying structural styles first to get the basic layout worked out.
- Apply any background images on the high level structural elements and/or body.
- Apply non-color styles such as padding, margins, font-size, to block level elements, then inline elements if necessary.
- Apply final colors and finish any fine-tuning
Also, don’t forget to test in all supported browsers after each step.
Tags: Code, CSS, HTML
Posted in CSS, Code, HTML | No Comments »
Posted by Erik Phipps on February 02nd, 2009 at 09:54 pm.
The title of this post says it all, but I’ll explain further. I was doing dishes while Naomi was struggle to find some plastic food containers to put our lunches in. She continued searching, all-the-while complaining that we had too many miss-matched pieces, and that was when it struck me. She makes the same exact complaint when sorting her socks!
Tags: observations, Socks
Posted in Observations | No Comments »
Posted by Erik Phipps on January 29th, 2009 at 10:30 pm.
I needed a fail-proof Internet Explorer 6 JavaScript sniffer and it seemed like everything I Googled warned of possible scenarios where it could possibly not work. Then It struck me that since I only needed to detect one version of Internet Explorer I could make a very simple script using Internet Explorer’s conditional comments.
I know what you are thinking, that JavaScript sniffers are outdated and go against all that is web standards. I agree. However, as IE6 fades into the past, isn’t it time we started ignoring instead of bending over backwards for its lack of standards support? This is where a JavaScript browser sniffer comes in!
Others have probably used this technique and expanded it to other versions of Internet Explorer as well. For this post, I am just going to discuss the IE6 version since it is very simple to expand it to all other versions of IE.
Drop this javascript snippet in a script tag in the head of your document:
var browserSniffer = {isIE6 : false}Then, inside an IE conditional comment targeted at IE6, change the value of isIE6 to “true”. Like this:
browserSniffer = {isIE6 : true}What you end up with is a non-global variable that is always equal to false unless the browser is IE6, then it is true. You can then easily dis-invite IE6 to the web standards party!
if (browserSniffer.isIE6 == true) {
// fix some bug in IE6
}
else {
// Do something sweet in other browsers
}Standalone example - IE6 conditional comment javascript browser sniffer
Tags: example, JavaScript
Posted in JavaScript, Uncategorized | No Comments »
Posted by Erik Phipps on January 28th, 2009 at 11:57 pm.
Good old Quirks Mode. It’s like an undead being slumbering in a forgotten sarcophagus waiting for some unsuspecting designer to stumble upon it. A few weeks or so ago, I began a UI project that, over the years, was designed for Internet Explorer’s Quirks Mode rendering engine. I hadn’t worked on markup for Quirks Mode for over a year and it didn’t take long for it to drain me of all my web standard’s complacent life-blood! Sadly, this project is still not finished with and will surely turn me into some blood-thirsty zombie-oid.
Tags: Quirks Mode, user interface design
Posted in Observations | No Comments »
