UA Mobile Web 2.0

The Office of Web Communications is pleased to announce the next iteration of UA Mobile Web. The newest version offers several improvements in speed, function, and design.

Speed

Significant improvements to load times have been made with the iPhone and Android versions.  I have exchanged 90% of the images with CSS3 gradients and border radius.  File sizes for the CSS and JavaScript files have also been pared down and minified to save as much space as possible.  For some pages, loading times have been decreased by 40%.

Function

In addition to quicker load times, the new version adds the following features:

• News is now more fully integrated into UA Mobile Web.  You may now browse UA News, Dialog, and Research stories before leaving the site.
• Video adds an instant streaming option.  Using the HTML5 <video> tag, all UA News videos will play seamlessly in the browser (currently iPhone only).
• Social Media is a new section that brings our official Facebook and Twitter status updates to your browser.

Design

Users of UA Mobile Web on the iPhone and Android will now notice a crimson header bar with The University of Alabama nameplate.  This bar is on every page and further brands this site as part of the UA Home Page.

Also, a few of the home screen icons have been updated to give greater separation between services.  iPhone and Android users will also notice a new “action” symbol for items:  the external link.  As arrows have symbolized going to the next page within UA Mobile Web and phones have symbolized a phone number, the external link symbol is a visual cue that the item you are about to touch will load a page outside of UA Mobile Web.

I hope all of these additions and changes make for a better experience with UA Mobile Web.  If you have any feedback or discover a bug I didn’t catch, please let me know!

Improvements to Mobile Events Calendar

Yesterday, a major update to the UAMobileWeb Events Calendar was made.  This update is significant in that there is not only an update functionally, but visually as well.

The previous version of the mobile Events Calendar only allowed browsing by Day and Month views.  The new version adds a Week view, Category and Calendar Type browsing.  Also, there are even more details available: descriptions, contact information, links to categories and calendar types, and additional information (if available).

In addition to the new views and details, a visual upgrade has been pushed out to the browsing views for the iPhone and Android themes.  The older version used a layout akin to the iPhone’s Calendar app where the times were listed on the left side and the events were in colored blocks to the right.  This looks fine for one or two events but can start to get messy with many events and time slots.  Now, you will see a nice, colored separator with either the time or date inserted, depending on the view you have selected.

Hopefully, the UA mobile community will find these upgrades useful.  The UAMobileWeb Events Calendar should now be faster, more functional, and easier to browse.  Please let me know what you think or if you discover any bugs/problems that need to be addressed.

UA Mobile Web Templates

As mentioned in our announcement of UA Mobile Web, resources on how to get started designing and developing your own mobile site are now available on UA Web Guide.  Currently, this documentation provides themes for the iPhone and Blackberry devices.  As UA Mobile Web expands functionality to other devices, so too will Web Guide’s resources.

The documentation provides code and instructions for:

1. Automatically detecting mobile devices and forward to a mobile theme
2. Setting a PHP cookie which allows the user to get back to the full website
3. Different themes for each targeted device

Click here to download the UA Mobile Web Templates

We believe providing these resources will speed up development time for others on-campus and push forward mobile accessibility at UA.  If you have any questions or comments, please let us know.

Announcing the launch of UA Mobile Web (beta version)

As part of an ongoing strategic process to optimize our web presence for all users, the Office of Web Communications has completed the initial development and rollout of a UA Mobile Web site for The University of Alabama.  This site is a custom web site and suite of applications which deliver top-level content, services, and features from UA to your iPhone, Blackberry, PDA, or other smartphone.  UA Mobile Web optimizes web services and content specifically for mobile devices, making them immediately available to users any time from anywhere.  The beta version of UA Mobile Web includes functionality and content such as: 

• News
• Events Calendar
• Campus Map
• Faculty/Staff Directory
• Video
• UA Web Sites
• CrimsonRide
• Contact UA
• Search

UA Mobile Web is now part of the UA Home Page, so that visitors who navigate to www.ua.edu on mobile devices will automatically be redirected to the appropriate mobile version for their device, including separate versions for iPhone and other devices such as Blackberry, Android, Windows Mobile, etc.  Users will always have the option of viewing the full UA Home Page (as it appears in a web browser) via a link on the mobile site if desired.  The UA Mobile Web site can also be accessed directly at http://m.ua.edu/.

UA Mobile Web was developed in-house by the Office of Web Communications using open source code and platforms.  As this is a “beta” release, we plan to grow and expand its functionality and content in the near future and over time.  Also, we are treating this platform as an open one, so there is certainly the opportunity to add to the mobile site with additional pieces and applications developed elsewhere or by other groups.  We’ll be reaching out to other areas on campus to make this option known and available.

We believe this effort represents a significant step forward in making our content and services available to all audiences in as many platforms as possible.  If you have any questions, feedback or comments, please don’t hesitate to let us know.

Strategic iPhone/Mobile development for key UA web sites

I’d like to share the outcome of a project we’ve been working on that positively impacts our top-level strategic web sites.  Below is a high-level summary of the project.  If you have any questions about this, please ask them in the comments section and we’ll be glad to answer.

Background/Challenge

We have recently been working to optimize our key strategic web sites for mobile devices, in order to ensure maximum accessibility and compatibility with all mobile platforms.

The challenge here is that manufacturers of mobile devices use a variety of platforms for mobile web browsing – some very “web-like”, and some not so much.  So taking the content of a web site and making it work in all of the major mobile platforms requires dedicated design processes that target specific devices, and deliver content to those devices based on their capabilities.  By doing so, we optimize the experience of browsing our sites on mobile devices without overwhelming the device beyond its capabilities, and we ensure that the mobile user experience for browsing our sites is of the highest quality.

Incidentally, we have always designed our web sites with mobile platforms in mind, as the process of building web standards-based web sites makes these sites mostly accessible in almost any platform.  But in order to improve the experience for our users, we have undertaken the task of optimizing our key web sites for mobile devices, separate from our standard development practices.

The Results

The results of this process are that we have successfully optimized our key strategic content-related web sites – UA News Center (http://uanews.ua.edu), Research Magazine (http://research.ua.edu), and Dialog (http://dialog.ua.edu) – for all of the major mobile platforms, so that the content on these sites is easily accessible and navigable on all devices.

Of particular interest and focus during this process was development for the iPhone platform, which is growing in popularity and market share.  We have built alternate versions of these web sites that are specifically tailored for the iPhone’s functionality using open source plug-ins that work with our content management system, WordPress, and the functionality of these sites is now very high for the iPhone.

Also, the UA Home Page (http://www.ua.edu) displays very well on the iPhone as well, as it has the exact look and functionality as it does in a web browser.  It also displays well in a stripped-down format in many older mobile devices, but we will be working to further advance its mobile functionality by fine-tuning its mobile capabilties.

Examples

Below are some screenshots of each site in various mobile devices so that you can see how they now appear in these devices.  We will continue to work to optimize and fine-tune these mobile versions of our sites and look for further opportunities to expand our reach to these mediums.  These steps represent a significant upgrade in the mobile browsing experience for visitors to our web sites, and will help us continue to spread our messages to new audiences while staying at the forefront of technology trends.

Click for larger version

More:

• CSS for the Phone (WebTide)
• How to Test Websites for Mobile Devices (WebTide)
• The 5-Minute CSS Mobile Makeover (Perishable Press)

CSS for the Phone

With the world of web expanding to mobile devices, designers must remember that ‘fantastic’ on a computer may be ‘horrifying’ on someone’s phone. However, CSS can help. By using an alternate style sheet, the computer and all the web wandering phones out there are covered.

First, we create a separate style sheet for phones by using media=”handheld” and place it in the head.

<link rel=”stylesheet” href=”name.css” type=”text/css” media=”handheld” />

Now comes the business of design in your CSS. Designing for the phone means designing for a small vertical screen and all the challenges it possesses.

First we take out all extraneous information by placing a  “display: none” in the CSS you want to hide. Once all the important areas have been singled out we’re ready for re-design.

Layout

Divide your layout into sets of horizontal bars. Horizontal layouts will keep things easy to read and provide a better hierarchy for your viewers. Try not to have two much side by side as it makes the text smaller. Make sure that your logo is at the top at all times and your main content comes directly after.

Examples:

To better design your layout, a helpful guide to screen sizes can be found here at Sender 11.

Navigation

With touch screens popping up all over the place, it pays to consider the width of a human finger. Make sure links are large and well spaced so that mistakes do not happen. A good way to do this is to insert plain content or space around links. Another is to go with the button route. By turning a link into a button it is easier for the viewer to put their finger on the right spot.

Look

Remember that people mainly want to browse a page for information, so keep the layout simple. People will appreciate not having to navigate through a ton of images to get to what they want. Try understated patterns in small strips or as a background to add a different feel, or use a horizontal image at the very front to grab people’s attention.

Examples:

To conclude, the most important thing when designing for the mobile phone is readability.  Keep this in mind and everything will be perfect.

For more help and ideas, here are some good sites:

For info on designing for the iPhone try iPhone Microsites.
For examples in web design for the iPhone, try CSSiPhone.
For some good before and after pics try readyforiPhone.

To check if your CSS looks good on all cell phones, refer to “How to Test Websites for Mobile Devices” by Matthew Muro.

How to Test Websites for Mobile Devices

Developing for the mobile web is a mixed bag and with new phone technologies coming out frequently, it’s hard to stay ahead of the game.  Unless you have an eclectic group of cell phones lying around, it’s hard to test your site against their browsers.

This is where emulators come into play.

By installing a few pieces of  software, we can quickly refine a mobile style sheet and minimize the damage that different mobile browsers do to our sites.  By the way, all of this stuff is free.

Windows Mobile

What you will need:

• Microsoft Virtual PC
• ActiveSync
• Device Emulator Manager 3.0
• Windows Mobile 6 Professional Images

Testing for Windows Mobile:

1. Open Device Emulator Manager
2. Open an emulator image (e.g. WM 6.5 Professional WQVGA)
3. Once the device has completely booted up, go to the Device Emulator Manager and you should see an entry under Others (you may have to hit Refresh in order to see the device).
4. Right-click on the entry and select Cradle.
5. ActiveSync should pop up.  Click Cancel.
6. Use the Windows Mobile Internet Explorer to browse to your website and start testing!

Blackberry

What you will need:

• Java JDK (ignore the bundles here and just go for the standalone)
• Blackberry Email and MDS Services Simulators
• Blackberry device simulators (download which versions you want to test on)

Important Note:  You must install the Java JDK before the Blackberry MDS

Testing for Blackberry:

1. Run MDS.  Wait until you see “Task- pending push messages” before moving on.
2. Open a device simulator you downloaded (e.g. 9630)
3. Go to the Browser, type in a website and start testing!

iPhone/iPod Touch

What you will need:

• Safari

Testing for iPhone/iPod Touch:

1. Open Safari and go to Preferences (Edit->Preferences).  Under the Advanced tab, ensure that “Show Develop menu in menu bar” is checked.
2. In the menu, click on Develop->User Agent->Mobile Safari 3.0
3. Browse to your website and start testing!

Screenshot Comparisons

By designing, testing, and targeting for different mobile browsers, you can achieve wildly different looks.  Hopefully setting up the above testing environments will make that job just a little easier.

Click for high resolution version

If you have any questions or problems, leave a comment.