Mobile Web Design Essentials for Smartphones

1. JRN 440Adv. Online JournalismInternet Growth Wednesday, 4/11/12

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

3. 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

4. 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

5. Path • Social networking site for phones with 150 in network MAXIMUM • Path is intimate network • FB is acquaintances • Twitter is public announcements • Compare website https://path.com/ • 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

6. Instagram • Facebook is buying for $1 (photosharing app) • What it is compared to other photosharing sites • http://blog.appboy.com/2010/10/5-things-instagram-got-right-that-others-before-it-couldnt/ • Look at their web site…http://instagr.am/ • 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

7. 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

8. 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

9. 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

10. 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

11. Which to design? Mobile landing pages or mobile apps? • Native code (HTML markup) versus web app • https://www.youtube.com/watch?v=fchbLzwtexk

12. 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

13. 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

14. iPhone App User Interface Guidelines Pretty rigid guidelines

15. Android App User Interface Guidelines • http://developer.android.com/guide/practices/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 http://developer.android.com/guide/practices/ui_guidelines/icon_design.html (they come in as layered Photoshop files – awesome!)

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

17. 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

18. 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).

19. 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 http://developer.android.com/guide/topics/ui/notifiers/notifications.html) • The battery is low; a picture was captured • Data has been downloaded • Mail has arrived