Mobile Miracles

Written by James Hall on

On Thursday 12th July I am presenting with TERMINALFOUR at the Building Perfect Council Website conference…

On Thursday 12th July I am presenting with TERMINALFOUR at the Building Perfect Council Website conference in Birmingham. The title of our presentation is “Building a low cost mobile web presence” and one that I am thoroughly looking forward to.

I have attached my presentation below but one that I hope can offer some guidance. I wanted to also note a few points prior.

The Big Questions

The vast majority of web meeting I attend mobile will always get brought up and the same questions come over again and again.

  1. App or Mobile Web
  2. What About Responsive Design?
Both perfectly valid questions but sometimes buzz words push clients into avenues they really don’t need to be near.

App or Mobile Web

I will get it out in the open first – I am a big fan of mobile web less so of applications. This is for a number of reasons. The main one is that applications (or apps) are only really beneficial for repeat business / actions. So, for example social media apps, games or online radios. The big benefit of apps is that you can use the full features of the smart phone such as the camera which you cannot with mobile web apps.

The other downside is that all mobile operating systems use a different language to code in so a bit of knowledge in all would be needed. These would need to be maintained as different versions of OS come out all the time along with bug reports so keeping on top of all of the options is tough.

To have a successful app you need to really think about the idea you have and think if putting the time and energy is worth it or can the same be done using a HTML5 web application?

What About Responsive Design?

Responsive Web Design

Responsive Web Design

We are now talking about mobile websites.

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

So by having one site this can fit onto multiple devices maintaining the look and feel. Like many things there are pros and cons. One site that can work with everything is brilliant but does come with a couple of problems. Below are my important ones.


  • Cross-browser compatibilities – HTML5 and CSS3 are very powerful allies for building a responsive website, but we all know that there are still many compatibility issues. See my post the other day.
  • Loading times – Internet connection on mobile devices is still a greater issue than on common computers, which brings this topic to the table. Responsiveness requires extra server calls due to cross-browser and cross-platform compatibility issues. Media alternating also needs additional server calls, or else resizing a huge image every time will also result in slower loading times.
Ways around this would be to use the content of your site as create a separate site altogether that is fully optimized for mobile devices. For example visit on a mobile and on a desktop. By using a nice little PHP script we detect mobile devices and redirect users the the correct site. Here we use a central pool of content so we only have to edit once and design each site specifically for the devices that the site is being viewed on.

All in all there is a lot to think about. There are so many ways that you can have your content on a mobile device. I think the main point that comes out of this is that you have to have a presence on the web that can handle any device. Really can’t wait for the presentation and the questions that come along with it.

[notice]Presentation currently still under construction[/notice]

Skip to main content