Posts Tagged: web design

Sub-pixel text rendering

From Mac/iOS app developer Bjango’s blog, a solid primer on why sub-pixel antialiasing – still fairly common on Chrome and the PC world – is on its way out. This part really surprised me:

WebKit on OS X disables sub-pixel antialiasing when animating, often resulting in a visual glitch when it starts and stops, unless standard antialiasing is set using CSS. OS X disables sub-pixel antialiasing when using CoreAnimation’s layer backed views.

Now I know why some of my CSS3 font animations can run a bit off; turns out it was for good reason.

Designing with code

Designer Jeremy Bell from Teehan + Lax:

Throughout my entire career, every company I’ve worked at has separated designers and developers into separate departments, each focused exclusively on their discipline…Technology is continuously reshaping the canvas on which we design, and yet these two disciplines continue to be treated as disparate.

Jeremy goes onto to map a new approach for their company, one where designers work in HTML, CSS, Git and a fully self contained development environment. If you thought “design in browser” was a fantasy, think again.

Responsive cat

Cute idea. Be sure to stretch your browser from a narrow to wide position to get the big payoff.

Responsive design’s dirty little secret

Web developer John Albin Wilkins on rounding errors in fluid grids:

I put errors in quotes, because the issue actually has to do with the CSS spec. It doesn’t specify how browser vendors should deal with percentages that contain decimal place precision. For example, with a 6 column grid, each column is 100% ÷ 6 = 16.666667% wide. On a 1000 pixel wide viewport (which I’ve conveniently picked to make our math easier), that calculates to 166.66667 pixels per column. Since the spec gives no guidelines, browser vendors are free to make their own rules.

I’ve learned this problem the hard way several times. It’s a frustrating problem, but John goes on to list several great remedies: adaptive (break point)based design, the CSS border-box element and container-relative floats.

Viewport resizer

There are several bookmarklets out there that can do a simple change of your viewport to match the size of common mobile devices, but I’ve never seen it in as slick a package as what Viewport Resizer offers. You can customize the bookmarket to only include the viewport sizes you chose and jump between portrait and landscape views with a single click. It works great on local development files and, while I haven’t directly tested it, is touch friendly as well.

In defense of descendant selectors and id elements

Jeffrey Zeldman:

Say it with me: There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

Pretty hard to argue with one of the web godfathers on this one.

PSDDD

I’m currently a bit more developer than designer in my day job so the many virtues of Dribbble don’t apply to me as much. But the many free resources published there – especially for in house UI design, sketching, and brainstorming, really come in handy. That’s what makes PSDDD so useful. A bunch of free resources available for download, separated out by functionality.

Every time zone

Ever have a conference call with a coworker living far away? Planning a trip to get a sense of jet lag? That requires time zone math. There’s a million native app solutions (e.g. Apple’s dashboard clocks) but I’ve disappointed with what’s offered on the web, until I stumbled on Every Time Zone. It’s a simple one page design with a slider to quickly calculate the time zone around the world.

The infinite grid

Designer Chris Armstrong writing for A List Apart:

When we construct a grid, we’re creating layout boundaries: known relationships and constraints that define an environment wherein an appropriate solution can occur. But when we construct an infinite grid, we’re not just setting the boundaries for a layout, but a layout system, with too many variables for us to nail everything down. If we define the important relationships, the blanks will fill in themselves.

Really interesting read, and something that I heard several times in the UI17 conference I attended last week. In short, don’t design break points and your site’s responsiveness based on current mobile constraints, instead design based on site content.

CreativeMornings: Jason Santa Maria

Jason gives a nice talk here regarding how and when to say ‘no’ to clients. The content is simplistic but given through the lens of the speaker’s diverse experiences it says a lot.