Posts Tagged ‘design’

Pixels Per Inch

Tuesday, August 3rd, 2010

When dealing with screens, the density of the dots that make up your picture is referred to as ‘pixels per inch’. This measures how many pixels, lain end to end, fit along a one-inch line. A screen 10.24 inches wide and 6 inches tall, at 100 pixels per inch, would contain 600 rows of 1024 pixels each. (The diagonal measurement of such a screen would be 11.86 inches, by the way.)

Here’s an example:
Because it’s hard to show high-resolution samples on low-resolution screens, I’ll show you a low-resolution example. This illustrates the difference between two screens; but the size depends on your own screen’s density, so the numbers aren’t absolute.

Take Monitor #1 and Monitor #2. Both are about 11.8 inches; but Monitor #1 has a resolution of 1024×600 pixels (1186px diagonal) while Monitor #2 has a resolution of 341×200 pixels (395px diagonal).
Pixels per Inch. 1186 pixels per 11.8 inches is about 100 pixels per inch. 395 pixels per 11.8 inches is about 33.4 pixels per inch.

Having few pixels per inch means your computer has very little to work with, and the images will be blocky. Having a large number of pixels to work with means your computer can display hairline textures, possibly at the limits of human perception.

Monitor #2 has only 33 pixels per inch, or a little over 1000 pixels in an entire square inch. Monitor #1, meanwhile, has 100 pixels per inch, which is 10000 per square inch. Nine times as much detail!

If you want to see how a hypothetical screenshot would look, see Monitor #1 and Monitor #2.

Some other numbers: Most monitors today are around 100 ppi. Laptop screens might be a bit more high-detail, at 120 ppi or so. At 280 ppi, you’re nearing the edge of human sight. Some people can see more, and others less. The iPhone 4’s screen is about 320 ppi.

So, now that you’ve seen the difference of high vs. low, you’re probably wondering what it all means.
When you look at the example above, you see how the text went from nearly-illegible to crisp and neat. You can probably still see pixels, though, if you looked hard at those letters. In the near future, monitors and screens will all be nearing 300ppi, and those letters will look beautiful. We’ll also have more design options than ‘no line’, ‘thin line’, and ‘thick line’.

Here’s the thing: There is little support for high-density devices.
Windows, the most popular operating system, has only the barest functionality, and is only truly usable on screens with height of at least 720 pixels per hundred ppi (720 for 100 ppi; 1440 for 200 ppi). (Rough numbers, of course.)
Most web-pages automatically set your text to something like 12 or 16 pixels, which is too small to read on a 300ppi screen (think of reading 5px font on your current screen). They also usually set elements of the page to specific pixel widths, which means the proportions will be all wrong and the text will overflow from their boxes.

We need to call on web designers to design for the multitude of screens we have, and to put the power into the browser’s hands. Front-end developers need to work with designers to make their layouts flexible.

Mac Mini

Tuesday, June 15th, 2010

Have you seen the new Mac Mini? It’s a tiny little seven-inch-square box, an inch-and-a-half high. And yet it’s got a Core 2 Duo (2.6 GHz) processor, two slots for DDR3 RAM, and a massive video card, all for $699.

I’ve never bought a Mac, but this certainly makes it tempting.

Communication Design

Wednesday, June 2nd, 2010

I was reading something Dave Seah wrote (; you may want to subscribe to him), and that got me thinking about basic things and definitions.

We’re all familiar with copywriters and editors. But what are they, really? In general, copy is text, though it’s usually used in a promotional manner. ‘Editing’ has a better description:

Editing is the process of selecting and preparing language, images, sound, video, or film through processes of correction, condensation, organization, and other modifications in various media.
A person who edits is called an editor.

Let’s boil that down:

Editing is the process of designing communication.

When you edit something, you’re designing it to fit objectives and requirements. What do you edit? Language, images, sound, video, or film? That’s all communication. As Wikipedia puts it:

Communication is a process of transferring information from one entity to another. Communication processes are sign-mediated interactions between at least two agents which share a repertoire of signs and semiotic rules. Communication is commonly defined as “the imparting or interchange of thoughts, opinions, or information by speech, writing, or signs”.

There are things we share with each-other: memes, shapes, sights, smells; other sensory stimuli. These can be wrapped as a whole and called ‘signs’. Some, like language, are incredibly rich and complex, while others are base and are shared by most humans. Some people have no access to certain signs.

A communication designer takes a message and designs it—readies it for a large, diverse audience and makes the message clear and understandable by encoding it with a variety of shared signs.

Redesigns Pending!

Wednesday, May 19th, 2010

Wow, this design is getting a bit musty. I coded it up sometime last year, probably more than nine months ago. That was before I’d really fallen into typography, so almost every scrap of text on this site is rather… default.

You know how redesigns go. Look forward to my newest iteration in about a year.

I’m also redesigning the website for The Embroidery House. Admittedly, it’s a bit crappy, right now, and somewhat unfinished.
The site was built on a set of styles and structures I built back in the early parts of 2009, when I had no clue what I was doing. I had managed to improve a few pieces of it, but it’s still large and bloated and clunky.

Layout aside, I realized the site also lacked any sort of real design philosophy—for example, keeping links out of the way by creating bands of darker and lighter colours to hide a portion of the page from scanning eyes.
I’m reading more about content strategy, thinking about design principles, and experimenting with ways to collapse much of the page structure into a few different files. I’m going to implement more speedy features, like asynchronous script loading and cache-control headers. I’ve also been meaning to try some @media queries.

I’ve found myself with an emerging frame of mind: Everything needs to be alive. The moment something you create stands still, it’s dead, and will eventually decay. Everything needs constant upkeep, and the eventual overhaul, so that it stays fresh for as long as possible.

There is no such thing as perfection. A beautiful, functional design is only as good as the spirit of the times, and will quickly feel dated. The closer you get to fashion, the easier it is for something to fall behind on the trends. Design is particularly susceptible to this quick aging.

And so: redesign. And redesign, and redesign. Keep everything sparkling, and it’ll remain in the here-and-now.

Art, Design, and Inspiration

Friday, February 5th, 2010

I went to school as a computer programmer (and analyst); and yet, when I started creating websites, I found that design was integral to anything I had to do.

When most people think of ‘design’, they think of art and imagery. They imagine a creative spout of inspiration that makes something ‘edgy’ and new and good-looking.

That’s not design.
Design is the intelligent application of goals around limitations and road-blocks. When you design a page, you’re finding a host of different needs and working with what you have to fulfill those needs.

In this way, design is inherently different than art. Artistic expression is all about reaching into your mind and somehow sharing that with the world. Design, in contrast, is about studying every facet of your work to determine what needs to be done, and how to make it work the best it can. It requires intuition and intelligence and an uncanny knack for seeing every connection.

Next time you’re making something, take a moment to think about how it’ll be used, and who’ll be using it. A good design will take you to whole new heights.

Width, Size, and Accessibility

Monday, August 10th, 2009

If you took a close look at this page, you’ll find that it allows you your default text size, and that you can open the page as wide or shrink the page as thin as you might want.

This is accessibility. You can view this page on a tiny cellphone screen, a smallish old CRT monitor, or the newest 50″ 1080p plasma TV.
(Admittedly, I should give the page a maximum width, but that’s another matter.)

Most pages today, especially if they’re well designed, are fit to a permanent 960-pixel grid. The more over-designed of those also set your text-size for you, in case it was only by accident that you’ve made the text appear larger on your monitor.

When you visit those sites on a screen smaller than 960 pixels wide—plus browser window, plus scrollbar, which makes the total width more like 984px—our good friend Horizontal Scrollbar comes out. Except that he’s not a good friend, and we all hate him.

With newer browsers, you can at least zoom out to shrink the 960px width to a more-manageable 600px. If they’ve set the text to 12px, though, you just can’t zoom out without having the entire page’s text turn into an ill-defined mass of faded grey squiggles.

There are lessons to be learned in all of this: While a great number of people use a screen greater than 960px in width, a fair number have screens of much smaller size. This includes cellphones, iPhones, iPod Touches, very old computers, browsers with side-panels, and extremely large monitors divided into sections.
While many can’t fit 960 pixels on their screens, every one of them can fit 100 percents. Therefore, try to make fluid 100% grids instead of fixed-width 960px grids, and always, always let your users set their font size.

Before and After

Thursday, August 6th, 2009

I just went through my archives, because I wanted to see what happened when in my development of The Embroidery House.

This image [2022×372, 213KB] is a string of all backups, generally made after a big night of fiddling around with things. usually gets backed up once a month, it seems, and has also come a long way.

The Embroidery House creation, from left to right:

  1. February 11th: This was actually a rough draft, which was only meant to show the functionality behind what I was doing: using a primitive AJAX form to load the clothing from an XML file. I got carried away, and tried to make everything look like stitches. Most everything had custom padding or margin, and almost all the style was inline. At this point, I was still mainly a programmer who did web stuff on the side.
  2. February 23rd: Having finished the AJAX, I decided to try beautifying it up. This wasn’t my first day with this design, but I don’t have backups of the other days. Basically, I decided that the site should be sporty, and sporty sites always had bold reds or blues, and usually whites. I wanted to give the site a textured feel, as if it were made of fabric. On February 19th, I had my Great Epiphany and became a web designer/developer. On the same night, I discovered transparency and abused it about as much as you’d expect someone to abuse something he just found. The logo suddenly looked like a watermark, which was appealing to me, but then I was trying to make practically everything transparent, and it just didn’t work. I was going to put a fading-transparent set of coat-hangers in the corner, so be thankful I didn’t. At about this time, I had discovered Doug Bowman’s A List Apart article called Sliding Doors of CSS, at just that point where I was experimenting with making my links more like buttons.
  3. March 4th: I eventually decided that the last style was so disgusting and unforgivable that I scrapped the entire thing and started from scratch (except the styles set up to lay out the clothing). I settled on a minimalist approach, to really bring out the soft cream of the fabric in the background. I made the main navigation blue, because red just seemed stupid. I also made a bit of javascript that loaded up a Google Maps window if you clicked on the address, which I was kind of proud about. My client had finally given me the text for his logo, which I used in a sort of banner text.
  4. March 10th: A week later, not much had changed. I had fixed up the styles a bit, and made the items look more individual. I started working on the UI, so that the site would be actually usable. Some things got re-written, as well.
  5. March 24th: My client finally got an idea of what he wanted the site to look like, and drew up a plan. He wanted sky above, with the menu above the main content area, and a sidebar for showing new items. I chose some colours quickly, but things ended up looking a bit aquarian. I ended up completely changing the style. I was in the middle of converting the pages to PHP, which finished a few days afterwards.
  6. August 2nd: There were other steps in-between, but few of them are stye-based. I went through a phase where there were trees in the sidebar, but the client didn’t like it. I photographed the sky and took samples from that, so the tones should be far truer. I tried to give a gradient feel, to replicate the gradients of the sky. I also tried to keep the images small, to fit with all screen sizes. At some point, I filled the sidebar, redid the copy on most of the pages, consolidated those extra pages (like About and Contact) to a small toolbar in the corner, and added a miniscule floating footer. I redid the entire clothing system to run with php, from a database, and added the options to filter those. I’ve got to add sorting, sometime. At the moment, you can sign in, browse clothing, select the one you want, and add it to a cart. I’ve also added a forum, though it’s yet to be used. I also haven’t actually changed it for about a month, so it’s really more like July 2nd.

Quite a list! I think, if the entire project were to be erased, I’d be able to get everything back up the way it was in a little over one month. At the moment, I’m waiting on the client to finish a list of chores he needs to do to complete the site. I’ve been doing logo work for him, in the interim.


Saturday, August 1st, 2009

Today, I worked all day on a redesign. The old one was just killing me, because I was doing a couple things wrong and the entire thing had kind of crystallized.

I started this one off fresh, with a clean copy of the default theme. I decided I was going to change as little as possible: I moved the sidebar to the top of the code, added some meta-data specific to my site, and changed some of the verbose garbage they spew out when you get to the end of a post, but I otherwise kept it as similar as possible. No new tags for styling, and I used the names the default theme uses.
I think I’ll take out a couple dummy elements that I didn’t have a use for, though.

Overall, I hope this design looks a little fresher and less cobbled together. Instead of relying on each paragraph having a container class to give it padding, I’ve built it into the table. I’m not using really weird column floating, and my stretch-to-bottom works without using infinite negative margins (those things are a nightmare in IE7).

I had to think a while on the best way to store the files. I’m using WordPress, so the themes are stored deeply in some sub-sub-sub-directories. I was wondering if I could just point the themes to the main folder, but eventually decided to keep CSS and CSS-based images in the theme folder, with everything else in the root.
WordPress uses the root (or rather, which ever directory you specify as WordPress’es root) as the context, and travels from there to find images. CSS, however, always travels from the CSS document. If you keep images in an ‘images’ folder and CSS in a ‘css’ folder, you’d reference ‘images/image.png’ from your code and ‘../images/image.png’ from your CSS.
Since everything but the CSS was working from the top level, I decided to keep everything but the CSS right there.

So I think I’ve got a less hackety them, now. Maybe it’s time for Cozy Cabbage to get a makeover?

Oh! Adding tags on a new post works again, now. I was having difficulties.

Buttons: Part 2

Saturday, May 30th, 2009

I guess I was younger, back when I made my first set of buttons. I went back to them today, and found that they didn’t work in other browsers. Also, I wanted to see if I could make them with HTML (seems like my latest craze).

Webkit is stuffed full of strange and amazing tags that let you set background gradients, text shadows, rounded corners, rotations, and pretty much anything else you could want. It’s missing outline-radius, though, which meant I had to use two divs to create the button I had designed in Paint Shop Pro. And a span. But that’s all!
It had two borders, each with a small amount of radius, a linear gradient background, :target tags so it looks like you click it, text shadow to get the 3D appearance, and whole bunch of regular old CSS2 and CSS1.

When I was done, however, I realized that, while it still worked in other browsers, there was no background. Yet again, I had made something that was only viewable in webkit.
I tossed the gradients from my image buttons into another image and used that as a background for everything not-webkit, but there’s a bit of white sticking out of the bottom. Things just aren’t lining up the same in every browser, which is a pain to work with. I’ve never really needed to worry about 0.02em before today. It turns out that’s a fair amount.

Anyway, I’ve got the newer version here for your perusal.
(As if I’m submitting it for your approval, or something.)
As I said before, it looks best in Chrome or Safari. The little font-changing button doesn’t seem to work in Firefox, for little or no reason. It looks stupid in IE7 and lower, because there’s no :focus selector, which means it’s not really a button.

What am I going to do with it, now? I saw some great article about progressive enhancement that laid out about five images beside eachother, and each one showed a more feature-rich page in a different browser. In that light, I think I’ll try my hand at making some sort of tab that turns into a great-looking button when you view it in a more advanced browser.
It appears Firefox lacks support for things Webkit and Opera have, like text shadows. 3.5 is going to be an important release.

Also, I’ve noticed, lately, that I refer to Firefox, Opera, and Webkit, because it seems a bit redundant to mention both Safari AND Chrome when talking about rendering. I’ll talk about one or the other when it’s about browser features (like how I’m jealous of Safari’s document inspector), but otherwise I’ll just refer to the Webkit engine.

So this whole day has been an exercise in jQuery. I’m trying to find out how to get certain elements from the context array (whatever it’s called). It seems .get() doesn’t allow things like the .text() tag or the .html() tag. Maybe if I wrapped that in another jQuery object…

IE6 T-Shirt

Thursday, May 21st, 2009

* html * { display:none; // IE6 Fix }
That would go wonderfully on a t-shirt. I think I’m going to get it done.

I originally saw it in a comment on someone’s blog, a month ago. I tried looking for it, but I can’t remember where I saw it.

I’ll have to think up some other funny t-shirt designs, and then start a little online store.