A Little Debugging Magic with HTML’s Base Tag
If you’ve ever been in a situation where you need to make modifications to a page or a site’s HTML, CSS or JavaScript but don’t have direct access to the source code, it can be pretty frustrating. Whether you're working on client’s live site or if you’re helping someone remotely, you have to somehow make the contents of the site editable locally.
There are tons of tools out there to automate the process of crawling a site and downloading all the necessary files. There are Unix command line tools like wget that have plenty of tutorials for downloading websites, and graphical interfaces like Net Vampire for Windows and SiteSucker for Mac OS X. But if you want a faster method with fewer files to download, the HTML spec has you covered.
Continue reading "A Little Debugging Magic with HTML’s Base Tag"
Design For Efficiency: Photoshop Techniques & Templates
Yep, it's me again. The pro-process designer who wants you to use smart objects and break those awful Photoshop habits. Are you noticing a theme yet? I love efficiency. And organizing. And most of all, organizing efficiently. So I've got yet another process-tweaking post for you, and this time it's epicly long and comes with free PSD templates. FREE PSD TEMPLATES, people. And I didn't just write that for the search traffic. They really exist.
This time I'm breaking down my techniques for designing large sites and sharing tools for efficient comp production. I'll walk you through my process, and then you can add your ideas to the mix.
Continue reading "Design For Efficiency: Photoshop Techniques & Templates"
The Juices and The Flows Have Been Diminished
Renaissance: A rebirth or revival; an awakening; a fresh take
Woot... JS libraries, font embedding, CSS3, HTML5, and a heck of a lot of cool stuff is on the table. Designers are laying down some amazing designs, and the strongest stuff seems to have to do with better typography, more custom illustration work, super-elegant interactions and transitions, stronger foundations in user experience, and a return to design fundamentals.
It's awesome. There's huge potential. I'm overwhelmed...
Yep, you talk to a group of designers, and chances are good that a number of us feel we aren't exactly "waking up" with the movement. Somewhere along the way we've stagnated. We're checking out the yellow brick road, ready to dash down it, knowing we've got heart and will, but we feel stiff and rusty. What might have happened?
Continue reading "The Juices and The Flows Have Been Diminished"
Is this form field taken? A jQuery placeholder-enabling plugin
Not too long ago, Trevor wrote a great article on better in-field labels using a handy jQuery plugin. In the course of the article, Trevor points out the new-to-HTML5 placeholder attribute which is available on textual inputs (the input and textarea elements).
As the spec defines it, the placeholder attribute "represents a short hint (a word or short phrase) intended to aid the user with data entry." Seems pretty straight forward, right? If you've filled out a form on the web (and who hasn't?), you've likely seen placeholder text in forms fields. Sadly, they may often be used instead of labels. Placeholder text should work in concert with the label element to provide the user with context, formatting information, or other helpful aid.
So! Now that we know what the attribute is for, I'm here to tell you that you can start using it today in your HTML5-doctype'd web pages. Browser support is still spotty, but you can enjoy the goodness of the placeholder attribute in Firefox 3.7+, Safari 4.0+, and Chrome 4.0+.
For our not-quite-bleeding-edge browsers, I present to you a short jQuery plugin that utilizes the placeholder attribute and enables it (in a manner of speaking) in non-supporting user agents.
Continue reading "Is this form field taken? A jQuery placeholder-enabling plugin"
Academically Speaking: An Interview with Brian Slawson, Design Professor
As a follow-up to "Put Your Portfolio Online" I caught up with University of Florida Associate Professor of Graphic Design, Brian Slawson. In this interview, Mr. Slawson talks about what some of his students are doing to showcase their design portfolios.
[Tom] Are there hesitations that your students face when putting their portfolios online?
[Brian] I don't think our students have any hesitation in putting work online. "Sharing" is commonplace for this generation of students.
Continue reading "Academically Speaking: An Interview with Brian Slawson, Design Professor"
Max Out Your Hit Areas (Everyday Techniques No. 1)
Hi! This the first in a series of simple design & front-end techniques that you can put to use on a daily basis. OKAY LET’S GO!
“The time required to move to a target is a function of the distance to and the size of the target.”
That's Fitt’s Law. Larger, closer targets make interaction faster, simpler, and friendlier. This is especially evident on an touchscreen device with no hover states — the bigger the hit area, the more confidently you can tap, and the better the experience feels. On the iPhone, Apple even extends the hit area of the bottom tabs and highly-used letters to reduce the likelihood of missed taps.
Continue reading "Max Out Your Hit Areas (Everyday Techniques No. 1)"
Ping-Ponging the Design Share 3 Invite
When it was time to design a promo graphic for the next Design Share event we thought it would be fun to do a little design ping-pong. Not so much the competitive type like you see on the Layer Tennis website, but a little design back-and-forth sounded like great fun whatever you decide to call it. We didn't have a theme for the event just yet so we decided to play off the number '3' to start generating some ideas.
2010