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.

Commenting on Code in Code

commentimage

Ever wonder how web designers keep everything in order when they’re typing out their code? Well, commenting helps a lot in organizing. By using comments, you can also signal out things you want to fix, make note of, or even just keep track of. So how do you keep the comments from messing up the 18 hours of coding you just did? Well, there are different options for different languages.

HTML

Below is the style for your basic html web page which really shouldn’t have too many comments- just nice clean code.

<!-- Comment Here -->

CSS

For organizing your styles and your main boxes- or whatever else you need- this commenting style works for single line or block quotes.

/* Comment Here */

JavaScript or jQuery

For JavaScript or jQuery, this method comments out the entire line starting from behind the back slashes. It is used as an end of line comment. CSS style is used as a short single line comment.

// Comment Here

/* Comment Here */

For block comments the code looks like CSS, but remember to keep an asterisk on each line.

/*
* Comment Here
*/

PHP

PHP can use the JavaScript method, or the pound symbol to comment out a line.

// Comment Here

# Comment Here

For multiple lines, the comment code is like the CSS code but unlike the JavaScript, no further asterisks are needed.

/* Comment
Here */

Ajax

To comment in Ajax, use the same method as in JavaScript.

// Comment Here

ActionScript

When working with flash, you might want to use these to comment on your action script. The first works for multiple lines and single lines while the second is just used for single lined short comments.

/* Comment Here */

// Comment Here

It’s Just Good Web Practice

why“Why do web designers do that?” Well, there are a lot of reasons, but most of them are just accepted and never explained. Here’s a little look at why we do what we do in the web world.

Why do you use san-serif fonts like Verdana and Arial for body copy?

San-serif fonts retain their appearance no matter how small their size and will read cleanly on any computer. They are also web standard because every computer automatically has them in their font folder.

Why do you mainly use jpg and gif for images?

Tiff files are usually big, having resolution of 300dpi or more, and take a longer time to load. They’re wonderful for print, but a computer screen only displays 72dpi anyway, so all that extra won’t show up even if it’s there. PNGs are wonderful with smooth transparency and a nice transition- but IE6 doesn’t display PNG transparency. (There is a hack for that if you really want it though.) In any case, jpg and gif images load faster and will display in all browsers.

Why do you need an alt tag on an image?

Alt tags are for when your image decides to go on holiday and doesn’t show up for work. A viewer will still be able to read the description of the image in the blank box where the image was supposed to appear. This way, they won’t have to guess at what was meant to show up. Alt tags also help the web readers that blind people use when they have a web page open. So remember to include an alt tag on your images!

Why do you use a grid to design a web page?

The eye reads things in a certain way. In order to create a clear path for the eye to follow, web designers use a grid to line up images and text. Just placing text wherever you like it makes it confusing for the reader. They won’t know which place you want them to look at next. Creating on a grid cleans up the page, creates an automatic hierarchy, and allows a better flow for readers.

Why do you use CSS instead of tables for design?

CSS helps design in a lot of ways. It is more flexible, makes faster changes across all pages, and multiple CSS can style the same page information in different ways for a variety of media. Tables cannot be layered, adjust to different screen sizes, or change their appearance readily over a succession of pages.

Example: Say you want to change a link color to red. CSS can do that for every page in the site with one line of code. With a table, you’ll have to go to every page and manually change the link color. It’s a lot of work, but by using CSS we can eliminate the tedium and save time.

Why are some designers so against Flash?

Flash is a useful tool, but if the same thing can be done with another script language most web designers will opt for that instead of Flash. Why? Because Flash is an application which must be installed on the computer trying to access the information. If Flash is not installed the viewer must download it- which takes them away from your page. Flash also doesn’t make content as accessible for people using alternative web browsing devices, such as the iPhone, or for search engines to pick up information.

Then why do some people use Flash?

Flash is a useful animation tool that provides a smoother movement than most scripts which require the browser rendering to keep up with their speed. Flash script is all internal and therefore must load before it plays. This allows Flash to become separate from the browser’s influence. Because of this, many use Flash for playing videos. It’s a good way to stream video content quickly and efficiently without worrying about what type of browser supports the video encoding.

What about music or sound effects on pages?

If you have to have music on your page- keep it optional. Let people be able to turn it off. In general, it’s not a good idea to have noise on a page since the people browsing might already be listening to their own music and will resent the jumbled sound of two audio waves at once.

Why are designers against flash intros?

Intros take up time that a viewer might not have. Also think about people who come to the site repeatedly. They will have to watch the intro every time they visit- which can get annoying no matter how good the intro looks. If you really want an intro- include the option to skip it. You’ll find that most people will skip.

Why include meta tags?

Meta tags are used by web search engines to help your page get noticed in the way you want. They provide keywords to what your website is all about and help the people searching for the information you have find your site.

Why do you test in different browsers?

Different browsers have different ways of reading code. IE and Firefox might display the same bit of CSS differently. It’s best to look at your website in all the main browsers (such as IE, Firefox, Safari, Opera, and Chrome) before you unleash it upon the world. Also keep in mind with IE that different versions display differently. IE 6, 7, and 8 are very different. I would recommend downloading IE Tester to have a look at your site in all the versions.

With this I hope to have demystified at least a bit of why web designers do what they do. Remember, everything has its reasons- especially on the web!

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:

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:layouts

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:

background

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:

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:

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:

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.

mobile-screenshot-comparison

Click for high resolution version

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

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!

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.

LDAP Security

Charles and I have been emailing back and forth about the security of LDAP and my incorporation of LDAP authentication into WordPress makes this issue even more important.

My question is this:

Could a hacker sniffing UA network packets intercept the traffic between, say, the TCF Web server and the LDAP server? And could he/she thereby discover userIDs and passwords?

What I worry about is that in LDAP authentication it appears to me that the userID and password are traveling across the network in plaintext — not hashed or encrypted. Is that right?

Perhaps I just don’t understand how the authetication works!

Thanks for any enlightenment.