はてなブックマーク

Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. I’ve usually skipped over the topic of vertical centering, since there are some good posts already out there that are easy enough to find, but recently Bikram commented reque

With the move toward responsive websites, designs are being pushed to the prototype stage sooner in the process. We’re designing more in the browser. Or are we? Do Photoshop comps still have a place in the design process? Depends who you ask. Last week Sarah Parmenter published some interesting thoughts about how she can’t design in a browser. The gist of her post is that once she opens a code edi

Setting type involves choices that create proportional relationships in your text. Done well and your text will be both easy and desirable to read. As responsive layouts adapt to varying screen widths, one of these choices (line-length) changes. To maintain the same proportional relationships other aspects of the type need to adjust. Unfortunately the best solution to maintain proportions is not a

Once you get comfortable developing flexible layouts and moving around the big boxes of a responsive design, your attention will turn inwards toward the smaller boxes inside the big picture containers. First among those will likely be navigational systems. As you work with responsive sites you’ll quickly discover that the navigation bars and menus you create for a widescreen browser don’t work so

The most obvious way a responsive design changes is in its layout. Multiple columns become a single column. A sidebar drops below the main content. One block of design elements becomes integrated with another. Understanding how to create flexible and adaptable layouts will probably be the first problem you work to solve when moving to responsive design and a number of patterns have emerged for how

A few weeks ago in the comments on my post about css formatting, Brett and David pointed me to a couple of articles and a presentation I hadn’t yet seen. All had interesting ideas about css practices and I thought I would offer some of my thoughts on them. One of the articles, Don’t use IDs in CSS selectors?, makes the argument for using classes over IDs as css styling hooks. Since I covered anoth

One of the few things that isn’t as simple to do with css as it should be is creating columns of equal heights. A variety of methods do exist, each with its pros and cons and I want to present 4 methods here. Let’s think for a moment about what we mean by equal height columns. We generally don’t mean that we want the content inside each column to be of equal height. If that were the case there rea

Browsers typically use 16px as the default font-size for body text so 2em = 32px = 12pt, but it’s easy to realize how different these values will be if you change the font-size on the body or start setting the size for the <h1> tag. Another common example of different browser defaults are lists. By default lists are usually indented, however one browser will do that by giving the list some margin

Several layout patterns are often recommended to take advantage of how people scan or read through a design. 3 of the more common are the Gutenberg diagram, the z-pattern layout, and the f-pattern layout. Each offers advice for where to place important information, but I think these patterns are often misunderstood and followed without thought to what they really describe. I want to walk through t

Imagine a boulder leaning too far over the cliff’s edge. Seeing that boulder you think it should come crashing down the mountainside. It’s out of balance and you feel the tension of the impending crash. A similar feeling happens in your visitors when the composition of your design is visually out of balance. In a couple of previous posts I talked about visual balance and in each I briefly mentione