Archive for the ‘Design & Development’ Category

by Joshua Mauldin

Modern Pictograms

modern pictograms

I’m a big fan of making everything my work compatible with whatever resolution a device may have. Whether someone’s browsing on a 3Gs, iPhone 4 or an iPad, I’ll want the icons that I employ to look the best they can.

Right now, I use media queries to do that; it’s fun and pretty, but adds a a little weight to the site. That’s why I was especially stoked to see that someone put some icons together in a font. This lets you put in one icon and not have to worry about exporting a larger duplicate.

They’re free, too. So grab them. I’m itching to try them out myself.

Modern Pictograms – The Design Office.

by Joshua Mauldin

Should websites look the same in every browser?

do websites have to look exactly the same in every browser

I get this question a lot, and wanted to give a brief explanation. In short, no, they don’t. I’ll sometimes point users to Do Websites Need To Look Exactly The Same In Every Browser?, but of course more detail is usually necessary. So, here it is.

Why not? Because each browser handles displaying elements differently; often it isn’t the best use of your client’s money to give users the same pixel-for-pixel experience on every browser.

What’s important is something called graceful degradation, because it focuses on letting users access what’s important—the content—regardless of what their browser supports. The best browsers get to display the best features like drop shadows, rounded corners, sweet CSS-based animations and other goodies. Browsers that can’t support those still get the best experience they can afford; sometimes that means no rounded corners on your buttons (hi, Internet Explorer 7 and 8 users).

Of course, it’s possible to add these things after the fact with jQuery and the like, but I’ve found it really just makes things cumbersome when you go to update something a year or so down the road.

You also need to ask yourself if supporting an older browser is right for your site. Take a look at your Google Analytics reports (you do have that, right?) and see what percentage of your visitors use Internet Explorer, and what percentage of them use older browsers like Internet Explorer 7 (or 6 even). Depending on the size of your site, 3% may be the magic number for dropping IE6 support. Other sites it may be 15%. It really all depends on how many visits and page views you get per month from that browser.

It’s nice to know that since Microsoft, Chrome and Firefox (Apple, you out there?) are turning on auto-updates, since discussions like this will one day be irrelevant. Seriously, thank you, Redmond.

While it’s important to consider your users, you also need to make sure you’re using looking forward and using the best technology possible for your site. If you keep looking back to support older browsers, your site’s current version won’t stay as fresh as it could.

by Joshua Mauldin

Don’t Give Your Users Shit Work

no-thanks

via Zach Holman

Some people still like shit work. They can spend an hour moving Twitter accounts to special Lists, and then at the end of it look back and say “Boy, I spent an hour doing this. I really accomplished a lot today!” You didn’t. You did shit work.

It’s great that Facebook finally got user lists right: they’re smart, useful and respectful of users’ time. Google+ makes it tough for users to get started by requiring them to add friends to circles. I don’t want to do that (and definitely not at first), I just want it to work. Which is why I’m still not really active on Google+. Twitter’s implementation of lists is ok, in that I can still follow people I want and not be forced to think about making a list.

While the article references how social networks integrate lists, there are so many other ways users get stuck with menial tasks. Filling out forms, categorizing information, phone trees, etc. etc. It’s boring and I’d rather be doing more interesting things (read: checking out funny photos of cats).

Things are looking up though. Our mobile devices are handling organizing our music, photos and documents, so we don’t have to worry about where/how we store all our little things if we don’t want to. We need more things trending in this direction.

How can we help this, as it relates to building apps and websites? Build things with the user in mind. They’re busy and don’t appreciate their time being wasted. They just want to get in and get out, so help them along the way as best you can.

by Joshua Mauldin

Why Putting Form Labels on Top Matters

forms

I love making a good form. Seriously. Simplifying the form’s content and aligning all those elements are like playing with little bits of code-based Legos.

So many forms are poorly thought out on websites, and some just need a little more love; I think forms are as important as typography for sites and apps which rely on them as big way to get information from visitors.

UX Movement posted a great article, Another Case for Using Top Aligned Form Labels, which reinforces my why forms should have top-aligned labels.

In short:

  1. It’s simpler for mobile users, especially when they zoom in on a page. (See the above graphic)
  2. International users who translate your site labels may break your design when viewing it in another language.
  3. Top-aligned labels (when the form is designed correctly) are quicker to read than left-aligned labels
There are other ways of handling labels, such as using placeholder text, and that’s handy if you need to have a very simple and short form.
Since I’m a complete nerd, you’ll probably hear a lot more about forms on here as time goes on.