I’ve updated my blogs to a new responsive layout using a beta TypePad Responsive Theme Builder. Responsive Design lets the site to resize and reflow to a variety of screen sizes (below right). The old template just cropped the view and added scroll bars (below left).
Responsive TypePad
TypePad has had pre-set responsive themes for a while. The beta Theme Builder, which allows customisation, still has a few wrinkles—sidebar items and emphasis tagged <em> text formatting mainly—but I thought worth a try. The TypePad support team have been great with rapid answers/fixes for a few questions I had.
I have tested the blog on PCs (I.E., Chrome, Firefox), Windows & iOS Phone/Tablet and have been told Android/Chrome devices are OK. Interested to see how you find it, leave a comment or email me via the sidebar link with any hardware, screen, browser combo which doesn’t work.
You’re a TypePad blogger and want to try it?
If you are on the TypePad Beta (info and join here) you’ll see a responsive option to tick in the Theme Builder. I use Microsoft Windows Live Writer to post and had to add (with TypePad Support help) some custom CSS to get the heading styles it creates to format correctly. The Custom CSS follows…
This is the CSS I’m currently using
- The .entry….h1 etc. control headings.
- The #banner code sizes the banner image space to match the image I use
- The h2.module…} code is a temporary workaround to get an underline on the side bar headers.
.entry-content h1 { font-family: Verdana, sans-serif; }
.entry-content h2 { font-family: Verdana, sans-serif; }
.entry-content h3 { font-family: Verdana, sans-serif; }
.entry-content h4 { font-family: Verdana, sans-serif; }
.entry-content h5 { font-family: Verdana, sans-serif; }
.entry-content h6 { font-family: Verdana, sans-serif; }
#banner {height: 140px; background-position:0px 0px;}
:#banner {background-position: center;}
#banner-header a {height:140px;}
h2.module-header {
border-bottom: 1px solid #000000;
}
