Mobile optimizing a WordPress blog using Moovweb SDK

1 Views

What is the best way to mobile optimize my WordPress blog that is image heavy without having to do device specific image editing? The general structure of my posts is something like this: 

<div class="post" id="post-ID">
<div class="top_o_the_post">
        <h2><a href="My URL" rel="bookmark" title="My Title">My Title</a></h2>
        <small>My Sub-title</small>                         
    </div>

    <div class="entry">
        <p>Some Text</p>
        <p>More text</p>
        <p>Some more text<br>
        <table class="pics">
        <tbody><tr>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
            <td>
               <a href="My Image URL"><img src="My image src" alt="Foo" width="729" height="427" class="alignnone size-full wp-image-92687"></a>
            </td>
        </tr>
        </tbody></table>
    </div>
</div>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. If you have some kind of image preset creation module installed you can make mobile friendly (smaller, lighter) image preset and then serve those images to mobile client by modifying SRC. On you example code transformation would look something like:

     $(".//table[@class='pics']") {
    $(".//img"){
        remove("@width")
        remove("@height")
        attribute("src"){
           value(){
              replace("desktop-folder-name", "mobile-folder-name")
           }
        }
     }
 }

    Also it would be good idea to make images responsive to various screen sizes. So in your SCSS you would want to have something like this:

      .pics{
     img{
         width: 90%;
         max-width: 480px;
         display: block;
         margin: 10px auto;
     }
  }

  2. I would use @media includes in your CSS:

    @media screen and (min-width: 600px) {
    .entry{
    width:"600px"
    }
    }

    @media screen and (min-width: 900px) {
    .entry{
    width:"900px"
    }
    }

    You can also automatically scale all image by doing:

    img {
    max-width: 100%;
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    }