Week 12

Week 12 – Topics

What is a smartphone versus a feature phone?
Differences between mobile Web & mobile Apps
Mobile Website Critiques
Mobile Design Considerations
Extending Your Capabilities
Mobile Usage
Other Important Considerations
Getting Back
Sticking to the Bottom
Cover the Hover
Layout
Responsive versus Adaptive Web Design
Ten Top Mobile Websites

In-class: Working with team

Readings for this week
What’s a Smartphone? (for Web Designers)
When & Where Are People Using Mobile Devices?
Mobile web design tips: mobile should come first


Week 12– Assignments
Individual  Project

1. Redesign the SMC Corsair Connect Mobile website:  http://www.smc.edu/mcc.

Using Photoshop, create Design Comps for a redesign of the new Corsair Connect mobile site. The website  runs on any smartphone browser that supports HTML5, CSS3 and JavaScript. This site is considered a Web app. It uses the meta tag in HTML5 to get the viewport size, uses CSS to control the content, and a framework like JQuery Mobile to package and maintain the many different form factors.

Think about how you can improve the experience for the mobile user.  Keep these points in mind while you’re designing:

1. Focus on what matters most. What will the user want/need to do from their phone. For example, where is the campus map?

2. Rethink and re-organize the content. Keep in mind the most common mobile usage:

Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

3. Think about how to brand the mobile website.  Using color and header content, create a look and feel that reflects the branding of the school.

4. Redesign the home screen and the enrollment section.  Think again about color and the possibly of using icons on the home page.

Create a concept and visual design for the mobile site. Your design can focus on one aspect of the  mobile website, it doesn’t need to be a complete site.

Please do your research
. Here’s a good place to start:
EduStyle Mobile websites: http://www.edustyle.net/gallery_mobile.php

You may use the iPhone GUI (Graphical User Interface) PSD file, the Android GUI (Graphical User Interface) or the Blackberry Bold GUI (Graphical User Interface) files if you would like to create the sketch in Photoshop. Post your thoughts and decision-making process for this exercise on your WP blog. Upload your files into a Week 12 folder in your student folder on the class server. Bring your files to our next class.

Smartphone Resources

Touch Target sizes: http://www.lukew.com/ff/entry.asp?1085

Apple
Promo/Demo
Apple GUI ((Graphical User Interface)

Blackberry
Promo/Demo

Android
Promo/Demo
Android GUI (Graphical User Interface)

Team Project

2. Continue working on your Final Project. Please create a WordPress blog for your “studio” where everyone can post entries regarding the design process for the final project.

1) Choose a team leader.
2) Select a “studio” name. Set up WordPress site to use for your group.
3) Be sure that you’ve exchanged email addresses with the rest of your team members.
4) Let me know what WordPress theme you’ve chosen to use for your project. This is CRITICAL. You need to do this ASAP so you can get started. I will install WordPress in a studio folder on the class server and email you when it’s available.
5) Discuss deliverables and who will complete what.

3. Deliverables due in 2 weeks on December 1:  Final Design (based on WordPress theme),  Final Content (partial),  Home page & a landing page created in WordPress.

Please email me to touch base on your progress and if you have ANY questions. I want to help you between this class and the next. Don’t lose time on this project because we don’t have class next week.


Mobile Design

Mobile Growth
What is a smartphone versus a feature phone?

A Smartphone combines the functions of a cellular phone and a handheld computer in a single device. It differs from a normal phone in that it has an operating system and local storage, so users can add and store information, send and receive email, and install programs to the phone as they could with a PDA. A smartphone gives users the best of both worlds–it has much the same capabilities as a handheld computer and the communications ability of a mobile phone.

What is a smartphone?
  • Is palm/pocket sized: it needs to be portable so it can be used everywhere and anytime
  • Primarily operated through a touch-based user interface: hardware buttons and a physical keyboard can be present but are optional.
  • Has an average screen size of 3 to 6 inches: anything smaller makes touch-based interactions hard; anything much bigger makes it hard to transport everywhere easily.
  • Features a Web-browser with decent CSS (floats!) and Javascript support: ideally CSS3 and HTML5
  • Is used with a data plan (not just voice!)
What is a feature phone?
  • Is palm/pocket sized
  • Primarily operated through trackpad/trackball/joystick physical controls and/or a keypad or keyboard
  • Has an average screen size of 2 to 3 inches
  • Features a Web-browser without decent CSS and Javascript support
  • More likely to be used without a data plan
What are the differences between a mobile Web site and a mobile App?

Technical

  • Mobile websites are built in HTML/CSS/Javascript
  • Mobile apps are built using Objective-C, C++, Java

Device

  • Mobile apps only work on the phones they are designed for.
  • A mobile website is viewed in a browser. Mobile websites can be designed to work on any device with a web browser.

Market

  • If you’re interested in mass market appeal for your content, mobile websites are the way to go.
  • If you’re only interested in reaching a niche market represented by usage of a particular device and operating system, a mobile app is a good choice.

Features

  • Mobile apps can provide more feature-rich functionality–at least for now–because apps can work seamlessly with a device’s native applications in more complex ways, and apps don’t necessarily require a connection to the internet to function. This means that apps are better for utilities and games.
  • Mobile websites are better choices for delivering content, catalogs and shopping functions since that content is accessible by search engines. Since the number of mobile phone browsers that support richer versions of HTML is increasing rapidly, expect mobile website functionality to rival app functionality in the near future.

Reach

  • With mobile apps, you need to develop a new app for every type of device you want to reach, while just one mobile website can reach anyone with a device that has web browsing.

Maintenance

  • Lastly, mobile websites tend to cost less to maintain over time. That’s because to change an app you (probably) have to hire a programmer, and you need approval from the app store. Plus, every time a particular device is updated, you’ll need to change your app accordingly.

Resources:
What’s The Difference Between a Mobile App, Mobile Web App & a Mobile Website?

The fight gets technical: mobile apps vs. mobile sites


Appiction answers: What’s the difference between developing an app and a website? from Appiction Apps on Vimeo.

Mobile Website Critiques

William & Mary Mobile: http://m.wm.edu/home/
Texas A&M Mobile: http://m.tamu.edu/
Indiana University Mobile: https://m.iu.edu/kme-prd/home

Resource:
EduStyle Mobile websites: http://www.edustyle.net/gallery_mobile.php

Mobile Design Considerations
Mobile Design Considerations
Screen Size
Extending Your Capabilities

When you design and develop for mobile, you can use exciting new capabilities on the web to create innovative ways of meeting people’s needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.

And additional capabilities may be here soon, including:

  • Direction: from a digital compass
  • Gyroscope: 360 degrees of motion
  • Audio: input from a microphone; output to speaker
  • Video and image: capture and input from a camera
  • Dual cameras: front and back
  • Device connections: through Bluetooth
  • Proximity: device closeness to physical objects
  • Ambient light: light/dark environment awareness
  • NFC: Near Field Communications through RFID readers

Starting with mobile puts these capabilities in your hands now so you can rethink how people can interact with your website and the world around them. As mobile web browsers continue to gain access to capabilities currently reserved only for native mobile applications, these opportunities will only increase.

Mobile Usage

Mobile usage generally consists of a couple of interaction types:

  • Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
  • Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
  • Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
  • Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.
Other Important Considerations
Getting Back

It’s always interesting to see how design solutions migrate across digital borders. For example, many native iPhone applications have prominent “back” links in their navigation header. Apple’s mobile devices lack a physical back button and don’t display any system chrome actions for native apps.

But the presence of a “back” button in the header has unnecessarily migrated to mobile web experiences. Many devices (Android, Blackberry, Windows Phone 7, etc.) have physical back buttons. Even Apple’s mobile web browser includes a prominent back control in the application toolbar. Adding another back button in your mobile web experience’s header only confuses things. Someone using the site must ask, “Do both of these back buttons do the same thing?”

Sticking to the Bottom

While navigation menus fixed to the bottom of the screen might be a good idea in some native mobile applications, the variable presence of web browser menus and physical controls below the screen on mobile devices means they are often a poor idea in mobile web experiences. If you need a fixed menu, better to fix it to the top, as Twitter has done in their redesigned mobile web experience.

Cover the Hover

Since we’re on the topic of tips, it’s worth noting that any tips or actions that happen “on hover” (when a mouse pointer is positioned over a trigger) won’t work the same way on touchonly devices. Quite simply, there is no pointer to position over an interface element. There’s just our fingers, and though they cast a shadow, no mobile device I know of considers that a hover yet.

Therefore, any actions that rely on mouse hovers in our desktop web experiences need to be rethought—and that’s a good thing.

Layout

If you’re not interested in maintaining two sets of images (and who would be?), lean more heavily on CSS for your mobile web experience’s visual design. The gradients and rounded corners in Yahoo!’s design are rendered using CSS3 and look great on both high and low resolution screens, saving you the need to manage multiple images and your customers the need to download them.

Mobile browsers that don’t support CSS3 properties like gradient and rounded corners can simply default to a solid background and square corners. No harm done.

We can’t count on a single width for our mobile web experiences. For starters, even if every mobile device used 320 pixels for its devicewidth, we’d still have different widths when one of these devices changed its orientation.

To cope with this and whatever new device widths may come our way, we need to be highly elastic in our layouts. Whether you call them fluid, liquid, or flexible, designs that expand and contract based on available screen space are a must.

 

Screen Size Diagram
Screen Size Chart

Touch Gestures
Download: Luke Wroblewski’s Touch Gesture Reference Guide

Responsive versus Adaptive Web Design

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

http://3200tigres.wwf.fr/

Resource: The ultimate responsive web design roundup

What is Adaptive Design?

Adaptive design is just that, it is design which adapts to its surroundings, like a chameleon. Adaptive design is something which relies much more heavily on media-queries. A site itself will ultimately not adapt or change until it hits a media-query marker such as 320px or 768px. Adaptive design revolves around how a site is presented on a screen rather than the content.

Top Ten Mobile Websites

Google Reader
http://www.google.com/reader/i/
Twitter
http://mobile.twitter.com/
Flickr
http://m.flickr.com/#/home
Facebook
http://touch.facebook.com/
ESPN
http://m.espn.go.com/wireless/index?w=1ae32&i=COM
BBC
http://www.bbc.co.uk/mobile/i/
The Guardian
http://m.guardian.co.uk/
Amazon
http://www.amazon.com/gp/aw/h.html/176-4012407-5716927
Yahoo!
http://m.yahoo.com/?.tsrc=yahoo&mobile_view_default=true#/today/main
Gmail
https://mail.google.com/mail/mu/#tl/Inbox



Comments

  1. Eric Oxenberg November 22nd

    Comment Arrow

    Found a very interesting article on mobile web design with good examples here: http://wegraphics.net/blog/tutorials/mobile-web-mastery-25-tips-on-designing-for-mobile-devices/


Add Yours

  • Author Avatar

    YOU


Comment Arrow

Powered by WP Hashcash




About Author

jamie

Instructor for Graphic Design 67