Another Redesign

I decided to update my site... again.  I've streamlined some content, archived some old items, categorized journal entries by topic, and, as you can see, drastically changed the look of things.  I also took advantage of some relatively new features.

Media Queries

My first attempt at an adaptive site design, which launched the first of this year, made use of jQuery to rearrange the document object model (DOM).  However, after my visit to Tucson in mid-January, I discovered from my savvy co-workers that media queries provide a much simpler, if slightly less flexible, approach.

Media queries are an attribute that you add to your stylesheet link which specifies the conditions under which the stylesheet should be applied.  This what the link in the header might look like:

In this example, the standard stylesheet is loaded in all cases.  The tablet stylesheet is only used if the screen width is between 651 to 900 pixels, and the mobile stylesheet will be used if the screen width is 650 pixels or less.  The print stylesheet will be used for printing and print preview mode.

In the secondary stylesheets, you only have to define those elements that differ from the main stylesheet.  So, for example, if you have the following declaration in the main stylesheet:

.homeSection {
    background-color: #ddd;
    border: solid black 1px;
    border-radius: 10px;
    padding: 0;
    float: left;
    width: 50%;
}

In the tablet stylesheet, all you need to do is change one or two properties, and the rest will be inherited from the main sheet.

.homeSection {
    float: none;
    width: 100%;
}

For this design, I attempted to use media queries exclusively.  The only place I found that I still wanted to use jQuery was on the kanji search and flashcard tables, to rearrange the table rows and cells.

Rounded Corners

I also applied rounded corners to this design.  These used to be difficult to implement, but they are now supported in CSS3 using the border-radius property.

You can round all the corners by specifing the length of the radius of the curve, as in:

.homeSection {
    border-radius: 10px;
}

For more control, you can round individual corners using the following properties:

This is useful when you have layered elements, as I have used on this site.  The orange title bar is its own div, having just the top 2 corners rounded.  Likewise, the "More" link on the home page of this site has just the bottom right corner rounded, to fit in the parent div.

Leave a comment