Category Archives: HTML

MerchantCircle Listings Support Mobile Devices Through Responsive Design

mcmobile2 In January 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.

MerchantCircle’s New Mobile Listings

mcmobilePreviously 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…

Pretty printing a Python dictionary to HTML

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))
        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))
                    s.append('  <td valign="top">%s</td>\n' % Page.prettyTable(value, cssClass))
            elif isinstance(value, list):
                for i in value:
                    s.append('<tr><td valign="top">%s</td></tr>\n' % Page.prettyTable(i, cssClass))
                if key == 'picture' or key == 'icon':
                    s.append('  <td valign="top"><img src="%s"></td>\n' % value)
                    s.append('  <td valign="top">%s</td>\n' % value)
s.append('</table>') return '\n'.join(s)

Removing rounded corners on jQueryUI elements

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.