Tag Archives: Design

iPhone 4 Gets a 326ppi Screen: What Does this Mean for Web Design?

Jun 25, 2010 by Matt | Posted in Design 3 Comments

The new iPhone 4’s screen may be the same size as its predecessor’s, but the resolution is much higher. 326 pixels per inch, versus the 160ppi of the previous models. (This works out to pixel dimensions of 960×640 for the new model and 320×480 for the old, but that’s not really relevant to this post.) 326ppi is roughly the same resolution as is used in printing images, as opposed to the 72-96 pixels per inch that most web designers design for.

Already, if you view an iPhone screenshot on a computer monitor, it will look strangely oversized due to the difference in resolution. The new “retina display” will make the effect further pronounced.

My question is: with phone displays increasing in resolution, can we assume that desktop and laptop monitors will follow? Will it become more common to see full-size screens with upwards of 300ppi? It might cause some problems for designers at first, but it will make for more richly detailed web designs eventually.

Google Font API

May 20, 2010 by Matt | Posted in Design No Comments

Google is taking on projects like sIFR and Cufón with their new Google Font API. A simple line of JavaScript lets you load a font family from their directory of open source fonts, allowing you to safely reference it within your CSS.

Here is an example:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo">
<style type="text/css">
body {
font-family: 'Cardo', serif;
font-size: 24px;
}
</style>

It’s simple, and it looks like it works cross-browser pretty much. Hopefully we’ll be seeing more supported fonts in the future. And please, don’t abuse Lobster until it becomes the next Comic Sans.

Michael Martin of Pro Blog Design to Launch PliablePress

May 6, 2010 by Matt | Posted in WordPress 3 Comments

On May 10th, Michael Martin, the blogger and designer behind Pro Blog Design, will launch his latest business venture: PliablePress.

PliablePress is going to be a purveyor of quality WordPress themes, particularly ones that “aren’t simple little themes that you can turn out in a weekend.”

The themes will all be based upon the custom “Chameleon” framework. It offers some functionality along the lines of Thesis or the WooFramework, letting the end user make customizations without digging into the template files.

Even though all of our other themes use Chameleon as a groundwork, you can use it on its own as well.

On its own, Chameleon is an ultra-clean, professional looking site. You might find that it’s already everything you want in a web design

I’m looking forward to seeing what the PliablePress themes, and the framework itself, will be like. It should be interesting.

Internet Explorer 9 to Render Pages with WebKit

Apr 1, 2010 by Matt | Posted in Software & Scripts One Comment

In a surprising turn of events, Microsoft announced that the upcoming Internet Explorer 9 would render pages with WebKit, the open source rendering engine developed initially by Apple. (Google’s Chrome browser uses WebKit, as does Safari.)

CEO Steve Ballmer declared the move to be “a wonderful strategy that will finally place Internet Explorer solidly ahead of the competition.”

The change was unexpected, given the company’s long history of less-than-perfect support for web standards and general disapproval of open source software, though the move to WebKit may be the start of a new, friendlier Microsoft.

Web designers have been voicing their approval, though surprisingly there have been a few opposed to the change of rendering engine. One company in particular, a design firm known as Plaid Mango Design, claims that the move to WebKit will cost them 40% of their income, which is made primarily from the extra fees they charge to develop CSS hacks to enable Internet Explorer to render their designs properly.

Bazinga! April Fools!

CommentBits: WordPress Comment Templates for Cheap

Mar 19, 2010 by Matt | Posted in WordPress One Comment

Styling comments isn’t exactly the most fun part of building a new WordPress theme for your blog. That’s the reason for CommentBits. For $7 you can get a pre-made comment template, complete with PSD files. Or you can get a lifetime membership, with access to all of the templates, for a one-time fee of $50.

It’s not for everyone, but it’s a nice niche business. They only need to roll-out a new template once in awhile, which is considerably easier than a whole WordPress theme, and process sales. The price point is low enough to be an impulse buy, too.

I wonder if we might start seeing more sellers of small theme components in the future?

Envato Redesigns Tuts+ Sites Again

Mar 11, 2010 by Matt | Posted in Design No Comments

Once again, Envato has redesigned their Tuts+ blogs. The changes are primarily evolutionary, though there is a big difference. The new layout features a wider content area and a stronger focus on larger screen sizes.

One of the first things I noticed was that the sites’ advertisement strategy seems to have been rethought. There are no more large leaderboard or 250×250 banners; instead, there are only 125×125 banners. They sit at the top of the narrow sidebar and run down the side of the page in a single column. It actually looks pretty good. They’re out of the way, yet still visible enough to be sought after by potential advertisers.

Continue reading →

Web Design for Global Markets

Feb 12, 2010 by Matt | Posted in Design No Comments

The web design process is very much about how your site ‘looks’ and ‘feels’. Most people over the age of twenty five will remember – fondly or otherwise – that the Web was once awash with sites from ‘designers’ in the very loosest sense of the term: dancing icons, annoying jingles and bizarre color schemes cobbled together to promote…well, something that perhaps wasn’t instantly obvious.

There are still countless examples of such sites on the net, but with a generation growing up with the internet on tap, a more savvy, switched-on designer has emerged. And many of those that were around in the early days of the World Wide Web either gave up the ghost, or learned what web design was all about. And with countless web applications helping to simplify the design process for non-programmers, sophisticated online hubs are more prevalent than ever.

But it’s all too easy to get bogged down in the visual aesthetics of your website. Indeed, the very second you launch your carefully crafted website into cyberspace, your efforts are visible for the entire world to see. Cyber surfers from Seattle and San Francisco, to Sweden and Spain all have equal, real-time access to your personal pages. And with that in mind, the need to build your website for a global audience is vital. However, multilingual web design is an art in itself.

Continue reading →

Have You Tried “The Smashing Book” Yet?

Dec 17, 2009 by Matt | Posted in Design 3 Comments

Smashing BookHave you tried Smashing Magazine’s The Smashing Book yet? I haven’t, but the full-color 313 page paperback is very tempting at it’s $29 price. Most computer-related books are much costlier than that, and they’re not by an online publication notorious for “smashing you with the information.”

The topics covered include “The Art And Science Of CSS Layouts,” web typography, “User Interface Design In Modern Applications,” usability principles, color theory, branding, and a brief history of Smashing Magazine.

They have some scans and a PDF sample chapter on the website, which look pretty good to me.

Have any of you read the book? Is it worth the money? It seems like a promising book to me, and I’ve been wondering about it lately. (Digging into WordPress, as well, as caught my attention.)

Usability Tip: Link the Logo

Dec 14, 2009 by Matt | Posted in Design 2 Comments

Here is a basic, and easy to implement tip, that will do wonders to make your website easier to navigate: Link your logo/banner to the front page. If a user clicks on the logo, they should wind up on the home page of the site.

This is a standard convention, and users generally expect it to hold true on any unfamiliar site they visit. It’s like having the scrollbar on the right, and the back button on the left, of the browser window. They’re common navigational techniques, and it pays to do what your visitors expect.

Go and visit five websites that you access on a regular basis. How many of them follow this convention. I’ll bet at least four of them do.

If your logo doesn’t go anywhere when you click it, take the five minutes required to wrap it in a hyperlink.

The CSS3 “Super-Awesome Button”

Dec 10, 2009 by Matt | Posted in Design No Comments

Tired of messing around with image files to create tasteful (and expandable) button graphics? Why don’t you just use some CSS3 techniques to build them on the fly? Smashing Magazine’s Pushing Your Buttons With Practical CSS3 describes how to use box-shadow, text-shadow, and border-radius to create buttons out of pure CSS. Then they take things a little further with some animated WebKit glow effects.

Oh, and the article also shows how to create the custom buttons that Google uses for WebKit browsers.

Smashing Magazine's CSS3 Buttons

What would be do without Smashing Magazine? :)