Facebook & Mobile Apps + Responsive Design

5,396 views

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
5,396
On SlideShare
0
From Embeds
0
Number of Embeds
2,001
Actions
Shares
0
Downloads
20
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?

×