Digital Strategy 2014
Facebook & Mobile Apps +
Responsive Design

Nicholas Fritzkowski
October 2013
Facebook & Mobile Apps + Responsive
Design
Topics of
discussion

Responsive and Adaptive Web Design
Facebook Apps and Tabs...
Mobile Devices
Mobile Devices To Eclipse PCs In
Q4 This Year
IDC (International Data
Corporation) has released its
latest ...
Mobile Devices
Activities undertaken online via mobile phones
Responsive and Adaptive Web Design

1

About Responsive Web Design

2

About Adaptive Web Design

3

Google and search eng...
Responsive and Adaptive
Web Design
What is Responsive and Adaptive Web Design?
Responsive and Adaptive web design is terms...
Responsive vs Adaptive
Responsive
Fluidly change and respond to fit any screen or device size.
Adaptive
Change to fit a pr...
About Responsive
Responsive Web Design
Uses CSS code to modify the website based on the size of screen it is
displayed on....
About Adaptive
Adaptive Web Design
Uses the server and code to detect which device it is on and switches
the site it shows...
Google and search engines
Google supports smartphone optimised sites in three
configurations:
• Sites that use responsive ...
Example of Adaptive Web
Design
Gold Coast
Convention Centre
Example of Responsive
Web Design
Gold Coast
Lawyers
Facebook & Mobile Apps

1

Facebook Apps and Tabs

2

Examples and Resources of Facebook Apps

3

What is a Mobile App

4
...
Facebook Apps and Tabs
Facebook Apps
Games and other full applications.
More often than not requests
permissions which can...
Facebook App Example
Candy Crush Saga
Facebook Tab Example

Heritage Bank
Volunteer of the year

The Anchorage
Competition to win a
dinner for 2
Examples and Resources
of Facebook Apps
Pre-existing Apps and Tab management sites.
Facebook App Center
Instagram, Pintere...
What is a Mobile App
Mobile Applications
For iPhones and iPads, Android phones and tablets, Windows
Phones, tablets and PC...
Technologies and
problems
Web Apps
Can work on every
device but doesn’t
appear in the app store.
Think like your
customer…...
Technologies and
problems
Native Apps
Requires a new app for
every device.
Possibility of wrapping
a web app with
framewor...
Examples and Resources
of Mobile Apps
How much does it cost
http://howmuchtomakeanapp.com/
Mobile Tuxedo
http://www.mobile...
Digital Strategy 2014:
Questions?
Questions?
Upcoming SlideShare
Loading in...5
×

Facebook & Mobile Apps + Responsive Design

3,898

Published on

Hear valuable insights into Facebook applications and the vast number of things you can do with them, mobile applications (and how to turn your existing website into an app) as well as that term we're sure you've been hearing around the block, Responsive Web Design.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,898
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Facebook & Mobile Apps + Responsive Design

  1. 1. Digital Strategy 2014 Facebook & Mobile Apps + Responsive Design Nicholas Fritzkowski October 2013
  2. 2. Facebook & Mobile Apps + Responsive Design Topics of discussion Responsive and Adaptive Web Design Facebook Apps and Tabs Mobile Apps
  3. 3. Mobile Devices Mobile Devices To Eclipse PCs In Q4 This Year IDC (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 apps
  4. 4. Mobile Devices Activities undertaken online via mobile phones
  5. 5. Responsive and Adaptive Web Design 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
  6. 6. Responsive and Adaptive Web Design What 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.
  7. 7. Responsive vs Adaptive Responsive Fluidly change and respond to fit any screen or device size. Adaptive Change to fit a predetermined set of screen and device sizes.
  8. 8. About Responsive Responsive 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.
  9. 9. About Adaptive Adaptive 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.
  10. 10. Google and search engines Google 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
  11. 11. Example of Adaptive Web Design Gold Coast Convention Centre
  12. 12. Example of Responsive Web Design Gold Coast Lawyers
  13. 13. Facebook & Mobile Apps 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
  14. 14. Facebook Apps and Tabs Facebook Apps Games and other full applications. More often than not requests permissions which can scare customers. Facebook Tabs Simple page with detailed information, competitions, forms, menu’s etc. For use with Facebook Pages a value add for companies.
  15. 15. Facebook App Example Candy Crush Saga
  16. 16. Facebook Tab Example Heritage Bank Volunteer of the year The Anchorage Competition to win a dinner for 2
  17. 17. Examples and Resources of Facebook Apps Pre-existing Apps and Tab management sites. Facebook App Center Instagram, Pinterest, Bigcommerce, Soundcloud, Bandpage. https://www.facebook.com/appcenter Involver Apps Coupons, Twitter, RSS, Flickr, Youtube. http://www.involver.com PageModo Custom tabs, maps, coupons, twitter, competitions, Pinterest, Instagram, sell products. http://www.pagemodo.com/
  18. 18. What is a Mobile App Mobile 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.
  19. 19. Technologies and problems Web Apps Can 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.
  20. 20. Technologies and problems Native Apps Requires 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
  21. 21. Examples and Resources of Mobile Apps How much does it cost http://howmuchtomakeanapp.com/ Mobile Tuxedo http://www.mobiletuxedo.com/ iTunes App Store https://itunes.apple.com/au Google Play https://play.google.com/store Windows Store http://www.windowsphone.com/en-au/store
  22. 22. Digital Strategy 2014: Questions? Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×