Android update to UAMobileWeb

If you are an Android user, you should now notice a visual upgrade when visiting UAMobileWeb.  Because the Android browser was built with WebKit, you will get the same high-quality browsing experience as iPhone users who visit UAMobileWeb.

WebKit is an open source browser engine that is the basis for Apple’s Safari web browser as well as the iPhone, Android, and a few other devices.

If you experience any problems on the Android platform, please let me know.

UA.edu receives high praise from EDU Checkup

I wanted to share the following independent review of UA.edu, which was recently conducted by EDU Checkup, a higher education blog and review site. The review was very positive – in fact the reviewer (Nick DeNardis) tweeted that UA.edu is “one of the highest scoring sites on @educheckup”, and called it “rock star work” (http://twitter.com/nickdenardis/status/5894882926).

Overall, UA.edu received a 98% on visuals, 99% on code, and 93% for information, for an overall score of 97%. While it’s certainly nice to receive such a high score, the most gratifying part of the review is to see an impartial observer pick up on many of the intentional design decisions made during this process and appreciate the rationale and the work that went into those choices.

The review, in video form, is here:

http://educheckup.com/2009/11/20/the-university-of-alabama-episode-129/

Also, UA.edu is currently featured on eduStyle.net:

http://www.edustyle.net/site.php?site=3512

UPDATED 11/23:  As a follow-up to his review, DeNardis blogged about his review of UA.edu on the eduStyle Blog, here:.

http://www.edustyle.net/blog/?p=710

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.

New UA Web Templates are now available

Web templates based on the design and functionality of the current UA Home Page are available for usage by any official unit of The University of Alabama. There are three basic versions of the templates available, each of which offers numerous options for customization and arrangement of content. The template packages are organized into three different navigation types — one-level horizontal navigation, two-level horizontal navigation, and no horizontal navigation.

Also, new this time around is the release of a significant “how-to guide” for explaining how the templates work and best practices and techniques for customizing them to specific needs.  The UA Templates Guide explains the basic design elements of the templates, details the grid structure upon which the templates are built, describes the process of customizing the templates, explains how to create content to fit within the templates, and provides further resources for learning how to build highly-functional and visually-engaging web sites. This guide is intended to be a primer for working with the templates, and we encourage all users of the templates to read it carefully before beginning any design work.

By using these templates, units of The University of Alabama ensure that their web site is closely tied to the University’s top-level web sites and help build a cohesive and effective overall institutional web presence.  Please feel free to use the templates as needed, and to share this information with anyone you think would benefit from knowing about it.  And as always, please let us know if you have questions, comments or feedback regarding these templates. 

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

Click for larger version

iphone_uanews

iphone_uanews_story

iphone_research

iphone_research_story

More:

A new UA Home Page debuts

uaedu_2009

I’m sure most of you know by now that we rolled out a new UA Home Page yesterday at http://www.ua.edu.  This new version refreshes the Home Page with a modernized look and feel, simplified navigation, updated functionality, and close integration with the new Touching Lives campaign.  You’ll begin to see more about the latter as the fall goes on.  So what’s new about it?

What’s New?

  • Updated, modernized look & feel
  • Open layout; lots of whitespace
  • Sized for 1024 pixels-wide monitors, allowing larger text sizes and elements across the board
  • Simplified navigation through combination of primary and targeted navigation and “toolbox” - all in header
  • Contextual, page-specific navigation on second level and below
  • Addition of dynamic features-oriented image slideshow on Home (uses jQuery, and images will update frequently)
  • Addition of jQuery-enabled Quick Links section on home page to better position wide range of links and resources
  • Columnar grid layout, allowing for many combinations
  • Greater flexibility and customization, including ability to totally customize everything between header and footer
  • Greater ability to position and integrate content and content types
  • Integrated with “Touching Lives” campaign

What’s Next?

  • New web templates based on the design of the new Home Page will be available on September 28, 2009
  • Many institutional web sites (that are managed by WebComm) will be transitioned to new look by October 26, 2009

We’re very excited about this rollout, and the reception has been fantastic so far.  We hope you like it, and we’re hopeful that our campus will benefit greatly from this effort.  Let us know if you have any further questions about this initiative.

By the way, if you’re interested, you can see a mini-history of the UA Home Page at http://www.ua.edu/aboutsite.html.  Enjoy!

Keeping the A-Z Site Index current & accurate

I’m sure you’re all familiar with the A-Z Site Index on UA Home (http://www.ua.edu/site.html), which contains an alphabetical listing of UA web sites.  This list is intended to be a semi-comprehensive listing of all major web sites on the UA campus, in order to help guide visitors to the information they’re seeking.  It has historically been one of the most heavily-visited pages on UA.edu, and continues to play an important role in helping the Home Page direct visitors to the information they seek.  So we certainly all benefit from it being as accurate and complete as possible.

As part of a bigger project, I’ve been cleaning up the A-Z Site Index and other pages on UA Home to be more accurate and complete.  Because sites get redesigned frequently all over campus, links and resources change pretty frequently, so it’s a challenge to keep these links up-to-date and inclusive of all that needs to be there.  Many webmasters on campus already do this, but I’m reaching out via this blog to campus webmasters to help me keep it up-to-date.  If you redesign a site or implement a new site architecture that changes the URL’s of important pages on your site that might be linked from the Home Page, please let us know. 

Also, if you implement new, important resources on your sites, or you find that your site isn’t listed where you feel it should be, please let us know and we’ll add it to the Site Index and position it elsewhere where appropriate.  And if you have time to review the A-Z Index to make sure your important assets are included, that’d be great too.

Thanks so much for your help!

How to notify us:

  • Send an email to webmaster@ur.ua.edu with the title of the page, the old URL (if applicable), and the new URL.

Welcoming a veteran rookie

It sounds silly to welcome someone to the team who has in fact been a part of it longer than yourself, but no matter. I’d like to announce the permanent addition of Lisa Sandy to the Office of Web Communications, and welcome her to the team. Lisa has served as a student and part-time worker with WebComm for almost five years, and she has certainly paid her dues by performing a hodge-podge of design, maintenance, content and development tasks for us over the years. She is a talented graphic artist and a good designer, not to mention a tireless worker and a very nice person, so we are THRILLED to have her on board. As a web communications specialist, she’ll continue to perform a variety of duties, with a heavy focus on design and site maintenance. And she’ll become a regular contributor to the WebTide community as well, as she has much to offer to these discussions.

So, welcome to the team, to our longest-tenured veteran! We’re thrilled to have you with us full-time, Lisa.

UA HTML E-mail Templates

As part of our effort to use the UA Web Guide as a fluid and regularly updated toolkit, a new resource has been added:  HTML E-mail templates.  Because HTML email has become more important recently and with it comes more and more questions about how to develop and send these emails, we went ahead and developed a set of HTML email templates, much like the web templates, for use by anyone on campus.

There are several options, including some that do not require design modifications.  However, we do have some templates that offer maximum customization by designers.  The templates are packaged with all HTML and images needed to create customized e-mails or you could use the “out-of-the-box” templates and simply add your content with minimal effort.

In addition to these templates, the Web Guide also lists several design guidelines and resources should you choose to go down the fully customized route.  Feel free to use these templates as a good starting point, though.  I leaned heavily on Campaign Monitor’s already fantastic work on testing and establishing any kind of email standards, so if you are starting out new, that’s where I would go first.

Hopefully, these email templates will be as helpful to the UA community as our web templates have been.  Comments and suggestions are welcome!