I've been collecting a set of Bootstrap related items and posting them via twitter but thought I'd write a post to capture them in once place. These are not necssarily things I've tried but for one reason or another I came across them and thought they looked interesting:

• Wizard dialog on github here
• The design team at Wanderful uses Fireworks and here is a Bootstrap UI toolkit.
• Typeahead
• Remove modal slide down effect

With the launch of our FindnSave beta redesign we've put a lot of effort into building a site that supports responsive design and scales well on a variety of devices. Below are examples on iPhone, iPad and Chrome on the desktop.

In January merchantcircle.com launched a site redesign completely restructuring the HTML for the majority of pages on the site. The site redesign is based on a common base class template and architected to afford a great deal of layout flexibility via CSS. This affords the design team to dramatically modify the design of the site without requiring resources of the development team. As an example, take a look at the New Design screenshot from this post, notice the rail appears on the right-hand side whereas today’s listing uses a left-hand rail via CSS best practices.

Our latest efforts supporting mobile follow Google’s preferred guidelines:

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

Like most websites our traffic is increasingly moving to mobile and we feel this UX is significantly better than a desktop optimized experience.

Previously I posted about the redesign of MerchantCircle pushed out earlier this year and this week we’ve followed up with a mobile version of business listings. The mobile implementation leverages a lot of markup generation code developed for the desktop version and offers the end user a much better experience on a small screen.

At this point, we’ve working on creating more mobile versions of pages across the site as well as some of the various sign-up, and review flows.

[Update May 2012] Mobile version of listing pages have been taken down. More to come...

Here’s a routine I wrote to pretty print a Python dict into an HTML table and though I’d share.

    def prettyTable(dictionary, cssClass=''):
        ''' pretty prints a dictionary into an HTML table(s) '''
        if isinstance(dictionary, str):
            return '<td>' + dictionary + '</td>'
        s = ['<table ']
        if cssClass != '':
            s.append('class="%s"' % (cssClass))
        s.append('>\n')
        for key, value in dictionary.iteritems():
            s.append('<tr>\n  <td valign="top"><strong>%s</strong></td>\n' % str(key))
            if isinstance(value, dict):
                if key == 'picture' or key == 'icon':
                    s.append('  <td valign="top"><img src="%s"></td>\n' % Page.prettyTable(value, cssClass))
                else:
                    s.append('  <td valign="top">%s</td>\n' % Page.prettyTable(value, cssClass))
            elif isinstance(value, list):
                s.append("<td><table>")
                for i in value:
                    s.append('<tr><td valign="top">%s</td></tr>\n' % Page.prettyTable(i, cssClass))
                s.append('</table>')
            else:
                if key == 'picture' or key == 'icon':
                    s.append('  <td valign="top"><img src="%s"></td>\n' % value)
                else:
                    s.append('  <td valign="top">%s</td>\n' % value)
            s.append('</tr>\n')
        s.append('</table>')
        return '\n'.join(s)

I had this question today and it turns out the answer is pretty simple

1. First, it’s important to note that as of this writing IE 8 (what I tested) doesn’t render rounded corners as implemented in jQueryUI v1.8.14 though I understand there is a plugin that enables that feature.
2. To remove rounded corners on all elements of jQueryUI (for Chrome, FF and Safari) you can include the following in your own CSS:

   .ui-corner-all { border-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-topleft: 0px;}
   }

Now, credit where credit is due.