Why Beernews.org sucks on your iPhone

Administrative junk

Beernews.org is built on a popular content management system called WordPress. It’s not the plug-and-play WordPress.com version though. It’s the self-hosted version which means I get to have more fun (and more often, pain) in designing and building up the site.

The re-design I launched in September is based on a theme called Twenty Eleven. Here is what it looked like when I first started working on it. If you click on any single post on that link, you will notice that there is no sidebar. That was just one reason that I did A LOT of tweaking to the CSS (site layout/style)…

…tweaking that pretty much broke the layout for mobile devices’ rendering of the site.

I may still test a few more mobile-specific themes though we need to solve this layout issue because it also affects iPad users.

Here’s the deal…for me to go back and try to fix the CSS would probably take me an entire weekend. Responsive CSS is my Achilles heal. I’m fine spending a weekend on the site obviously though my time would be better served making other improvements. I also don’t have an iPhone and my trial ran out on a free emulator.

So if any of you readers happen to be CSS (especially Responsive CSS) experts, you could probably make the necessary fixes in under an hour just using Chrome Developer Tools or something like that. I think the trick is getting the ‘primary’ div to 100% width while preserving site layout.

Please fix away, CSS experts! You can send me any changes you think could help at Changelog so people can keep up with the improvements around here. More info on all the mobile layout bugs/issues can be found there.

[ed. note: before people starting asking about an actual mobile app, please realize that they cost thousands of dollars to develop & maintain.]

email newsletter signup box anonymous tip form

6 thoughts on “Why Beernews.org sucks on your iPhone

  1. Check out the WPTouch plugin. I use it on Bike World News and it uses a completely different theme when it detects it is on a smartphone. From its description: “A plugin which formats your site with a mobile theme for visitors on Apple iPhone / iPod touch, Google Android, Blackberry Storm and Torch, Palm Pre and other touch-based smartphones.”

  2. I do use WP Touch. From what I gather it doesn’t trigger coming out of apps though it does if directly accessed from a mobile browser. May or may not be inconsistent.

    I need the sidebar though.

  3. I use WP touch as well. Why do you feel you need the sidebar? There is not enough real estate for a sidebar on a phone and I assume people on tablets switch off the mobile theme. Just my 2 cents.

    In WP Touch try testing out the restricted mode setting fixed some of my display errors.

    Isn’t spending the weekend on code so much fun?

  4. If there are some sidebar items that you want to display in the mobile view, you could create “sticky” posts that always display first in the mobile theme and find some way to hide those in the standard view. Coding for that is certainly easier than trying to design your own mobile theme.

  5. On a slightly related note. One thing that I miss after the redesign, is images not showing up in the RSS feed of the site. It would be cool to have them back, otherwise love the design, and the tons and tons of news.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.