A place where we write words Ignition Blog

Welcome to the Ignition Development blog, where we talk about a wide range of technical and non-technical topics.

September 2013 Entries

Speed Comparisons across the iPhone range

This is an interesting (if slightly unscientific) video that shows the time taken to perform some typical operations on a mix of iPhones. Especially interesting (and relevant to our current series on mobiles) is the time taken to load a webpage.

Tags:
This blog entry was posted @ Monday, September 30, 2013 8:28 AM | Feedback (0)

Spotlight on the World of Mobile - Why do we need to treat mobile devices differently?

Before we start talking about how we might treat mobiles differently in the world of the web, let’s answer the question - why should we treat them differently? It’s obvious that mobile devices typically have smaller screen sizes than “full” or “desktop” browsers, and that the screens can be rotated to switch between landscape/portrait modes a lot more often than with desktops and laptops, but what other factors can come into play, and how might they affect the way a site looks, feels, and performs?

Even without optimisation, most sites will function fine to some degree on a mobile device (go ahead, try it), however there may be some limitations and issues. You may find yourself squinting to read small text as your mobile attempts to resize a page to fit it on your small screen. You might find links and buttons are harder to click due to their size, and that unless you zoom in so you’re only viewing a small part of the page, that you can end up clicking on the wrong thing and need to use the back button to try again. Pop up dialog windows may be hard to view or to close, and some functionality may not work properly or may run sluggishly (usually when complex scripts are involved - some devices are faster than others). Any Adobe Flash content won’t run at all on a large percentage of devices (thanks, Steve Jobs – seriously, thanks, Flash is horrible). You may also find that a site can look fine in portrait mode, but flipping the device 90 degrees to shift into landscape alters the experience entirely – or vice versa.

The point is that today’s websites have a lot of moving parts and interactive elements, both in their designs and in content - sometimes all the parts don’t translate across perfectly to mobile devices without a little bit of extra work (but sometimes they do!). Every site is a unique snowflake, so when you’re discussing an approach for mobiles for your site, the most useful thing you can do is simply to load it up on a range of devices (your phone, your friend’s phones, steal a phone!), and use it – see what works, see what doesn’t, and plan changes accordingly.

This is also the justification behind our suggestion that “do nothing” can sometimes be a valid approach – if a site looks “good enough”, then there may not be a need to make any changes (or to make a few minor adjustments only).

At the start of this post I mentioned the size of the screen - it’s pretty easy to see how screen size affects the way a site looks and feels on a device, however there’s a range of other technical and non-technical aspects that might not be so immediately apparent.

Unsupported features, and Extra Features

Some mobiles don’t support all features of a desktop browser, and some mobiles have extra features (or features which simply make more sense to use on a mobile than a desktop) – Geolocation is a good example of this. Geolocation is where the browser can make location data available to websites so they can tailor content based on where the user is – if you’ve not seen this, visit the NZ Herald website on a mobile with GPS built in, and look for the dialog box it raises asking to use your location. It’ll then use this to display bad news that’s tailored for your region. Don’t forget to close the Herald site quickly, in case you get distracted and read any of their attempts at journalism – we don’t want to make your day bad, we just wanted to show you an example of Geolocation on a mobile! While this can be done with desktops too (“sort of”) it’s much more relevant and common on mobiles where there’s a high chance that a GPS device might be present.

Mobile devices are… mobile!

Hopefully this isn’t a surprise to anyone! They’re often used on the go which means their users aren’t always on a fast wired connection, and may be using their cellular data (GPRS, 3G, and 4G if you’re in Auckland and have a boat) to browse the web. Cellular data speeds can vary greatly, so anything you can do to ensure your site loads quickly on a mobile is usually much appreciated by users, as it saves them both time and money through reduced data charges.

Less caching

Firstly, what is a cache? Put simply, a cache (in this context – as caches are used in many parts of computing - http://en.wikipedia.org/wiki/Cache_(computing)) is a location where your browser stores resources that it has downloaded, in case you need them again. If something needs to be loaded and it’s in cache, then it’ll do so much quicker than if it needed to be re-downloaded. Mobiles and tablets have much smaller caches than desktops, so the chances of resources being in cache is lower, which means that large sites can appear much slower on a mobile device.

JavaScript performance

JavaScript is used by many websites, some more than others, and large amounts of it can have performance issues in some mobile devices. Mobile JavaScript performance is improving all the time, but it’s still not guaranteed to be amazing on all mobiles, so if your site uses complex JavaScript then you may want to hide that from lower spec devices (the graph on the right shows some performance figures that illustrate just how much the performance can vary) or ensure that the code is optimised so it runs as smoothly as possible.

Non-Technical Reasons

Everything that we’ve discussed so far is more about the device and has a technical aspect to it, but there are also many non-technical aspects worth considering. If your visitors are visiting your site on a mobile phone, then they might have a specific task in mind, so you want to do everything you can to help them complete that task as quickly and easily as possible. For example, think of a site for a restaurant - odds are that mobile visitors might be wanting to find the contact page for phone or address details, or to quickly make a booking, so make it easy for them to find and use those things rather than forcing them to wait 20 minutes while they have to download the latest 1000 Instagram photos of people’s breakfasts that are proudly displayed on the site.

To take that example a step further, here’s a few possible things that the restaurant above could think about doing when they detect a mobile visitor:

  • Click to call integration for the phone number which could be displayed in large font, handy for people with stubby fingers or using dialing wands
  • Add some interactive map functionality enabling users to click to get directions – integrating with the functionality of Google Maps makes this sort of functionality easy to add to pretty much any situation
  • Ensure that the enquiry/booking form is easy to use on a small screen, is optimised as much as possible for 1 thumb typing, and doesn’t contain 324983948 mandatory fields. Ensure the form offers suggestions as you type where possible, default values where relevant, and that using the form isn’t going to end up with a device being thrown out the window of a moving car (not that we’re implying anyone would ever use such a device while driving, that’s illegal!).

Some of the “Why” reasons that we’ve covered above might not apply to all sites (because as we said, every site is a unique snowflake!), but odds are that some of them will. Each of these reasons is a factor to consider when deciding how you want your site to handle mobile devices. Do you need a special mobile optimised version of your site? Maybe you only need to make a few quick fixes to the desktop site to make the experience better on mobile devices, or are you lucky enough to not need to do anything?

There’s always value in asking ‘Why’ before deciding ‘How’, and it’s the ‘How’ that we’re going to move onto with our next post.

 

-Ross

This blog entry was posted @ Friday, September 27, 2013 8:51 AM | Feedback (0) | Filed under Technical

It’s a good idea, we think!

I came across this in my travels, and it seemed like sound advice!

This blog entry was posted @ Saturday, September 14, 2013 11:32 AM | Feedback (0)

Spotlight on the World of Mobile, an Introduction

Over the past few months we’ve had a lot of interest from customers about how their sites looked on mobile devices. There were some common themes in the questions we were hearing. How will my site look on a mobile phone? Why should I treat mobile phones differently? Should I create an app for my business? How will a mobile site affect SEO? Magnets, how do they work?

We’ve just finished work on 2 large mobile specific projects and we’re about to kick off 2 more, so it felt like a good time to put together some information for customers and other readers about mobile devices, websites, and apps.

So here we are. Hi! Welcome to the World of Mobile. This series of posts is going to be customer focused, however it will contain the odd bit of (hopefully appropriately explained) technical jargon. The aim is to provide some food for thought for anyone looking to target audiences on mobile devices, and to help you understand the issues and challenges associated with them.

We’ll talk about the main approaches available:

  • Do nothing – seriously, it might not be as mad as it sounds, load your site on a couple of different phones and see how it looks!
  • Create a website using a single responsive design (what is a responsive design? Don’t worry, we’ll cover that!)
  • Create a site with a design targeted specifically for mobile devices
  • Develop a native application

We’ll cover the pros and cons of each approach, as well as the costs.

Finally we’ll talk a little bit about our own Site Foundation Framework software, and give you a rundown on the features that it provides that can help you tailor your site’s experience to the world of mobile.

Definition of Terminology

Terms such as mobiles, tablets, or desktops can mean different things to different people, so here’s how we’re using them for the purposes of this series:

Mobiles – aka “mobile devices”, a portable device such as a smartphone or an iPod touch. We don’t use ‘mobile phones’ as that old 10 year Nokia sitting in your drawer isn’t going to be much use in today’s world. We’d probably use the term ‘smartphones’ if it wasn’t for the existence of the odd exception such as the iPod touch, which is not a phone.

Tablet – devices such as the iPad/iPad mini and Android Galaxy Notes and Google Nexus. While the sizes of these vary, they’re typically larger than a Smartphone. Here’s a tip – if you want to tell if a device is a tablet, then ask yourself, “Would I feel completely stupid holding this to the side of my head and conducting a phone call using it?” – if the answer is yes, then the device is probably a tablet.

Desktops – aka desktop computers, is the somewhat clumsy term we’re using to describe a “normal” computer. It’s a clumsy term because the grouping includes laptops, however with the computing power and screen sizes that today’s laptops possess it’s not a terrible thing to group these two together.

We hope that you’ll find this series interesting, and as always we welcome (and encourage!) your feedback. If there’s anything specific you’d like us to cover, anything we mentioned that you’d like us to expand on, or if you’d like to get in touch with us and talk about a mobile or web specific project then please drop us a line.

 

-Ross

This blog entry was posted @ Wednesday, September 11, 2013 1:35 PM | Feedback (0)