Project 4 – Technoculture – Production of a mobile website

After finishing the website, it was time to concentrate on the mobile version.
As my website and blog is done in WordPress, I wanted the mobile version done in WordPress too so it would actually work with the integrated blog. Unfortunately with Dreamweaver it is still impossible to make a blog, plus I would have no idea how to integrate a Dreamweaver made mobile website to integrate with a Dynamic website.

There are a few ways to make a blog a mobile version of a website:

  • Using a responsive theme which re-sizes text automatically to the correct size of screen -although I’d be unsure if it re-sizes images too, plus I already have an awesome theme that is completely customizable.
  • Using a mobile theme – which means a completely separate version of the website: having a desktop and mobile version – this also means it does not automatically update when you write a new blog post, you’d have to write two versions each time.
  • Using a mobile plugin that you can customize and would automatically update when you write new blog posts.

Seeing my arguments above, it was clear to me I wanted to use a mobile plugin that I could customize.
I started looking into the different plugins, two jumped out at me as they were used by lots of people and also got great reviews: WP-Touch and Wapple-Architect . Both have premium/pro versions too if you wanted to pay and be able to customize even more.
For some people who do not have a mobile phone, or do not want to use it’s data, I found this software for both Windows and Mac that simulates the iphone although it soes not allow you to scroll, it gives you a good indication of what it looks like on a mobile phone

I tried WP-Touch first. Initially I couldn’t get the website to work on my mobile phone, it kept telling me that ‘there are too many re-directions’. After some Google-ing it became clear that in the WP-Touch settings I had to change the homepage, it’s default was set on the homepage you have set in WordPress settings, but it needed to be set to ‘WordPress Default’. additionally, after that gave me a ‘web page not available’ I changed the adverts to ‘none’. This is set to AdSense by default, but you’d have to enter an API for it to work and I don’t use AdSense. This made it work and I got the following page on the left:
Starting to look like a mobile website, but I could not navigate away from the page, pressing the arrow in the top-right didn’t do anything, so I delved back into the settings in WordPress and realized I had to tick the boxes by the pages I wanted in the menu. After I did that, the menu looked like the screenshot on the right: I didn’t particularly like the menu like this, I’d rather it be visible on the page so there is no question bout where the menu is. I don’t want people to give up and leave my website altogether.

I didn’t want to give up on WP-Touch just yet so I had a look at all my other pages:

Home page when scrolled down

contact page

blog page

blog page scrolled down

a blog post

categories page

about page

about page scrolled down

I found a few flaws with WP-Touch:

  • despite using a custom query on the blog post page that on the desktop displays the blog posts underneath the welcome, it does not display the blog posts on the mobile version
  • it does not resize pictures, so my 3 head shots on the about page look humongous before the content has even started
  • The blog posts themselves are not resized and the text bleeds of the page
  • WordPress Custom Menu’s are not supported – meaning in my case my longer SEO page titles showed up rather than the shortened names I gave them in the custom menu

However, I did like that you could see my twitter and facebook buttons on the contact page.

I moved on to Wapple. You can sign up for a free WordPress dev key, this does mean your mobile site is ad-funded, you can upgrade for £2.50 a month or £45 one time fee to get rid of the adverts. I wanted to see if I liked it first before I started paying. I was surprised not see see any ads when I tried the mobile version, but as it transpired later: I had signed up for a different version, which gave me 200 page views (without ads) after which my mobile website would stop working until I paid a monthly fee.. When this happened I quickly signed up for the WordPress version and it was back again 🙂
Wapple is quite comprehensive and it took me a while to figure out that apart from Wapple Architect, they also have Wapple Canvas, which is accessible to you with the same Dev key. Wapple Canvas allows you to design your website from scratch using customizable templates and the possibility to upload specific headers and footers, but as I later understood, this is like a separate version of your mobile website and does not dynamically change when you write more posts or pages.
Wapple Architect however does automatically change so I started to get to work with this.
I found out I could:

  • Resize images for the mobile version to a certain percentage of the original desktop version
  • upload a specific sized header and footer for the mobile version
  • Choose which pages come up in the navigation menu
  • choose how exerpts are shown (with a custom wapple supplied image or your featured image)
  • edit the CSS to customize further

Which all sound great, however, flaws are like the WP Touch:

  • despite using a custom query on the blog post page that on the desktop displays the blog posts underneath the welcome, it does not display the blog posts on the mobile version
  • WordPress Custom Menu’s are not supported – meaning in my case my longer SEO page titles showed up rather than the shortened names I gave them in the custom menu

The Blog issue I sorted by creating a pages called tutorials, and in WordPress settings, using that as the blog posts homepage. As with both Wapple and WP-Touch you can choose the pages you want showing up in the menu, I unticked the page ‘blog’ and ticked the page ‘tutorials’ whcih I named ‘BLOG’ so the long title of ‘welcome to Marjolijn’s Blog’ was not used in the menu. This page obviously does not show the welcome page, which is a shame, but I can overcome that!
This also sorted the custom menu problem, and I also read somewhere that custom menus are supported on upgrading.

I uploaded a header and footer and added text to go in the footer, it showed up in a black background underneath my added footer, so I changed the CSS to make it look more integrated:

the black footer

integrated footer

I used the following CSS (within Wapple settings: Architect/Mobile Theme )

#footer ,#switchToDesktop {background:transparent;
        color:#aaaaaa;
       }
.footerImage{
 position: relative;
	bottom: -75px;
	left: 0px;
        z-index:-40;
}

This basically makes the black footer transparent and places the footer image underneath the footer text. The Z-index makes it slot underneath rather than on top and the position relative and bottom/left positions it to where I wanted it to.

I also changed the picture sizes to 60% (in Architect Settings) so the pictures fit better and changed the menu colour (with CSS) to be more integrated:

about page with 100% image size

about page with 60% image size and old coloured menu

new coloured menu

I used the following CSS to change the menu colour:

.nav{height:20px;font-size:1.1em;margin:5px 0;padding:5px 0;border-top:solid 2px #818181;background:#888;color:#19100b;text-align:left;border-bottom:solid 2px #fefefe;}
.nav a{color:#ffffff;padding-left:5px;font-weight:bold;background:none;text-decoration:none;}

The last thing I wanted to sort out was the image on the homepage that is the navigation. That didn’t need to be there on the mobile version, so I gave the image an id like so:

<img src="/images/website-design-brighton-sussex.png" id="hotspot-map" border="0" usemap="#Map" />

and put this in the mobile css:

img#hotspot-map{
display:none;
}

Unfortunately this didn’t work as I found out that the mobile version changes the div’s they are in, I guess they have to resize them and that is why they do it. images are in html body.body div.main div.main div#c div.postimagerow and unfortunately I cannot say display none to just one individual image. If I do display none to the above; all images in the whole website are not displayed so it’s not a good solution.

I found a different way of possibly doing it, using media queries for different devices, and put the css in my desktop theme css inserts

@media only screen and (min-device-width : 320px) and (max-device-width : 480px),
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
img#hotspot-map { 
	display:none; 
} 

But that also did not work for the same reason. I ran out of options as I Googled it frantically and cannot find anything else I can do about it, so for now I am going to have to leave it..

The other option I wanted to change is the fact that Wapple does not allow the ‘like me on facebook’ button from facebook and does not even display a link. So wat I did is added in the following code within the facebook div on the desktop webiste:

<div id="fb-root"><a href="http://www.facebook.com/marolinedesign" style="color:transparent">like me on facebook</a></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/marolinedesign" width="240" show_faces="true" border_color="" stream="false" header="true"></fb:like-box>

This meant the link is transparent and not visible on the desktop site. on the mobile site however, it ignores the transparent bit and shows the link instead of showing nothing.

Overall I think Wapple is a better solution as you can make it look more like the original website (rather than a standard look for all) and I will look into the other options you will get when you upgrade.

Project 4 – Technoculture – Production of a mobile website

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>