First, a couple thoughts. If you are waiting to work on the mobile web, you’re already behind. You should be planning now, at the very least. Higher education is notorious for playing catch up on technology issues, don’t let that happen here. Don’t make excuses. The mobile web is not going away. It’s not a fad. It’s not something that you want to sit and wait to “see what happens.” In the brief history of the web, we’ve seen only a couple major paradigm shifts in the Internet. The first was the shift from a small, infantile web where a few companies had staked territory, to one where anyone and everyone could have a site. Suddenly the web flattened out. The second shift was to the read-write web, a place where not only can you have your site, but you can contribute to others. The web socialized, it began to get a personality, and it was your personality. Now, we are moving to mobile devices – the next shift. I don’t look at this as a technological shift (by itself) because the change occurring isn’t just about the hardware, it’s about how we design, architect, and consume information. The ubiquity of mobile devices and the rapidity with which they are penetrating society is something entirely different from what we’ve dealt with before.

So, the good stuff. First off, let me be clear. I’m a one man army, like many of you. This project wasn’t the result of the effort of a team of a dozen people over 6 months. It was me, a couple weeks, and a lot of lost sleep. To do this, I committed to the idea that it would be a pet project. I went home, and lived mobile data and code until 1:00 or 2:00AM every morning (as my wife would probably angrily attest to). I did this because I understood that in terms of priorities, it just didn’t really fit in the 9 to 5 for me right now, but it was also something that I believed couldn’t sit around and wait for my normal project schedule to lighten up. Maybe you’re luckier. If you’re not, do what you have to do. But like I said, don’t make excuses, don’t tell me that you don’t have enough resources to get this done, because you do (you just might need to keep a little extra coffee on hand). Besides, it’ll make you look great to your boss, assuming your boss doesn’t mind you going off all maverick and coming back with cool new tools. And I won’t lie to you, you might have to take a chance on this that people will see it and be on board with launching it, especially if you’re doing it like I did as a side project. Part of me feels that you have to be willing to take those risks though when you’re in web development. Playing it safe means you’ll only ever be average.

Mobile Analytics Stats

I started with analytics, because strategy starts with informed planning. For a while now, Google Analytics has had built in visitor segmenting by mobile devices or carrier. Mobile web is still very much in a maturing phase, and one of the big questions you should consider is how to target users needs. Now, here’s quotable quote #1: Yes, a well coded, properly built site should be able to be used on any device. That is the ideal, and it is not unreasonable to say “this is what I want to strive for.” But, this project isn’t about converting your normal site into a mobile friendly template so it works everywhere. In my case, I saw that over 83% of my users were on devices with WebKit based browsers. Based on that fact, I decided to take a slightly different route, and I’ll explain why as we go on.  I started with the idea that users coming to our site were coming for specific tasks, and I was able to back that up with analytics (logins and email the big two). Now I had a starting place to build around, knowing that I had certain things to cover that mobile users were definitely doing. . That’s not to say it’s okay to ignore that other 17%. What I’m doing is trying to provide a killer experience to the biggest audience I can, with the goal to roll the rest in as best we can over time. Rather than taking a long time to get everyone, I’ll take a little time to get most people, and deal with the long tail.

jQTouch Website

jQTouch is a jQuery plugin for websites that allows you to rapidly deploy mobile sites that are feature and function rich. The catch is that it really only works in WebKit browsers. So, question number one you need to answer is if the feature tradeoff is worth it. In my case, I said yes. I was willing to sacrifice the 17%, not just because of the features, but because jQTouch gives you the added bonus of allowing you to build and deploy a site relatively rapidly. But, there are also other platforms, such as the MIT Mobile Web framework that would similarly enable you with somewhat better compatibility, albeit lest whizbang factor out of the box (plus we aren’t a PHP shop).

Another benefit of jQTouch is that it can effectively allow you to build an entire site in one HTML file (obviously including CSS and JS includes, which add a not insignificant amount of overhead, I recommend compressing them all). Once the page has loaded, it can give you access to a large amount of information very quickly, without page load delays in between. I use this for most of the core navigation and pages, then use the built in AJAX detection to handle things like the news feeds and events which change frequently. I should note that our content management system, dotCMS, allows me to be extremely flexible with dynamic content reuse on our site. Doing custom things with content used elsewhere on the website is an extremely painless process for us. I hope you are just as lucky in that case, because it will dramatically improve your development process. If not, RSS feeds can be your friend.

What it amounts to is jQTouch lets you design a mobile site that can behave very much like an iPhone application. Why would you want that? Because it’s not about pages anymore. Mobile usability is a completely different realm from our normal websites, so it’s not good enough to just do a mobile compatible layout (this goes back to the earlier point). It’s the information that is important. You have to take into account how people are using your site from a mobile device, because their activities will be substantially more action and goal driven than they would be sitting behind a PC. We are stewards of information, and webpages are the vessel. But the terrain is changing, and that means we need a new vessel for our information. It’s about the content, the context, and the motives

Now, quotable quote #2: Never stop improving! Ever. Our initial feature set was based on two things: what our analytics told me about where on the site people were going while using mobile devices, and what I could easily integrate without polluting the interface (news and calendar). From within the mobile site and from the site’s PC based about page, there are links to recommend features or report bugs. Believe it or not, the people using your site will tell you what does and doesn’t work for them. You just have to be listening. And once in a while you might have to get out and ask. My point is, don’t make guesses about what your users need, let them inform you. Over time, you might discover certain features go stale as user tastes, trends, and expectations change. Be prepared to cut away things that didn’t work or don’t work anymore to make room for better tools. User needs will change. But you have to be paying attention in order to address it.

Along with that, you need to set some kind of goals, so that you know what to strive towards. But be realistic. Don’t come out saying you want to do something that would completely require a change in the fundamental way someone expects to use the site: for instance, getting 10% of admission applications from mobile devices isn’t exactly realistic, because that’s not an activity you would expect people to be doing from a mobile device anyway (or maybe they are, if that’s what your analytics tells you, in which case that’s pretty awesome on its own). Start with reinforcing anticipated behavior and building expected behavior.

So, to recap:

1. Start checking your analytics, get out and ask people, find out what mobile users are doing on your site now.
2. Figure out what you can easily, and rapidly get out to those users from that list, plus anything else that could be valuable.
3. Pick some kind of framework or model to base your site on. Don’t reinvent the wheel. Don’t run before you can walk.
4. Change how you think about “web content.” Consider how and where it is to be used.
5. Set up a couple goals, something simple, something realistic.
6. Build it. Include analytics in it.
7. Watch. Listen. Measure.
8. Improve it. Make new goals.
9. Repeat steps 7 and 8 until you die.

Once your site is out in the world, you can start to really refine the experience. If you have the developer backing, you can even easily turn that site into an actual mobile app using tools like PhoneGap, letting you kill two birds with one stone. Suddenly, not only are you maintaining a mobile site, but you’re covering five different mobile app markets, with barely more overhead than the initial site.

I will be presenting on mobile web strategy with HigherEdHero.com July 29th at 12:00PM CDT, so mark your calendars if you want to get more information on this topic.

No related posts.

I go through a few quality and consistency checks almost every day. Typically it’s the student assistants who are the worst offenders but even seasoned web workers make mistakes. It’s good to keep everybody on their toes and make sure the whole team (even if it’s just two of you) are aware when someone makes a mistake. It’s an opportunity for everyone to learn, not a platform to criticize.

Below are some testing patterns I use on a daily basis based depending on the stage of the project.

Navigation / User Experience

First and foremost I click every link possible. The LinkChecker plugin for Firefox is a must have but be careful, I’m not just looking for 404’s, it’s blank or incorrect content that I look for.

If the site is a redesign I make sure in the navigation there is also references to all the old URL’s for each new menu item. We do this as part of the navigation process so when the site is ready to launch we can create the redirect list quickly and painlessly.

For every one of our projects we create a list of user goals. These are the primary actions an ideal user should take for us to call them “successful”. This could be as broad as clicking to view the program list or as detailed as getting them to sign up for an open house. Regardless, for each user goal I create a step by step list of the pages and screens they would see to get to that goal. This way we can see them compared to each other and determine where we can optimize.

Design

I love the five second test, I think it’s a great way to get immediate feedback from someone who has no vested interest in the site. It gives an objective view from an outsider with no repercussion of their thoughts and feelings, it’s as honest as you can get. Before showing mockups to a department or client I like to run a few of these, just to see how outsiders react and often it gives us data to back up our own opinions.

I then bring up the mockup and the actual coded site side by side and check to see if any details are missing. I’m not looking for pixel perfection but at the very least looking for the same colors, relative spacing and feel.

Code

I typically have every different type of browser I can get my hands on open all the time. I <3 Spoon.net. From doing so much front end development I get use to the browser quirks, know how to spot them and know how to get around them. As IE 6 is fading it doesn’t mean you don’t still have to support it, it just means you support it in a different way. Make sure there are no peek a boo bugs or double margins. Developers should know better.

If there is an address or location making sure the HTML is correctly formatted with microformats. Although it might not be immediately apparent why they should be there, in the not so distant future they will be connecting information all over.

Making sure Google Analytics is set up and installed on every page prior to launch. If this is an existing site, make sure the same analytics id is installed on the new site. You want to have all the historical data you can get your hands on. In addition make sure all you filters and user goals are setup beforehand. You don’t want to loose those first time visitors when your new site gets announced.

Accessibility

Using the Webmaster Toolbar for Firefox the first thing I do is turn off CSS. Looking at the pure hierarchy of the page to make sure it makes sense. H2’s are nested under H1’s and skip to navigation and content links are in place and working.

I then turn javascript off. Making sure everything still works including any flash areas and rotating promotions. If there are expanding areas or embedded video I make sure there is still a way to get to that content or download an alternate version of the video.

Lastly I try to navigate the entire site with my keyboard. A user should be able to go from area to area in a logical order without having to back track or loose track of the selected item. I make sure I can get to the sub menu items, I can click back to the home page and lastly making sure any javascript that moves elements changes my selection focus to the new items. I don’t go into all the WAI-ARIA guidelines but as many as time allows.

User Experience

Lastly I take a look at the whole user experience. What happens if someone hits a 404? Are they presented with a pretty page with navigation intact and a friendly error?

Using that redirect list I make sure to type in a few random old URI’s to make sure they forward to the right pages on the new site.

I also make sure any promotion areas, news or event lists have enough content in them to last for the next few weeks. This way as the department is fixing odds and ends they notice after launch they don’t have to worry about the small items that move over time. It’s won’t be cool two weeks in to see the site with blank areas where news or promotions should be.

Final Thoughts

Every one of our departments want a new site and they want it up as soon as possible. This is totally understandable but there is no need to sacrifice quality for speed. As Karlyn posted earlier this week, “Ultimately it’s what you deliver that matters.” Keep your quality standards high, so what if the department heads get a little annoyed, your users will thank you.

Photo by mollyjolly

Related posts:

1. Live Blogging AMA Higher Ed: The New Power: Social Media Marketing Strategy for Higher Education
2. Large Sites and Information Architecture
3. Don’t lose your identity – Create an effective print style sheet

reCAPTCHA

Solve a CAPTCHA and help digitize books. reCAPTCHA is the human extension of a project designed to digitize old textbooks. While scanning often there is words that the ORC scanner cannot recognize. These words are then pumped into a central repository where they are randomly displayed on screen for a human to decipher. Each reCAPTCHA has two words, one known and one unknown. If you get the known word right it is assumed you got the unknown word correct. If at least two people get the unknown word correct then it is marked as deciphered. Simple concept and for a great cause.

The biggest complaint about reCAPTCHA or CAPTCHA in general is the complexity of the images produced, sometimes almost unreadable by humans (especially if you have used ticketmaster.com). At least reCAPTCHA has the ability to refresh and grab a new pair of words or even read the words aloud. If you are forced to use a CAPTCHA, reCAPTCHA is your best option in my opinion

The biggest issue in my book with reCAPTCHA is Javascript is required to show the image. Although most bots don’t use Javascript neither do some legitimate users. Not only ones with disabilities but also ones on mobile devices.

Simple Questions

What is 3+2? If you can answer a simple math problem you must be human. This method relies more on someone comprehending a sentence and placing the right string in the form field. It can range from simple math to just repeating a word.

It’s great because the only programming needed is to validate a field is submitted with specific information. The down side is when someone cannot answer the question. Making questions too difficult or obscure can result in frustrated users.

Hidden Field

Bots rarely render their forms in a browser so hiding a field with CSS (or Javascript) allows you to determine if the form was submitted without being looked at. Only someone in a browser would not see a specific field, so if that field has content its likely filled in with a bot and you can ignore it.

Bots often fill fields with junk or things that look like text and try to match up the “name” attributes with almost valid data so “first_name” might result in an actual name. But they cannot resist a good type=”text” field since it allows them a great deal of space to inject HTML or BB code. Hidden text fields work great with they are type=”text”. Downside of this approach is someone viewing your page with CSS turned off might get confused to see a field with no label just sitting there.

Check Referrer

Did the form submission come from your site? If not do you care about its contents? After a form is submitted checking where it was submitted from is as easy as $_SERVER['HTTP_REFERER'] with PHP and Request.ServerVariables(“HTTP_REFERER”) with ASP (I think, I despise ASP).

Bots often will pull down your form and submit it remotely which creates a blank referrer. No referrer often means the form was not submitted through your site. The plus side of this method is the user does not have to do anything extra, the downside is you have to be careful when throwing away data, it might be legitament.

Confirmation Page

Is this information correct? A confirmation page is probably one of the best ways to supply a form to a user and verify if they are human while still making them feel comfortable with the information they submitted. Bots almost certainly don’t analyze the “Thank You” page so if your form goes to a confirm page where they have to click another button to confirm and submit their information it will more than likely not be compromised by a bot. The only down side to this method is the user has to click a Submit button then a Confirm button, there is a likelihood you loose someone in the middle.

Just Deal With It

You could also do what most people do and just deal with it. Make sure your data has to go through an approval process before bring posted publicly or sent via email. This will ensure a human verifies the information on the form was submitted by a human. Too bad this is the most effective and time consuming option, there is no better way to spot a human than with a human (currently).

Some forms like login’s don’t interrupt your daily routine when captured by bots but a full inbox all the time can really get on your nerves. None of the methods above are foolproof so some spam may still get through but any one of the above is better than nothing. Don’t be left with an open form for bots to clog the internet, inbox and databases with.

Lets not forget about accessibility

While all these options are fine and dandy the first two require extra work on your users end. This throws the red flag to make sure they are accessible. Opting for an option that does not require any extra work on the users end is best but can lead to a higher spam rate. Weigh your options and determine which method is best for you, each form is unique and one solution cannot work for all situations.

Main image from XKCD.

Related posts:

1. The Content Editor’s Missing Manual
2. Redesign once, increment forever.
3. The Three Pages That Every Site Should Have

As I walked back to my office Friday afternoon, certificate in hand, I got to thinking about how critical leadership can be in a web office, and how our role at a university puts us in a position unique from almost anywhere else on campus.  First, it’s important to stress that real leadership isn’t about power, it’s about service.  I cannot stress that enough.  Almost more than in any other profession, in higher education when you are willing to take a leadership role, it means truly committing and putting yourself out there above and beyond your job description.  Maybe you’re sitting on extra committees, coordinating efforts, or taking part in things like a classified senate.  Regardless, becoming a leader requires you to commit beyond your job description and to give yourself over to serving others with the skills you have.  It isn’t just about being in charge of a bunch of people and telling them what to do.  Being a boss and being a leader are different creatures.

The reason we are in such a unique position is because of how connected we are across campus.  Public relations knows a lot of stuff, so does Advancement.  Ultimately, however, most of these entities are limited and restricted from certain aspects of campus.  The web, however, is different.  I’ve stressed before that a good web office sits under neither Marketing, nor PR, nor IT.  Instead, it should be between them all.  A hub, not a spoke.  When you serve as the hub, all things go through you.  PR isn’t particularly interested in the syllabus posting needs of faculty, or the photo gallery requirements of Athletics.  IT… well, they’re IT.  And Marketing’s main goal is to get students and money on campus.  All of them have on blinders.

We can’t work that way.  Recently, a group of about six offices came to me wanting a solution for doing things like storefronts, taking donations, and otherwise using the web to make money.  Great idea, that, because obviously with budgets getting cut, the more we can do to make easy money, the better.  It just so happens that with our web ear to the wall, we discovered at that exact time the Budgeting Office was meeting with vendors for a billing and payment processing system for campus.  Without that connectedness, this first group would have been in the dark, and we would have ended up with two different groups doing two totally different things towards basically the same goal, and spending way more money than necessary.  Instead, we stepped in, got people involved, and worked it out so everyone could benefit from a single tool.

It’s situations like that which have lead me to declare that any time I ever hear the word “web” or “internet” mentioned, I simply inject myself into the meetings and discussion.  If I don’t, there’s no one else here that is, and more often than not the result is people making less than well informed decisions.  In the case of the payment software, I didn’t necessarily have an obligation to step in and put the two groups together, but I knew that action would better serve them, the campus, and my office.  It’s no new thing that on a big campus, the left hand doesn’t know what the right hand is doing, but a leadership minded web office can serve as the nervous system that sends signals to both, and gets them working together to do things like play the guitar.  Metaphorically speaking, of course.

We all have a ton on our plates, no doubt.  But these small things and actions can go a long way to proving and solidifying the importance of a well resourced web office.  Imagine the money that could be saved when web steps in with recommendations for taking certain data operations online, or like in my case, when they hear two different groups working towards the same goal.  Imagine the time that is saved.  No one else has as many feelers out there as we do, and that leaves us in a prime position to take a leadership role, and help serve the campus to keep it running straight and efficiently.  Pick your metaphor: we’re the nervous system, we feel the pulse, we sense the weather changing – it all comes down to knowing how much we can do and offer for campus, even if you don’t have to.

photo credit: pedrosimoes7

Related posts:

1. What the Doctor Ordered: Training, Technology and Leadership
2. IMHO 7 Reasons Why Higher Ed Is the Best Gig in All the Web
3. IMHO 7 Reasons Why Higher Ed Is the Toughest Gig in All the Web

Step 1: Text is all you need, assume and start with nothing.

Download Lynx (Mac | PC). Load up your web page and see if you can navigate to your desired information. Does the order of the content look logical? Is anything important missing? Are you seeing text you should not be seeing?

Often this is the first step overlooked by web developers, not because its hard but because it takes extra time. Pressure from management to get projects done can push accessibility low on the priority list. You can learn a great deal by browsing your site from this browser, how easy or difficult it can be. Try it out for at least 20 minutes, see if you get frustrated or not.

Step 2: Building up, SEO included

Semantic code has built in search engine optimization. Naming your html id’s and classes by what they contain instead of their visual position not only benefits developers but also search engines. When a computer knows what content you are describing it can bring it to the attention of someone searching for it. When you use javascript to load content dynamically on the page you can be hiding that content from search engines and in turn from your potential users.

If something is important enough for search engines to pick up it should be in the html file and not loaded afterward. As you can see from the screen shot in step 1 the login form is currently in the HTML although it is only visible by clicking on a link that is activate via javascript. The login form is not something a search engine would care about so it should really be removed from the HTML and loaded into the DOM once the page has loaded with javascript.

Step 3: Technology applied in layers, CSS next

After your site works in a text only browser in a linear fashion without javascript or images start applying some style. Applying the style with CSS will hopefully give you a central location to update the look of your site. One important thing to think of when writing CSS is to be diligent and keep your nesting in a logical order so you or another developer can edit it in the future without wasting time searching through all the inheritance rules.

There are thousands of techniques to writing CSS, I am not going to dictate which one is better than the other, but what I want to convey is thinking about every rule you add and ask yourself if it is necessary. Each added rule adds weight to your page, rendering time and complexity for future development changes. Use HTML tags appropriately, header tags for headers, p tags for paragraphs and so on so search engines know what is on your page and so you don’t have tons of container DIV’s weighing down your page.

Step 4: Images (png’s mainly)

As the design of web pages get more intricate it becomes more beneficial to use alpha transparent images to minimize the number and filesize of images. Older browsers (Netscape and IE6 mainly) do not support these alpha transparent images natively. Although there are techniques to add this functionality, in most cases the extra rendering time and weight is not worth it.

One rule as a web developer/designer that you have to keep in mind is supporting multiple browsers doesn’t mean you have to guarantee the same experience across the board. There is nothing wrong with serving up different images depending on capabilities as long as the users experience is not impaired by the lack of images.

The example above is IE6 on the left and Firefox on the right. As you can see the left image is jagged because it is just a transparent GIF and the smooth image on the right is a PNG with alpha transparency. The switch was done with an <!–[if lt IE 7]> conditional. Same web page but different experience depending on the users browser, adding functionality if it is available.

The Goal

To reach everyone possible. Think of a web page like a building, it has to be accessible by all no matter how it looks. Starting out with the absolute basics and building up keeping accessibility in mind benefits everyone. Your users, designers and developers will thank you. Although these things seem really basic, they are the building blocks to a successful web site.

Next time: Javascript DOM Manipulation, AJAX and Flash

Related posts:

1. Web Development Tools. What’s in your web toolbelt?
2. Accessible Twitter
3. The Three Pages That Every Site Should Have

I oversee a staff of eight in the Web Communications department at Wayne State University and have to see and approve all web content from all stages and areas of a web site. We typically have ~25-30 projects going on at any given time so checking pages can get daunting. But there is a large set of tools out there which make the process easier.

This is a set of the tools I use to evaluate a site from code to accessibility. Its not a comprehensive list but it is what I use. I also want to warn everyone I am working on OS X, so I do have a bias to Mac software.

For Firefox

Firebug

The Swiss army knife of web development. From viewing HTML to watching HTTP requests to manipulating code and CSS on the fly. A must have for any web developer, it will speed up your development time ten fold.

YSlow

An extension of Firebug, YSlow takes optimization to the next level. It gives a score of your site based on Yahoo’s seven categories to evaluate a sites performance. It also shows the first time load impact of your page and with a primed cache. With this tool you can see where you can gain precious milliseconds.

HTML Validator

With the HTML Validator you can see which of your pages validate right in the status bar of Firefox. This almost eliminates the need to use the W3C Validator. It is not as strong as the W3C but very close.

FireCookie

Extending Firebug even further is the FireCookie extension that not only shows you all your cookies but allows you to enable them on the fly. A great way to test for vulnerabilities and check under the hood of any web site.

Web Developer Toolbar

Another Firefox extension that will change your development forever. With this toolbar you can not only inspect everything about a page but also check it for accessibility and analyze style. Disabling javascript, images and even disable cache so you always get the freshest version of your pages.

Check Links

When putting together a site or redesigning making sure all the links work is crucial. Clicking on them all takes too much time, this Firefox extension in one click will check all the links on the page and show you visually which ones works and which ones are broken.

Reload Every

Are multiple people working on the same page or parts of the page and you want to track their progress while you work on your own tasks? This Firefox extension will automatically reload a web page at desired intervals saving tons of time switching windows if you did it manually.

Tails Export

Ever wonder which web sites are using microformats? This Firefox extension will show you right on the Firefox status bar and clicking it will show you all the microformats and the HTML that goes with them.

Microformats Bookmarklet

An alternative to the Firefox extension this Bookmarklet will show you all the microformats on a page when clicking on it. It requires you to click to see them but displays them in a prettier format.

Delicious Bookmarklet

When you run across a page that you want to bookmark or spread to your friends the delicious bookmarklet is a lightweight way to do that. Since your Firefox is probably already bogged down with loads of extensions this bookmarklet adds the same functionality without any extra load on your browser.

Ma.gnolia Bookmarklet

Same as the description above, just a different bookmark site. Pick your flavor.

For Internet Explorer

Web Development Toolbar

Probably the second best tool for web developers. Although we don’t like to think about it, IE still has a huge market share and if things looks odd in IE your users will notice. There is a Web Development toolbar for IE too. It doesn’t do as much as the Firefox extension but gives a great insight into how IE functions.

Web Accessibility Toolbar

Testing accessibility in IE like in Firefox is also possible. Not that I do it unless there is a specific issue with how IE renders the page, you might.

For PC

IE Tester

Now this is probably the best way to test your site in four versions of IE all within the same window. You can see the rendering differences just by flipping through the tabs. It even includes the latest IE 8 rendering engine.

WinHTTrack Web Site Copier

Often when we redesign a site we have to get a hold of all the content that is published without having direct access to their server. With this tool you just have to put in the URL(s) for a site and watch it go. It will download and localize all public accessible content on the domain. It is a great way to get all the PDF’s and Doc’s from a site and even see how many HTML pages they have out there.

Safari (PC)

If you only have access to a PC but want to see what OS X users are seeing? Now you can, Safari for the PC renders web pages the same as Safari for OS X. A great tool for PC users because Safari does have its quirks.

For Web Only

W3c Validator

Be sure to validate all your web pages, there is no excuse as a web developer to have invalid web pages out there.

Cynthia Says Accessibility Checker

Extending page validation making sure your web pages are accessible is key to being a professional web developer. It shows you know your craft and you care about your users. Not all users are as über as you, quite a bit have not only visual but also physical impairments. Make sure your web pages can reach all users effectively.

Free Site Validator – Validate an entire site

So what happens when your site starts to get too large to validate every web page manually? This Free Site Validator will validate your entire web site and let you know what pages don’t validate.

Clean CSS

Not only will this format your CSS it will also optimize it. For large sites I recommend a server based solution but for small sites this will do well. It is also great when you get CSS from a developer who is not as “well skilled” as you to bring it back to maintainable.

Opera – Small Screen Rendering

For OS X or PC Opera has a Small Screen Rendering ability that matches cell phone or PDA browser rendering pretty closely. It allow you to test how your web pages look without having to load them up on a cell phone every time you make a change.

For OS X

Parallels

There is more than one virtual machine software out there. I have tired a few of them and ended up like parallels the best. It mainly has to do with the tools it offers and the ability to seamlessly run Windows and programs right within OS X. There is no trapping the mouse and keyboard. (cost)

Coda

If you are a OS X developer and you want a more sophisticated tool than Dreamweaver, Coda is for you. It give you the elegance of OS X with the hard core coding tools of a real development platform. It also plays well with SVN so you can update and commit with elegance. (cost)

Transmit

A straight forward FTP, SFTP, WebDAV and even AmazonS3 supported application. If you need to do any of these on OS X this is the tool for you. (cost)

TextMate

Although there is a free version called Just my favorite text editor, there is also BBEdit and the free TextWranger. Tabbed and project view. (cost)

Conclusion

This is by far not a comprehensive list of web development tools, its just the set I use. I am sure you have one or two not on this list and we would love to hear about them, feel free to comment with the name, link and how you use it.

Related posts:

1. Website Optimization: The Why and How (Part II)
2. Web Development: Progressive Enhancement – Part 1
3. Firefox Add-ons for Higher Education Web

Admittedly, just because an open source alternative to commercial software exists, doesn’t mean it is good.  But, let’s look at a content management system, for example.  If you’ve ever had the chance to talk content management systems with me, you know I am a big proponent of dotCMS.  Why? Because it’s free, awesome, and crazy easy to use.  I have three words for you: Enterprise Open Source.  You might have heard about similar offerings from the likes of Drupal, who recently began offering a line of professional support for their open source CMS.  This is also basically what you pay for with things like Red Hat Linux.  The idea is that the software is free to use as you please, but if you need a backbone of support, you can pay for that, too.  Why this works so well for the likes of us is that it allows us to offer professional tools for a small (or no) line item on the budget.

Why is this important?  Simply put, have you priced things like RedDot or OmniUpdate lately?  Not to say they aren’t great systems, they are, but a lot of schools could see themselves coming into a demand to update their sites’ infrastructures without much in the way of financial support to cover such a change.  And while the temptation might be there for some to try and shoehorn a large and complex site into something like Joomla, it’s a good idea to know that there are better alternatives out there.  And CMS’s aside, if you are looking at applications for other areas of campus like community development, portals, CRM, etc, those costs can really add up fast.  Slap on top of that annual support costs and all you’ve really succeeded in doing is creating a great big money pit.

What dotCMS offers universities is a broad scoped tool, with granular permission controls, varied template designs, flexible content creation and repurposing, and an open source code base to build upon.  More importantly, being open source, there is a growing and very valuable opportunity for schools who have adopted it to begin networking.  These schools have the chance to pool resources towards goals.  Maybe that means taking several small amounts of money to do a “group-buy” on a desired feature (dotMarketing will custom code about anything you want and commit it to the code base, but if it’s off the normal roadmap, or a low priority, money obviously changes said positioning), or if the schools have committed Java developers, they could work on creating Viewtools and servlets that could then be shared between everyone.  It’s this spirit of communication, collaboration, and extension that makes a tool like this substantially more valuable than some closed source counterparts.

Enterprise support entirely aside, I am trying to encourage schools who have already adopted dotCMS to consider such a partnership.  There’s a group on the UWebD Ning site, and we’ve set up some basic help forums for the software.  My hope is that through collaboration, we can do a lot to help ourselves.  Users have a valuable opportunity to embrace and extend in ways that simply are not allowed or possible with commercial enterprise systems.  Imagine the driving force a network of committed schools can apply to open source projects that we see value in.  Not only can we make them better and grow them quickly, but we can expose people to the products.  Why do you think Apple loves getting contracts with schools?  When you get your product in front of people for hands on usage, when the time comes for them to make their own choice on what to use, what do you think they’ll choose?

Some schools have created similar approaches to CMS development with things like Zope/Plone, and there’s no reason we can’t do the same in other arenas.  We are in the market of knowledge, and it only makes sense that universities should be the breeding grounds for supporting open source initiatives.  That’s the very spirit that drives us, and it’s the way we can really begin to carve out a valuable niche for ourselves going into the future.

Better still, consider how you can take and apply this kind of mentality to other tools.  Maybe you use SugarCRM, or Collabtive project management,  or Moodle E-learning software.  Any of these tools could give you the chance to build with others.  As an office, our two man staff can’t cover a lot of ground, but if we can combine our efforts with other schools, suddenly we have some horsepower to apply to needs.  Now, that doesn’t me coordinating such efforts is either easy or fun, but once established, they can become invaluable lines of communication and development.  Ultimately, universities are well-oiled machines when it comes to spending money, and we’ve spent a lot of years thinking that any problem worth solving is worth paying someone to solve, but that’s just not a model that appears to stay solvent as we move into the future.  Open source software gives us the chance to not only do more with less, but to simply make ourselves as individuals and employees, more valuable.

Look at it this way: anyone can form a committee and hire a company to do a job, but if you are specifically skilled at developing products, and have a resume full of OSS building experience, and you can show how that translates into saved monies, you’ll be pretty darn secure into retirement.

Related posts:

1. How Edinboro University is Using dotCMS
2. [Guru Survey] Higher Ed CMS Usage
3. How Safe Is Your Job?