JRN 440 Adv. Online Journalism Internet Growth Wednesday, 4/11/12

Class Objectives Lecture Designing content for mobile consumption Homework Project 3 due by 2:05pm on Wednesday, April 25 th Read article on NY Times (Wortham, 2012) y/instagram-deal-is-billion-dollar-move-toward- cellphone-from-pc.html?_r=1&hpw# y/instagram-deal-is-billion-dollar-move-toward- cellphone-from-pc.html?_r=1&hpw#

Personal question to smart phone users What wi-fi network do you connect to? How to do this with Cmich Gold? Or do you use cmich_open? Warning: Because of “new” CMU website, all Google searches result in broken hyperlinks

From Article Companies that start with a Web site then try to shrink it into an app face a tough challenge. Screen space on mobile devices is at a premium. Cut back on clutter Streamline their services Avoid slow load times Avoid stuttering interruptions

Path Social networking site for phones with 150 in network MAXIMUM Path is intimate network FB is acquaintances Twitter is public announcements Compare website Watch the “ad” (and try to forgive them for sticking to gender specific stereotypical roles) With mobile landing page Pretty similar looking MINUS THE GIGANTIC HAND

Instagram Facebook is buying for $1 (photosharing app) What it is compared to other photosharing sites instagram-got-right-that-others-before-it- couldnt/ Look at their web site… It’s NOTHING! It directs you to their apps. This company STARTED with mobile apps Versus starting with web pages and then going to mobile apps

Mobile Devices include Candy bar type cell phones Clam shell cell phones Smart phones (for our project) Blackberries Screen sizes are not standard Candy bar type phones have smallest screens and lack ability to zoom in and out

Smart phone web site design considerations Stylistic similarity to web page Typefaces, logos, color, features? Color scheme Changing brightness ability of phone Landing page hyperlink (one every page?) For dropped connections Sound? Be careful Users’ environments may be noisy

Smart phone web site design considerations How much will you teach the user? Instructions on the landing page? Remember, the growing group of people with these devices are older than you are.. And they are used to using a mouse/keyboard Examples  Double tap to zoom in /out  Touch the undo button on your phone to go back a page  Touch the search button on your phone to search our site  Swipe down on your phone screen to refresh the page  Click and hold to bring up “right click” features

Phone screen property/space Less space than a laptop/pc Is there an advertisement taking up space? How much space does top part of browser take up User may NOT be able to rotate to landscape orientation

Which to design? Mobile landing pages or mobile apps? Native code (HTML markup) versus web app k

Smart phone applications vs. mobile pages Apps are able to feel more intimate/native to your phone Apps take advantage of phone’s internal features Can customized lower button/features Utilize note-taking, calculator Apps utilize the “hidden” parts of the phone Top, right, left sides that are not seen (and do not exist) on web pages

App designs Designed for touch interface… think about how you hold smart phone and where your thumbs are Better to give visual feedback (than vibrations) Text size growing when you tap a letter Selected word highlighted in yellow Programming language to design apps is JAVA (which is, in no way, related to Javascript) or Objective C. YOU will not know how to do this- partner with a serious computer programmer

iPhone App User Interface Guidelines Pretty rigid guidelines

Android App User Interface Guidelines ui_guidelines/index.html ui_guidelines/index.html Click on launcher icons Click on menu icons (notice design terminology/instructions, file format preference with no background, can we say Photoshop?) Can download icon templates es/ui_guidelines/icon_design.html (they come in as layered Photoshop files – awesome!) es/ui_guidelines/icon_design.html

4 parts to an application (Android) An Activity: represents a single screen with a user interface. An application might have 1 activity that shows a list of new s 1 activity to compose an 1 activity to read an . Although the activities work together to form a cohesive user experience in the application, each one is independent of the others. A different application can start any activity A camera application can start the activity in the application that composes new mail, in order for the user to share a picture.

4 parts to an application (Android) A Service: runs in the background to perform long-running operations or to perform work for remote processes. Does not have a user interface. A service might play music in the background while the user is in a different application

4 parts to an application (Android) Content provider: manages a shared set of application data. Through the content provider, other applications can query or even modify the data The Android system has a content provider that manages the user's contact information. Any application can query part of the content provider to read and write information about a particular person (thus changing that contact information).

4 parts to an application (Android) Broadcast receiver: responds to system- wide broadcast announcements. Use a status bar notification to alert the user. (see here otifiers/notifications.html) The battery is low; a picture was captured Data has been downloaded Mail has arrived