Archive for Category ‘Design‘

 
 

Why Must Rounded Corners be so Hard?

If you’ve built, or attempted to build, a “web 2.0″ style site, you have no doubt come across the difficulties in creating rounded corners. It’s one of those problems in modern web development that there is no silver bullet for. The solutions for solving it aren’t just many, but they span many different methods. Choosing a method will help you decide what method you want to use. So what methods are there for rounded corners?

What do we want?

We want to be able to create rounded corners on for any element, usually divs, with minimal effort. It’s important to be able to create multiple rounded corners on a page. The aim should be to produce something that loads the fastest in a client browser and works as long as the user is using a modern browser; ideally without javascript.

The Basics

Almost all CSS techniques and some javascript techniques require the use of some number of “corner” images. These are those little images that may only be 20×20 in size, but when placed at the corner of a div it will give the appearance of a rounded corner. These little images will usually need the foreground and background color set in them to match those colors of the div that you’ll be rounding. The annoying part about this approach is that changing the color in your css requires updating your image files. It also complicates adding borders to your rounded boxes, because that will also need to be match in the div, meaning your graphics need to be more precise.

When rounding corners with Javascript the methods open up a little more. Some methods don’t require any image files, and will even allow borders. Javascript opens the playing field for more flexibility, but at the downside of performance. It’s also one more thing the user will have to have enabled in order to view the page as you want it. So what are methods people use to do CSS and Javascript rounded corners?

CSS Only

In my opinion this is the only true way to go. Rounded corners deal with how the view is displayed, and CSS is what describes that. If only it were that easy. In order to anchor images to elements, you need, well, elements. One of the most common ways is to have your CSS sprinkled with lots of elements, like this:

<div class='rounded-outer'>
   <div class='rounded-1'>
      <div class='rounded-2'>
         <div class='rounded-inner'>
            This is a rounded corner box
         </div>
      </div>
   </div>
</div>

Is this the best way? Definitely not, but it’s fast and it could be a lot worse.This works by adding each of the four corner images to those four divs. They’ll all be right on top of each other, so the end result will be a single rounded box with the text “This is a rounded corner box.”. There’s a lot of other approaches that use 4 individual elements to anchor images to that work in this same way.

Examples:
Guide to Rounded Corners

Book 8: Microformats – Empowering Your Markup for Web 2.0

Don’t look here for books 6 and 7; I’ve very kindly decided to skip reviews of Harry Potter books. Instead we’re skipping straight to book 8 which more on target.

Microformats: Empowering Your Markup for Web 2.0

Microformats CoverHaven’t heard much about Microformats? They are relatively new to the web, but use existing practices just marked up in a uniform way to add new meaning. They’ve been getting a lot of attention lately with adoption at Yahoo, Technorati, LinkedIn, Upcoming, Flickr, Last.fm, Eventful and much more. By marking up their pages in this way, they become more easily parseable by others’ application. For example, Technorati recently created a Microformats search which is still gaining traction. It does work though, as as a serch for ColdFusion reviews shows. :)

The entire purpose of microformats is that they use existing technology (css, html, xhtml) to create semantic, machine parseable information. What’s that mean? It means creating something that’s straightforward to a developer, but follows a strict enough standard that it can be intepreted in a predictable manner as well. To make things a little more clear, how about we start off with an example, XHTML Friends Network. If you take a look at the code for the blogroll on my front page, you’ll see a sample link looks like this:

<a href="http://www.brianlegros.com/blog/" rel="friend met co-worker">Brian LeGros</a>

The relation between me and Brian LeGros is that of “friend met co-worker”, which is straightforward enough in it’s meaning. There is actually a special set of relationships that are available in this context, although they are very broad. They cover relationships such as friend/acquaintance, co-resident/neighbor, child/parent/sibling, muse/crush/date and me, to reference another site about you (would usually be used for myspace/facebook links for example). Since the XHTML standard has nothing against using multiple, space separated relationships, this is a very clean and easy way to markup a set of links, and one that WordPress helps out with.

Reading through Microformats there were more than a few times when I put the book down and decided to implement them then and there. That’s one of the most exciting things about this book — it’s a call to action, and an action anyone who has a web presence can make.

It starts out with very simple microformats such as XFN (short for XHTML Friends Network), and other link-based microformats. Two of these were immediately useful to me — rel=”nofollow” and the VoteLinks Microformat.

You’ve probably heard about the rel-nofollow microformat without even knowing it was one. The idea is that you add

rel="nofollow"

to any link and that link will not be traveled by search engines. Also, that link will not gain pagerank from the link (and your sites pagerank will not be used up on the link). rel-nofollow was introduced by Google and has become the standard for all links that are made within blog comments.

Another one along the same lines is Votelinks which has a few more options. The idea is that you can markup a link which serves as a vote for, a vote against or a null vote for the related link using the “rev” attribute of a link. The possibilities are:

rev="vote-for"
rev="vote-against"
rev="vote-abstain"

Now when you see one of those sensationalist articles about ColdFusion dying, you can just mark it up accordingly.

<a href="http://www.softwaredeveloper.com/features/ghosts-in-machine-071207" rel="nofollow" rev="vote-against">Ghosts in the Machine: 12 Coding Languages That Never Took Off</a>

Microformats goes into these formats at much more detail, as well as providing some examples on styling them (a[rev="vote-against"]) for one. By starting with these extremely easy to implement microformats, this book gets your ideas rolling.

Some of the more complex microformats, such as hCard are built line by line from the simpliest parts up until you have a full hcard. This approach is used throughout the book and works well. hCard is also one of the best examples in the book, with a full walkthrough of how an hCard might be marked up.

You might be thinking microformats are just a matter of adding a little markup and that’s it, but it’s actually quite a bit more complicated than that. For the most part, microformats are marked up by adding classes with specific names to any element. For instance, take hCalendar; a microformat used to markup events. It’s obvious an event needs a title, a date, maybe location, description — and that’s just for starters. What if the event spans multiple days? Who’s the coordinator? Where is the event located? Well when you get into questions like this you start nesting multiple microformats to make full hCalendar. There is hCard microformat to communicate the coordinator (or any person), a whole location markup with geo coordinates, and a way of providing the start date and end date. These little pieces can be reused in other microformats as well.

That’s really what this book helps with — getting a grasp on the building blocks. I don’t see myself wanting to memorize the individual pieces of most microformats, but after reading this you should have an idea of when they can be used with a handy reference for finding out more. As far as Microformats books go, it’s the best one out there — it’s also the only one listed or planned for release.

One thing I would’ve liked to see is a little more styling of some of the microformats. Microformats does style a few of the examples but not all. At the end there are two “case study” chapters going into detail on how Cork’d and Yahoo have used microformats. These provide full styling examples as well. Cork’d was co-created by Dan Cederholm, author of Bulletproof Web Design, and reading his writings has been one of the best ways of helping me learn best practices.

I’d suggest microformats as a subject anyone in web development could easily get the hang of in almost no time at all. If you use ColdFusion, you can always try the Microformats project on Riaforge to help get started. This book is a great resource though, and I’d highly recommend it to anyone interested in learning more.

My rating: 4.5 stars
****1/2

Making the CSS Switch with Grids, Part 2

A month ago I was talking about designing with grids and specifically with 960 pixel wide grids due to the amount of divisors it has. Over the weekend a new CSS framework called Blueprint was release which emphasizes just those two aspects. Blueprint includes a small set of css files but packs quite a punch, especially for a first release.

There are only 5 css files for the entire framework, split up in designations like “grid”, “reset” and “typography”. A more in depth description of what they do can be found on the Blueprint tutorial page. The concepts make for learning how to create your own designs relatively easy. There are a few basic ideas to all layouts:

  1. A div with a class of “container” will hold everything within a box
  2. The first item in a container (the one farthest to the left), needs a class of “first”
  3. The last item in a container (the one on the right) needs a class of “last”
  4. vertical columns need a class of “column”
  5. You can specify a class from “span-1″ to “span-9″ to determine how wide a column should be.
  6. You can create another “container” within any column and repeat these steps.

A container sets the width to the magic number, 960px wide. This means that if you were trying to make a layout like AdamFortuna.com which has 100% wide portions, each would be it’s own element with a container inside of it, so the header would look like this:

<div id="header">
  <div class="container">
     <div class="column first span-10">
       <h2>AdamFortuna.com</h2>
       <span>Rants on software development, Coldfusion, Javascript and UI Design.</span>
    </div>
    <div class="column last span-4">
       Search form....
    </div>
  </div>
</div>

The “header” would then be responsible for setting the background color. The heavy amount of classes do all the work, keeping your css free of all IDs, one of the main reasons I don’t like Yahoo Grids is that it uses ID tags, not to mention littering your css with “yui” everywhere. Blueprint does a good job of staying towards the semantic css side of things, although ideally you wouldn’t have numbered classes like “span-3″, it would be more like “pod” or “asides”. I’m happy with the mix though, and you can specify additional styles by tagging it up with your own IDs. In the Blueprint example you’ll also see a pair of background images that come along with the framework to use when testing your layouts.

Blueprint is still at version .3, with it just out in the public eye, but I see it being very useful down the line. If you’re pulling your hair out trying to get a normal box layout without tables, it’s a great resource to check out.