Around the web
A List Apart: Articles: CSS Positioning 101
This is a nice primer on positioning. It really is 101, but it’s always good to have a refresher every once in awhile.
CSS3 for Web Designers
One of my favorite designers and writers released a new book yesterday through A Book Apart. I don’t own it yet, but it is definitely on my list.
HOW TO: Successfully Launch a Web Design Startup with Social Media and No Budget
I have been following OBOX and those guys for quite awhile. They are not unlike you and I, yet they have built a successful business. This article talks through a few tips for marketing yourself and your project.
The big takeaways I got from this article is that first to generate a following, you must blog everyday. Build hype in your products or projects by just showing enough to create interest. Another element is to be active on Twitter, Facebook and interact with people through blog comments on other sites. Anyway, a nice read, take a look.
Failure by Design
Failure can not only be a learning process, but will create unexpected and unplanned results. These results can end up solving a problem you didn’t know you had. Nicely written article, don’t miss this one.
Browser UI Update
Last night I worked out a minimal version of the Browser UI. This time, I didn’t use any images so there will be no install script, simply download and load the action and you are good to go.
I plan to migrate all of the browsers to this method, but I figured I would start with the simplest. I’m not 100% happy with this visually but it’s a good start. I am still trying to decide to release this before the premium versions are done, or go for a relaunch situation.
Also on the list is how to handle a few options I want to offer. One being a drop-shadow around the whole thing, similar to how the OSX screens look if you just take a screenshot of one window (command-shift-4, then spacebar), but not that pronounced. The other option being where the action copies a flattened version of your document, creates a new document and applies the browser in that.
Combinations of those options would give me 4 actions per set. What I think is a better solution is to have just 1 action, but instructions on how to turn off certain options.
What do you guys think?
Browser UI
Yeah, so it’s been awhile since I’ve posted. This site is in need of a major overhaul and I’ll get around to it. I’ve had my hands full with a little project. I’ve mentioned it several times and it look nothing like the previous design.
A little over a month ago, I launched www.browserUI.com, since then, I’ve had over 23,000 visitors, the screencast has been viewed over 5,500 times, the free version has been downloaded over 4,000 times and I’ve sold close to 400 of the paid versions. Almost all of the feedback was positive and have only had a handful of issues.
None of my personal projects have ever been this successful, and I think it’s awesome! I am thrilled that so many of my peers find this valuable, valuable enough to pay $3 for it. It really drives me to create more cool things.
However, I am not done with this one yet. I have some changes. I want to start from the ground up and start over. I am not happy with the install process, the time it takes and some technical issues that have arisen from it. I want to make it image independent which means drawing all the elements in Photoshop with the action. I am unsure how this will effect run time so it will be interesting. Also, the free IE6 version hasn’t had the effect I want so I think I will replace it with a minimal-UI version, which is basically a title bar. This is at least a bit more useful for those who refuse to pay $3 for something on the internet.
If you have any other ideas, I would love to hear them.
Setting the default leading in Photoshop
You can set the default (auto) leading in Photoshop by first bringing up your Character Panel, then switch to your Paragraph tab. Click the Paragraph options menu.
Choose Justification from the menu.
At the bottom you can change your (auto) leading to whatever you desire. This works really well for em sizing as it keeps everything relative to your text size. No more trying to figure out what 150% of 16px* is.
* Note: I realize that 16px is not em sizing, but when designing in Photoshop, 16px is usually equivalent to 1em in most if not all browsers now.
Photoshop Browser UI Action
I have been busy designing a site for my browser action and getting the action tested. It should be up in a few days/weeks. Here is the screenshot I posted to Dribbble.
I do plan on asking for a $3 donation to download the action. I will also be offering it free but I am going to put some sort of delay on that. The reason? Because it’s totally worth $3 and because 37Signals (and I) advocates charging for things. I also did not want to limit those of you who don’t feel it’s worth $3 or that you can’t afford it. This is really an experiment to see if this pay model has any merit.
CSS Gradients for Dummies
Recently, I have started experimenting with CSS gradients. It is flexible, fast, requires fewer server requests, and on and on. The bad is that it’s not supported by everyone yet, think of it as progressive enhancement, so it’s not really that bad.
The problem I had when trying to use CSS gradients is that the syntax is confusing and the examples on webkit.org were not clear and were fairly complicated. What I wanted was a simple starting point to, well, start from.
I’ll post the example then I’ll explain it in more detail so you know what’s what.
.item {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ccc),
color-stop(1, #333)
);
}
So first we define the gradient using -webkit-gradient().
The second line defines whether the gradient is linear or radial.
The third line defines where the gradient starts, the forth where it stops, you can use left, right, top, bottom, percentages etc (any way you would position a background image. The above example is a vertical gradient, lighter on the top and darker on the bottom. If you want a left to right gradient you would change it to:
... left top, right top, ...
Color-stop defines the colors and the position of the colors, the first being the starting position and color, the second being the ending position and color. Note that the position can be percentages or a number 0-1, 0 being the starting point, and 1 being the ending point. In the above example we have a starting position defined as 0 and the ending position defined as 1, but we could make them .5 which would be the center. Note: You can define as many color-stops as you want, each with a different color but I wanted this example to be as simple as possible.
The below is an example of what the gradient would look like in a webkit browser (Safari or Chrome):
Wait, what about Mozilla browsers?
So, Firefox 3.6 will support, -moz-linear-gradient and -moz-radial-gradient which works just like the -webkit versions except you do not have to define the “linear” or “radial” in the CSS (since you do this with the name). Firefox 3.6 is still in development but you can download and check out other changes here.
Wait, wait, what about Internet Explorer?
Tough luck, it won’t work. Luckily, gradients are not necessary to a good browsing experience (as good of browsing experience you can get in IE). This folks is what’s known as progressive enhancement. Enhance modern browsers while still providing decent, usable sites for those using outdated browsers.
Webb & Eley on the web
Earlier this week LWT launched a new site for Webb & Eley, a multi-disciplinary law firm.
The logo was designed by Karla Merritt, self-proclaimed “creative evangelist,” photography by Chris Reding and the design and development of the site was handled by Ben Shoults, that’s me folks. Of course that was just the creative side of it, Mary Catherine Phillips is the Account Executive for Webb & Eley, she really helped the project move along at a steady pace.
Check out the site for yourself : www.webbeley.com
100 downloads, new designs and more
So, I’ve been pretty busy. I have been working on several side projects and freelance things the last week or few. I thought I would stop long enough to give an update, show off a teaser of some of my work and to celebrate.
First, let’s celebrate: My 960.gs Photoshop actions have been downloaded 100 times as of today. As someone who’s never offered up anything like this before, this excites me a good deal more than it should.
Second, I am still working on a set of Browser User Interface actions, but this process is more complex since I am having to use a script to install the image files, relink to them and load the action into Photoshop.
Thirdly, Here is a small sample of what I have been working on in my spare time. Let me know what you think.
Around the Web
This a quick post to showcase some sites that I ran across in the last few days that I though were worth mentioning.
A post from Mark Pilgrim showing readers that it’s time to start using HTML5 form features now, they degrade nicely but allow modern browsers to rock the cat box.
A Form of Madness
A great post on creating some awesome user interface elements. Focuses on design down to the pixel level.
Crafting Subtle & Realistic User Interfaces
960 Grid Actions
Always looking to increase my level of productivity, I made a quick Photoshop Action that is based on the 960 Grid System. Instead of keeping track of a template file, I thought it would be easier to just make an action that would do the same thing.
The action creates a new file with (almost) the same dimensions as the 960gs templates. So, what are you waiting for? Download the action, install it in your Presets > Actions folder in Photoshop and load it.