Do you ever hear people talking on the train or at work about mobile technology and not have a clue what they’re on about?
Heard terms like ‘adaptive’ and ‘responsive’ being banded around like the Kings new clothes?
Maybe you’ve tried to blag it yourself and asked if a web site is ‘mobile optimized’ to appear cool and in the know, despite not actually knowing your android from your elbow.
In this fast moving world it’s scarily easy to suddenly become out of touch, especially when it comes to technology.
Having been exposed to lots of mobile related terminology recently at work I’ve felt a little dumb at times and had to ask a lot of questions (and do a little research in my own time) in order to get my head around it all. After all, just pretending to know what people are on about and hoping that it all magically falls into place would be rather dysfunctional – don’t you think?
Luckily I found out that like most things in life, once you take a bit of time to understand something better, it ain’t as scary as you may have first thought. You just need to plan a bit of time in to pull your finger out your butt and do some digging. Even 10 minutes a day can help.
Anyway – here’s the results. I couldn’t find a list of everything in one place, so I created this list. I hope it helps to demystify and enhance your knowledge and understanding of mobile technology and terminology like it did for me. It only took a couple of hours to knock it together. Time very well spent, cos now I don’t feel dumb when talking about this stuff. Score!
Mobile compatible
Let’s start with a nice easy one. A mobile compatible web site is simply a normal website designed for desktop use that is viewable on a mobile, all be it just a smaller version.
When looking at these sites on your mobile you might have to pinch and zoom then scroll left and right to find and click on what you need. There’s nothing fancy going on here. The website will work, you can type stuff, view stuff, but it might be a bit awkward to do some stuff because these websites have been designed for web browsers on PCs with much larger screens and navigation using a mouse.
Here’s an example
Mobile friendly
Switch off vibrate mode, stop ringing yourself and take your phone out of your pants – that definitely ain’t mobile friendly.
What is, is having a website that works well when viewed on a mobile device, i.e. you can easily read the page and find information you are looking for and it’s not’s too hard to use.
Google have a comprehensive online guide about how to make a mobile friendly website.
Mobile web site
A mobile web site has been specifically designed for use on smartphones. When a website detects you are trying to access it via a mobile browser the site automatically redirects you to its mobile counterpart (if there is one) for a more convenient experience. You might have noticed the URL ends with .mobi, rather than .com on these sites.
Mobile web sites render their pages in narrow columns and often provide only a subset of their regular desktop web site to make the customer experience better. They will definitely be mobile friendly. ‘But how do they do this?’ I hear you ask…
Adaptive
Adaptive web design is one of two main methods for building websites (the other is responsive) – both allow a single design and code base to be used across a range of desktop and mobile devices. Both methods use style sheets and grid systems to adjust fonts, image size and layout to fit the device’s size, but in slightly different ways. The overall idea is build once, see it everywhere.
Adaptive design uses a set of fixed sized layouts. This allows for a consistent layout regardless of whether you view it on your phone or tablet, as the site detects the device being used, and will present the best designed layout to match the device.
So adaptive design is the way to get sites that look their best on the devices and screen sizes you use – but this is also it’s main flaw: there’s too many permutations to design for every screen resolution, every device, and ever browser window size someone might have. This is where responsive design comes in…
Responsive As you might expect sites built in this way ‘respond’ to the size of the screen they are being viewed through but rely more on a constantly changing layout that adjusts content based more on percentages (not fixed grids), without needing to detect the specific device.
Here’s an example of responsive design – see how the left side navigation jumps to the top as the width is decreased, and icons and images are resized, moved or removed.
Which is better? Don’t even go there sister…this appears to have been the source of mass debate in recent years, but it looks like today both methods are often employed together in a hybrid model. Adaptive layouts provide a consistency of design for specific devices with responsive layouts scale content to support of all other screen sizes between those key sizes.
Mobile optimized
Much more sophisticated development will have been done here very much with mobile users in mind from the get go. When a mobile optimized site is being viewed on a mobile device it will present differently than when viewing the same site on a desktop, way beyond using a responsive layout. How?
reduced clutter i.e. less icons, larger navigation buttons
avoids making users type unless absolutely necessary
automatically displaying the number keypad when fields required a number value
automatically providing @ and .com on the keypad when a field requires an email or web site address
customised image carousels
Plus here’s a hilarious one I read –
The optimized site is “thumb navigable” – i.e. includes buttons big enough so that people – even those who have big ring sizes – are able to navigate the site using thumbs and index fingers.
No problem for the fatties then…
Here’s an example:
Native
This is another term for a mobile application. Not a web site that has been designed to be used on a mobile, but an app that has been designed only to be downloaded and used on that mobile device. Think of anything in the Apple app store or Androids Google play store.
Native mobile apps live on the device, are quick and reliable, but are expensive to develop because they are tied to one operating system, forcing the company that creates the app to make duplicate versions that work on other platforms. So whilst you can play angry birds on your iPhone and your wife’s Samsung and it looks and works in exactly the same way, that’s actually 2 separate apps, with 2 separate sets of code behind it.
App to web
Rather than this being a thing, it’s more of a thang. What I mean is that this refers to the journey the customer goes through i.e where they are doing something as opposed to what they are doing.
So you may start off in a native app, like angry birds, but choose to navigate to a function that is stored on the companies website, hence ‘app to web’. Often you won’t even be aware that you’ve been taken out of the app, as the outer wrapper of the app is still in place. This is designed to give us, the customer a consistent experience, despite what is going on behind the scenes. It also saves the company from having to build multiple native versions of common functions that already work really well on their responsive web site. Clever stuff…
Web app
This is where it starts to get even more interesting – mobile web apps are not real applications; they are really websites that, in many ways, look and feel like native applications, but are not implemented as such. They are run by a browser and you access them like any web page i.e. navigate to a URL, but you are then have the option of “installing” them, which typically ends up as an icon on your phones home page.
A good example of this is MailOnline, the daily mail web app which has this icon on your home screen, but opens a mobile optimized web site (which you now understand – nice one!)
Rendered
This is another term used to describe the automatic adjustment of content to provide a good mobile experience, which is achieved through…yep, you guessed it – adaptive and /or responsive design.
I’ve noticed that people tend to use rendered / rendering more when talking about viewing emails on a mobile device. This is another complex beast, because all email clients render HTML/CSS differently with many things affecting what we end up seeing. Apparently the mail exchange server, the preprocessor, the browsers, the rendering engines, (whatever the hell they are) all affect the way your message is going to be displayed. These vary from client to client; browser to browser; server to server.
For example:
Anyway this is starting to get a bit technical, which confuses me, so I’ll stop there, this is a beginners guide after all. At least now you know what they are on about when they are talking about rendering.
I hope this helped you in some way to understand mobile terminology better. Please feel free to share it with everyone you know who might benefit from it by sending them the URL, or tweeting the link below.
Powered By the Tweet This Plugin
As a parting thought I think it’s still important to validate the terminology (for mobile and anything else) that your organisation uses. There may be nuances and variations that have been adopted that don’t fit exactly with the industry standards used in this post. There also may be some blaggers acting dysfunctionally and throwing out terms which they pretend to understand but don’t really.
But here’s the good news – after reading this post, you ain’t one of them any more. 😉
What other mobile terms have you heard but didn’t understand?
There must be loads more out there, so let me know and I’ll do my best to help you understand them, and will add them into this post for others benefit.
Comments