Digital Strategy 2014Facebook & Mobile Apps + Responsive Design

Nicholas FritzkowskiOctober 2013

Facebook & Mobile Apps + Responsive Design

Responsive and Adaptive Web Design

Facebook Apps and Tabs

Mobile Apps

Topics of discussion

Mobile DevicesMobile Devices To Eclipse PCs In Q4 This YearIDC (International Data Corporation) has released its latest devices forecast arguing that tablets will overtake PC shipments by year end.

Mobile phone online usage (ACMA 2012)9.2 million Australians went online via their mobile phone in the six months to May 2012, with 4.4 million accessing the internet using a tablet.

Smartphone and tablet appsDuring June 2012, 4.45 million smartphone users aged 18 years and over downloaded a mobile app, compared with 2.41 million during June 2011 - an 85 per cent increase.

Mobile DevicesActivities undertaken online via mobile phones

1 About Responsive Web Design

2 About Adaptive Web Design

3 Google and search engines

4 Example of Responsive Web Design

5 Example of Adaptive Web Design

Responsive and Adaptive Web Design

Responsive and Adaptive Web DesignWhat is Responsive and Adaptive Web Design?Responsive and Adaptive web design is terms used for mobile friendly versions of web sites. Both Responsive and Adaptive allow websites to be viewed on mobile devices from iPads and iPhones, to Android tablets and phones, Surface tablets and Windows Phones.

Responsive vs AdaptiveResponsiveFluidly change and respond to fit any screen or device size.AdaptiveChange to fit a predetermined set of screen and device sizes.

About ResponsiveResponsive Web Design

Uses CSS code to modify the website based on the size of screen it is displayed on.

Responsive web design relies on HTML5, CSS3 and Javascript and therefore works best in relatively modern web browsers.

Responsive web design is best suited because of the many devices available, over 1000 different devices and changing daily.

Google loves responsive as all content gets carried over.

Slight design limitations due to grid format required.

About AdaptiveAdaptive Web Design

Uses the server and code to detect which device it is on and switches the site it shows.

Adaptive requires you to develop and maintain two separate websites in separate areas of your site.

With a separate website you can fine tune and optimize how your site shows on targeted devices.

You can optimise images specifically for mobile and low bandwidth devices.

SEO, content and links can be mobile centric targeted for quicker viewing.

Does not require reworking on the main site layout to adjust for mobile. Which saves time on some existing sites who want a mobile presence.

Google and search enginesGoogle supports smartphone optimised sites in three configurations:• Sites that use responsive web design, i.e. sites that serve all devices

on the same set of pages and use CSS to change how the page is rendered on the device. This is Google's recommended configuration.

• Sites that dynamically serve all devices on the same pages but change depending on whether the device is a desktop or a mobile device.

• Sites that have separate mobile and desktop URLs.

Why responsive design:Google recommends using responsive web design because it has many good aspects:• Using a single page for a piece of content makes it easier for your

users to interact with, share, and link to your content.• No redirection is needed for users to get to the device optimized

view, which reduces loading time. • It saves resources for both your site and Google's crawlers.

https://developers.google.com/webmasters/smartphone-sites/details

Example of Adaptive Web Design

Gold Coast Convention Centre

Example of Responsive Web Design

Gold Coast Lawyers

1 Facebook Apps and Tabs

2 Examples and Resources of Facebook Apps

3 What is a Mobile App

4 Technologies and problems

5 Examples and Resources of Mobile Apps

Facebook & Mobile Apps

Facebook Apps and TabsFacebook AppsGames and other full applications.

More often than not requests permissions which can scare customers.

Facebook TabsSimple page with detailed information, competitions, forms, menu’s etc.

For use with Facebook Pages a value add for companies.

Facebook App ExampleCandy Crush Saga

Facebook Tab Example

Heritage BankVolunteer of the year

The AnchorageCompetition to win a

dinner for 2

Examples and Resources of Facebook Apps Pre-existing Apps and Tab management sites.

Facebook App CenterInstagram, Pinterest, Bigcommerce, Soundcloud, Bandpage.https://www.facebook.com/appcenter

Involver AppsCoupons, Twitter, RSS, Flickr, Youtube.http://www.involver.com

PageModoCustom tabs, maps, coupons, twitter, competitions, Pinterest, Instagram, sell products.http://www.pagemodo.com/

What is a Mobile AppMobile Applications

For iPhones and iPads, Android phones and tablets, Windows Phones, tablets and PC’s.

Three main app stores, Apple’s App Store, Google Play (Android), Windows Store.

Technologies and problemsWeb AppsCan work on every device but doesn’t appear in the app store.

Think like your customer… when was the last time you downloaded an app for a local business?

Web apps solve this issue by showing the web app to the client when they visit your site via their mobile browser.

Using adaptive design you can tailor your site as a web app to your customers.

Technologies and problemsNative AppsRequires a new app for every device.

Possibility of wrapping a web app with frameworks.

Allow for functionality higher than just your website.

Companies who might benefit from a mobile app.

Pizza chain who wants to offer the ability to order from the app.A church who wants to give members a way to donate, or download info.

Examples and Resources of Mobile AppsHow much does it costhttp://howmuchtomakeanapp.com/

Mobile Tuxedohttp://www.mobiletuxedo.com/

iTunes App Storehttps://itunes.apple.com/au

Google Playhttps://play.google.com/store

Windows Storehttp://www.windowsphone.com/en-au/store

Questions?Digital Strategy 2014:Questions?