Web Strategy and Development Blog

Student Web positions available

by

Working on a computer

Want to work in a fun environment while getting hands-on job experience?

Several opportunities available

The office of Web and new media has three student positions available:

Web Help Desk Associate

  • Assists University website developers with telephone and in-person support.
  • Creates and configures websites in Web Press and converts websites to the Web Press system.
  • Creates technical documentation for website developers.
  • Implements website designs using CSS.

Web programmer

  • Programs dynamic and interactive Web applications using advanced programming knowledge including technologies such as SQL and server-side programming languages such as C# and PHP.
  • Uses GIT source control.
  • Develops and maintains large-scale JavaScript applications.
  • Utilizes external APIs including Google Maps and Flickr.

Designer

  • Designs Web graphics, including unit mastheads and featured updates
  • Updates Web information and graphics on University website
  • Provides design/layout information and Adobe CS assistance to other members of the office of Web and new media

Requirements

  • Applicants should feel comfortable in a fun yet professional atmosphere.
  • Applicants must have effective communication skills and the ability to learn technology quickly.
  • Applicants must also be Missouri State University students who can work 10-20 hours/week during the standard work day (8 a.m.-5 p.m., Monday-Friday).

Apply today

Pay ranges from $9-10.50 per hour, depending on position. Work hours may also count toward internship for course credit.

Opening are available immediately. To apply, email your résumé to web@missouristate.edu

About the office of Web and new media

The office of Web and new media maintains many of the Web pages for Missouri State University including the homepage, search and campus map. In addition, the office provides support for Web developers across campus. The office is located downtown in the Meyer Alumni Center.

Student Web developer position available

by

GlobeWant to work in a fun environment while getting hands-on job experience? The office of web and new media has openings for student Web programmers.

Position duties

Duties will be tailored to applicant skillset. Possible duties include:

  • Developing custom CSS and HTML for campus websites
  • Coding AJAX/JavaScript for campus websites
  • Programming database-driven Web applications using ASP.net, ASP or PHP

Applicants should feel comfortable in a fun yet professional atmosphere. Applicants must also be Missouri State University students who can work up to 20 hours/week during the standard work day (8 a.m.-5 p.m., Monday-Friday). Pay is $8.50-9.50 per hour.

CSS, HTML and more

Applicants must be proficient in HTML and CSS and have effective communication skills. Preferred applicants should have some proficiency in database design and/or maintenance, C# and/or JavaScript.

Apply today

Opening are available immediately. To apply, email your résumé and some sample websites you’ve coded to web@missouristate.edu

Honey I Shrunk the Website

by

Honey I Shrunk the KidsWeb pages should load fast. Period. It’s irritating for any reason to wait on a computer. As a web developer, so many of the factors that go into page loading speed are outside of our control. However, some of the biggest ones are fixable with a minimal amount of work. The effort isn’t really justified for every page, but high traffic pages (like the university homepage) are definitely worth it.

Formatting for speed

As a programmer, I much prefer to maintain nicely formatted code. But when you are after speed, the whitespace has got to go. You can reduce the size of your page significantly. Smaller code size = less bandwidth used = faster load times = win for everyone but the programmer. Removing whitespace is effective on the HTML of the page, stylesheets and JavaScript.

Beyond whitespace

With JavaScript you can optimize even further. Tools such as Google’s Closure-Compiler can not only remove whitespace, but perform some pretty hefty optimizations on your code. For our redesign, Closure-Compiler reduced a 38KB file down to 14KB – and size was only part of the speed benefits it gave.

All zipped and ready

In today’s world, why would you send uncompressed resources? Processing power is cheap – it’s network speeds that still seem to limit us. Text files such as HTML, CSS and JavaScript can easily be compressed on the fly by almost any modern web server – as long as you have the processing power to spare. That 14KB JavaScript file actually gzips down to a measly 5.2KB. That brings our combined savings on that file alone up to nearly 87%!

Compression Resources

Zero is less than something

Of course downloading nothing is always faster. Usage stats show us that we have a high degree of returning visitors to our homepage. By setting some pretty aggressive cache headers, users only have to request new HTML. All of the images, stylesheets and scripts can be loaded from what they got on their last visit.

Cache headers are somewhat confusing and can have unintended side effects. Google has a great article on the relevant cache headers: http://code.google.com/speed/page-speed/docs/caching.html

Tools of the trade

Optimizing your site for loading speed can be a daunting task. There are a few tools that make this easier. My personal favorite is Google Page Speed (an addon for FireBug). In addition to a prioritized list of suggestions, several optimizations can be run within the tool itself such as image optmization and whitespace removal.

This is the second post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:

Johnny five is alive

by

Jonny FiveSince in recent history the Missouri State homepage only gets a complete overhaul about once every 5 years, deciding on what HTML and CSS technologies to use as a baseline is tricky. Five years from now what was once cutting edge could now be old news. So the balance is between a cutting edge technology or something already over 10 years old. We opted to go for the HTML5 route. Little did we know the struggle that would bring.

Browser support

Everyone knows that not all browsers are created equal, but when it came to an actual HTML5 design old browsers just had to go. This wasn’t just Internet Explorer 6, but also FireFox 2 and older. The critical point came down to how a browser would handle an unknown tag. Without some JavaScript help, IE8 and older would treat any unknown tag as inline and had no way to style them. FireFox 2 just choked. There were a couple of options:

Use a hybrid template

In order to handle browser shortcomings, many people just advocated using an HTML4 design with the new tags wrapped around them. Later, you can come back and remove the extra HTML4 structural elements. While this approach would be fine in situations where you can control your templates, for a large distributed site it just wasn’t really feasible and frankly is just kind of cheating.

Go all out

This option punted on support for older browsers in order to look forward to future browsers. However, this meant requiring JavaScript for the template to even function in Internet Explorer 8 and older (IE9 platform preview support looks excellent as of this post). This could also be called the “short-term pain for long-term gain” method. Oddly enough, very few complaints related to this actually materialized.

Gracefully degrade

HTML5 and CSS3 bring some great new features – drop shadows and rounded corners alone are a godsend. But what happened to making the site look the same everywhere? I believe that question has been answered. Instead of killing ourselves on consistency, we chose just make sure the features gracefully degraded in older browsers. Try out the homepage in IE, Chrome and FireFox – all three have minor differences.

Brand new toys

HTML5 brings with it quite a few new features: native audio, video and drawing support are probably the most touted. Yet these are problematic. Not only do only the very newest browsers support the tags, but they can’t even agree on a common set of codecs. So for now, we’re forced to use browser detection to determine whether to use the native tag or to output a flash version. I guess you still can’t have your cake and eat it too.

This is the first post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:

Of Floats and Clears

by

Floating and clearing content are powerful CSS techniques. Unfortunately neither one is well understood. Hopefully this will clear up some misconceptions.

Common Float Mistakes

  1. Misuse of float: right;
    Incorrect float:right usage.
    Incorrect float:right usage.

    I frequently see 2 column layouts where the first column is floated left and the 2nd column is floated right. Instead, both columns should be floated left or the second column should not be floated at all. Float right is reserved for when you want to shift an element (like an image) to the right side and have all the following content wrap around it.

  2. Floating Everything
    Non floated container with only floated elements
    Non floated container with only floated elements

    When a non-floated container has only floated elements within it, it will not automatically expand. One “fix” for this is simply to float the container. This should be avoided as it can quite possibly just pass the problem up to the next container.

    Don't float everything
    Don't float everything

    Instead of floating the container, either don’t float the second div or properly clear the float.

Two column layout without setting widths or floating the second column

We frequently have layouts where one item needs to be floated. In the past, we have floated both columns which in turn has required us to set a width on both columns. As soon as we try to set the same code in a different size container, we have to override all of the styles. Typically, the first column has a set width and the second column should take the remainder of the width. You can accomplish this by setting the left margin of the second column.

2-column layout without setting a width on the second column
2-column layout without setting a width on the second column

This technique does not work in Internet Explorer 6 without additional styles. Also, you will still need to properly clear the float after the second column.

Properly clearing floats without structural markup

Much of the time we use an empty div to clear a float. However, not only is that adding markup to our sites that is only used for presentation, but sometimes it’s not possible. Consider a definition list where you have floated the term and need to properly clear that float after the definition. You cannot use extra markup as it isn’t allowed. The following code snippet will properly clear a float without extra markup.

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

More about this technique can be found at http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/