Category Archives: Mobile Web Development

How do I know if my site is mobile/tablet friendly?

smartphoneIf you open your site on your smartphone’s browser and you have to scroll horizontally to view content or access menu items then the site is not optimised for mobile devices.  Most sites built two or more years ago for small businesses would not be mobile friendly by default.  Some are still being built today without considering mobile devices yet almost 50% of people access the web now via mobile.

tabletWhy should I make my site mobile friendly?

Your site should be mobile friendly because more and more people are accessing the web from devices such as smartphones and tablets today.  When people encounter a site that is not mobile friendly they become frustrated and tend to not use the site if at all possible.

Common problems users encounter include:

  • Menu items too small and are difficult to access
  • Popup boxes appear off screen and sometimes cannot be shut down
  • Images are not rendered at the correct size
  • Content is difficult to read without zooming

What is the recommended solution?

layoutWhen it comes to mobile website design there are 2 approaches:

  1. Adaptive design:  in this case a brand new mobile specific site is created and perhaps tablet version too
  2. Responsive design:  the front end of the site is created in such a way that the layout of the site changes depending on the resolution.  This is generally achieved using a technology called CSS3 media queries, whereby visual elements have different styles applied based on the screen width.

How can I make my site mobile friendly?

There are a number of solutions to make your site mobile friendly.

  1. Create a brand new mobile version of your site.  When users access your site from a mobile device this new site will be displayed.  This option has the least impact.
  2. Modify your existing site:  If your site is well implemented it might be possible to adapt the CSS and html to a responsive design.
  3. responsive desktop designProbably the best solution is to re-implement your site using a modern CMS (such as wordpress) with a responsive theme, which means that your site will work on desktop, mobile and tablet devices in the future your site’s theme can change as technologies become available because wordpress is designed in such a way to keep the theming of a site separated totally from the content.

If your site is not mobile friendly, do not worry, you are not alone.  I would encourage you to consider the options above though going forward as smartphones with browsers are here to stay and if you share your content on facebook

Why do I need a Mobile Website? Responsive design, what does it mean?

web-statsThese days more and more people are access the web from devices such as tablets and mobile devices. Statistics I gathered from one of my websites has shown that of 26,214 visits to the site, 9,938 (37%) requests came from mobile devices, and another 2,022 came from tablet devices.  Therefore, of all the visits to the site almost half (45%) of the traffic is now coming from mobile devices and browsers other than desktop.  This is a huge change from only a couple of years back when 90%+ of requests would have come from desktop browsers.  What is more, the trend seems to be still on an upward curve, so within a few more years desktop browsing will most certainly continue to drop.

“Almost half (45%) of website traffic is now coming from mobile devices…”

With a change of this nature it’s important that your website can be displayed on mobile web browsers.  The simplest way to do this, and provide a consistent experience across multiple devices, is through a responsive design.

All responsive design really means is that elements of your website will re-organise themselves as the browser window gets smaller. This is achieved through aligning elements to float, just like an image that is aligned to the left of text within a word processor, the words will wrap and flow around the text.  With a responsive design aspects of the user interface are organised into blocks that can resize and drop beneath one another as the website resizes.

Another approach is to create a totally separate website using adaptive design.  This is generally a completely new interface, specifically built for mobile around the same content.  When someone accesses your website from a mobile device they get redirected to the mobile website. Most websites do not require this as mobile browsers are now capable of practically everything that a desktop can do with the advent of html5 and css3.

So, what are you options?  If you have an existing site that was developed previously it may be possible to upgrade to a responsive design without losing your content.  If you use a platform such as wordpress, you could get a new theme developed for example.  If your site is very old and you don’t have a CMS it may be more difficult, and now may be the time to make a move and upgrade.

If you are going for a bespoke design you could consider utilising a framework known as twitter bootstrap for example, or if using wordpress you could use one of their latest themes (2012 or 2013) as a starting point for developing your page.

The best advice is to keep it simple and clean, and allow high contrast text so that users can view your site in daylight.  Allow menus expand and contract on mobile devices so that users can get to the main content quickly and easily.

UTD Web Design is currently building a platform to allow small businesses create simple responsive sites.  If you are interested in finding out more contact me at cian@utdwebdesign.com. If you wish to upgrade an old site, design a new site or if you require some independent advice with no obligations. please do contact me and I’ll do my best to point you in the right direction.

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’

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

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.

Meades Cafe MobileOur 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

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 :-)