Grow your CSS skills. Land your dream job.

CSS-Tricks Mobile

Published by Chris Coyier

UPDATE: CSS-Tricks.com is now responsive, so no more separate mobile version of the site. Not that I'm against that, I'm just a fan of responsive for this site.

There is now a mobile version of CSS-Tricks, thanks to the service and fine folks at Mobify.

It's not just an iPhone version, but should be pretty compatible with most mobile devices. The best part though, is this isn't just a way to read the articles like previous mobile versions have been. This is a full-featured mobile site, meaning complete archives of all archives, the comments, and the ability to comment.

Since CSS-Tricks is on WordPress, I always wanted to figure out a way to have a mobile site at a subdomain or subdirectory that would serve up the same content, but using a different WP theme. I never quite figured out how to do it, but it doesn't matter now because that is essentially what Mobify is doing.

WordPress Friendly

Mobify can work on any site really, but I'm pleasantly surprised at how well it has integrated with WordPress. Not only does commenting work just fine, but they also have a plugin which handles re-directing all mobile visitors automatically with zero work on your part.

Doesn't Kill Your "Full" Site

Normally I frown upon "mobile versions" that serve up special content to mobile viewers with no way of viewing the regular full site. Mobify doesn't do that. It does redirect you, but if you want to head back to the main site just click the "full site" link at the bottom. That is the ideal method if you ask me.

Analytics

Mobify is partnered with AdMob for delivering you mobile analytics. I think there are still some quirks to work out and honestly it's not working for me quite yet, but I imagine they'll get it worked out soon.

Do It Yourself

Mobify is a self-serve system. You build your own mobile version with their Design Dashboard, giving you full control and previews of what you are building in multiple devices.

Thanks again to Mobify for the help putting this together. If ya'll would like to see other sites that have used it, I Love Typography has one, A List Apart, I think Six Revisions is getting one soon, Veerle has one, the Dieline, all kinds of awesome sites.

Comments

  1. Yeah, I’ve been checking out Mobify. They seem to have a nice thing going. Nice, Mobile CSS-Tricks looks good on my iPhone. It would be awesome if your screencasts were available this way too, but who knows how long we’ll have to wait for the iPhone to support video in webpages.

  2. Very cool!

    I made http://briancray.com iPhone (and mobile) friendly. This program would have made it a little easier! What a great implementation!

  3. Very very cool, I’ll definitely be checking them out the next time I’m making a mobile version of a site.

  4. martin d

    Looks good – although I notice that date and number of comments line is overwriting the post title (as viewed on a Blackberry).

  5. Check out this news article in the Washington Post today http://tinyurl.com/pmsay2…..Disney is doing better with Web, then with mobile Apps….. Mobify is a platform that can make it cheap, easy to have a one-web, multi-view strategy for web designers!

  6. Rich

    Looks good! Commenting from my iPhone

  7. Are you on the Pro plan and are you paying for this or are they throwing you a bone?

    • They threw me a bone, which I suppose I should have made clear. And by bone, I mean they helped me create the site and I didn’t pay for it. This isn’t a paid ad =)

    • How did they help you? Did you have to rewrite some of your site?

    • Hey there,

      We picked mobile content and adjusted styling based on the existing stylesheet. There was no changes required in the source site…

      Email me if you have any more questions!

      Igor from MOBIFY

  8. Wow, I was looking for a service like this just a few hours ago.

    CSS TRICKS FTW!

  9. Nathan D'Addio

    What about advertising? How are you going to make revenue from that site?

  10. Looks good in Opera mini on my Windows Mobile phone.

    • slapout

      I just noticed that as soon as I posted a comment it sent me to the full site.

  11. Why not just use a plug in like WordPress Mobile Edition and customize the mobile theme to your liking? Then you don’t have to pay for their “Custom Branding.” http://wordpress.org/extend/plugins/wordpress-mobile-edition/

    Why rely on a service that could go down when you can make it yourself?

    I’m working on a site that won’t really use wordpress for anything other than news and blogs so I tried to figure out a way to do it in the header with javascript to detect and php to switch back to the full version and vise verse. I think I have it down, if they don’t have JS it will just load the mobile version.

    • Paul,

      Plug-ins are another approach to the mobility problem. Our goal is to build a design environment where any web designer can get their sites mobile, no matter what CMS is used.

      In particular, MOBIFY has really fine-grained control of design elements and bundled services (device detection, content transcoding, analytics) that we’ve come up with.

      Plug-ins are great too, but they are not very flexible for design purposes and module support. In general, WordPress has yet to come up with an appropriate mobile framework and we would love to be a part of it.

      Cheers,

      Igor from MOBIFY

  12. The comments don’t display very well on my phone unfortunately, especially the nested replies – just not enough room on the screen I guess. If I rotate the phone to view the site in landscape it looks better, but still not perfect.

    (I’m using a Windows Mobile phone with Opera as my browser)

  13. Chris

    Hey Chris, looks great as usual. Just went to add the bookmark on my iphone and noticed that your old iphone page (css-tricks/i) is not forwarding to the new URL

    Well done

  14. Lyle

    What about the concept of offering users the ability to use mobile content if they require. I use an iPhone and the frustration for me is that now I just get the Mobify version and I can’t get to the full version.
    Users should be able to choose.

    • You can choose. I specifically mentioned that in the post, because I hate that too. There is a prominent link to the “Full Site” at the bottom.

  15. jan

    Have you viewed your site in ie8? as when i try to view you site using ie8 the width of the page just keeps increasing and is imposible to view.

  16. This is cool Chris! Congrats. I definitely have to start working on this myself!

  17. Does Jquery work on this?

    • Hey John,

      While it is possible to use limited JavaScript (Google Analytics et al) currently we’ve been focused on streamlining content for mobile and less so about AJAX. In the future, we might introduce something in this area!

      Igor

  18. Abel

    How does the redirect function work so the mobile users goes to http://m.css-tricks.com/ ?

    • It’s a WordPress plugin, so it just kinda magically works behind the scenes with PHP. They also have a JavaScript snippet you can use for any site.

    • Abel

      Where can i find a good php or javascript for redirecting?
      Yes i know how to use google but…

    • Hey Abel, our CTO John posted about the approach we use on his blog – might be useful to you.

      http://johnboxall.ca/2009/04/01/notes-from-mobile-device-detection/

      Also, we do plan to offer the JavaScript device detection snippet (making requests to our device database) as a premium service separate from the MOBIFY design environment. Let us know if you’d be interested!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".