We're growing into something new. Read More

Mike D

Onepager Dashboard

We're rebuilding the Onepager admin & editor to accommodate a ton of new features. Here's one of the screens, I'll post more as I can. We're going away from glossy and towards a more functional & clean design language.

Finished poster

I've found myself with more free time this week than normal, so I'm trying to take some time to do some design just for the sake of design. Here is something I started tonight. I'm not sure it's finished yet (thinking about adding some rope imagery somewhere in there, but I fear it might get too busy), but I'm just looking for some constructive feedback regardless. I've been trying to keep things more minimal lately, and it's been a lot of fun. UPDATE: I removed the funky type on the word "Dream," fixed some spacing issues, added some depth to the beer, and added the line at the bottom. Thanks to @rylee for the suggestions!

Funding Tree

Just a little graphic to track the progress of a building fund for a local food coop. The leaves would not be printed on the base graphic but would be applied as the funds come in.

<!DOCTYPE html>
	<!-- Conditional statement because older versions of IE do not support rgba -->
	<!--[if IE]>
	<style type="text/css">
			zoom: 1;
	<style type="text/css">
			/* Optional: Set background image so that transparency is easy to see */
			background: #fff url(http://uhaweb.hartford.edu/CASS/unicorn.jpg) fixed no-repeat;
			/* Optional: Set specific size for container */
			position: fixed;
			background: rgb(50,50,50); /* Fallback background for browsers that don't support rgba */
			background: rgba(50,50,50,.7); /* Transparent background for browsers that support rgba */
	<div id="container"> <!-- Container is itself transparent -->
		<div id="content"> <!-- Content is present because of IE limitations -->
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<img src="http://s3.amazonaws.com/kym-assets/entries/icons/original/000/004/006/y-u-no-guy.jpg?1308157550" alt="Why u no" />

Better/kinder transparency in HTML

I just wanted to share my updated method of getting transparency in HTML. I've also got it up in a gist. This method is the result of the help from fellow Forrsters. The original method used a three-div structure to achieve transparency. This method uses the rgba background value, with a conditional stylesheet for IE's shortcomings.

Next iteration, thanks for the feedback!

** I'm modernizing one of my clients older sites. It's going to be a single page with information modals that pop up on 'read more' click/tap. Buttons I'm hoping to achieve using CSS only, and may introduce some animation in the header. ** Thanks for the helpful feedback in my previous post, I've taken it on board - this is the next step.

Technoloje Rebranding & Website

Rebranding and website of a home control and energy solutions company based in the south of Portugal.

Good or Bad?

(Get the app for free: itunes.apple.com/us/app/good-or-bad/… ) I've been working with Kyle Hickinson (the @kylehickinson of Leef fame) on an iOS app that's just been released to the store. It's called "Good or Bad?" and the website is here: goodorbadapp.com/ Kyle did the designs for all of the screens shown. I wrote the Objective-C and the server backend that drives the app. One of the great things about working with a designer who is also an iOS developer is that they know which PNGs can be made stretchable. They also know ahead of time the different kind of PNGs you're going to need for various elements (like UITableView). In Kyle's case he's a really good Cocoa programmer, and so he even knew how to incorporate things like drawRect() to reduce the number of PNGs necessary. What we ended up with was a great design with a very lean binary. There weren't a whole lot of images to manage. If you've worked on a very large iOS project then you know dealing with 100s of incompatibly named PNGs can be a problem. We were both already familiar with all the different icon sizes and naming conventions and PNG formats and layouts, and this made the process very smooth. It's great for your app to have a designer that understands the design needs to work with both portrait and landscape modes. Good or Bad? supports all orientations on every screen. I've teamed up with designers in the past without having this as a consideration, and while we put out a strong design, I think an app whose design locks it into portrait mode only is missing that extra wow that comes from being able to rotate the app to any orientation. The navigation system was Kyle's idea, and is based loosely on the vertical navigation from Twitter for iPad. I implemented the navigation using a heavily hacked version of Brian Collins's BCTabBarController (github.com/briancollins/…), which duplicates the horizontal nav from Twitter for iPhone. At first Brian and I thought it would be possible to simply rotate the element by pi/2 and call it a day. After a short while it was clear that wouldn't work. The hack ended up rewriting the controller to support vertical elements. We also implemented a custom UIAlert that turned out great. It's not as easy to do as you might expect. There are a few custom alert classes out there, but none of them are as mature a project as say, ASIHTTPRequest. I don't think any of the good ones supported different UIInterfaceOrientations. So instead of being able to use an off-the-shelf alert we had to write one from scratch. Implementing the "bounce in" animation that Apple's native UIAlert uses is tricky. We've approximated it very closely, but I don't think we mirrored the animation path exactly. A few people had tried online, but nobody claimed to get it exactly, and seemingly no one had done the work to reverse engineer Apple's private calls. All the features are there now, but Apple rejected the first submission of the app because some of the features were placeholder features. So if you try that in your app make sure that it isn't obvious to the user the feature hasn't been built yet. For example, don't pop up an alert saying the feature isn't there yet. This is the sort of thing that would've been fine if we were making our own website, but it doesn't fly in the AppStore. That's a cost of doing business with Apple, I suppose. In the end I went back and added comments and user profiles, quickly rebuilding some of Kyle's designs into new screens, and the app definitely turned out better for it. The comments are fun to use for a V1. The server backend is written in PHP, MySQL, and Redis. Redis does a few interesting things that would be awkward to do in MySQL, such as generating collections of random elements, specifically the random pool of items that you see, which aren't duplicated. A lot of the Redis code was written for the selfish reason of learning Redis. I don't mix my "learning" projects with my "serious" projects, but for some reason I broke that rule this time. I worried after I had written the Redis code about leaning too heavily on Redis since there was a chance I would have to rewrite some of the code in MySQL later, but having launched a few different web projects by this point, I knew that it was senseless to rewrite before the load demanded it. Even if the methods using Redis proved incorrect later, they would be fine for the launch, and there was always the chance they would work correctly. The backend code is currently running on an EC2 micro instance, with sub-millisecond response times, though that figure isn't particularly meaningful given the size of the user base at launch. Edit: The app is now free. Go get it: itunes.apple.com/us/app/good-or-bad/…


Pure CSS iPad-style overlay

I wanted to practise a little, so I decided to recreate the iPad's dropdown overlay using only CSS3. It works quite nicely and I'm pretty happy with the result. It works best when using Chrome or Safari on Lion, but it also works in other browsers (yes, even in IE 7). Just give it a try or look at the code. Any kind of feedback is welcome. ********* UPDATE ********* I updated the demo. It now uses two more elements, but it works on all backgrounds and you don't have to specify a colour for the CSS triangles. Also, the arrow has a drop shadow too, which makes it look even better. Take a look at the updated demo here.