Category Archives: Mobile Web Development

WordPress 2012 Theme Issues with IE8

Unfortunately when developing a responsive theme with WordPress for the real world you have to consider compatibility issues with IE8. Most of the standard stuff such as rounded corners, drop shadows and the like degrade gracefully. OK the user won’t have the experience that browsers get when using a HTML5 compatible browser but at least the site will still function as before.

IE8 and previous versions are the odd browser out, the age old padding issues are still there and lots more funky things happen as compared to updated standards based browsers.

Anyway, enough of the woes. Generally, when developing a responsive WordPress site it’s a good idea to start with an existing theme. Personally, I think the 2012 theme is a great place to start as it covers most of the bases and will be part of the wordpress platform for the next few years at least and thus will be supported and patched as necessary.

When developing a theme generally the items that are styled are heading, footer, background, page, posts, widgets and so on. Of course the other item that is commonly styled is the menu or nav bar.

If you are new to the wordpress 2012 theme and you do all your styling within style.css you’ll have no problems updating the nav style with background colours, textures, colouring links and their hover equivalents and it will all render perfectly until you or your client opens the site in IE8 or previous.

If you’re like me and have the latest version of IE you can see how your site will look on IE8 and previous versions by hitting F12. Once the developer tools window opens you can select the browser mode and set it to IE8.

After putting effort into styling a menu, you will notice in IE8 and below that the menu style looks like the default menu style. This is becuase a separated style sheet is loaded up on versions previous to IE9. This stylesheet is located under css/ie.css.

Unfortunately you need to style up the menu again within this file using the changes you made to the menu styles under style.css in the root folder.

Mobile Website Page Load Issues – Don’t use document.ready or even ‘pageinit’, use ‘pageshow’

Leave a reply

jQuery is a fantastic API that allows you to build websites with tasty ui components. jQuery mobile is an extension of this techology, which is a framework for building mobile websites.

When using jquery, often you need to use the document.ready() event to find out when a page has been loaded to activate components of a page, for example a slideshow component to begin fade transitions between images.

Recently I was developing a mobile site for a client and had to implement a slideshow on product pages but I found that using document.ready() worked the first time a sub page of the site was loaded but when other pages were browsed the slideshow stopped working. This is because the way pages are loaded within mobile sites are slightly different. Pages are loaded within the websites scaffolding using a technology called ajax to prevent unnecessary data being transferred to the device. This means the document.ready() event is only called once.

I tried using the pageinit and pagecreate events after going through various help sites such as stackoverflow and the jquery forums but the slideshow would not work no matter what I tried even though these events were being called on every page. The problem with these I believe is that they are invoked the first time a page is loaded.

In the end I tried the pageshow event. My site is built using the jquery framework and it is a single page system and so I named the pages within the site with an id=#thepage. I set up an event listener for the pageshow event on this id and called a load function which performed my set up code and everything works fine.

Maybe this will help someone from going bald like I nearly did trying to find a solution

$('#thepage').live('pageshow',function(event)
 {
 load();
 });

Designing a Mobile Version of a Website: Meades Cafe Dungarvan

Leave a reply

Meades of Dungarvan, Co. Waterford contacted me recently to create their new website. One of the stipulations was to create a site that had a mobile version that was easy to use on the likes of iphones etc. The general term for websites that resize gracefully is called ‘responsive design’ however sometimes it’s more desirable to create a separate version of a site for mobile devices.

Our approach in this case was to create a smaller version of the site, drawing from the same content, so essentially we separated the main menu from the content allowing the user to swap back and forth between menu and content on the mobile version, whilst on the desktop version the menu appeared on the left hand side. To keep the site consistent, we keep the look and feel similar on both sites.

If we wanted to create a site that looked more like an app we would have used something like jquerymobile or iui, however in this case the customer wanted to keep their branding consistent across platforms.

You can visit the site at www.meadescafe.com

Here’s what Mark Lubek, proprietor, said about our service:

“I got in touch with UTD Web Design a week before I wanted my site live and they pulled out all the stops to get the site live on time for us. In the end they actually completed it a day early! They managed everything from hosting to social media setup to content management. One of our most important requirements was the creation of a mobile friendly version of the site and UTD created an exceptionally user friendly version of the site for mobile users, which works seamlessly with the desktop version.”

Display different website on iphone by detecting the device’s user agent browser

Leave a reply

I am currently building a site for a client and they want a slightly different or simplified version of their site on iphone. In order to achieve this we must detect what is called the “user agent” or the type of device accessing the website through the browsers they are using.

I am building the site in PHP so here’s what I do:

//function to detect if an iphone has accessed the webpage
function isiPhone()
{
  $user_agent = $_SERVER['HTTP_USER_AGENT']; //get the user agent

  if(preg_match('/iphone/i',$user_agent)) //find this string in the UA
  {
    return true; //return true if found
  }
  return false; //otherwise return false
}

If you want to make the function more specific to find user agents from other browsers e.g. preg_match(‘/android/i’,$user_agent) will find android devices.

Once you’ve detected the device you would then redirect the user to a different version of the site for mobile consumption.

Hope this helps