Archive for the ‘Design’ Category

Fishing for lte IE8 CSS3 goodness

Wednesday, April 7th, 2010

So I’m working on getting a button with a gradient background and a background image to work on a project. Happily, Firefox, Safari, et. al are playing nicely. Sadly, IE isn’t. What’s new right? I’m looking for a work-around so I don’t lose my gradient in IE. I’d like to keep the icon, but right now I don’t see anyway to avoid losing it and just using text.

Anyone have an idea? Code snippet below (Yeah, I know it’s not fully semantic and the snippet blows my layout. I’m working on it, the layout that is.):

.button,
input[type="button"] {
	color: #474747;
	border: 1px solid #bfbdb7;
	border-color: #c9c9c9 #b3b3b3 #9a9a9a;
	border-color: rgba(150,150,150,0.4) rgba(128,128,128,0.4) rgba(77,77,77,0.4);
	font-family: "Helvetia Neue", Helvetica, Arial, sans-serif;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 -1px 0 #8c8a7e;
	-webkit-box-shadow: 0 -1px 0 #8c8a7e;
	box-shadow: 0 -1px 0 #8c8a7e;
	box-shadow: 0 -1px 0 rgba(64,63,57,0.6);
	background: #e8e5de;
	background: -moz-linear-gradient(top, #eae8dd 45%, #c9c7bb 55%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, #eae8dd), color-stop(55%, #c9c7bb));
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorstr=#eae8dd, endColorstr=#c9c7bb)
			progid:DXImageTransform.Microsoft.Shadow(color=#8c8a7e,direction=0,strength=0);
}
.print-button {
	background: #e8e5de url(../images/icon-16-print.png) no-repeat 6px 3px;
	background: url(../images/icon-16-print.png) no-repeat 6px 3px, -moz-linear-gradient(top, #eae8dd 45%, #c9c7bb 55%);
	background: url(../images/icon-16-print.png) no-repeat 6px 3px, -webkit-gradient(linear, left top, left bottom, color-stop(45%, #eae8dd), color-stop(55%, #c9c7bb));
	padding-left: 28px;
}
.button:hover,
input[type="button"]:hover {
	color: #4c7204;
	border-bottom-color: rgba(77,77,77,0.5);
	border-top-color: rgba(150,150,150,0.5);
}

Acid 3 and Mobile browsers

Wednesday, February 17th, 2010

The other day as I was watching the new Blackberry browser demo from the World Mobile Congress, I saw something that astounded me: The Acid 3 test. I hadn’t thought of how mobile browsers did with this test before. Never even crossed my mind. But now it had, and my curiosity was piqued.

So I tested out the browsers on my wimpy TreoPro. Surprisingly, my default (the excellent Iris Browser, aka the new Blackberry browser) had a perfect score! Then came Skyfire (52/100) and IE (I couldn’t tell if the test even started.) I have also downloaded Opera 10 Mobile beta and it scored a respectable 97/100.

Unfortunately my resources are limited, so I don’t have results for other devices and their browsers, except for a friend who ran Mobile Chrome on his Droid on Verzion (93/100). If you could test your mobile browser with the Acid 3 test and drop them in the comments, I’ll put together something that we can all use for reference. I’m not just looking for smartphone browsers like Mobile Safari. I want feature phone browser results too.

The Kelmscott Chaucer

Friday, October 9th, 2009

Kelmscott at end of Kelmscott Chaucer

William Morris and Edward Burne-Jones c. 1890Toward the end of the 19th century William Morris—considered by many to be the father of the Arts and Crafts movement and the first Designer, I think, of the modern age—published what many consider to be a masterpiece of printing: The Complete Works of Geoffery Chaucer. Chock full of stunning woodcut illustrations by artist Edward Burne-Jones, this gorgeous book was published by Morris’s Kelmscott Press in 1896 just months prior to his death. This stunning book continues to inspire designers and artists today, the only problem, it’s hard to find images from it online.

Going back in time about two years ago, I discovered that my then current employer had a copy of it in their library—employee access only. Oh the thrill of excitement I felt when I learned this! Well, it took me a few months to find the time to go visit said library and request the opportunity to view it. The librarian gave me and my fellow co-worker an odd look. We after all worked for at a world-renown medical center, why would we want to see this? It had nothing to do with medicine. (Little did they know…)

After putting on the required cotton gloves, I opened the massive book and we drank it in, page after beautiful page. (It is a big book if you’ve ever had the chance to view it in person, the dimensions are approximately 11-inches x 16-inches and it’s got nearly 600 pages.) An hour later, we went back to our offices inspired, but I had forgotten my camera. Doh!

Fast forward a few weeks later, I’m preparing to leave for a new job and remembered that I wanted to go take some pictures of the Chaucer. So on my second-to-last-day, armed with my trusty point-and-shoot camera and an appointment, I headed back up to the library.

The librarian was different this time. She was also more protective. At first, she offered to let me photograph a “reproduction”. A black and white, half-sized version of the book. Sadly, I started thumbing through it. I looked at the running headers on each page and asked where the red was. Surprised, I was answered that there was no red ink. Countering that, yes there was, would you please check? I was again granted permission to view Mr. Morris’s masterpiece.

Moving as a faster pace that I wanted—librarian hovering nervously, worried I’d hurt the binding—I turned the pages and snapped as many pictures as I could and left. I would have loved to have spent a few hours soaking in the beauty of this book. Returning to my desk, I downloaded and shared with everyone in the office, then set about moving from Minnesota to Utah and a new life.

An illustration from the Kelmscott Chaucer

These pictures have now languished in my photo library for nearly two years. I took them fully intending to share them, but at the same time a little nervous with the quality of some of the pictures. I did rush through when I took them. Well, I’ve overcome that fear. I’d rather share these as a source of inspiration for the larger design community now. Someday I hope I’ll have another chance to personally turn the pages of an edition of The Kelmscott Chaucer. Maybe by then I’ll have a better camera and more time. Until then, enjoy!

Well, what are you waiting for? Go view the photos!

Typeface movie

Wednesday, October 29th, 2008

Typeface is a new documentary about the Hamilton Wood Type Museum in Two Rivers, Wisconsin. Wonder if we can get a screening in SLC?

UX Week 2008 Sketchnotes

Wednesday, September 3rd, 2008

UX Week 2008 Sketchnotes Highlight: Mike Kuniavsky, Mr Ubicomp

A couple of weeks ago, I attended Adaptive Path‘s most excellent UX Week in San Francisco. In an effort to make sure I got the most out of the conference, I went analog with my notes. Truth be said, I’m horrible taking notes on a computer and as I’ve been needing to do more sketching, this proved an opportune time to do that. I’ve put together a Flickr set of my notes, but if you’d like to get the all together I’ve made a couple of PDFs (hi-res and lo-res) to download. Feel free to download them, read and learn from them.

Cat’s out of the bag.

Tuesday, April 15th, 2008

I noticed a slight bump in traffic this morning, looking at my Mint stats it appears that the cat is now out of the bag officially about my joining the NorthTemple crew. It’s an understatement to say I’m very excited to be joining such a great team of designers working on something I deeply believe in. I’ll be there in mid-May.

I’m also leaving behind another talented and fun group of designers at Mayo Clinic who I will miss. It’s been great working with the creative team lead by Dan Brevick. He’s been one of the best Creative Directors I’ve ever had the pleasure of working with. He’s looking for my replacement right now. It’s a great place to work and has some incredible benefits that are hard to find in today’s job market and you’d join a stellar team that is a lot of fun to be a part of. Not only that, you get to work on a wide range of projects that help people live better, healthier lives.

FontStruct

Wednesday, April 2nd, 2008

Very cool online tool for creating your own fonts from FontShop. (Via Hicks.)

URL for navigation

Tuesday, April 1st, 2008

Adam Darowski looks at how using your URL as part of your UI can be helpful for power users. I’ve long used this as a best practice personally. It may take some additional effort to set it up on a larger service, but the long-term benefits of human-readable URLs are definitely are worth the effort.

WebKit achieves Acid3 100/100 in public build

Thursday, March 27th, 2008

Congrats to the WebKit team.