A Beginners Guide To Responsive, Mobile & Native Websites 2013 Enhance.ie.All Rights Reserved.

Transcription

1 A Beginners Guide To Responsive, Mobile & Native Websites 2013 Enhance.ie.All Rights Reserved. 1

2 The Mobile Web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone, a feature phone or a tablet computer, connected to a mobile network or other wireless network. Source Wikipedia An Overview More and more websites are being accessed on smartphones and tablet devices. At Enhance, our own website has seen mobile traffic go from 11% to 25% over the period of January 2012 to January This trend will only continue. The device a user browses the internet on impacts both their ability to find your website in search engines and their experience once they get there. A smaller screen is only one aspect of the experience on a smartphone or tablet a user is much more likely to be on the go or in a busy environment with many more distractions than at home on the desktop. Your analytics will tell you what users are generally looking for on your website from different devices and this is often very different. It is your responsibility to consider the experience of someone using your website no matter what environment they are in, by designing your website to give users what they want with the minimum of friction. Future proof your website and build according to real industry & market trends. Consider your mobile strategy 2

3 Your Options 1. Responsive Design A website that is designed to be responsive checks the dimensions and orientation of the browser a user is viewing the website on and re-arranges the elements of the page to fit these dimensions. This demonstration will give you a general idea of how it works type in your own web address in the top right corner to see what it looks like on a phone. 3

4 2. Mobile Website A mobile specific website is a website designed to fit the dimensions, browser memory and loading speed of a smartphone and/or tablet. When a user views the standard website on a small screen, the website checks the dimensions of the device and redirects the user to a separate web address, usually something like this: m.mywebsite.com, as opposed to A mobile website will be a stripped back version of the main site, removing items that mean the page takes longer to load, e.g. advertising. Most or all of the functionality of the main website will remain, but the navigation and design will be built to suit a small touch screen rather than a large screen with a mouse. 3. Native Mobile Apps Smartphones, like desktops, use an operating system to run applications. Most desktops and laptops use Windows, by Microsoft, whereas most smartphones use either ios, by Apple, or Android, by Google. If you build a native mobile application, you are building a programme that is specifically designed to run on one of these operating systems. It will run faster and with less bugs, but it will only be available on that operating system and a whole new application will have to be built for any other. For 2013 at least, the state of the technology means a mobile app won t run on desktop computer. With a mobile application, the operating system on the phone allows you to access much more of the sensors like the camera or location data, and you don t need to run it through a browser. Mobile apps are usually downloaded from either the Apple s App Store or Google Play, the Android equivalent. 4

5 Comparisons 1. Responsive Design Vs Mobile Website A choice between building a website designed responsively or building a separate mobile specific website will always come down to Vs business requirements. For example, often a business may have a very specific goal for their mobile users and do not need to provide all of the functionality of their main website. If a mobile website does not need to be regularly updated in line with the main website, this is also a better option because of the slightly lower cost of development. Usually we recommend a responsive website because mobile web browsing is growing so rapidly and the costs of implementing responsive design are far smaller in the beginning than a retrofit later on. There are also great advantages in terms of SEO because both a responsively designed and mobile specific website will be ranked higher by Google in mobile search, but a responsively designed website will already have backlinks and authority, whereas a mobile specific website will be starting from scratch and have no backlinks yet. For content heavy websites we recommend a separate mobile website because responsive websites still require all of the content to be loaded to the page, whereas mobile websites are much lighter.strategy and has generated considerable sales from each mail-run. 5

6 2. Mobile Websites Vs Native Mobile Business decisions govern the decision to go native or mobile web application, which Vs means you need to consider the purpose of the application, e.g. Marketing, Data collection, Gaming, etc Issues to be considered include: Audience devices, e.g. do the majority of your users use a particular operating system? If the iphone dominates in your target demographic then native mobile could be considered. Same goes for any other operating system How much data do you require on a person, e.g. location, personal details, contacts? Native mobile applications have deeper access into both the phone s sensors and the owner s personal information How easy do you want your application to be found and shared? Web applications that run through the browser are found easily through google are shared as urls. Native mobile applications are slightly harder to share online due to the fact that you have to download them - Games are much easier to run as native applications If your application is required to be used regularly and habitually then native applications are more appropriate as they run faster and more efficiently in the phone Do you require the application to run on the phone persistently, even with no internet connection? Then native applications are far superior because browser based applications cannot function in this manner Budget? Native application are far more expensive due to the lack of a common code base across operating systems and the diversity of functionality in a native application as opposed to what is usually required by a mobile web app. 6

7 3. Responsive Design Vs Native Mobile The benefits of using responsive design against a native application are largely the same as those for using a mobile web app as they are both browserbased. But whereas a mobile web application wins a lot on budget, a responsively designed website only wins a little. Vs HTML5 These days, with so many devices and operating systems in the market, software developers value very highly the portability of an application - which means how easy it is to make it run on another type of computer system. This is why most modern applications use languages like HTML5 in their native mobile applications. HTML5 will run on any operating system, reducing the amount of code you write that is specific to one operating system. Very often, an entire application will be built on cross-platform technologies like PhoneGap, and these can occasionally run faster and more efficiently than the native mobile equivalents, once the correct programming techniques are followed. These days, web technologies such as javascript & HTML5 are becoming more and more compatible with the native technologies behind ios and Android, and it is likely that all applications will be built in technology that can be easily ported to run in any browser or operating system. And even if this does not wholly come to pass, in the fast moving technology environment, it is highly uncertain which operating systems will be dominant in the medium to long term. Therefore, a partial cross-platform solution is highly recommended. 7