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.

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

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.

Dreamweaver Quick Tip: Preview Files Faster

This is a quick tip for all those Dreamweaver users out there.  If you don’t already know, you can preview your local pages in a browser by opening an HTML file and hitting F12.

Well, I always thought the file had to be open…until today.

If you want to preview a file without opening it, simply click on the file and hit F12.  That’s it!

Hopefully this quick tip will shave minutes of unnecessary loading times off your life.

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!

• HTML E-mail Templates – http://webguide.ua.edu/email.html

Interactive Campus Map v2.0

So, here we are:  nearly a year later and yet another Google Maps post.

This new version is the next level of progression for the map, which includes some of these new features:

• Use of Google Maps’ default map tiles which shows all streets and other landmarks
• Overlay of all buildings that sits on top of the default Google Maps tiles
• Addition of Driving Directions to/from each building to any address
• Addition of Walking Directions to/from each building to any address
• Wide screen, which leads to much more viewable space
• Links to other key campus maps

While the previous iteration was useful and a big improvement over what the campus map used to be before Google Maps, I think this direction is the right one to take.

The biggest advantage of this update is that the building overlay is being dynamically generated by UA’s Cartography Lab.  This means that whenever a building is added or removed from this overlay, you will immediately see the results.  With the other map, anytime a building was changed it would mean cutting up the images (it better be exactly the same!) and all of that mess.

The biggest disadvantage of this update is that, due to UA’s recent construction, the roads aren’t really matching up with the buildings.  This has more to do with Tuscaloosa not being a major metropolitan area, thus having to wait on Tele Atlas to update their tiles for the University.  Eventually they will match up with our ever-changing campus.  However, I think the advantages far outweigh any disadvantages from doing this.

Without further ado, here is the new campus map:  http://tour.ua.edu/map

Let me know your feedback and opinions in the comments.

Looking for the previous custom Google Map?

Click here if you want to see the old campus map.  I have kept it around for informational purposes.

Common style sheets across multiple sites

While designing UA News, Dialog, and Research Magazine, it quickly became apparent that the similarities between the three sites lent itself well to using a common style sheet.  Because these sites share content and are related in some way, it was important that the design elements should be similar across the board to create that feeling that they were all connected—a suite of sites. Creating this sense of connection is something that the Admissions sites have done very well.

In order to make this common style sheet work, I needed two files:

• common.css
• style.css

The common.css file held 95% of all basic styles, margins, paddings, colors, and whatever else is needed.  Ideally, I wanted each site to pull as much from this CSS as possible and, where needed, overwrite the common styles with specific directives from style.css.

A very simple, but great, example of how this is useful can be seen with each site’s text headings.

common.css

h1, h2, h3, h4, h5, h6{
	font-family:Georgia, Verdana, sans-serif;
	font-weight:normal;
	color:#2e363a;
	margin-bottom:10px;
	padding-bottom:5px;
}

Research Magazine style.css

h1, h2, h3, h4, h5, h6{
	font-family:Arial, Verdana, sans-serif;
}
h1{
	color:#333333;
	border-bottom:#333333 solid 4px;
}

As you can see, the common font is set at Georgia plus a few other such as color and padding. To create a unique look on Research, all I do is declare a new font and other styles on my site specific style sheet.

The main advantages of using multiple style sheets is that it makes it easier to make changes to generic styles across all sites quickly.  The disadvantage is that it can sometimes be hard to manage.  Some may cite performance issues, but the style.css files are so small I can’t see that being a problem.

With all of that being said, I think the advantages of being able to control 95% of the styles for three sites in one file far outweighs the disadvantages.

Display Tags in 3 Columns

UPDATE: I’ve developed a plugin, Multi-Column Taxonomy List, that solves the problem mentioned below.

If you’re tired of all of the tag clouds you see out there and just want a simple list that you can browse through, then this bit of code is for you. In WordPress, there are convenient functions to list all tags (and categories) outside of The Loop in an unordered list. However, this doesn’t make good use of horizontal space and can get out of hand quickly if you have a lot of tags. But, the advantages of having an alphabetical listing is worth the extra effort.

For this particular example, let’s assume we want to list our tags on the archives index page.

<?php
$tags = get_tags();
$tags_count = count($tags);
$percolumn = ceil($tags_count / 3);

for ($i = 0;$i < $tags_count;$i++):
if ($i < $percolumn):
$tag_left .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
elseif ($i >= $percolumn && $i < $percolumn*2):
$tag_mid .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
elseif ($i >= $percolumn*2):
$tag_right .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
endif;
endfor;
?>
<ul>
<?php echo $tag_left; ?>
</ul>

<ul>
<?php echo $tag_mid; ?>
</ul>

<ul>
<?php echo $tag_right; ?>
</ul>

The majority of this code was modified from a two column version I found on the WordPress Forums, but since I needed three columns I had to take it one step further. The great thing about this code is that you can adapt it to output the tag RSS feeds by simply adding feed before the rel tag. For example:

$tag_left .= '<li><a href="'. get_tag_link($tags[$i]->term_id) . 'feed "rel="tag">' . $tags[$i]->name .'</a></li>' . "\n";

Here’s the code in practice.

If, for some reason, you really really love tag clouds and you think this code is a waste of time, you may want to check out some best practices for using tag clouds.