Earlier, I wrote about a way to import an exisiting git project into bitbucket. I've since discovered a much easier way to do this using git's own commands. Instead of having to use git's daemon mode and have bitbucket import your repository, you should setup a new bitbucket repository and push to it. Assume you have a new repository, do the following two commands at your terminal. The key is the -u switch, which sets the master branch to track the remote repository.

git remote add origin git@bitbucket.org:user/newproject.git
git push -u git@bitbucket.org:user/newproject.git master:master

This blog serves as a good way to document what I learn.

I've updated my theme here to make the layout more responsive depending on the device you view it in. For both smartphones and iPads/tables, the layout linearizes. That is a fancy way of saying the right sidebar should scoot below the main content area, and everything will become 100% wide to fill the screen.

I did this using CSS3 media queries, this technique only works in newer browsers, including Chrome, Firefox. and Mobile Safari.

First, the viewport tag will help different devices render the page correctly. After reading, Choosing a viewport for iPad sites, and A tale of two viewports --- part two, I added this to my page template

<meta content="width=device-width,maximum-scale=1.0" name="viewport" />

I then added three blocks of media queries to adapt the layout depending on the device, the first block linearizes the page content if the device screen is less than 1024px wide. The second and third blocks fix some font sizes so that text renders legible on different devices.

/* LINEARIZE CONTENT */
@media only screen
and (max-device-width: 1024px) {
    #wrapper {
        width:auto;
        padding:10px 10px 0;
    }
    #container,
    #page {
        width:auto;
        margin:0;
        padding:0;
    }
    #rgCenter,
    #rgRight {
        float:none;
        clear:both;
    }
    #rgRight {
        background-color: #e3e3e3;
        padding:20px;
        margin:0 -20px -20px;
    }
  div.span-10,
  div.span-6 {
    float: none;
    width: auto;
    margin-right:0px;
  }
}
/* ipad / tablets */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
    body {
        font-size:1.3em;
    }
    #wrapper {
        width:1024px;
        padding:20px 20px 0;
    }
    .dsq-comment-text {
        font-size:1.8em;
        line-height:1.5;
    }
}
/* ipod/iphone3 */
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (max-device-width : 480px) {
    /* Styles */
    body  {
        font-size:1.3em;
    }
    #wrapper {
        padding:10px 10px 0;
    }
    #logo-floater h1 {
        font-size:1.5em;
    }
    #page h1 {
        font-size:1.3em;
    }
    #page h2 {
        font-size:1.2em;
    }
    #page h3 {
        font-size:1.1em;
    }
}

I may be a bit late to the party with this observation, but web design is finally evolving. Mobile phones and tablets have freed us from having to use a laptop or desktop to use the web. Using HTML and CSS, designers can now use media queries to control how a site appears on different devices.  If done right, and done from the beginning to save costs, your website can be useable and look nice on multiple devices, without the need to setup a different mobile site or theme.

We may also be seeing the end of the tiny font fad that has made sites illegible for the last decade. It's about time.

You see, in most cases, if you're building websites with the font size set between 10 and 15 pixels, you are costing your clients money. And I aim to prove it.

16 Pixels.