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

IE9 Details Begin to Emerge

Since there is beginning to be a fair amount of buzz surrounding some of the upcoming browser releases, I thought I would take a moment to share some of the recent news that has begun spilling out on the Internet Explorer front since PDC.

IE general manager Dean Hachamovitch reports Microsoft is “…focusing on three very specific areas: performance, interoperability standards, and hardware acceleration.”

What does this mean?

Well, on the performance front at least some of the slated rendering-speed increases will be due to new technology which allows IE’s browser engine, Trident, to pipe text and graphics rendering through DirectX (older IE versions have used GDI). This means IE will be able to make use of the hardware acceleration in a computer’s GPU to ramp up things like streaming video performance and flash-based interfaces. Of course there is also javascript-parsing-speed increases, but all of the cool kids on Browser Street have been working on this front for quite some time – so this news hardly warrants dwelling on.

Regarding interoperability, there will reportedly be increased support for CSS3 selectors (yay!) as well as pledged support for the evolving technologies outlined in the HTML5 preliminary spec (audio/video/canvas support?).

More detailed information can be found at the following links:

Update: And now a word straight from the horse’s mouth – IE Blog: An Early Look At IE9 for Developers

WordPress Wins Best Overall Content Management System Award

WordPress has just won the Overall Best Open Source CMS Award in the 2009 Open Source CMS Awards. In addition to popular vote, judges for this award included Bryan Ruby, who runs CMSReport.com, jQuery creator John Resig, Deane Barker of Blend Interactive, and Karen Koombs, Head of Web Services at the University of Houston Libraries (more details on the judges).

To some extent, WordPress has been a victim of its own success in terms of its reputation as a CMS. Because it has worked so well for the blogging community, the perception has often been that WordPress is merely a blogging platform. In fact, it is a full-featured, highly scalable CMS capable of running complex websites — and running them in a way that is flexible, efficient, and intuitive.

Awards can vary in meaning depending on who is handing them out, but in this case the judges seem legitimate and well-qualified. Clearly, the panel was convinced not only that WordPress is a fully-featured CMS, but more importantly, that it is a very good fully-featured CMS. It’s nice to see the public perception catching up with the reality of what this platform does, and WordPress notes as much in a post on WordPress.org:

This is a landmark for us, as it is the first time we’ve won this award, and it marks a shift in the public perception of WordPress, from blog software to full-featured CMS. No small contest, the Open Source CMS Awards received over 12,000 nominations and more than 23,000 votes across five categories….

Every day thousands of new people are embracing WordPress to power not just their blogs but entire sites and communities without compromising on usability or scalability (as would be the case with a legacy CMS).

Web Communications has been able to customize some fairly complex sites with WordPress (UA News, Research Magazine) and we’ve not yet run into any significant limitations as far as its ability to work as a traditional CMS. We’ve had good experiences working with the code and design side, and our writers/content creators have found the user interface to be intuitive and the learning curve to be painless.

If you want to explore more about WordPress, here are a couple of good sites to know about:

  • WordPress Codex: WordPress has a great community of users and some of the best documentation of any open-source project around.
  • Digging into WordPress: A blog about how to build, customize, and run sites with WordPress by Chris Coyier and Jeff Starr. Coyier states on the site that he subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice.

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.

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.