Published: 12 September 2014
Mobile technology use is growing quickly
Use of Mobile Technologies in business is gathering momentum. Here’s a guide on this trend and what it means for B2B marketers and business owners. This guide will help you
- Win approval if you think your company needs a website that supports mobile technologies.
- Talk intelligently with an IT professional if you have a project to make your website support mobile technologies in mind.
More and more executives are incorporating mobile technology into their daily work lives:
- According to Forbes C-level executives prefer obtaining the information from the Internet over trade shows, magazines, newspapers or personal networks.
- The Financial Times reports that over 60% of executives now use tablets.
- Forbes also reports that nearly 70% of executives under 40 search on web enabled mobile devices for work related content at least once a day.
- Mobile internet traffic is growing very rapidly, Readwriteweb say that mobile internet traffic represents 15% of all internet traffic and that this is going to double within 18 months.
Check out our infographic if you haven’t seen it already.
Mobile Technologies are an essential communications channel
Making your product and service information available to potential customers, lenders, investors, employees and suppliers using mobile technologies is now essential.
Mobile Technologies include
- Tablets (without physical keyboards, or with detachable keyboards or with a convertible laptop with a permanent keyboard)
Mobile technology screen sizes can span from 4” all the way up to 15”, with almost every conceivable screen size in between. Different platforms for web content delivery are evolving very quickly and we need a way to deliver content and functionality that will work across all existing platforms and new ones we don’t even know about yet.
Focus on the screen size not the technology
The answer is to focus on the screen size of the device rather than the type of device it is. We’re not so much concerned whether the user is on an iPhone or a Surface but rather what screen real estate they have available to view and interact with your system.
Here is an example of a website that automatically adjusts itself depending on the screen size being used. This is the website on a monitor:
This is what it looks like on a smartphone (actual size):
As you can see the layout, font sizes, content and image sizes have automatically adjusted themselves to allow the content to be easily read and navigated even though the screen size is so much more limited on the smartphone.
Responsive Web Design (RWD) is the way to go
This approach to web design is called Responsive Web Design and it’s defined as: an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors) - Wikipedia
This is the contents of a web page and also defines the structure – what should be grouped together.
This is the code behind the web page. It’s used to apply any logic and do fancy effects.
Cascading Style Sheets (CSS)
CSS are the rules that are used when the contents of the web page are rendered in the web browser. They define, among other things, what is shown or hidden, the color of things, and where boxes of information are shown.
Responsive Web Design chiefly focuses on the CSS and depending on the size of the screen different rules are used. So if the page is being shown on a small screen you can say ‘hide the menu bar and show a menu bar icon instead’ or ‘hide the ads’.
What to keep in mind when building a website using RWD
Are legacy devices still relevant?
Firstly you need to consider what devices you are targeting! But that doesn’t make any sense? I thought we were getting away from devices? Well yes and no. Unfortunately there are still a lot of legacy devices with really old browsers that have no idea what CSS rules are.
Most Responsive Web frameworks start by showing a website that will work nicely on a desktop web browser and then applying CSS rules as necessary as the screen gets smaller.
Unfortunately when the browser on the device has no knowledge of how to apply those rules you end up with a desktop version of the website on a very small screen!
If you find yourself having to support devices such as these you need to take a slightly different approach to responsive design. You have to start with a mobile design and apply rules to cater for bigger displays such as desktop PCs.
For instance by default the ads and menu bars might be hidden or minimized and the site will rely on CSS rules to show them as the display gets bigger.
Unfortunately a lot of the Responsive Web Design frameworks don’t work like this out of the box and hence there is a lot of hand coding involved. So before going down this road make sure it is really required as there will be a big impact on development time and budget.
Prioritize your content
Secondly, you really need to think about what it is that you want to be showing to the users on the different devices. You need to take a good look at the full website and decide what elements can be hidden on smaller screens. Typically the things that get hidden first are large company logos at the top of the page.
Mobile Websites vs Responsive Website Design
Another approach to making websites more accessible on mobile devices (or devices with smaller screens) is building a mobile website. A mobile website is really just a set of web pages targeted at small screen devices.
So when would you use a set of web pages directly targeted at smaller devices over a Responsive Website Design? Well first off it’s important to understand that these technologies are in fact complementary and not mutually exclusive. Responsive Website Design principals should be applied to all web pages, whether they are targeted at smaller screen devices or not. The real difference comes with the content that you want to be showing to the user.
Very often when the user is using a device with a smaller screen they are wanting to accomplish specific functions. For instance:
- Track time
- Enter expense claims
- Find contact details
- Job instructions
- Order materials
But they wouldn’t necessarily want to do in-depth analysis of their financials.
A classic case is internal business applications – they often have lots of grids, charts, etc. These don’t translate well to mobile and no amount of Responsive Web Design is going to give a mobile user an enjoyable experience. In order to make it mobile friendly you have to enable the user to interact with the data in a different way. For example, instead of using a grid you might display the information in the form of ‘cards’ that users can search and flick through.
I suggest you should only build a separate set of mobile web pages if your users have specific mobile requirements and the content needs to be quite different from that of the main website.
Modern mobile devices have all sorts of touch interactions – swiping of pages, pinching, zooming etc. Some come for free with the web browser but some have to be explicitly programmed, in order to take advantage of these functions one needs to use a set of mobile web pages.
Mobile Website Development Frameworks
We recommend using a responsive web development framework when building new websites. Such a framework gives developers a set of tools that allows sites to be developed efficiently without needing to reinvent the wheel.
There are a number of good ones freely available. The market leader is Twitter Bootstrap.
As the name suggests it is built by the developers at Twitter and is well tested and documented. There is very little overhead to learning and building with it and CBS now use it on all our new website projects.
Actually deciding on what to show or hide on smaller screens is more work but if you have the core framework plumbed in from the beginning it makes life a lot easier. It can be retrofitted to some websites, the work required in doing so really depends on the complexity of the website.
So to Sum Up
The proportion of people, who are important to your business, are accessing your website using mobile technologies is growing, and its growing fast.
If your website can’t support mobile technologies then you could be missing out on important business opportunities.
Making your website support mobile technologies should cost around [rule of thumb].
Responsive Web Design is the approach taken to make websites automatically adapt to the screen size of any device being used.
Legacy devices can make things more technically complicated and this should be taken into account if they need to be supported.
Creating mobile-specific websites should only be necessary if there are specific functions that the main website doesn’t support or the content to be displayed is unique to mobile devices.
Developers should be using a responsive web framework so that they don’t have to reinvent the wheel.