In the course of expanding my documentation of color values, I failed to find a table that listed all 147 SVG-and-CSS3-defined keywords along with the equivalent RGB decimal, RGB percent, HSL, hexadecimal, and (when valid) short-hex values. There were some tables that listed some but not all of those value types, and one that listed all the value types (plus CMYK) along with a few hundred other keywords, but none that listed all of the CSS keywords and value types. And none that I saw used precise values for the RGB percent and HSL types, preferring instead to round off at the expense of some subtle differences in color.

So I created my own table, which you can now find in the CSS area of meyerweb. Most of it is dynamically generated, taking a list of keywords and RGB decimal equivalents and then calculating the rest of the values from there. The presentation is still a work in progress, and may change a little or a lot. In particular, if I can’t find a better algorithm for determining which rows should have white text instead of black, I’ll probably shift away from the full-row background colors to some other presentation.

My thanks to Tab Atkins for his donation of the RGB-to-HSL routine I adapted; and to the people who responded positively on Twitter when I mused about the idea there.

As always: share and enjoy!

DAN BENJAMIN is my guest on Episode No. 70 of The Big Web Show, the weekly podcast on “everything web that matters.”

Dan is a broadcaster, screencaster, writer, software developer, designer, and entrepreneur. He is the founder of 5by5 Studios, an internet broadcasting network where he hosts a handful of shows with people like John Gruber, Merlin Mann, and me. Dan is the author of Hivelogic and has written for A List Apart and O’Reilly.

For almost two decades, Dan has created publishing tools including those which have powered A List Apart and 5by5. He devised the Email Address Enkoder, co-founded Cork’d, and founded Playgrounder. The latter two have since been acquired by Gary Vaynerchuk and Uncrate, respectively.

Listen to Episode No. 70 of The Big Web Show, featuring Dan Benjamin.

Subscribe to The Big Web Show

The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more.

Get episodes delivered to you automatically:

• Audio RSS Feed
• iTunes Audio

Photo © 2011 Bill Wadman

  

Many dismiss copywriting as something that ad agency people do. Truthfully, all of us need to pay close attention to copywriting if we want to achieve our business objectives.

The goal of a "regular" text is to inform or entertain. The goal of Web copy (and ideally your website in general) is to get people to do something—to sign up, make a purchase, or something similar. Hiring a professional copywriter can be very expensive, which is one of the reasons why this is a valuable skill to have yourself.

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer. Most of you reading this already know all this and already think about it each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.

A CSS menu with an animated "spotlight" background effect, using CSS3's border-radius property and transitions.

  

Responsive design is the hottest topic in front-end Web development right now. It’s going to transform the Web into an all-singing, all-dancing, all-devices party, where we can access any information located anywhere in the world. But does responsive design translate well from the text-heavy Web design blogosphere to the cold hard reality of commercial systems?

Rumors came through our office grapevine that management was looking to revamp our mobile presence. There was talk of multiple apps being built externally that could be used on some of the major mobile devices.

This PSD contains three different styles of to-do list, each with a unique look and feel, and intricate detail. It’s also included as a high resolution “retina ready” PSD for use on mobile devices.

This design was featured on the Friday 18th of May 2012. It falls under the category of Web App, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

A logo concept with style, colour, gradient, and simplicity.

This design was featured on the Friday 18th of May 2012. It falls under the category of Logo, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

Bright, colourful, and making great use of space within the design. The map located in the footer is also a unique touch!

This design was featured on the Friday 18th of May 2012. It falls under the category of Charity, and has a layout style of Grid.

If you'd like, you can visit this site, or view all our other featured designs.

As all widely used web browsers (unless you still consider IE7 as being widely used) now support the :before and :after pseudo-elements along with the content property, using those pseduo-elements has become more and more common.

There are many clever CSS tricks they can be used for, like implementing a particular design without having to insert extra markup into your HTML. There is one catch though, and many developers seem unaware of this: several screen readers will speak content that is created this way. VoiceOver does (in both OS X and iOS). NVDA does when used with Firefox, though not with IE. I made a CSS generated content demo page so you can try it yourself.

Read full post

Posted in Accessibility, CSS.

Copyright © Roger Johansson

  

If you're just getting started with WordPress, or have been running with default functionality for a while and now want to dig in with some useful and easy ways to customize your WordPress site, a great place to start is the WordPress Admin area, or backend. One of the great things about WordPress is that each part of the backend is easily customized using simple PHP functions.

In this article, you'll learn how to customize the login page with your own logo, add new widgets to the dashboard, add custom content to the admin footer, make it easier to get in and out of the Admin area, and more. When combined, these techniques can improve branding, accessibility, and usability of your WordPress-powered site.

Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?

There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Who’s This For?

I’ve gotten a lot of commenter feedback lately from designers who struggle with the basic methods and concepts of layout in CSS. The general consensus among many of those new to CSS is that they simply “fiddle” with the code until everything finally works.

Having been there quite a few times myself, I know that this is an immensely frustrating period of your professional growth. Knowing that the answer is right there in front of you and not being able to figure it out is excruciating and time consuming.

If this sounds familiar, hopefully I can help ease you out of this period with some solid and practical advice for how to handle some common layout scenarios. If you’re a CSS ninja who can code a website blindfolded, this article probably isn’t for you. If you’re a designer who just wants a better understanding of how to take what’s in your Photoshop file and turn it into CSS, you’re in the right place. Let’s get started.

Horizontally Center an Element

The first scenario that we’ll attack is by far one of the most common: centering an element horizontally in the viewport or browser window. To get started, let’s bust out a simple div and give it some basic styling.

As you can see, by default, our div pops up in the top left of the viewport. The trick here is that we need the div to stay in the center of the window, no matter what the window’s size is currently. That means that we can’t use absolute positioning to place it at a specific point because that won’t be centered on any other possible window sizes.

Instead what we need to do is leverage the “auto” value that can be applied to margins. Here’s how this works:

As you can see, applying a single line of CSS tossed our box straight to the center of its parent, which in this case is the body. To accomplish this, I used a bit of CSS shorthand. If you need a refresher, margin shorthand starts at the top and works its way around clockwise.

You can shorten this even further if you only have two values that you need assigned. In this case, the first slot will apply to the top and bottom margins while the second slot will apply to the left and right margins. Here’s another look at our centered div, this time with the margins declared using three separate but perfectly equivalent methods.

As you can see, our element is void of top and bottom margins, but the left and right are set to auto, which keeps the item perfectly centered.

Things To Keep In Mind

There are some important things to remember about using the auto margins trick. First of all, you must have a specific width declared for the element that you’re centering. The height declaration is not necessary, you can allow the content to determine the height if you wish, which is the default setting, but the width must always be set.

It’s important to note that while this trick will work on most block level elements, not just divs, it won’t help you out with vertical centering. As an example, let’s throw a paragraph inside of a div, then attempt to center that paragraph in the space.

div { height: 400px; width: 400px; background: #eee; margin: auto; }   p { width: 60%; margin: auto; font: 14px/1.5 Helvetica, sans-serif; }

</ br>

As you can see, I have auto margins set both on the paragraph and its parent div. This centered everything nicely horizontally, but it didn’t have any effect on the vertical position.

Center An Absolutely Positioned Element

The method above works to automatically center one item inside another, but the method assumes that you’re using the default positioning context: static. If you have absolute positioning applied, this method goes out the window.

Using the absolute and relative positioning methods we learned last week, we can apply a simply formula to solve this issue.

Here we see that on an absolutely positioned item contained inside of a relatively positioned item, we need to set the left property by plugging some numbers into this formula. Here’s a test case:

.container { height: 300px; width: 300px; background: #eee; margin: 10px auto; position: relative; }   .box { height: 100px; width: 100px; background: #222; position: absolute; }

</ br>

Let’s see if we can center the black box horizontally. Using our formula, we can see that the left property needs to be set to 100px.

.container { height: 300px; width: 300px; background: #eee; margin: 10px auto; position: relative; }   .box { height: 100px; width: 100px; background: #222; position: absolute; left: 100px; }

</ br>

With this code, we’ve set the distance between the left side of the box and the edge of its parent container to 100px, which centers it perfectly.

With Fluid Width

The method above only works if the parent container has a static width. Given the popularity of responsive design though, more and more containers are going the fluid route lately. This means that we’ll need another way to center the child that isn’t dependent on the width of the parent.

To accomplish this, we need to use a percentage for the left value. The obvious answer is to use 50%, but that won’t really work because you’re not accounting for the width of the element that you’re centering. To make it work, we need to add in a negative left margin of half the width of the child element.

Using this logic, we apply a left margin of negative fifty pixels along with a left value of 50% and our div is once again perfectly centered on the x-axis.

.container { height: 300px; width: 70%; background: #eee; margin: 10px auto; position: relative; }   .box { height: 100px; width: 100px; background: #222; position: absolute;   /*Centering Method 2*/ margin: 0px 0 0 -50px; left: 50%; }

</ br>

It’s important to note that this would also work if our child element had a fluid width. We use the same steps as before and come up with something like the following:

.container { height: 300px; width: 70%; background: #eee; margin: 10px auto; position: relative; }   .box { height: 100px; width: 70%; background: #222; position: absolute;   /*Centering Method 2*/ margin: 0px 0 0 -35%; /* Half of 70% /* left: 50%; }

</ br>

Dead Center an Element

Now that we have a few simple and complicated centering methods in our tool belt, it’s time to tackle the puzzle of perfectly centering an element both horizontally and vertically.

Fortunately, to pull this off, we can use the same method that we just learned, we just have to account for height. This time around we’re also going to center both the parent and the child both vertically and horizontally. Here’s the code to pull it off:

.container { height: 300px; width: 300px; background: #eee; position: absolute;   margin: -150px 0 0 -150px; left: 50%; top: 50%; }   .box { height: 100px; width: 100px; background: #222; position: absolute;   /*Centering Method 2*/ margin: -50px 0 0 -50px; left: 50%; top: 50%; }

</ br>

There are a few things that you need to notice here. First, this time both the parent and the child are absolutely positioned. From here, I used our negative margins trick with the left property on the container div, then did the same for the box div.

The result is that our content is completely centered and will stay that way as the browser changes size in any direction (even vertically!). Click on the image below to tinker with a live demo.

Centering Text

For my next trick, I’ll teach you something cool about centering text. We’ll start with a simple h1 element inside of a container div.

Now, I’m sure that you already know how to center this text horizontally in the space. It’s typically one of the first things you learn in CSS. Just set the text-align property to center.

.container { height: 400px; width: 400px; background: #eee; margin: 50px auto; }   h1 { font: 40px/1 Helvetica, sans-serif; text-align: center; }

</ br>

Easy right? But now let’s say we want to center this line of text vertically as well. If this were a paragraph, we would probably take the methods above into account, but since it’s only a single line, we can use a nifty trick.

All we have to do is set the line-height property to the height of the container. I accomplished this below using the shorthand font syntax.

.container { height: 200px; /*Set line-height to this value*/ width: 400px; background: #eee; margin: 150px auto; }   h1 { font: 40px/200px Helvetica, sans-serif; text-align: center; }

</ br>

Warning: This trick only works with a single line of text, and is a bit hacky so it may not be appropriate for all situations.

Centering a Background Image

The last thing that we’re going to learn to center is a CSS background image. To get started with this, we’ll create another container div, but this time we’ll keep in empty and toss in an image using CSS.

.container { height: 300px; width: 300px; margin: 150px auto; background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat; }

</ br>

As you can see, the default place for an image to appear if no repeat is set is the top left. It turns out though that you can move it to one of nine different preassigned slots. These are shown below:

We accomplish this movement through the use of the background-position property. Simply call this property and set any of the values listed above.

.container { height: 300px; width: 300px; margin: 150px auto; background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat; background-position: top center; }

</ br>

As an alternative, we can use the shorthand syntax for this. Simply toss in one of the values at the end of your stream of values on the background property.

.container { height: 300px; width: 300px; margin: 150px auto; background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center; }

</ br>

Conclusion

There you have it! You should now be completely confident in your ability to tackle almost any centering situation with CSS, from dead centering a div to vertically centering a line of text within its container and beyond.

Reach out to us on Facebook or Twitter and let us know if you found this information to be helpful and if you have any questions.

Five new links: "Methodological Flaws put Question Mark on Study of the Impact of WCAG on User Problems", "A Challenge to Web Accessibility Metrics and Guidelines - Putting People and Processes First", "User Statistics - People with Disabilities", "ARIA-Group: A Viable Alternative for Fieldset / Legend", and "Accessibility Steps".

Five new links: "Defining 'ch", "Updated CSS3 Preview - CSS3 Attribute Selectors", "Cleaning Up HTML, Part 1, When Mixins Become Skins", "Two New Proposals to Solve the CSS3 Vendor Prefix Crisis", and "5 Useful CSS Tricks for Responsive Design".

Two new link: "How to Preview a Website for Mobile Screens in Adobe Dreamweaver CS6" and "Designing Responsive Web Pages Using a Fluid Grid Layout in Adobe Dreamweaver CS6".

Two new link: "Are You Testing For Delight" and "Do A-B Tests Focus Us On The Wrong Problems".

Two new link: "Mobile Web 2: Applications" and "edUi".

One new link: "Responsive Layouts, Responsively Wireframed".

Four new links: "", "", "", and "".

Ten new links: "Adaptive Images Use Cases", "An Alternative Proposition to Picture and Srcset, with Wider Scope", "HTML5 Adaptive Images - End of Round One", "Media Queries Can't Be Used for Resolution Negotiation", "Responsive Images and Web Standards at the Turning Point", "Responsive Images - Leave HTML Alone", "Some Early Thoughts on img srcset in the Real World", "Secret src ", "Use Your Head For a Better Way to Serve Images", and "Which Responsive Images Solution Should You Use".