Featured Friday! Rounding up the best TypePad blogs
Chotie Darling

Weekend Project: Style Your Mobile Blog with Advanced Templates

This Weekend Project is for those of you with Advanced Templates, a Pro-Unlimited feature that lets you edit the HTML of your blog's design and layout. You'll need to already utilize Advanced Templates for your blog's design, or be comfortable coding with HTML and CSS in order to successfully create a new design using the Advanced Templates feature.

The Project for this weekend is on styling your mobile blog, by simply using one or two new custom template modules:

  • head-common-extra-mobile
  • footer-extra-mobile

The first module listed above is the key for being able to customize your blog's mobile design. When created, it is automatically inserted into the HEAD of the mobile template. Due to its position within the source code of the mobile design, you can use it to insert CSS to style only the mobile view.

The second module listed above allows you to add additional content below the footer of your blog's mobile design. When created, it is automatically inserted into the mobile template, above the closing BODY tag (e.g. </body>). This module is ideal for adding a link to the full version of your blog, if you so choose.

All TypePad blogs have a mobile location at the /.m/ directory of their blog. For example, you can visit Everything TypePad's mobile version at http://everything.typepad.com/.m/blog/. The /.m/ directory sits behind the main domain of your blog and before the blog folder. If you have Domain Mapping in place, set to point to a specific blog, the domain would simply end with the /.m/ directory (e.g. www.domain.com/.m/).

Note: At this time, mobile versions of TypePad blogs are not auto-detectible. With Advanced Templates, however, you can add the necessary code that will detect, and launch the proper view, when a mobile device views your blog. Use your favorite search engine to find out how!

If you look at the images below, you'll see three different views of the same blog (click to view larger images). From left to right, they are:

  • Full blog design, without the /.m/ directory, as seen on an iPhone 4
  • Default mobile design for all TypePad blogs, with the /.m/ directory, as seen on an iPhone 4
  • Mobile design using custom styles to override the default mobile view, as seen on an iPhone 4
iPhone Default View iPhone Mobile Folder iPhone Mobile Override

As you can see, the design is clean, simple, and retains some small details of the original design so that it is visually linked. The design will also load quickly and efficiently for mobile devices, which is a huge advantage if your full design is is image- or script- heavy.

For the mobile design above, I created the head-common-extra-mobile module at Design > Templates (remember, we're using Advanced Templates!). Within that module, I used the following CSS:

<style type="text/css">
/* Body of the Mobile Design */
body {
 font-size: medium !important;
 font-family: verdana, 'lucida grande', helvetica, arial, sans-serif;
 line-height: 1.5;
 background: #404040;
}

/* Mobile Design Container and Banner */
#container { background-color: transparent !important; }

#banner {
 width: 80% !important;
 margin: 30px auto 0px auto !important;
 padding: 2px 30px !important;
 background-color: #222 !important;
 border-bottom: 1px solid #000 !important;
}

#banner-header {
 color: #ffffff !important;
 margin-top: 0px !important;
}

hr { display: none !important; }

/* Mobile Design Post Content */
.entry {
 background-color: #fff !important;
 width: 80% !important;
 margin: 0 auto !important;
 padding: 2px 30px !important;
 font-size: small !important;
}

.entry-header a {
 color: #078d99 !important;
 text-decoration: none !important;
 text-transform: uppercase !important;
 font-size: small !important;
}

.entry-body {
 padding: 0px 30px !important;
 margin: 0px !important;
}

.entry-footer {
 text-align: left !important;
 padding: 0px 30px !important;
}

.entry-footer a {
 color: #078d99 !important;
 text-decoration: none !important;
 font-size: small !important;
}

.entry-footer img { padding-right: 5px !important; }

/* Content Pagination Link at Bottom of the Design */
.content-nav { padding: 10px !important; }

.content-nav a {
 color: #fff !important;
 text-decoration: none !important;
 font-size: medium !important;
 font-weight: bold !important;
}

/* Tell the Footer to Hide Itself */
#footer { display: none !important; }

/* Navigation Bar links added via the footer-extra-mobile module */
#nav {
 width: 80% !important;
 margin: 0px auto 0px auto !important;
 padding: 0px 30px !important;
 background-color: #222 !important;
 border-bottom: 1px solid #000 !important;
 height: 40px;
}

.nav-list {
 border-top: 1px solid #000000;
 margin: 0px;
 padding: 0px;
 list-style: none;
}

.nav-list-item {
 background-color: #222222;
 border-right: 1px solid #000000;
 display: block;
 float: left;
 padding: 10px 15px;
}

.nav-list-item a {
 text-decoration: none;
 color: #ffffff;
 font-family: verdana, 'lucida grande', helvetica, arial, sans-serif;
 font-size: 14px;
 letter-spacing: 1px;
 background-color: #222222;
 display: block;
}

.last-nav-list-item { float: right !important; border: 0px !important; }
</style>

As noted in the CSS, the navigation section of CSS applies to HTML I added to the footer-extra-mobile module. The code I entered was simply the default code for the navigation bar.

Once the code is saved in their respective modules, the new mobile design at the /.m/ location will begin to show.

Interested in taking on this project for your blog? You can learn more about the entire process for a mobile design by visiting the Knowledge Base.

Comments

jeff reine

Oh boy. This is gonna be trouble! :)
Happy 4th!

Chandra McPhaul

LOL LOL LOL LOL, UR RIGHT JEFF

Craig McGinty

Very, very useful :) And I don't know if the mobile versions of sites is new, but that is a great help.

Only thing I've noted is that within /.m/ versions entry-footer and content-nav elements make the page wider because they align right and centre, is it possible to align them left?

Many thanks.

BruceOne

Everyone have a wonderful 4th of July. Becareful of fireworks with Children around.

Account Deleted

Thanks for this great tip - I've spent a bit of time creating a mobile version of the school site with similiar colours to the main site.
Everything works great, apart from just one thing - how do I create a gap between each post on the mobile site? ( http://www.porchester.notts.sch.uk/.m ) so that each post stands separate in its own little highlighted box?

Cheers!

Bri

You think so? ;)

Hope you and yours have a fantastic 4th of July!

Bri

Hi Craig!

You can absolutely align the entry-footer and content-nav items differently. In the example I provided in the article, the CSS actually sets the entry-footer to align left, indented slightly to sit perfectly underneath the indented post excerpt. The content-nav sits in the center.

To align both to the left, you can use CSS like:

.entry-footer { text-align: left !important; }
.content-nav { text-align: left !important; }

Bri

Enjoy your 4th, Bruce, and stay safe!

Bri

Hope you're well!

In the mobile CSS you upload, you'll want to edit the CSS I recommended to separate the entry excerpts a bit more.

In the CSS I provided, look for:

.entry {
background-color: #f6f0e7 !important;
margin: 0 auto !important;
padding: 2px 30px !important;
}

Change it to:

.entry {
background-color: #f6f0e7 !important;
margin: 10px auto 10px 0 !important;
padding: 2px 30px !important;
}

Bri

Nah! It's a great tip and super fun. ;)

Account Deleted

Brilliant - I'd managed to make a gap, using the rounded corners trick (in white) but this way I get the gap, and can put a border around each article.
Thank you :o)

Account Deleted

One more question regarding the mobile site - is there a lag on new posts showing on the mobile feed? New posts seem to take a long time to show on the mobile version of the site - not ideal when you want mobile users to see the same, fresh, content as 'standard' viewers.

Bri

Hello! There isn't an issue with a lag on new posts. There's actually a broken tag in the source code for your mobile blog, which is causing the newer posts to not appear. I'm going to open a ticket for you and then share it with the rest of the TypePad team to see if it's something in the template causing the issue or if it's due to something else. Keep your eye out for an email notifying you of the ticket.

Account Deleted

I'm curious why Typepad is making it so difficult for users to have a mobile version. Why advanced templates? When you market ease of publishing, the tool should be easy to use not this technical. The standard mobile version is still very difficult to read on even an iPhone4 because the text design is very small. Why not build in the mobile functions and choices to the actual design functionality. With more people accessing the internet via their phone rather than their computer, isn't it time to bring this mainstream? I think this will become a decision factor as more and more business owners I know are switching to WordPress from Typepad.

Bri

Hi Stephanie! It's not our intention to make anything difficult for TypePad users, particularly with regard to a mobile version. We're working on providing better mobile-viewing options, as well as settings, for our users and their readers. Until that's ready, however, we're offering tips and resources to those readers who want to take advantage of the mobile version of their blog as it exists right now.

If you're not using, or don't want to use, Advanced Templates, as needed for the tips in this article, then you'll want to check back in the next week or so. I'm working on a post with tips on how to style the mobile version without the use of Advanced Templates. I'm really excited to be putting it together, and I sincerely hope you'll take a look, maybe even try it out! :)

Please know that we genuinely care about your, and every other user's, experience here at TypePad. We have so many fantastic updates brewing for the platform. Unfortunately, it takes much longer to develop, test, and implement those great ideas than it does to think them up! Still, keep an eye out in the next few months for news on developments. ;)

Have a great weekend!

Account Deleted

Brianna -
Thanks for the reply. I'm glad to hear another post is on the way and I'll certainly be trying things out. I'm also glad to hear that you are working on updating the platform. I'm a huge fan of Typepad and am saddened every time I hear of someone moving from Typepad to WordPress. Prior to doing what I do now, I worked in system development, so I do understand that it takes time to get from scope to actual live functionality. If you need beta testers, I'd be happy to help again. Until then, I'll keep an eye out for new posts.
To your success
Stephanie

The comments to this entry are closed.