Learn from the pros at UA’s ‘Web for Dummies’ class

There’s still time to register for our upcoming “Web For Dummies” class, scheduled for Tuesday, February 22nd at 8:30 a.m.  Learn from a group of UA’s own web experts about how to construct, maintain, and promote a website. The class will cover how to set up your site with OIT, planning your site, customizing UA’s HTML Templates, working with UA’s WordPress Theme, and using social media to broadcast information. During and after the lecture Q&A sessions will be held where you will have the opportunity to ask a good selection of UA’s web community questions.

The class will be held in the Capstone College of Nursing Building, room 1012 on February 22nd from 8:30am to 1:00pm with individual sessions starting at different times during that period. Registration is required for the class because of limited seating. For more information on times, sessions, and registration, please refer to the PSA website at http://psa.ua.edu/?page_id=531.

What is a WordPress theme?

Whether you plan to build your own theme or apply an existing one, an important part of getting started with WordPress is understanding what a theme is — and what a theme is not.

It would be easy to say a WordPress theme allows you to customize the way a WordPress blog or website looks. You might refer to such a thing as a skin. WordPress themes can and usually do affect the look of your site/blog, but that’s not all they do. Here’s how the Using Themes page of the WordPress Codex describes the difference:

Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files.

I tend to think of a skin as something that would only control things like the color, layout, and typography of the information on a website. WordPress themes control those things, but they also have the ability to control which information is displayed. In other words, you don’t just use your theme to show a blog post in a certain typeface with a certain background color, you use the theme to control whether your home page shows an excerpt of each post or the whole post, or whether the date the post was written shows up underneath the title, or a hundred other similar things.

To really get how this works, it helps to understand the difference between the back end of WordPress and the front end.

The back end of WordPress is a MySQL database organized into 11 tables (as of WordPress 3.0). You can read more about the tables that are set up in the default installation on the Database Description page of the WordPress Codex.

The database, or back end of WordPress, includes the content of the posts and pages you write as well as a lot of other information that gets added and edited as you work inside the WordPress Admin Panel.

The front end of WordPress is pretty much whatever the theme says it is. So when you choose a theme, or build your own theme, you determine which information gets pulled from the database, where that information shows up within the structure of your site, and how it is displayed to the user as far as colors, fonts, and other properties that can be controlled via CSS or other means.

In that sense, a WordPress theme controls not only how your website looks, but what the website actually is.

Teaching Good Web Design: Part 2

In part one the underpinnings of a good design were laid out. This helped to arrange the content and establish a hierarchy of information in your design. However, there is more to creating a successful piece than just spectacular organization. For a more complete picture we turn to the artsy part of design- the things that are easily visible to your viewers and will make people want to look at the content. The simplest of ticks with these elements can create a sleek modern look, a page full of rustic charm, or an exotic beauty. It all depends on how you use them.

Adding the attention getters- The Elements of Design

 

Line – Line is the most important element in web design as we use it to define breaks in sections and separations between navigation. Thinner lines (1px) will give a sleek minimalistic look while heavier lines (5px) can create nice borders around elements. Giving a line varying thickness can also create a unique feel, such as the stroke of a calligraphy brush or the hand crafted lines of art.

Shape- As we work on the web world, the square and rectangle are the first shapes that pop into our minds when it comes to design. After all, they are easily stack-able, arrange-able, readable, and the way our mind orders things. However, when it comes to things that aren’t content, other shapes used in a design can make your site stand out from the crowd.

Direction- Most layouts are horizontal, and with wide-screen monitors becoming more and more the norm, websites are becoming more focused on wide open layouts. This is not to say that vertical isn’t important, because if you work your design right, people will want to scroll down!

Size – Consider your positive space and your negative space when dealing with size. Most screens can now handle over 900px wide layouts, so you’ve got a good area to work with. Use size to single out important or eye-catching elements.

Texture – Yes, you can have texture in a site. Subtle textures, such as those found in photos, can be overlaid on a color to help add character and that little extra personalization to a site .

Color and Value – I’m placing these two together since they’re the major players in design. (Value is the lightness or darkness of a color, so we’ll just incorporate that into talking about color.) A Design relies upon colors. Be it black, white, red, or blue, all designs have color. What you need to keep in mind is that the best layouts have either 1 or 2 main colors and then the rest are accent colors. Having more than 2 main colors tends to overwhelm the eye, so keep your 3rd color as an accent by using it sparingly and in smaller doses around your page. Moving on, color combinations are tricky- lots of things like culture and personal preference tend to hold sway over things like this, but I can say don’t have every color the same value. Vary the lightness and darkness in your chosen colors to get a better result when you combine them. A bunch of different colors all at the same value can lead to a confusing page if not handled correctly.

Color Theory

Since color is such a big part of design, here are a few helpful insights into color theory.

First off are your primary colors which consist of blue, yellow, and red. It is these colors mixed that create all other colors. You cannot create these 3 colors out of any other color. Your secondary colors are when equal parts of two primary colors are mixed which gives us green, violet, and orange. Add more of one primary color than the other to a secondary color and you’ll get the tertiary colors of yellow-green, blue-green, blue-violet, red-violet, red-orange, and yellow-orange.

 

The above color wheel, starting from top and going clockwise: yellow, yellow-orange, orange, red-orange, red, red-violet, violet, blue-violet, blue, blue-green, green, yellow-green

Complementary colors are a pair of colors that are opposite in hue. What this means is that the primary color and secondary color do not share a primary color. For example the complementary color for blue is orange, a combination of red and yellow. Complementary colors put together at the same value tend to enhance both colors in a way that makes them stand out more or become stronger.

Complementary pairings are: red and green, blue and orange, yellow and violet

To show how complementary colors affect each other, a green square has been placed in a red one and a red square has been placed in a green one. (Both colors remain the same color and value in each square.)

Analogous colors are colors next to the selected primary color on the color wheel, like blue and green or blue and violet. They tend to ease the eye into each color and don’t stand out as much creating a less jarring contrast. More often then not, you’ll be using analogous colors as your main colors and a complementary as your accent.

To show how analogous colors work together, a violet square has been placed in a blue one and a blue square has been placed in a violet one. (Both colors remain the same color and value in each square.)

A good place to further study color theory would be at Tiger Color’s Color Harmonies. It shows the grouping of colors in complementary, analogous, triad, split-complementary, tetradic, and square ways.

In closing…

You can use these basics of art in design and create wonderful websites. Just remember that the above are merely helpers and good advice for you to think about when designing. For more information on design, I would recommend hanging around the fine art section of your local library or bookstore and perusing the books. You’ll find a lot of inspiration and great design.

 

Teaching Good Web Design: Part 1

How do you teach design?

When I first tackled this project that’s immediately what popped into my head. After that came the crushing knowledge that design is such a massive collection of culture and history that I could not possibly teach all of that in one year much less one lesson. Pushing all thoughts of “It’s impossible!” out of my mind, I decided to focus on a different question. Forget about the art, the color theory, the stylistic implementation of items, and answer one thing- What makes a design good? Once I put all of that away, good design became a lot easier to teach.

So some of you may be thinking, if you take out the art, what’s left of design? The framework. Your layout is a very important feature in design. Positioning elements, arranging their size and working with their shape, helps to provide a flow to your design which in turn guides the viewer’s eye along the page. A bad design takes no notice of the notion that things have a certain hierarchy within a page. A good design starts with a great base and so to further that, I’m going to tell you about the principles of art.

There are eight principles of art, each one helping your design achieve greatness. Carefully consider these within your layout frame.

‘Principles of Art’ used in a framework design

Emphasis – Use emphasis by placing your most important items in larger areas higher up on your page. Consider how we read (left to right) and place an important object on the left so that the eye spots it first.

Balance – Use different areas with the same visual weight in area to create a sense of balance to your layout.

Harmony – When a certain amount of space is reserved for a certain thing, make sure that every time that thing is brought up on the page is has that amount of space. This will allow the viewer to associate better between the two instances as belonging to the same subject matter and therefore creates harmony.

Variety – In some areas, place things a bit differently to create a bit of uniqueness. Take a big space and split it into two smaller shapes. This allows for variety, yet still retains balance.

Movement – Remember how a person’s eye moves through your design. You can make their eye start from anywhere- but a good design will keep the eye moving in a fluid motion over your design. A bad design is too confusing and doesn’t have any sense of flow.

Rhythm – This deals with consistency. Remember that you want the eye to move and rest on certain elements. Blank space and area sizing can help you accomplish this- just make sure the page carries the rhythm throughout the design.

Proportion or Scale – This is used mainly for importance. Consider which objects deserve the most attention in your layout. They should be in a bigger space/area when you’re planning your design.

Unity – Once your layout is complete it should look like everything belongs together. The overall structure should not look awkward or stranded at any point.

In part 2, you’ll learn more about the looks of a site and the Elements of Design. This will help you to add a presentable face to your framework.

UA WordPress Theme: Contact Form Shortcode

A minor update has been pushed out to the UA WordPress Theme that adds a bit of new functionality as well as an update to the form HTML/CSS.

The first major difference is the addition of two new shortcodes: [linksbox] and [uaform].  If you are unfamiliar with shortcodes, they are custom WordPress tags that allow you to add things which normally require lots of code.  Please refer to the UA WordPress Theme page on WebGuide for more information on the [linksbox] shortcode.

The shortcode I want to focus on today is [uaform].  By adding [uaform] to your post/page, you will have a fully functional contact form.

Here are some of the features:

  • Shortcode attributes to control form name/email subject and email(s) it sends to
  • JS validation using the jQuery Form Validation plugin
  • Logic verification question
  • SPAM honey pot field

The main reasons I chose to write my own shortcode and not use a plugin to process my data is twofold:

  1. I wanted an integrated shortcode to ship with our UA WordPress Theme
  2. I scoured the Internet in search of a similar solution and was never able to find anything

With that in mind and before we get to the code, here is how to customize the shortcode, should you want to.

Customization Options

Option Description Choices Default Setting
form_name The name of the form and subject of email Any string of text Contact Us
to Email(s) the message will be sent to. Single or Multiple emails. If using multiple emails, separate each with a comma Administrator’s email

Here are several examples how you would use some of those attributes:

[uaform to="nottheadmin@test.com"]

[uaform form_name="Website Feedback"]

[uaform form_name="Ask Us a Question" to="firstperson@test.com,secondperson@test.com"]

PHP

Before you can use the shortcode, you will need to add the following PHP to your functions.php file.  If you are using the UA WordPress Theme, you do not have to do this.

<?php

/************************************
Smart Jquery Inclusion
************************************/
if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-form-validation', 'http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js', '' , '1.7', true);
}

/************************************
Contact Form shortcode

form_name - name of form, also used as subject of email. DEFAULT is Contact Us
to - email(s) the message will be sent to.  Multiple emails can be used; separate each email with a comma. DEFAULT is the Administrator's email address
************************************/
function ua_form($atts){
if(($_SESSION['contact_form_success'])){
$contact_form_success = '<p id="form_success">Thank you for your inquiry. We will contact you shortly to answer your questions.</p>';
unset($_SESSION['contact_form_success']);
}

$admin_email = get_bloginfo('admin_email');

extract(shortcode_atts(array(
'form_name' => 'Contact Us',
'to' => $admin_email
), $atts));

$_SESSION['ua_form_subject'] = $form_name;
$_SESSION['ua_form_to'] = $to;

$output .= $contact_form_success . '<form method="post" action="' . get_permalink() . '" id="contactform">
<fieldset>
<div>
<h3>' . $form_name . '</h3>
</div>
<ul>
<li>
<label>Name <span>*</span></label>
<div>
<input type="text" name="name" maxlength="100" id="name" />
</div>
</li>
<li>
<label>Department/Organization</label>
<div>
<input type="text" name="department" maxlength="150" id="dept" />
</div>
</li>
<li>
<label>Telephone Number</label>
<div>
<input type="text" name="phone" maxlength="50" id="phone" />
</div>
</li>
<li>
<label>E-mail Address <span>*</span></label>
<div>
<input type="text" name="email" maxlength="150" id="email" />
</div>
</li>
<li>
<label>Enter your question, comment, or issue report <span>*</span></label>
<div>
<textarea name="question" cols="50" rows="10" id="question"></textarea>
</div>
</li>
<li>
<label>Please enter any two digits with <strong>no</strong> spaces (Example: 12) <span>*</span></label>
<div>
<input type="text" name="secret" id="secret" />
</div>
</li>
<div style="display:none;">
<li>
<label for="spam">This box is for spam protection - <strong>please leave it blank</strong>:</label>
<div>
<input name="spam" id="spam" />
</div>
</li>
</div>
<li>
<input type="submit" name="submit" value="Submit" id="sendmail" />
</li>
<input type="hidden" name="contact_form_submitted" value="true">
</ul>
</fieldset>
</form>';
return $output;
}
add_shortcode('uaform', 'ua_form');

function ua_form_process() {
session_start();

if(!isset($_POST['contact_form_submitted'])) return;

foreach($_POST as $key=>$value){
$key = strtolower(str_replace('_', ' ', $key));
$form_fields[$key] = $value;

$value = strip_tags(htmlentities($value));

if($key == "spam" || $key == "secret" || $key == "submit" || $key == "contact form submitted"){
//do nothing
}
else{
$message .= ucwords($key) . ": $value\n";
}
}

//Test for spam and verification, then email
//"secret" is a REQUIRED field name in order for this script to work
if($form_fields["spam"] == '' && is_numeric($form_fields["secret"]) && strlen($form_fields["secret"]) == 2){
$to = $_SESSION['ua_form_to'];
$subject = $_SESSION['ua_form_subject'];

$mail_sent = mail($to, $subject, $message, "From: " . $form_fields["name"] . "<" . $form_fields["email"] . ">");
}

if(!$mail_sent) wp_die("Error: <strong>verification failed</strong>.  Your form was not submitted due to an incorrect answer for the verification question. Please be sure to enter the answer carefully.", "Verification Failed");

$_SESSION['contact_form_success'] = 1;

header('Location: ' . $_SERVER['HTTP_REFERER']);
exit();
}
add_action('init', 'ua_form_process');

function ua_form_validation(){
echo '<script>
jQuery(document).ready(function(){
jQuery("#contactform").validate({
rules:{
secret:{
maxlength:2
}
},
errorPlacement: function(error, element) {
if(element.is(":radio") || element.is(":checkbox")){
error.appendTo(element.parent().parent());
}
else{
error.insertAfter(element);
}
}
});
});
</script>';
}
add_action('wp_footer', 'ua_form_validation');

?>

CSS

Here is the CSS that we use to get a nice looking form (thanks to WuFoo for their rock solid form CSS/HTML).

/*********************************************************
 Form Styles
 *********************************************************/
 form.uaform{
 font-family:"Lucida Sans",Lucida Sans Unicode,Verdana,Arial,sans-serif;
 margin:20px 0;
 }
 form.uaform li{width:auto !important;}
 .uaform ul{
 list-style:none;
 margin:0 14px;
 padding:0;
 font-size:1.2em;
 }
 .uaform li{
 clear:both;
 margin:0;
 padding:6px 1% 9px;
 width:64%;
 }
 .uaform li div span, span.full input, span.full select{
 display:block;
 float:left;
 width:100%;
 }
 .uaform span.left{
 float:left;
 width:48%;
 }
 .uaform span.right{
 float:right;
 width:48%;
 }
 .uaform span.right input, .uaform span.right select, .uaform span.left input, .uaform span.left select{width:100%;}
 .uaform li div label, .uaform li span label{font-size:90%;}
 .uaform fieldset{
 background-color:#eeeeee;
 -webkit-box-shadow:2px 2px 10px #ADADAD;
 -moz-box-shadow:2px 2px 10px #ADADAD;
 box-shadow:2px 2px 10px #ADADAD;
 margin:15px 0;
 clear:both;
 }
 .uaform legend{
 font-size:1.4em;
 font-weight:bold;
 color:#990000;
 margin-left:5px;
 }
 .uaform .legend{
 margin:5px 14px;
 padding:0 6px;
 color:#990000;
 border-bottom:1px dotted #CCCCCC;
 }
 .uaform label, label.desc{
 display:block;
 margin:0;
 padding-bottom:3px;
 color:#000;
 }
 label.desc{font-weight:bold;}
 .uaform label.choice{
 font-size:100%;
 line-height:150%;
 margin:-17px 0 0 23px;
 padding:0 0 5px;
 width:88%;
 }
 .uaform label span{
 color:#BC1212;
 vertical-align:middle;
 }
 input.text, textarea.textarea, select.select{
 font-size:100%;
 font-family:"Lucida Sans",Lucida Sans Unicode,Verdana,Arial,sans-serif;
 margin:0;
 padding:2px 0;
 }
 input.medium, select.medium{width:50%;}
 input.large, select.large, textarea.textarea{width:100%;}
 textarea.medium{height:10em;}
 .submit{font-size:1.1em;}
 input.checkbox, input.radio{
 font-size:1.1em;
 display:block;
 height:13px;
 width:13px;
 margin:4px 0 0;
 }
 label.error{
 color:red;
 font-weight:bold;
 }
 input.error, select.error, textarea.error{border:1px solid red;}
 p#form_success{
 color:green;
 font-weight:bold;
 }

After adding all of that code to your theme and inserting the [uaform] shortcode into a post or page, you should see something like this:

I hope this proves useful to those who just need a simple contact form.  If you have any feedback, suggestions, problems with the code, or spot any bugs please let me know!

UA WordPress Theme: How to Control the Width of your Menu Items

In last week’s announcement of our new UA WordPress Theme, I mentioned there would be several tutorials to introduce you to the new features of our theme.  This week’s tutorial will cover how to control the width of your menu items in the Primary Navigation area.

Before we get into the technical how-to, lets backup and look at what’s going on and why we would even need to change the width.

Default Fixed Width

With CSS, we are allowed to define the exact width of an element.  The new UA WordPress theme will automatically assign the appropriate menu class based on the number of menu items you have in your Primary Navigation menu.  This allows us to assign a default width to each list item in order to distribute evenly across the navigation bar.

Variable Length Names

The trouble with using a default fixed width for each menu item is that, often, it leaves no room for contracting or expanding.  So let’s say you have chosen six menu items for your web site, and the words chosen for those menu items are variable length, so that some are much longer than others.

  • About the College
  • Academic Programs
  • Giving
  • News
  • Resources and Links
  • Contact

Because the list items are of equal length by default, but the words inside the list items are of different length, the menu may appear unevenly distributed, as shown here:


Notice the extra space around the shorter items “Giving” and “News”, and then how little space there is between the items “About the College” and “Academic Programs”. This method certainly works, but may not be ideal for the visual appeal of your site, since the variable length of the words make the menu appear to be unevenly distributed.

Recognizing the Problem

With the Dreamweaver templates, we were able to control the CSS IDs using “item1″, “item2″, etc.

HTML Code generated from UA Dreamweaver templates

<div id="main-nav">
<ul class="menu_6">
<li id="item1"><a href="#">About the College</a></li>
<li id="item2"><a href="#">Academic Programs</a></li>
<li id="item3"><a href="#">Giving</a></li>
<li id="item4"><a href="#">News</a></li>
<li id="item5"><a href="#">Resources & Links</a></li>
<li id="item6"><a href="#">Contact</a></li>
</ul>
</div>

However, because the UA Theme is now using the WordPress Menus functionality, we lose the custom CSS IDs and are instead replaced by automatically generated IDs created by WordPress.

HTML Code generated from UA WordPress Theme

<div id="main-nav" class="menu-custom-menu-container">
<ul id="menu-custom-menu-1" class="menu_6">
<li id="menu-item-4" class="menu-item menu-item-type-custom"><a href="#">About the College</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-post_type"><a href="#">Academic Programs</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom"><a href="#">Giving</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom"><a href="#">News</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-custom"><a href="#">Resources & Links</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-custom"><a href="#">Contact</a></li>
</ul>
</div>

As you can see, WordPress changes quite a bit from the original code.

Fixing the Problem

Now that we know what is going, how do we go about fixing it?  Luckily, it’s as simple as checking out the generated HTML code from your site and adding a few lines to the CSS file!

  1. Go to the home page of your site and, using your browser, View the Source.  In Firefox, this is done by going to View->Page Source.
  2. Scroll down until you come to the “main-nav” section (examine the code from above if you aren’t exactly sure).
  3. Each <li> will have an associated ID.  Using the code from above, the IDs are
    • menu-item-4
    • menu-item-5
    • menu-item-9
    • menu-item-10
    • menu-item-42
    • menu-item-43
  4. Now, open style.css in the ua_theme folder and add the IDs.
  5. Add custom widths for each menu item until you find the right mixture.
  6. IMPORTANT: the width of all of the items must total no more than 972px.
#menu-item-4{width:197px;}
#menu-item-5{width:201px;}
#menu-item-9{width:130px;}
#menu-item-10{width:130px;}
#menu-item-42{width:172px;}
#menu-item-43{width:142px;}


As you can see, the menu now appears much better visually because the list items appear to be evenly distributed across the menu. And the total width of the menu is equal to 972px, so the code is correct. Certainly, this is a subjective process to find “what looks right”, but that is a process with which all web designers should be quite familiar.

If you have any questions about this tutorial, please leave a comment.

UA WordPress Themes are now available

The Office of Web Communications now offers UA web developers a collection of easy-to-implement WordPress themes based on the look and feel of the UA Web Templates.  Now users can edit and update their website with a simple CMS (Content Management System) interface while taking advantage of the clean, professional look and feel of the UA Web Templates.

Design Themes

All three UA Web Templates are now available in WordPress format, and for each template there are four theme variations to provide design options and maximum flexibility in creating a web site.  For more on these variations, please refer to the UA Web Templates page.

  • The standard theme is a straightforward site design which should meet the majority of user needs.
  • The search theme places a search bar in the header for sites with a larger content base which need to find information via keyword.
  • The functional footer theme allows for a selection of links to be placed within the footer to provide extra navigation.
  • The fourth theme contains both the search in the header and the functional footer.

Click here to download the UA WordPress Themes

Options

In addition to the traditional static site, the themes also offer the option of a blog-style site or a combination of the two. Blog posts and comments have been formatted to fit with the UA style and allow for a more interactive environment.

The WordPress themes draw from the same CSS and HTML as the UA Web Templates. Dreamweaver will still be needed to edit main navigation in the themes, but most content can be created and edited within the WordPress system.

WordPress Guide

To further assist users with these themes, a short ‘how to’ has been written within the UA Web Guide. The documentation provides helpful instructions for choosing a theme, implementing the chosen theme, setting up a site style, and customizing the site.  It also contains a list of recommended plug-ins.

For an example of our UA WordPress Themes in use please visit the Editorial Style Manual.

Updates

Those familiar with WordPress will know that it is a powerful and constantly evolving platform.  As WordPress evolves and grows in functionality, so too will the UA WordPress Themes. Stay tuned to WebTide and WebGuide for future versions of our themes. 

Usage

Taking a shot at building a web site using these themes?  Shoot us an e-mail and let us know about it – we’d love to hear about your project.  Thanks!

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

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.

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